First Attempt at CSS and HTMl with the QR code component

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @ZephaW!

  Your project looks great!

  I noticed that you used padding to place the card in the middle of the page. Here's a very efficient way to center the card:

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

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  zeph_w•50

  @ZephaWPosted 10 months ago

  applied and it worked perfectly! Thanks buddy! @danielmrz-dev

  0
• 

  raya•2,870

  @rayaattaPosted 10 months ago

  Hello 👋zeph_w, Congratulations on completing this challenge 🎉.

  I have some suggestions you might find useful.

  1 In order to make your html more semantic replace <div class="container"> With <main class="container">. This changes nothing visually but Using it makes all the difference. Using semantic markup improves

  SEO

  And

  accessibility

  You can find out more about the main tag in this article 📰.

  2 Since the qr code image is not decorative fill it's alt attribute with text describing where it leads to i.e ```alt="qr code leading to frontend mentor.io"

  3 I noticed you used many media queries but this could have been much simpler if you used

      .container {
          max-width: min(90%,21rem);
  }
  

  This is a summary of all the media queries. I hope this helps

  Your solution is nice

  Happy coding ✌️

  Marked as helpful

  0

  ---

  

  zeph_w•50

  @ZephaWPosted 10 months ago

  really appreciate the feedback. I have seen different developers using the "main class" but I didnt understand what it meant .Thank you! @rayaatta

  1
• 

  Raza Abbas•790

  @RazaAbbas62Posted 10 months ago

  Hi, When working with media queries, prioritize a mobile-first approach, test incrementally at key breakpoints, use relative units, optimize images, consider both orientations, and leverage Flexbox and Grid for responsive layouts. Consistency and testing on real devices are crucial for a seamless user experience.

  Enjoy Coding Journey :)

  1

  ---

  

  zeph_w•50

  @ZephaWPosted 10 months ago

  will do. Thank you @FazeenIjaz !

  1