Simplifique seu código e domine o posicionamento dos itens no CSS Grid! Nesta aula, Gustavo Guanabara apresenta as propriedades shorthand grid-row, grid-column e grid-area, que permitem definir a posição e o tamanho dos elementos com muito menos código. Aprenda também a usar a palavra-chave span para expandir itens por múltiplas linhas ou colunas. Acompanhe a aplicação prática desses conceitos, refatorando um exercício anterior, e prepare-se para um desafio: construir a interface de um site usando tudo o que aprendeu!
Assuntos Abordados (Capítulos):
00:00 - Introdução: Simplificando propriedades de itens do grid.
01:53 - Revisão: Propriedades start e end para itens.
02:39 - Foco da Aula: span, grid-row, grid-column e grid-area.
04:40 - Teoria: Como definir áreas com pontos de início e fim.
08:26 - Conceito de Expansão: Usando a palavra-chave span.
10:49 - Simplificação Nível 1: grid-row para unir start e end.
11:47 - Simplificação Nível 1: grid-column para unir start e end.
13:14 - Mão na Massa: Refatorando o código com grid-row e grid-column.
15:55 - Mão na Massa: Aplicando span nas propriedades simplificadas.
17:13 - Simplificação Máxima: A propriedade grid-area.
18:53 - Mão na Massa: Refatorando o código com grid-area.
21:21 - Aplicando span com a propriedade grid-area.
22:07 - Resumo Gráfico: As 3 formas de declarar a posição de um item.
23:41 - DESAFIO: Monte a interface de um site com Grid Layout!
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 #C28A12