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

QR Code Card

@thirraz

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

Lucas 👾 104,420

@correlucas

Posted

👾Oi Thiago Souza, 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:

Ao invés de usar <h3> pro bloco contendo o título principal, ao invés use <h1>, porque cada página precisa de um h1 pro título principal e siga a sequência se você adicionar outro título como h1, h2 , h3…

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.

Use unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Para fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

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

Marked as helpful

0

@MelvinAguilar

Posted

Hi @thirraz, good job for completing this challenge! 👋

Here are some suggestions to improve your code:

  • Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

Solution:

<h1>Improve your front-end skills by building projects</h1>
  • The main container is not center. You can use flexbox to center things
body {
  background: hsl(212, 45%, 89%);

  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Remove margin: 10% auto; in the .container selector

More information: A Complete Guide to Flexbox (CSS-Tricks) | https://www.w3schools.com/howto/howto_css_center-vertical.asp

I hope those tips will help you.

A very good solution for this challenge, good job !

Marked as helpful

0

@thirraz

Posted

@MelvinAguilar thanks! i'll update my code with these suggestions😎👍

1

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