Submitted about 1 year ago

Recipe Page Main

Andressa Karen•100

@andressakaren

A solution to the Recipe page challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

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.

What challenges did you encounter, and how did you overcome them?

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.

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.

What specific areas of your project would you like help with?

PT-BR

Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.

Any feedback is welcome so that I can improve my skills.

Code

Please log in to post a comment

Community feedback

Bernardo Poggioni•6,730
@R3ygoski
Posted about 1 year 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 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

Join 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