Responsive design made easy

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

[@c__beck]

Louder? Sure. But mechanical keyboards have a _very_ satisfying sound!

[@kdfksfkldsklfkldsff]

@@c__beck they do

[@KevinPowell]

@@c__beck very satisfying to type on it too :D Just worried that it'll drive people nuts listening, but if it's a little keyboard ASMR I'm happy cause then I don't need to get new switches, lol.

[@samsonxon]

Less sticky high pitch squeaks; could be EQ’d out

[@AayanamAnirudh]

@@KevinPowell Can u give the link for it in amazon....thanks

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

[@lineCooking101]

I'm walking down that same road today, on a pretty large scale. Yikes!

[@coltonaallen]

I'm currently in that abyss right now! I should have started mobile first! Ugh! So difficult. I'm probably just going to rewrite the entire css from start to implement this.

[@royersegura5991]

I write to you all to tell you that I am there today. One thing I learned from talking to my mentor is that it's better to create a then work on the responsive design of that page before you create another.

[@kubii2404]

Ugh this is where I’m stuck spent days trying to figure out how to make it mobile responsive breaking code thinking I fixed it only for something else to break I’m at the point of giving up trashing it all together and starting all over

[@aryvidot2252]

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

[@abdulazizmirsagatov]

Absolutely! I don't search html/css when I want to learn it, I search Kevin Powell

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

[@KevinPowell]

Glad that you like my approach :D

[@latisha6034]

@@KevinPowell this is what sets you apart from the “crowd”. You don’t teach us your way and your way only. All the while downplaying the power of other useful information just because you don’t prefer it or even like it.... You teach us ALL ways and encourage us to find our own personal path that fits us best. You’re the best CSS teacher hands down!!

[@IamPetrus]

Every time I am messed up with anything I am building I search a bit throughout KP videos and find the solution. Is just as easy as it sounds

[@IamPetrus]

I'm also repeating myself here, but Kevin, man, you are a star. Who's Mick Jagger???

[@thierrybangun8339]

This is why Kev is the CSS god hahaha

[@niteshkrsah2222]

❤️ my css teacher

[@spythere]

@@ccriztoff They still got better chances to be a decent programmer than you, considering that half of your responses here are literally "cringe".

[@spythere]

@@ccriztoff What? What has my GitHub to do with what I said? "Cringe".

[@spythere]

@@ccriztoff I feel so exposed :) I just still don't see the connection between this conversation and my personal information "leaked" on my GitHub.

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

[@yuriyzadorozhnyi3849]

Дякую Вам 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!

[@Daidera91]

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

[@shilpasheth4493]

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😁

[@sirharis7462]

This man’s skill of TEACHING css is underrated !

[@exactzero]

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

[@panosangel2883]

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

[@br1580]

Spent all day learning from this video and following along. I've learnt a tremendous amount. The val()'s are a game changer. Thanks for the vid.

[@insaneviruss]

Nailed the "Specificity" at 32:22!

[@KevinPowell]

I think I've finally figured it out!

[@joeldcanfield_spinhead]

Ha! I caught that too. H'ray!

[@hefalump56]

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 KZbin.

[@scribblingjoe]

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

[@coltonaallen]

I know, right? It's like emmet is it's own language that needs to be explored! So much for stuff to do

[@sandipb]

Was searching KZbin for an emmet tutorial right now. Lol.

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

[@hash5one600]

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!

[@Furki4_4]

I didn't have the mindset of adding complexity after setting up the mobile layout. I've learnt lots of new properties, features like rem, em, min, max, clamp, media queries and so on which are all taught by you. I can't thank you enough ! Time to take the free course, and practise more 'n more!

[@bharathvarma2361]

Good teacher for Front-End developer

[@8koi139]

YES after so many videos of KZbinrs talking about being responsive!! tnx as always!

[@MrQooje2]

This was an eye opening. Starting with moile siplifies the whole process.

[@Ayomikun]

You use emmet in pretty much every video, but for whatever reason, your use of it in this video left me in awe

[@gollosus8741]

Stuck in Kevin's tutorial hell and loving every second of it!

[@eccomusic1386]

@39:49 When Kevin noticed he wasn't looking at the right webcam. That expression was funny and cute at the same time. Thanks so much for the free tutorials Kevin. You helped me a lot and I still continue to watch your videos. Truly the god of CSS !

[@soulhazetv]

