Turning a Figma Design into a Real Website using HTML and CSS

[@justindacosta3d]

This video made me much more confident in how often I have to google how the hell to do things.

[@AdrianTwarog]

i always have that tailwind website up ready to read the doco

[@atvnbi]

this is how coding tutorials ought to be. I love you depict the real trials and errors encountered in "real life" coding and how to go about it. thank you Adrian 💓

[@irfanullahshakir3568]

A straight forward video of how to play with tailwind.Really enjoyed it.Thank you!

[@ideaplusagency]

I'm from Eastern NC. Grew up in Ayden, went to college in Fayetteville, and then lived in Charlotte for 13 years before moving to Atlanta. I've definitely heard of Shelby!!

[@London2ATL]

You're a g for this Adrian, my company was looking for a WP developer to send some of our designs to and I told them about you but I'm sure you've got so many gigs.

[@AdrianTwarog]

only a few hundred or so, but I have a team that helps me :)

[@London2ATL]

@@AdrianTwarog lol wow, if you know anyone that you can recommend please do. Keep up the good work.

[@Jezza3110]

You don't know how long I have been waiting for this ... Thank - you 😀❤❤❤

[@AdrianTwarog]

Awesome :)

[@anon447]

Thanks for putting this video together! I was trying to use your Adobe XD to HTML video as a guideline. Just what I needed! Thanks Adrian!

[@AdrianTwarog]

Glad it helped!

[@NeerajGupta-fy1bv]

Ohh my god I can't believe this channel doesn't have 1M subs.

[@AdrianTwarog]

One day

[@webdevsshariful]

Please upload more of this type of project video. Please Please Please. Your design explanations help me a lot in becoming a front-end developer. Thanks a lot.

[@AdrianTwarog]

I'll do my best

[@coledrain2158]

Not watched yet, but I know it would be great. I have been waiting for this for a while. Great work Adrian. Please more of this 🥺

[@AdrianTwarog]

Sounds good to me!

[@coledrain2158]

@@AdrianTwarog Thank you

[@cheryljones3393]

I loved this. Exactly what I wanted, and so easy to follow. Thank you!

[@andreisimion8542]

Such a great explanation! Tailwind is really amazing!

[@AdrianTwarog]

thanks, its sort of how i go about building it

[@Mohamed-fl9uv]

Thank you so much, Adrian. You are the real MVP

[@AdrianTwarog]

👍

[@yusefess]

There are very few videos on KZbin about converting Figma design to code. If possible, publish more videos in this regard.

[@AdrianTwarog]

I’ll probably be having more in the future, I get a lot from my day job!

[@travis_saldanha]

Yes please do this

[@nickwodzisz7615]

Awesome video, looking forward to the Javascript addition to this!

[@gamegurujipml7603]

It neva came

[@sibusisomathebula7231]

Looks like our dream is slowly coming through

[@AdrianTwarog]

:D

[@ryanmung3165]

Great Job! but I’m wonder how to keep consistent with the design because I always get stuck with it in coding. And in this video when meet these problem it just “look great” and go ahead even though it perhaps match the design.

[@KennethFromSkarpt]

This was very insightful Adrian! Well done, watched the whole thing. Is it normal to completely develop the design of the web pages before you start coding the logic with react?

[@AdrianTwarog]

Ideally yeah, i like to do design, html,css then finally react

[@douyebmehdi3267]

why don't you use the plugins "figma to html" that already exist in figma instead of coding everyhting ?

[@gustavomonte6672]

Think it would be useful to add 'Tailwind' on video title.

[@MrStartupX]

Awsm jst what i needed for my project. Thnx a tonne bro.

[@CodingFire]

The design dude its awesome

[@pastuh]

I will check for sure. It's like painting.., every teacher have different method :))

[@AdrianTwarog]

thanks :)

[@young-kodie7311]

Thanks dude...It helps alot especially on beginners like

[@pranav_zagade]

A straight forward, exact explanation💯

[@anis213_40]

Can you make a video on how to get creative with the design or how to design website better, because I am a front end developer and when I try to design a website in Figma and convert it to html & css, I can't design a good website and the problem is not my knowledge of the basics of figma , the poblem is my use of colors , spaces , Typography...

