Introduction To Responsive Web Design – HTML & CSS Tutorial
October 3, 2024 2024-10-03 19:48
Introduction To Responsive Web Design – HTML & CSS Tutorial
This tutorial teaches you to build responsive websites from scratch. It’s a part of The Responsive Web Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive
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: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
source
Comments (38)
@jackymarcel4108
Johnson Brenda Harris Barbara Walker Jose
@EddieSin.
53:10
@Keeby101
informative but not that great for a newbie, as he is speaking too quickly!
@8BitGamerYT1
Finished till navbar.
If you ever comeback, continue from making the navbar
@sarthakjoshi6326
Hello guys , i just wanted to create a website for my shop . Can i fully watch this video and go throught it . Can i host this website . Like can i use this for my day to day shop activities . Any help would be appreciated
@aaronargottelopez3488
Thanks!
@dharmindersingh7369
grrrrrreeeeaaaaaaatttttttt video
@LawalFadhlullah
what's the password to the adobe link?
@DaMu24
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!
@TCLKanxi
Wonder if you can do this effect with Javascript? Thank you! https://youtu.be/zqPy1bHUjrg
@zion-faithakakpo6602
03:28:00
@kaushalyahansana5844
Thank you so much!
@fernweh5636
Is here anyoune who's learning and want to talk maybe or chat and share?
@fatemehallzeidi2935
Can I use it in 2024?
@not_amanullah
thanks ❤
@monir26396
41:00
@olddfacenor
jjk 11:57
@dreamygirlijs
Awesome! 🎉
@mrcopywriter
Having bottom underline on hover
why not add border-bottom on hover instead of complex class?
@Naoty_san
16:28
@abintwarighislain4421
Thank you dear for your explanation you really explain well and I've like that thing of encouraging everyone to it by himself it very pay a lot
@vamshireddy8187
love u sir.
@0334796711
Does anybody know where can we get the code for this tutorial ?
@saeedhalabi
This is the best course, ever!
@razzaqmohammedali4653
How could I miss this gem since 2 years
@doublebeefstew
3:52:45
@igu642
❤❤❤❤
@Falah2M
Great effort 👍
@sakshigokhale11
Amazing lesson and really informative
@bluecollarscrooge3981
having trouble following along because he just shows part of the code part of the time. at the 8 min mark is the first code we see and makes it hard to figure it out.
@mkpoutoinyang5359
Does anyone know how we got the beginning code that he used to practice using CSS units? How do we get the basic website setup that we're altering, so we can follow along?
@yessirski7868
Where can I find the code for the first website?
@sambidao88
After several years of learning how to write effective CSS, I can now understand how to think with responsive designs. Thank you very much!
@deepaagarwal4647
is there a git repo for the code used in the course ?
@BorutoTheTraitor
amazing work
@Darius-Paul
I knew i know the voice and style of teaching. Thank you Kevin.
@gabibi3829
27:54
@alfin_efendi
very nice explanation with slide and example, either not a know much about english .