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

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

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

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

Build a Multi-Page Website with Frontend Mentor, HTML, and CSS

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

О курсе

Build a Space Travel Website is the perfect course for frontend developers who want to practice bringing high-quality Figma designs to life in the browser. It’s the ultimate collab: Frontend Mentor on design, Scrimba on toolkit, Kevin Powell as a guide and you as developer. During the course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators. You’ll also learn how to create an effective design system to ensure that your site is sharp and professional, and your coding is as efficient as possible. You’ll get as much independent practice as possible in this course, using detailed designs in Figma to craft a site which looks amazing on a variety of screen sizes and browsers. Thanks to Scrimba's interactive technology, you’ll build the muscle memory you need to become a truly efficient developer. After completing this course, you’ll have a deep understanding of CSS and responsive design and the knowledge to build an interactive site which users will adore.

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

Cascading Style Sheets (CSS)Hypertext Markup Language (HTML)Web DesignTypographyHTML and CSSResponsive Web DesignWeb Content Accessibility GuidelinesUI ComponentsDesign Elements And PrinciplesCode ReusabilityFigma (Design Software)Web Design and DevelopmentUser Interface (UI)Front-End Web DevelopmentUser Interface (UI) DesignBrowser CompatibilityInteractive DesignUsabilityAnimations

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

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

01🟨 Design System: Foundations6 материалов

The Design System

IntroductionPLUGINWelcome to interactive lessons!PLUGINDesign System OverviewPLUGINCreating a general resetPLUGIN

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

Kevin Powell

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

Build a Multi-Page Website with Frontend Mentor, HTML, and CSS
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 8.3 ч

13 модулей

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

Часть программы вашего университета
General Utility ClassesPLUGIN
Using Our General Utility ClassesPLUGIN
02🟨 Design System: Color, Typography & Layout Essentials7 материалов
Color Utility Classes part 1PLUGINColor challengePLUGINColor Utility Classes part 2PLUGINTypography part 1PLUGINTypography part 2PLUGINNumbered titlesPLUGINSpacingPLUGIN
03🟨 Design System: Components, Indicators & Site Creation8 материалов
The Explore Button part 1PLUGINThe Explore Button part 2 - adding the animationPLUGINUnderline Indicators Part OnePLUGINUnderline Indicators Part TwoPLUGINUnderline Indicators Part ThreePLUGINDot IndicatorsPLUGINNumber IndicatorsPLUGINGetting started on creating the sitePLUGIN
04🟨 Design System: Test Your Knowledge1 материалов
Design System Graded AssignmentЗадание
05🟦 The Homepage9 материалов

The Homepage

Getting everything in placePLUGINSetting up a grid containerPLUGINResponsivenessPLUGINResponsive TypographyPLUGINFixing the homepage titlePLUGINA layout challengePLUGINFinal touches on the layoutPLUGINAdding the background imagesPLUGINDeploying to NetlifyPLUGIN
06🟦 The Homepage: Test Your Knowledge1 материалов
The Homepage Graded AssignmentЗадание
07🟩 Navigation: Building the Mobile Navigation Experience7 материалов

Navigation

Setting up the mobile navigationPLUGINFixing the mobile nav layoutPLUGINThe navigation backgroundPLUGINDealing with browser supportPLUGINThe open/close buttonPLUGINAdding the functionalityPLUGINAdding animations and changing the button iconPLUGIN
08🟩 Navigation: Adapting for All Screen Sizes & Accessibility6 материалов
Medium screen sizes part 1PLUGINMedium screen sizes part 2PLUGINLarge screens part 1PLUGINLarge screens part 2PLUGINAccessibility tweaksPLUGINAdding a skip to content linkPLUGIN
09🟩 Navigation: Test Your Knowledge1 материалов
Navigation Graded AssignmentЗадание
10🟧 The Destination Page10 материалов

The Destination Page

The destination page | IntroductionPLUGINGetting the destination page startedPLUGINThe mobile layoutPLUGINMedium screen layoutPLUGINLarge screen layoutPLUGINFixing the alignment issuePLUGINThe contentPLUGINThe layoutPLUGINLittle touches and improvementsPLUGINThe picture elementPLUGIN
11🟧 The Destination Page: Test Your Knowledge1 материалов
The Destination Page Graded AssignmentЗадание
12⬛️ The Tabs13 материалов

The tabs

Tabs | Setting the stagePLUGINKeyboard navigation part 1PLUGINKeyboard navigation part 2PLUGINKeyboard navigation part 3PLUGINActivating the tabPLUGINHiding the previous tabPLUGINChanging the imagePLUGINHighlighting the active tabPLUGINRefactoringPLUGINThe crew tabs part 1PLUGINThe crew tabs part 2PLUGINCleaning up some loose endsPLUGINThe technology page (and beyond?)PLUGIN
13⬛️ The Tabs: Test Your Knowledge1 материалов
Tabs Graded AssignmentЗадание