fm-space-tourism Svelte Themes

Fm Space Tourism

Frontend mentor solution for space tourism multi-page website

Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for each of the website's pages depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each page and be able to toggle between the tabs to see new information
  • Swipe to navigate the Crew and Technology page on mobile device

Screenshot

Desktop view

home page desktop view destination page desktop view crew page desktop view technology page desktop view

Tablet view

home page tablet view destination page tablet view crew page tablet view technology page tablet view

Mobile view

home page mobile view destination page mobile view crew page mobile view technology page mobile view

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Svelte
  • TypeScript

What I learned

  • Set up a project with Svelte + TypeScript
  • Code in Svelte
  • Use some of the modern CSS techniques
  • Deploy a Svelte project to GitHub pages with a subdomain
  • Work around the page reload of a Single Page Application (SPA) on GitHub pages
  • Implement swipe gesture

Useful resources

Author

Top categories

Loading Svelte Themes