Before YT algorithm blessed me with your videos, I thought I was stupid. Watching other tutors, I was getting nowhere. They do something in CSS and say something along the lines "it goes like this" and no further explanation. What the thing does, why, how, what it means... nothing, just we need to set this parameter like this. Your videos are a blessing for someone who is just starting. You explain everything well and is understandable, thank you!

[@KevinPowell]

Really happy to hear that you like my approach to teaching 🙂

[@jurajkirin7708]

I'm beginner and this tutorial help me a lot. I didn't have idea how to make responsive web site, now I have it. Thank you so much for tutorial.

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

[@jenso413]

your channel is such a godsend for someone like me learning web dev. thank you!

[@Chris-gz4ie]

You just got a subscribe the only person that did a good job at explaining responsive design please make more videos on this I have been struggling so bad on this topic

[@keronwilliams5392]

This video changed my life 😂. Thank you Powell, great tuts as per usual!

[@mattmovesmountains1443]

I just learned more css tips in this video than in most of the other videos that I've watched combined. The simplification, the focus on why/when to use them.. was all so helpful. Also the amount of times I was legitimately excited about the thing I just learned tells me that (1) I'm as nerdy as I thought I was, (2) I'm working on the right career. New subscriber!

[@KevinPowell]

Super glad that you enjoyed it, and welcome aboard!

[@guillermoandradaFSD]

