Submitted almost 2 years ago

QRCode Card

Felipe Bezerra Joazeiro• 60

@felipejoazeiro

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

Community feedback

Travolgi 🍕• 31,420

@denielden

Posted almost 2 years ago

Hello Felipe, You have done a good work! 😁

Some little tips to improve your code:

add main tag and wrap the card for improve the Accessibility
also you can use article tag instead of a simple div to the container card for improve the Accessibility
remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
instead of using px or % use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Oi Felipe, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor

O seu componente já está com o design pronto, um bom exercício pra melhorar seu código, seria criar a estrutura mais limpa o possível e reduzir seu código ao máximo. Por exemplo, você pode segurar todo conteúdo em um bloco só usando (<main> ou <div>) nesse caso vamos usar <main> por que é uma tag semantica. Se você notar, nem precisa adicionar nenhum div além da principal pra segurar o conteúdo (img, h1 e p). A estrutura ideal e mais limpa possível pra esse desafio é essa aqui:

<body>
<main>
 <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main>
</body>

Para reduzir o CSS, você pode excluir todas as classes e selecionar todos elementos no CSS com o seletor direto para cada um deles, nesse caso (img, div, main, h1 e p). Faltou também colocar o alt text pra imagem ser reconhecida por leitores de tela.

👋 Espero que essas dicas te ajudem e que você continue no foco!

Marked as helpful

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