Planet project made with React, React Router, Bootstrap

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 .

Cheers

1 Like

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.

Cheers.

Screen Shot 2022-03-11 at 14.48.03

Screen Shot 2022-03-11 at 14.48.12

Screen Shot 2022-03-11 at 14.48.17

1 Like

It looks good. Maybe consider using a sharp, high resolution image in the background.

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.

1 Like