QR Code Component

Community feedback

• 

  P

  Øystein Håberg•10,650

  @Islandstone89Posted 8 months ago

  Great job, Thomas!

  A few things to take note of:

  HTML:

  • This 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).

  CSS:

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

  • max-inline-size on the card should be in rem - change it to 20rem.

  • letter-spacing should not be in px.

  Marked as helpful

  1

  ---

  

  P

  Thomas•350

  @FixitoPosted 8 months ago

  I've updated my solution based on your feedback, thank you! @Islandstone89

  1
• 

  Pranjali Pongde•90

  @pranjalipongdePosted 8 months ago

  It is nicely done.

  1
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 8 months ago

  Hello @Fixito,

  It does look great and responsive, I am curious because I am learning to, why did you use these variables

    /* Typography */
    --fs-base: 0.9375rem;
    --fs-xl: 1.375rem;
  
    /* Fonts */
    --ff-sans: 'Outfit', sans-serif;
    --fw-normal: 400;
    --fw-bold: 600;
  
    /* Rest of vars */
    --rounded-xl: 0.75rem;
    --rounded-3xl: 1.25rem;
    --letter-spacing: 0.19px;
    --shadow: 0px 25px 25px 0px rgba(0 0 0 / 0.0477);
  

  For example, there are not many elements that need a font-weight: 400; font-weight: 600; is it not best just to set the font-weight: 600; on the element instead of using variables? I really want to learn if you could take the time to answer that i would greatly appreciate it.

  Great work, I look forward to seeing more from you.

  0

  ---

  

  P

  Thomas•350

  @FixitoPosted 8 months ago

  @Stroudy Thank you!

  I saw this on Kevin Powell's YouTube channel: using CSS variables for typography, fonts, and other styling elements is common for consistency, reusability, and ease of maintenance. Even if it seems like font-weight: 400 is rarely used compared to font-weight: 600, having it as a variable allows for easy adjustments across the project. This approach facilitates scalability and long-term maintenance, especially in large or collaborative projects.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 8 months ago

  Hey @Fixito

  Could you share a link to these videos I want to know what best to put in the :root for this reason, I believe if it's applicable out in the real world it's a good idea to get used to it now. Thank you so much for taking the time to reply I greatly appreciate it and I hope we can discuss topics like this in the future.

  How did you get it to be pixel perfect how was you measuring it using the Figma file on Figma?

  0

  

  P

  Thomas•350

  @FixitoPosted 8 months ago

  Here is the link @Stroudy : https://www.youtube.com/watch?v=B2WL6KkqhLQ&ab_channel=KevinPowell

  I've used the design from Figma and the PixelPerfect plugin for Google Chrome to overlay the mockup on my webpage.

  0