Figma to Html Css Javascript (and mobile optimized!)

Рет қаралды 55,948

Күн бұрын

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.
Full code: github.com/bobangajicsm/book-...
Font Awesome: fontawesome.com/v5/docs/web/u...
Normalize CSS: necolas.github.io/normalize.css/
Figma design: www.figma.com/community/file/...
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:
✔️ / slobodan-gajic
👉 Instagram:
✔️ / codewithsloba
👉 Discord:
✔️ / discord
👉 Portfolio:
✔️bobangajicsm.github.io/portfo...

Пікірлер: 76

@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

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

@oyobunkai Жыл бұрын

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

@CodewithSloba Жыл бұрын

Thank you

@pa-wareassistenza4241 Жыл бұрын

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

@CodewithSloba Жыл бұрын

You're welcome 😊

@positronman Жыл бұрын

Keep going with these awesome videos

@CodewithSloba Жыл бұрын

thank you 🙏

@Drajf-Tutorials-Official Жыл бұрын

amazing job, well done Heads up wow , keep rocking

@CodewithSloba Жыл бұрын

thank you! I really appreciate the support!

@dusanvulic7275 Жыл бұрын

Great tutorial ! Thnx Slobo !

@CodewithSloba Жыл бұрын

Hvala Dusane!

@jp4133 4 ай бұрын

Awesome tutorial! Real project.

@CodewithSloba 4 ай бұрын

Thank you! Cheers!

@Tchosk Жыл бұрын

thanks for the tutorial Sloba!

@CodewithSloba Жыл бұрын

You’re welcome

@lazymeservices Жыл бұрын

Great job thanks for your effort buddy god bless you

@CodewithSloba Жыл бұрын

So nice of you

@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

@amardeepphule8927 Жыл бұрын

Thanks for this 😊

@CodewithSloba Жыл бұрын

You’re welcome

@coders111 Жыл бұрын

This is Awsome !!!

@CodewithSloba Жыл бұрын

Thanks :)

@SalehAhmad-ou5rq 2 ай бұрын

Great Work👍

@CodewithSloba 2 ай бұрын

Thank you

@rishiraj2548 Жыл бұрын

Thanks a million

@CodewithSloba Жыл бұрын

You're welcome

@adamhamwandi9036 10 ай бұрын

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 9 ай бұрын

Thank you 🙏 Yeah that’s a better solution

@vmartme 7 ай бұрын

Slbo hvala ti!

@CodewithSloba 4 ай бұрын

Nema na cemu

@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

@hosseinbadarloo2241 10 ай бұрын

thank you

@CodewithSloba 10 ай бұрын

You're welcome

@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

@tamirhalperin2404 11 ай бұрын

@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 10 ай бұрын

Font weight is different

@montajadam7593 4 ай бұрын

This tutorial is so cute

@CodewithSloba 4 ай бұрын

haha thanks I'm glad you like it

@nullzero9224 11 ай бұрын

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 11 ай бұрын

same question plz replay

@skyhighflying1525 11 ай бұрын

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

@CodewithSloba 10 ай бұрын

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.

@mrrishiraj88 Жыл бұрын

🙏👍

@binasheofficiel2731 Жыл бұрын

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

@CodewithSloba Жыл бұрын

Figma

@lastspoil5547 4 ай бұрын

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 4 ай бұрын

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

@tiagocosta2689 Жыл бұрын

please create one video from figma to reactJS. Amazing material

@CodewithSloba Жыл бұрын

Great idea thanks!

@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

@kee04O 2 ай бұрын

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

@CodewithSloba Ай бұрын

I don’t know really

@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

@raunakbhandari4164 Жыл бұрын

Does this count as front end developing?

@CodewithSloba Жыл бұрын

yeah

@angstrom1058 4 ай бұрын

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 4 ай бұрын

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

@Jayuu1503 Ай бұрын

I didn't get inspect option

@CodewithSloba Ай бұрын

it’s paid feature now

@user-rl4qz8be2q 6 ай бұрын

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 4 ай бұрын

when this tutorial was done AI wasn't that popular