Planet info site using CSS design system

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hey, Adithya! 👋

  Amazing work on this challenge! 👍 This is a rather large project and you've built it with just vanilla HTML, CSS, and JS! 👏

  I think overall you've done a great job with the layout and styling. Just a couple small suggestions,

  • For the fact boxes along the bottom of the page, the smaller text should be a heading element and the numbers should be p elements (not the other way around). Even though the numbers are larger in size and may be styled like a heading, it is the smaller text that identifies each box and what each number means.
  • If the tabs that change what info is displayed about the planet don't navigate the user to another page, they shouldn't be links. Using the button element would be more meaningful and fitting in this case.
  • I noticed that the mobile menu automatically opens when it is focused in the mobile layout. This may not be such a good idea as it can confuse users who weren't expecting/desiring the menu to open up and there is no way to close the menu again unless an option is selected.

  Moving forward, I'd like to suggest looking into using a framework to build larger projects like this. It will save you a lot of time and effort and make creating reusable layouts, components, and designs much easier. React and Vue are popular frameworks worth learning, but my personal favorite (and a great place to start if you are beginning) is Svelte. Just a tip for next time! 😉

  Hope you find these suggestions helpful. 😊

  Keep coding (and happy coding, too)! 😁

  0