Your challenge is to build out this 8-page planets fact site and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
If you choose to use a JS-heavy approach, we provide a local data.json file for the planets. This means you'll be able to pull the data from there instead of using the separate .html files.
Your users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- View each planet page and toggle between "Overview", "Internal Structure", and "Surface Geology"
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- CSS Flexbox
- React - JS library
- Snowpack
This was the first time typing react-router-dom and ContextAPI. The usage of ContextAPI was unnecessary, but this was a good introduction and implementation attempt at it. ContextAPI is simple to use and is looks very useful. After using it for the wrong purpose in this challenge, I am understanding where it can be used more effectively. Understanding react-router-dom was not difficult, but its nuances are a little hard to get used to. I failed to make it work properly, but it works partially. Doing a mobile nav in React is a little simple than doing in vanilla JS projects. A lot of edge cases to handle. In vanilla JS you can rely on CSS to cover most of the issues but not in here. The CSS was very detailed and extensive but fairly simple.
- widescreen fixes
- Disabled scroll when mobile nav is open
- Images are too big
- Align tabs with content
- Add some gap between text
- All should fit in single vh for tablet.
✨ Bootstrapped with Create Snowpack App (CSA).