Skip to content
Submitted over 1 year ago

Qr Components

Lucas Barros•350
@BarrosLucasJavier
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?

Start this path to improve my skills and next instances improve the order of my code.

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

No challenge in this challenge

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

Improve my coding

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    ➨To properly center the container.

    • Add min-height to your body to properly center the card.

    ➨ Use Semantics for the proper design of your code.

    <body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

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

    • So, Add a level-one heading instead of p to improve accessibility.

    • <h1 class="head">Improve your front-end skills by building projects</h1>

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

    • Replace width with max-width to make your card more responsive.

    link.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    0
  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋, perhaps some of this may interest you:

    HTML / ACCESSIBILITY:

    • The main content of every page (the card in this case) should be wrapped with the <main> tag.
    • Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels.

    CSS:

    • It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

    I hope it’s useful : )

    Nice solution.

    Regards,

    Marked as helpful
    0
    Lucas Barros•350
    @BarrosLucasJavierPosted over 1 year ago

    @fernandolapaz Thank you very much for your comment, I will use your recommendation

    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