Useful & Responsive Layouts, no Media Queries required

Рет қаралды 168,769

Күн бұрын

Conquering responsive layouts: courses.kevinpowell.co/conque...
Here’s 5 quick responsive layouts that you can use, without any media queries!
There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation!
🔗 Links
✅ Netflix scroller: • Can I create Netflix’s...
✅ Every Layout: every-layout.dev/
✅ Conquering Responsive Layouts: courses.kevinpowell.co/conque...
⌚ Timestamps
00:00 - Introduction
00:13 - The Cluster
01:10 - Nothing wrong with media queries
01:47 - Auto-grid
03:00 - Flexible grid
03:33 - Reel
05:41 - Do you struggle with responsive layouts?
06:12 - Main with sidebar
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 179

@KingTMK Жыл бұрын

I usually don't comment, but I just wanted to say that this is such a great and eye-opening video when it comes to tackling very common problems with responsiveness. I appreciate it tons, so thanks for this!

@KevinPowell Жыл бұрын

Thanks so much! I appreciate that you took the time 😊

@mda4S Жыл бұрын

My english is not good but I benefit from your channel a lot

@user-mk5xf2li9u Жыл бұрын

Use wordtune

@vitfirringur Жыл бұрын

I stumble into some of your shorts and while I've been doing frontend dev for years, and feel like I can solve most CSS problems or implement most layouts, watching your videos is a humbling experience. I might as well not know CSS. Thanks a lot for the great content.

@henrythomas7112 3 ай бұрын

Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

@cscs6587 Жыл бұрын

This repeat(auto-fit, minmax(min(200px, 100%), 1fr) is life changing. I was facing this problem in my current project and you helped me fix it. THANK YOU SIR

@CyberspaceCitadel 13 күн бұрын

that's why i call you big brother of css, i love and inspire your work and creative code writing

@seanszarkowicz2910 Жыл бұрын

These types of videos are amazing - great job. Love the detailed explanations with the possible pitfalls and solutions to those pitfalls !! Keep up the great work

@MrKOHKyPEHT Жыл бұрын

It is really cool that in such short video all most common cases considered. Extremely helpful and useful. Thanks

@VasilyPavlik Жыл бұрын

After EVERY your video I have irresistible desire to rewrite at least a quarter of my current project. And a half of previous ones.

@Tranqvilier Жыл бұрын

I took Kevin’s course and it was great. It gave me a structured overview of responsive design. Can’t recommend it enough ❤

@mrez5651 Жыл бұрын

I have been a member for a month now and your videos helped me solve problems that i have been strugling with, for that i thank you You are a great mentor, always on the point!💯 ❤

@octothorpe12 Жыл бұрын

Another big shoutout for Every Layout. I *constantly* go back to that to try and get my developers to learn to love the cascade.

@obsessedprogrammer700 Жыл бұрын

I recently worked on a large project and I happened to blend most of these layout tools together(also media queries), and the result was astonishing. Thanks, Kevin!

@angshumanburagohain1151 10 ай бұрын

Kevin doesn't disappoint when it comes to HTML & CSS. He teaches exactly what we need. I have learned a lot watching his videos and I am still learning and implementing it in real time projects. Thank you Kevin for making these videos it's really really helpful 🙏

@iburu Жыл бұрын

The last part with the side bar was exactly what what I've been struggling with for the last couple of days and now I've found the solution. Thank you Kevin.

@blackpurple9163 Жыл бұрын

Never thought of making those flex-wrap divs for tags/navs like that, this is actually what I wanted to figure out, thanks a lot

@ichiroutakashima4503 Жыл бұрын

This video is genius. I really love it. I can't wait to refactor my codes with this. Love the touch ups.

@hellboyfbyao3 Жыл бұрын

Thank you so much for all you shared so far and for the free course as well. Really appreciate it!

@composernotes Жыл бұрын

Thanks Kevin, this is such a clear summary of the best of flex and grid, I will be showing this to my web class next week!

@KevinPowell Жыл бұрын

Awesome, glad you enjoyed it enough to share with your class! Hope they enjoy it too 😊

@MirzaMonirulAlam Жыл бұрын

Fascinating video on youTube I have barely seen, and this video is the one. Your every css lessons made me think regarding css even in my busy schedules. Thank you to bring this kind of things to us.

@body220 Ай бұрын

bro this guy is having tutorials for everything, thank you!

@ericvandruten Жыл бұрын

Awesome, Kevin! thanks. Coincidentally i was just thinking about implementing one of these layouts, so perfect timing as well!

@appdevinsights30 Жыл бұрын

I learned a lot with just 11 minutes. Excellent CSS knowledge. Thank you so much.

@iservisat 5 ай бұрын

I can't thank you enough for all the content, tips etc you share. Keep it going master!!!

@alwaysgratefulmixail7569 Жыл бұрын

Layouts have been a battle for me so thank you for this great video 😊

@rajkiranchaudhary8769 Жыл бұрын

I often get issue when using flex-wrap. This video really helped me.. amazing as usual

@potrosanjuan Жыл бұрын

I'm speechless, I just can not imagine CSS without your videos, thank you so much for such a great videos!!!!!!!!!!

@alialtwill6551 Жыл бұрын

Thank you, thank you for the great video. I really appreciate the effort you put in Videos.

@hut_fire1490 Жыл бұрын

Your channel is a gem 🙌🏻thank you

@plecoe Жыл бұрын

Great demonstration!! Keep going....

@Chiaros Жыл бұрын

One of your best videos ever, great work!

@Kozi03 6 ай бұрын

Where have you been all my life. Thank you!

@vpgiang0205 Жыл бұрын

this is one of the most awesome thing i ever can learn, thank you for sharing 💯

@Dalton_w Жыл бұрын

Really great tips! Didnt know about some of them techniques, thanks for the video!

@alvarojflores Жыл бұрын

Not fancy, but useful! Thank you, Kevin! Be healthy and successful!

@Edu-Coimbra Жыл бұрын

Thank you so much for all your tutorials! A big hug from Brazil =)

