This is a solution to the Planets fact site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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"
- Solution URL: GitHub Repository
- Live Site URL: Live Site
- Semantic HTML5 markup
- Tailwind CSS
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- React Router - For routing
- Vite - Frontend tool for building and developing projects
This project allowed me to enhance my skills in implementing responsive designs, leveraging React for dynamic data rendering, and integrating Tailwind CSS for streamlined styling. Below is an example of a key learning:
<div className="relative">
<span
className="absolute top-0 left-0 w-full h-[2px] scale-x-0 transition-transform duration-300 origin-left"
style={{ backgroundColor: planet.color }}
></span>
</div>I plan to focus on refining the following areas in future projects:
- Optimizing the performance of React components
- Enhancing accessibility features (ARIA roles and keyboard navigation)
- Exploring more advanced animations with Tailwind CSS
- Tailwind CSS Documentation - The official Tailwind CSS documentation was incredibly helpful for understanding utility-first styling and implementing responsive designs.
- React Router Documentation - This documentation provided clear guidance on setting up dynamic routing for planet pages, making navigation seamless.
- Frontend Mentor - The platform itself was an invaluable resource, offering realistic challenges to practice and improve coding skills.