Frontend Mentor | QR Code Component solution using basic HTML and CSS coding challenge solution

Solution retrospective

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

I'm most proud of, by the first time, I engaged myself on coding and finished my first code 100% by myself.

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

The mainly challenge was something basic: Fit the footer on page bottom. The solution shown up when I read an article about elements positioning using CSS.

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

I'll be really grateful if someone could give some tips about things that i can improve on my code, pointing my mistakes and weak points on code writing.

Community feedback

Huy Phan• 1,860

@huyphan2210

Posted 13 days ago

Hi, @Rodrigo-Policarpo

You did a great job with the challenge! I have a couple of suggestions for improvement:

Using height: 100vh on the body works for this specific challenge, but I'd recommend switching to min-height: 100vh instead. This ensures the body can expand if the content grows beyond the viewport height, preventing potential overflow issues and making it more flexible across different devices and content lengths.
I noticed you're already using a footer element, which is great! Why not replace the .card's div with a <main> element instead? Since <main> semantically represents the main content of a page, it could be a better fit than a generic div, and it would make your HTML more accessible and meaningful.

Hope this helps!

Marked as helpful

Rodrigo Policarpo Meireles• 40

@Rodrigo-Policarpo

Posted 13 days ago

Hi @huyphan2210 !

First of all, thanks for sharing these suggestions and code improvements!

The suggestion about the height tag was very useful, since I don't have much practice on how to use min-max correctly.
Also, the suggestion to replace the elements was very important too.

Thank you for everything!

QR Code Component solution using basic HTML and CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community