A simple approach to layouts when going from design to code

[@user-wy6iy7ij1z]

We need more figma to code. Or at least frontend mentor,. please do more video about these

[@VelvetSage]

Bro, seriously?

[@user-wy6iy7ij1z]

@@VelvetSage seriously, his videos about these help me so much

[@fokspoks]

I need more videos like this one too, as a front dev who want to start combining code with designs

[@user-wy6iy7ij1z]

@@fokspoks yeah, they are super good. The last one that i watched helped me so much, it explain everything, how to structure the HTML, how to choose the variables, responsiveness etc.

[@عبدالقادرعبدالرحمنعبدالله]

Very true

[@fullstackprojects5615]

only a highly experience and seasoned professional knows the stuff which Kevin is talking about. His hair hasn't gotten gray with age, it's his endless dedication and countless hours that he has given to his most loved skill CSS that has made him the way he is. Feels so inspired!

[@JohnMontet]

I've been developing for 25 years, and I still found this hugely helpful. Thank you, Kevin!

[@hamiltonjunior8399]

I have to say: Maybe this is your best video ever, and I didn't even finish yet!

[@RikyEze]

Each video is a banger and always tackling important issues. Thanks Kevin, you made me love CSS 😊

[@travellingstranger3378]

agreed

[@drkrueger]

As I plow through Django, this video is just what I needed to help visualize how I'm going to layout the website. Grrrrreat!

[@anonymouspanda7821]

Another amazingly helpful video. When i started programming (not just html/css/js but python too) i always wanted to jump right into projects and found myself struggling through. Its very important to make a plan and outline your steps so that you go into your code with organization. I also find it helpful to pull up any relevant documentation and familiarize myself with any new information i may need to use during my project. This has allowed me to become more efficient during my projects!

[@paulcharman8113]

Excellent video Kevin and really helpful for someone who gets a tad frustrated by the huge amount of options within CSS but also is guilty at times of jumping right in at the deep without the appropriate planning the video shows. I know you've said it in other videos but simplicity is often the key

[@julianalonso9579]

Thank you Kevin! I really enjoy are you explain things and you are always so polite and friendly it is even more enjoyable! keep up the good work!

[@Hamstimusprime]

Just finished a course on html css and Js, and This is EXACTLY what i was looking for!

[@andidaffaliefalza]

Thank you kev, this kind of video on structuring layout with html css is so important. Not many of em tutorials build like this, this is super-super important especially for beginners. Also thank you for your conquering layout course because i felt that it was a game changer for me on how to structure a layout like this. Besides structuring like this, there's a couple of concepts that beginners should know for example like the box model which basically all of the html elements is like a box and by default they had their own display such as block or inline elements. Again, super content.

[@magoxxii]

I'm doing your Conquering Responsive layouts course and this is excellent plus for it! Thanks Kevin for all the knowledge you are sharing with us!! 'Gracias por tanto, perdon por tan poco'

[@andershofsten1209]

I'm so glad I found your channel. You content is amazing, and very well explained and easy to follow.

[@jamesgulland]

Im just about to start my first ever f/e gig on Monday, so this is a very timely video, thanks!

[@JuanCastro-C]

Hi Kevin, I love these kind of videos, please keep making more like that, analyzing different types of layouts and finding the best approach, It is awesome and we learn a lot. Sharing is caring, thanks for sharing

[@reznov00]

Amazed by his drawing skills with a mouse. Those lines are looking straighter than me!

[@MrBrady95]

Nice one! I like watching the overview process. Once again, "KePow right in the CSSr"

[@UDOFAA]

Thanks for breaking it down into pieces... Watching from NG ❤

[@Loug522]

