Skip to content
Submitted 6 months ago

QR-Code component Desktop Solution

Eric Kamau•30
@kamauEr
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?

I tackled problems i had with flex-box especially on aligning the layout. Next time i would probably try and match the challenge as close as possible to the solution as i can.

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

I encountered a challenge with aligning the footer property. I solved it by adding it with the position:absolute property and specifying where i wanted it to be with the bottom and left property.

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

I would like more help with aligning items with flex-box without using the position absolute property.

Community feedback

  • Bakrin Olasupo•210
    @Swag-blipsPosted 6 months ago

    Hello Kamaru, nice work

    These are my takes

    Improve accessibility:

    • Add lang attribute to the <html> tag for screen readers.
    • Provide more descriptive alt text for the QR code image. -Add HTML5 semantic elements: Use semantic elements like <header>, <main>, and <footer> for better structure and accessibility.
    Marked as helpful
    1
  • Øystein Håberg•10,710
    @Islandstone89Posted 6 months ago

    HTML:

    • ALL content must be inside the <body>!

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container into a <main>.

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

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

    CSS:

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

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

    • Add gap: 2rem on body, to create a little space between the main and the footer.

    • Move font-family and line-height to the body. I would remove the line-height, as the default value looks better than setting it to 1.

    • Move the properties on .container to .content-container, as that is the div for the card. Remove display: flex, it is not needed.

    • Remove the margin on the card.

    • Remove all widths and heights in px.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

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

    • font-weight should only have a number, it cannot have px as part of the value. Paragraphs have a default value of font-weight: 400, so it is unnecessary to declare it.

    • 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 position: absolute and display: inline-block on .attribution.

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

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

    Marked as helpful
    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