Submitted almost 2 years ago

QR Code Component - HTML and CSS

Cathrine N. Jensen• 10

@cnjen

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

This is my first challenge here on Frontend Mentor and I am still new to learning HTML and CSS. Some areas that I would like feedback on and want to improve/become more comfortable with are:

my use if ID instead of class. There wasn't much repetition in the project, so most elements were unique.
an addition to the above issue, I would love some feedback on cleaner code/cutting down on repetition in CSS. Maybe there are some things that could have been put into a class, so that there was less repetition.
my use of flexbox. Was this best practice for this challenge, any additional feedback on how I used it.
the positioning of the card on the page. Was there a simpler/better way to position it like this?
any other feedback on responsiveness, units, better practices, etc.

Community feedback

Ali Ahmed• 680

@Dany-GitHub

Posted almost 2 years ago

Its better to use classes instead of ID here is article for that may be useful DEV as for positioning you can center it with flex box too but you need to give the body

height: 100vh;
display: flex;
 justify-content: center; 
align-items: center;

since there is no much content on it the height will be auto to cut down the repetition you should use classes for that

Marked as helpful

Cathrine N. Jensen• 10

@cnjen

Posted almost 2 years ago

@Dany-GitHub Thank you! And thank you for the article on classes vs IDs, that was a nice insight. I had tried using flexbox for centering, but was missing the height attribute as you mention, so I will try that out. Thank you for the feedback

Ali Ahmed• 680

@Dany-GitHub

Posted almost 2 years ago

@cnjen You are welcome

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