Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 months ago

CSS flexbox, responsive design, media queries

bootstrap, react, react-router, accessibility
Sourav Barua•60
@sourav136
A solution to the Space tourism multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

The thing I am proud of the most is I was able to achieve the pixel perfect design. I tried my best to make the website as close as possible, as well as keeping it fully responsive. From my next approach I will try to make the websites more performance and SEO friendly.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was the destination section's header part. The part that has the name of each destination and I had to add an active class also make those headers clickable so that every time a users clicks on a header it will take that user to that particular slide. That was something new for me as I didn't had any prior experience on it. I did some research and ultimately was able to achieve that by using React states.

What specific areas of your project would you like help with?

There are a few things I would have seek for help if I get the chance. The first one is in the Home section. I tried my best but I was unable to get the explore button behind the off canvas. I tried setting the z-index property lower and higher but nothing worked. And it is still unfixed. The next thing I would need help about hoe to improve website's SEO performance as well as some tips on improving website's performace.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • lilprof01•130
    @lilprof01
    Posted about 2 months ago

    This is a very brilliant work Barua, I just finished the same project too and I must say I covet your level of precision, you nailed it perfectly.

    A couple things I see you struggling with in your code is conditional rendering with react, I saw you used the swiper tool a lot but you could also create those components yourself and conditionally render them so it doesn't automatically slide itself, which can throw the user off but overall you've done a brilliant execution to the alignments. Kudos man

    you can check mine out too, I will appreciate your feedback on it.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub