Frontend Mentor | Static Web QR Code Component using HTML & CSS coding challenge solution

Solution retrospective

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

I am proud of the fact that I didn't procrastinate until I get everything right where I wanted them to be.

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

I was having a problem with the positioning, which I am currently working on.

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

It would be nice if I had understood how the layout works and how parent-child relationship works.

Community feedback

@yefreescoding

Posted 3 months ago

Nice job on this component, and congratulations on not procrastinating xd.

Here are some tips to improve your styles with CSS and make the design stand out 😁:

Do not apply a background-color to the * {} selector, as this will affect the background of every element on your page.
You can style the body with min-height: 100dvh; and display: grid; place-items: center; to center any div within your body, eliminating the need for position: absolute;.
If you use position: absolute; for any component, always remember to add position: relative; to the parent container. This is very important.
<img src="" alt=""/> elements can be tricky to style, but using display: block; max-width: 100%; can make your coding life easier.
It's essential to learn how to use display: grid; and display: flex; as they are crucial properties in today's front-end development.

Marked as helpful

beqqi• 40

@beqqi

Posted 3 months ago

Thank you very much, I will work on it! @yefreescoding

Static Web QR Code Component using HTML & CSS