Aprenda na prática os fundamentos do CSS Grid Layout! Nesta aula do curso de HTML5 e CSS3, Gustavo Guanabara guia você na criação da sua primeira grade (grid), explicando propriedades essenciais como display: grid, grid-template-columns, grid-template-rows e gap. Descubra também como usar a ferramenta Grid View do Google Chrome DevTools para visualizar e entender melhor a estrutura do seu grid. Essencial para quem quer dominar layouts modernos na web!

Assuntos Abordados (Capítulos):
00:00 - Introdução ao Grid Layout: Mão na massa!
00:42 - Pré-requisitos: Aulas anteriores sobre Grid Layout são essenciais.
01:30 - Apresentando o Grid View: Ferramenta poderosa do Google Chrome.
03:06 - Preparando o Ambiente: GitHub Desktop e VS Code.
03:36 - Estrutura do Projeto: Criando pastas e arquivo HTML.
04:12 - HTML Básico: Criando o contêiner e os itens com divs.
04:40 - Dica de VS Code: Criando divs com classes rapidamente (Emmet).
05:34 - CSS Básico: Estilizando o contêiner e os itens com bordas.
06:32 - Aplicando display: grid: O primeiro passo essencial (e frustrante?).
07:51 - Configurações Iniciais: Definindo altura e padding.
08:51 - grid-template-columns: Definindo as colunas da grade.
09:48 - grid-template-rows: Definindo as linhas da grade.
10:32 - grid-gap vs gap: Atenção à propriedade atualizada para espaçamento!
11:55 - Usando o Grid View na Prática: Inspecionando o grid no DevTools.
13:24 - Ativando o Grid Overlay: Visualizando linhas e colunas numeradas.
14:37 - Painel de Layout no DevTools: Explorando opções de alinhamento (prévia).
15:11 - Entendendo as Linhas de Grade: Positivas e negativas no Grid View.
15:34 - Ajustando o gap: Modificando o espaçamento entre os itens.
17:18 - Recado Final: Próximos passos e a importância do Grid View.

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 #C28A04