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