Onde encontrar um curso gratuito de CSS Grid Curso Completo ?

Name: CSS Grid Curso Completo
Availability: InStock

Imagem do Curso gratuito CSS Grid Curso Completo

Curso online gratuitoCSS Grid Curso Completo

Duração do curso online: 1 horas e 15 minutos

Novo

Curso gratuito de CSS Grid para aprender layouts responsivos na prática, com fundamentos e exercícios para aplicar no Front-End.

Neste curso gratuito, aprenda sobre

Fundamentos e conceitos do CSS Grid
Definindo colunas, linhas e unidades do Grid
Posicionamento e responsividade com Grid
Recursos avançados de layout: sobreposição, áreas e auto-placement
Nomes de linha (track names) e organização do Grid
Projetos práticos com CSS Grid

Descrição do curso

CSS Grid Curso Completo por DPW é um curso online gratuito voltado para quem quer dominar a criação de layouts modernos, responsivos e bem estruturados no Front-End. Ideal para iniciantes e também para quem já trabalha com CSS e busca mais controle na organização de páginas, o curso apresenta os conceitos essenciais do Grid de forma progressiva, conectando teoria e prática para você aplicar no dia a dia.

Ao longo das aulas, você entende a terminologia do CSS Grid e como pensar em linhas, colunas e áreas para construir interfaces com mais previsibilidade. O conteúdo explora recursos fundamentais como repeat e minmax, a unidade fr, estratégias de alinhamento e distribuição de elementos, além de técnicas para ocupar espaços de maneira inteligente e criar composições complexas com facilidade.

Você também aprende a trabalhar com sobreposição de conteúdo, definição de áreas e ajustes automáticos de layout com auto-fill e auto-fit, ganhando flexibilidade para diferentes tamanhos de tela. O curso fecha com exercícios práticos de construção de layouts, consolidando o raciocínio necessário para transformar um design em uma grade funcional e escalável usando CSS Grid.

Conteúdo do curso

Aula em vídeo: Terminologia CSS Grid - Curso CSS Grid - Aula 1 02m
Exercício: Em CSS Grid, como é chamado o elemento que define o Grid e contém os itens?
Aula em vídeo: CSS Grid substitui Flexbox? - Curso CSS Grid - Aula 2 02m
Exercício: Qual é a diferença mais fundamental entre Flexbox e CSS Grid?
Aula em vídeo: Sua Primeira Grid - Curso CSS Grid - Aula 3 08m
Exercício: Qual propriedade define o espaçamento (gap) de forma abreviada entre linhas e colunas em um CSS Grid?

Aula em vídeo: repeat() e minmax() - Curso CSS Grid - Aula 4 03m
Exercício: Qual é a forma correta de definir 3 colunas de 200px usando a função repeat() no CSS Grid?
Aula em vídeo: A Nova Unidade CSS fr - Curso CSS Grid - Aula 5 02m
Exercício: No CSS Grid, qual é o efeito de definir colunas como 1fr 1fr 1fr em grid-template-columns?
Aula em vídeo: Alinhamento de Conteúdo - Curso CSS Grid - Aula 6 04m
Exercício: Qual combinação de propriedades centraliza totalmente o conteúdo dentro das células de um CSS Grid (nos dois eixos)?

Aula em vídeo: Ocupando Espaços com CSS Grid (parte 1) - Curso CSS Grid - Aula 7 03m
Exercício: No CSS Grid, ao usar a propriedade abreviada grid-column, o que significa o valor -1 no segundo parâmetro (ex.: grid-column: 2 / -1;)?
Aula em vídeo: Ocupando Espaços com CSS Grid (parte 2) - Curso CSS Grid - Aula 8 04m
Exercício: No CSS Grid, qual a diferença prática entre usar "1 / -1" e usar "2 / 5" em grid-column?
Aula em vídeo: Ocupando Espaços com CSS Grid (parte 3) - Curso CSS Grid - Aula 9 03m
Exercício: Ao adaptar um layout com CSS Grid para telas menores, qual mudança é mais adequada para empilhar os itens verticalmente (uma coluna)?

Aula em vídeo: Sobreposição de Conteúdo com CSS Grid - Curso CSS Grid - Aula 10 04m
Exercício: Qual é a forma simplificada de definir início e fim do posicionamento em linhas no CSS Grid?
Aula em vídeo: Áreas de Grid - Curso CSS Grid - Aula 11 07m
Exercício: Para montar um layout com áreas nomeadas no CSS Grid, qual combinação de propriedades é usada corretamente?
Aula em vídeo: auto-fill e auto-fit - Curso CSS Grid - Aula 12 02m

Aula em vídeo: Nomes de Linha em CSS Grid (parte 1) - Curso CSS Grid - Aula 13 04m
Exercício: Em CSS Grid, qual é a principal vantagem de usar nomes de linha (track names) na definição de colunas?
Aula em vídeo: Nomes de Linha em CSS Grid (parte 2) - Curso CSS Grid - Aula 14 04m
Exercício: Ao usar nomes de linhas (tracks) no CSS Grid, quando você define apenas grid-column-start com um nome terminado em start, o que acontece?

Aula em vídeo: CSS Grid na Prática - Layout 1 - Curso CSS Grid - Aula 15 04m
Exercício: No uso de grid-template-areas, qual é a função de colocar um . (ponto) em uma posição do template?
Aula em vídeo: CSS Grid na Prática - Layout 2 - Curso CSS Grid - Aula 16 07m
Aula em vídeo: CSS Grid na Prática - Layout 3 - Curso CSS Grid - Aula 17 05m
Exercício: Qual combinação de CSS define corretamente o contêiner principal como Grid com espaçamento entre os itens e limite de largura centralizado?

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á!

Este curso gratuito inclui:

1 horas e 15 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:.