Assignment: Advanced CSS Skills Assessment

Posted on by

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.