Sincerely, I dislike keyboard noise, but kinda was focused and amazed with your explanation... Thank you so much. You are a "crack" (that's how we, Argentinian people call to someone who handles professionally his own stuff). Keep forward ⏩⏩⏩... You rock it.

[@dr.professour9606]

I can say you're just awesome! it's been 2 years and I thought you gonna use old-school designing methods, but your channel is always updated to the changes which makes you awesome! Keep going awesome, from Egypt.

[@dannyyang9181]

I appreciate you showing us the HTML along with the CSS. It is helpful to see how to structure the HTML to work well with the CSS. Great work!

[@corriebotha7205]

Started learning front end development 4 months ago and your videos help sooooo much when it comes to responsiveness and design🙏

[@alinag188]

Man.. I'm a newbie with all this Web Development stuff, just trying to learn HTML + CSS for now in order to start my journey as a developer, and this is the second video that I'm watching on your channel, and I told myself: "I gotta leave a comment on here and tell this man that he is doing a great job!". You explain things so well, and at the end of this video I'm leaving with much more knowledge than I've had 42min and 39 seconds ago, lol. You're really good at this, keep it going, and you've just got a new subscriber. Cheers!

[@Jennifer-ju8de]

its amazing that you know so much of css and still produce a 1995 layout. Absolutely top notch skills.

[@anaisrevellat5692]

Your videos are clear, you keep your humility with a very professional way in your approach, I am a French future web developer, so thank you for your work and this quality.

[@BreatheWithoutHS]

Love your content and the way you look and talk to the wrong camera. Nice to have you Kevin.

[@Lobaluna9333]

Your keyboard is loudy, yes, but it's impossible for me to stop enjoying your magnificent classes! What I like most is the insights you give us when you are designing a web site. That's what a true teacher does. Congratulations! I hope you don't soon get weary of this great channel ;D

[@pcartisan2721]

Thank you Mr. Bob Ross of CSS! 😉 At 7:15mins. when you said it was ok to enter a little extra text (the lorem 29), I thought of Bob Ross when he demonstrates how to paint. Maybe you could find a wig like his hair and do one of your future videos about laying out a picture gallery, with beautiful mountain scene pictures, just like he painted. P.S. ALL Of your videos are AWESOME, especially the Emmett shortcuts you share in this video. God bless you for all of your hard work.

[@KevinPowell]

Haha, that would be pretty funny. And glad you like my content :D

[@genieloubrogan8284]

I really like that you talk in a casual fashion for plain comprehension purposes. As a beginner I think explaining how things work first before jargoning is more important to me when learning as a newbie. The lingo of developers always throws me off.

[@isaaccarter7786]

I almost didn't watch this video, so glad i did. It completely changed how i look at code. I'm the guy who codes section by section 😅 Not anymore! Liked and subscribed. Thank you 👍🏼

[@ChrisPirillo147]

You're a lifesaver, Kevin! This video is exactly what I was looking for and it perfectly explained how to tackle the structure of a real website.

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

[@matthewblack3957]

Kevin, the only thing I have to say is I wish I'd have found your channel sooner! The way you explain CSS makes it so easy to understand. You take your time to explain what you're doing and why, and for someone that is more of a visual learner it really helps. Thank you for your hard work and the great videos and tuts!

[@Nedwin]

You are the Yoda of CSS. Glad to find your channel. Subscribed! ❤️

[@JennyZibreva]

What I never get is: how the heck do Kevin's videos get any dislikes at all?! Kevin thank you so so much for a great content - just as always!

[@mladenkaorlic]

We've got a real MVP over here, amazing teacher and gives out free courses! I can't wait to finish 21 day challenge now, even though I was giving up before the video.

[@atmanvisual190]

I was just doing research on responsive design without really knowing what I was after and it turns out this was it. Thanks a lot!

[@halfish757]

I've been brushing up on my css lately and your vids have been very helpful

[@CC-wo2xc]

OMG! That container-narrow class was definitely needed today! That’s awesome. Thanks for sharing!

[@thomask.7978]

Many thanks Kevin for your dedicated contribution to learning better web development. I'm not sure what I admire more - the splendid lesson you teach or your attitude i. e. sharing this for free.

[@moegamatismaillewis1652]

Thank you so much I used this video to do my task and follow step by step. I really can not thank you enough

[@s0ulweaver]

Kevin & Kyle are the 2 people who made CSS from an arch nemesis to a dependable friend for me.

[@ozkaa]

really appreciate all the work you put into these brilliant tutorials. I'm a backend dev trying to go full-stack and your vids are helping me a bunch

[@dave6012]

Fat chance you’ll read such an old videos comments, but I love that you added html. Sometimes the hardest part is organizing the markup into manageable containers that can be moved around at smaller screen sizes. Especially when it comes to selectors.

[@neilduran2335]

Hi, I've just joined your free conquering-responsive-layouts course. Thank you very much and I look forward to learning some serious skills!

[@sakumi2941]

Making a responsive design is one of my biggest struggles. I think this video will be very useful since I am planning on making a personal website. Thank you!

[@aspsa6246]

Thank you for the video. As usual, you demonstrate that rare combination of conveying expert-level knowledge in a conversational manner. Could I get the same information from the CSS specification? Yes, of course, but you present it in a condensed form and then contextualize it into digestible units. What I learned from you in this 42+-minute video would have taken hours of boring CSS specification reading, and, with 100% certainty, I would not have gleaned the same level of understanding from the CSS specification as I have done with your video. In all fairness, there are sources on KZbin and elsewhere that also offer great CSS content, but you are one of the select few who can keep an audience engaged while learning. Kudos.

[@nikkehtine]

Just when I needed to make a responsive website for homework you upload this video. Thank you my hero!

[@ronellepillay4551]

Hi Kevin , I am new to web development , html and css. Your videos have really helped me alot. Thank you for taking time to help me and the many others out there 😊

[@harmonicresonanceproject]

Really helpful to take my approach to the next level and develop good habits to start out with.

[@gyappumusoka4016]

Thank you so much for this incredibly helpful video. I love how you give just as much focus to how we should approach our design workflow.

[@latinofac1981]

The kind of video that makes us wish to have a "super like" button in You Tube!

[@hugohamon4554]

Brilliant tutorial! As a backend developer with 15+ years of web development experience, I'm rediscovering the simplicity of HTML & CSS with modern sugar on top of it :)

[@Lestibournes]

I'm using this video as a reference. Suddenly I understand what the hell I'm doing and getting the layouts I want, and so much more easily.

[@KevinPowell]

So happy to hear that!

[@Lestibournes]

@@KevinPowell I was trying to make responsive layouts without media queries, but that took so much more time and effort and I needed to do a huge amount of trial and error, was difficult for me to comprehend, and seemed fragile and didn't work 100% as intended. Then following this video I redid some things and I got almost exactly what I had in mind quickly and easily and I know exactly what's happening and why.

[@MrSidverse]

Thankyou so much for these tutorials sir. I request you to post more often so that we can learn more and more from you.❤️

[@KevinPowell]

The plan is to go up to 2 videos a week starting in January :D

[@An-yh2bl]

I am sooo glad that I have found your channel! You are an excellent teacher thank you for your work! 🤗

[@rohitpurkait6951]

You are really the greatest teacher ever

[@jamiroquaiordie]

what a great guy you are, kevin. thank you for your vibe and your knowledge!

[@latisha6034]

Is there ANYONE else out there that even comes close to teaching us the way this man does !? I don’t , but you can, count the videos who don’t talk and instead only play background music. Some are great but they leave me with more questions than answers a lot of the time...: Kevin never leaves me scratching my head saying, wait what? Lol

[@marianagranadosgonzalez09]

Thank you Kevin, I was ready to give up on CSS but this video gives me a lot of insight to how to properly use css and html in conjunction

[@UmutYerebakmaz]

Hello Kevin, i follow your videos carefully. You are a great educator.

[@KevinPowell]

Thanks so much!

[@kcnative4130]

Thank you so much for this video. I am more adept with backend stuff but wanting to become at least competent in design to round out my skillset. This was insanely helpful and you have a new subscriber for life.

[@andrewperez7844]

After delving into react and some backend tech, I wanted to go back and revisit the basics of responsive design. This simple yet powerful explanation and example gave me so many great bullet points that I completely overlooked before. Fundamentals are key, thanks for the content Kevin!

[@mike4680]

I would love to see a tutorial like this, but with more columns and icons etc.

[@mack485]

master at work!!! always insightful watching you kev.

[@heyalejandro175]

This was an OUTSTANDING VIDEO Kevin, thank you so much for this! 🙂

[@HaakonHestness]

Thanks so much for this simple and concise explanation of how to start designing a responsive layout. I really like how we focus on the basic elements of the page before diving into making it responsive. I really appreciate your informative videos!

[@QualityScrub]

Super helpful, Kevin. You’ve got me thinking twice about ways in which I setup my new site. Time to go back and adjust it.

[@Razorrr16]

I thought i wouldn't make it through a 45 min video (😁) but THIS IS GOLD. You explain very good at the same time that you focus and make notes on really important things that people usually overlook 👏 With regards to the keyboard I immediately realized it was mechanical (and I'm guessing it has blue switches 😂). It really doesn't bother me that much but for myself I chose a HyperX Core RGB because it has a very similar feeling to a mechanical keyboard but it's much more silent.

