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.

[@gnudidoodie]

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

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

[@ThiagoAdomaitis]

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

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

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

[@exactzero]

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

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

[@sirharis7462]

This man’s skill of TEACHING css is underrated !

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

[@yuriyzadorozhnyi3849]

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

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

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

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

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

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

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

[@keronwilliams5392]

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

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

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

[@Ayomikun]

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

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

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

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

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

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

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

[@corriebotha7205]

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

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

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

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

[@8koi139]

YES after so many videos of KZbinrs talking about being responsive!! tnx 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.

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

[@gollosus8741]

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

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

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

[@Jennifer-ju8de]

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

[@MrQooje2]

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

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

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

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

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

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

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

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

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

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

[@Nedwin]

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

[@jenso413]

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

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

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

[@nikkehtine]

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

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

[@BreatheWithoutHS]

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

[@s0ulweaver]

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

[@CC-wo2xc]

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

[@bharathvarma2361]

Good teacher for Front-End developer

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

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

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

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

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

[@jamiroquaiordie]

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

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

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

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

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

[@halfish757]

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

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

[@An-yh2bl]

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

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

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

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

[@christophepoullet-osier8558]

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

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

[@mike4680]

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

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

[@heyalejandro175]

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

[@UmutYerebakmaz]

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

[@KevinPowell]

Thanks so much!

[@quranstudio7040]

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

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

[@dunder9444]

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

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

[@kidoo1567]

My notes 15:54 line height . 23:55 margin block- top & bottom Margin inline- left right 25:00 refer Min width max width 28:00 30:49 for image ( my problem) 33:06 flex ( separate) 34:30 35:00must

[@TheMackMathis]

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

[@nerothos]

Geez, this video makes me feel like an idiot. Been fighting my (or external...) desktop css for a while now. This approach makes a LOT more sense. Thanks!

[@111FK]

Man, you are a genius and I hope I'll be creating html/css as ably as you.

[@niklassoderberg2168]

42 minutes, what a treat :D

[@MrRades123]

Even though I have to say thank you for every video until now because my knowledge wouldn't be the same without you but this is the most useful video I have seen in the last 2 years about css.

[@ayyappan8836]

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

[@Shyloo]

wow i love this men thanks a lot, im a software developer student 2nd grade and still having hard time with the responsive things. Thanks!

[@jacquesgoudreau7594]

My new CSS teacher! Great tutorial! Thanks!

[@KevinPowell]

Glad you enjoy my approach!

[@shae4041]

Amazing! I love you as a teacher !!! WE WANT MORE!!!