A solution to the Space tourism website challenge

by React

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.

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

My process

Built with

What I learned

I learned React Transition Group library, used Postcss Functions plugin for the first time and learned something about CSS Color Converter, PostCSS, TailwindCSS and Next.js tools.

Continued development

I love this concept. So I’m going to make a Star Wars version of this website as my future project. I think and hope that this project will be very useful for learning and experiencing new things.

Useful resources

  • Start css animation when state changes – This solution helped me to know that I need a React library called React Transition Group to trigger a css animation on react state change.
  • CSS box-shadow maker – This is page that allows you to make css box-shadows much quicker.
  • Detect window size – This solution helped me to finally learn detecting window size in Next.js and React.

Author

If you like this repository, please like it ?✨

GitHub

View Github