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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

This project was built with Parcel.

Setup

1. Install dependencies:

npm install

2. Run dev server:

npm start

3. Build for production:

npm run build

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Netlify live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Parcel - Parcel build tool
• Framer Motion - For animations

What I learned

Decided to start a more challenging project to put in practice routing, hooks, props. I took the JS-heavy approach to read the data from the local json file where I had to modify paths values in order to read the correct image since parcel doesn't support path reading to load images in <img src={path/to/img}>. Parcel supports importing images as assets.

Continued development

• Need to practice grid.
• Need to learn more about CSS animations.

Useful resources

• Framer Motion and React Documentation.
• @parcel/resolver-glob to import multiple assets globally. Took this approach to dinamically display the content image.

Author

• Website - github.com/ichiklaus
• Frontend Mentor - @ichiklaus
• Twitter - @ichiklaus

Acknowledgments

Reviewing @FluffyKas code helped me understand how to take the JS-heavy approach and learnt some CSS properties aswell.