When you enroll in this course, you'll also be enrolled in this Specialization.
Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate
There are 5 modules in this course
This course is ideal 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.
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.
Learn the basics of using Figma and how to translate a design into a web project as you build a simple card.
What's included
1 assignment10 plugins
Show info about module content
1 assignment•Total 10 minutes
Test your knowledge!•10 minutes
10 plugins•Total 33 minutes
Welcome to interactive lessons!•1 minute
Welcome & Course Introduction•2 minutes
Using Figma•2 minutes
Saving the Figma Prototypes Locally•1 minute
ems and rems•5 minutes
Simple Card - Challenge Intro•2 minutes
Simple Card - HTML•5 minutes
Simple Card - CSS•7 minutes
Simple Card - Finishing Up•7 minutes
Deploying to Netlify•1 minute
Simple Landing Page
Module 2•1 hour to complete
Module details
With an emphasis on CSS you will work on the layout for a landing page that will look great on desktop and mobile.
What's included
1 assignment5 plugins
Show info about module content
1 assignment•Total 10 minutes
Test your knowledge!•10 minutes
5 plugins•Total 31 minutes
Challenge Intro•6 minutes
CSS: Initial Styles•9 minutes
CSS: Finishing Mobile Styles•8 minutes
CSS: Desktop Styles•7 minutes
A Note About Accessibility•1 minute
Data Analytics Dashboard
Module 3•1 hour to complete
Module details
Challenge yourself to create a data analytics dashboard using HTML and CSS.
What's included
1 assignment7 plugins
Show info about module content
1 assignment•Total 10 minutes
Test your knowledge!•10 minutes
7 plugins•Total 45 minutes
Data Analytics Dashboard - Challenge Intro•2 minutes
HTML for our dashboard•5 minutes
CSS: Initial Styles•8 minutes
CSS: typography, buttons and more•10 minutes
CSS: Styling the nav bar•7 minutes
JS: Adding functionality to the nav bar•4 minutes
CSS: Desktop Styles•9 minutes
Car Sales Site
Module 4•1 hour to complete
Module details
Bring another Figma layout to life on the web, adding complexity and detail to desktop and mobile views.
What's included
1 assignment9 plugins
Show info about module content
1 assignment•Total 10 minutes
Test your knowledge!•10 minutes
9 plugins•Total 38 minutes
Car Sales Site - Challenge Intro•2 minutes
Initial HTML•3 minutes
Finishing the HTML•4 minutes
CSS: Initial Mobile Styles•4 minutes
CSS: Finishing Up the Mobile Styles•6 minutes
CSS: Styling the Dropdown Menu•4 minutes
CSS/JS: Wiring Up the Options Panel•7 minutes
Adding the Like Functionality•2 minutes
CSS: Desktop Styles•6 minutes
Drone Event Landing Page
Module 5•1 hour to complete
Module details
Build your most complex layout yet tying in all the concepts you've learned through the course.
What's included
1 assignment15 plugins
Show info about module content
1 assignment•Total 10 minutes
Test your knowledge!•10 minutes
15 plugins•Total 73 minutes
Drone Page - Challenge Intro•3 minutes
Initial HTML•4 minutes
Continuing the HTML•5 minutes
Finishing up the HTML•3 minutes
Starting the CSS•6 minutes
CSS: Hero Section•7 minutes
CSS: Animating the Drone•3 minutes
CSS: Mobile Navigation•6 minutes
CSS: Styling the Quote Section•5 minutes
Styling the Photo Gallery•7 minutes
Finishing the Mobile CSS•7 minutes
CSS: Starting the Responsive CSS•5 minutes
CSS: Desktop Navigation Styling•3 minutes
Finishing the Project•7 minutes
Congratulations & Closing Thoughts•2 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Scrimba is an interactive code-learning platform with over a million users from all over the world. They feature highly interactive and engaging courses about programming and web development.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.