Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Planet Facts using Vite+React and Tailwindcss

#react#vite#tailwind-css
P
AjeaS• 675

@AjeaSmith

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


It's been a minute since I've worked with React, so I was a bit rusty in pretty much everything lol but I got through it ;)

  • The tabs were tricky because it took a lot of js/react thinking (again, I'm rusty lol) p.s thanks ChatGPT

  • Couldn't dynamically render colors among Tailwind and React (weird), so I had to create a color class for each planet (yes, that was a pain lol and no I didn't use Css variables probably should have.)

  • Layout was very tricky, I had to really test my CSS Grid skills

Overall, it was a great challenge. In the future, I'm going to watch some related YouTube videos on how to better approach these projects, that way my process can be a lot smoother. :)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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