This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: https://github.com/JeanMieses/Space-tourtism-reactRouter
- Live Site URL: https://silly-banach-f25757.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- CSS modules
- Flexbox
- Mobile-first workflow
- React - JS library
- [React Router] (https://reactrouter.com/) - standard library for routing in React
I learned how to React gives the illusion of having a multipage website in a single page app with React router. With React router we can have a SPA and switch the content of that single page app base of URL.
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='/destination' element={<DestinationPage destinations={data.destinations}/>} />
<Route path='/crew' element={<CrewPage crew={data.crew} />} />
<Route path='/technology' element={<TechnologyPage technology={data.technology} />} />
<Route path='/*' element={<Navigate replace to='/home' />} />
</Routes>
- Frontend Mentor - @JeanMieses
- Twitter - @JeanTheDev