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.
