From Figma to Code / Creating a resume page

[@DesignCourse]

Thanks for covering it!

[@Harmxn]

You're welcome

[@KevinPowell]

Thanks for making it, was a lot of fun 😊

[@p_o_z_e]

You should do a video about setting up a css skeleton as a base for your project showing what kind of utility classes etc you use and recommend

[@neoncut]

Super useful to see you doing this. Extra 💜 for making the chapters!

[@Allformyequine]

YES! Love the chapters too! Ditto!

[@caiusscipio6390]

Legend you are. Read my mind have you? Drew a pretty similar design just yesterday I have. Thank you for all of the content you have made. Keep up the great work.

[@DanielediegidioFotografo]

My two favourite web design creators in one video,

[@iamalifawad]

While Watching this part from Gary's video today, I was thinking how can we create this design in real life with coding and after 30 minutes your video poped up on my feed. You guys are awesome 😍

[@Erwin_t]

Wow this was a design that Gary refractored for me. Haha and now the css king is coding it! Two amazing teachers ❤🎉 Thanks for the redisgn and coding my resume section. @DesignCourse and @kevinPowell

[@davebudah]

I always watch your videos and walk away more creative.

[@Tausif_Khan_07]

I am falling in love with CSS because you. Thank you very much ❤❤

[@ZonikGraF]

Genial Kevin !! muchas gracias por tu tiempo en enseñarnos.

[@serkan_bayram]

I haven't seen your scrollbar video and how you style it easily blow my mind nice trick

[@paulm.7967]

Loving the shorts lately. Great vid, looking forward to working through this one

[@riacharda]

If you downloaded the font zip, you'd find a variable font file for Outfit. I used it for my personal project a month ago. It's super versatile 👌🏾

[@yuriyzadorozhnyi3849]

Дякую Вам King of CSS !

[@evondevfrontend]

Always love your content. Inspire me a lot. Watching from Viet Nam 🔥

[@lauraamujica]

Cómo te quiero Kevin. Un gran abrazo desde Argentina y gracias por tanto

[@D7460N]

Coding with Kevin === time well spent

[@Allformyequine]

LOTS of good nuggets to learn in this, even if you have been doing css for a long time! Totally worth the watch! 5 stars :)

[@BryceAndEveeNZ]

I believe CSS is the more powerful side of web design ... I enjoy writing it more than the HTML stuff ... I can't get enough of these videos

[@chrisbolson]

Great content as always. A couple of observations: You could have used scroll snap on the job experiences scroll to get it it jump to each role. For small screens, whilst it isn’t in the original design, I would suggest moving the skills section down below the main contents this freeing up horizontal space.

[@FYYTWYFN]

Yeah without watching I thought he would use scroll snap. Well always good to make things even nicer.

[@aps69]

Recognized Gary's redesign from the thumbnail

[@b3rhunter]

Yo! Love the vids! Heard you mention a css boilerplate that you often use. Would love a vid that covers that boilerplate or a “how to build your own boilerplate” would be super cool! Thank you ser 🙏

[@anch072]

Yes please, things that would not change over time and things that keep changing...

[@omkargarde5867]

this would be very useful for me , please make a video about it

[@JohnTell]

Clicked in for the thumbnail. I'm a sales engineer and I will definitely use that description when writing my next resume 😅

[@gykonik]

I'm wondering if there's any document or video about how you would setup the custom properties? I feel like you include them in all videos, but each time only some of them. I would love some sort of "complete CSS setup for large projects with custom properties and dark mode" type of video or document. Does anyone have something like that? 😁

[@DavidWaumsley]

Thanks Kevin. Amazing content as always. I had not heard the term "Eyebrow" until today and have called this the "Strapline". I use this a lot and often struggled with how to mark it up. It's always felt wrong to me to have a before the . Plus the Eyebrow often has a good SEO keyword. In those cases have put this in a span and made it all the one . Honestly that has never felt right either. Do you (or anyone) have any more thoughts on this?

[@PauloRoque]

