Figma to Html Css Javascript (and mobile optimized!)

If you want to learn how to translate Figma designs into Html, CSS, and a little bit of JavaScript this video is perfect for you.

Maybe you already have some basic knowledge of HTML and CSS but you need to practice a little bit more. I also show you how you can optimize your web page for mobile devices and how you can find additional Figma designs.

00:00 Intro
00:35 Creating project
08:46 Coding header
27:00 Coding aside(book) element
33:50 Coding the main content of the page
48:40 Optimizing website for mobile devices
1:01:50 Coding hamburger menu
1:05:18 Outro

🧿 I discussed:

✔️ How to translate Figma design into HTML, CSS & JavaScript
✔️ How to optimize a web page for mobile devices
✔️ How to install and use font awesome icons
✔️ How to standardize the look of your webpage
✔️ How to implement a hamburger menu on a mobile site

************************************************************
👉 Linkedin:

👉 Instagram:

👉 Discord:

👉 Portfolio:

[pankaj_]

That's exactly what I was looking for 🤑 Great job💪 Please create more of such videos on figma to HTML CSS

[pa-wareassistenza]

That what courses I m struggling looking for!!! Wow very precious, thanks a lot

[musiquedumonde]

thanks for the tutorial. I have finished it and I want to thumb up and appreciate your good demostration

[adamhamwandi]

Really nice video but instead of margin left in the navigation you can use the flexbox property column-gap: 21px; because now you have even added margin to the " Home " text as well which you have to avoid.
Just my opinion and it is standard to it that way, the use of row and columns gap.
Otherwise great video

[oyobunkai]

Keep up the good work Sloba! Really appreciate it!!!

[Drajf-Tutorials-Official]

amazing job, well done Heads up wow, keep rocking

[irfansaeedkhan]

can we have video for advance web developers, like using of sass mixins for fonts and media queries, and use of rem of sizes, and auto resizes as screeen goes large and small, and maintaining aspect ratio, something for professionals, i am doing frontend for 2 years and almost use all new things in my code but i needed one professional video that really covers all the pro standards. thank you, keep up the good work.

[lastspoil]

As a frontend or email developer, will we ever write HTML and CSS code from scratch, or will we just use AI tools, including Anima App and Locofy?

[lazymeservices]

Great job thanks for your effort buddy god bless you

[tamirhalperin]

@16:05, I am confused. You created a second CSS @font-face rule with the same font-family value but with a different src value. How will the browser know that the first one exists when the browser overrides it when it sees the second one?

[keeO]

Hi, I'd like to ask what free tool can replace figma dev tool for it charged now?

[Techcreekz]

Hey man cool stuffs, please what app do you use for flyers you post on LinkedIn. The are cool

[pa-wareassistenza]

Please create one video from figma to blazor component... You'll be the first and you're amazing 🤗👍💪

[angstrom]

Why are you writing HTML by hand when you have figma? Or any other design tool? Did you make a prototype in Figma, then have to write it all again by hand?

[nullzero]

Thank you so much for such excellent content. I enjoyed watching the whole video as I'm taking my first project to transfer Figma design to html/CSS same as you did.

I have a question please: the Figma design I have is made for 1440px screen size and my screen size is 1366px. I can't apply the same sizes from the design as you do in the video as it will appear bigger on my screen. My question is: how can convert the Figma design from 1440 to 1366px so I can point to each Figma component and get the size and take that size to my CSS code?
Is there any function in Figma or plugin we can use for that purpose?

My first thought was to reduce each size in the design by 6% which is the difference between 1440 size and 1366. But this will take time and will have to do lots of calculations.

I would appreciate to let me know if you have any solution for this situation.

Thanks once again for such a nice video

[binasheofficiel]

Hi, what software do you use for the images and texts you post on Instagram?

[shwetasaraswat]

Can I design a website in Figma and edit it in Vs Code?

[tiagocosta]

please create one video from figma to reactJS. Amazing material

[raunakbhandari]

Does this count as front end developing?

[rlqzbeq]

can i ask you wh you do all staff manualy, why not use AI tools to export code from figma to pure html, example funcion12. You will do this much more faster