Skip to content
Submitted 5 months ago

Four card feature section - HTML, CSS

David França•100
@david-franca
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

O modo como ficou estilizado o grid do componente. Gostei da dinâmica e da responsividade. Ficou bastante fluido e conciso.

What challenges did you encounter, and how did you overcome them?

Foi dificil imaginar como colocar as coisas na ordem certa e depois colocar em outra ordem para a versão mobile. Eu não usei o mobile first por padrão dessa vez.

What specific areas of your project would you like help with?

Nada em particular.

Code

Please log in to post a comment

Log in

Community feedback

  • Bernardo Poggioni•7,030
    @R3ygoski

    Olá David, parabéns pela conclusão do projeto, ele está bem próximo do design proposto.

    Uma dica quanto ao seu HTML, ele está muito pouco semântico, tem alguns trechos que poderiam ser aprimorados a fim de ficarem mais semânticos, que são eles:

    • div.header poderia ser alterada para uma tag <header> devido a ser a introdução da página.
    • span.header__subtitle e span.header__title poderiam ser colocados juntos dentro de uma tag <h1> e daí poderia ser feita a quebra de linha através de um <br/> ou usando o próprio CSS mesmo. Esse trecho é o título principal da página.
    • div.cards poderia ser alterada para <section> pois ela engloba vários elementos tematicamente semelhantes, no caso, os cards.
    • div.card poderia ser uma <article> devido a ser um elemento autocontido, ou seja, com significado próprio.
    • span.card__title poderia ser alterada para uma <h2>.
    • span.card__description poderia ser alterada para uma <p>.

    E uma outra dica, ícones não recebem alt descritivo, quando você tem ícones e imagens que não tem importância, como uma imagem de background, você passa um alt dessa forma: alt="".

    E é isso, novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

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