Тёмный

Useful & Responsive Layouts, no Media Queries required 

Kevin Powell
Подписаться 949 тыс.
Просмотров 181 тыс.
50% 1

Опубликовано:

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 177   
@KingTMK
@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
@KevinPowell Год назад
Thanks so much! I appreciate that you took the time 😊
@mda4S
@mda4S Год назад
My english is not good but I benefit from your channel a lot
@සහොඳටමෆේල්
Use wordtune
@RbyLearning
@RbyLearning Год назад
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
@vitfirringur
@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.
@iburu
@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.
@VasilyPavlik
@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
@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
@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!💯 ❤
@obsessedprogrammer700
@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!
@MrKOHKyPEHT
@MrKOHKyPEHT Год назад
It is really cool that in such short video all most common cases considered. Extremely helpful and useful. Thanks
@angshumanburagohain1151
@angshumanburagohain1151 Год назад
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 🙏
@composernotes
@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
@KevinPowell Год назад
Awesome, glad you enjoyed it enough to share with your class! Hope they enjoy it too 😊
@blackpurple9163
@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
@rajkiranchaudhary8769
@rajkiranchaudhary8769 Год назад
I often get issue when using flex-wrap. This video really helped me.. amazing as usual
@seanszarkowicz2910
@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
@Saleca
@Saleca Месяц назад
Great stuff, thanks for sharing really like the scroll aligned and the cluster with the items "justified" but except the last example nothing beats media queries 😅
@paulsisson8944
@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.
@octothorpe12
@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.
@henrythomas7112
@henrythomas7112 8 месяцев назад
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
@Atractiondj
@Atractiondj 9 месяцев назад
Last layout trick with the sidebar very must have for me, I eliminated 2 media queries and 50 strokes of code
@ichiroutakashima4503
@ichiroutakashima4503 Год назад
This video is genius. I really love it. I can't wait to refactor my codes with this. Love the touch ups.
@caiomarcellusmartinezcabra3061
The flexbox hackery is just brilliant!
@RohitKhareGameplayYT
@RohitKhareGameplayYT 5 месяцев назад
that's why i call you big brother of css, i love and inspire your work and creative code writing
@ldburn
@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
@KevinPowell Год назад
It's in the works :D
@ldburn
@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 🙃
@appdevinsights30
@appdevinsights30 Год назад
I learned a lot with just 11 minutes. Excellent CSS knowledge. Thank you so much.
@ridiculousgames365
@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.
@danielChibuogwu
@danielChibuogwu Год назад
Ahhhhhhhhh, I love this guy, like I love this guy...that flex grow trick was just what i needed😂
@Kozi03
@Kozi03 11 месяцев назад
Where have you been all my life. Thank you!
@iservisat
@iservisat 9 месяцев назад
I can't thank you enough for all the content, tips etc you share. Keep it going master!!!
@potrosanjuan
@potrosanjuan Год назад
I'm speechless, I just can not imagine CSS without your videos, thank you so much for such a great videos!!!!!!!!!!
@alwaysgratefulmixail7569
@alwaysgratefulmixail7569 Год назад
Layouts have been a battle for me so thank you for this great video 😊
@body220
@body220 6 месяцев назад
bro this guy is having tutorials for everything, thank you!
@georgeelliottphotography1
@georgeelliottphotography1 Год назад
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
@alvarojflores
@alvarojflores Год назад
Not fancy, but useful! Thank you, Kevin! Be healthy and successful!
@kntfps
@kntfps Год назад
This is gold, and only takes 11 minutes, omg.
@hellboyfbyao3
@hellboyfbyao3 Год назад
Thank you so much for all you shared so far and for the free course as well. Really appreciate it!
@fave1201
@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. 😁
@MirzaMonirulAlam
@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.
@vpgiang0205
@vpgiang0205 Год назад
this is one of the most awesome thing i ever can learn, thank you for sharing 💯
@alialtwill6551
@alialtwill6551 Год назад
Thank you, thank you for the great video. I really appreciate the effort you put in Videos.
@vnphantom
@vnphantom 6 месяцев назад
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!
@dinhoangduy
@dinhoangduy Год назад
I just wanna say, you and your contents are amazing!
@Chiaros
@Chiaros Год назад
One of your best videos ever, great work!
@bilatungdulang9708
@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.
@fabianjochenkanzler
@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.
@hut_fire1490
@hut_fire1490 Год назад
Your channel is a gem 🙌🏻thank you
@nomadshiba
@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
@nomadshiba Год назад
i mean if you are listing items it wont work but it works while doing layout
@Dalton_w
@Dalton_w Год назад
Really great tips! Didnt know about some of them techniques, thanks for the video!
@plecoe
@plecoe Год назад
Great demonstration!! Keep going....
@dave6012
@dave6012 Год назад
I could never get the scroll snap stuff right! Thanks for the super simple example
@jwbonnett
@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.
@Edu-Coimbra
@Edu-Coimbra Год назад
Thank you so much for all your tutorials! A big hug from Brazil =)
@anaf4072
@anaf4072 Год назад
One of a few best teachers ever!
@8koi245
@8koi245 Год назад
hahaha the last one was pretty interesting to solidify flex topics that aren't that used ~
@keldiggs232
@keldiggs232 Год назад
Good lord...This dude is CSS Master!
@paulh6933
@paulh6933 Год назад
the last example was cool
@codehal
@codehal Год назад
Great video sir ...
@ericvandruten
@ericvandruten Год назад
Awesome, Kevin! thanks. Coincidentally i was just thinking about implementing one of these layouts, so perfect timing as well!
@ArtyomStouch
@ArtyomStouch 10 месяцев назад
Вітання панові Кевіну з України, Ваші відео допомогають мені та полегшують навчання. Greetings to Mr. Kevin from Ukraine, your videos help me and make my studies easier.
@outpost31737
@outpost31737 Год назад
Thanks Kevin! Every day's a school day :)
@DC_YouTube2001
@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
@tenc6491
@tenc6491 Год назад
Superb as always🔥
@hrgdavor
@hrgdavor Год назад
great video. Thank you for the useful examples.
@Gahlfe123
@Gahlfe123 Год назад
literally what im working on right now
@iRockTheBeat1
@iRockTheBeat1 Год назад
Thank you Kevin
@danish7335
@danish7335 Год назад
Guys i learned responsive design with their conquering responsive layout.. If u have any problem to building responsive website so i believe (CRA) course is mandatory for you
@normanejm
@normanejm Год назад
I Love the 5:15... Was Amazing...
@rankarat
@rankarat Год назад
Great video, thanks!
@Krishnasaini
@Krishnasaini Год назад
How do you know CSS so well? What path did you follow ? Or it comes with experience?
@phucnguyen0110
@phucnguyen0110 Год назад
Most are from experience, I am sure that Kevin has been doing web dev since the 90s
@KevinPowell
@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
@andreiKspb
@andreiKspb Год назад
Kevin I love you )). Thanks bro for all staff
@ΝικόλαοςΤζουνάκος
great stuff Kevin, thank you!
@nikhilpsathyanathan
@nikhilpsathyanathan Год назад
Simple and useful video
@HocineKamikaz
@HocineKamikaz Год назад
The content is 🔥🔥 Thank you 🌹
@RaveKev
@RaveKev Год назад
Wow, i want to print that video and hang it on my office wall!
@KevinPowell
@KevinPowell Год назад
Thanks so much, glad you enjoyed it!
@pibbz13
@pibbz13 Год назад
You sir, have this really nailed down 🤩
@AlvinIsChipmunk
@AlvinIsChipmunk Год назад
Amazing work Kevin 😃 This is like a cheatsheet for me
@ポヤポヤ
@ポヤポヤ 10 месяцев назад
your video is goldddd
@Irinyadler
@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
@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.
@bazimtsweni5343
@bazimtsweni5343 Год назад
You my friend, are a magician!😂😂😂
@vasyaqwe2087
@vasyaqwe2087 Год назад
This is super useful, thanks!
@seanszarkowicz2910
@seanszarkowicz2910 Год назад
Thanks!
@KevinPowell
@KevinPowell Год назад
Thank you so much!
@StanleyBateswar
@StanleyBateswar Год назад
Really nice!
@criztiandev
@criztiandev Год назад
your the chad sir kevin
@deatho0ne587
@deatho0ne587 Год назад
Man what we used to have to do for these, prior to grid & flex.
@KevinPowell
@KevinPowell Год назад
Blood, sweat, and floats 😅 - it wasn't an especially fun time for layouts, but it was better than tables!
@BGdev305
@BGdev305 10 месяцев назад
I'm confused, wouldn't using VW or REM instead of px for the widths be a better solution?
@Pesthuf
@Pesthuf Год назад
I wish grid would make it easier to define that you want columns counts of certain sizes only - like only allowing snapping between 8, 4, 2 and 1 while disallowing 5,6 and 7. This comes up often when trying to align logos and you don't want, say, 6+2 items, but only 8 or 4+4 or 2+2+2+2... So far, I've not found any solution other than media queries (and container queries in the future).
@KevinPowell
@KevinPowell Год назад
That would be pretty cool of we could do that!
@D7460N
@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.
@SoItGoesCAL34
@SoItGoesCAL34 Год назад
Great!.... Dare I say it? AWESOME :)
@toddribnek6660
@toddribnek6660 Год назад
Haha, I've never thought of using flex-grow like that. Not sure if you were adjusting to fast but it looked a little jittery.
@KevinPowell
@KevinPowell Год назад
Might have just been a recording glitch, doesn't cause any issues I've ever noticed.
@olatunjiabayomi5945
@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?
@dwarfbard
@dwarfbard Год назад
By the way it would be interesting to see how you would tackle accessibility options with modern website css.
@kodosensei
@kodosensei Год назад
Awesome !!!!! 🚀🚀🙌
@luismoriguerra669
@luismoriguerra669 Год назад
Thanks a lot! master
@leodragonheart754
@leodragonheart754 10 месяцев назад
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
@IvoPoetzsch
@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)
@godnyx117
@godnyx117 Год назад
Thank you for this video! My only problem with CSS is that a lot of time you need to do this "hackery" things and I would like instead to have standards ways of doing pretty much anything I need. That's why along side learning CSS, I also design my own markup language that will be used as a GUI libraries to create native apps that would also be able to be searched through the internet and be integrated into other apps. It will takes years but once it's out, it will be awesome!
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 Год назад
Привіт з України ! Thank you very much, King of CSS!
@intsfanatic
@intsfanatic Год назад
Wow, didn´t even know flex-grow can have a value of bigger than 1.
@PhilDiasPJD
@PhilDiasPJD Год назад
Hey Kevin. Love your channel. A question if I may, why are you saying it's better not to use media queries?
@KevinPowell
@KevinPowell Год назад
I took a moment to say there's nothing wrong with media queries, but it's nice when we can have simple solutions that don't use them. Less code means less maintenance, and if I can make the browser figure things out for me, all the better 🙂
@PhilDiasPJD
@PhilDiasPJD Год назад
@@KevinPowell Thanks Kevin, the way I have been working recently using media queries actually uses my strengths and saves time. But find out new ways is the great thing. It's one of the things i love about css, there is usually multiple ways to get to a possible solution. Thanks Kevin.
@down__lo7359
@down__lo7359 Год назад
he said right in the beginning thats *not* what he is saying :D
@NicoHeinrich
@NicoHeinrich Год назад
4:30 This is magic. Why does the mouse wheel work horizontally?! I normally use JS for this ...
Далее
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 196 тыс.
Learn how to use Media queries & Container queries
34:33
На кого пойти учиться?
00:55
Просмотров 230 тыс.
Don't bother ganking Ammar - ESL Dota 2
00:23
Просмотров 225 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 83 тыс.
How to make your website responsive
39:13
Просмотров 40 тыс.
The problem with percentages in CSS
9:26
Просмотров 105 тыс.
Flexbox design patterns you can use in your projects
15:33
23 CSS features you should know (and be using) by now
31:31
Please stop using px for font-size.
15:18
Просмотров 220 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 86 тыс.
На кого пойти учиться?
00:55
Просмотров 230 тыс.