Skip to content
Submitted 12 months ago

QR code component with HTML and CSS

julian•220
@lspacka
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

I must say, CSS and especially responsive design are still my weakest points. any feedback on improving on these areas would be most appreciated, or just any feedback in general. Thanks!

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted 12 months ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Remove margins and add min-height:100vh to your .qr-container to dynamically center the card.

    • Every site must have one h1 element describing the main content of the page.

    • So, Add a level-one heading

    • <h1>Improve you frontend skills by building projects</h1>

    • Use Semantics for the proper design of your code.

    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    2
    julian•220
    @lspackaPosted 12 months ago

    @NehalSahu8055

    Hey thanks for your help! good pointers on semantic html, I often overlook its importance.

    2
  • Øystein Håberg•10,390
    @Islandstone89Posted 12 months ago

    Some good suggestions above, here are a few more:

    HTML

    • The alt text should tell where the QR code leads, as this is important information. Also, don't use the word "image", as screen readers will automatically announce the <img> as an image.

    CSS:

    • You need a bigger CSS Reset, I recommend this one from Andy Bell.

    • Performance-wise, it's best to link the fonts in the <head> of your HTML, instead of importing it in CSS.

    • Font-size should be in rem instead of px.

    • Max-width on the card should also be in rem.

    • Remove the margin: 0 auto on the main, and add justify-content: center on the body. The result will be the same as it was, but it's more efficient to let Flexbox do the centering vertically AND horizontally.

    Good luck :)

    Marked as helpful
    1
    julian•220
    @lspackaPosted 12 months ago

    @Islandstone89

    Thank you! really appreciate it 🙏

    1
    Øystein Håberg•10,390
    @Islandstone89Posted 12 months ago

    @lspacka my pleasure 🙂

    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