Design comparison
Solution retrospective
PT-BR
- Fiquei muito satisfeita com o resultado final deste desafio, foi um dos mais bonitos que achei até agora. Na próxima vez, pretendo me aprofundar ainda mais em listas, porque eu não consegui fazer a personalização dos marcadores.
EN
- I was very happy with the final result of this challenge, it was one of the most beautiful I have found so far. Next time, I intend to delve deeper into lists, because I couldn't customize the markers.
PT-BR
- O principal desafio deste desafio foi compreender a formatação de listas com CSS. Encontrei dificuldades em personalizar marcadores, espaçamentos, recuos e outros aspectos visuais das listas. Consegui alcançar um resultado satisfatório, mas ainda tenho muito a aprender sobre o assunto.
EN
- The main challenge of this challenge was understanding the list formatting with CSS. I had difficulty customizing bullets, spacing, indentation, and other visual aspects of lists. I was able to achieve a satisfactory result, but I still have a lot to learn about the subject.
PT-BR
- Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.
EN
- Any feedback is welcome so that I can improve my skills.
Community feedback
- @R3ygoskiPosted 6 months ago
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 paraauto
, 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 odisplay:grid
e ogrid-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 helpful0@andressakarenPosted 6 months agoOii, @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 oheight: 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!!
1@R3ygoskiPosted 6 months agoOlá 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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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