Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
CSS Grid Layout na prática (parte 2) - @CursoemVideo HTML5 + CSS3
Play lesson

Curso HTML5 e CSS3.- Módulo 5 de 5 - CSS Grid Layout na prática (parte 2) - @CursoemVideo HTML5 + CSS3

4.0 (1)
26 learners

What you'll learn

This course includes

  • 13.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere