qr code challenge

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, Finney! 👋

  Great work on this challenge! Your solution looks pretty good! 😀

  Grace Snow has given some incredible feedback about accessibility. 🙌 Here is some feedback from me.

  • I would recommend trying to simplify the HTML markup. Currently, there are too many div to create the card. I suggest using the body element as the flex container to align the card to the center of the page and use the main element for the card element.
  • I highly suggest finishing this challenge without any media queries. Both the desktop and the mobile layout have the same spacing, font size, etc. So, it's possible to finish this challenge without a single media query. 😉

  That's it! Happy coding! 😁

  Marked as helpful

  1
• 

  T

  Grace•31,250

  @grace-snowPosted over 2 years ago

  Hi

  Well done on this. Just a few small improvements needed

  • Indent your code consistently. your code editor can even do this formatting automatically for you
  • you need a main element and a footer element (for attribution) on this. These are called landmarks and will solve the warnings in your report
  • remove the brs from the paragraph. They make the lines break in strange places on my phone screen and would be announced as "break" by screenreaders. Don't try to ever control line breaks like this. Let the width of the container determine where text needs to flow onto the next line - the browser can handle it fine

  Marked as helpful

  1

  ---

  

  Finney•3,030

  @Finney06Posted over 2 years ago

  @grace-snow thanks for the feedback it's really helpful but I still don't understand the second feedback well (about main and footer element).

  still kinda a newbie.😖

  0

  

  T

  Grace•31,250

  @grace-snowPosted over 2 years ago

  @Finney06 landmarks are structural elements in a page, children of the body. Main, footer and header are the most common landmark elements you'll need

  • Landmarks
  • Main element
  • Footer element

  Marked as helpful

  1