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

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