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

Multipage Space Tourism Website using nextjs

@faisalahmed11

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


  1. Any feedback is welcome :)

Community feedback

Vlad 240

@vladmee

Posted

I used Next.js for this challenge as well! Great job!

I like how you're adding the user's choice in the URL. That's a nice touch!

I see you're having a loading state. That's nice, is it really needed? (Serious question)

A few things that I realized when exploring your solution:

You are targeting specific images here to fine-tune them:

.crewImage[alt="Douglas Hurley"] {
top: 3rem !important;
height: 71.2rem;
margin-top: -3rem !important;
margin: 0;
}
.crewImage[alt="Mark Shuttleworth"] {
height: 65.4rem;
}
.crewImage[alt="Victor Glover"] {
height: 68.1rem;
}
.crewImage[alt="Victor Glover"] {
height: 60.7rem;
}

I wouldn't do that. You should always think of your style and structure to fit almost any kind of data as it would be served from a server. Yes, it won't be perfect for all types of images, but you have 4 samples to build your abstract solution around.

On another note, your globals reset is pretty thin. That's why you have to do this:

> ul {
list-style: none;

Overall a great adaption. Good folder structure. Following the design assets perfectly. Keep it up!

Marked as helpful

1

@faisalahmed11

Posted

Thank you @vladmee for your time, I will definitely consider your suggestions in future.

1

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