layout responsivo utilizando apenas HTML5/CSS3

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 8 months ago

  Olá novamente Matheus, parabéns por mais um projeto concluido, que ficou excelentemente bom, está muito semelhante ao design proposto, parabéns.

  Gostaria de dar algumas dicas, no seu CSS, ele começa com um @charset "UTF-8", isso é redundante, tendo em vista que no seu HTML, na linha 4, <meta charset="UTF-8"> já está definido o charset do projeto.

  Outra coisa que notei no seu CSS é a falta do :hover, pois se você for ver na pasta de design, tem uma imagem chamada active-state.jpg, nele é possível ver que no <h1> tem um efeito de hover, que deixa o título na cor amarela, e no card tem um efeito que aumenta o tamanho da sombra.

  Existe uma outra redundância no seu CSS, no seletor body tem uma propriedade de margin: 0; ela é redundante pois você já definiu com o seletor global * uma propriedade de margin: 0;, e ela afeta todos elementos, então não era necessário colocar essa propriedade de margem dentro do body.

  No seu seletor .span-bg você utilizou um padding: 0px 10px 0px 0px, ao invés de usar dessa forma você poderia usar um padding-right: 10px;, pois assim deixaria esse trecho mais conciso e intuitivo.

  Tem outra redundância, está presente no seu seletor .attribution, nele tem dois text-align: center;, o que faz com que o de cima seja anulado pelo debaixo.

  Sobre a parte da media query, nela contêm algumas redundâncias, pegarei um seletor para mostrar:

  .conteudo-principal {
    width: 350px;
    height: 500px;
    background-color: var(--cor0-neutro);
    border-radius: 20px;
    box-shadow: 9px 8px 0px 0px var(--cor2-neutro);
    border: 1px solid var(--cor2-neutro);
    padding: 10px;
  }
  
  @media (max-width: 600px) {
    .conteudo-principal {
      max-width: 300px;
      height: 450px;
      background-color: var(--cor0-neutro);  <--
      border-radius: 20px;  <--
      box-shadow: 9px 8px 0px 0px var(--cor2-neutro);  <--
      border: 1px solid var(--cor2-neutro);  <--
      padding: 10px;  <--
    }
  

  Por mais que eu tenha apenas colocado esse seletor, notei que tem alguns outros dessa forma, como o .div-img, .span-bg , span , que poderiam até mesmo serem excluídos de dentro da sua @media pois eles são idênticos aos valores de fora dela, o que faz com que eles não tenham efeito nenhum.

  Todas propriedades repetidas são redundantes, todas essas que eu coloquei uma seta (<--) podem ser apagadas por exemplo, porque esses valores já estão definidos fora da media query, o que funciona como uma "estilização global".

  E novamente, parabéns pelo seu projeto, e essa sua vontade e ímpeto de querer aprender coisas novas, resolver os desafios da melhor forma possível, te fará ir longe, de verdade parabéns pelo seu esforço e dedicação. Caso algo que eu tenha dito não tenha ficado claro, por favor comente aqui embaixo que tentarei te ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Matheus Bustamante•260

  @MTbustamante98Posted 7 months ago

  @R3ygoski Dude, thank you very much for correcting me, I'm really grateful for that, I had some mistakes, next time I'll try to reduce these silly mistakes as much as possible. Thank you again for this, from the bottom of my heart.

  0