QR Code Component Solution with Responsive Layout

Community feedback

• 

  Scott Ning•170

  @ning-sy210Posted 12 months ago

  Hi Pedro, I've gone through your solution, and it seems to me that you do not know how to center an element. I personally know of two ways to do so:

  • Using flexbox (apply on parent element)

  .center {
    display: flex;
    justify-content: center; 
    align-items: center;
  }
  

  • Using grid (apply on parent element)

  .center {
    display: grid;
    place-items: center;
  }
  

  With these few lines of CSS, you don't have to write any media queries to try and center the element (for the purpose of this challenge). The element will even be centered for a screen that has a 4k resolution!

  Also for your title, instead of giving it a <h2> tag, consider putting it into a <h1> instead. There are two reasons for this:

  1. It is semantically wrong to have a <h2> without a <h1>
  2. The <h1> tag is given to an element that describes the content of the page.

  For more information on heading tags, you can visit mdn web docs.

  I hope you find my comment helpful, and happy coding! :)

  Marked as helpful

  0

  ---

  

  Pedro Oliveira•10

  @PedroOliveiraRepositoriesPosted 12 months ago

  @ning-sy210 Thank you so much for the input. I actually didn't know how to center the items so I found another way. About the h1 tags I did not quite understand what u meant since the only place that I put the h2 tag was for the text below the QR code image and I only did that was because the text in the proposed design was so small for a h1 tag from my point of view. I'm new at this Frontend stuff so that I am still learning but yeah, thank you so much again.

  0

  

  Scott Ning•170

  @ning-sy210Posted 12 months ago

  @PedroOliveiraRepositories For the heading tags, you can think of it in the form of a word document. A <h1> tag is equivalent to the title of the word document, and a <h2> tag is equivalent to the sub-title of the document. So if we represent it in a Table of Contents, it would be something like this:

  1. Title (h1)
    i. Sub-title (h2)
  

  You can see from this example, it doesn't make sense for a document to have a sub-title without first having a main title. And so in a similar fashion, it doesn't make sense to have a <h2> tag without first having a <h1> tag.

  A common mistake for beginners is that they use the heading tags for their font sizes, but this is bad practice. If you want to adjust the font size, it would be more appropriate to use the CSS property font-size instead. Below is an example:

  .some-class-with-small-font-size {
    font-size: 0.75rem;
  }
  

  Marked as helpful

  0