Curso HTML5 e CSS3.- Módulo 5 de 5 - Desafio: Criando um Layout de Site com CSS Grid - @CursoemVideo HTML5 + CSS3

Desafio aceito e resolvido! Neste vídeo "Mão na Massa", Gustavo Guanabara resolve o desafio de criar uma interface de site completa utilizando CSS Grid. Acompanhe o processo desde o planejamento no papel, mapeando cada área (header, nav, main, aside, footer), até a codificação com HTML semântico e CSS. Aprenda a usar a propriedade grid-area para posicionar cada elemento e, como um bônus, descubra como usar a unidade fr para criar um layout flexível que ocupa 100% da tela e se adapta ao tamanho do navegador. Assuntos Abordados (Capítulos): 00:00 - Início da resolução do primeiro desafio de Grid Layout. 02:28 - Análise e otimização da grade proposta no desafio. 03:50 - Planejamento Visual: Mapeando as coordenadas de cada área no grid. 05:25 - Planejamento Alternativo: Usando valores negativos e span. 07:29 - Mão na Massa: Configurando a estrutura de pastas e arquivos. 10:24 - Estrutura HTML: Utilizando tags semânticas (header, nav, main, etc.). 11:44 - Estilização Inicial: Configurações gerais da classe .caixa e do .container. 12:25 - Posicionamento dos Itens: Utilizando a propriedade grid-area. 14:40 - O Upgrade: Tornando o layout flexível e de tela cheia. 15:32 - Usando a unidade fr para criar linhas e colunas flexíveis. 16:21 - Resultado Final: Um layout que se adapta ao tamanho da tela. 17:43 - Teaser: Próximo desafio e um jogo para aprender 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 #C28A13