К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Build Websites with Figma, HTML, and CSS · LearnSpace
Назад в каталог
courseraПрограммирование

Build Websites with Figma, HTML, and CSS

Курс от Scrimba
Средний≈ 4.5 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Cascading Style Sheets (CSS)Figma (Design Software)Hypertext Markup Language (HTML)JavascriptMockupsWeb DevelopmentWeb Content Accessibility GuidelinesWeb Design and DevelopmentResponsive Web DesignUser Interface (UI)Web DesignHTML and CSSFront-End Web DevelopmentPrototypingDashboard CreationUser Interface (UI) Design

Программа курса

5 модулей · 51 учебных материалов

01Welcome & First Project - Simple Card11 материалов

Welcome & First Project - Simple Card

Welcome to interactive lessons!PLUGINWelcome & Course IntroductionPLUGINUsing FigmaPLUGINSaving the Figma Prototypes LocallyPLUGIN

Учитесь у экспертов

Gary Simon

Преподаватель курса

Build Websites with Figma, HTML, and CSS
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 4.5 ч

5 модулей

Язык: Английский

Часть программы вашего университета
ems and remsPLUGIN
Simple Card - Challenge IntroPLUGIN
Simple Card - HTMLPLUGIN
Simple Card - CSSPLUGIN
Simple Card - Finishing UpPLUGIN
Deploying to NetlifyPLUGIN
Test your knowledge!Задание
02Simple Landing Page6 материалов

Simple Landing Page

Challenge IntroPLUGINCSS: Initial StylesPLUGINCSS: Finishing Mobile StylesPLUGINCSS: Desktop StylesPLUGINA Note About AccessibilityPLUGINTest your knowledge!Задание
03Data Analytics Dashboard8 материалов

Data Analytics Dashboard

Data Analytics Dashboard - Challenge IntroPLUGINHTML for our dashboardPLUGINCSS: Initial StylesPLUGINCSS: typography, buttons and morePLUGINCSS: Styling the nav barPLUGINJS: Adding functionality to the nav barPLUGINCSS: Desktop StylesPLUGINTest your knowledge!Задание
04Car Sales Site10 материалов

Car Sales Site

Car Sales Site - Challenge IntroPLUGINInitial HTMLPLUGINFinishing the HTMLPLUGINCSS: Initial Mobile StylesPLUGINCSS: Finishing Up the Mobile StylesPLUGINCSS: Styling the Dropdown MenuPLUGINCSS/JS: Wiring Up the Options PanelPLUGINAdding the Like FunctionalityPLUGINCSS: Desktop StylesPLUGINTest your knowledge!Задание
05Drone Event Landing Page16 материалов

Drone Event Landing Page

Drone Page - Challenge IntroPLUGINInitial HTMLPLUGINContinuing the HTMLPLUGINFinishing up the HTMLPLUGINStarting the CSSPLUGINCSS: Hero SectionPLUGINCSS: Animating the DronePLUGINCSS: Mobile NavigationPLUGINCSS: Styling the Quote SectionPLUGINStyling the Photo GalleryPLUGINFinishing the Mobile CSSPLUGINCSS: Starting the Responsive CSSPLUGINCSS: Desktop Navigation StylingPLUGINFinishing the ProjectPLUGINCongratulations & Closing ThoughtsPLUGINTest your knowledge!Задание