QR code using HTML & CSS

Community feedback

• 

  Michael Johnson•970

  @mikej321Posted 10 months ago

  Congrats on completing the project!

  To center the project vertically, add these following properties to the body in CSS.

  body {min-height: 100vh; display: flex; flex-direction: column; justify-content: center}.

  Not sure if you're familiar with flexbox or not, but what the code does is it turns your entire page into a flexbox container. The min-height is needed at 100vh (viewport height) so flexbox knows to center it in the middle of the page instead of the middle of whatever the height of the container is. The flex-direction controls the direction that your content is layed out on the page. In this case, you want it to be layed out vertically, so we choose column here instead of row. Finally, justify-content normally centers on the horizontal axis but because we changed the flex-direction, align-items will center on the horizontal axis. Whenever the flex-direction is changed, the property needed to center vertically and horizontally are flipped. Here is more information on Flexbox that would be a great read.

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  I hope this helps and good luck in your future!

  Michael Johnson

  Marked as helpful

  1
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  To add to the good advice already given:

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change the <div> to a <main>, and give it a class="card".

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).

  • .title is a heading, not a paragraph. Change it to a <h1>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the margin on the card. To center the card horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove all fixed widths and heights in px. You rarely want to set fixed sizes, as it can cause issues like overflow whenever the viewport is smaller than the component.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • line-height must also never be in px.

  • font-weight: 400px is not a valid declaration, I assume you meant 400. However, you don't need to declare that, as 400 is the default font-weight of paragraphs.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card.

  0

  ---

  

  yas-avocad•380

  @yas-avocadPosted 10 months ago

  @Islandstone89 Hey! when I changed my front size to rem, the font just showed up super huge on the card. Also, I'm still a little unclear about CSS reset even after reviewing the article. :)

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  Hello there 👋 @yas-avocad.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  Consider adding a min-height of 100vh to the body element so as to centralize your project.

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

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  0