Introduction To Responsive Web Design - HTML & CSS Tutorial

Overview

Learn to build responsive websites from scratch in this comprehensive HTML and CSS tutorial. Master core concepts of responsive design, explore various CSS units like percentages, ems, and rems, and understand their appropriate usage. Dive into flexbox for layout control, implement media queries for adaptability, and create responsive navigations. Progress through hands-on exercises to construct a professional-level responsive website, including featured articles, recent posts, and an about page. Gain insights on mobile-first design, visual ordering with flexbox, and essential techniques like the viewport meta tag. Perfect for beginners and intermediate learners looking to enhance their web development skills.

Syllabus

) 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.