Onde encontrar um curso gratuito de CSS Flexbox do básico ao avançado ?

Name: CSS Flexbox do básico ao avançado
Availability: InStock

Imagem do Curso gratuito CSS Flexbox do básico ao avançado

Curso online gratuitoCSS Flexbox do básico ao avançado

Duração do curso online: 3 horas e 24 minutos

Novo

Curso grátis de CSS Flexbox do básico ao avançado, com prática em layouts responsivos, menus, login e componentes usando HTML e CSS.

Neste curso gratuito, aprenda sobre

Fundamentos do Flexbox e alinhamento no eixo principal
Dimensionamento dos itens: flex-grow e flex-shrink
Direção, cartões na prática e comportamento de layout

Descrição do curso

Aprenda a dominar o CSS Flexbox do básico ao avançado com um curso online gratuito focado em prática e aplicação real no desenvolvimento front-end. Ideal para quem quer organizar layouts com mais controle, criar estruturas responsivas e ganhar velocidade na construção de interfaces modernas usando HTML e CSS.

Ao longo das aulas, você evolui do entendimento do display flex para o uso correto das principais propriedades de alinhamento e distribuição de espaço, ajustando comportamento dos itens em diferentes cenários de tela. O treinamento também aprofunda recursos essenciais para lidar com crescimento e redução de elementos, direção do fluxo e quebras de linha, ajudando a evitar gambiarras comuns em layout.

Além da base teórica, o curso conduz você na criação de componentes e páginas completas, como menu de navegação, interface de login e cartão de visita, fortalecendo seu portfólio e sua confiança para aplicar Flexbox em projetos reais. Uma ótima escolha para iniciantes e também para quem já programa e quer consolidar boas práticas de layout no dia a dia.

Conteúdo do curso

Aula em vídeo: Aula 01 - Como usar o display: flex de forma rápida e fácil 08m
Exercício: Qual é o efeito principal de aplicar display: flex no elemento contêiner (pai)?
Aula em vídeo: Aula 02 - como usar o justify-content do flex-box - Tutorial completo 09m
Exercício: Em um container com display: flex, qual valor de justify-content distribui os itens com espaçamento igual entre todos os vãos, incluindo as bordas do container?
Aula em vídeo: Aula 03 - Criando um menu do zero utilizando HTML e CSS com Flexbox - Tutorial Completo 30m
Exercício: Para centralizar uma imagem dentro de uma div usando Flexbox (horizontal e verticalmente), qual combinação de propriedades deve ser aplicada no contêiner?

Aula em vídeo: Aula 04 - Como usar CSS Flex-Grow, aprenda em 12 Minutos: Teoria e Prática 11m
Exercício: Ao definir flex-grow: 1 para três itens dentro de um container com display: flex, qual será o resultado na distribuição do espaço disponível?
Aula em vídeo: Aula 05 - Aplicação real de flex-grow em HTML CSS - flex-grow na prática! 08m
Exercício: Ao aplicar flex-grow: 3 no estado :hover de um item flex, qual o efeito esperado?
Aula em vídeo: Aula 06 - Como usar o align-items do flexbox 07m
Aula em vídeo: Aula 07 - Como criar uma interface de login com HTML e CSS usando flexbox 20m
Aula em vídeo: Aula 08 - Como usar o flex-shrink do flexbox 09m

Aula em vídeo: Aula 09 - Como usar o flex-direction do flexbox 10m
Exercício: Ao usar Flex Direction: column no container, qual propriedade passa a ser usada para centralizar os itens na horizontal?
Aula em vídeo: Aula 10 - Como criar um cartão de visita com HTML e CSS Flexbox - Guia para iniciantes - Parte 1 33m
Exercício: Ao mudar um container flex para flex-direction: column, qual propriedade passa a ser a mais adequada para centralizar os itens no eixo horizontal?
Aula em vídeo: Aula 11 - Como criar um cartão de visita com HTML e CSS Flexbox - Guia para iniciantes - Parte 2 24m
Exercício: Ao aplicar display: flex no elemento pai para colocar ícone e texto lado a lado, qual é a direção padrão do Flexbox quando flex-direction não é definida?
Aula em vídeo: Aula 12 - Aprenda como usar o FLEX-WRAP do flexbox de uma vez por todas! Tutorial simples e prático 06m
Exercício: Qual é o efeito de usar a propriedade CSS flex-wrap: wrap em um contêiner flex quando os itens não cabem na mesma linha?
Aula em vídeo: Aula 13 - Aprenda como usar o GAP do FLEXBOX de uma vez por todas! Tutorial rápido e direto 07m
Exercício: Ao usar `gap: calc(20px + 10%)` em um contêiner com `display: flex`, o valor em porcentagem (10%) é calculado com base em quê?
Aula em vídeo: Aula 14 - Entendendo de vez como usar a propriedade flex-flow do flexbox! 06m
Aula em vídeo: Aula 15 - Guia Completo: Como usar a propriedade Order do Flexbox 10m
Exercício: No Flexbox, como a propriedade CSS order define a posição dos itens?

Aprenda sobreCSS

Aprimore suas habilidades em web design com cursos gratuitos de CSS online! Domine estilos, layouts e animações para criar sites visualmente impressionantes. Inscreva-se já!

Cursos online Gratuitos sobre CSS Flexbox

Aprenda sobreCSS Flexbox

Aprenda CSS Flexbox em Programação Front-End com cursos online gratuitos. Domine layouts responsivos, alinhamento e distribuição de elementos, e boas práticas para criar interfaces modernas com eficiência.

Este curso gratuito inclui:

3 horas e 24 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

Mais cursos gratuitos em Programação Front-End

Curso GratuitoReact JS

(24)

1h22m

10 exercícios

Curso GratuitoProgramação para Web

(4)

14h37m

12 exercícios

Curso GratuitoAprenda HTML criando um clone da Netflix

(2)

4h16m

17 exercícios

Curso GratuitoHTML completo

(36)

4h18m

15 exercícios

Curso GratuitoCSS Flexbox no desenvolvimento de sites

(1)

1h18m

10 exercícios

Curso Gratuito Criação de loja virtual

(12)

20h31m

21 exercícios

Curso GratuitoJavascript completo

4.96

(84)

3h49m

24 exercícios

Curso GratuitoCriação de sites em Wordpress

4.95

(43)

6h44m

42 exercícios

Curso GratuitoHTML e CSS para iniciantes

4.92

(622)

4h31m

16 exercícios

Curso GratuitoJquery

4.92

(13)

9h19m

53 exercícios

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Capa do Ebook gratuito Curso completo de HTML, CSS e Javascript para se tornar um Desenvolvedor Front End

4.73

(11)

Capa do Ebook gratuito Como utilizar o Javascript no desenvolvimento de sites web

4.5

(4)

Capa do Ebook gratuito HTML + CSS para criação de sites incríveis

(2)

Capa do Ebook gratuito Curso completo de HTML

3.5

(2)

Capa do Ebook gratuito Curso completo de CSS

(1)

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

Cursos online 100% gratuitos do início ao fim

Milhares de cursos online em vídeo, ebooks e áudiobooks.
Mais de 60 mil exercícios gratuitos

Para testar seus conhecimentos no decorrer dos cursos online
Certificado Digital gratuito válido em todo o Brasil

Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.