Do layout ao produto: 8 projetos, cada um focado em uma habilidade que faz diferença em interfaces reais.
Reúne os projetos de HTML e CSS que desenvolvi na formação Full Stack da Rocketseat. Cada projeto foi pensado para praticar uma habilidade específica de front-end, e todos são responsivos e estão publicados online — é só clicar em Ver online.
| Habilidade | O que eu pratiquei | Por que faz diferença em um produto digital |
|---|---|---|
| HTML semântico | Estrutura com as tags certas para cada conteúdo | Melhora acessibilidade, SEO e facilita a manutenção do código por outras pessoas |
| Flexbox | Alinhamento e distribuição de elementos em uma dimensão | Interfaces consistentes e componentes que se adaptam ao conteúdo |
| Grid | Layouts em duas dimensões (linhas e colunas) | Páginas complexas organizadas sem gambiarras e mais fiéis ao design |
| Formulários | Campos, labels, tipos de input e validação nativa | É onde o usuário converte (cadastro, matrícula, contato): formulário claro e acessível reduz abandono |
| Responsividade | Media queries e unidades relativas | Grande parte dos acessos vem do celular; a mesma experiência precisa funcionar em qualquer tela |
| Animações e transições | Transições, keyframes e feedback visual | Guiam a atenção, dão retorno às ações do usuário e aumentam a percepção de qualidade |
Layout de viagens construído com foco em estrutura e alinhamento.
Habilidades: HTML semântico · Flexbox 🔗 Ver online · 💻 Código
Página de notícias com hierarquia de conteúdo e organização em colunas.
Habilidades: HTML semântico · Grid 🔗 Ver online · 💻 Código
Página de portfólio pessoal combinando as técnicas de layout aprendidas até aqui.
Habilidades: Flexbox · Grid · Composição de layout 🔗 Ver online · 💻 Código
Formulário de matrícula com campos agrupados, labels e tipos de input adequados.
Habilidades: Formulários · Validação nativa · Acessibilidade 🔗 Ver online · 💻 Código
Formulário de convite com layout dividido entre imagem e formulário.
Habilidades: Formulários · Flexbox · Grid 🔗 Ver online · 💻 Código
Landing page que se adapta de desktop a mobile.
Habilidades: Responsividade · Media queries · Unidades relativas 🔗 Ver online · 💻 Código
Landing page com animações e transições que dão vida à interface.
Habilidades: Animações · Transições · Keyframes 🔗 Ver online · 💻 Código
Cada projeto está publicado no GitHub Pages (link em Ver online). Para rodar localmente:
git clone https://github.com/CarolRodrigues14/rocketseat-fullstack.git
cd rocketseat-fullstack/HTML-CSS/01-Travelgram
# abra o index.html no navegadorCada pasta tem seu próprio README com mais detalhes do projeto.
Caroline Rodrigues · Desenvolvedora Front-end Jr
Licença MIT