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 Card Using HTML Figure

Ryan Hardy 110

@ryyHardy

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 am proud of how close I was able to get to the design. The only difference I can see is slightly less space between the QR code image and the text. I am also proud of how I structured the HTML by taking advantage of the figure element.

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

I struggled a bit with the text below the QR code, both in the HTML and CSS. In the end, I decided to use two paragraphs with their own classes. This made the two paragraphs easier to manage, but there is probably a better way to do it.

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

I am still learning how to apply good CSS practices. I would like feedback on how clean it is and if I should rename any variables/classes. Also, I am sure there is a better way to handle the units. I feel like I overused rem a lot.

Community feedback

@Aphelion-im

Posted

Well done! The design was translated well to code. I have no feedback at this time.

A minor thing:

When I click the red "Preview site" button it gives me a 404 error. Preview site

The link on your Github page does work correctly. Live Site URL

0

Ryan Hardy 110

@ryyHardy

Posted

@Aphelion-im Thanks for the heads-up about the links. I changed the repository name at some point. It should work now. (hopefully).

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