Introduction To Responsive Web Design - HTML & CSS Tutorial

However, this 4-hour tutorial stands fully on its own legs. It starts with explaining the core concepts needed to start thinking responsively, and then it takes you through every single step in building a professional-level responsive website.

⭐️ Course content ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:02:59) 1. Starting to think responsively
⌨️ (00:06:01) 2. CSS Units
⌨️ (00:09:16) 3. CSS Units - Percentage
⌨️ (00:15:14) 4. Controlling the width of images
⌨️ (00:20:05) 5. min-width and max-width
⌨️ (00:22:54) 6. CSS Units - The em unit
⌨️ (00:28:25) 7. The problem with ems
⌨️ (00:30:58) 8. The Solution: Rems
⌨️ (00:35:46) 9. Picking which unit to use
⌨️ (00:39:18) 10. ems and rems - an example
⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML
⌨️ (00:55:02) 12. Basic Styles and setting up the columns
⌨️ (01:02:09) 13. Adding the background color
⌨️ (01:06:21) 14. Setting the column widths
⌨️ (01:10:00) 15. Spacing out the columns
⌨️ (01:14:27) 16. Controlling the vertical position of flex items
⌨️ (01:19:42) 17. Media Query basics
⌨️ (01:29:50) 18. Making out layout responsive with flex-direction
⌨️ (01:36:45) 19. flex-direction explained
⌨️ (01:39:54) 20. Creating a navigation
⌨️ (01:44:40) 21. Using flexbox to start styling our navigation
⌨️ (01:52:19) 22. Making out navigation look good
⌨️ (01:59:38) 23. Adding the underline
⌨️ (02:03:40) 24. A more complicated navigation
⌨️ (02:10:25) 25. Making the navigation responsive
⌨️ (02:17:20) 26. Taking a look at the rest of the project
⌨️ (02:21:34) 27. Setting up the structure
⌨️ (02:29:59) 28. Featured article structure
⌨️ (02:35:07) 29. The home page - HTML for the recent articles
⌨️ (02:37:39) 30. Home Page - HTML for the aside
⌨️ (02:43:45) 31. Starting the CSS for our page
⌨️ (02:59:15) 32. Starting the layout - looking at the big picture
⌨️ (03:07:48) 33. Starting to think mobile first
⌨️ (03:10:37) 34. Styling the featured article
⌨️ (03:17:03) 35. Changing the visual order with flex box
⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins
⌨️ (03:27:05) 37. Changing the visual order with flex box
⌨️ (03:31:00) 38. Styling recent articles for large screens
⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints
⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage
⌨️ (03:53:12) 41. Creating the recent posts page
⌨️ (03:56:39) 42. Setting up the About Me page
⌨️ (04:00:54) 43. Fixing up some loose ends
⌨️ (04:05:27) 44. Important Note. The viewport meta tag
⌨️ (04:09:10) 45. Module wrap up
⌨️ (04:12:24) Outro

--

[nakuldhingra]

Legends know he is Kevin Powell. The person with insane css skills

Edit: Thankyou for Likes ♥️

[marktwain]

I thought I knew everything about responsive design before watching this course.
How naive I was...

[DaMu]

This video being available for free is great, but what's even greater is included Transcript, Timestamps, and enabled Clipping! Makes taking notes and references so much easier, I am very grateful!

[AlvomaniaDK]

I confess to you that I had difficulty in assimilating how most things work when it comes to RWD, but you have really given me a light year of enlightenment with this tutorial. I am more than grateful. Thank you indeed for taking the time for this tutorial.

[clarenancy]

Wonderful! I haven't built a website from scratch in 13 years. But now I'm recently laid off and need to refresh, advance my knowledge. Your teaching style is amazing. I feel like I'm back in college with my favorite professor and those accelerated course.

You, sir, are a godsend.

[rokd-ok]

I know this is a old video but, man this is really helping me a lot.
I've been using this tutorial to practice my HTML and CSS skills and I've improve a lot. The explanation on how to do a good navigation bar really helped me. Also how he explained the flex-box basics and the axis shift. I'm grateful because I'm from Venezuela and I'm learning because I hope to become some kind of "freelancer".
Muchas gracias pana!

[philippemartin]

Your diction and the speed are perfect in this video, thank you Mr Powell !

[Apollyion]

What a great course! I'm at 3:05:10 and so far I'm like a sponge sucking all the tips and knowledge and at this point "Thinking mobile first" is overwhelming without finishing the already started job. Persistence is a must!

[extremespartan]

Thank you Kevin. I really appreciate how you went about structuring your HTML. That's something I've always overlooked but is absolutely essential.

