Figma to HTML CSS | Responsive Get Started Page with Pseudo Elements

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.

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

Let's Connect

#figmatohtmlcss #designtocode #frontenddevelopment

[craigjohnson]

I'm happy to see that you use CSS Variables and Flexbox. I'm glad that I discovered your channel.

[knakmg]

your sweet voice makes the awesome video even more awesome!! Keep going!!

[dhishas]

thank you so much for the video! it's so clear that i don't need to repeat stuff at all omg

[luckyplayax]

When i have to code it self after using Figma, why i should actually use Figma? Then i code it directly and save one working step.

[geryardmon]

dynamite stuff ! it will take me more than a single pass to digest all the info given here, I guess three will do. Thank you, Thank you @Angela Delise for all those free delights you are offering with generosity.

[k-techdev]

that's real good with the dynamic counter, that will save a lot of time and keep the code clean; thank you

[Cesiles]

superb, your videos are easy to follow + informative!

[digitalashes]

Can you please make a fully functional website? I am having a little difficulty in that. Your way of explaining is so simple and easy.

[digigoliath]

Thanks Angela! Nice Project & all done in about 15 mins. Another enjoyable tutorial with plenty of Design Tips.
And I do love Figma too!!

BTW, I actually watched the video earlier but re-visited to comment.
Philip Teh @LinkedIn

[MitchHaussener]

very easy to build, very good and clear explanation, thank you

[bloxzyo]

Hello... I am new and subbed to ur channel.... I have one burning question and can you address it?

• How did you come up with the value left: 7.4rem in .container::before to center the circle?

How did u figure out that exact value would center it?

[srinivasankh]

Thanks for another wonderful video, much appreciated. Just a quick question: have you missed to code the top navigation part? I know you have covered similar thing beautifully in one of your previous videos. Thanks anyways.

[khalidchakir]

hi all, a nice presentation, very good I am from france and not too many videos in French language.

[DaggieBlanqx]

Wow thanks a lot for this tutorial! Also I wonder are you related to/work with Caya from Slidebean? Both of you kind of speak the same, great at eloquence, pausing at the right time, clarity, creative speaking etcetera...

[chinmaymathur]

I though figma could be used for knowing padding, margin, etc., but I was wrong😞😞We have to do all this