CSS FLEX, media query

Community feedback

• 

  Bernardo Poggioni•5,360

  @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 o assets/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 e margin 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 com padding 0 e margin 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 helpful

  0

  ---

  

  JonhKellyson•40

  @JonhKellysonPosted 7 months ago

  Caro @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