Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Space Tourism Website (React+Sass)

kirty 380

@kirtymeena

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


It was a fun challenge, learned many new things. The most challenging parts were :

  • creating layout
  • navbar tab indicator
  • explore button

What I learned:

  • reuse of css classes
  • creating mixin in sass
  • Creating layout
  • responsiveness (mobile first approach)
  • reusing components in react

What I like about this website:

  • the way explore button came out to be is super nice
  • I really like the destination component and animation on planet ( tried it for the first time)
  • navbar underline indicator (never thought I could make that )

What I don't like:

  • background image streching on change of screen size.
  • css classes name that i wrote
  • little messy code here and there

Feedback is welcomed. :)

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heyo,

Well done on completing the challenge, it's a tough one :) The explore button looks very neat and it's nice that you added some animations! There are some bits that could be improved - mostly css:

  1. You should set a background-size: cover and background-repeat: no-repeat on your background images.

  2. You could give a max-width to you containers so it doesn't stretch out so much.

  3. One of your font-families is Times New Roman. Not sure if it's a browser default or you set it but it's not in the challenge and it looks a bit off compared to the rest of the design.

  4. Instead of some of these paragraphs you could use headings for the titles (like the technology names, planet names, etc).

Marked as helpful

0

kirty 380

@kirtymeena

Posted

@FluffyKas Hey Thanks for the feedback I'll try to fix the CSS.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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