Submitted 4 days ago

QR Code Challenge using HTML and CSS

DanniJK1• 10

@DanniJK1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

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 most proud of how close my final solution looked in comparison to the initial challenge design.

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

I encountered the challenge of not knowing how to properly use CSS in some cases to make the elements look or behave a certain way. I overcame this by using websites like w3schools.com to look up some aspects of CSS.

Community feedback

abm-afk• 50

@abm-afk

Posted 4 days ago

Looks good! Tips to improve:

Try to focus more on semantic tags, read about them and understand how to use them properly
Proper naming for classes/ids to describe what is the component you are working on, like "card-container, card__qr-code, card__description". With such approach it would be much easier to understand which part of component you are working on the bigger project.
You used ids to style components, which bring incosistency. While styling your components use classes. I would suggest to use ids for some specific cases when you want to style exact component, not a group of, and also for javascript manipulation.

Please log in to post a comment

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