From Figma to Code / Creating a resume page

My friend Gary Simon from @DesignCourse recently put up a video where he refactored a few different designs in Figma, and one of them looked like it would be a ton of fun to code up. Luckily, he was kind enough to share the design file with me, and I went ahead and did my best to make it come to life!


🔗 Links

⌚ Timestamps
00:00 - Introduction
02:05 - How I start a project from scratch
04:31 - My custom properties
06:41 - Getting the font
08:15 - Setting up some basic styles
12:13 - Do we need utility classes?
12:45 - Writing the HTML for the icon list
19:23 - Writing the HTML for the main area
24:48 - Starting the CSS - the page layout
30:00 - Quickly setting up the job experiences
31:10 - Styling the icon list
52:37 - Components don’t live in isolation
53:10 - Styling the top of the main area
54:14 - Styling the job experiences
1:03:04 - Setting up the horizontal scrolling
1:17:52 - Adding some extra space to the last element
1:19:52 - Fixing responsive issues

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

[neoncut]

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

[tmbarral]

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.

[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

[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".:)

[brhunter]

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 🙏

[ms]

How did you figure out the what values to use for sizes and margins and padding in different spots? Did you eyeball it? 🤔

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

[moxie]

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 ?

[Ipsita]

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

[czerskip]

Current role: Independent Consultant, accepting new projects

[amirzahavi]

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

[seddeknadhem]

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

[Mathes]

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?

[roellemaire]

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

[ngetichishmael]

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