Skip to content
Submitted about 2 years ago

QR code component

dyl25•10
@dyl25
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

  • Is the CSS reset a thing that we still use in modern CSS ? Are there other better way to do it?

  • Did I use the correct way to center verticaly and horizontaly the main div (see .container class)?

  • Line height correct for the text below the QR code?

Community feedback

  • Kehinde Hussein, Fasunle•190
    @FasunlePosted about 2 years ago

    Hello dyl25,

    This is a really good solution. I would like to suggest that you use .container class on the main element instead of creating another element (div).

    Also, wrap img in a container like 'image-container' class. This is required for uniform rendering on some versions of internet explorer. It is also considered a best practice.

    img element must have attribute alt="description of the image". This is displayed if the image could not be loaded. However, if the image intended to be used just for design, empty string should be used instead. For example, <img src="my-image.png" alt="my profile picture"> or <img src="background-image.png" alt="">. This is also good for accessibility.

    I hope you find it useful.

    Marked as helpful
    0
    dyl25•10
    @dyl25Posted about 2 years ago

    @Fasunle

    Hello,

    Thanks for your feeback! I will take it into account for my next try and next challenges.

    0
    Kehinde Hussein, Fasunle•190
    @FasunlePosted about 2 years ago

    @dyl25 It is my pleasure.

    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