Introduction To Responsive Web Design - HTML & CSS Tutorial

[@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

[@asifahmed6568]

Thanks mate 😃😉

[@kevinahlgrenbjorvand4579]

Thanks for copy pasting the Bio!

[@ankittiwari1647]

THANKS

[@3453453425]

'5. min-width and max-width' starts at17:00

[@johncj6068]

Thanks for giving me the idea to get 100+likes in comments

[@keit7742]

私用 | 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！

[@clarenancy77]

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.

[@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!

[@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.

[@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!

[@lokeshnaidu2462]

2:18:50

[@rokd-o5k]

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!

[@twistedmetal7882]

Hello there. Hopefuly things are going fine with you

[@Scottni2]

Agreed, this vid is absolutely full of useful information 🔥

[@nakuldhingra3682]

Legends know he is Kevin Powell. The person with insane css skills Edit: Thankyou for Likes ♥️

[@jashanpreet880]

this guy is king of frontend

[@sheikh_sami]

Indeed 😅

[@khanbro6455]

absolutely he is

[@mustafaaljanabi4818]

its not a legend dummy look at the end of the video -_-

[@xjlegoanimations5666]

No

[@philippemartin4738]

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

[@fmsieck5540]

i thought i recognized that voice!

[@EnglishRain]

Sooo true. Excellent clear voice!

[@mohammadimami4507]

I knew I have heard this voice before, thanks Philippe Martin

[@chirag_soni_07]

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

[@extremespartan117]

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

[@hotvision]

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

[@marktwain3083]

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

[@leenasmr96]

i can relate

[@Leonartist]

And there is still even more not covered like base64 images, CSS sprite sheets, prefetching, image rendering styles, and tables (this one might be on its way out).

[@zahid_benu]

😁

[@f12736]

It's maybe impossible to know all about something, because new things are being added to everything.

[@samart3010]

where can i get source script?

[@evafish1303]

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

[@zeeshan95ahmed]

Yeah, exactly.

[@veselinalefterova1268]

i can not thank you enough ,Sir! I have been trough tons of videos and tutorials ...for the first time i actually understand WHAT is done and WHY it is done this way! You are an amazing teacher ,and a awesome human being! And i cannot thank you enough ! God bless you and the people you love! Thank you! Thank you! Thank you!

[@tamannakhan2579]

Where can I get all that adobe content, the link is not working which is mentioned in the video?

[@-0-__-0-]

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.

[@yannik8271]

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

[@abdulazizmashrabov6399]

Explaining the structure of a web page and analyzing how to think of it when it comes to CSS [2:18:50] was essential for me, so thank you once again!

[@burhanuddinmerchant877]

I can't express how thankful I am to this channel for this content,exactly what I was looking for.Thank You so much for this .

[@Valkinsenn]

A good tip for testing responsive design: open your page in your browser, right-click, and hit Inspect. While in Inspect mode, click the icon on the panel that looks like a phone sitting in front of a tablet. That'll allow for testing your page on different screen sizes, from 4K screens to smartphones. Best done with Chrome and its derivatives, like Vivaldi or Brave. Also, dock your Inspect panel to the left, if it isn't there already. It's a LOT less intrusive that way. :)

[@Hxrsh25]

thanks!

[@TheJ8one]

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.

[@physicalgrafiti12345]

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.

[@angkhoa8391]

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

[@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!

[@oviebenedictoghenemaro1942]

This is the best tutorial I have seen so far in my web development journey. The tutor is really great at teaching.

[@Shuvooa]

Great Video! Every frontend Web Dev Should watch this lecture.

[@allaboutsoftwaredevelopmen7434]

Great it’s a very helpful web development tutorial, really easy to understand by us beginners, furthermore I would also like to add that I regularly follow official blogs of world’s best web development firms like DCS, GoodCore Software and others because such official blogs are very latest and really insightful according to current ongoing web development practices, and do really help us in maintaining an edge in the field.

[@priyamly8966]

Goivgcx🔊

[@nikolaperjanica2126]

Best tutorial I have seen in a long time...Thank you Kevin so much!!!

[@mihaidogaru9938]

I honestly love this guy.

[@s0urp0wer5]

Had to nuke a build I worked on for hours and hours cause I didn't approach it mobile first. N00b mistake! Never hurts to grind the fundamentals and keep at it no matter how much you've done. Loved this video.

[@deewastamang9135]

The least i can do to help this channel is by not skipping the ads.

[@SurajSk-ik2zf]

I am completed the video finally . I really love to watch kavin video.

[@Darius-Paul]

I knew i know the voice and style of teaching. Thank you Kevin.

[@jerometalaue9092]

Thank you for this video. It helps a lot. From zero to hero. Looking forward to your next videos!

[@aitaya]

Everyone is a CSS pro until they see this video. Thank u so much I'm currently working on a school project, thought I can refresh my memory a bit but turns out I'm learning new stuff

[@shekar1996]

The best course on CSS responsive. Good explanation of media query

[@IlonaJosiane]

Extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

[@iiiverson]

Thank you all so much!! graduated and I can now write my own responsive web

[@esraamohamed5601]

Thank you so much for caring about both what you’re teaching and how you teach it.

[@xVecna]

This is what I need. I was able to type all code in half an hour to catch up to the start. Thanks for this, I need it because I am about to take a test on html and css, hopefully it's a great success. have fun and take breaks while learning.

[@KevinPowell]

Good luck on your test!

[@bernardseno2535]

Day 1: 2:07:19 Day 2: 2:14:15 Day 3: 2:40:00 Day 4: 3:27:57 Day 5: 3:35:44

[@riyadif6050]

Kevin Powell, you are a great teacher. Thanks for making this video.

[@kidpesto]

Unbelievably good video on intermediate level HTML and CSS web design

[@rabih3621]

42:09 em is relative to the font size of the actual element in example he changed the margin using em, because it is easy to say I only want half of that space That is why he use em for margin and bottom Rem for font size *media query should be at the end to override styles *img always display as block *30:02 article 70% sidebar 20%

[@asutoshrath3648]

Hey kevin nice to see you here! It is flexing how most of us knew he is kevin powell from just the voice

[@abdulalimmahir]

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

[@reenabharath9845]

@SuperSuniiside not only web development , almost everything

[@plneet3504]

@@reenabharath9845 Saved $14 from a Udemy course but image paying $10,000 for a single semester...

[@fortest4475]

@@plneet3504 You too?

[@archaeniac7846]

what am i missing if iam not taking the course your speaking about

[@imalwaysright1408]

@@plneet3504 that’s just in the US. Here in the great white North it’s “only” 8k :p

[@ikik790]

30 March 23 -> Bookmark 1:26:46 31 March 23 -> Bookmark 2:31:00 01April 23 -> completed

[@Rs-uz3jm]

Best course I can see improvement in my mindset after doing this course

[@oladotunoyegoke1367]

Great tutorial Kevin...I have struggled with the mobile first RWD approach. Thanks a bunch for this.

[@yashsahane8573]

The most useful video i have ever seen about responsive layout...

[@elliota6262]

Personal: Day 1: 44:04 Day 2: 2:14:16 Day 3: 2:40:40

[@watcher8819]

Wow this channel is too good to me

[@amirhoseinrezaei4069]

What a great teacher! Huge thanks to u, Scrimba and Freecodecamp.

[@jos-voragen]

This is without a doubt the best video about this topic! This was very helpfull for me. Keep up the good work!

[@abimbolaajayi2224]

You made tough things look easy, you are a good teacher, your teaching helped a lot. Thank you🙂

[@sawyoonsandy7827]

One of the most useful tutorials about CSS. Mr.Kevin you the best!

[@mrProgrammingGeek]

Dude, you are amazing!. Thanks for such a helpful and well-designed lecture.

[@deepaktiwari7059]

I was really searching for these from moths but every other video on responsive they just say about media fires etc . Thankyou soo much ❤.

[@ibrahims5457]

This is an awesome video & anyone trying to learn responsive web design should watch this. I'm here to revise my rwd skills... Amazing content!

[@randyzeroth4098]

This video was shockingly powerful and simple. Wow. Thank you so much!

[@Brandon-youtube]

One thing to note if we are following best practices and trying to be optimized for as many people as possible, around 18:30 you are talking about max-width. These days many screens are 4k which are over 2500 pixels wide so something to be thinking about

[@danimanabat5791]

Thanks a lot for this, sir Kevin Powell! Really helped me a lot for someone who suffers a lot with CSS

[@mohammedsaid982]

this is the first time i take cours in english and I'm Very happy thank you

[@shashankkr1008]

This is all I need to about responsive design. Thank You so much!

[@ProgrammingwithPeter]

This is so good, could've been better to use an editor so you could teach the newbies your workflow too, but still great!

[@qgh2636]

İs Atom editor good for learning this course?

[@gulamansari2701]

@@qgh2636 yup , atom or vscode you can go for any one of these.

[@johntony366]

@@qgh2636 Don't use Atom anymore. It's deprecated. Use VSCode instead.

[@wingszeyip9756]

Thanks so much for the video! I have learnt it step by step and feeling so satisfied to have made the 3 webpages. Will do it all over again to make sure I can practically use the knowledge i have learnt!

[@Tahir_Musharraf]

must watch video for beginner and medium level developers who really want to scale up their responsive website.

[@exzaf]

That is gold, bro. I've been using flex boxes for forever. i never knew you could make an unordered list have display: flex. I thought it was reserved for containers. That's insane

[@razzaqmohammedali4653]

How could I miss this gem since 2 years

[@kenxinhxc1635]

all of my problems had been answered by this video. thank you sir 😌😌😌

[@francismwangi9752]

Thanks Kevin, I've learnt a lot and I'm proud of it.

[@nalbantyilmaz]

This best css sourse I have ever seen. Thank you so much for the course

[@KevinPowell]

No problem at all!

[@nalbantyilmaz]

@@KevinPowell sorry I wanted type course :)

[@rahee3036]

Teachers like You and Videos like this one is making coding much more easier. Thanks a ton, Sir!

[@mazlumorhan]

just finished, thank you so much !! It's a good course for who knows css and html but just sucks at make responsive websites.

[@mudassirishfaq540]

Omg he is kewin sir ???? King of css is here again teaching us course of 4 hours ❤️❤️

[@dominicbarnes712]

This guy is really really good!!!!!!! very clear explanations with examples, and very practical approach

[@Digmen1]

Four hours! I'll need to go and make a coffee!

[@f12736]

Make 2.

[@sumanth3036]

Hey K Powell. Glad this is you here ♥️

[@shinoj5904]

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

[@abhishekshah11]

This is one of the best tutorials on css. Very clear explanation for rem and em! Thank you!

[@KevinPowell]

I'm super glad that you found it helped!

[@jenndelgado85]

Great course and well presented for me to understand and it break down the differences between em, rem, %, px and so on

[@GauthamHC99]

One of the best of best of the best video!!! I learnt many things ....Thank you so much.

[@__jake.m]

I'll be watching this fully. Thank you in advance! 🥳

[@hunbun4380]

You are so organized, it helps me to understand so easily

[@eduardoburquezsanz1910]

Really appreciate this tutorial is really good, I'm not native english speakers, i love the content and the way you teach it, but you talk very very fast! I've to put the speed at .75, Please take a breath more frequently 🥲

[@brianpalay]

4:09:19 Oh hello! (to Kevin, who probably won't see this personally) Thanks for this. New to front end development, and I hope to solidify these skills, then learn Javascript and apply for jobs first quarter next year.

[@Palak07798]

Perfect speed, Perfect explanation, Awesome content, the only thing i did not like about this video was that why is it for this course only and not all, awesome man awesome , thanks a lot

[@camillapantoja873]

This is what I needed, God bless you sir !!!!!

Wow you have such a gift for teaching, thanks a lot for this material!

[@susmoys]

God bless you my brother. What you have done is absolutely magnificent. Kudos to you.

[@ParidhiAgarwal-d3o]

it's such a good video ..well explained ...i have learnt a lot through this

[@dibbyarupdutta3525]

Thank you for this amazing tutorial. Loved every bit of it. Now I can also make a fantastic website. And Keep up the good work!

[@brandonzane519]

So happy to be subscribed to Scrimba

[@SuperValza]

Hi. I am only in 44 min, but I have already learned multiple new things where I really struggled on my first web page. Thanks a lot. Checked scrimba - I really hoped that it would be for free too, but after first 40 min I really consider to pay for it. Keep up good work.

[@MisterAadj]

Best tutorial ive seen so far. thankyou

[@codicts5149]

Hey guys, I just want to say thank you! for inspiring me to start my channel. Keep making great content! You guys are awesome!

[@fenilpatel1238]

U guys are doing really great work 👏

[@DeveloperJS-w1s]

Kevin Powell 👑 king of css

[@yatheeshgowda6191]

Kevin I just binged this old video of yours it's still gold man. Thanks for making such good content.

[@pradipmalla8059]

you really deserve like,comment,share and of course subscribe ..great work bro