Summary
Keywords
Full Transcript
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