[@AdrianTwarog]

Writing that up in Enhance UI :)

[@semdejong9849]

Yes please do the react video, that would be awesome❤️

[@nyoreachoja2068]

This was great. Can you please do a video of making the design in Figma?

[@astratow]

Great stuff, although title could suggest that you use tailwind... Your surname suggests strongly Polish roots. Am I wrong?

[@AdrianTwarog]

Polish indeed, and yes tailwindcss drives the design

[@kavinamaranayake]

Sir, How can I create a website UI like Facebook web...? I'm in which framework I can use...? (Facebook web navbar, buttons etc)

[@starkrizwanali]

Love from india thanks for everything

[@AdrianTwarog]

:D

[@pranavsoma8608]

From where i will get images?

[@safdardahriwal7503]

Please upload more vedio about this topic thank you

[@AdrianTwarog]

Will be doing

[@Supri_241d]

Thankyou for sharing this video.. it's really very helpful for us😍😍🥰🥰🥰

[@MrEscmoba]

Mister Twarog, i have a tecnical question - why frontend developers can't create images on webp format for better google speed ranking? On ecommerce, a better loading time is very hard

[@neontuts5637]

Thanks for the video, Which VS Code Theme & Font your using?

[@AdrianTwarog]

got a whole video on it!

[@yungxix6343]

Thanks adrian for always coming through with amazing content, would love you to answer this question is it possible to host a website which was built with html, css and JavaScript on hostinger

[@ProCar_Analysis]

Yes

[@learningstuff5679]

Hi, Adrian. Is Tailwind CSS an industry standard for front-end development? I just took a course 6.5 hour course on HTML and CSS and had never heard of it until now?

[@MikeNeder]

I've been developing for a while and hadn't heard of tailwind prior to 6 months ago. And now it seems like I am hearing about it all the time from videos on youtube. so maybe it is gaining popularity. But still at my current job we don't use it.

[@sejalmore63]

Do you refer figma design's padding and margin and take accordingly into bootstrap ?

[@semiloreidowu4601]

Do you always style your UI screens in HTML & CSS before transferring them to React?

[@pradeeppawar3622]

Thanku for making this video ❤️❤️

[@AdrianTwarog]

😊

[@anonymoussloth6687]

How can I make it generic so that if I have a dark mode version and want to switch between that as well? Will it be easier in react?

[@andrewinim9342]

When can we expect the book.

[@AdrianTwarog]

I'd say its 66% done, maybe a bit more :)

[@andrewinim9342]

@@AdrianTwarog I'm a developer, but i just never had a eye for design, because i never learnt the principles of design, I've watched a bunch of your videos and i believe your book can change that. Waiting patiently.

[@manuelamutiu4929]

Hi Adrian! Is there any possibility to import a web design in Figma and to redesign it?

[@Powerplugz]

Hey there, I am launching a social platform for entrepreneurs. I was originally going to launch on Azure Devops but feel there could be an easier method to hosting and defining relationships between user actions across site depending on "role" (such as user or creator). Aside from Hostinger, what platform/host would you advice for such a big platform. Look forward to hearing back, Jack

[@Powerplugz]

Do you have a tutorial on React?

[@eshw23]

Hostinger has to be the shittiest sponsor now of days, why would anyone use that when you can host a website in 3 seconds with Vercel, but great video overall thanks!!! Learned alot

[@methaguide]

softs work like tNice tutorials one just did. I saw the sequencer at the start, but it would quickly disappear (I never knew about 'detacNice tutorialng'

[@ballonura]

nice 4K content

[@AdrianTwarog]

Thanks!

[@ravel1]

Very nice video

[@nxone9903]

html and css is not code bro

[@yuvrajchhatwani]

Ai is shit it can't turn my website into code 😢

[@acetheexamsR18]

MR BEAST??? 🤯🤯😱😱💀💀

[@PhamQuynhPhu1945]

NICE :)))

[@daryndandessov7181]

Thank you man!!! Like and subscribe!!!

[@CreationVal]

6:46

[@waseemusman421]

@Adrian Twarog Plz contact me ASAP

[@DanYT92]

Lost time....

[@Icedanon]

i skimmed your hour long video and it looks like you didnt open figma once. is this some kind of joke?