dev3

Community feedback

• 

  Bernardo Poggioni•7,030

  @R3ygoski

  Posted over 1 year ago

  Olá Caique, parabéns por ter realizado esse projeto!

  Notei aqui que você utilizou algumas cores e fonte que não são do design original, não sei se foi proposital ou não, caso tenha sido, então por favor ignore o trecho a seguir. Quando é feito o download do projeto, vem um arquivo chamado style-guide.md nele estão definidas as cores, fontes e pesos da fonte a serem utilizadas no projeto.

  Gostaria de dar algumas dicas, começarei pelo HTML, eu percebi que você utilizou muitas tags <div> na estrutura do seu HTML, saiba que isso não está errado, mas isso faz com que sua estrutura não seja semântica, caso você queira focar nessa parte de fazer uma estrutura semântica no HTML, deixarei aqui o seguinte link que explica mais sobre essa parte de semântica: W3School - Semantic HTML.

  Notei que você não coloriu os bullets e números das suas <ul>, uma forma de fazer isso, seria usar o seletor de li e colocar nele uma pseudo-classe de ::marker, dessa forma você conseguirá colorir os bullets e números das listas. Exemplo:

  HTML
  
  <ul>
      <li class="b-red">Item 1</li>
      <li  class="b-blue">Item 2</li>
      <li  class="b-green">Item 3</li>
  </ul>
  
  CSS
  .b-red::marker {
      color: red;
  }
  .b-blue::marker {
      color: blue;
  }
  .b-green::marker {
      color: green;
  }
  

  Nesse exemplo, cada li foi colorida de uma forma diferente, se você quisesse colorir todas, você poderia ou usar o seletor de tag que seria li::marker ou dar a todas as <li> classes com mesmo nome, e utilizar a classe com o ::marker.

  Edit: Acabei dando uma olhada novamente no seu código, e notei que sua tag <img> tem um atributo alt que só está escrito foto, é altamente recomendável que você utilize textos descritivos no atributo alt, pois isso ajuda pessoas com deficiência visual a conseguirem ler a imagem através de leitores de telas e entender o que é.

  Outra coisa que notei, que é mais uma questão organizacional, é a respeito do seu HTML ter algumas <div> com identação um pouco confusa, por exemplo a <div class="receita"> que está mais pra frente do que o conteúdo filho, isso pode causar um pouco de confusão. Mas saiba que isso não irá causar nenhum problema na sua estrutura, é mais uma questão de boa prática mesmo.

  Outra coisa que notei foi que você utilizou vários Lorem ipsum, na pasta de design que vem quando você baixa o projeto, é possível ver os textos corretos, e também quando você baixa o projeto, no index.html também já vem com esses textos, uma dica seria a de copiar tudo que tem no index.html que vêm com o projeto, e deixar em um arquivo de texto, e quando você precisar, basta ir no arquivo de texto, copiar o trecho e colar.

  Edit2: Peço desculpas por estar aqui escrevendo mais um edit, é que eu notei que você colocou na pasta de imagens as suas fontes, isso também não irá causar problemas, mas é uma questão de organização e boa prática coloca-las em uma pasta chamada fonts.

  Novamente, parabéns por ter concluído esse projeto, continue se aprimorando, caso tenha surgido alguma duvida, por favor, responda aqui embaixo que tentarei da melhor forma possível te ajudar.

  00
• 

  Deepti Singh•120

  @DeeptiGit22

  Posted over 1 year ago

  you are missing the background color on preparation time section and border-bottom in lots of places.

  01