Sometimes I struggle a lot making things work(and often they don't work at all) because of the feeling that I'm using too many divs, then I watch your videos just to find out that the problem is me and not the amount of divs.

[@ChrisClines]

Can we take a moment to appreciate the fact you managed to write legible text with a mouse! Haha

[@jamesablanco]

I am still trying to practice my CSS, and breaking it out this way makes me understand how to better visualize and tackle my HTML. Thank you again for your videos and content. Kevin you make the videos informative and fun and engaging yet interesting. Thank you again

[@whitehoof]

Dear Kevin, this video is pure gold! 👍👍👍 These days, even my cats know when to use flex or grid (i don't), but seeing the bigger picture at the beginning of the job is the king of skills! Well, at least, one of the kings, i'm sure. Thank you so much for all the insights! 🎉 The boxes-drawing technique rulez, my html/css mentor uses the boxes to explain the layout all the time 🤘

[@andreasmoor4969]

Danke!

[@KevinPowell]

Thank you so much!

[@drucifer6]

Great content as usual! Love how you're not using buzzwords like "atomic" design to break things out into pieces. Also, I never bought into the whole mobile first trend. If you're building a phone app sure, but for web, desktop is always more complex.

[@simonswiss]

Not sure how long it has been since you changed mic from your Blue Yeti, but the audio is *so much better* with this new mic! Sounds great!

[@TomasHradckyComposer]

Great staring point. Makes good sense. Thanks.

[@petarkolev6928]

Holy cow :O This video is insanely valuable!!!!

[@deatho0ne587]

Good video as always. 16:55 Yes normally mobile is just make everything top to bottom, but sometimes it goes all "What the heck is this". To be fair then you use grid-template something and/or go to the UI/UX team & have them explain why to you in detail.

[@Shulkerkiste]

Super useful video, thank you! It would be awesome, if you could make videos like this one where you use this process and actual code the layout for Mobile and Desktop. The example websites/layouts can be simple. You could use some common layouts like in the video (equal columns or flex/grid layouts like 21:06, ...). I guess, it will be really helpful for everyone to learn how to implement such layouts based on a mockup. The website's content isn't that important as you mentioned. I know you already have videos about recreating a design, but I love the simplicity of this video. So maybe you could also implement the layout shown in this video, it's pretty nice. I'm looking forward to such kind of videos :)

[@daveturnbull7221]

I love poking about inside the bones of websites but my guesses as to how they did stuff is always wildly off - doesn't stop me from checking though. I often go through the actual stylesheets to see how they organised things in them, nose about in the various sections of the devtools seeing what errors are happening or css declarations being dropped. I find that not only does it boost my confidence a bit when I see the pro's get errors as well but by looking at what is going less than perfectlyfor them I can sometimes get a bit better understanding of things.

[@IronFoxOnFire]

This is very helpful. Thanks for posting!

[@wherethereswilltheresaway3297]

Awesome, extremely helpful. It would be cool to see some videos using dev mode in Figma, too. Thank you for putting so much good content out there and keeping us updated on current trends. Much appreciated 🤙🏽

[@KevinPowell]

I probably won't do a ton with dev mode, just because it's only free for 2 more months before it hits a paywall and most people won't have it 😅

[@wherethereswilltheresaway3297]

@@KevinPowell That makes sense, and is good to know haha. I won't waste too much time on it at this point then, Thank you. Hope you have an awesome day

[@Iam_inevitabIe]

This tuto came in at the right time, I'm actually in the middle of designing my final year project for my team and we are gonna need this approach thank u bro, let me know if I can send u the link to our figma project so u can have a look at it and give us feedback on it thanks.

[@Noritoshi-r8m]

Very valuable tips, many thanks.

[@sitedel]

To inspect existing websites, I like to use the 3D view to better see nested elements. This very handy tool is called 3D view in Edge and Layers in Firefox and Safari.

[@Wynorrific1]

Thank you sooooo much for your time and videos god bless you 🙏

[@welling1]

More tutorials like this please.

[@jhonnatanr]

I am absolutely loving this series of more beginner friendly videos as many others are. Thanks Kevin!!

[@chrisintocode]

Great video! I really love hearing about you're thought process I feel like it's similar to mine just with better techincal skills lol.

[@kuthathwe]

Amazing video, Explained well

[@KevinPowell]

Glad you liked it!

[@mamomi1hd993]

I have been doing the same but just backwards, hahaha. It really is a game changer!

[@tonimaunde]

Premium content. Thank you, Kevin.

[@tyro7428]

Great video! Easily applicable and demands usage

[@ronaldpaek]

Thank you for this Kevin, if you could make a course where u just break down layouts thought process from Figma files, would be so nice, I’d love a course like that

[@davidduru2789]

I really love your videos

[@franktielemans6624]

Thats what always do. I do this in Illustator and I allready give the elements classnames. When grid is needed I draw the grid lines with gridnumbers and I write all CCS code. It's amazing when you write CSS and never test while writing it.

[@nephiw]

Great video Respected Sir!/Madam!

[@Tiger1AuasfE]

Very nice video, very helpful.

[@outpost31737]

Thanks Kevin, very helpful! Makes sense to draw boxes around the content since web design is based on the box model 😉

[@huylearning2543]

thanks you, this is very helpful

[@ayushdedhia25]

Only you can make a design to code look easy ❤

[@harryindaclub89]

I agree with you! He is the best.

[@elenamikhaylova5086]

great video!

[@laurentiubica5739]

Very useful and valuable video! I would like also to use your Paint tool. What paint tool are you using there? Thank you, Kevin!

[@maxtsh]

Awesome, very good.

[@INAVACL]

Wireframing can be key as well if youre building something yourself / for team!

[@stevenelson43]

Nice one! Unless this example is a 1-page site, internal pages will have a different layout than the homepage, except for the header. Probably multiple different layouts. What’s your recommendation for organizing CSS styles for different sections of a website?

[@Username-em1oe]

More figma to code please!

[@adamos.webdev]

Extremlu helpful

[@zool.artisan]

thank you

[@juancarlostremolss3158]

So essentially what we have to do when we first see a design is to ask for the wireframes, and if there are no wireframes for us developers, we create our own (make sure to do it inside a copy of the design, you don't want to make changes as a developer to a design handed to you)

[@pinnaclewd]

Great to get the thoughts going but I would use grid template areas for the whole shabang.... no? grid-template-columns: 1fr 1fr 1fr grid-template-rows: auto; gap: 1rem; grid-template-areas: "logo nav nav" "img img right" "left middle right" "new1 new2 new3" ;

[@KevinPowell]

Could definitely work!

[@BrinleyBlogette]

This is a greeeeeatttttt video 👏 ❤

[@LukeDorny]

Awesome. I say push back and request the wireframes! If they don’t have those then double your rate. 😂

[@chestervirgil7968]

Hey Kevin, what theme extension do you use? I need to know! 😅

[@Warface]

Do you think using Bootstrap is still relevant or custom grid or flex layout is better?

[@koenv85]

Any reason why you used divs for the larger parts of the main instead of sections?

[@Adityacode]

Just Kevin reading my mind, like 100th time. I just had to convert a figma to react like 2 days ago for a internship.

[@ultratacoRX7]

I'd like to see a video kind of like this but targeted for designers to help them better understand how to make designs that are better/easier for dev. I'm an experienced dev and understand these concepts of boxes and responsiveness, but our designer does not really so I've had to become very good at building weird and difficult layouts. It's made me a better dev over time but dang it can be annoying.

[@AntowaKartowa]

Probably this video is for beginners - I didn't found something new and useful for me. From my perspective first question that shoul arise is how this layout should behave with real data. How it should cope with heights inconsistencies, when title is longer and takes 4+ lines, or descriptions in sidebar longer and makes sidebar taller than the hero block. Should we truncate sidebar descriptions, should CTA button sticks to description on some margin or it should sticks to the bottom of column?

[@Gojiyaravi]

Thanks Kevin for this amazing tutorial. Can you please share this figma file or template with me? I want to design this website as a practice.

[@rumorscameras]

is that an audio technica at4050 series>

[@_y7ya]

But when you've done enough front-end you can immediately know the html and css structure at a glance of a design. I think this is good for teaching someone the thinking process of layouts but drawing squares on a figma board should not be a standard part of a developer's workflow.

[@SRG-Learn-Code]

I would love to watch you do something with stylus.

[@KevinPowell]

I'm a Sass guy myself :D

[@SRG-Learn-Code]

​@@KevinPowell I mean adding custom styles to favourite websites with a extension.

[@Aleks-fp1kq]

Looks like wireframing to me.

[@mohammedmhilal4129]

first

[@mido3ds]

Inspiring comment I'm crying

[@mohammedmhilal4129]

thanks man@@mido3ds

[@uniquebrands6056]

Am sorry I lost my coding passion please who's gonna help me regain my passion ?

[@aqib1259]

Sure

[@KevinPowell]

I find if I fall into a rut, that sometimes you just need to find something that looks like fun to make. It can be *super* easy to do, but that let's you mindlessly build it without running into too many stumbling blocks. It can be pretty refreshing. Also, no harm at all in taking breaks, sometimes that's the best thing to do when everything is becoming a grind.

[@uniquebrands6056]

@@KevinPowell I just started relearning html and css from free codecamp since yesterday I hope I don't give up this time again. Am just really good at css just that I do face some challenges when using flexboxes and positioning properties and also responsiveness.

[@__manojts__]

second 😂

[@isodoubIet]

Figma balls hahhahahahhahah

[@أحمدفلتة]

Pray for Gaza

[@stonking8939]

Nothing new, this one... It's old.

[@houriayaseen5487]

I can't imagine how the world so afraid of telling the truth.. how thousands of people dying every day since 7 October, and the whole world just watching 💔.. an entire hospital just bumped and over nine hundred people were killed! why would anyone on earth bump a hospital?! #Gazagenocide #FreePalestine

[@gintoki_sakata__]

Shit like that happens all the time in many places. You just don't hear about it. And your comment isn't gonna help Palestine. Get over yourself