https://github.com/dentednerd/fm-space-tourism
a Frontend Mentor project
https://github.com/dentednerd/fm-space-tourism
Last synced: about 1 year ago
JSON representation
a Frontend Mentor project
- Host: GitHub
- URL: https://github.com/dentednerd/fm-space-tourism
- Owner: dentednerd
- Created: 2023-09-11T13:17:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-20T13:37:50.000Z (almost 3 years ago)
- Last Synced: 2025-02-07T00:32:11.349Z (over 1 year ago)
- Language: Sass
- Homepage: https://fm-space-tourism-eight.vercel.app
- Size: 2.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Space tourism website solution
This is a solution to the [Space tourism website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
- [Usage](#usage)
## 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
### Screenshot
### Links
- Solution URL: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [https://fm-space-tourism-eight.vercel.app/](https://fm-space-tourism-eight.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [Next.js](https://nextjs.org/) - React framework
- [Sass](https://sass-lang.com/) - For styles
### What I learned
This was my first project using Next.js and modular Sass. I like that Next.js does the Sass compilation in the background, but I'm not keen on the `styles.foo` syntax for classnames.
I took this on as a practice project during my phased return to work in late summer 2023. A lot of schoolgirl mistakes were made along the way - this was my first look at code in about four months - but it's been a good confidence boost, if nothing else.
### Continued development
Quite honestly, if I never see this project again it would be too soon. Working with that Figma was a nightmare.
## Author
- Website - [Add your name here](https://www.your-site.com)
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
## Acknowledgments
- Website - [Joey Imlay](https://joeyimlay.dev)
- Frontend Mentor - [@dentednerd](https://www.frontendmentor.io/profile/dentednerd)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Usage
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.