From Figma to Code / Creating a resume page

Thanks for covering it!

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

kevin eats,digests and poops in stylesheets

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

Thank you so much!

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

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.

Coding with Kevin === time well spent

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 😍

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

Thank you very much. I learned so much

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

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!!!?

This is awesome

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

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?

Thanks Kevin

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

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

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

where to get icons

Why not just serving the font from your server?

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.

Just Thank You

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

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?

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

figma balls lmaooo gottem

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 <p> before the <h1>. Plus the Eyebrow often has a good SEO keyword. In those cases have put this in a span and made it all the one <h1>. Honestly that has never felt right either. Do you (or anyone) have any more thoughts on this?

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 ?

Thanks, this is golden!

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.

If it works, it works 😂🔥

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? 😁

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

My two favourite web design creators in one video, <3!!!

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.

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

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 ? :)

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

thank

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 👌🏾

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

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

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