@R3ygoski
Posted
Olá Andressa, parabéns pela conclusão de mais um projeto, ele ficou muito bem feito e quase semelhante ao design proposto, parabéns.
Algumas dicas, vou começar falando sobre a altura do "card", ele está um pouco maior, se você observar bem, no final ele tem um espaçamento a mais, uma dica seria a de alterar o height dele para auto, que dessa forma ele se adapta ao tamanho dos elementos contidos dentro dele.
Outra dica, notei que você não coloriu os marcadores de lista, para fazer isso você pode fazer da seguinte forma:
Usarei sua lista de ingrediente como exemplo.
.ingredients > ul li::marker {
color: red;
}
Dessa forma você iria colorir os marcadores de vermelho, e claro, você pode usar outras cores, mas sempre pra editar os marcadores você tem que na sua li colocar uma pseudo-classe de ::marker, e o comportamento desses marcadores são os mesmos de uma fonte, ou seja, você pode usar por exemplo, font-size para regular o tamanho do marcador.
Quando estava olhando seu código me deparei com isso /* Mds tem que existir outra forma de fazer isso */, kkkkkkk achei engraçado a primeira vista, e sim, tem uma outra forma de fazer isso, que é, removendo o display:grid e o grid-template-row, eles não estavam fazendo efeito, tanto que se você remover, você verá que ficará no fluxo correto ainda.
Agora uma dica quanto ao HTML, você utilizou vários <article> para delimitar as secções do seu projeto, mas acredito eu, que o mais correto seja <section>, isso devido a que, <article> servem para conteúdos autoexplicativos, conteúdos autônomos, que não dependem do resto do conteúdo da página, mas se você for ver, todo o conteúdo tem ligação um com o outro, então acredito que o mais correto seria uma <section> para cada um deles.
E novamente, parabéns pela conclusão do seu projeto, ele ficou muito bem feito, meus parabéns, continue praticando e se aprimorando. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Marked as helpful
@andressakaren
Posted
Oii, @R3ygoski !! Espero que esteja tudo bem com você.
Eu fiz as alterações que você me sugeriu, entendi a questão de priorizar o uso de <section> nesse caso e usar o height: auto também.
Sobre os marcadores, consegui alterar a cor e o tamanho dele com o que me disse, mas preciso pesquisar mais para conseguir saber como modificar a distancia do marcador para o texto, se é que tenha como fazer dessa forma. Vi algumas resoluções, só que a maioria usam uma <img> para colocar um bullet.png ou um caractere ao invés de listas, ai consegue com mais facilidade controlar essa distancia.
Com relação ao display: grid, eu estava no automático para usar e conseguir organizar o fluxo correto que acabei nem pensando a respeito de não precisar. O comentário foi um pensamento intrusivo que esqueci de apagar antes de enviar a solução kkkk desculpa.
No mais, muito obrigada pelo comentário. Me ajuda bastante a corrigir alguns erros aos poucos e me incentiva a continuar praticando e estudando. Tenha uma ótima semana!!
@R3ygoski
Posted
Olá novamente Andressa, sobre o espaçamento entre os marcadores e texto, você pode fazer de uma forma mais simples, sem o uso de <img/> ou algo do tipo, que é utilizando uma <p> (não precisa ser necessariamente uma <p>, pode ser outras tags), dessa forma veja:
HTML:
<ul>
<li>
<p>A</p>
CSS:
ul > li > p {
margin-left: 3rem;
}
ul > li::marker {
color: red;
}
E claro, você ainda pode adicionar outras tags dentro dessa tag <p>, como por exemplo <span>, mas para espaçamento acredito que apenas uma tag seja o suficiente.
E por nada, fico sempre feliz em ajudar outros dev's ^^. Tenha uma ótima semana também!
Marked as helpful
