Responsive Four Card Section built with HTML and CSS

Community feedback

• 

  Adriano•42,800

  @AdrianoEscarabotePosted 4 months ago

  Hello Gillian Oliveira, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  Avoid using the <br> tag in your HTML code. While <br> might seem like a simple way to break lines, it is considered bad practice and can lead to significant accessibility concerns. For users who rely on screen readers, the presence of <br> can be announced, which disrupts the flow of the content and creates a confusing experience.

  Instead of <br>, you should use semantic HTML to structure your content properly. For example, wrapping text in paragraphs (<p>) or using <div> containers for sections provides a cleaner and more accessible solution. This approach improves usability for screen readers and ensures that your content is presented in a meaningful way to all users.

  For more detailed guidance, refer to the MDN documentation on the <br> tag: MDN: Accessibility Concerns of <br>

  Pro Tip: Accessible web development isn't just a recommendation—it's essential for ensuring inclusivity on the web!

  The rest is spot on.

  Hope it’s helpful to you. 👍

  Marked as helpful

  1

  ---

  

  P

  Gillian Oliveira•260

  @lia-oliveiraPosted 4 months ago

  @AdrianoEscarabote I made the change you suggested. Thanks for the tip.

  1
• 

  Bernardo Poggioni•6,430

  @R3ygoskiPosted 4 months ago

  Olá Lia, parabéns pela conclusão do projeto, ele ficou muito bem feito, e bem próximo do design proposto.

  Algumas sugestões, vou começar pelo CSS, notei que você teve uma leve redundância de classes, por exemplo, você utilizou card card--orange card--3, mas isso não era necessário, você poderia ter mesclado o card--orange e o card--3, já que ambos servem como uma classe bem específica para um elemento bem específico.

  Agora sobre o HTML, ele está muito bem estruturado, mas está com um pequeno problema de acessibilidade.

  Bom primeiramente gostaria de dizer que a div.cards poderia ser alterada para uma <section> pois ela abriga conteúdos independentes, já a <div> seria para algo mais genérico.

  Agora pontuando a parte de acessibilidade de novo, você utilizou quatro <h1> e isso não é recomendado, tanto que nesse projeto, o <h1> deveria ser um dos elementos presentes no seu <header>. Utilizamos o <h1> para dizer qual é o título principal da nossa página, assim sendo, o mais correto seria utilizar <h2> para esses cards, pois podemos ter várias repetições de tags headings, com exceção do <h1> que deve único.

  Bom, agora algo meio "off-topic", é sobre como você nomeou os cards. Na metodologia BEM, utilizamos o -- para modificadores, como por exemplo: card__title--selected, então para seguir mais o BEM, o correto seria utilizar algo como: card-orange.

  E agora sim algo off-topic total, eu achei bem interessante a forma de como você utilizou os badges no seu GitHub, e também notei que você pretende aprender Sass. Caso já se sinta confortável como CSS, experimente utilizar o Sass/Scss, que você verá que ele se encaixa perfeitamente com a metodologia BEM.

  E é isso, novamente parabéns, continue praticando e se aprimorando. Caso tenha ficado com qualquer dúvida quanto ao que eu disse, por favor, não hesite em perguntar abaixo, tentarei ajudar da melhor forma possível.

  Marked as helpful

  1

  ---

  

  P

  Gillian Oliveira•260

  @lia-oliveiraPosted 4 months ago

  @R3ygoski achei suas colocações válidas. O header eu não coloquei título porque entendi que era apenas um texto de destaque genérico e que esse projeto seria apenas uma seção de algo maior. Os H1 nos cards eu coloquei porque entendi que eles pudessem ser compartilhados isoladamente, mas agora vejo que mesmo nesse caso, não caberia o uso do h1. A aplicação do BEM, me basei no vídeo do dpw (https://www.youtube.com/watch?v=rltjnLyjFZk). Vou consultar a documentação para melhorar. Obrigada pela análise detalhadada da minha solução! Vou fazer as alterações que você sugeriu.

  1
• 

  David Miguel Andrés•330

  @damigandPosted 4 months ago

  It's a very nice design, I feel like the CSS classes for each card could be simplified. You have four specific classes just for the color of the borders, and four other classes for the rest. I suggest removing these color classes and using the already existing ones: card--1, card--2, card--3 and card--4 for the borders instead.

  Marked as helpful

  1