Search courses ranked by devsSee how

1 recommendation
1recommend

Build Websites with Figma, HTML, and CSS

Gary Simon
Gary Simon
Scrimba
Scrimba
Recommended

Extra perks unlocked via skillcraft.ai link

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.

Instructor

Gary Simon

Gary Simon

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.

Course details

Duration

3 hours 36 minutes

Format

video

Certificate

Not included

Pricing

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

Prerequisites

Good grasp of HTML, CSS, and JavaScript

Basic understanding of web development concepts

Familiarity with browser developer tools

Who this course is for

Aspiring frontend developers who love a challenge

Developers who want to improve their design-to-code skills

Anyone looking to build pixel-perfect user interfaces

Students who want hands-on practice with real projects

Curriculum

Welcome & First Project - Simple Card

5 lessons

32 min

Simple Landing Page

4 lessons

30 min

Data Analytics Dashboard

5 lessons

44 min

Car Sales Site

4 lessons

39 min

Drone Event Landing Page

5 lessons

71 min

Notice something missing?

Help us improve this course information for the community

Suggest an edit
Loading reviews...