A practical guide to responsive web design

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 212

  • @jmun9561
    @jmun9561 10 месяцев назад +12

    I'm very new to basic coding, I would just like to say that while I'm doing this off my own back with no one teaching me. Watching and listening to your videos really helps. It's brilliant. Thank you for your time and sharing you knowledge.

  • @sentionmusic
    @sentionmusic 11 месяцев назад +25

    I have seen so many dev videos and never know what they are talking about because they don't know how to explain things. THIS IS THE FIRST CHANNEL I CAN UNDERSTAND AND LOVE. thank you

    • @l-fitness3590
      @l-fitness3590 7 месяцев назад

      Best place to learn stuff is honestly is Udemy when they have deal on pick up courses on topics that your interested in

  • @artibaraku4070
    @artibaraku4070 Год назад +34

    I wanted this video for a long time, but you made it as if you knew what we were missing. Thank you Kevin.

  • @myartikool
    @myartikool Год назад +142

    I think this part of making websites is pretty easy and was quite intuitive for me. The difficulty starts when you need to preemptively think how everything would behave on different screen sizes before you even start doing CSS. This is probably gonna get easier only after lots of practice but so far I'm still straggling with it. Especially when pixel perfect is needed.

    • @benfrese3573
      @benfrese3573 Год назад +6

      Yeah, and the graphical design aspect has become a lot more complex as well. Design *has* to work now, and a lot of my challenges in day to day work are from finding layout and interface solutions.

    • @ImperiumLibertas
      @ImperiumLibertas Год назад +28

      One strategy to help alleviate some of the challenging parts is to develop for a mobile device first as there are more constraints for mobile views. Reverse engineering the desktop screens from the mobile views is typically easier.

    • @myartikool
      @myartikool Год назад +4

      @@ImperiumLibertas I've noticed that even when I do desktop-first I still end up refactoring media queries as if it was mobile first. It's just where I'm from desktop-first is the default approach.

  • @kevbonett
    @kevbonett Год назад +11

    Some really great (and simple) advice. Mainly around not declaring stuff until you need to, and letting the browser do what it does best!

  • @skillsvsdegree6139
    @skillsvsdegree6139 Год назад +22

    You achieved your goal.
    I am new to frontend, only 2 months old, like I'm a baby. This video made me feel like CSS is a toy, not a boogeyman.
    I need CSS for my dream project I started to develop, and thanks to you to make me feel better with CSS. Hope most of the videos are like this, simple, straight to the point.
    subscribing.

    • @kylewilson881
      @kylewilson881 2 месяца назад

      Good luck on your project, if you didn't already start on it

  • @cedrictheveneau9141
    @cedrictheveneau9141 Месяц назад

    What always makes me amazed with your videos is that, even on basic themes I still learn things
    I've been developing for 3 years now, started getting better early thanks to your awesome videos
    And from time to time I get back to basics with your beginner friendly videos and I'm blown away by everything I missed when I started my journey as a dev ; just the comeback to grid with the simple line to make the browser set the layout for us is just genius.
    I hope you'll still be around in 20, 30 years, making those videos, you trully are the CSS master we all need Kevin (even though you adressed this nickname in one of your newsletters haha)

  • @JimKernix
    @JimKernix Год назад +4

    Your free "Conquering Responsive Layouts" course mage responsive design super easy for me. I don't even have a problem with that since taking that course a few years ago.

  • @juwhankim6187
    @juwhankim6187 9 месяцев назад +1

    I simply love the tone and accent of the voice. Again, I realize how much important tonal impression is, not only the content when it comes down to educational stuff.

  • @isaacAtaliba
    @isaacAtaliba 2 месяца назад

    Seriously, thank you so much for this video! I’ve been struggling with responsive layouts for a while, and you explained everything in such a simple and relatable way. It finally clicked! I’m so grateful you took the time to make this. Hugs from brazil

  • @GhostWithAHoodie
    @GhostWithAHoodie Год назад +7

    I just wanted to thank u mr Powell, i started to learn web development, and your content is amazing it helped me a lot.

  • @RobertoRamirezArteaga
    @RobertoRamirezArteaga 4 месяца назад +1

    I am literally doing a lot of stuff. One internship (32 hours a week , non-paid) one shift at other job( 8 hours a week) and cs degree final year. These are the videos that make me able to continue with this huge workload . Thank you so much to make my life easier.

  • @zealest
    @zealest Год назад +3

    crazy how you came in clutch with this guide

  • @nathanm2891
    @nathanm2891 9 месяцев назад

    I love your videos. I remember you talking about adding complexity as the screen grow a while back. It really changed my view on styling layouts.

  • @Mynamewashere
    @Mynamewashere 8 месяцев назад +2

    This video is solving my PTSD from trying to figure out responsive design while trying to finish my school project at the last minute. It's almost like you can see inside my head. Thank you.

  • @cseymour97
    @cseymour97 Год назад +4

    Viewport units are great. I love using them within a clamp on all my text sizes to make them fluid! Has worked well over the years!

    • @ilogbc3090
      @ilogbc3090 11 месяцев назад

      How do you do that? At the root?

    • @cseymour97
      @cseymour97 11 месяцев назад

      @@ilogbc3090 just when I'm defining text sizes. For example h1 could be something like
      h1{font-size: clamp(1.25rem, 2vw + 1rem, 2rem);}
      Doing that will define your min and max text sizes and then anything in between will be relative to the screen size.

    • @theannonymous1430
      @theannonymous1430 Месяц назад

      Agree 💯

  • @suziewilliams3194
    @suziewilliams3194 7 месяцев назад

    I came across your channel recently. I must admit, your videos, knowledge and teaching skills are over the top. You know your advanced css, you teach what's needed. You don't teach unnecessary styling just for creating a video sake. Keep doing what you're doing.
    Can you please create a guide or topics list for us to learn advanced CSS better please

  • @jcchaconjr
    @jcchaconjr 9 месяцев назад

    This video was so insightful! I’ve only recently started doing some web coding for the first time in about 20 years (the bulk of my career has been working on native Windows apps). As I’m currently unemployed following a layoff, I’m in an HTML/CAS/JavaScript course as part of a larger curriculum, and the responsive design was killing me this week! As it is, I was able to get a better understanding of how all the flex options work, which allowed me to “stop fighting” the browser as you suggest, eliminating about 40 lines of CSS code in the process. My pages now behave, but your sections on grid design and the side bar might allow me to streamline my code even more.
    I only recently discovered your channel Kevin - thank you for the great content!

    • @weshen83
      @weshen83 6 месяцев назад

      It's really a great channel.
      I'm in a bit similar situation as you. I started recently with The Odin Project. For me it's the best course to learn web development.
      Over the last years I dabbled with other courses, but always stopped because of life stuff and not easy to grasp things if not enough time is spent.
      So, if you stopped because of same reasons. Search for the Odin Project and see for yourself. It's totally free and in my opinion the best way to learn

  • @DanteMishima
    @DanteMishima Год назад +20

    "It is us who break the responsiveness of the web"
    - Kevin Powell, Conquering Responsive Layouts

  • @Nawrotlearnscoding
    @Nawrotlearnscoding Год назад +4

    Your take on media queries is a game-changer for me. From now on, I will try to use them more sparingly to avoid overcomplicating things. Thanks a lot, Kevin!

  • @meowthemmd
    @meowthemmd Год назад

    CSS just ends in Mr. Powell's channel we don't need anyone else teaching CSS; fascinating, THANKS.

  • @everythingold-school.2512
    @everythingold-school.2512 Год назад

    When he said "Don't write CSS that you do not need" my mind was like, "You're busted boy!". Thank you, Kevin. The video helped me so much.

  • @webdevgaur
    @webdevgaur Год назад

    I love your content Kevin! I derive so much value from your videos. Just today I watched your video on css position property and it helped me solve a problem at work which was causing a big pain. Thank you brother man!

  • @chaze2k3
    @chaze2k3 11 месяцев назад +4

    7:59 : "Now, Let's say i was doing this guy" 💀😂

  • @nextleveltech267
    @nextleveltech267 2 месяца назад +1

    Sir.. I just implemented some of the tips you gave. It really really helped me a lot. Thanks a ton❤❤❤❤❤❤

  • @marcosferreira-dk6nw
    @marcosferreira-dk6nw 7 месяцев назад

    I've just started your course on responsive layouts. Thanks for sharing your knowledge freely.

  • @MyDpop
    @MyDpop Год назад

    YESS! everything you do is to help us *fall in 💘 love* with CSS and be *a little bit less frustrated* by it!
    Thank you Kevin

  • @henrythomas7112
    @henrythomas7112 11 месяцев назад

    Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

  • @denoww9261
    @denoww9261 Год назад +1

    Great video! I'd love to see one about the differences in how you'd approach CSS for single-page webapps - for example, often they need to fill the full viewport height exactly, which is very different to how traditional websites work. Appreciate the content!

  • @AnhNguyễnNgọcHải-n8k
    @AnhNguyễnNgọcHải-n8k 3 месяца назад

    00:02 Sự thay đổi trong cách tiếp cận CSS giúp trang web phản hồi nhanh hơn
    01:54 Sử dụng CSS reset và điều chỉnh hình ảnh cho thiết kế web responsive
    05:33 Đặt chiều cao và chiều rộng tối thiểu và tối đa cho các phần tử
    07:18 Đặt lề và chiều rộng cho thiết kế bố cục linh hoạt và thích ứng
    10:48 Ôm lấy trình duyệt và làm việc với nó, không chống lại nó
    12:39 Sử dụng các đơn vị khung nhìn một cách có trách nhiệm để kiểm soát bố cục tốt hơn
    16:07 Thiết kế nội tại cho phép trình duyệt tìm ra bố cục, giúp trình duyệt dễ dàng và thích ứng hơn.
    17:48 Bố cục linh hoạt sử dụng đơn vị minmax và fr
    20:55 Tiếp cận các truy vấn phương tiện bằng cách thêm độ phức tạp để quản lý dễ dàng hơn
    22:32 Khóa học miễn phí có tên là chinh phục bố cục đáp ứng để thay đổi tư duy
    Crafted by Merlin AI.

  • @dimkayilrit2606
    @dimkayilrit2606 Год назад

    Miss this for so Long 😎😎, this was what made me love this channel some years back

  • @Susindar_E
    @Susindar_E 11 месяцев назад

    Thanks!

  • @mayankrathod3497
    @mayankrathod3497 Месяц назад

    Yeah, man 4ra’s explanations are so clear. even newbies can start easily now.

  • @_koh92_
    @_koh92_ Год назад +4

    Hello, Kevin!
    I want to thank you for all your job (videos, tutorials, newsletters etc.)!
    The last letter you’ve showed statictic of your RUclips channel, where mentioned Poland and his love of CSS. I’m your fan from Russia and I love CSS too!
    Could you tell about Russian # in your channel statistic? 🙂
    Your content helps me:
    1. Learn English
    2. Level up my CSS skills
    3. Teach my Frontend’s collegues of new CSS features!
    Keep up the good work! 👍

    • @KevinPowell
      @KevinPowell  Год назад +3

      Glad that you're enjoying my content! In the last year, Russia is #13 :)

  • @D7460N
    @D7460N Год назад +2

    Well said, sir.
    HTML is responsive by default. It's not CSS' fault that things are not responsive. It's our fault for writing CSS or using a lib or framework that cause things NOT to be responsive.
    Set width/height as a last resort for intrinsic design. Less is more.

  • @shamilrasheed6427
    @shamilrasheed6427 10 месяцев назад

    Your way of teaching is very nice. Really enjoyed and learnt something.

  • @umamiimamu
    @umamiimamu Год назад

    Thank you Kevin, I learned a lot in one video and u always have so much cool stuff to learn. Big respect for what u doing for the community now 💕💕

  • @jens84-84
    @jens84-84 9 месяцев назад

    great video! very thankful for theese tips as a newbie to css. Lol i came here cause i built my website after my dekstop screen and set al width and heights to pixels and then when i went on my phone it all became crazy, now ill rebuild and do it right!

  • @icarodlima
    @icarodlima 8 месяцев назад +1

    Every time I decided to quit the video because I had “learned enough” I saw something mind-blowing and ended up watching until the end

  • @TikuDevsen-tz9qv
    @TikuDevsen-tz9qv Месяц назад

    I joined 4ra’s fantasy league and it’s fantastic! the new ad convinced me to try it.

  • @zh1094
    @zh1094 11 месяцев назад

    great video, i love this. I am not a frontend dev but seeing that some things related to responsiveness can be just done simply.

  • @apradaglez
    @apradaglez 11 месяцев назад

    That’s a pity that I couldn’t understand all that you explain. I follow you and always learn something. Thanks master

  • @mj2068
    @mj2068 4 месяца назад

    this made so so much sense. THANK YOU!

  • @danielekpenyong5930
    @danielekpenyong5930 8 месяцев назад

    Great video and awesome lesson Kevin thanks for the detail you used in the video

  • @andersonlontsi299
    @andersonlontsi299 11 месяцев назад

    Wow this is so well explained it's like I'm discovering the whole stuff again😅 Thank you sir 🙏

  • @Tiger__Man
    @Tiger__Man 11 месяцев назад

    I used to follow avoid using fixed width and height and it worked perfectly

  • @Hamz-aa
    @Hamz-aa Год назад

    A very thorough explanation of responsiveness. Really appreciate ❤

  • @taylorenglish6237
    @taylorenglish6237 4 месяца назад

    Awesome video! Thanks Kevin!

  • @hossamayman3587
    @hossamayman3587 Год назад

    Just the right content at the right time love it

  • @ishowspeed7191
    @ishowspeed7191 Год назад

    Thank For this video sir i am looking this video for soo many days and this is the best video i got today

  • @snakehound7678
    @snakehound7678 7 месяцев назад

    Thank you very much for this video. Finally I found explanations that help me in my first project :)

  • @PlantTechiesManage
    @PlantTechiesManage 11 месяцев назад +1

    "I Have a ugly website but
    it's atleast working in all screen size "
    -frustrated css devs

  • @TrxsTer
    @TrxsTer Год назад

    Damn just when I was having hard time with responsiveness, you posted a video on it, amazing 🤩 and thanks haha

  • @yisuslalala
    @yisuslalala Год назад

    you're the best Kevin, thank you so much!

  • @4ohf
    @4ohf 2 месяца назад

    2 minutes in and you already made me hate CSS less 😂thanks

  • @colleenwieder
    @colleenwieder 3 месяца назад

    I needed a review, thanks!

  • @darz_k.
    @darz_k. 4 месяца назад

    This is a great approach.
    I've watched this video a few times now, and have learned a lot about how to think about and approach a responsive layout.
    Towards the end, the example for the media query, and using a min width; I suppose this props up the benefits of a mobile first approach to development?

  • @danielhalasz-szabo5143
    @danielhalasz-szabo5143 Год назад

    Thx. I bookmarked this video as an everlasting reminder.

  • @HBCGAMING
    @HBCGAMING 10 месяцев назад

    I am doing all wrong stuffs as mentioned in above video fixed size layouts always which carry me overflow problem of elements
    Now i avoid those problems.

  • @dev-suresh
    @dev-suresh 11 месяцев назад

    Thank you for making CSS easy for me :)

  • @tonybowen455
    @tonybowen455 Год назад

    I just got done fighting a grid layout with media queries. Literally everything you talked about in this video I've been doing wrong for years.

  • @victorelgersma7845
    @victorelgersma7845 2 месяца назад

    Reminds me of the difference between declarative and imperative programming. Imperative would be using media queries, whereas declarative is leaving the browser to figure out the details.

  • @arturmoreira9716
    @arturmoreira9716 9 месяцев назад

    Amazing video brother. Thanks!!!

  • @rohanphaff2640
    @rohanphaff2640 4 месяца назад

  • @nathanmiddleton1478
    @nathanmiddleton1478 Год назад +1

    You always have such beautiful cleanroom examples, thank you for that. There used to be a time it was easier to go open up the source of a site and maybe learn a thing or two, but anymore it seems like everything is hidden behind javscript code.
    Recently I visited a site and everything was generated by Javascript; the CSS, the HTML, EVERYTHING! I really feel like this is a step backwards. Like you lament in this video about keeping it simple. Whatever did happen to the KISS rule?

  • @borisgomiunik7960
    @borisgomiunik7960 9 месяцев назад

    Thank you. You're explaining it better than the ones that made it :)

  • @web_alchemist_
    @web_alchemist_ Год назад

    Loving grids the more I learn about it ⚡

  • @caspgin
    @caspgin Год назад +1

    Do you have a css and animation series that goes from scratch to smoke?

  • @ColinMacrae-d2o
    @ColinMacrae-d2o 6 месяцев назад

    I think technically this video is about responsive web css, not design. I was hoping to find something that would give good design tips on taking a desktop site and making it responsive, and how to do that the best, in terms of designing it. The building it part (css) is the easy part for me! Anyway, good content all-around, so thanks for that Kevin!

  • @AndyMorrisArt
    @AndyMorrisArt 5 месяцев назад +1

    I gave up! But I'll bookmark this and maybe try again. I broke down and just built a mobile version that I'll put in a sub-domain and then with a media querie do a redirect. Not Ideal I know but for my purposes it will suffice. I think if i had started with a Mobile designed website then it might've been easier to get it to expand into multiple columns but starting with a 12 column grid I just couldn't get the images to cooperate. After trying for 12 hrs. straight I gave up.

    • @AndreaGonzalez-sc8de
      @AndreaGonzalez-sc8de 3 месяца назад

      I’m currently in the same boat; I’m in springboards software engineering program and I’m so confused as to how to make my digital cv responsive to other devices including mobile

  • @MrDJsArcade
    @MrDJsArcade 8 месяцев назад

    Great video! Sidenote, can you please tell me how you make your video shift to the bottom of the screen so smoothly whenever it’s in the way?

  • @PennyPincherCoins
    @PennyPincherCoins 6 месяцев назад

    how can i make a shortcut app so when users on my website, they can install link to my website, in browser?

  • @oat1000
    @oat1000 Год назад

    Could you make a video about the background when playing videos on youtube? It's a super cool tri-axis blur effect (x, y, time). It not only is a gaussian blur, but also blends into the future frames of the video.

  • @hiddensinger2630
    @hiddensinger2630 Год назад

    Very helpful video Kevin

  • @TOONSSTATION
    @TOONSSTATION 10 месяцев назад

    Thanks. I'm stuck with responsiveness hope this will help

  • @ArtyomStouch
    @ArtyomStouch Год назад

    Thanks mr.Kevin, need more repeat .

  • @Smile__007
    @Smile__007 9 месяцев назад +1

    Thanks for this ❤

  • @solo-yl8uc
    @solo-yl8uc 10 месяцев назад

    Thank you so much, it's so helpful.

  • @Wadih-bc
    @Wadih-bc 9 месяцев назад

    Very much appreciated! Thanks.

  • @huncyrus
    @huncyrus Год назад +1

    Would be interesting to see Kevin talking about responsive design with auto-sizing font size where it scale up when u watch on 50"' and 4k (readable and ain't stuck on 14 font size) and also good on phone. If anyone know any good article or video about it, would be nice to share with me.

  • @lenerignacio
    @lenerignacio 11 месяцев назад

    Hi Kevin, thank you for all the knowledge you share across the videos and explanations. Recently, I've been seeing a "new type of responsive" known as fluid web design. Do you know about it? Is it different from the responsive? Or what should be some good concepts to have in mind for a fluid web?

  • @theannonymous1430
    @theannonymous1430 Месяц назад

    I personally prefer the view point units for my website layout so it can look same if opened in non-standard or different resolution monitors since 500px box gonna look painfully large on 720p and cute and tiny on 4k monitor and using vh, vw here just work fine for me, while things like images and button pixels is goated there.

  • @tetsuorulin9009
    @tetsuorulin9009 Год назад

    beautiful video, thanks my G

  • @TurpoChargedGaming
    @TurpoChargedGaming Год назад

    I agree VH/VW are iffy. But with the rise of container queries, would you use CQB/CQI or still no?

  • @JuanCastro-C
    @JuanCastro-C 4 месяца назад

    Hey Kevin, awesome content as always, thank you. You mentioned pixel perfect designs, what do you think of that?

  • @remox8894
    @remox8894 Год назад

    Just thank you Kevin.

  • @xreed8
    @xreed8 Год назад

    Could you do a vid on improving performance? I built my second personal portfolio website but it for some reason loads a little slower than your normal website, making it look a little less professional than it should be

  • @SirZyPA
    @SirZyPA 2 месяца назад

    Personally, i only use media queries if i need to add something, that you can't do with responsive code, this would be like swapping layouts, i.e by going from a desktop navigation, to a hamburger navigation, as mentioned in the video.
    As for breakpoints, I find the preset values in the device toolbar (device simulator, responsive simulator, whatever you want to call it) in the developer tools, to be quite useful for inspiration. Usually, I go with:
    - Tablet: 768px
    - Intermediate: 960px
    - Laptop: 1024px
    Using one or a mix of these values should cover most needs for media queries."
    if you need more than 2 media queries, i honestly believe youre doing something wrong and need to refactor your css to be more natively responsive.

  • @mahadevovnl
    @mahadevovnl Год назад

    A completely separate question: In CSS, we can set: `color-scheme: light dark;`
    And that's fine, we can use media queries to detect a system preference: `@media (prefers-color-scheme: light) {}`
    But does CSS also allow the user to override the system preference? Right now I'm doing that with JavaScript and it feels so clunky.
    I sometimes wonder if we need a new browser API, something like `UserPreferences` to set, reset, and update certain user preferences that would override certain media queries.

  • @activegt2205
    @activegt2205 7 дней назад

    Thank you for sharing I have learnt something Thanks

  • @hassansyed6087
    @hassansyed6087 11 месяцев назад

    I'm definitely struggling with the responsive aspect of website creation.
    Like everything needs it's own dedicated space and then it needs to look uniform and if one div shifts over, the text is all over the place.
    It's a mess.
    Any idea on how to use Grid and Flexbox preemptively so that we don't counter such problems when we get to the media query section?

  • @edsHTML
    @edsHTML Год назад

    Thanks! This video is very helpful😀😀

  • @draj3716
    @draj3716 Месяц назад

    The 4ra IPL lottery is crazy fun. tried my luck today, and it was so exciting!

  • @samit4me
    @samit4me Год назад

    This is so good, fantastic video, thank you so much for this 🙌
    Sorry, I feel bad for asking, what font/theme are you using in vscode? Looks super clean ✨, especially liking the syntax highlighting colors

  • @krystofsevcik8569
    @krystofsevcik8569 Год назад

    Great video 💯

  • @luciferevil9o908
    @luciferevil9o908 Год назад

    It's very helpful thank you ❤

  • @torynothing4719
    @torynothing4719 11 месяцев назад

    Nice vid!

  • @D7460N
    @D7460N Год назад

    Thanks again for this timesheet video. Keep up the great work!
    What are your thoughts on leveraging custom HTML elements, vice DIVs and classes, as a way to convey intuitive syntax with (usually) less code? I have found that it enhances fellow developers' experience (DX).

  • @ratstrat1984
    @ratstrat1984 10 месяцев назад +1

    This is me in a nutshell. I start declaring and just declare myself right into a headache. Then I dump my CSS and start all over.

  • @Christoph_YouTube_Acc
    @Christoph_YouTube_Acc 10 месяцев назад

    Like this approach, but on your products, when one drops to the line below (minmax 250px, 1fr lesson) and it doesn't have a partner to share the space with, it moves to the left of the screen and has space to the side. Any way to fix this and centre it?