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

Space Site challenge - HTML, CSS, Vanilla JS

@mshaynerush

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


What are you most proud of, and what would you do differently next time?

I am most proud of being able to effectively load the data from the json.data file and display it. Beyond that I liked using the order feature of flex-box to put the data on the page and reorder it for media queries, reducing the repetitive code.

If doing this again, or for future practice, I want to make the data on the pages 'swipeable' on mobile as well as make the desktop version more fluid when clicking a link. Using a gallery instead of an immediate up date.

I would also plan out my divs better for using flex and order. It is a bit muddy in the code.

What challenges did you encounter, and how did you overcome them?

Some of the challenges were things like what does the big button on the first page do besides glow when hovered? I asked the discord, but the reply was not forthcoming, so I left it to just glow.

Over all the only real challenge I faced was getting started. I procrastinated a long time. But the kick in the pants I needed came along. I suppose planning was the biggest challenge. I started coding and didn't think it through, but in a way, it was like planning because after failing a few times and starting over, it was lessons learned that got me through. While I need to learn more, this was still my best work so far.

One challenge I faced is that the dots on the crew page wouldn't take the active class and turn white on mobile even though all the other links work the way there are supposed to in this regard, and I even used the same code. The mobile nav dots will take only the hover class (thought i separated the hovers out to media query) and will only take the active class after clicking somewhere else. Nothing online helped.

What specific areas of your project would you like help with?

there is a weird issue. I used the same code and changed the variables to make the active links work in various menus. The destination and technology menus worked fine. When you click the turn white as expected and the data changes. On the crew page, same code used on the other two for the nav dots, and they only take the hover class on mobile when clicking them and won't take the active class until touching the screen elsewhere. At the same time, all links take the active class on desktop. Only the mobile crew nav dots act differently.

Community feedback

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