@georgeelliottphotography3602 Жыл бұрын

Wow, I love it and saves so much time on creating media queries. Also, I like the new format Kevin. i.e. rather than type in every command, you just jump forward. Much better. George

@outpost31737 Жыл бұрын

Thanks Kevin! Every day's a school day :)

@hrgdavor Жыл бұрын

great video. Thank you for the useful examples.

@tenc6491 Жыл бұрын

Superb as always🔥

@paulsisson8944 Жыл бұрын

I’m finishing up a React course right now and as soon as I’m done, I’m diving into CSS Demystified. Can’t freaking wait.

@rankarat Жыл бұрын

Great video, thanks!

@dinhoangduy Жыл бұрын

I just wanna say, you and your contents are amazing!

@danielChibuogwu Жыл бұрын

Ahhhhhhhhh, I love this guy, like I love this guy...that flex grow trick was just what i needed😂

@user-km9vl9ck9u Жыл бұрын

great stuff Kevin, thank you!

@kantinho69 Жыл бұрын

This is gold, and only takes 11 minutes, omg.

@andreiKspb Жыл бұрын

Kevin I love you )). Thanks bro for all staff

@iRockTheBeat1 Жыл бұрын

Thank you Kevin

@ridiculousgames365 Жыл бұрын

Hey Kevin, I love your videos and this one is super useful for what I'm doing at work right now. May I suggest reducing the size of your talking head bubble? It often blocks the content.

@AlvinIsChipmunk Жыл бұрын

Amazing work Kevin 😃 This is like a cheatsheet for me

@vasyaqwe2087 Жыл бұрын

This is super useful, thanks!

@HocineKamikaz Жыл бұрын

The content is 🔥🔥 Thank you 🌹

@caiomarcellusmartinezcabra3061 Жыл бұрын

The flexbox hackery is just brilliant!

