Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Вставка
- Опубліковано 14 гру 2021
- Figma File: github.com/Godsont/Responsive...
Figma Video: • [FULL VIDEO] Design A ...
Playlist: • Figma To HTML - Respon...
Check out my courses: gtcoding.net/courses/
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
Its really helpful.
keep it coming
Thanks for sharing free knowledge
you are so good! Thumbs up! Thank you for this tutorial.
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.
Which one do you prefer
Really very amazing and helpful tutorial. Keep it up bro. Done subscribe and also thumbs up for you
This is gold . Thanks
wow great channel
Nice video and for those tiny boxes you could have just used box-shadow to style it
Thanks alot
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?
Which theme have you used in your VS Code?
can't figma export directly to html and css?
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.
You are right. I will clean up all the code later in the series.
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?
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.
Can we get the source code
heey broder can you give me this pages in figma please
why i dont have inspect information?
its because he only share his figma file, u need to type those inspect code manually
@@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