CSS: final assessment
This covers the whole course. Take it after the last module.
Final quiz
Practical assessment: Rescue a broken stylesheet
Write a small card component from scratch, with a title, image, text and a button, and arrange three of them in a row that wraps on narrow screens, meeting every point below without using any hints.
- Uses border-box sizing, and has no sideways scrolling at 320 pixels
- Uses custom properties for every colour and for spacing
- The button has hover and keyboard focus styles with a short transition
- Selectors are single classes, with no ids and no !important
- The image cannot overflow its card
Final project
A responsive landing page: Take a small, plain HTML page for a product of your choice, and style it into a complete landing page that works on a phone and on a large screen.
How it is evaluated
- Correctness: the page matches the requirements in the browser
- Responsiveness: the layout works at every width from 320 pixels up
- Accessibility: contrast, focus styles and reduced motion are handled
- Maintainability: low specificity, shared variables and consistent naming
To complete this course
- Score at least 70% on the final quiz
- Solve the beginner and intermediate exercises in every lesson
- Finish the final project and check it against the evaluation criteria