Coloque em prática o alinhamento no CSS Grid Layout! Nesta aula "Mão na Massa Parte 2" do curso de HTML5 e CSS3, Gustavo Guanabara aplica as propriedades align-items, justify-items, align-content e justify-content vistas na teoria. Acompanhe a configuração passo a passo, testando valores como start, center, end, stretch, space-between, space-evenly e space-around diretamente no código e visualizando os resultados no navegador com a ajuda do Grid View do Chrome DevTools.
Assuntos Abordados (Capítulos):
00:00 - Mão na Massa Parte 2 - Aplicando Alinhamentos.
00:29 - Aplicando as 4 propriedades de alinhamento da aula anterior.
02:12 - Ambiente Pronto: Reutilizando o código da Parte 1.
02:38 - Revisão Rápida: Grid View e o painel de alinhamento do DevTools.
03:26 - Importante: O painel DevTools é para teste, não aplica o código.
04:12 - Relembrando: A mudança de grid-gap para gap.
04:39 - Propriedades Padrão: normal vs stretch nos alinhamentos.
05:39 - align-items na Prática: Testando start, end e center verticalmente.
07:44 - justify-items na Prática: Testando start, end e center horizontalmente.
08:08 - Alinhamento de content: Aplicando no conteúdo geral da grade.
08:15 - align-content na Prática: start, end e center (vertical).
09:32 - align-content + Space: Testando space-between, evenly e around.
11:38 - justify-content na Prática: start, end e center (horizontal).
11:43 - justify-content + Space: Testando space-between, evenly e around.
13:06 - Finalidade do Painel DevTools: Testar e descobrir a melhor configuração.
14:36 - Compatibilidade do Grid View: Chrome, Edge, Safari, Firefox.
16:11 - Próximo Passo: Simplificando as propriedades de alinhamento.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A06