Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Build a Space Travel Website

via Scrimba

Go to class Write review

Overview

Bring a Frontend Mentor design to life and create your own design system while building a multi-page space travel website with Kevin Powell as your guide.
  • Creating design systems
  • CSS resets
  • Utility classes
  • Using color
  • Responsive typography
  • Adding spacing
  • Effective buttons
  • Underline indicators
  • Dot indicators
  • Number indicators
  • Grid containers
  • Responsiveness
  • Adding background images
  • Navigation
  • Open/close buttons
  • Accessibility tweaks
  • Skip to content
  • Alignment
  • The picture element
  • Keyboard navigation
  • Tabs
  • Refactoring

Syllabus

  • The design system
    • 1. Introduction
    • 2. Design System Overview
    • 3. Creating a general reset
    • 4. General Utility Classes
    • 5. Frontend Career Path
    • 6. Using Our General Utility Classes
    • 7. Color Utility Classes part 1
    • 8. Color challenge
    • 9. Color Utility Classes part 2
    • 10. Typography part 1
    • 11. Typography part 2
    • 12. Numbered titles
    • 13. Spacing
    • 14. The Explore Button part 1
    • 15. The Explore Button part 2 - adding the animation
    • 16. Underline Indicators Part One
    • 17. Underline Indicators Part Two
    • 18. Underline Indicators Part Three
    • 19. Dot Indicators
    • 20. Number Indicators
    • 21. Getting started on creating the site
  • The homepage
    • 1. Getting everything in place
    • 2. Setting up a grid container
    • 3. Responsiveness
    • 4. Responsive Typography
    • 5. Fixing the homepage title
    • 6. A layout challenge
    • 7. Final touches on the layout
    • 8. Adding the background images
    • 9. Deploying to Netlify
  • Navigation
    • 1. Setting up the mobile navigation
    • 2. Fixing the mobile nav layout
    • 3. The navigation background
    • 4. Dealing with browser support
    • 5. The open/close button
    • 6. Adding the functionality
    • 7. Adding animations and changing the button icon
    • 8. Medium screen sizes part 1
    • 9. Medium screen sizes part 2
    • 10. Large screens part 1
    • 11. Large screens part 2
    • 12. Accessibility tweaks
    • 13. Adding a skip to content link
  • The destination page
    • 1. The destination page | Introduction
    • 2. Getting the destination page started
    • 3. The mobile layout
    • 4. Medium screen layout
    • 5. Large screen layout
    • 6. Fixing the alignment issue
    • 7. The content
    • 8. The layout
    • 9. Little touches and improvements
    • 10. The picture element
  • The tabs
    • 1. Tabs | Setting the stage
    • 2. Keyboard navigation part 1
    • 3. Keyboard navigation part 2
    • 4. Keyboard navigation part 3
    • 5. Activating the tab
    • 6. Hiding the previous tab
    • 7. Changing the image
    • 8. Highlighting the active tab
    • 9. Refactoring
    • 10. The crew tabs part 1
    • 11. The crew tabs part 2
    • 12. Cleaning up some loose ends
    • 13. The technology page (and beyond?)

Reviews

Start your review of Build a Space Travel Website

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.