Space Tourism Website using Sass, Tailwind and Astro
Design comparison
Solution retrospective
This challenge was one of the most difficult I’ve faced so far. The project involved multiple pages, each containing unique information. I put in my best effort to build the site using tools like Tailwind CSS, Sass, and Astro. I should also mention that I followed Kevin Powell’s course on Scrimba during this challenge, which taught me many valuable tips and techniques.
What challenges did you encounter, and how did you overcome them?Navigation in the header is always a challenge. The styles needed to adapt for mobile, tablet, and desktop views, which added complexity to the code. Additionally, some functionality had to be handled with JavaScript, and Accessibility considerations were crucial.
Apart from the homepage, all other pages featured a tab system to dynamically update the information based on user interaction, whether by mouse click or keyboard arrow navigation. Implementing this was challenging in CSS, JavaScript and Accessibility.
What specific areas of your project would you like help with?I’d love to learn about alternative approaches to building this website. The project includes a data.json file, and I used Astro to develop it. I’m curious if there’s a more efficient way to manage the project with less code. For instance, I currently have four separate pages in the pages folder. Would it be better to use a single page and handle everything dynamically with the data.json file?
I also made an effort to prioritize accessibility in my project, but there’s always room for improvement. If you notice any issues or have suggestions to enhance accessibility, I’d really appreciate your feedback.
Community feedback
- @wendyhamelPosted 30 days ago
Hi! This project takes a lot of time to complete. Nice work finishing it.
The approach you took with four pages is better than a single page in my opinion. This way you have the right url’s to go with the pages without any workarounds.
For your accessibility, I read about the tab system and I get your idea there. However, if I try to navigate your site with voiceover, it does not work the way I think it should. I am not able to get it to read the texts aloud. Just the links. Screenreaders use semantic HTML and the DOM order to make Roters. These are helpful for navigating through the content of a site with a screenreader. On your site, the voiceover does not have any rotors available. Apart from the screenreader; When I try to navigate through the site using the tab key, it steps to the texts, which are not parts of your site you can interact with. Navigating through a site with the tab key should only tab between elements a user can interact with, such as links and buttons.
I am also exploring the improvements for accessibility, so I hope this helps us both in our research to improve.
Happy Coding!
Marked as helpful0@kaamiikPosted 22 days ago@wendyhamel
Thank you very much for your feedback. Actually I saw some resources on the internet that add a
tabindexfor the content in each tab. I'm not sure It's true or not but personally I felt It's more easy and appropriate for screen readers to just press a tab key and know what is inside each tab. and then again shift in another one.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