Skip to content
Submitted 3 months ago

QR code component

Aditya Roshadi•50
@aditros
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

What are you most proud of, and what would you do differently next time?

playing with box-shadow is really fun!

What challenges did you encounter, and how did you overcome them?

It's fairly simple

What specific areas of your project would you like help with?

font, margin, responsive

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 3 months ago

    HTML:

    • Remove role="main", that role is implied on the <main> element.

    • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • "Improve your" is the heading, while "Scan the QR code" is a paragraph. As the card heading would likely not be the main heading on a page, I would make it a <h2>.

    • .attribution should be a <footer>, and you should use <p> for the text inside.

    • The footer needs to be outside of the main, so your structure should look like this:

    <main>
    <div class="card">
    </div>
</main>
<footer>
</footer>

    CSS:

    • It is best practice to write CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

    • Including a CSS Reset at the top is good practice.

    • Remember to specify a fallback font:font-family: 'Outfit',sans-serif;

    • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

    • Move the properties on .content to body. Change height to min-height, so the content has room to grow taller than the viewport without causing overflow.

    • Remove overflow: hidden on the card, it is not needed.

    • Remove all widths and heights in px.

    • max-width on the card must be in rem - change it to 20rem. which equals 320px.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • letter-spacing must also never be in px. You can use em, where 1em equals the element's font size.

    • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • Remove font-style: normal, as that is the default value.

    • To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 1rem;.

    • Remove all Flexbox properties on the heading and the paragraph - Flexbox is used on elements that contain several other elements, like a <div> with an image and some text inside.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Also remove the margin.

    0
  • Ayomide philip•160
    @Ayomide-PhilipPosted 3 months ago

    Hello Bro.....

    That's a nice design, but there is one more thing you can give your design is by giving the body a margin left and right or just center align it to make it perfectly in the center

    Keep up the good work Bro

    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