QR card image code with CSS Grid & Flexbox.

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Gino Tapia, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  Document should have one main landmark, this problem is being caused by the fact that there is no main tag around the main content of the page! Since this challenge is based on only one component, there is no other component more important than it on this page, so to solve this, wrap all the content with the main tag,

  It's always good to pay attention to the correct use of semantic html elements, as they are extremely important for people who use screen readers, to know what the main content of the page is in the case of the main tag!

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1
• 

  Michael Mushrush•250

  @FloratobyDevPosted almost 2 years ago

  Besides what the accessibility report said, I don't think it's necessary to use the figure element in this case unless you want to add a caption to that image with the figcaption element. I wouldn't recommend adding a br element just for spacing here. I would just do that when it's time to style the page with CSS. So if you take out figure, then you can just take out the section element as well and just put all the remaining elements inside your .card class. It's much cleaner that way and it actually removes the unnecessary elements. Lastly, learn about landmarks and use those instead of just storing everything with div. Say for your .container class, you can use the main element instead rather than div. It's good practice and it's accessibility-friendly. Other than that, I think your CSS looks good. I would recommend learning a CSS methodology in the near future though once you get a hang of CSS properties. It will help make your modular and easy to follow. Overall, well done completing the challenge! If you want to improve your coding skills in web development, you have definitely come to the right place! Make sure you reflect on your code after you're done with the project. You can do that in the README.md file of your project. It might be a hassle but it's important to do so, so you can remember properly what you've learned.

  Hope that helps!

  Marked as helpful

  1