[chirag_soni_]

I find myself lucky to find this video. Godamn it, this guy's amazing. The way he experiments on screen, I'M FAN.

[hotvision]

This is the most phenomenal course on this subject, thank you so much!

[evafish]

Wow thanks a bunch, it really helped me to structure my CSS knowledge! I first tried to build the site on my own, got frustrated at certain points, and eventually it turned out to look ok but the code was messy.. But then I followed along with the tutorial, and the result came out so neat that now I’m super satisfied and motivated to keep learning. Grateful for the guidance and all the useful tips! Thanks for sharing the expertise

[AdamsProgrammer]

⭐️ Course content ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:02:59) 1. Starting to think responsively
⌨️ (00:06:01) 2. CSS Units
⌨️ (00:09:16) 3. CSS Units - Percentage
⌨️ (00:15:14) 4. Controlling the width of images
⌨️ (00:20:05) 5. min-width and max-width
⌨️ (00:22:54) 6. CSS Units - The em unit
⌨️ (00:28:25) 7. The problem with ems
⌨️ (00:30:58) 8. The Solution: Rems
⌨️ (00:35:46) 9. Picking which unit to use
⌨️ (00:39:18) 10. ems and rems - an example
⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML
⌨️ (00:55:02) 12. Basic Styles and setting up the columns
⌨️ (01:02:09) 13. Adding the background color
⌨️ (01:06:21) 14. Setting the column widths
⌨️ (01:10:00) 15. Spacing out the columns
⌨️ (01:14:27) 16. Controlling the vertical position of flex items
⌨️ (01:19:42) 17. Media Query basics
⌨️ (01:29:50) 18. Making out layout responsive with flex-direction
⌨️ (01:36:45) 19. flex-direction explained
⌨️ (01:39:54) 20. Creating a navigation
⌨️ (01:44:40) 21. Using flexbox to start styling our navigation
⌨️ (01:52:19) 22. Making out navigation look good
⌨️ (01:59:38) 23. Adding the underline
⌨️ (02:03:40) 24. A more complicated navigation
⌨️ (02:10:25) 25. Making the navigation responsive
⌨️ (02:17:20) 26. Taking a look at the rest of the project
⌨️ (02:21:34) 27. Setting up the structure
⌨️ (02:29:59) 28. Featured article structure
⌨️ (02:35:07) 29. The home page - HTML for the recent articles
⌨️ (02:37:39) 30. Home Page - HTML for the aside
⌨️ (02:43:45) 31. Starting the CSS for our page
⌨️ (02:59:15) 32. Starting the layout - looking at the big picture
⌨️ (03:07:48) 33. Starting to think mobile first
⌨️ (03:10:37) 34. Styling the featured article
⌨️ (03:17:03) 35. Changing the visual order with flex box
⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins
⌨️ (03:27:05) 37. Changing the visual order with flex box
⌨️ (03:31:00) 38. Styling recent articles for large screens
⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints
⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage
⌨️ (03:53:12) 41. Creating the recent posts page
⌨️ (03:56:39) 42. Setting up the About Me page
⌨️ (04:00:54) 43. Fixing up some loose ends
⌨️ (04:05:27) 44. Important Note. The viewport meta tag
⌨️ (04:09:10) 45. Module wrap up
⌨️ (04:12:24) Outro

[--__--]

Oh my god thank you so much. Ive spent almost 1 week making a login page responsive on most sizes and your video helped me a lot.

[keit]

私用 | Personal
22.10.23 → 22:07 (Min-width, Max-width)
22.10.24 → 1:05:06
22.10.25 → 1:26:46 (Media Query)
22.10.26 → 2:15:09 (Navbar responsive)
22.10.27 → 2:25:25 (Structurally breaking it down)
22.10.29 → 完了!

Thank you so much for this course！

[abdulalimmahir]

It almost covered 2/3 of a paid Course from Udemy. What else I can say?

[yannik]

How could someone give this vid a dislike? Thanks for the great content!:)

[physicalgrafiti]

This is the only tutorial video on this specific topic I have seen that isn't useless. Every single one starts off with dozens of lines of code without even showing what the code is doing. And claim they're for beginners, but use bits of concepts that require more in depth knowledge. Effectively preventing you from actually learning how to make anything, and just being able to repeat something without knowing what you're doing.

[angkhoa]

Been learning from Kevin Powell few weeks, gotta says the man teaches with his passion

[TheJone]

One of the best vids on responsive design!! You explain everything so well and you go through the thought processes of why one way may be better or when another may be better. This shows that you understand the subject matter very well. I learned so much from this video.