Learn to build responsive websites through hands-on practice with CSS units, Flexbox fundamentals, and media queries in this comprehensive tutorial. Master essential responsive design concepts including percentage-based layouts, em and rem units, and flexible image control techniques. Explore Flexbox properties for creating dynamic column layouts, controlling vertical positioning, and managing spacing between elements. Discover media query implementation strategies and learn to adapt layouts using flex-direction changes for different screen sizes. Build practical navigation components that transform seamlessly across devices, from simple horizontal menus to complex responsive navigation systems. Apply mobile-first design principles while constructing a complete multi-page website project featuring a homepage with featured articles, recent posts sections, and sidebar widgets. Practice advanced techniques including visual reordering with Flexbox, negative margin positioning, object-fit for responsive images, and pseudo-class selectors for enhanced styling control.

Syllabus

1. Starting to think responsively - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial