QR code component using HTML and CSS

Community feedback

• 

  P

  Alex Wilkom•50

  @alexwilkomPosted 3 months ago

  • In the name of the classes there is no need to specify 'section'. Card is already a section.
  • In style.css, .card does not need to have 'display: flex', the content already have a 'normal flow' (column direction).
  • Good use of color custom properties and border-box with the wildcard *.
  • Consider using custom properties for spacing and typography, too.
  • Good CSS organization.

  Marked as helpful

  1
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  Hi there! You've done a decent job - I like that you've used Custom Properties for the colors, and that you have used REM instead of px for font sizes, which is vital for accessibility.

  Here is some feedback I hope helps:

  HTML:

  • I would wrap the card in a <div class="card"> inside of <main>. The <main> holds all of the main content on a page. Since a card is rarely the only component on a page, it makes sense to have it in its own <div>.

  • Don't include words like "image" or "photo" in the alt text. 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  • .attribution should be a <footer>, and you should use <p> for the text inside.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Remember to specify a fallback font:font-family: 'Outfit',sans-serif;

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove the margin on the card.

  • To center the card horizontally and vertically, I would use Flexbox on the body:

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

  • Remove all widths and heights in px. Except for sometimes small things like icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness. Instead, we want elements to grow and shrink according to the screen size.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

  • letter-spacing must not be in px. You can use em, where 1em equals the element's font size.

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

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

  Good luck :)

  Marked as helpful

  1
• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Limited Browser Support for :root Variables:

  • The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable. It's not a must have because most of the browsers support it. Here is a link to canIUse where you can see the support from different browsers.

  Font Sizing and Scaling:

  • If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:

  html {
  font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
  }
  
  p {
  font-size: 1.6rem; // Here this paragraph font-size will be 16px;
  }
  

  If you don't understand it already here is a VIDEO

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  @MikDra1 Regarding

  html {
  font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
  } 
  

  This is not recommended, as it's bad for accessbility. Here is an explanation of why you should not change the font size on the root.

  2

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @Islandstone89

  Ok, but then is a question. Am I supposed to write everything in px?

  Can you tell me what I should do instead?

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  @MikDra1 No, you should not use px for font sizes. The reason is that px is a fixed unit, which means if a user changes their default font size in the browser, the font size set in px will not scale, thus making it inaccessible.

  Here is an article explaining why font size must NOT be in px.

  2

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @Islandstone89

  Yeah, ok but what I would do instead of using rem ?

  0

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 3 months ago

  @MikDra1 Use rem :) You need to divide by 16, but that's not the end of the world.

  0

  

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  @Islandstone89

  Ok I will try next time. Thanks for your advice 😃😁

  1
• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 3 months ago

  Hi @SergioZF09,

  Nice project! Here are a few additional recommendations:

  Clickable QR Codes: For QR codes, consider making them clickable. This can be especially helpful for older users who might prefer clicking over scanning.(If they are links)

  OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can influence search engine ranking, potentially affecting whether your site appears in search results.

  ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

  Custom QR Code Challenge: As an extra challenge, consider creating your own custom QR code. It can be a fun learning experience and something interesting to share with others.

  Keep up the great work!

  Best, Teodor

  0
• 

  Maciej Bojek•10

  @maciekb92Posted 3 months ago

  test

  0