Design A Responsive Website | Figma to HTML, CSS & JavaScript | FULL VIDEO

Hi guys, I have combined all the videos in the responsive homepage playlist into this single long video. I hope you find this useful.

Timestamps:
00:00 - Introduction
02:17 - Components (Heading & Button)
21:31 - Components (Testimonial Cards)
30:28 - Components (Course Cards)
38:47 - Hero Section
49:59 - Testimonials & Courses Section
1:00:04 - App Section & Footer
1:11:52 - Tablet Version
1:24:00 - Smartphone Version
1:39:21 - Mobile Navigation Menu
1:45:59 - Figma to Code (Introduction)
1:49:07 - Setting Up The Project
1:57:30 - The HTML
2:20:03 - The CSS (Hero Section)
2:47:49 - The CSS (Testimonials Section)
3:06:06 - The CSS (Courses Section)
3:17:43 - The CSS (App Section & Footer)
3:31:49 - Tablet Version (Hero Section)
3:44:48 - Tablet Version (The rest of the sections)
3:59:32 - Tablet Version (Smaller Screen Sizes)
4:11:22 - Smartphone Version
4:26:45 - Deploying the Website

[corvuscorax]

Best Youtube Coding Channel for beginners, i'm learning a lot thank to your videos and the ideao to show the process to Figma to coding is very helpful to improve my Ui Design AND coding skills.
Thank you !

[christopherpereira]

It's difficult to find more words than what has been said before, but I think they are worth repeating. I have enjoyed this tutorial, very well explained and clearly demonstrated. I will study and learn form it. Thanks a million. Keep up the the good work. It helped me and I'm sure many others too. From the UK, I send my very best wishes for 2023. Thanks

[minelalalay]

This tutorial is so detailed even beginner like me can understand 😭 God bless you man, i hope you can upload more tutorial like this!!

[pheona]

You are a totally awesome and generous teacher sharing your skills with us for free!

[TheKingsIncome]

Now I'm learning... thank you sir, viewing all full ads to help

[alitopedits]

thank you very much, i clicked the ads to give you a bigger amount of ad revenue...

[pnksahoo]

Very Easily Explain High Level Topic In A Single Video When i can join a company I will Describe Your YouTube channel And More
Special Thanks Bro 💌 Love From Bhubaneswar...

[SanukaDev]

I was looking for this. Thank you so much !!!

[shyam]

Thanks Sir
You Clear the all dought in this video

Thank you very much

[numsinketchaisri]

Thank you for your valued contents. You've lighted my learning. Keep doing bro!

[badnewsforya-]

I need help with 26:51. I follow your instructions but the image wont move. Any help please?

[hkvlogs]

Thank you so much for your wonderful video its very clear to understand.... Keep moving..

[mussingermockups]

Hi there!

A quick and helpful hint that makes things easier with responsive auto layout at: 26:11

Instead of manually resizing the "Testimonial Content" frame within the autolayout, choose "FILL CONTAINER" instead of "fixed width" or "hug contents".

[arunsaklani]

My desktop screen is 1024 Px and figma file desktop screen is 1920px is it good to copy all CSS code from figma file and how much CSS should we copy from figma file

[louishauger]

1:52:34 what did you do to change the format like that?

[emilianoesteban]

Excellent tutorial!!! 👌
Here is a new subscriber

[aungaungab]

Thanks bro
I wanna click ads but my whole life country MYANMAR have free premium version only without ads since YT had released

[rahulgemail]

Thank you so much. This tutorial helped a lot on Figma and CSS

[patrickjaeger]

what does figma help a developer with? figma doesn't even organize classes, ids to be used in css. developer has to find dependencies and create dependencies in css by himself! photoshop/ illustrator is the same deal. a designer can dream of every thing.

[riyajhazel]

what about when we use Figma to HTML plugins instant of coding