O que você aprenderá_

Construa um projeto responsivo praticando com Flexbox e Grid, com base no mobile-first
Calcule a largura das colunas e altura das linhas de um Grid Layout
Entenda alteração de eixos com Flexbox
Desenhe templates por meio das áreas do Grid
Crie alinhamentos e espaçamentos com Flexbox e Grid

Público alvo_

Pessoas que já possuem uma base de HTML5 e CSS3; pessoas que buscam praticar a responsividade com base no mobile-first; pessoas que gostariam de praticar a criação de layouts com Grid; pessoas que gostariam de praticar a organização de elementos com Flexbox.

Beatriz Moura

Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.

Luan Alves

Sou Luan Alves, estudante de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)

Curso atualizado em 25/09/2024

Já estuda na Alura?

Comece o curso agora

Ementa

Hello Flex!
- Combo do Flex
- Alinhando eixos
- Container x Item
Play no Grid
- Display: Grid
- Grid Lines
- Trocando a posição dos Grid Items
Mais do Flex
- Alterando eixos
- Distribuindo colunas com Flex
- Estilizando elementos na div
- Preparando para o desafio
Mergulhando no Grid
- A largura das colunas
- Desenhando um template
- Grid Area
- Fr, repeat() e altura das linhas
Alinhando Grid e Flex items
- Alinhamento no Grid
- Alinhamento no Flex

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