Landing Page Moderna com CSS Grid, Flexbox e Animações
- Nível: Projetos
- Módulos: 6
- Aulas: 24
- Tempo de leitura: 6h 28min
- Tecnologias: HTML, CSS, JavaScript
- Preço: R$ 47,00
Código do curso: github.com/johnpires/landing-page-css-grid-flexbox
Uma landing page bem construída pode ser a diferença entre um cliente conquistado e uma oportunidade perdida. Neste curso prático, você vai construir do zero uma Landing Page moderna e profissional, utilizando as técnicas de CSS mais requisitadas no mercado: CSS Grid, Flexbox e Animações CSS.
Você vai aprender a estruturar layouts complexos e responsivos com CSS Grid, criar componentes flexíveis com Flexbox, adicionar animações e transições que tornam a experiência do usuário memorável, e garantir que tudo funcione perfeitamente em qualquer dispositivo — do celular ao desktop.
O projeto final é uma landing page completa para um produto fictício de SaaS, com Hero Section, Features, Pricing Cards, Testimonials e Footer profissional. Todo o código escrito na mão — apenas HTML semântico, CSS puro e JavaScript vanilla. Deploy no GitHub Pages incluído.
O que você vai aprender
Ao final deste curso, você será capaz de:
- Dominar CSS Grid para criar layouts complexos e responsivos
- Usar Flexbox para alinhar e distribuir elementos com precisão
- Criar animações CSS profissionais com transitions e keyframes
- Construir uma landing page completa do zero com HTML e CSS puros
- Implementar menu hamburger responsivo com JavaScript vanilla
- Tornar qualquer layout 100% responsivo com media queries
- Fazer deploy gratuito de sites estáticos no GitHub Pages
Pré-requisitos
Conhecimento básico de HTML (tags, estrutura de página). Noções básicas de CSS (seletores, propriedades, box model). Editor de código instalado (VS Code recomendado). Navegador moderno (Chrome ou Firefox).
Conteúdo do curso
Módulo 1: Introdução e Setup do Projeto
- O que vamos construir: visão geral da landing page (8 min)
- Configurando o ambiente de desenvolvimento (10 min)
- Estrutura de pastas e arquivos do projeto (12 min)
Módulo 2: CSS Grid: Do Zero ao Layout Profissional
- Fundamentos do CSS Grid: containers, linhas e colunas (18 min)
- Posicionamento com grid-column e grid-row (16 min)
- Grid Areas: nomeando e organizando secoes (15 min)
- Grid responsivo com auto-fill, auto-fit e minmax (17 min)
Módulo 3: Flexbox: Alinhamento e Distribuição Perfeitos
- Revisando Flexbox: eixo principal e transversal (14 min)
- Navbar responsiva com Flexbox (20 min)
- Cards e componentes com Flexbox (16 min)
- Combinando CSS Grid e Flexbox no mesmo projeto (14 min)
Módulo 4: Construindo as Seções da Landing Page
- Hero Section: background, overlay e call-to-action (22 min)
- Features Section: cards com icones e grid responsivo (18 min)
- Pricing Section: planos e destaque visual (20 min)
- Testimonials: depoimentos com carrossel CSS (18 min)
- Footer completo: links, newsletter e redes sociais (16 min)
Módulo 5: Animações e Interatividade com CSS e JavaScript
- CSS Transitions: hover effects e micro-interacoes (16 min)
- CSS Keyframe Animations: entrada de elementos (18 min)
- Scroll animations com Intersection Observer API (20 min)
- Menu hamburger responsivo com JavaScript vanilla (18 min)
Módulo 6: Responsividade Total e Deploy no GitHub Pages
- Mobile-first: estrategia e media queries (18 min)
- Imagens responsivas e otimizacao de performance (14 min)
- Deploy no GitHub Pages: do repositorio ao ar livre (20 min)
- Proximos passos: o que aprender depois (10 min)