Responsive design made easy

Creating responsive sites can be a bit of a pain in the butt at times, but if you take it from a certain approach, you can make your life a lot easier

/// Links



/// Timestamps:
00:00 - Introduction
01:27 - Starting the project
11:21 - Setting up the custom properties
14:56 - Basic styling
24:08 - Starting the layout
33:03 - Adding complexity

#css

Thanks to Vlogbrothers for their sponsorship of this video!

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

Any opinions on the new keyboard? It's a lot louder. I love it, but very curious about your thoughts regarding the clickiness of it.

[joeldcanfield_spinhead]

This is golden: "HTML for the desktop, CSS for appearance, media queries for complexity." I've spent a week fighting my own code (okay, 10 days) because I wrote the CSS for the desktop, then went back and jammed the mobile bits in, then went back and forth breaking stuff until this morning when I gutted it and did it right. Whew.

[aryvidot]

Why is it so easy with you Kevin? Best CSS teacher on the planet.

[ThiagoAdomaitis]

Kevin, I just want you to know that you are the reason I didn't completely give up on learning CSS.

[lawrencepsteele]

I'm repeating myself here, and I'm okay with that. I love how you build CSS one piece at a time allowing us to see how each change brings us closer to the desired result. Moreover, where there are multiple ways to implement a style, you explain _why_ you picked a particular approach; in some cases you let us know both have equal merit and in other cases you let us know that other options exist and provide your experience why those options are less than optimal.

[DerDill]

Please always write the html code! It really helps me to understand how css and html works together and where to put the code in. Thank you Kevin!

[sunraiii]

Finally, someone that actually explains his thought process during the entire journey. Your videos on frontend topics are a godsend. Thank you so much!

[exactzero]

Responsiveness is the hardest part of CSS for me. Thank you for this and I hope more videos tackle this.

[insaneviruss]

Nailed the "Specificity" at 32:22!

[Daidera]

I am a fullstack for 6 years now and still find so many useful tips from your videos. Your content is extremely helpful, thank you

[sirharis]

This man’s skill of TEACHING css is underrated !

[yuriyzadorozhnyi]

Дякую Вам Kevin ! Перейшов на ваш сайт, це круто ! Дякую за можливість навчатися безкоштовно початківцям, в нашій країні в зв'язку з російською агресією нелегко заробити на навчання . Дякую всім жителям Канади за підтримку України !

[Lestibournes]

I had to make a poster for my college. I tried designing it in Inkscape, but it was too annoying to get everything sized and spaced exactly how I wanted. So then I decided to use HTML and CSS and tried to apply what I learned from your channel. It came out very nice.

[hefalump]

Thank you Kevin. I did your course first, before watching this video. In between, I built your website made easy, from about six years ago, but using Visual Studio Code and modern CSS instead of Git and SASS. That build, I felt, came out really well and has certainly boosted my confidence and watching your other videos, my knowledge of "modern" and cutting edge CSS. Happy I found your videos on YouTube.

[shilpasheth]

You are a time-savior person....whenever I get stuck I come to your videos.. bcz I know, no one has better solution than you! thanks a million from India! gonna apply your strategy now😁

[panosangel]

Maybe the best video out there in responsiveness! The explanations focus a lot in "why we do that" and then "how to do it".

[SoulJiuJitsu]

I'm just getting started with Web Dev learning and it is, in part, thanks to your videos. I learned so many little tricks and shortcuts to speed up my coding just watching you work. Incredibly insightful narration with wisdom all throughout. Thank you, Kevin!

[hashone]

Hi Kevin! - Just want to let you know that your video on "Having fun with CSS - styling stylestage", literaly saved me from quitting on my true passion for web dev. Ever since, I have literally been watching all of your videos and, man! I just love each and everyone of them.
Thank you so much for sharing such great knowledge and giving us such high quality content! <3

[MakoSDV]

Even with web apps designed for desktops only, I feel that responsive design is really helpful. Not every screen is the same resolution or orientation and the browser window may not be full screen. A desktop web app shouldn't fall apart under those situations.

[scribblingjoe]

Dude! You're the shortcut god of VS Code. I've been typing everything all this time. I'm taking notes.