@pibbz13 Жыл бұрын

You sir, have this really nailed down 🤩

@nikhilpsathyanathan Жыл бұрын

Simple and useful video

@anaf4072 Жыл бұрын

One of a few best teachers ever!

@StanleyBateswar Жыл бұрын

Really nice!

@fave1201 Жыл бұрын

The min hack on auto grid is awesome. I usually use media queries there and have a different template columns for smaller devices but now I can just write less code. 😁

@DC_YouTube2001 Жыл бұрын

I really enjoy watching your video i have learned a lot Now i'm challenging myself to download all your Videos you ever created to my phone and keep it for learning purpose and in case i may have a student in the future your videos will really help a lot. Ones I make all the downloads I will create a short video and tag u

@codehal Жыл бұрын

Great video sir ...

@user-jx9iw7uz1u 5 ай бұрын

your video is goldddd

@ldburn Жыл бұрын

I was pondering tables the other day and thought I'd come and have a gander here, you should definitely do a responsive table video. They can be a pain but there are times where tables are needed for information and the CSS behind them would be pretty interesting.

@KevinPowell Жыл бұрын

It's in the works :D

@ldburn Жыл бұрын

@@KevinPowell wicked 🙂 I do enjoy your videos, firmly believe there is always something new to learn or improve on and you always have something different to show 🙃

@Atractiondj 4 ай бұрын

Last layout trick with the sidebar very must have for me, I eliminated 2 media queries and 50 strokes of code

@kodosensei Жыл бұрын

Awesome !!!!! 🚀🚀🙌

@dave6012 Жыл бұрын

I could never get the scroll snap stuff right! Thanks for the super simple example

@luismoriguerra669 Жыл бұрын

Thanks a lot! master

@keldiggs232 Жыл бұрын

Good lord...This dude is CSS Master!

@paulh6933 Жыл бұрын

the last example was cool

@8koi245 Жыл бұрын

hahaha the last one was pretty interesting to solidify flex topics that aren't that used ~

@fabianjochenkanzler Жыл бұрын

it’s so cool to look at one of your videos realizing that i know everything you are explaining. i came up with the same solutions during coding, had the same hacks. that’s really uplifting. maybe i’m better skilled and have greater knowledge and understanding than i thought. thank you for that. and thank you for that video, putting that all in one place.

@Gahlfe123 Жыл бұрын

literally what im working on right now

@D7460N Жыл бұрын

Thanks, Kevin for another great video! Question in regard to the reel demo. What if each horizontally scrolled section do not share the same height? One section has a lot of content causing the other sections to be comparatively empty. Thanks again for your good work.

@criztiandev Жыл бұрын

your the chad sir kevin

@SoItGoesCAL34 Жыл бұрын

Great!.... Dare I say it? AWESOME :)

@ArtyomStouch 5 ай бұрын

Вітання панові Кевіну з України, Ваші відео допомогають мені та полегшують навчання. Greetings to Mr. Kevin from Ukraine, your videos help me and make my studies easier.

@bazimtsweni5343 Жыл бұрын

You my friend, are a magician!😂😂😂

@seanszarkowicz2910 Жыл бұрын

Thanks!

@KevinPowell Жыл бұрын

Thank you so much!

@ravikiranpalaparthi615 Жыл бұрын

Thank you...

@ammarniz Ай бұрын

You are an amazing 💗

@jwbonnett Жыл бұрын

For the sidebar I use min and max width with a width of 100% to get the same effect without the need to treat them differently.

@normanejm Жыл бұрын

I Love the 5:15... Was Amazing...

@bilatungdulang9708 Жыл бұрын

Flex is really simple, but it will usefull when build a simple design or for quick positioning block. Then, grid is a bit hard to deal with it at first, but it really more usefull to build a spesific or complex design.

@lessons3141 Жыл бұрын

useful content

@minhrdi 2 ай бұрын

I'm having to maintain codes in which the previous dev used margin: -x to arrange things... I told my teammate that's not how CSS works and you should just go take up Kevin's course... Thank you!

