Finished new project made with react, react router, and bootstrap. Feedback is greatly appreciated. There is something I could use help with, for each planet I want to change the color of the background, and the bottom of the border in the mobile views. I experimented with adding a new css file and trying to change the color for one planet. However, it is going to take the color from one file.
I love the idea!
I don’t have much time now, but I’ll check it better in the next days .
So, as I was telling you, I love the idea because I love astronomy.
Some things that I’ve noticed:
- When loading your app in my browser, the first time I click on each planet name, the planet’s image on the left takes a little more to load, in respect of the text, so there is a subtle ‘shift’ of the text when the image is ready. I believe this is known as ‘cumulative layout shift’; this happens only on the first click, though.
- Also, when switching planets, the background image moves slightly, as if its ‘background-size’ or ‘background-position’ property changes. I would keep it ‘fixed’ but this is my opinion.
- There is a typo in the Venus paragraph (first word, ‘TVenus’).
- The first four planets’ images appear as a half-circle, whereas Saturn is a full-circle, and Neptune is a full-circle obscured by a black rectangle (see screenshots below).
That said, I think this could be a good starting point. Maybe I would add more information (moon? asteroid’s belt?), and probably some other user interaction functionality could be good.
Hope this helps.
Appreciate the feedback. This is actually a challenge from front end mentor. I need to add the footer credit back. I deleted it when I started over instead of with the HTML template they provide. So, all images and information text are what the provided. I do like the idea of expanding it.
I really like that background in your image. This was a challenge from front end mentor. For some reason, their background image was missing. The background I have now I just picked from a quick google search.
I assumed it was just a quick mockup photo, because we all do that to save time. But, I just wanted to say something, because I thought it could make a difference to use something full resolution.