A simple approach to layouts when going from design to code
Рет қаралды 69,326
Күн бұрын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 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!
@user-wy6iy7ij1z 8 ай бұрын
We need more figma to code. Or at least frontend mentor,. please do more video about these
@VelvetSage 8 ай бұрын
Bro, seriously?
@user-wy6iy7ij1z 8 ай бұрын
@@VelvetSage seriously, his videos about these help me so much
@fokspoks 8 ай бұрын
I need more videos like this one too, as a front dev who want to start combining code with designs
@user-wy6iy7ij1z 8 ай бұрын
@@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 8 ай бұрын
Very true
@fullstackprojects5615 4 ай бұрын
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 7 ай бұрын
I've been developing for 25 years, and I still found this hugely helpful. Thank you, Kevin!
@hamiltonjunior8399 7 ай бұрын
I have to say: Maybe this is your best video ever, and I didn't even finish yet!
@RikyEze 8 ай бұрын
Each video is a banger and always tackling important issues. Thanks Kevin, you made me love CSS 😊
@travellingstranger3378 8 ай бұрын
agreed
@drkrueger 7 ай бұрын
As I plow through Django, this video is just what I needed to help visualize how I'm going to layout the website. Grrrrreat!
@MrBrady95 22 күн бұрын
Nice one! I like watching the overview process. Once again, "KePow right in the CSSr"
@anonymouspanda7821 8 ай бұрын
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 7 ай бұрын
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 8 ай бұрын
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!
@andershofsten1209 8 ай бұрын
I'm so glad I found your channel. You content is amazing, and very well explained and easy to follow.
@UDOFAA 6 ай бұрын
Thanks for breaking it down into pieces... Watching from NG ❤
@JuanCastro-C 8 ай бұрын
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
@andidaffaliefalza 8 ай бұрын
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 8 ай бұрын
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 7 ай бұрын
Great staring point. Makes good sense. Thanks.
@simonswiss 7 ай бұрын
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 8 ай бұрын
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 🤘
@jamesablanco 7 ай бұрын
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
@Hamstimusprime 7 ай бұрын
Just finished a course on html css and Js, and This is EXACTLY what i was looking for!
@ken_sparks 8 ай бұрын
This is very helpful. Thanks for posting!
@Woeden 7 ай бұрын
Very valuable tips, many thanks.
@petarkolev6928 6 ай бұрын
Holy cow :O This video is insanely valuable!!!!
@jamesgulland 7 ай бұрын
Im just about to start my first ever f/e gig on Monday, so this is a very timely video, thanks!
@tyro7428 8 ай бұрын
Great video! Easily applicable and demands usage
@huylearning2543 7 ай бұрын
thanks you, this is very helpful
@drucifer6 7 ай бұрын
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.
@ChrisClines 7 ай бұрын
Can we take a moment to appreciate the fact you managed to write legible text with a mouse! Haha
@Wynorrific1 8 ай бұрын
Thank you sooooo much for your time and videos god bless you 🙏
@reznov00 7 ай бұрын
Amazed by his drawing skills with a mouse. Those lines are looking straighter than me!
@kuthathwe 7 ай бұрын
Amazing video, Explained well
@KevinPowell 7 ай бұрын
Glad you liked it!
@BoobCheese 8 ай бұрын
loving the tuesday beginner video 👍
@Tiger1AuasfE 8 ай бұрын
Very nice video, very helpful.
@davidduru2789 7 ай бұрын
I really love your videos
@Loug522 8 ай бұрын
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.
@wherethereswilltheresaway3297 8 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
@@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
@jhonnatanr 8 ай бұрын
I am absolutely loving this series of more beginner friendly videos as many others are. Thanks Kevin!!
@daveturnbull7221 8 ай бұрын
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.
@elenamikhaylova5086 Ай бұрын
great video!
@maxtsh 7 ай бұрын
Awesome, very good.
@chrisintocode 8 ай бұрын
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.
@nephiw 8 ай бұрын
Great video Respected Sir!/Madam!
@welling1 8 ай бұрын
More tutorials like this please.
@tonimaunde 7 ай бұрын
Premium content. Thank you, Kevin.
@zool.artisan 7 ай бұрын
thank you
@Shulkerkiste 8 ай бұрын
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 :)
@mamomi1hd993 8 ай бұрын
I have been doing the same but just backwards, hahaha. It really is a game changer!
@sitedel 8 ай бұрын
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.
@BrinleyBlogette 8 ай бұрын
This is a greeeeeatttttt video 👏 ❤
@ronaldpaek 8 ай бұрын
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
@Iam_inevitabIe 8 ай бұрын
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.
@adamos.webdev 8 ай бұрын
Extremlu helpful
@laurentiubica5739 4 ай бұрын
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 7 ай бұрын
Wireframing can be key as well if youre building something yourself / for team!
@franktielemans6624 8 ай бұрын
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.
@andreasmoor4969 7 ай бұрын
Danke!
@KevinPowell 7 ай бұрын
Thank you so much!
@outpost31737 8 ай бұрын
Thanks Kevin, very helpful! Makes sense to draw boxes around the content since web design is based on the box model 😉
@Username-em1oe 8 ай бұрын
More figma to code please!
@deatho0ne587 8 ай бұрын
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.
@stevenelson43 7 ай бұрын
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?
@chestervirgil7968 8 ай бұрын
Hey Kevin, what theme extension do you use? I need to know! 😅
@ayushdedhia25 8 ай бұрын
Only you can make a design to code look easy ❤
@harryindaclub89 8 ай бұрын
I agree with you! He is the best.
@Warface 8 ай бұрын
Do you think using Bootstrap is still relevant or custom grid or flex layout is better?
@lukedorny 8 ай бұрын
Awesome. I say push back and request the wireframes! If they don’t have those then double your rate. 😂
@koenv85 8 ай бұрын
Any reason why you used divs for the larger parts of the main instead of sections?
@juancarlostremolss3158 7 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
Could definitely work!
@Gojiyaravi 8 ай бұрын
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.
@Adityacode 8 ай бұрын
Just Kevin reading my mind, like 100th time. I just had to convert a figma to react like 2 days ago for a internship.
@AntowaKartowa 7 ай бұрын
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?
@rumorscameras 7 ай бұрын
is that an audio technica at4050 series>
@ultratacoRX7 6 ай бұрын
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.
@SRG-Learn-Code 8 ай бұрын
I would love to watch you do something with stylus.
@KevinPowell 8 ай бұрын
I'm a Sass guy myself :D
@SRG-Learn-Code 8 ай бұрын
@@KevinPowell I mean adding custom styles to favourite websites with a extension.
@_y7ya 7 ай бұрын
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.
@Aleks-fp1kq 7 ай бұрын
Looks like wireframing to me.
@mohammedmhilal4129 8 ай бұрын
first
@mido3ds 8 ай бұрын
Inspiring comment I'm crying
@mohammedmhilal4129 8 ай бұрын
thanks man@@mido3ds
@__manojts__ 8 ай бұрын
second 😂
@uniquebrands6056 8 ай бұрын
Am sorry I lost my coding passion please who's gonna help me regain my passion ?
@aqib1259 8 ай бұрын
Sure
@KevinPowell 8 ай бұрын
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 8 ай бұрын
@@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 8 ай бұрын
Figma balls hahhahahahhahah
@user-lm2cq6yh1v 7 ай бұрын
Pray for Gaza
@stonking8939 8 ай бұрын
Nothing new, this one... It's old.
@houriayaseen5487 8 ай бұрын
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__ 8 ай бұрын
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
Jason Derulo
Рет қаралды 23 МЛН