Skip to content
Submitted over 2 years ago

QR code component using plain html and css

Abdulaziz•50
@abdulazizAbabutain
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

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

    Greeting @abdulazizAbabutain ,

    Congratulation on completing your Frontend mentor challenge,

    I have few suggestions regarding your solution:

    • Use the main landmark to wrap the body content which is the card .HTML5 landmark elements are used to improve navigation.

    • Images must have alternate text

    • When you write alternative text, it should not be hyphenated. The alternative text should be human-readable ex : **QR code for frontend mentor **

    • All the component content is related , you have misused the article tag. read more about the article usages in mdn .

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> .add a little the margin: 1rem; to the card

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}
.card {....
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 10%; */
    ...
}

    • You can fix the typo display: flexbox;, it should be display: flex;

    • In width: 320px; 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.

    • height: 497px; It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height .

    • It's recommnded 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.

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

    1
    Abdulaziz•50
    @abdulazizAbabutainPosted over 2 years ago

    Dear @PhoenixDev22,

    Thank you for your feedback. It was really helpful.

    much appreciate.

    1

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