Design comparison
Solution retrospective
em ter completado o desafio em menos tempo que o primeiro.
What challenges did you encounter, and how did you overcome them?em relação ao último ícone onde tive dificuldade em inserir dentro do card, pois, estava dando conflito com o restante dos contents..
What specific areas of your project would you like help with?responsividade para telas menores
Community feedback
- @R3ygoskiPosted 7 months ago
Olá John, parabéns pro ter conseguido concluir o desafio.
Notei que seu arquivo está sem imagem, isso se deu porque na sua tag
<img/>
,você passou os diretórios errados, para consertar isso basta remover oassets/images
de ambos.Agora algumas dicas, percebi que você utilizou várias
<div>
no seu projeto, o que não está errado no quesito de estrutura de html, mas ter apenas<div>
faz com que seu html não fique semântico, e é extremamente recomendável usar o html semântico. Aqui um link sobre: W3School - Semantic HTML.Relacionado aos headings notei que você utilizou a
<h3>
e<h4>
, acredito eu que devido a serem mais próximas do design proposto, mas o correto é sempre começar em uma ordem hierárquica, isso é, começar pelo<h1>
e ir descendo, pois isso ajuda no quesito de acessibilidade. Aqui um link sobre isso: W3School - Heading Levels.Já no CSS essa borda branca que ficou em volta do fundo amarelo se dá pelo fato de que o arquivo base já vem com um
padding
emargin
definidos, se quiser remover esse espaçamento branco nas bordas você pode usar o seguinte seletor e propriedades:* { padding: 0; margin: 0; }
Esse é o seletor global, ele é bastante usado para fazer um
reset
, e quando você utilizar ele, todos os elementos irão receber as propriedades dentro dele, ou seja, todos elementos irão ficar compadding 0
emargin 0
, o que talvez possa ajudar na hora de montar o layout.Uma outra dica vai para as fontes, notei que você utilizou px para as fontes, isso não é errado também, mas no quesito de acessibilidade pode ser problemático, isso devido as unidades de medidas de px serem absolutas. O recomendável é utilizar a medida rem, pois ela é relativa, isso faz com que ela se adapte as configurações de fonte do navegador do usuário.
Também tem a parte de que o título principal não está com o efeito de
hover
, para adicionar esse efeito, basta fazer dessa forma.title-content:hover
, daí é só adicionar os estilos desejados.E agora algo mais da minha opinião, que é, tome cuidado quando for nomear as variáveis, por exemplo, você nomeou uma variável assim:
--corbranca
, o que pode as vezes não ser o ideal, porque não dá pra ver uma separação de palavras, o melhor seria utilizar com kebab-case ou camelCase, ficando assim:--cor-branca
ou--corBranca
, pois assim facilita a leitura.Edit: Havia esquecido de mencionar, mas como você já está usando esse trecho no seu html:
<meta charset="UTF-8">
Acaba que não é necessário utilizar o
@charset "UIF-8";
no seu CSS.E novamente, parabéns por ter concluído seu projeto, caso algo que eu tenha dito tenha ficado confuso, por favor, comente aqui embaixo que tentarei responder da melhor forma possível.
Marked as helpful0@JonhKellysonPosted 6 months agoCaro @R3ygoski! Agradeço pelo retorno, suas dicas me ajudaram bastante e irei por em prática (até pq aqui é para testarmos nosso aprendizado mesmo), muito obrigado novamente.
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