Curso HTML5 e CSS3.- Módulo 5 de 5 - Mão na Massa: Posicionando Itens no Grid Layout) - @CursoemVideo HTML5 + CSS3

Chegou a hora de botar a mão na massa! Neste exercício prático, Gustavo Guanabara demonstra passo a passo como construir um layout complexo com CSS Grid, transformando itens individuais em áreas maiores. Acompanhe a criação de um projeto do zero, aplicando as propriedades grid-row-start, grid-row-end, grid-column-start e grid-column-end para posicionar cada elemento exatamente onde você quiser na grade. Aprenda também a usar números negativos para se referir às linhas e colunas, além de outras dicas para dominar o posicionamento no Grid Layout. Assuntos abordados nesse vídeo: 00:00 - Mão na Massa: Construindo áreas com Grid Layout na prática. 00:52 - Revisão: Propriedades para contêiner e para itens do grid. 03:23 - Começando o Exercício: Abrindo o projeto e criando os arquivos (grid04). 04:13 - Código HTML: Criando a estrutura com div.container e 3 caixas internas. 05:24 - CSS Inicial: Configurando a classe .container com display: grid. 05:41 - Definindo a Grade: Usando grid-template-rows e grid-template-columns. 06:58 - Posicionando a caixa1 com grid-row-start/end e column-start/end. 08:10 - Configurando a caixa2: Posicionamento na grade. 09:16 - Configurando a caixa3: Finalizando o layout principal. 10:01 - Dica Prática: Usando números negativos (ex: -1) para posicionamento. 11:28 - Ajuste Fino: Adicionando espaçamento visual com a propriedade gap. 11:58 - Conselho de Ouro: Não chute valores, use o inspetor de grid do navegador. 14:14 - Desafio: Crie e pratique com seus próprios layouts para evoluir. 14:46 - Próxima Aula: Simplificando as propriedades de posicionamento. 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 #C28A11