Introduction To Responsive Web Design - HTML & CSS Tutorial

) Intro.
) 1. Starting to think responsively.
) 2. CSS Units.
) 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. The Solution: 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 out layout responsive with flex-direction.
) 19. flex-direction explained.
) 20. Creating a navigation.
) 21. Using flexbox to start styling our navigation.
) 22. Making out 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 flex box.
) 36. Playing with the title’s position, and the downsides of negative margins.
) 37. Changing the visual order with flex box.
) 38. Styling recent articles for large screens.
) 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.
) Outro.