Projetos

Diferente de um clone focado apenas em estética, este projeto prioriza a acessibilidade (A11y) e o SEO, utilizando os elementos do HTML5 para comunicar claramente o significado do conteúdo tanto para navegadores quanto para tecnologias assistivas.

Stack Tecnológica:

• Estrutura: HTML5 Semântico.

• Estilização: CSS3 (Mobile First).

• Versionamento: Git & GitHub Pages para deploy.

Desafios e Aprendizados Técnicos

A Precisão da semântica além do visual Em vez de utilizar divisões genéricas (<div>), o foco foi aplicar elementos como <main>, <section>, <article> e <nav> de forma estratégica. Esse processo reforça o aprendizado sobre a semântica e como seu bom uso influencia os motores de busca e leitores de tela , sendo o primeiro passo para uma web mais inclusiva e otimizada para SEO.

Hierarquia de Informação e Acessibilidade Um ponto de atenção é o uso correto dos níveis de cabeçalho (<h1> a <h6>). Em um clone de loja de aplicativos, existem múltiplas seções similares (como "Recomendados" ou "Mais Populares"). Organizar essas seções de forma que a navegação via teclado ou leitor de tela faça sentido exge um planejamento cuidadoso da árvore do DOM. E demonstra que uma boa estrutura HTML reduz drasticamente a necessidade de correções complexas via ARIA roles no futuro.

Desconstruindo Componentes de Interface Replicar componentes conhecidos, como as "cards" de aplicativos e as listas de categorias, permite uma análise profunda de padrões de interface (UI Patterns). O aprendizado aqui é entender como agrupar informações relacionadas dentro de um <article>, garantindo que cada unidade de conteúdo seja independente e autoexplicativa. Essa prática é essencial para o desenvolvimento de componentes reutilizáveis em frameworks modernos, mantendo a integridade do código fonte.