Responsive Landing Page with a Media Queries

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 4 days ago

  Olá Ana, parabéns pela conclusão do desafio, seu resultado está bem semelhante ao design proposto.

  Notei que você não fez a parte de efeitos, por exemplo, quando se passa o mouse pelo card a sombra dele aumenta, e quando se passa o mouse pelo título, ele muda de cor e fica amarelo.

  Uma dica sobre a responsividade, ao invés de fazer a responsividade dessa forma que você fez, que foi delimitando um tamanho mínimo e máximo, faça ela seguindo à ideia de mobile-first, pois isso facilita muito. No mobile-first você começa fazendo o design de celular, e depois vai adaptando para telas maiores, e para isso basta ir utilizando o @media (min-width: valor). Exemplo:

  .container: {
    width: 300px;
    height: 428px;
  }
  
  @media (min-width: 768px){
    .container: {
      width: 360px;
    }
  }
  

  Nesse exemplo, o valor do container só mudaria quando a tela chegasse à um tamanho específico, que nesse caso é 768px de largura.

  Ainda falando sobre responsividade, nesse desafio não era necessário o uso da @media, ao invés de utilizar uma media query você poderia utilizar um clamp(min, base, max), exemplo: width: clamp(300px, 90%, 360px), que dessa forma você conseguiria controlar o tamanho do container sem grandes problemas. Obs.: Todos esses valores que passei são hipotéticos.

  Agora sobre o HTML, eu notei que você utilizou uma <svg> inteira dentro do seu HTML, isso não era necessário, geralmente utilizamos dessa forma quando queremos editar o <svg>, agora quando queremos apenas que a imagem seja exibida, que é o caso desse projeto, nós podemos utilizar uma <img src="./assets/images/illustration-article.svg" alt="" />.

  Ainda sobre o HTML, ele está com alguns pequenos problemas de estrutura. Sobre a estrutura, você utilizou várias vezes uma <div> para cobrir um texto, isso não era necessário, você poderia ter colocado apenas a tag de texto, sem a <div> cobrindo-a, e caso você quisesse que essa tag de texto tivesse um comportamento semelhante ao de uma <div> bastaria colocar um display: block no CSS.

  Agora uma pequena coisa relacionada a semântica e acessibilidade, é a respeito desse trecho:

  <a href="">
    <p>Learning</p>
  </a>
  

  Não é necessário passar um tag <p> dentro de uma tag <a>, o mais correto seria:

  <a href="">
    Learning
  </a>
  

  Note que tem casos em que você precisa passar algumas coisas dentro da tag <a> como ícones, imagens ou algo do tipo, e para isso ficaria algo assim:

  <a href="">
    <i class="icone"></i>
    Learning
  </a>
  

  Agora sobre a semântica, ela está bem-feita, mas só tem um pequeno erro que seria esse trecho: div.footer-article, ao invés de utilizar uma <div> o mais correto seria utilizar uma <footer>.

  E é isso, novamente parabéns pela conclusão do projeto, continue praticando e se aprimorando. Caso tenha surgido qualquer dúvida quanto ao que foi dito, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Ana Carolina Lucas Ferreira•60

  @aclf12Posted 3 days ago

  @R3ygoski Muito Obrigada pelas dicas!!!

  1