Hello Kevin, in the minute 59:50 seconds you mentioned the about the misalignment of the align-items but this is easy to fix, you just have to change "end" to "baseline".:)

[@tmbarral664]

Kevin, I'm glad to see you had a little bit of an annoyance with the clamp that you have to replace by a simple solution (that is remove your computation to the one done by the browser) as it allows me to illustrate a point about this: When I have to use calc() to help the design to be responsive, I know that I'm not doing it the way it should have been. With a little bit of thinking and tweaking (like for the clamp to flex), the calc could be changed in a way the browser will do the job natively. Sometimes, a grid, some areas (or grid cells defined) and some position absolute could solve this problem.

[@hassanhumayun1111]

Thanks Kevin

4:32 Where did you get the values for hsla colors, as Figma doesn't show it? 7:45 You didn't change the address at rel="preconnect".

[@MisterChaneb]

convertors lol for the colors

[@johny962]

Thank you very much. I learned so much

[@craigmillerer]

Fantastic!

[@cekuhnen]

Kevin - since you know code so well I am curious what your opinion about FIGAM is: I am currently looking into it to see if I could use it to teach students basic web design and then export the code easy. What I found sofar was that the FIGMA to code was rather bad and needed a lot of hand writing (knowledge too). Tools like framer etc are not usable for us in academia.

[@silseed]

Thanks, this is golden!

[@KevinPowell]

Thank you so much!

[@norboost]

I would suggest adding a visually-hidden h2 for Job experience as well and change each jobs heading to a h3. I think the page structure would make a lot more sense that way.

[@hassaneoutouaya]

Thank you so much!

[@namessis]

Hey Kevin, thanks for your amazing contents. I'm recently started CSS / HTML. I can not feel free while doing some practise. I'm trying to understand the environment and CSS world. Do you think about making grid layout and adding elements with flex tutorial ? This type of practise will really helpful for beginner imo cuz, feeling free while positioning of elements really helps beginners. Thanks !

[@bookwyrm4559]

Just Thank You

[@andyMutale]

This is awesome

[@stevelam1315]

How can I extract custom properties and utility classes from tailwind or bootstrap or Open Props and put them in my sass or postcss compiler files? Is this action allowed?

[@filipgajic56]

Hey Kevin, can you tell me why are you not using BEM and when is the best case to use it?

[@ColinMcMahon]

