Mobile first Order summary component

Community feedback

• 

  Md Ajmal Shadab•410

  @mdajmalshadab

  Posted over 3 years ago

  Hey you have done it nicely, only you just need to reduce some bottom padding of the card, then it'll match with the given challenge. Keep coding ✌️

  00

  Marked as helpful
• 

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @adeyinkaezra123 👋🏻

  I have some suggestions to help you fix the accessibility, HTML and some other issues.

  • In HTML, I suggest removing <section>, then change <div class="container">...</div> to <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • Use forward slash -- /` for the images' path, like this `<img src=`images/illustration-hero.svg` alt=>`. These will fix the accessibility and HTML issues. Don't forget to generate a new repot once you fix the issues.
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • Also, I suggest implementing :hover states, which you can find in Frontend Mentor's design folder, it should say active-state.
  • For the dancing illustration, make sure to add alt tag, that describes the image. Also, please don't include words like image of.. or illustration of..., because they would be redundant.
  • Lastly, change height of .container to min-height: 70vh;, it will allow the content to stay at 70vh but will also grow if needed.

  I hope this was helpful 👨🏻‍💻 you did a good job for the second project, well done. Cheers 👾

  02

  Marked as helpful