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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Links

• Solution URL: GitHub Repo
• Live Site URL: Live Demo

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Vite - Build tool
• TypeScript - Strongly typed JavaScript
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing

What I learned

While building this project, I learned how to:

• Manage responsive layouts across mobile, tablet, and desktop using Tailwind utilities.
• Properly set up and apply Google Fonts (Barlow Condensed and Bellefair) across components.
• Use React Router to manage multiple pages and navigation states.
• Apply TypeScript in a React + Vite setup for better type safety.

// Example snippet using React.FC with TypeScript
const Homepage: React.FC = () => {
  return (
    <main className="text-center text-white">
      <h1 className="font-bellefair text-5xl">Space</h1>
    </main>
  );
};

Continued development

In future projects, I want to focus more on: -Deeper TypeScript usage for stricter type safety. -State management with tools like Zustand or Redux. -Improving accessibility with ARIA roles and semantic tags. -Adding smooth animations (Framer Motion, Tailwind transitions).

Useful resources

Tailwind CSS Docs

• My main reference for styling and responsive design. React Router Docs
• Helped me with navigation and nested routes. TypeScript Handbook
• Essential for setting up and using TypeScript properly.

Author

Frontend Mentor - @HorpsyK GitHub - OpeyemiKol

Acknowledgments

Special thanks to Setemi Ojo, my instructor, for guidance and support throughout this project.