Responsive and modern CSS
Finish the responsive page
Combine intrinsic Grid, one content-driven breakpoint, flexible media, focus styles, and reduced motion in the course project.
Review the course page from the smallest usable width upward.
Keep the card grid intrinsic with auto-fit and minmax(). Add a media query only where the hero or navigation needs a deliberate layout change. Make images flexible, links visibly focused, and controls large enough to use.
Then test:
- narrow and wide windows
- 200% browser zoom
- long headings and navigation labels
- keyboard-only navigation
- reduced motion
- light and dark browser preferences if your design supports them
Responsive work is finished when content remains usable across these conditions, not when it matches a handful of screenshots.
Quick check
Result
You got of right.
Lesson completed