Submitted about 2 months ago

Landing page with responsive CSS

Álvaro Luiz de Oliveira Boschi•30

@AlvBosc

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Bernardo Poggioni•6,330
@R3ygoskiPosted about 2 months ago
Olá Álvaro, parabéns pela conclusão desse desafio, ele ficou muito igual ao design proposto, parabéns.

Tenho algumas pequenas sugestões. Primeiro, sobre o HTML, considere utilizar mais tag semânticas, como <main>, <nav>, <header>, <footer> entre outras, pois elas ajudam a deixar sua página com maior acessibilidade para leitores de tela e também ajuda no SEO. Então algumas tags que poderiam ser substituídas são:

div.main poderia ser alterada para <main>, devido a ser a tag que contêm o conteúdo principal da página, e também porque geralmente depois da <body> vem um <main>.

div.author poderia ser alterada para uma <footer> pois essa parte contém uma metainformação, que nesse caso é o autor do artigo.

Ainda sobre acessibilidade, você colocou uma tag <a> sem o atributo href, e isso em projetos reais pode gerar um erro de acessibilidade, para evitar isso, basta colocar um href="#", dessa forma quando o link for clicado, ele não irá direcionar para lugar nenhum.

Sobre a estrutura do HTML, ela possui duas pequenas redundâncias, que nesse caso seria o div.image, ele não era necessário de existir, o que você pode fazer é deletar essa <div> e no <img/> adicionar um atributo class="image", que dessa forma você verá que a imagem ainda sim ficará como deveria e a outra redundância seria div.quadrado, essa <div> também não é necessária, e se remover ela e passar a classe quadrado para a tag <p> dentro dela, o resultado ainda seria o mesmo, só teria que adicionar uma nova propriedade ao css que seria justify-content: center;.

Agora uma pequena sugestão, sobre as classes do seu projeto, elas não estão erradas, mas talvez seria mais interessante dar nomes mais descritivos, como por exemplo, ao invés de quadrado pode ser mais interessante chamar de category ou tag, ao invés de para poderia ser description, ao invés de publi poderia ser publication ou publication-date. Aproveitando essa sugestão, também recomendo que dê uma olhada sobre Metodologia BEM, pois isso ajuda e muito em manter uma organização e padronização na criação de classes.

Agora sobre o CSS, tenho duas dicas, primeiro vou começar sobre a parte de especificação, você utilizou muito isso no CSS, e não era necessário, por exemplo: .main .image img {}, nesse caso por exemplo, isso poderia ser substituído por .image img {} outro caso .main a {}, você poderia colocar apenas a {} isso porque no seu HTML tem apenas uma tag <a>, a especificação serve para pegarmos um elemento bem específico.

E a outra dica é sobre o font-size, geralmente é mais recomendado utilizar a unidade de medida rem para trabalhar com fontes, isso devido ao fato de que ela se adapta as configurações de fonte do navegador do usuário. Já px não, ela possui um valor absoluto, então a fonte sempre terá o tamanho mencionado.

E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida sobre o que eu tenha dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
1

Please log in to post a comment

Join 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