Frontend Mentor | QR Code Component Challenge. Only HTML5 and CSS. coding challenge solution

Solution retrospective

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

Since this was my first challenge, I had to review what the Frontend Mentor workflow is like.

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

For now, I need to improve my frontend knowledge, it is not my strong point.

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

I want to get ideas about how to implement in the best way possible the HTML and CSS structure.

Community feedback

@arkus7

Posted 3 months ago

Hi! Here's my feedback as a seasoned dev, but a beginner in the frontend:

Nice and clean HTML structure. I wasn't sure about the usage of the article tag, but I've read more on this topic and I think it's fine.
I like the variables you've used in the style.css. I had a problem remembering which color is which, and your solution to that seems very good. Definitely stealing this one for another challenge.
I can see that you've "hardcoded" the card height as well as the width. I think you should only hardcode the width, and let the height be more dynamic.
I can see a small difference between the design and your solution when it comes to the "copy" text ("Scan the QR code..."). I was having the same issue, and I've dealt with that using a Figma design file - this text has non-default line spacing. If you want your solution to be 100% as on the design, check the line spacing there.

Overall, great solution! Definitely better than mine and I've learned some new things from you, so thank you!

Marked as helpful

@miller-danilo

Posted 3 months ago

Hi, @arkus7

Thank you for take the time to comment my solution. I will check the recommendations you made about the card height and the line spacing.

QR Code Component Challenge. Only HTML5 and CSS.