@michaellonsdale1248 6 ай бұрын

Thanks Kevin

@KevinPowell 5 ай бұрын

Thanks so much!

@michaellonsdale1248 5 ай бұрын

@@KevinPowell You're the greatest, brother Kevin.

@dwarfbard Жыл бұрын

By the way it would be interesting to see how you would tackle accessibility options with modern website css.

@user-zr6yt7ub7h 3 ай бұрын

cool video)

@RaveKev Жыл бұрын

Wow, i want to print that video and hang it on my office wall!

@KevinPowell Жыл бұрын

Thanks so much, glad you enjoyed it!

@nomadshiba Жыл бұрын

i have also been using: minmax(min(100%, 25rem), 1fr), a lot but i recently switched to just using minmax(0, 25rem), i mean its not the same but does the job, and a lot more clean

@nomadshiba Жыл бұрын

i mean if you are listing items it wont work but it works while doing layout

@olatunjiabayomi5945 Жыл бұрын

hi. Kudos!. In the main-sidebar example, can you explain why the sidebar got so squashed up by the main in flex mode? I was expecting them to shrink at the same rate since there shrink is both 1 and their size is auto. Why is the side bar width so shrunk to min-content?

@TadRichard Жыл бұрын

Is there a way to force flexbox to evenly distribute (by number) the child elements across rows? For example, if I have 8 elements and they can all fit in one row, display them as such. But if I reduce the width such that a second row is created, I'll end up with two rows of four instead of one row of seven followed by a row of one. Setting the grow value only seems to work across elements in the same row, not across all child elements in the flexbox.

@IvoPoetzsch Жыл бұрын

Hi Kevin, thx for this Tutorial. I have a Question: How I can solve this with multiple Rows ? (I need a static Count of Columns but flexible Rows in a scroll Container). On Desktop it works but on mobile the Columns gives right a large Offscreen Space... :( many Thx)

@BGdev305 5 ай бұрын

I'm confused, wouldn't using VW or REM instead of px for the widths be a better solution?

@pablofigueroa9455 2 ай бұрын

Genial..!!!

@Krishnasaini Жыл бұрын

How do you know CSS so well? What path did you follow ? Or it comes with experience?

@phucnguyen0110 Жыл бұрын

Most are from experience, I am sure that Kevin has been doing web dev since the 90s

@KevinPowell Жыл бұрын

Yeah, been mucking around with websites since the late 90s, and been teaching it over a decade. Experience goes a long way, and teaching it helps get into it deeper

@nsdigital350 Жыл бұрын

Nice

@Irinyadler Жыл бұрын

Hi, thank you for a great video. Could you please make a video about tips on how to create an eco-friendly sustainable website? Now they are becoming highly requested among the clients. Thanks.

@KevinPowell Жыл бұрын

Well, the main thing would probably be keeping them simple and light-weight, I'm guessing... The more heavy lifting to fancy effects that the browser has to do, the more resources it will use. I'd be really curious on checking the power consumption of websites, not something I've ever looked into and I'm not even sure how to accurately test that. I think, in general, the difference would be pretty small, and it might be more of a marketing thing, but I'll see if I can't dig anything up to.

@leodragonheart754 6 ай бұрын

I have a question, is there a standard on how to set text sizes? Right now I am looking at each section at each breakpoint and use media queries to adjust the text sizes but there has to be a better non time consuming way of doing it

@CharcoalBadger Жыл бұрын

Hey Kevin, your videos have been really helpful. I am new to web development and I have a question about these layouts. I understand that these are good for pages. Could I use grid to create the entire website layout and then put my components in? ( I am using react).

@KevinPowell Жыл бұрын

For sure, and you could use some of these within components too :D

@CharcoalBadger Жыл бұрын

@@KevinPowell Would I essentially add the grid layout in its own react component and then add each other component into it?. Thank you for the reply, your work and the way you teach is amazing.