Submitted about 2 years ago

QR code component

David Magalhães• 130

@davidwilliamx

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

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

Hey @davidwilliamx, great job on this project!

Some suggestions to improve you code:

For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.
To make it easier to deal with CSS , have more control over your content, and want to ensure that everything will look the same regardless of browser used I suggest taking a look at CSS Resets.

CSS Resets are customizable for your preference.

Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

Happy Coding!

Marked as helpful

David Magalhães• 130

@davidwilliamx

Posted about 2 years ago

@vcarames Thanks for the feedback! I didn't see any problems using a reset.css and normalize.css, do you think I should continue to use both?

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

@davidwilliamx If those are working for you, then you are good to go. You can also you can make your custom one using those two and from others peoples resets.

Thats how I made mine, by using what I liked from all the resets I came upon.

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Oi @davidwilliamx, 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:

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).

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

Marked as helpful

David Magalhães• 130

@davidwilliamx

Posted about 2 years ago

@correlucas Oi, muito obrigado pelo feedback, sempre fico pensando se caso não colocar nada envolvendo esses elementos se o motor de busca pode derrubar a posição da minha página. Vou tentar colocar em prática. Valeu!

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