QR code desafio Front-end mentor

Community feedback

• 

  BrunoMoleta•700

  @brunomoletaPosted over 1 year ago

  Bom dia Ramon,

  Quanto ao seu HTML:

  Nas linhas 13 e 14 ao invés de usar dois <div> pra melhorar a semântica dá pra usar:

  <main class="display">
  <figure class="img>
  

  Além disso, a frase Melhore suas habilidades de front-end criando projetos na minha opinião se encaixa melhor como um <h2>. O <h1> que creio ser mais descritivo é:

  <h1 class:"sr-only"> Card com QR code âncorado ao site FrontendMentor </h1>

  sendo que esta classe esconde, deixando-o visível apenas ao leitor de tela.

  O porquê de fazer isso com o h1 está neste link do MDN.

  Quanto ao CSS:

  na tua linha 24, ao invés de usar max-width: 21rem, sugiro que uses width: 100%.

  Assim ele vai até onde o .display { padding: 1rem} permitir.

  Se este comentário te ajudou, por favor marque como helpful na parte inferior direita aqui dentro dele.

  Bem vindo a comunidade,

  Um salve de Curitiba/PR :D

  1
• 

  Paulo Dandrea•80

  @Paulo-DandreaPosted over 1 year ago

  Parabéns pela solução!

  Vi que acabou não colocando as cores das fontes. Por que não aproveita e cria variáveis com as cores e aí pode usar onde quiser.

  Exemplo:

  :root {
  /* Color variables  */
  --color-dark-blue: hsl(218, 44%, 22%);
  
  /* Font variables  */
  --font-primary: "Outfit", sans-serif;
  }
  
  h1 {
  color: var(--color-dark-blue)
  } 
  

  Tente organizar seu CSS em que os seletores fiquem ordenados por tipo ou especificidade, por exemplo:

  body {} h1,h2, etc{} .display{}

  0
• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add background color to body to make background as per design

  body
  {
  background:hsl(212, 45%, 89%);
  }
  

  0