Frontend Mentor - Space tourism website solution
This is a solution to the Space tourism website challenge on Frontend Mentor
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for each of the website's pages depending on their device's screen size
- See hover states for all interactive elements on the page
- View each page and be able to toggle between the tabs to see new information
Links
- Solution URL: [https://github.com/Soaphub/Space-project-react/]
- Live Site URL: [https://soaphub.github.io/Space-project-react/#/home]
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
What I learned
Learned React router and links.
<Router>
<div>
<Switch>
<Route exact path="/">
<Redirect to="/home" />
</Route>
<Route path="/home">
<Home/>
</Route>
<Route path="/destination">
<Destination />
</Route>
<Route path="/crew">
<Crew />
</Route>
<Route path="/technology">
<Technology />
</Route>
</Switch>
</div>
</Router>
Continued development
I have made the dropdown of navbar more animated in mobile view
Useful resources
- TheNetNinja - Learned more about React router.
Author
Acknowledgments
The udemdy coarse by Angela helped a lot in completing the project.