We need more figma to code. Or at least frontend mentor,. please do more video about these
@VelvetSage10 ай бұрын
Bro, seriously?
@user-wy6iy7ij1z10 ай бұрын
@@VelvetSage seriously, his videos about these help me so much
@fokspoks10 ай бұрын
I need more videos like this one too, as a front dev who want to start combining code with designs
@user-wy6iy7ij1z10 ай бұрын
@@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-gu5ts5nx8r10 ай бұрын
Very true
@fullstackprojects56156 ай бұрын
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!
@JohnMontet10 ай бұрын
I've been developing for 25 years, and I still found this hugely helpful. Thank you, Kevin!
@RikyEze10 ай бұрын
Each video is a banger and always tackling important issues. Thanks Kevin, you made me love CSS 😊
@travellingstranger337810 ай бұрын
agreed
@hamiltonjunior839910 ай бұрын
I have to say: Maybe this is your best video ever, and I didn't even finish yet!
@anonymouspanda782110 ай бұрын
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!
@drkrueger10 ай бұрын
As I plow through Django, this video is just what I needed to help visualize how I'm going to layout the website. Grrrrreat!
@paulcharman811310 ай бұрын
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
@julianalonso957910 ай бұрын
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!
@MrBrady952 ай бұрын
Nice one! I like watching the overview process. Once again, "KePow right in the CSSr"
@whitehoof10 ай бұрын
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 🤘
@UDOFAA9 ай бұрын
Thanks for breaking it down into pieces... Watching from NG ❤
@andidaffaliefalza10 ай бұрын
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.
@TomasHradckyComposer10 ай бұрын
Great staring point. Makes good sense. Thanks.
@Hamstimusprime9 ай бұрын
Just finished a course on html css and Js, and This is EXACTLY what i was looking for!
@Loug52210 ай бұрын
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.
@ChrisClines10 ай бұрын
Can we take a moment to appreciate the fact you managed to write legible text with a mouse! Haha
@magoxxii10 ай бұрын
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'
@andershofsten120910 ай бұрын
I'm so glad I found your channel. You content is amazing, and very well explained and easy to follow.
@jamesgulland10 ай бұрын
Im just about to start my first ever f/e gig on Monday, so this is a very timely video, thanks!
@JuanCastro-C10 ай бұрын
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
@reznov009 ай бұрын
Amazed by his drawing skills with a mouse. Those lines are looking straighter than me!
@simonswiss10 ай бұрын
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!
@jamesablanco10 ай бұрын
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
@petarkolev69288 ай бұрын
Holy cow :O This video is insanely valuable!!!!
@drucifer610 ай бұрын
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.
@Noritoshi-r8m10 ай бұрын
Very valuable tips, many thanks.
@daveturnbull722110 ай бұрын
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.
@wherethereswilltheresaway329710 ай бұрын
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 🤙🏽
@KevinPowell10 ай бұрын
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 😅
@wherethereswilltheresaway329710 ай бұрын
@@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
@BoobCheese10 ай бұрын
loving the tuesday beginner video 👍
@Shulkerkiste10 ай бұрын
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 :)
@ken_sparks10 ай бұрын
This is very helpful. Thanks for posting!
@kuthathwe10 ай бұрын
Amazing video, Explained well
@KevinPowell10 ай бұрын
Glad you liked it!
@sitedel10 ай бұрын
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.
@davidduru278910 ай бұрын
I really love your videos
@huylearning254310 ай бұрын
thanks you, this is very helpful
@outpost3173710 ай бұрын
Thanks Kevin, very helpful! Makes sense to draw boxes around the content since web design is based on the box model 😉
@deatho0ne58710 ай бұрын
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.
@elenamikhaylova50863 ай бұрын
great video!
@maxtsh9 ай бұрын
Awesome, very good.
@Wynorrific110 ай бұрын
Thank you sooooo much for your time and videos god bless you 🙏
@tonimaunde9 ай бұрын
Premium content. Thank you, Kevin.
@tyro742810 ай бұрын
Great video! Easily applicable and demands usage
@ronaldpaek10 ай бұрын
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
@mamomi1hd99310 ай бұрын
I have been doing the same but just backwards, hahaha. It really is a game changer!
@welling110 ай бұрын
More tutorials like this please.
@ayushdedhia2510 ай бұрын
Only you can make a design to code look easy ❤
@harryindaclub8910 ай бұрын
I agree with you! He is the best.
@Tiger1AuasfE10 ай бұрын
Very nice video, very helpful.
@jhonnatanr10 ай бұрын
I am absolutely loving this series of more beginner friendly videos as many others are. Thanks Kevin!!
@chrisintocode10 ай бұрын
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.
@zool.artisan10 ай бұрын
thank you
@franktielemans662410 ай бұрын
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.
@Iam_inevitabIe10 ай бұрын
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.
@nephiw10 ай бұрын
Great video Respected Sir!/Madam!
@Username-em1oe10 ай бұрын
More figma to code please!
@lukedorny10 ай бұрын
Awesome. I say push back and request the wireframes! If they don’t have those then double your rate. 😂
@INAVACL10 ай бұрын
Wireframing can be key as well if youre building something yourself / for team!
@juancarlostremolss31589 ай бұрын
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)
@andreasmoor496910 ай бұрын
Danke!
@KevinPowell10 ай бұрын
Thank you so much!
@laurentiubica57396 ай бұрын
Very useful and valuable video! I would like also to use your Paint tool. What paint tool are you using there? Thank you, Kevin!
@BrinleyBlogette10 ай бұрын
This is a greeeeeatttttt video 👏 ❤
@pinnaclewd10 ай бұрын
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" ;
@KevinPowell10 ай бұрын
Could definitely work!
@adamos.webdev10 ай бұрын
Extremlu helpful
@stevenelson4310 ай бұрын
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?
@Adityacode10 ай бұрын
Just Kevin reading my mind, like 100th time. I just had to convert a figma to react like 2 days ago for a internship.
@chestervirgil796810 ай бұрын
Hey Kevin, what theme extension do you use? I need to know! 😅
@ultratacoRX78 ай бұрын
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.
@koenv8510 ай бұрын
Any reason why you used divs for the larger parts of the main instead of sections?
@Warface10 ай бұрын
Do you think using Bootstrap is still relevant or custom grid or flex layout is better?
@AntowaKartowa10 ай бұрын
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?
@rumorscameras9 ай бұрын
is that an audio technica at4050 series>
@Gojiyaravi10 ай бұрын
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.
@SRG-Learn-Code10 ай бұрын
I would love to watch you do something with stylus.
@KevinPowell10 ай бұрын
I'm a Sass guy myself :D
@SRG-Learn-Code10 ай бұрын
@@KevinPowell I mean adding custom styles to favourite websites with a extension.
@_y7ya10 ай бұрын
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-fp1kq10 ай бұрын
Looks like wireframing to me.
@mohammedmhilal412910 ай бұрын
first
@mido3ds10 ай бұрын
Inspiring comment I'm crying
@mohammedmhilal412910 ай бұрын
thanks man@@mido3ds
@__manojts__10 ай бұрын
second 😂
@isodoubIet10 ай бұрын
Figma balls hahhahahahhahah
@user-lm2cq6yh1v10 ай бұрын
Pray for Gaza
@uniquebrands605610 ай бұрын
Am sorry I lost my coding passion please who's gonna help me regain my passion ?
@aqib125910 ай бұрын
Sure
@KevinPowell10 ай бұрын
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.
@uniquebrands605610 ай бұрын
@@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.
@stonking893910 ай бұрын
Nothing new, this one... It's old.
@houriayaseen548710 ай бұрын
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__10 ай бұрын
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