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

QR Card

@lalit-aditya

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

romila 3,570

@romila2003

Posted

Hi Lalit,

Welcome to the frontend mentor community and congratulations for 🎉 for completing your first challenge, the card looks great. I found some issues I want to address:

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. You are missing the title tag within your head tag e.g. <title>QR code component</title>
  3. Your img tag is missing the alt tag.
  4. Rather than using the margin-top property to center the card, you can use flex property instead e.g.
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Overall, great attempt and wish you the best for your future projects so keep coding 👍.

0

@lalit-aditya

Posted

@romila2003 Hey Romila, Thank you for your recommendations. I appreciate your code.

1

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