Submitted 5 months ago

QR-Code Component

Andrew G. Ayad• 100

@andrew-g-ayad

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?

Attention to small details, adding and altering shadows based on screen size, and pixel-perfect matching.

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

The challenge I encountered was calculating an adaptive border-radius. I overcame it using calc()

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

none

Community feedback

Shivian• 40

@Andre-DM

Posted 5 months ago

Hi! This is my first review, but I think I have a couple of tips that may be useful in the future:

It is generally a good idea to use rem units for font size and px for other properties such as width, height, padding and margin. This is because rem units are based on the root element html of the document and are therefore more flexible and responsive than px units.
To avoid repetition in the code, properties such as font-family (in this case, a single font for the entire project) can be placed in the body selector, as well default values such as font-style: normal can be avoided, unless they are used to override other previously declared font-styles.

I hope this couple tips were helpful to you, otherwise your solution seems great!

Keep up the good work!

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