Starting to think responsively

Learn to build responsive websites - Module 3

This playlist is part of Learn Responsive Web Design

Starting to think responsively

45 lessons4 hours 7 min

1. Starting to think responsively

3. CSS Units - Percentage

4. Controlling the width of images

5. min-width and max-width

6. CSS Units - The em unit

7. The problem with ems

8. CSS Units - rems

9. Picking which unit to use

10. ems and rems - an example

11. Flexbox refresher and setting up some HTML

12. Basic styles and setting up the columns

13. Adding the background color

14. Setting the column widths

15. Spacing out the columns

16. Controlling the vertical position of flex items

17. Media Query basics

18. Making our layout responsive with flex-direction

19. flex-direction explained

20. Creating a navigation

21. Using flexbox to start styling our navigation

22. Making our navigation look good

23. Adding the underline

24. A more complicated navigation

25. Making the navigation responsive

26. Taking a look at the rest of the project

27. Setting up the structure

28. Featured article structure

29. The home page - HTML for the recent articles

30. home page - html for the aside

31. Starting the CSS for our page

32. Starting the layout - looking at the big picture

33. Starting to think mobile first

34. Styling the featured article

35. Changing the visual order with flexbox

36. Playing with the title's position, and the downsides of negative margins

37. Styling recent articles for large screens

38. Changing image sizes with object-fit

39. Setting up the widgets and talking breakpoints

40. Using a new pseudo-class to wrap-up the homepage

41. Creating the recent posts page

42. Setting up the About Me page

43. Fixing up some loose ends

44. Important Note: The viewport meta tag

45. Module wrap up