Hi, in this video, I will show you how to convert a Figma design to a real website using HTML and CSS and some JavaScript. This is the first part of the video series. In this part we will cover the HTML. In the next part we will work with the CSS and JavaScript.
Figma File:
Link of Figma Design video:
Next Video (CSS & JS):
Link of the complete Playlist:
Source code:
If you liked this video, please click on the LIKE button and subscribe to this channel for notifications….(read more)
Convert Word 2 PDF: Word to PDF Converter
Convert PowerPoint 2 PDF: PPT to PDF Converter
Convert Excel 2 PDF: Excel to PDF Converter
Convert an Image 2 PDF: Image to PDF Converter
Convert HTML 2 PDF: HTML to PDF Converter
More Tools: PDF Converter
Hi guys, check out my latest tutorial series on creating a modern responsive website using React JS and Sanity IO. Here is the link of the playlist: https://youtube.com/playlist?list=PL0-e1OMq5RP59bfjTPIZstFiGNsTVK0wg
Hope you like it.
Hi, what is software you use for html in video?
Very informative, Just the video I was looking for. I want to understand what does hero content and hero image stand for header. I have seen many other websites using hero as the abbreviation but what does it basically mean?
Thanks
Haha amazing guide man. Saved me for a coding assignment about making our own website. Teacher wanted us to do entire thing in notepad++ but it would take way too long that way.
Why do you have two outer divs? e.g. the header-container and the wrapper. Wouldn't just the wrapper do to align content?
Thanks bro
how you can measure elements?
Hey man, its not Convert!
Its writing the code.
Good tutorial, you haven't made the website responsive?
Please, make 1 full length video of this series……
You are my hero, Thank You very much and i love you.
the music hurts my ears.
Thank you so much for this great video.
Rest part was easy but the coding was too hard, you didn’t even explain how I’ll fully start writing my code
Rest part was easy but the coding was too hard, you didn’t even explain how I’ll fully start writing my code
Rest part was easy but the coding was too hard, you didn’t even explain how I’ll fully start writing my code
Rest part was easy but the coding was too hard, you didn’t even explain how I’ll fully start writing my code
Rest part was easy but the coding was too hard, you didn’t even explain how I’ll fully start writing my code
Where I find that, how I can make same?
If your tool could convert the simple Figma effects like blure and shadow in a correct way, I would be willing to pay for it. But, like any other tool, it is showing soemthing very sad when effects are applied and specific fonts are missing.
It's a waste of time.. you could just export your design as html and css with some figma's plugins
Figma file not opening, where can I get the image you use in this tutorial ?
If someone wants to charge me $250 to convert the Figma to HTML, what do I say…it's just a single page design website. Bare minimum.
Thanks sir!
this is why figma is a total joke, no export function even crappy mockup engines have it with multiple options (ionic, typescript, react, nextjs, html5, etc)
which font do you use in vs code
HTML is more complex than i tought 😀
This was awesome! Thanks so much for creating this tutorial! 🙂
Thanks for this tutorial.
I want a help.
Can you give me figma software link?
From where to download VS Code ?
Is there any way we can make WordPress Theme from Figma and install it ?
nice.. I like the way you explain.. goona watch all videos now 😀 thank you
Great video. Thank You Very Much!
oo .. so this figma software can not directly convert the html format code?
why i feel you are Nepali <3
Where's part 2? this is so nice!
Great Video! What do you type at 1:52 after Welcome to do the formatting? Thanks
Thank you so much for this great video.
I just want to ask that how do you code a website on a 1920*1080 resolution screen, when the design's frame size is 1440 ? I mean how do you maintain the font sizes, size of images, etc?
Sh*t , i thought its gonna auto generatw html file . What a click bate
from where did you learn this
awesome lesson! very clear and easy on the ears. You have such a good way of teaching!!! awesome!
the html view isnt the same with the design
why do you have to put 2 divs before the nav element?
i am unable to find rectangle 11
the only thing I didnt understand was at the beginning when you say a new project. I have checked and there is not any shortcuts or options dor new project