This tutorial teaches you to build responsive websites from scratch. It’s a part of The Responsive Web Design Bootcamp at Scrimba:
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.
The teacher is the brilliant Kevin Powell, who’s well-known for his videos on HTML and CSS here on YouTube. You can check out his channel here:
⭐️ 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
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
how are you guys using the browser as a multi window like that in mac?
52:00
2:49:08
hello does anyone have a link to the video/files where he builds the first layout please ?
Thanks Kevin…..That was super super awesome
thanks for this awesome course
thank u so much for doing this, it was so helpful 🤍
hey I think that there might a problem with the timestamps.
i really like video
there is not any good video on this topic
Thank you so mch
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
The bookmarks are off.
Thank you sir. U did a great job
Really Helpful
a responsive web design without using grid? this is old
Is this Kevin Powell?
Can I make a restaurant website with only css and html to actually use for a restaurant? It’s a very simple website that’ll just display info and link to a online ordering site. Will the website run into problems if I only use html and css? And also, is php needed?
Can I make a restaurant website with only css and html to actually use for a restaurant? It’s a very simple website that’ll just display info and link to a online ordering site. Will the website run into problems if I only use html and css? And also, is php needed?
2:18:59
Thanks a lot for this tutorial !
it really helped to understand flex-box and media queries
1:00:00
Where is the prototypes/mockups link?
BTW I learnt more new professional concepts from here, Which I really needed.
But how to download the resources
Can someone tell me why at 2:03:00 he is not using Display Flex property on the container? What is the difference giving it that way and the way he did(using modifier class)?
Hello ,what are prerequisite for this course ?
I have problems with making my font responsive in mobile mode. They're not consistent and also get really complicated to resize every element inside our page.
Nice job Kevin.
1:03 display is not visible
Awesome !!!!! <3. I learned a lot from this video.
This video is excellent…thank you for helping me improve my web design skills!
Done
where can i get these html files?
can you share the code of starting web page you used during the tutorial
is there a link to download the HTML and CSS file he is working on?
Thank you so much for this! It’s so appreciated
Is it just me or did everyone recognised ho voice legendary Kevin Powell
2:40:00
Great! You are Kevin Powell
thank you for this wonderful courses. more power to you
this is the first time i take cours in english and I'm Very happy
thank you
where to get code for the course???
The most useful video i have ever seen about responsive layout…
waaaa the best tutor wonderfull
The least i can do to help this channel is by not skipping the ads.
How do I get the course resource to follow along please?