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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to transform a Figma design into a functional website using HTML and CSS in this comprehensive tutorial video. Follow along as the instructor guides you through the process of converting UI graphics into code using Tailwind CSS within Visual Studio Code. Discover techniques for creating responsive layouts, implementing navigation bars, styling hero sections, and adding custom design elements like icons and shapes. Gain practical insights into working with background colors, linear gradients, and shadows to achieve a polished look. This hands-on tutorial is part of a larger series on developing Enhance AI, a SaaS platform leveraging OpenAI technology to assist developers with coding tasks and content creation.

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

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.