Skip to content
Submitted over 2 years ago

QR code component using HTML and CSS

Munsif Ali•200
@Munsif-Ali
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

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Munsif, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • Centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
    • try to use flexbox to the body for center the card. Read here -> best flex guide
    • after, add min-heigth: 100vh to body because Flexbox aligns child items to the size of the parent container
    • instead of using px try to use relative units of measurement -> read here

    Overall you did well :)

    Hope this help and happy coding!

    1
    Munsif Ali•200
    @Munsif-AliPosted over 2 years ago

    @denielden Thanks for your feedback it means a lot for me as a beginner. I will definitely read about Flexbox and grid. I started the HTML and CSS a week ago from a YouTube channel he hasn't mention about flexbox etc. up till now.

    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Greeting @Munsif-Ali ,

    Congratulation on completing your First Frontend mentor challenge,

    I have few suggestions regarding your solution:

    • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

    • No need to mention image in the alt text as It’s going to be obvious to either a person or a machine when something they're accessing is alt text. Read more how to write an alt text

    • Page should contain a level-one heading . As this is not a whole webpage , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech), and use <h2> instead of <h3>.Always use heading tags in chronological order.

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> ( no need for absolute position ).

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    • In width: 250px; Consider using max-width:20rem instead, Then add a little margin on the component or padding on the body to stop it hitting screen edges. That will let it shrink a little when it needs to.

    • It's recommended to use em and rem units .Both em and rem are relative units , Using px won't allow the user to control the font size based on their needs.

    • It's recommended not to use px for font-size. You can use rem instead .

    • General point : remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

    Overall , your solution is good. Hopefully this feedback helps.

    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