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 code component using CSS Flexbox

Alexander 120

@zerescas

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


  • It looks like design layouts but can it be called as a normal solution for this challenge?
  • How can be improved a structure and readability of the CSS and HTML files?

Community feedback

romila 3,570

@romila2003

Posted

Hi ,

Welcome to the frontend mentor community and congratulations for 🎉 for completing your first challenge, the card looks great, and it is great that you used the flex property to center the card. Also, I liked how you styled the footer, it looks cool. 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 should also wrap the footer within the footer tag and nest this within the body but outside of the main content e.g. <footer class="attribution"></footer>
  3. Regarding your first question, your attempt can be called a normal solution. If you are concerned with your project not looking pixel perfect, then you don't need to worry since your target should be trying to be as similar as possible and sometimes it may not be exactly the same. Also, if you want to add some personal designs like cool features with CSS or JS, then you can add those in to give your extra touch.
  4. Since your project includes a footer, I would recommend you using the flex property on the body, to align the card and footer in the middle.

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

Marked as helpful

1

Alexander 120

@zerescas

Posted

@romila2003 thank you so much. I have updated my solution.

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