Skip to content
Submitted over 1 year ago

Space tourism website using mobile first design using tailwind-css

accessibility, tailwind-css
LVL 2
@BEEJAYOFGOD
A solution to the Space tourism multi-page website challenge

Solution retrospective


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

I learned about lazy loading, loading of images asynchronously using promises.

Different Approach: Hmmm, I think I'd try using plain css approach and also server side routing too instead of using JavaScript client routing using history API.

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

1.I had an issue displaying the background of the clicked section/page. This happened because Tailwind only built the CSS required for the home background class, which is for the initial page. It didn't generate the CSS code for the class required for the clicked section/page.

Solution: I had to hard code the tailwind class for all the other 3 pages in the input styles.css... I associated each section of the page with a tailwind class and this class changes based on the section that the user clicks.

2.I also had issue with saving state of current and previous page in the page. For example, when a user move to a next page, the previous page won't get stored in the browser history.

SOlution: I solved this using Javscript history API

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

one area I'd need help with is the short flash that shows briefly when a user is trying to navigate to a new page for the first time.

After that first time, the flash stops showing due to default caching .

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Adekunle Bolaji’s solution.

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