Find the perfect coding resourcesLearn more

Build Websites with Figma, HTML, and CSS

ScrimbaScrimba
Recommended
Meet Your Instructor
Gary Simon avatar

Gary Simon

Instructor

One of YouTube's most popular coding teachers with over 500,000 followers. Over 20 years of experience as a UI/UX designer and frontend developer. Created close to 100 courses on topics ranging from graphic design to advanced frontend development.

3h 36m

Format

Interactive coding

Subscription

What You'll Learn

Transform Figma mockups into fully functional websites

Build pixel-perfect user interfaces from design specifications

Create responsive layouts that work on all screen sizes

Master CSS Grid and Flexbox for modern layouts

Work with SVGs, forms, and media queries

Overview

This course is perfect for aspiring frontend developers who love a challenge and want to learn how to transform great-looking mockups into usable user interfaces. During the course, you'll test your HTML, CSS and JavaScript skills by building out five beautiful designs ranging from a simple card, a landing page, an analytics dashboard, a sales website and finally an animated event site. This course aims to give you as much independent practice as possible. You'll have access to detailed designs in Figma, which you'll craft into user interfaces which look fantastic on a variety of screen sizes. After you've built each project, UI expert and renowned web development educator Gary Simon will guide you through the code he would use to bring the mockup to life so you can compare it with your solution and pick up plenty of new tips and tricks.

Table of Contents
1
Introduction to Figma
2
Em and rem units recap
3
CSS Grid basics
4
SVGs as links
5
Media queries
6
Creating hero images
7
Building forms
8
Styling buttons
9
Responsive landing page
10
Animated navigation bar
11
Burger menu implementation
12
Advanced backgrounds
13
Working with gradients
14
Logo integration
15
Search bar functionality
16
Like functionality
17
Icon integration
18
Animated dropdown
19
Pro-looking animated elements
20
Styling quotes
21
Advanced CSS Grid practice
22
Stylish forms
23
Animated navigation bar

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!