YoVDO

Build a Space Travel Website

Offered By: Scrimba

Tags

Web Development Courses Web Design Courses Accessibility Courses Responsive Typography Courses Design Systems Courses

Course Description

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

Related Courses

User Experience for the Web
Open2Study
Web Accessibility MOOC for Online Educators
Portland Community College via Desire2Learn
Introduction au game design
IONIS
Web Accessibility MOOC for Educators
Colorado Community College System via Canvas Network
Advanced Styling with Responsive Design
University of Michigan via Coursera