Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Card QR-code com HTML E CSS básico

@evelyn-matos

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MaxiTRR

Posted

Hi! Grat job in this one! I think the code is really good! Particularly, i dont like to use de HTML tags of selectors in CSS, but it really makes the code simpler and shorter, although the best practice is to use class in case in the future you decide to expand he code with more components!

The only thing i could say of the code is, in the body selector in the CSS, the property width:100% It doesn't seem to affect the result at all, so you could have it in mind in future codings!

Happy coding!

0

@evelyn-matos

Posted

@MaxiTRR Obrigada... vou aplicar suas dicas :)

0

@ralacerda

Posted

Hey, that's is a great start!

One thing that is easy to miss is the card shadows, I also didn't notice it when I first did this challenge, so don't worry about it.

Sometimes is hard to understand the accessibility warnings. In your solution, you are missing the "main" landmark, you can easily fix this by using the <main> tag in your ".container", instead of a <div> tag.

I think it's easier to center the card with a grid display (only 2 lines needed), but the end result is the same.

You also don't need the card to be a flex, since the normal flow of blocks is vertical.

0

@evelyn-matos

Posted

@ralacerda Obrigada por colaborar... vou aplicar suas dicas :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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