Projeto de Aprendizado em Desenvolvimento Front-End

O que eu aprendi

Estruturação HTML com Tags Semânticas

• Utilização de tags semânticas como header, nav, ul, li, main, section e footer, para criar uma estrutura de HTML mais organizada e de fácil compreensão.

Conceitos de Box Model do CSS

• Diferença entre margin e padding.
• Como utilizar o Box Model para controlar espaçamentos e alinhamentos dos elementos na página.

Utilização da Ferramenta DevTools 🔧

• Conhecimento e prática com o DevTools dos navegadores.
• Visualização e ajuste do Box Model em tempo real.

Conceitos de Flexbox 📏

• Aplicação do Flexbox para criar layouts responsivos e flexíveis.
• Uso do DevTools para testar e ajustar o layout antes de implementar no código.

Acessibilidade e Refatoração

• Melhores práticas para tornar o site acessível a todos os usuários.
• Refatoração de código para melhorar a legibilidade e manutenção.

Estilização com CSS

• Adição de fontes e cores personalizadas de acordo com o layout do Figma.
• Especificidade de seletores e como aplicá-los corretamente.
• Estilização de botões e outros elementos interativos com propriedades CSS como background, cursor e border-radius.

Gradientes com CSS

• Criação de gradientes utilizando a função linear-gradient().
• Ferramentas para gerar e personalizar gradientes.

Ajustes Finais e Melhorias

• Correção de pequenos erros e refinamento do código.
• Aplicação de opacidade e outros ajustes visuais para melhorar a aparência final do projeto.

---

Este projeto foi uma excelente oportunidade para consolidar meu conhecimento em HTML, CSS e ferramentas de desenvolvimento, além de praticar a criação de layouts responsivos e acessíveis.