@R3ygoski
Posted
Olá novamente Kaio, e parabéns pelo seu projeto, ele ficou bem semelhante ao proposto pelo design.
Gostaria de dar algumas dicas relacionadas ao seu projeto. Primeiramente notei que o seu .container_recipe está muito grudado com as bordas da tela, para corrigir isso, basta usar um margin: 4rem 0, algo próximo disso que dará um respiro para cima e para baixo.
Sobre colorir os marcadores existe uma outra forma, que é com o uso da pseudo-classe ::marker, basta usar ela em um seletor da tag <li> e colocar a propriedade de color: ; e a cor que você desejar, assim não seria necessário usar o <span>. Aqui vai um exemplo:
HTML
<ul>
<li class="b-red">A</li>
<li class="b-blue">B</li>
<li class="b-green">C</li>
</ul>
CSS
.b-red::marker {
color: #f00;
}
.b-blue::marker {
color: #00f;
}
.b-green::marker {
color: #0f0;
}
Outra coisa que notei é que quando o projeto está sendo exibido em telas menores, ele acaba quebrando, isso devido a falta de responsividade, caso queira mais sobre responsividade, deixarei aqui um link: W3School - Responsive Introduction e W3School - Media Query.
Edit: Havia esquecido de falar sobre a parte de semântica, sobre a semântica, tem algumas áreas que estão sem semântica, como a parte de receita, preparação, instrução, essas partes por exemplo poderiam ao invés de estar como tag <div>, poderiam estar como tag de <article>, e a <div> que serve de container para a imagem, poderia ser uma tag <figure>.
E novamente, parabéns pelo seu projeto, você está evoluindo bem, continue assim, caso algo que eu tenha dito não tenha ficado claro, sinta-se à vontade para me perguntar aqui nos comentário, que tentarei responder da melhor forma possível.
Marked as helpful