I am really loving your videos, Kevin! I am a UX/UI-designer and I am wondering wondering this; I used to do all my HTML/CSS myself years ago, but went more into the analytics part of UX (and UI)-design and paired myself with great front-end developers to build the front end. However, after probably 10 or so years since I "left" HTML and CSS, I am getting really in to it again, and a lot has to do with your videos. However, most of the front end these days is assembled in "pick-your-favorite-framework" and I have gotten feedback from the front-enders that they prefer that I just give them the Figmafiles as they have to redo most of my HTML/CSS into React components (and often Tailwind) anyway. What are your recommendations to bridge the gap so I can do most of the actual front end building by myself (HTML+CSS) and eliminate any "parsing" to React (or any other framework? And again - thank you so much for all of your incredible content!

[@KevinPowell]

Honestly, I wouldn't recommend doing any of the dev work unless you can do it within library/framework/whatever they're using. If they're using Tailwind, the project should only use Tailwind anyway for consistency. Whatever the system that's in place, it needs to be consistent throughout the project or it just creates a mess and is harder to maintain on the CSS side of things. And then a lot of things have dynamic content, so it needs to be turned into a React/Vue/Angular/Svelte/etc. component to work anyway. The only other option is to create a CSS design system, which would generally mean moving away from Tailwind and into something more custom. If it's a big enough project, it might be worth doing, but the dev team would have to be on board with it, and it would take time to fully develop properly. Then, instead of Tailwind, it's a custom system. If that sounds interesting to you, Mike Aparicio has a lot of good content that might interest you www.mikeaparicio.com/blog

[@ColinMcMahon]

@@KevinPowell Thank you for taking the time! 👍😃

[@D7460N]

Similar question(s) here. What happens to the interactive design and engineering? The data agnostic GUI and business logic (workflow, etc.)? Is that all lost in the translation shuffle between designers and framework developers? Why don't we define front-end as all things (data agnostic) GUI related and the back-end as all things (GUI agnostic) data related? Maybe with some sort of API abstract in the middle (middleware?) to map the two? Maybe the API abstract could be the JS framework? Wouldn't matter because they would be independent. The GUI would be framework agnostic. Would that not make both sides (and the middle) more independent and easily built and maintained? Each part is independent working toward mutually shared project requirements. All without having to redesig/rebuild multiple times. Maybe that's the "custom system" you're talking about Kevin? What if all this was done with standards driven, browser supported, vanilla HTML,CSS, and JS? Is that custom? Standards + vanilla + no dependencies === sustainability (future proof) Maybe it depends on the definition of "custom"? WDYT?

[@moxie21]

Great tutorial. I have also one question, is it ok if you chain classes when creating website like this way: .class-1 .class-2 class-1 is parent and class-2 is child element of class-1 or it depends ?

[@codewithgedo3067]

Can you do the card articles on the CSS-TRICKS website ?

[@Shelton_fr]

If it works, it works 😂🔥

[@amirmasoodjafari3207]

for mobile design i would change layout of icons and make them horizontal and put them on top maybe

[@mohamadmhana9453]

Thats pure premium content 💯✅ Kevin one day i'll battle you in a Css battle 🤝🏼

[@walidkheriji7120]

Helo, thank you for this video. is it possible to copy the code?

[@dragonnexs3621]

hi kevin, nice video I actually just saw gary's video about this refactor, great idea to try and code it. I really like the more condensed videos for more advanced design my attention span stops me from watching this 1h video. I think it would be great if these tutos were done with some easier designs cause I feel like I'm missing advanced stuff by not watching the entire 1h... just personal preferences here idk if other will agree

[@KevinPowell]

I totally get that long videos aren't for everyone, and I do try to mix it up. Unless I'm picking out a very specific part of a design that's tricky, it is hard to do a full code-along on a simple design that also runs into interesting things though. This one, for example, was pretty small, and is still a long video. I do have a few where I code up smaller frontend mentor projects as well, but they're not super short either.

[@itiremiroglu7646]

@@KevinPowell Hello Kevin, will you continue frontend mentor projects??

[@peterlistig2020]

Yeah, you can't use Google fonts in Germany because the user data is sent outside of Schengen (into the US) without an option for the user to disagree. You can use CDNs if their servers are in the EU.

[@gashumba888]

Is the any option to host Google Fonts locally on the web server?

[@peterlistig2020]

@@gashumba888 yes, a download button and a quick explanation how to use it is included in google fonts itself. And there are multiple tools to automatically download fonts, split them up per language to reduce download sizes, etc.

[@gashumba888]

@@peterlistig2020 Oh cool. I will check it out later. Thank you!

[@SeanGoresht]

17:39 - why not figure and figcaption?

[@michaelpumo83]

Why not use "scroll-padding-right" on the container instead of a pseudo item?

[@CodeNascher_]

59:38 I'd try align-items: baseline; in that case. edit: nvm. should have waited a couple of seconds 😂

[@harshshah3797]

Hi Kevin, love your videos , Please share figma design,if possible.

[@deatho0ne587]

FYI there are some blockers now that block any external stylesheets. Only reason I know is I use a popular one that has made a few items on several pages an empty square.

[@KevinPowell]

That seems fairly aggressive, a lot of stylesheets on CDNs out there with no privacy issues or anything.

[@deatho0ne587]

I think it is also, but was the default of the blocker after the Europe thing. Pages still work just break a few font icons mostly. example I do not see YT or Twitter icons on a few websites now.

[@derucore]

hi Kevin I am one of your subscriber, When I use prettier it add forward slash in single tag line img and input and meta, how do I remove the forward slash ? :)

[@fscaramuzza]

Brilliant video.. however, that half pixel is still tripping me :D

[@QwDragon]

