Skip to content
Submitted over 2 years ago

Space tourism website using React Hooks & Router, JS, SCSS

William Lee•70
@Kwill3
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I am still struggling with creating a perfectly responsive web page, although most of the time the pages looks alright but in some edge cases the contents will overflow the background. The blur on the navbar is showing on Brave browser but not on FF, is there a way to implement across all browsers? As usual, all comments are welcomed. Thanks for viewing my code!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi William, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • add header tag and wrap the nav for improve the Accessibility
    • add main tag and wrap the content of page for improve the Accessibility
    • use semantic html like nav, ul, a, button, for example for the menu the best way is to use nav with inside ul list of page wrapped by a
    • add transition on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here
    • firefox does not support the css backdrop-filter property, you can add an exception in firefox by putting a solid color there only through @supports, look here: backdrop-filter and @supports. Another way to implement it is only use different background color or filter supported by browser

    Overall you did well 😁 Hope this help!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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