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

Introduction to Web Development with HTML, CSS, JavaScript (Coursera) Coursera
IBM

Introduction to Web Development with HTML, CSS, JavaScript (Coursera)

CS: Information & Technology CS: Programming

Want to take the first steps to become a Cloud Application Developer? This course will lead you through the languages and tools you will need to develop your own Cloud Apps. Beginning with an explanation of how internet servers and clients work together to deliver applications to users, this course then takes you through the context for application development in the Cloud, introducing front-end, back-end, and full-stack development.

Nov 2nd 2026
5-12 Weeks
HTML Javascript CSS
Details
Usable Security (Coursera) Coursera
University of Maryland, College Park

Usable Security (Coursera)

Security & Networking

This course focuses on how to design and build secure systems with a human-centric focus. We will look at basic principles of human-computer interaction, and apply these insights to the design of secure systems with the goal of developing security measures that respect human performance and their goals within a system.

Nov 2nd 2026
5-12 Weeks
Cryptography Security Cybersecurity
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.

Nov 2nd 2026
3 Weeks
Graphic Design Web Design User Experience
Details
Full Stack Software Developer Assessment (Coursera) Coursera
IBM

Full Stack Software Developer Assessment (Coursera)

CS: Software Engineering CS: Programming

This is the final course in the Full Stack Professional Certificate. It will test your knowledge and the skills you’ve acquired so far. This course contains the graded final examination covering content from nine of the eleven courses in the certificate. You will be assessed on topics such as core cloud computing concepts; languages such as HTML, CSS, JavaScript, and Python; frameworks such as Node.js and React; and backend technologies such as Docker, Kubernetes, OpenShift, SQL, Django, and Serverless.

Nov 2nd 2026
1 Week
Python HTML Javascript
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.

Nov 2nd 2026
5-12 Weeks
HTML SQL HTTP
Details
Learn React Router 6 (Coursera) Coursera
Scrimba

Learn React Router 6 (Coursera)

Computer Science

Learn React Router v6, the most popular routing library for React applications and one of the most downloaded React support libraries ever. In this course, you’ll learn the most important parts of the React Router (v6) library while building an app called “VanLife”, an app for renting decked-out travel vans for your next road trip adventure.

Nov 16th 2026
3 Weeks
Javascript Web Development Web Frameworks
Details
Introduction to User Experience Design (Coursera) Coursera
Georgia Institute of Technology

Introduction to User Experience Design (Coursera)

CS: Design & Product

The focus of this course is to introduce the learner to User Experience (UX) Design. User Experience design is design that is user centered. The goal is to design artifacts that allow the users to meet their needs in the most effective efficient and satisfying manner. The course introduces the novice to a cycle of discovery and evaluation and a set of techniques that meet the user's needs.

Nov 2nd 2026
5-12 Weeks
Computer Science UX User Experience
Details
Interactivity with JavaScript and jQuery (Coursera) Coursera
University of California, Davis

Interactivity with JavaScript and jQuery (Coursera)

CS: Information & Technology CS: Programming

This course is the third in our JavaScript for Beginners Specialization. The scripts will become more complex and introduce more complex jQuery plugins. You will have several challenges to practice your skills throughout the course. The course objectives include how to identify objects in JavaScript; create new objects and populate them with data; manipulate objects by adding, modifying and deleting data in objects; manipulate the DOM based on the data in objects; identify and articulate how multiple functions work together to create a more complex program; and identify processes for breaking larger programs into smaller, more manageable pieces.

Nov 2nd 2026
4 Weeks
Javascript JQuery Interactivity
Details
Learn JavaScript (Coursera) Coursera
Scrimba

Learn JavaScript (Coursera)

CS: Programming Computer Science

This is perhaps the most interactive JavaScript course ever recorded. It contains 140+ coding challenges, meaning that you will finally build that ever-so-important JavaScript muscle memory. You will solve the challenges directly in the browser thanks to Scrimba's interactive video technology, so there's not setup needed. Say goodbye to "tutorial hell" and get ready to start feeling your JavaScript superpowers grow exponentially.

Nov 9th 2026
4 Weeks
Programming Javascript Web Development
Details