Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4

[@TonyMahindra]

I was searching this manual conversion of figma to code I used to get only ai conversion videos, but now i am happy after finding this series Thanks a lot God bless you

[@Keerthinarayan25]

Same here

[@StepanHruban]

Very nice and helpfull video. The only thing that I have to say is, please don't use pixels in margin, padding - anything it makes the whole site unresponsive by default.

[@WWRehber]

Which one do you prefer

[@waseemusman421]

Really very amazing and helpful tutorial. Keep it up bro. Done subscribe and also thumbs up for you

[@sissim.1744]

you are so good! Thumbs up! Thank you for this tutorial.

[@arshad1781]

Thanks for sharing free knowledge

[@ramabie8557]

can't figma export directly to html and css?

[@prasad2716]

Thank you. I have a small doubt, do I need to set the width for body to 1440px if the given figma design container width is 1440px?

[@oshiorenuaabubakar1020]

Nice video and for those tiny boxes you could have just used box-shadow to style it

[@demogorgon2424]

keep it coming

[@DannyH77]

wow great channel

[@th3graduate292]

Its really helpful.

[@ecdansage]

This is gold . Thanks

[@heymeet-h9x]

Which theme have you used in your VS Code?

[@fabioalaindeoliveiracostle5559]

Can we get the source code

[@jozsefk9]

It's good but I have a question: In Figma you created the colors first then the components, because you had to reuse them from time to time. In CSS you did the same with colors, but not with headings, for example. You created the style for headings but it's not reausable. Would it be possible to use a class for each reusable header component from Figma? For example, .header-desktop-light, and then simply apply only that one class to the h tag (element) in HTML, instead of targeting the full path for element inside DIVs and sections, and then to copy that same CSS code to each h element?

[@GTCoding]

In the hero section, the heading is not reusable. That is why I am selecting it specifically. The styles for the headings in the sections are and they are reusable. I create reusable styles for the in the next videos.

[@jozsefk9]

Also, it doesn't look like you need to be adding font-family: Poppins to anything in my opinion because it's the default already. I might be wrong but I see that in the beginning you set the font-family for body in CSS.

[@GTCoding]

You are right. I will clean up all the code later in the series.

[@kamilameliakapuscinscy6965]

why i dont have inspect information?

[@daystormzx2733]

its because he only share his figma file, u need to type those inspect code manually

[@tolux001]

@@daystormzx2733 If i understand what you are saying, you mean we should type it along him in through the video right? Or do you mean i would get the inspect from some where

[@nermeenaliabdelhakeem422]

Thanks alot

[@ibrahimaitibourk5616]

heey broder can you give me this pages in figma please