A simple approach to layouts when going from design to code

When we have a static design file, whether that’s a Figma design or a .jpg file, often the hardest part is breaking down and figuring out how the layout is going to work. In this video, I take a look at how you can break down a layout into it’s pieces to help make the process a lot easier.
🔗 Links
✅ The Frontend Mentor Project: www.frontendmentor.io/challen...
✅ Modern CSS by Stephanie Eckles: moderncss.dev/
✅ How to pick when to use Flexbox and Grid: • Flexbox or grid - How ...
⌚ Timestamps
00:00 - Introduction
01:05 - Draw boxes around EVERYTHING
04:00 - Then see how those boxes are organized
09:00 - Turning the layout into HTML
13:10 - Doing the same thing for the smaller pieces
16:30 - Why I look at the desktop design even if I code mobile-first
17:45 - Using existing websites to practice breaking down layouts
22:20 - Picking between flexbox and grid
#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 KZbin 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!

[@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.

[@user-gu5ts5nx8r]

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

[@MrBrady95]

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

[@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!

[@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

[@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!

[@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!

[@ChrisClines]

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

[@andershofsten1209]

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

[@ebichu-dechu]

This is exactly the tutorial I have been waiting for so long! Design -> code

[@UDOFAA]

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

[@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.

[@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

[@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'

[@TomasHradckyComposer]

Great staring point. Makes good sense. Thanks.

[@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.

[@reznov00]

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

[@ken_sparks]

This is very helpful. Thanks for posting!

[@Hamstimusprime]

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

[@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

[@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!

[@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 🤘

[@Woeden]

Very valuable tips, many thanks.

[@petarkolev6928]

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

[@jamesgulland]

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

[@tyro7428]

Great video! Easily applicable and demands usage

[@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

[@Tiger1AuasfE]

Very nice video, very helpful.

[@maxtsh]

Awesome, very good.

[@huylearning2543]

thanks you, this is very helpful

[@elenamikhaylova5086]

great video!

[@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.

[@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.

[@kuthathwe]

Amazing video, Explained well

[@KevinPowell]

Glad you liked it!

[@davidduru2789]

I really love your videos

[@Wynorrific1]

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

[@BoobCheese]

loving the tuesday beginner video 👍

[@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.

[@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 :)

[@jhonnatanr]

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

[@nephiw]

Great video Respected Sir!/Madam!

[@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.

[@welling1]

More tutorials like this please.

[@mamomi1hd993]

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

[@zool.artisan]

thank you

[@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.

[@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

[@adamos.webdev]

Extremlu helpful

[@tonimaunde]

Premium content. Thank you, Kevin.

[@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.

[@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!

[@INAVACL]

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

[@BrinleyBlogette]

This is a greeeeeatttttt video 👏 ❤

[@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.

[@andreasmoor4969]

Danke!

[@KevinPowell]

Thank you so much!

[@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?

[@ayushdedhia25]

Only you can make a design to code look easy ❤

[@harryindaclub89]

I agree with you! He is the best.

[@outpost31737]

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

[@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! 😅

[@Username-em1oe]

More figma to code please!

[@Warface]

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

[@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.

[@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)

[@koenv85]

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

[@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!

[@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.

[@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.

[@rumorscameras]

is that an audio technica at4050 series>

[@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?

[@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.

[@_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.

[@__manojts__]

second 😂

[@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.

[@isodoubIet]

Figma balls hahhahahahhahah

[@user-lm2cq6yh1v]

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