QR Code Challenge Solution With HTML & CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @WillsX9!

  Your project looks great!

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  WillsX9•20

  @WillsX9Posted 9 months ago

  Thank you for the tip, Daniel. It was very thoughtful of you.

  1
• 

  Theo Harris•140

  @Theosaurus-RexPosted 10 months ago

  Hey @WillsX9 , congrats on completing your first challenge! 🎉

  There's a few things that can be tweaked here to improve the overall structure of your markup:

  • First of all, the header tag is not appropriate for this use case. Typically this tag is used for things like navigation in a web page. In this case, all of the content is a single group, and all of it can be wrapped in the main tag.
  • When providing alt text for your QR code image here, it's best to describe to the user where that QR code will take them, e.g. "A QR code linking to the Frontend Mentor website"
  • I'd recommend never using <br> in the middle of a line of text. Instead, let the text wrap within its container - this will make your content work better across a range of screen sizes

  Your styling overall looks really good! I think you may have just missed the text colours but otherwise the design looks spot on 🙌

  Marked as helpful

  0

  ---

  

  WillsX9•20

  @WillsX9Posted 10 months ago

  Thanks a ton for your insightful comment – it's really helpful@Theosaurus-Rex

  1