Skip to content
Submitted almost 3 years ago

QR Code Component

Rico•370
@Shuliii
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

hi it's my first project. Any feedback or any kind of improvements that I can make will be very much appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Raymond Fajiculay•230
    @keyztrokee

    Hi, Rico! Very cool solution, it really looks great :)

    I noticed three things that you might want to consider:

    1. Change the h1 color to var(--clr-dark-blue) because it is not black.

    2.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

    3.Reduce your code by removing unnecessary elements. The HTML structure is working but you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    Other than that, really great job! :)

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    👾Hi @Shuliii, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    1.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    3.IMPROVE YOUR WORKFLOW using VSCODE you can code your whole page using px and then in the end use a plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

    4.Keep the image responsive. To manage the image size, you don’t need to define the width and height together, if you do it with different values this will make the image lose proportions, to keep the image responsive and respect the container size use img { display: block; max-width: 100%} this way the image resize with the container whatever its size.

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Dun•290
    @DundeeA

    This comment was deleted almost 3 years ago

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord