Learn Responsive Web Design 101 from scratch

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (1h 44m)
    • 1. Introduction Video

      3:00
    • 2. Welcome

      1:58
    • 3. Getting Started

      6:26
    • 4. Page Structure

      5:14
    • 5. Adding CSS

      3:59
    • 6. Styling Our Page

      6:07
    • 7. Inspector Tool

      4:46
    • 8. A Quick Message From Yours Truly

      1:01
    • 9. Parents and Children

      2:34
    • 10. Adding a Gradient

      3:54
    • 11. Viewport Height

      2:43
    • 12. Content Section

      2:10
    • 13. Adding Content Spacing

      1:55
    • 14. Top To Bottom Styling

      1:06
    • 15. Grouping Styles Together

      2:05
    • 16. Fixing The Nav

      1:20
    • 17. Specificity And Nesting

      3:21
    • 18. Block Elements

      5:20
    • 19. Vertically Centering Elements

      1:56
    • 20. Box Sizing

      3:12
    • 21. Headers

      1:37
    • 22. Modifier Classes

      2:55
    • 23. Responsive Testing

      9:22
    • 24. Responsive CSS

      4:00
    • 25. Mobile First Responsive Design

      4:21
    • 26. Desktop vs Mobile First

      1:16
    • 27. Max Width and Container Sizes

      6:04
    • 28. Adding JavaScript

      4:03
    • 29. Adding Icons

      2:20
    • 30. Summary

      3:33

Project Description

In this course, the class project is creating a very small and simple fully responsive website. 

We'll start by creating a generic website in HTML. It'll be ugly at first, but then we'll add some CSS to make it nicer. We'll tackle subjects like margin vs. padding, the box model, top to bottom styling and common specificity problems in CSS. And then we'll add CSS media queries to make this web page fully responsive by making a floating image full-width, setting a container around our content so it looks nice on large screens, and changing the banner font size to be large on large screens and smaller on small screens. 

The final code can be downloaded so you can play with the exact code I've written. And if you have questions along the way, definitely feel free to ask questions! 

Resources(1)

Student Projects