Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Qr code component using html and css

@Ajayfrizzy

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did not really encounter any issue during the building of this project.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Remove margin from .container as it will not dynamically center the card.

  • To properly center the card

  • USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • Every site must have one h1 element describing the main content of the page.

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

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

  • Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribtution` div inside your 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.

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

link.

I hope you find this helpful.

Happy coding😄

0

Please log in to post a comment

Log in with GitHub
Discord logo

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