Curso
CSS: Flexbox
Neste curso ensinaremos uma técnica super importante do CSS conhecida como Flexbox, essencial para criar layouts modernos e responsivos de páginas web. Você aprenderá como utilizar o Flexbox para alinhar elementos, distribuir espaçamento e criar layouts fluidos que se adaptam às mudanças de resolução de tela (desktop e mobile). Ao longo deste curso você irá adquirir conhecimento sobre as principais propriedades relacionadas ao Flexbox, como display: flex, flex-direction, justify-content, align-items, flex-wrap, e flex-basis, e como usá-las de maneira estratégica para criar designs para diferentes tipos de dispositivos.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
13 horas
Curso de CSS (10 aulas)
Aula 1 - Introdução
O próximo passo no seu aprendizado do CSS é entender o CSS Flexbox. Este curso visa ensinar as principais propriedades e técnicas do Flexbox para a criação de páginas web com layouts flexíveis e modernos.
Aula 2 - CSS Flexbox
Nesta aula conheceremos o que é o CSS Flexbox e como podemos utilizá-lo para posicionar de forma simples os elementos de uma página.
Aula 3 - display: flex e flex-direction
O display: flex é a forma mais simples de uso da técnica Flexbox. Veremos também uma revisão dos conceitos já aprendidos em cursos anteriores sobre o uso da propriedade display. Nesta aula conheceremos as primeiras propriedades do Flexbox e como elas podem definir o posicionamento de elementos.
Aula 4 - flex-wrap e flex-flow
Nesta aula conheceremos mais duas propriedades do Flexbox, o flex-wrap e o flex-flow. Veremos também como essas propriedades podem ser utilizadas para gerar quebras de linha e definir o posicionamento de elementos HTML.
Aula 5 - justify-content
Na técnica Flexbox, o uso do justify-content é a principal forma de definir o alinhamento e o espaçamento entre os elementos de um container. Nesta aula o conheceremos e como ela pode ser utilizada para definir espaços e posicionamento de elementos HTML.
Aula 6 - align-items
Com align-items podemos centralizar os cards no container. Ou então posicioná-los no topo ou no rodapé da seção em que estão contidos. Podemos também utilizar o valor stretch para fazer com que os cards ocupem toda a área disponível.
Aula 7 - Propriedades dos elementos filhos
Nesta aula conheceremos mais quatro propriedades do Flexbox, o flex-grow, o flex-shrink, o flex-basis e o flex. Veremos como elas podem ser utilizadas para definir o tamanho e proporção dos elementos filhos de um container.
Aula 8 - Primeiro exemplo prático
Nesta aula colocaremos em prática todo o conhecimento adquirido até aqui sobre a ferramenta Flexbox. Veremos o primeiro exemplo prático em que utilizamos os conceitos e propriedades do Flexbox para posicionar elementos. Neste exemplo posicionaremos os cards de uma página de cursos.
Aula 9 - Segundo exemplo prático
Nesta aula veremos o segundo exemplo prático em que utilizamos o Flexbox para posicionar elementos. Nesta aula posicionaremos cards de um site de lanchonete.
Aula 10 - Terceiro exemplo prático
Nesta aula veremos o terceiro exemplo prático em que utilizamos o Flexbox para posicionar elementos. Nesta aula posicionaremos o topo de um site de hospedagem.
Veja outros cursos de HTML e CSS
HTML: span, iframe e comentários
HTML: Fundamentos
CSS: Position relative e absolute