Skip to content
Submitted about 2 years ago

Qr code component with HTML and CSS

Justin Diaz•40
@Jad229
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Are there any details that I didn't notice? Are there any more efficient ways to create this?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Justin Diaz,

    Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • You should use <main> to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor .
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser.
    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    hopefully this feedback helps.

    Marked as helpful
    0
    Justin Diaz•40
    @Jad229Posted about 2 years ago

    @PhoenixDev22 Thank you, I was also trying to figure out a way to align things better I will definitely look into the flex and grid properties. Your suggestion on the alternate text definitely adds a new perspective, which I will consider from now on.

    0
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @Jad229 Glad to help. Happy coding!

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Justin, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

    Here's how you can iea bit your code/design:

    You can reduce your code like this removing unnecessary divs, wrapping all in a single block:

    <body> 
     <div class="qr-card"> 
       <img class="qr-image" src="images/image-qr-code.png" alt="qr code image"> 
       
         <h1>Improve your front-end skills by building projects</h1> 
         <p>Scan the qr code to visit Frontend Mentor and take your coding skills to the next level</p> 
       
     </div> 
 </body>

    The box-shadow is a bit too evident, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);

    Hopefully this will helps you, happy coding!

    Marked as helpful
    0
    Justin Diaz•40
    @Jad229Posted about 2 years ago

    @correlucas Thank you, I was unfamiliar with the box-shadow properties and how to utilize it properly. I will definitely look to minimize my code to reduce redundant code thank you!

    0

Please log in to post a comment

Log in with GitHub

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