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 page

@shaik-zakir

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


What are you most proud of, and what would you do differently next time?

I have used Bootstrap to achieve the solution.

Community feedback

@shaik-zakir

Posted

Thank you very much for your time to review my code, I will make sure to incorporate into my next solution.

0

@CamilleClinchamp

Posted

Your solution is pretty good, just a few things I have noticed:

  • Instead of using div elements, you could have used semantic tags for better accessibility (<article> for the card for example)
  • You didn't have to wrap your card inside <div class="set-card-center">. The CSS properties of this class could have been added directly to the body.
  • The image itself didn't have to be a flexbox. Just using a text-align: center on the card would have centered all the elements inside of it.
  • Your card-body class doesn't have any CSS attributes, meaning this div probably isn't necessary at all. Just put the text inside the card, along with the image. To keep those texts under the image, add this line on your flexbox (body if you follow my advice, set-card-center otherwise): flex-direction: column;

Your result respects the design, which is already excellent! I'm just giving some advice to improve the quality of your code.

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