Design comparison
Solution retrospective
- Any feedback is welcome :)
Community feedback
- @vladmeePosted over 1 year ago
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 helpful1@faisalahmed11Posted over 1 year agoThank you @vladmee for your time, I will definitely consider your suggestions in future.
1
Please log in to post a comment
Log in with GitHubJoin 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