From Figma to Code / Creating a resume page

From the creator

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: https://www.youtube.com/watch?v=bFIIHOI5QoE ✅ 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-to-hide-content/ ✅ Before and After explained: https://youtu.be/zGiirUiWslI ✅ More on custom scrollbars: https://youtu.be/lvKK2fs6h4I ⌚ 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

Published 2023-05-30 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.