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.


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



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.


If you like this repository, please like it ?✨


View Github