Normal internal CSS with media query for margin

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello there! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Here are some recommendations for improvements.

  • I recommend moving all the styling to a separate CSS file. It's not a big deal for this challenge however, it's best to practice this so that you start having a habit of doing this. 🙂
  • I suggest removing the media query by finding an ideal value for the margin of the container. Maybe around 1.5em would be good for both desktop and mobile layout.
  • The QR code is an important image for this challenge so it needs an alternative text. Without alternative text, the image will not be pronounced by screenreaders.

  That's it! I hope you find this useful! 🙂

  01

  Marked as helpful
• 

  P

  Natasha Pierre-Louis•280

  @natashapl

  Posted almost 3 years ago

  Hi Atul! I ditto everything that Assurance said. I'd also suggest looking into the main tag and some other HTML 5 semantic tags. Here's an article that gives a good overview:

  HTML5 Semantic Tags: What They Are and How to Use Them

  01

  Marked as helpful
• 

  Assurance Chioma Ikogwe•410

  @Aik-202

  Posted almost 3 years ago

  Hi Atul, this is pixel perfect!!!! 😍😍😍. But I have some suggestions that can help you with your accessibility issues.

  1. You can change that div with class big container to main, as your code must have one main tag or you can add this to big container role = 'main'. Then the big container will be treated as main

  2. Change the h2 tag to h1, you can give it any font size in your css.

  3. Attach aria roles to each of your divs. I think the aria role to be used for the div with class container is group i.e role = 'group'. Click on this link to know more about aria roles

  Hope this helps.

  010