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

Planets fact site

#gsap#next#react#bem
P
stephmunezā€¢ 435

@stephmunez

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


Hey everyone!

I just completed another challenge. šŸ¤˜šŸ½

In this challenge I decided to use Vanilla CSS for styling using BEM methodology just so I can practice CSS fundamentals. I also used Next.js as React framework.

To generate dynamic routes/pages I used the built in getStaticProps() and getStaticPaths() functions and used the provided data.json file as basis.

I also then used GSAP for animation as elements' animations are highly dependent on the changing of states rather than the rendering of each component.

Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

Happy coding!

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey @stephjoseph, looks awesome! The only two things that I noticed is that

  1. There's 2 separate navs for mobile and desktop, which, I think can be accomplished by media queries instead, and
  2. The 3 tabs on the side should be buttons not divs, since they are interactive components

Hope this helps!

Marked as helpful

1

P
stephmunezā€¢ 435

@stephmunez

Posted

Hi @emestabillo, thank you!

Those points help a lot. I decided to separate both navs for decluttering purposes but definitely should try putting both navs into one component and use media queries instead.

You're right on the second point, thanks for pointing it out. Should hopefully pass a11y standards after haha

Have a nice day

1

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