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

Responsive space multipage web, using vite +react +tailwind +carousel

Raza Abbas 790

@RazaAbbas62

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


Suggestions and feedback are welcome.

Community feedback

@petritnuredini

Posted

Congratulations on completing your space travel website project! It's fantastic to see how much you've accomplished. Here are a few tips to make your project even better:

  1. Optimize Image Loading:

    • Consider using modern image formats like WebP for better performance and lower bandwidth usage. Additionally, implement lazy loading for images to improve the site's loading time, especially if there are many large images. Check out this guide for more information on image optimization.
  2. Improve Accessibility:

    • Ensure that all your interactive elements, like buttons and links, have appropriate ARIA attributes for better accessibility. This includes adding role="button" to elements that are styled as buttons but not using the <button> tag. Learn more about accessibility in React here.
  3. State Management in Technology Component:

    • In your Technology component, you're mapping over technology twice which might be inefficient. Consider rendering the active technology's details directly without the need to map over the entire array again. You can achieve this by storing the active technology's index in the state instead of the entire object. This way, you can easily access the active technology's details from the technology array using the index. Learn more about React state management here.

Keep up the excellent work! Remember, each project is a stepping stone towards becoming a more skilled developer. Continue experimenting, learning, and don't hesitate to try new approaches in your future projects. Your progress is remarkable, and I'm excited to see what you'll create next! 🌟🚀

Marked as helpful

1
Theunis 210

@theYuun

Posted

Your top menu links appear to be missing their fonts and bold text on the numbers.

Marked as helpful

1

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