O que você aprenderá_

Compreenda a estrutura e organização de um projeto web.
Aplique técnicas de HTML semântico para criar layouts acessíveis.
Implemente regras de responsividade utilizando CSS avançado e media queries.
Utilize Flexbox e CSS Grid para desenvolver interfaces flexíveis.
Gerencie versões e atualize o código com Git e GitHub.
Otimize imagens e meta tags para melhorar a performance e o SEO do site.

Público alvo_

Este curso destina-se a pessoas interessadas em aprimorar suas habilidades na criação de websites modernos, responsivos e otimizados. Com abordagens práticas e exemplos reais, será possível aplicar técnicas de HTML semântico, CSS avançado, Flexbox, CSS Grid e versionamento com Git, promovendo interfaces dinâmicas e escaláveis para diferentes dispositivos.

Daniele Ligieri Castilho

Oi, eu sou a Dani Castilho! Trabalho com tecnologia há 14 anos e comecei minha jornada como QA. Aos poucos, fui me aventurando no front-end, com muito estudo e a ajuda de amigos e mentores, até chegar a sênior na Easynvest. Lá, participei de projetos desafiadores e ajudei a elevar o nível da empresa, que depois foi adquirida pelo Nu. Hoje, lidero dois times críticos como Gerente de Engenharia na Nike Brasil.

Curso atualizado em 29/09/2025

Já estuda na Alura?

Comece o curso agora

Ementa

Entendendo o projeto e configurando o ambiente
- Apresentação
- Preparando o ambiente
- Apresentando o projeto Jornada Viagens
- Primeiras configurações
- Adaptando a interface do Cinetopia para diferentes dispositivos
- Para saber mais: sincronização entre repositórios no git
- Faça como eu fiz: setup e estrutura inicial
- O que aprendemos?
Aplicando mobile first, flexbox e boas práticas
- Configurações globais de CSS: cores
- Configurações globais de CSS: fontes
- Otimizando a paleta de cores para o Buscante
- Instalando e configurando o Prettier
- Entendendo unidades de medidas no CSS
- Entendendo media queries
- Conceito de mobile first aplicado ao header
- Estilos do header e separação de arquivos CSS
- Alinhando o header automaticamente
- Aprofundando em Flexbox
- Abrindo e fechando o menu com HTML e CSS
- Ajustando exibição da lista do menu
- Ajustando a altura dos itens da lista
- Estilizando o menu para tablet
- Para saber mais: position absolute no css
- Estilizando o menu para desktop
- Faça como eu fiz: header responsivo
- O que aprendemos?
Criando layouts responsivos com imagens
- Utilizado imagens responsivas no mobile
- Modificando imagens para tablet e desktop
- Garantindo a qualidade visual em diferentes resoluções
- Para saber mais: otimização para displays retina
- Adicionando estilo ao texto de apresentação
- Faça como eu fiz: criar seção hero
- O que aprendemos?
Avançando em técnicas de responsividade e componentização
- Reaproveitando código CSS com componentização
- Criando a estrutura do componente card de oferta
- Finalizando a estrutura do componente de card e botão
- Replicando os cards e adicionando background image
- Organizando cards para cada dispositivo
- Desafio da seção de busca por categoria
- Adaptando a interface do usuário para diferentes dispositivos na Screen Match
- Solução do desafio da seção busca por categoria
- Criando estrutura de destinos populares
- Desafio estilizando seção de destinos populares
- Para saber mais: refatoração global de css
- Solução do desafio e melhorias de estilo global
- Faça como eu fiz: seções do site
- O que aprendemos?
Aplicando técnicas de CSS Grid
- Criando imagem ou div com background
- Estilizando com CSS Grid
- CSS Grid: propriedades de container e itens
- Explorando mais do CSS Grid
- Implementando CSS Grid no SwiftBank
- Combinando técnicas de Flexbox e Grid
- Para saber mais: uso da função repeat no css grid
- Corrigindo oficialmente seus primeiros bugs
- Faça como eu fiz: layout pagamentos
- O que aprendemos?
SEO e acessibilidade na prática
- Usando caracteres unicode como ícones
- Desafio do footer
- Solução do desafio e melhorias de acessibilidade
- Para saber mais: uso do gap em flexbox
- Otimizando a exibição de produtos no UseDev
- Fazendo otimizações de SEO
- Faça como eu fiz: estrutura do site
- O que aprendemos?
Desafio avançando o projeto
- Desafio página "Pacotes de Viagens"
- Para saber mais: modularização de estilos com classes específicas
- Solução do desafio página "Pacotes de viagem"
- Otimizando respostas de consultas culinárias
- Faça como eu fiz: página de pacotes
- Versão final do projeto
- Conclusão
- O que aprendemos?

Descubra se esse curso é pra você! Leia as primeiras aulas

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos

Escola

Front-end

Desenvolva experiências web incríveis com HTML, CSS e JavaScript, além de se aprofundar nos principais frameworks do mercado, como React, Angular e Vue.JS. Domine JavaScript a fundo, para não depender de copiar e colar.

Conheça a escola