Figma to HTML CSS | Responsive Get Started Page with Pseudo Elements
Watch Part 1 Design Tutorial Here: • Figma Web Design Tutorial | Figma UI ...
In this video I go over how to create this Figma design using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I show you how I use the Figma design as a guide to create all of the elements and how I use Flexbox for the responsive layout. I also explain how to use pseudo elements for the step counter.
Codepen: https://codepen.io/angeladelise/pen/K...
In this video I show you:
0:51 - Figma Design
2:06 - HTML Code
4:08 - Container HTML Code
4:58 - CSS Code
6:07 - Container CSS Code
7:57 - Counter CSS Code
8:12 - ::Before Explained
9:16 - Counter with Counter-Increment
11:35 - Responsive Flexbox
13:06 - Code Review
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: / angeladelise
#figmatohtmlcss #designtocode #frontenddevelopment