Title | : | From Figma to Code / Creating a resume page |
Duration | : | 01:30:12 |
Viewed | : | 73,676 |
Published | : | 30-05-2023 |
Source | : | Youtube |
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 -- Come hang out with other dev's in my Discord Community π¬ https://discord.gg/nTYCvrK 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! πΊ https://www.twitch.tv/kevinpowellcss --- Help support my channel π¨βπ Get a course: https://www.kevinpowell.co/courses π Buy a shirt: https://teespring.com/stores/making-the-internet-awesome π Support me on Patreon: https://www.patreon.com/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: https://twitter.com/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!
Avoid These 5 Awful CSS Mistakes 20:42 - 186,091 |
How to take control of Flexbox 16:01 - 68,928 |
Creating a layered card with HTML & CSS 41:51 - 45,650 |
Using CSS custom properties like this is a waste 16:12 - 153,114 |
Free and Private GitHub Copilot Clone for VS Co... 07:48 - 5,370 |
Responsive layout practice for beginners 11:37 - 95,413 |
What would you call this layout? 23:11 - 15,288 |
world's shortest Figma course 06:54 - 172,971 |