Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

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

Adrian Twarog via YouTube

Start learning Write review
Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More → Noble Desktop Ad

Live Online Classes in Design, Coding & AI — Small Classes, Free Retakes

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This tutorial walks through converting a Figma UI design into a website using HTML and Tailwind CSS in Visual Studio Code. It builds interface elements including a navigation bar, hero section, content boxes, icons, gradients, and geometric shapes.

Syllabus

Intro
Hostinger
Getting Started
Nav Bar
Logo
Icon
Pattern
Shapes
Hero
Get Started
Hero Icons
Hero Section
Box Section
Shadow Section
Icons
Adding a chevron
Adding a circle
Adding more content
Copying content
Adding background color
Adding a linear gradient
Adding shapes

Taught by

Adrian Twarog

Reviews

Start your review of Turning a Figma Design into a Real Website Using HTML and CSS

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.