Design comparison
Solution retrospective
aprendendo sempre a mais
What challenges did you encounter, and how did you overcome them?css
What specific areas of your project would you like help with?js
Community feedback
- @R3ygoskiPosted 8 months 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 deli
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 atributoalt
que só está escritofoto
, é altamente recomendável que você utilize textos descritivos no atributoalt
, 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, noindex.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.
0 - @DeeptiGit22Posted 8 months ago
you are missing the background color on preparation time section and border-bottom in lots of places.
0
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