Objective: This assignment aims to assess your proficiency in advanced CSS, including selectors, layout techniques, animations, and responsive design.

Instructions:

Task 1: Complex CSS Selectors (15 points)

Create an HTML document with a basic structure containing headings, paragraphs, and lists. Then, use CSS to style specific elements using advanced selectors:

• Apply styles to even and odd paragraphs differently using :nth-child pseudo-classes.
• Style elements with specific classes and IDs.
• Use descendant selectors to style nested elements.

Task 2: Advanced Layout (20 points)

• Implement a multi-column layout using CSS Grid or Flexbox. Create a grid or flex layout for navigation, content, and a sidebar.
• Use media queries to change the layout for smaller screens (e.g., tablet and mobile) to ensure responsive design.

Task 3: CSS Transitions and Animations (20 points)

• Apply CSS transitions to create smooth hover effects for at least two elements (e.g., buttons, images).
• Create a CSS animation for an element (e.g., a rotating image, fading text).
• Ensure that animations are well-timed and visually appealing.

Task 4: Custom Fonts (15 points)

• Include and apply a custom web font from a reliable source like Google Fonts or Adobe Fonts.
• Use the @font-face rule to add a locally hosted font and apply it to specific elements.

Task 5: Pseudo-elements and Pseudo-classes (15 points)

• Utilize pseudo-elements like ::before or ::after to add decorative elements to your web page.
• Implement styles for links using pseudo-classes like :hover, :visited, and :active.

Task 6: CSS Variables (10 points)

• Define and use CSS variables (custom properties) to maintain consistency in color schemes or other design aspects across your web page.

Task 7: Advanced Selectors and Combinators (10 points)

• Implement complex CSS selectors, such as combinators (>, +, ~) to target specific nested elements.
• Use attribute selectors to target elements with specific attributes.

Task 8: Compatibility and Fallbacks (10 points)

• Ensure that your CSS is cross-browser compatible and include vendor prefixes where necessary.
• Provide a CSS rule as a fallback in case a browser doesn’t support a particular property or value.

Submission:

Submit your HTML file (.html), external CSS file (.css), and any associated resources (fonts, if applicable) in a zip folder. Include your name in the file name (e.g., “YourName_Advanced_CSS_Assignment.zip”).

Grading:

Your assignment will be graded based on the completeness, correctness, adherence to CSS standards, creativity, and responsiveness. Make sure your code is well-structured and well-documented.