[@christophepoullet-osier8558]

Yes it was a very good demonstration with little medium a twist of flex and a lot of talent - Good job Kevin!!!

[@DelrenGaming]

I'm a backend-dev that recently found a job..finally... that trained me to be a full-stack dev. The last time I touched front-end development and web-page styling was over 5 years ago...So far all the websites they've made me build have been HEAVILY bootstrapped since trying to dive into CSSing things to make it look exactly how I want takes too much time for what they want me to do. Although watching this is making me appreciate the amount of time, patience, and creative mindset for front-end development.

[@wallyceebee]

Kevin - thank you for a very rich tutorial. I don't know where to begin recalling the subtopics of this tutorial that were gems for me. CSS variables for one and the explanation of the adjacent sibling selector in place of the gap property... and you do all this so cooling, with humor. Excellent!

[@YaroLord]

amazing tutorial, seeing someone else coding always gives me a new perspective and allows me to see what i'm doing wrong, or what could be improved/done in a more simple way thank you so much

[@aashiqahmed5273]

Best tutorial in recent times,enjoyed every bit,took your responsive course, What can I say more than a THank you Kevin 🎉

[@dunder9444]

Thank you so much for the free course, Kevin. I am gonna learn so much from this.

[@sunflair-wa]

I am going to go ahead and like this video 5 seconds in because I know it is going to help me, and I like Kevin and his style. I literally just prayed, God, please let me finish this project so I can work on something else! Kevin to the rescue! lol

[@packirisamykaran6986]

1.34min in i freaking learned abt the ! tap, broooo i have been writing the doctype all by myself all along, I cant wait to complete the tutorial

[@timetolive4869]

I really appreciate this video man! If you can I would love to see how you implement more complex designs, as the one that you show in the video is relatively simple

[@hamzaahmad8644]

We really appriciate that you include html part also, because we learn best practices from you kevin. So HTML best practices and css helps us a lot. Thanks.

[@KarimMaassen]

I would even go as far as to not putting the split paragraphs into the div.split. Just put two paragraphs there, let them be block elements, flex them up by merit of the section and voila, no unnecessary markup. Thanks for the tutorial, as always :)

[@KevinPowell]

The reason I do that is, if ever you end up changing the content and then you have more text, you'll need to adjust things a bit more. It's more plug and play this way, switch out text for an image, or add an image to a column, or add more text, etc... but if you didn't expect it to change then yup!

[@KarimMaassen]

@@KevinPowell Makes sense! :)

[@ayyappan8836]

The best material i am getting in the world. Thank you so much

[@dbd868]

Ohh men! Pretty amazing! Your methodology is really fantastic. Semantically approach. A mega thumbs up🤙🏼👍🏿

[@quranstudio7040]

Hey, Kevin Powell. You're genius and give me motive to learn web-development...

[@bieberpro]

Wow! I love how well you explained your techniques!