Completed
) 32. Starting the layout - looking at the big picture
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Introduction To Responsive Web Design - HTML & CSS Tutorial
Automatically move to the next video in the Classroom when playback concludes
- 1 ) Intro
- 2 ) 1. Starting to think responsively
- 3 ) 2. CSS Units
- 4 ) 3. CSS Units - Percentage
- 5 ) 4. Controlling the width of images
- 6 ) 5. min-width and max-width
- 7 ) 6. CSS Units - The em unit
- 8 ) 7. The problem with ems
- 9 ) 8. The Solution: Rems
- 10 ) 9. Picking which unit to use
- 11 ) 10. ems and rems - an example
- 12 ) 11. Flexbox refresher and setting up some HTML
- 13 ) 12. Basic Styles and setting up the columns
- 14 ) 13. Adding the background color
- 15 ) 14. Setting the column widths
- 16 ) 15. Spacing out the columns
- 17 ) 16. Controlling the vertical position of flex items
- 18 ) 17. Media Query basics
- 19 ) 18. Making out layout responsive with flex-direction
- 20 ) 19. flex-direction explained
- 21 ) 20. Creating a navigation
- 22 ) 21. Using flexbox to start styling our navigation
- 23 ) 22. Making out navigation look good
- 24 ) 23. Adding the underline
- 25 ) 24. A more complicated navigation
- 26 ) 25. Making the navigation responsive
- 27 ) 26. Taking a look at the rest of the project
- 28 ) 27. Setting up the structure
- 29 ) 28. Featured article structure
- 30 ) 29. The home page - HTML for the recent articles
- 31 ) 30. Home Page - HTML for the aside
- 32 ) 31. Starting the CSS for our page
- 33 ) 32. Starting the layout - looking at the big picture
- 34 ) 33. Starting to think mobile first
- 35 ) 34. Styling the featured article
- 36 ) 35. Changing the visual order with flex box
- 37 ) 36. Playing with the title’s position, and the downsides of negative margins
- 38 ) 37. Changing the visual order with flex box
- 39 ) 38. Styling recent articles for large screens
- 40 ) 39. Setting up the widgets and talking breakpoints
- 41 ) 40. Using a new pseudo-class to wrap-up the homepage
- 42 ) 41. Creating the recent posts page
- 43 ) 42. Setting up the About Me page
- 44 ) 43. Fixing up some loose ends
- 45 ) 44. Important Note. The viewport meta tag
- 46 ) 45. Module wrap up
- 47 ) Outro
