Used Dividers and some CSS designs

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Joseph Haddad! 👋

  Congratulations on finishing this challenge! 👏

  Here are some recommendations for improvements.

  • Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users might get confused. In this case, you can start from h2.
  • For your information, heading tags have meaning. It's not about the styling. So, never use heading tags to make text bold or large. Use CSS instead.
  • The "Cancel Order" should be wrapped by either button or a tag. It is not heading for sure.
  • The $59.99/year should not be heading too.

  That's it! I hope this helps! 🙂

  Marked as helpful

  1

  ---

  

  Joseph Haddad•220

  @joehaddad1000Posted about 2 years ago

  @vanzasetia, Thank you. I've fixed them.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @joehaddad1000

  I looked at the updated solution and I'd like to suggest a couple of things.

  • I am just notice <main role="main">. Remove the role attribute. If you have used semantic HTML then there's no need to add role attribute. Keep in mind that ARIA attributes are used to make inaccessible HTML accessible.
  • Wrap the price with semantic HTML, not with a div. A paragraph element would be okay. Remember that text content should always be wrapped by meaningful elements.

  Other than those two things you have done a great job on improving the HTML. 🙂

  Marked as helpful

  0

  

  Joseph Haddad•220

  @joehaddad1000Posted about 2 years ago

  @vanzasetia I have fixed them all. Thanks

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @joehaddad1000 Well done! 👍

  1
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting Joseph Haddad!! Congratulations on completing Your challenge, 👏👏👏 well done.

  I think you don't need all that margins when using flex,

  you can remove this margin from body

  margin-top: 20%;
  margin-bottom: 20%;
  

  and container

  margin-left: 5%;
  margin-right: 5%;
  
  

  all you need is a margin-block: 2rem; on container .

  overall you did well, Happy Codding, and have a Good day/night

  Marked as helpful

  1

  ---

  

  Joseph Haddad•220

  @joehaddad1000Posted about 2 years ago

  @imadbg01, Thank you so much for your help!

  1

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @joehaddad1000 You're very welcome my friend

  1