Este é um projeto baseado no desafio Recipe Page do Frontend Mentor. O objetivo foi transformar um design estático em uma página responsiva, acessível e fiel ao layout proposto.
- HTML5 semântico
- CSS3 com variáveis (
custom properties) - Flexbox
- Design responsivo (mobile-first)
- Acessibilidade com
aria-label
Praticar a criação de uma página estática com foco em tipografia, uso correto de espaçamento e cores, além de consolidar conhecimentos em responsividade e organização de código com CSS moderno.
Durante o desenvolvimento desse projeto, aprendi e reforcei conhecimentos como:
- Como aplicar
aria-labelpara melhorar acessibilidade - Como aplicar estilos consistentes com variáveis CSS
- A importância da hierarquia tipográfica no design de interfaces
- Responsividade baseada em
max-widthe organização com Flexbox - Uso de
<hr>para separar seções com estilo visual personalizado - Como entregar um projeto limpo e acessível com HTML bem estruturado
- Guia do Flexbox - CSS Tricks
- MDN Web Docs - Acessibilidade com ARIA
- Guia de Semântica HTML - MDN
- Guia de Acessibilidade com HTML - W3C
- GitHub: @marianaararipe
- Frontend Mentor: @marianaararipe