From Figma to Code - Creating a Resume Page

Learn how to transform a Figma design into a functional resume webpage in this comprehensive video tutorial. Explore the process of starting a project from scratch, setting up custom properties, and implementing essential HTML and CSS techniques. Master the art of creating icon lists, structuring the main content area, and styling job experiences. Dive into advanced topics like horizontal scrolling and responsive design fixes. Gain valuable insights on font selection, utility classes, and component isolation. Perfect for web developers looking to enhance their skills in translating designs into code and creating visually appealing, responsive resume pages.

Syllabus

- Introduction
- How I start a project from scratch
- My custom properties
- Getting the font
- Setting up some basic styles
- Do we need utility classes?
- Writing the HTML for the icon list
- Writing the HTML for the main area
- Starting the CSS - the page layout
- Quickly setting up the job experiences
- Styling the icon list
- Components don’t live in isolation
- Styling the top of the main area
- Styling the job experiences
- Setting up the horizontal scrolling
- Adding some extra space to the last element
- Fixing responsive issues