Couldn't find a link to code to check, but I think, following should work: 0:17:35 Disagree. What if images are turned off or by some reason failed to loa0:d? alt is not only for screenreaders. 1:08:38 But you can set margin-right. 1:09:59 Drop the width on main and set contain: inline-size instead. Or even overflow: hidden. 1:13:15 Adding scrollbar-width: thin can remove arrows I think. 1:18:42 Padding for .job-experience itself or margin for .job:last-child, I think?

[@bhavintrivedi6194]

How to find the right value for Rem unit? e.g. you are using 1rem for fs-300. How to decide this ?

[@floramerano6293]

He makes it so complicated when you can make the damn thing so much easier! Just grab the values and set it up!!

[@rentefald]

Why not just serving the font from your server?

[@smgraphics3012]

where to get icons

[@AbdulBasit-fu8gi]

how can i get figma?

[@אוראלחלפון-ס3ק]

where did he got those svgs?

[@0Ipsita0]

Hi Kevin I love all your videos.Can you please make videos on how to make responsive pages using Sass media query.

[@KevinPowell]

Same way in sass as you would in CSS, only difference is you can nest the media query inside the selector of you want

[@serychristianrenaud]

thank

[@seddeknadhem5638]

Guys please someone answer me this! i stopped on CSS with the class job-experience.. i did just like he did grid then grid-auto-flow: column; but it didn't work. They didn't got aligned next to each other! why!!!?

[@seddeknadhem5638]

it worked thx

[@Mathes881]

Thank you very much for this! Can you do that also, the project setup etc for also bigger project? Or how it would look for a bigger project, from scratch?

[@amirzahavi90]

Hi Kevin, love your videos, I follow you for a while now (about 3 years) as I learned a lot from your content I see you focus on teaching more on layouts, would you care to do a content about styling something from the web application world (custom tables/dropdown/charts/etc). Again, I love ❤ your videos 1:30:10

[@m.b786]

BEM is already dead ?

[@KevinPowell]

BEM is still wildly popular, I just didn't really see the benefit on something small like this

[@GooseGumlizzard]

figma balls lmaooo gottem

[@roellemaire1979]

I would love to say to my clients: Mmm, this is difficult, i'll just do something else (talking about the scrollbar)

[@najmiter]

.love-and-support-from-Pakistan { transform: scale(100000000000000); }

[@zainslamdien8138]

Dude your real name is CSS KING. , i'm an asp coder btw. 😁

[@dannyyebs]

Hello world

[@KevinPowell]

👋

[@pandipatipavan3804]

​@@KevinPowell Please do provide the code files and the links in the description as soon as possible for free 🙏

[@ngetichishmael]

You introduced your son to web development and you didn't give us updates. Did he quit?

[@KevinPowell]

He's 11, of course he quit 🤣 - I'm lucky if he stays interested in *anything* for more than 15-minutes, lol.

[@floramerano6293]

The way you set up those custom properties is so convoluted that I don't even know where to even begin with it. Just grab the background color, the colors for the letters, and the font weights!!! Why do you have to make it so complicated!!! Like you have to perform some mundane calculations and stuff!!

[@saplingqwason]

you're doing all this accesibility stuff which I assume is out of habit and best practice. but for use case -- correct me if im wrong but you're basically wasting a bunch of time because no one who reads a resume is gonna need accessibility features. I cannot even imagine a company with a blind HR recruited. like they're going to read hundreds of resumes per opening with a screen reader? no. they're going to be fired for productivity or xfered to a different role. again, lmk if you can explain a use case for this accessibility other than bragging that your rseume is accessible.

[@mister_rookie]

A doubt, Using figma first and then again developing the website. 2 times literally. . Time waste and logically useless, Isn't it?

[@mister_rookie]

Instead of using figma for prototyping, Coding and simultaneously testing would be useful. Isn't it?

[@KevinPowell]

Most developers aren't designers, and most designers aren't developers. Most common thing is a designer creates a design in a software they are comfortable with, and then the developer makes it work.

[@arkansavalder]

kevin eats,digests and poops in stylesheets

[@floramerano6293]

Being in tech is like they are asking you to be a fucking robot!!