Build a Space Travel Website

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

• 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?)