Desafio das 3 colunas - Frontend Mentor

Esta é uma solução para o 3-column preview card component challenge on Frontend Mentor. Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação ao construir projetos realistas. 🤓

Índice

• Visão geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Construído com
  • O que aprendi
  • Desenvolvimento continuado
  • Recursos úteis
• Autor
• Agradecimentos

Visão_geral

O_desafio

Os usuários devem ser capazes de:

• Ver o layout ideal, dependendo do tamanho da tela do dispositivo
• Ver estados de foco para elementos interativos

Captura_de_tela

Links

• Solução URL: Github
• Site ao vivo URL: Github Pages

Meu_processo

Construído_com

• HTML5
• CSS custom properties
• Flexbox
• CSS Grid

Tudo feito na mão 🙃

O_que_aprendi

Este foi o primeiro desafio que fiz pelo Frontend Mentor. Foi divertido recriar o projeto por conta própria e depois comparar meu resultado com o dos outros. Mesmo não aprendendo nada de novo, aprofundei um pouco meu conhecimento no HTML e CSS, especialmente o uso do Flexbox.

Desenvolvimento_continuado

Gosto da ideia de aprofundar ainda mais meu conhecimento do Flexbox. É uma ferramenta muito ponderosa que muitas pessoas nao sabem utilizar de forma correta. Ainda há recursos que podem ser melhorados e acho que dá para modificar o projeto em alguns aspectos.

Esta é a segunda versão, mas o primeiro esboço não ficou muito diferente deste. O maior desafio foi manter os butoes “learn more” alinhados ao redimensionar as extremidades.

Recursos_úteis

• Origamid – A Origamid tem um guia bem completo sobre Flexbox no site deles que eu recomendo muito para aqueles que não dominam o inglês.

Autor

• Website - Meu site
• Frontend Mentor - @samuelfuchs
• Instagram - @isamuelfuchs

Agradecimentos

Por fim, agradeço a toda equipe do Frontend Mentor. Conheci este site através de um dos cursos deles no Udemy (em inglês).