Figma to Html Css Javascript (and mobile optimized!)

[@pankaj_9998]

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

[@CodewithSloba]

Hey I’m glad you like it 👏🏻 I’ll try to add more

[@pa-wareassistenza4241]

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

[@CodewithSloba]

You're welcome 😊

[@musiquedumonde777]

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

[@CodewithSloba]

Glad it was helpful!

[@adamhamwandi9036]

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

[@CodewithSloba]

Thank you 🙏 Yeah that’s a better solution

[@oyobunkai]

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

[@CodewithSloba]

Thank you

[@jp4133]

Awesome tutorial! Real project.

[@CodewithSloba]

Thank you! Cheers!

[@Drajf-Tutorials-Official]

amazing job, well done Heads up wow , keep rocking

[@CodewithSloba]

thank you! I really appreciate the support!

[@positronman]

Keep going with these awesome videos

[@CodewithSloba]

thank you 🙏

[@lastspoil5547]

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?

[@CodewithSloba]

I personally write both of these. You can get help though from AI, why not

[@irfansaeedkhan7242]

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.

[@CodewithSloba]

Great idea, yeah that’s what I wanted to do as well. But to start with simple stuff and start raising the bar

[@tamirhalperin2404]

@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?

[@CodewithSloba]

Font weight is different

[@Tchosk]

thanks for the tutorial Sloba!

[@CodewithSloba]

You’re welcome

[@dusanvulic7275]

Great tutorial ! Thnx Slobo !

[@CodewithSloba]

Hvala Dusane!

[@lazymeservices]

Great job thanks for your effort buddy god bless you

[@CodewithSloba]

So nice of you

[@Techcreekz]

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

[@CodewithSloba]

Thank you, that’s canva

[@hamzaashraf9529]

Nice Explanation Love it

[@CodewithSloba]

Glad you liked it

[@hamzaashraf9529]

I just started watching your video and it was the first video I wish to become like you one day and spread knowledge everywhere thanks for your effort

[@montajadam7593]

This tutorial is so cute

[@CodewithSloba]

haha thanks I'm glad you like it

[@kee04O]

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

[@CodewithSloba]

I don’t know really

[@nullzero9224]

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

[@anuksclass8421]

same question plz replay

[@skyhighflying1525]

In CSS best practice is not to use pixels, and instead use percents. Bascially, replace all of the pixel measurements with percentage mesurements.

[@CodewithSloba]

There is no such tool I think. But you shouldn't be optimizing your designs for your screen only. A ton of time you will work on such designs, I think that you can use differente device emulators if you want to make it to fit.

[@SalehAhmad-ou5rq]

Great Work👍

[@CodewithSloba]

Thank you

[@shwetasaraswat4]

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

[@CodewithSloba]

You can't edit but you need to code it in VS Code. Like in this tutorial

[@Jayuu1503]

I didn't get inspect option

[@CodewithSloba]

it’s paid feature now

[@pa-wareassistenza4241]

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

[@CodewithSloba]

I will try my best

[@tiagocosta2689]

please create one video from figma to reactJS. Amazing material

[@CodewithSloba]

Great idea thanks!

[@vmartme]

Slbo hvala ti!

[@CodewithSloba]

Nema na cemu

[@coders111]

This is Awsome !!!

[@CodewithSloba]

Thanks :)

[@amardeepphule8927]

Thanks for this 😊

[@CodewithSloba]

You’re welcome

[@sohomdas2767]

Thanks a lot ❤, it helps

[@CodewithSloba]

Glad it helped!

[@angstrom1058]

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?

[@CodewithSloba]

Nowadays you have everything AI generated, but that wasn’t the case when this was created

[@rishiraj2548]

Thanks a million

[@CodewithSloba]

You're welcome

[@binasheofficiel2731]

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

[@CodewithSloba]

Figma

[@raunakbhandari5]

Does this count as front end developing?

[@CodewithSloba]

yeah

[@chris-c4c1n]

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

[@CodewithSloba]

when this tutorial was done AI wasn't that popular

[@hosseinbadarloo2241]

thank you

[@CodewithSloba]

You're welcome

[@mrrishiraj88]

🙏👍

[@nobody124...]

bro how to use figma inspect now because we have to pay now . how to create pixel perfect design

[@CodewithSloba]

well to create pixel perfect you need either payed version or pixel-perfect plugin from chrome

[@SavageThrone]

Impossible to follow the monotone, why not work on yourself, take some public speaking classes and stop putting up fake comments.

[@CodewithSloba]

Fake comments?! For free tutorial you are asking too much. You have pro tutorials if you want professional tutors.

[@monteoregal5691]

misleading

[@CodewithSloba]

why?