Coursera

From Figma to Code (Coursera)

Offered by Scrimba,
From Figma to Code (Coursera)

From Figma to code is the ideal course for aspiring frontend developers seeking a challenge and eager to acquire the skills needed to translate visually appealing mockups into functional user interfaces. Throughout the program, you'll apply and enhance your HTML, CSS, and JavaScript proficiency by constructing five captivating designs – starting from a straightforward card and progressing to a landing page, an analytics dashboard, a sales website, and culminating in an animated event site.

Class Deals by MOOC List - Click here and see Coursera's Active Discounts, Deals, and Promo Codes.

This course is designed to maximize your independent practice. You'll be provided with detailed Figma designs, enabling you to transform them into user interfaces that exhibit excellence across various screen sizes. Upon completing each project, Gary Simon, a UI expert and esteemed web development educator, will walk you through the code he employs to bring the mockup to life. This offers you the opportunity to compare your solution, gain valuable insights, and discover numerous tips and tricks along the way.

What you'll learn

  • Create user interfaces from mockups.
  • Create responsive layouts.

Syllabus

Welcome & First Project - Simple Card
Learn the basics of using Figma and how to translate a design into a web project as you build a simple card.

Simple Landing Page
With an emphasis on CSS you will work on the layout for a landing page that will look great on desktop and mobile.

Data Analytics Dashboard
Challenge yourself to create a data analytics dashboard using HTML and CSS.

Car Sales Site
Bring another Figma layout to life on the web, adding complexity and detail to desktop and mobile views.

Drone Event Landing Page
Build your most complex layout yet tying in all the concepts you've learned through the course.

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

Related Courses

Learn Imba (Coursera) Coursera
Scrimba

Learn Imba (Coursera)

CS: Software Engineering

In this class, you'll dive into Imba, the programming language used to build scrimba.com. Imba, a compile-to-JavaScript language, packs a punch with nifty features for whipping up web apps, including built-in tags and styles. We'll cover the ABCs of Imba syntax and work on creating a Dopamine Box app. By the finish line, you'll be armed with the skills to construct your very own web app UI using Imba.

Sep 14th 2026
1 Week
Programming Javascript Web Development
Details
Introducción al desarrollo web (Coursera) Coursera
Universidad de los Andes

Introducción al desarrollo web (Coursera)

CS: Software Engineering Computer Science

Este curso te proporcionará los conceptos básicos para iniciarte en el fascinante mundo de la Ingeniería de Software para aplicaciones web. Abordaremos los conceptos fundamentales de estructura, contenido y presentación de una página web, para luego centrarnos en la sintaxis del lenguaje de marcas HTML y en el uso de las etiquetas para crear títulos, párrafos, listas, enlaces, imágenes y formularios.

Sep 7th 2026
4 Weeks
HTML CSS Bootstrap
Details
Web Application Technologies and Django (Coursera) Coursera
University of Michigan

Web Application Technologies and Django (Coursera)

Computer Science

In this course, you'll explore the basic structure of a web application, and how a web browser interacts with a web server. You'll be introduced to the Hypertext Transfer Protocol (HTTP) request/response cycle, including GET/POST/Redirect. You'll also gain an introductory understanding of Hypertext Markup Language (HTML), as well as the overall structure of a Django application.

Sep 7th 2026
5-12 Weeks
HTML SQL HTTP
Details
Print and Digital Elements of Design: Branding and User Experience (Coursera) Coursera
University of Colorado Boulder

Print and Digital Elements of Design: Branding and User Experience (Coursera)

Architecture & Design

Graphic design projects can be delivered in either a printed format or a digital format, or both. This course will look at how to work with creative professionals to get the ideal usage out of a design to use in print medium such as logos, brochures and larger printed projects that will also carry over as seamlessly as possible into the digital realm of websites and social media. We will also cover the user experience and how to keep the end result in mind when working on creative endeavors.

Sep 7th 2026
3 Weeks
Graphic Design Web Design User Experience
Details
Building Web Applications in Django (Coursera) Coursera
University of Michigan

Building Web Applications in Django (Coursera)

Computer Science

In this course, you will learn how Django communicates with a database through model objects. You will explore Object-Relational Mapping (ORM) for database access and how Django models implement this pattern. We will review the Object-Oriented (OO) pattern in Python. You will learn basic Structured Query Language (SQL) and database modeling, including one-to-many and many-to-many relationships and how they work in both the SQL and Django models. You will learn how to use the Django console and scripts to work with your application objects interactively.

Sep 7th 2026
4 Weeks
HTML SQL HTTP
Details
Learn HTML and CSS (Coursera) Coursera
Scrimba

Learn HTML and CSS (Coursera)

CS: Programming Computer Science

This course is perfect if you want to learn how to code websites from scratch. You will learn the basics of HTML and CSS through interactive challenges. Along the way, you will build multiple projects, like a Google.com clone, a Space Exploration page, and a fun birthday site filled with GIFs. While most of the challenges are done in Scrimba's interactive editor, you will also learn how to use professional tools like VS Code for code editing, GitHub for hosting your code, and Netlify for deploying your projects to the world wide web.

Sep 14th 2026
5-12 Weeks
Programming HTML CSS
Details
JavaScript Interview Challenges (Coursera) Coursera
Scrimba

JavaScript Interview Challenges (Coursera)

Computer Science

Your essential tech interview preparation pack! Practice solving problems and honing the skills you need to succeed in a frontend coding interview. Are you applying for frontend developer roles? Do you wish to test out your JavaScript knowledge? Do you love solving code challenges? If any of the above applies to you, JavaScript Interview Challenges should be your next Scrimba course!

Sep 21st 2026
3 Weeks
Javascript Interview Coding
Details
Introduction to Back-End Development (Coursera) Coursera
Meta

Introduction to Back-End Development (Coursera)

CS: Software Engineering Computer Science

Welcome to Introduction to Back-End Development, the first course in the Meta Back-End Developer program. This course is a good place to start if you want to become a web developer. You will learn about the day-to-day responsibilities of a web developer and get a general understanding of the core and underlying technologies that power the internet. You will learn how front-end developers create websites and applications that work well and are easy to maintain.

Sep 7th 2026
4 Weeks
HTML CSS Web Development
Details