Responsive Layouts Workshop

Looking to step up your CSS? I have free and premium courses: kevinpowell.co...
The codepens: codepen.io/col...
Come hang out with other dev's in my Discord Community
💬 / discord
#css
--
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@lptimey]

starting soon ends at 4:20 (serious)

[@lausianne]

But only starts to become interesting at 7:14

[@sahajranipa]

You can make a series about solving someone's website and if you were the front end developer what would you have changed something and made it even better.

[@taryn_papas]

Thank you, Kevin, for all your amazing videos! I am new to CSS, and I really like your style of teaching. You explain it so well.

[@blessdarah1256]

This was the AI human that ai will never have. Was so refreshing to watch and just renew a lot of things again.

[@lancecourse]

Thanks. CSS Grib is a blessing

[@tomaz-laurensoft]

Kevin you are awesome :) I love CSS but with you the learning is amazingly fast, what a great Amazing Layouts Workshop \o/ ...

[@hefalump56]

Lots of good information here, but went a little long. Looking forward to a naming convention episode. Thanks Kevin.

[@mike5629]

Thank you for this 😅

[@hcmac100]

Again thank you 🤩

[@Erril_Ferndal]

you are amazing!

[@OCEMTechZone]

Great 🎉 realtime topic sir

[@devindadilshan7267]

thank you sir

[@beniaminsferciuc8810]

I need a solution to the following problem. I would be very happy if you had the solution. I have an image on the background and above it a white div, on the first half I have some inputs and on the second I would like to cut out a square with rounded corners (another div) to see the image that is underneath. How to do this in css?

[@d-short2360]

Great Kevin like super man🦸🏻

[@d-short2360]

2000 likes target = 👍🏻

[@AlThePal78]

Another thing I would love to see from you, because your tool box is amazing, is for you to make a simple web site from scratch. When I mean simple, that might not be easy for you. Your mind is too complexed lol and make sure you name the css variables poopoo LMAO or whatever your son said lol. Like I want to see what stack you create it in. How you create your clr-variables. The whole css or sass variable list etc.. How you incoporate your buttons. I don't want to see it broken down into smaller videos unless it is in a list of all your videos into one. Like the first one could be the tools you use all the time, by tools your css variable that you know for sure you using in every project like earlier --clr ones. However, why you have so man y clr ones. I mean this video is phenomenal and shows so much of your thinking but you building a site from scratch. Not an ecommerce, just like maybe a simple portfolio from start to finish. If you use a stack or you not using a stack. Will you use typescript or js. I don't know if you even need tailwind or bootstrap but if you would use it when would you! implement it lol I know all your videos break it down but this is what I would like to see 2024 because 3 years ago you use REACT or something like that and this year you would choose .net, doubt it, or Vue and why you changed. I love your content I might even subscribe soon. ;)

[@kacperkorzeniewski2032]

What do you think about creating mobile nav using popover in html?

[@AlThePal78]

I just need you to take a quick look and see if how messed up my site is lol then we can talkl responsiveness. I have not done anything to my portfolio just been on my fishing site nothing spectacular either lol

[@chrisicotec7652]

@20:47 - when you have trouble with responsiveness then youre the problem.... no im not :) it vs code or the browser thats being a d*ck .... lol... nah, i totally agree with that statement, i spend a lot of my free time just playing with CSS,i dont start out with any final goal in mind, just play with CSS, sometimes i end up with happy accidents, other times i totally balls it up and break everything, its all part of the fun working out where i went wrong.... my biggest setback is im good at the design and layout part but i totally suck at creating content for them

[@irfansaeedkhan7242]

i have a question client gave me figma on made for 1440p but he want exact same view like image from 1280 to 1920 to 2k screen, there were bunch of cards banners, grids , text boxes, how to achieve this ?? is it possible ?

[@onkelhoy1]

so wait, let see if I understood your question. You have a client who gave you a figma and they specifically wants that you match ALL dimensions of this figma file? easy answer, use px as unit complicated answer: first of figma uses canvas so all their views don't quite match real case web (meaning once you implement based on their px values you won't get same feeling of design) second, how I would do it professionally is to try to first understand the view and map everything as much you can in a ratio based. Stick to rem but % is also good, you need to make stuff responsive but here is where I get confused.. you say this is a client to you - is this a professional client or is this someone you know? Because your question is confusing and it doesn't sound like you are familiar with what you do, perhaps this video can teach you about responsive design and then try to apply that. If you are beginner (and of course there's no problem with that!) I would suggest you just try to match the design according to the figma, try maybe use px first but as you change your dimension you should quickly see how the design gets broken there's many ways to fix the same problem, and my main recommendation from all this is to learn plenty and of course one of the best way is by doing (you need to first understand your problem to really appreciate the solutions). Best of luck!

[@xphstos_]

I don’t know if this will help, onkelhoy1’s comment pretty much says it all! I’m Figma is you copy the artboard and press K or ctrl/cmd + k (one of both) it will show up a scale menu. You can scale the whole artboard based on a percentage or more importantly using hard values. It’s pretty easy for you to create all the different artboard sizes you want, but be cautious this will create values with decimals. Obviously we cannot use them so just round the values. If you don’t have a payed Figma account, just copy the whole artboard in a draft file of yours in order for you to scale or edit the design if you need to.

[@maximemillat1771]

Depends on what you mean by « same view » do you mean it need to scale to take the same proportion of the screen ? or does it need to stay same size on all screen ?

[@irfansaeedkhan7242]

​ @maximemillat1771 ​ @onkelhoy1 ​ @xphstos_ thank you for your replies, i already mention ( same like image ) , imagine image of a person , where his nose is, eyes are etc, regardless you increase the size full width on desktop or on mobile image aspect ratio and parts inside it stays same sizes are propotion proper , so me , well i am not newbie have made many websites but this was client who demanded this, mostly i fix the width on 1280 and design from 1440 figma designs, so even size is 2k my design is at max width 1280 so nothing goes out of order and even youtube linkedin does that, but his requirement was the design i see on 1440 , if person opens it on 2k screen it should exact same, and on 1280 it should looks same, so for font sizes i try to used clamp() min max etc but i did acheive 50 60% of what he wanted but it was too much time consuming and by looking at the replies i got it you guys have not faced such issue yet or a client like that so may be its not possible at all for now, i can use vw vh for fonts for certain cases but not for whole site,

[@ВікторМайкут-п4ф]

Hello from Ukraine!

[@ghaithzakk]

eh, what's so special about being from Ukraine?

[@akashsoren1368]

Hello from India

[@dimtodim]

Nazi headz​@@ghaithzakk

[@phat80]

Hello from Russia

[@ВікторМайкут-п4ф]

@@dimtodim hou mean russians?