8. Responsive Design
HTML/CSS Lesson Categories
More than half of all web traffic comes from smartphones, which means every website you build needs to look great on any screen size. These lessons cover the viewport meta tag, CSS media queries, and the difference between max-width and min-width breakpoints — plus how to hide and show different content depending on the device.
Ready to test your knowledge?
8.1 Responsive Website Design
Learn what responsive web design means, why it’s essential in a mobile-first world, and the core principles behind building sites that adapt to any screen size. Start the Responsive Website Design Lesson
8.2 The Viewport Meta Tag and Media Queries
Learn what the viewport meta tag does and why every page needs it, then learn how to write media queries that apply different styles at different screen widths. Start the The Viewport Meta Tag and Media Queries Lesson
8.3 Showing Different Content on Mobile
Learn how to combine display: none with media queries to show desktop-only or mobile-only content, and how to stack columns on smaller screens. Start the Showing Different Content on Mobile Lesson