Skip to content
Submitted over 3 years ago

Space Tourism website with Grid layout & Vanilla javascript

accessibility, fetch
Travolgi 🍕•31,300
@denielden
A solution to the Space tourism multi-page website challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi frontEnder :)

This is my alternative solution with css grid layout and Vanilla javascript to change the content of the pages by fetching the data from the json local file.

Please, give me your opinion!

Thank you for taking the time to check out my project! And Happy coding ;)

Code

Please log in to post a comment

Log in

Community feedback

  • Steven Portas•610
    @satrop

    @denielden - hey there! As always great outcome!

    I have just a tiny bit of advice and this could be considered a personal opinion so if you don't add it I totally understand. I would add a transition to the content swap on the "Meet Your Crew" page. Adding a simple fade-in-out would work, it would make it less jarring to move from content to content.

    I was a designer first and dev second so I'm always looking out for little things like this.

    This will be my next project, might try it all in React as I'm doing with the Manage Landing Page. Its the first thing I've built in React and I am loving it. So keep an eye out for that. Hopefully, I'll finish that today/tomorrow.

    All the best, Steve

    Marked as helpful
  • Tanmaya•50
    @arkni8

    Hey Deniel! It was good to receive your feedback and I decided to take some time to look through some of your projects and I saw this one in your solutions. So I took a look, everything looks good technically. But there are somethings you can fix in a couple of minutes.

    1. In mobile responsive mode, the hamburger menu doesn't appear for me. I am using Firefox btw. Its there, I can guess the location and click on it to open the hamburger menu, and then it shows the Cross button, but after I close the sidebar, the hamburger menu goes invisible.

    2. Like you know, backdrop-filter doesn't work on Firefox, so when the sidebar opens up (or even the navigation header in general), the background just mixes up with the navigation items and become completely unreadable. What you can do is, put a white background when backdrop-filter is unsupported and change the background opacity to something like 0.3. That's just a one line fix 'background-color: rgba(255, 255, 255, 0.35)'.

    3. Maybe you were speedrunning this project? Haha, some paragraph elements can use from padding. Easy fixes, right?

    4. I love the keyframes you have put on destination pages. Makes it look dynamic. I will borrow that idea :P Thanks! Please don't sue me T_T

    5. The tablet size has not been optimized as the design asked. But I guess you know that already.

    All of these are easy fixes though. Great job!

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