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!

🔥My Flexbox properties cheatsheet: https://kevin-powell.ck.page/25792a66b4

🔗 Links
✅ Gary's video where he made this design:    • This is how you Refactor a UI Design  
✅ Flexbox Cheatsheet: https://kevin-powell.ck.page/25792a66b4
✅ A privacy-friendly drop-in replacement for Google Fonts: https://fonts.coollabs.io/
✅ More on Visually Hidden: https://www.a11yproject.com/posts/how...
✅ Before and After explained:    • Before and After pseudo elements expl...  
✅ More on custom scrollbars:    • Create custom scrollbars using CSS  

⌚ 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
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://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!