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

Overview

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.

Syllabus

🟨 Design System: Foundations

Get started with the fundamentals of the design system, utility classes, and resetting styles to build consistent UI foundations.

🟨 Design System: Color, Typography & Layout Essentials

Learn to work with color systems, typography, spacing, and reusable patterns to elevate your design.

🟨 Design System: Components, Indicators & Site Creation

Discover advanced UI patterns and indicators. Begin assembling your own website layout.

🟨 Design System: Test Your Knowledge

Put your knowledge to the test with an interactive assignment.

🟦 The Homepage

Understand layout fundamentals by building a responsive grid-based design, refining typography and visuals, and deploying your polished project to Netlify.

🟦 The Homepage: Test Your Knowledge

Check your understanding with a graded assignment.

🟩 Navigation: Building the Mobile Navigation Experience

Learn how to set up and style a responsive mobile navigation system, complete with layout tweaks, background styling, functionality, and animations.

🟩 Navigation: Adapting for All Screen Sizes & Accessibility

Optimize your navigation for medium and large screens while ensuring accessibility and usability enhancements across all devices.

🟩 Navigation: Test Your Knowledge

Assess your progress with an interactive assignment.

🟧 The Destination Page

Build and refine a fully responsive destination page—from mobile to large screens—while addressing layout, alignment, and content enhancements with precision.

🟧 The Destination Page: Test Your Knowledge

Reinforce your learning with a hands-on assignment.

⬛️ The Tabs

Learn how to create an accessible tab navigation system from scratch, including keyboard navigation, dynamic tab activation, visual feedback, and progressive enhancements.