Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey , adding to what was said above/below:
-
The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
-
There is **no need **for a media query in this challenge.
-
Add a
max-width: 320px
to your .container. -
Your margins need to be reduce and the font sizes need some work as well.
Happy Coding!
Marked as helpful0 -
- @correlucasPosted about 2 years ago
👾Oi Felipe, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor
Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:
1.Use
<main>
ao invés de usar uma<div>
para conter todo conteúdo do componente. Desse jeito você melhora a semântica e indica qual é o bloco mais importante de conteúdo da página. Lembre-se que div é só um bloco de conteúdo sem significado e que cada página precisa do<main>
para mostrar qual o bloco mais importante.2.Adicione uma margem em torno de
margin: 20px
para evitar que o card toque nas bordas da tela enquanto diminui.3.Para melhorar o workflow e ganhar tempo você pode codar toda sua solução usando
px
e no final selecionar todo códigoCSS
E converter automaticamente prarem
tudo que forpx
com esse plugin doVSCODE
https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem ou usar esse sitehttps://pixelsconverter.com/px-to-rem👋 Espero que essas dicas te ajudem e que você continue no foco!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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