QR code component solution

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">

  📌 Some suggestions

  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • Do not use % for width or height. Better use rem, em or px
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • You can apply margin and padding in your main-container, the div with container class is not necessary

  Marked as helpful

  2

  ---

  

  Ismael Vasquez•20

  @leamsi-ciberPosted 11 months ago

  Thanks Marcos, I appreciate your feedback.

  I will take your recommendations to build better html and css code 👍🏽

  1
• 

  P

  RevazSologhashvili•210

  @RevazSologhashviliPosted 11 months ago

  Hi Ismael,

  Mobile first design is achieved by using media queries.

  like this, first body element styling is for mobile devices and others are for different types of device widths.

  check out this MDN link for detailed examples.

  Media Queiries

  body {
    background-color: #fff;
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* Media query for tablets */
  @media (min-width: 768px) {
    body {
      font-size: 18px;
    }
  }
  
  /* Media query for desktops */
  @media (min-width: 1024px) {
    body {
      font-size: 20px;
    }
  }
  

  Marked as helpful

  2

  ---

  

  Ismael Vasquez•20

  @leamsi-ciberPosted 11 months ago

  Thank you @RevazSologhashvili

  Now I understand, the resource was really helpful.

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello Ismael!

  Your solution looks excelent!

  I have just one suggestion:

  • In order to make your HTML code more semantic, use <h1> for the main title instead of h2. Unlike what most people think, it's not just about the size and weight of the text.

  📌 The <h1> to <h6> tags are used to define HTML headings.

  📌 <h1> defines the most important heading.

  📌 <h6> defines the least important heading.

  📌 Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

  This change has little or not effect at all on the project, but it makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, you did a great job!

  Marked as helpful

  1

  ---

  

  Ismael Vasquez•20

  @leamsi-ciberPosted 11 months ago

  Thank you, Daniel. I realized I was using <h2> for the size, not for the heading. Your suggestions were really helpful!

  1