Summary
Keywords
Full Transcript
Aprenda a implementar o modo claro e modo escuro no seu portfólio usando HTML, CSS e JavaScript. Veja como salvar o estado do tema, aplicar variáveis, criar transições suaves e ajustar o layout para telas grandes e pequenas. Uma aula essencial para finalizar seu projeto com profissionalismo. 00:00 – Introdução ao modo claro e escuro 00:36 – Revisão das etapas anteriores do portfólio 00:49 – Preparação para o tema claro/escuro 01:10 – Como manter o estado do tema no navegador 01:32 – Intervalo com patrocinador 02:23 – Retorno e revisão do layout responsivo 02:42 – Identificando o problema do botão de tema 03:08 – Ajuste do HTML e classe “link” 03:29 – Analisando o JavaScript do botão de tema 03:57 – Estrutura do menu no JavaScript 04:57 – Criando as constantes: botão e body 05:18 – Criando o body.dark no CSS 06:02 – Configurando variáveis de cor para modo escuro 06:31 – Testando o tema escuro diretamente no HTML 06:49 – Alternando modo claro/escuro via JavaScript 07:09 – Salvando o tema no localStorage 07:28 – Persistência do tema ao carregar o site 07:45 – Explicando a função que alterna o tema 08:28 – Testando o estilo e corrigindo classes 08:51 – Criando transições suaves entre os temas 09:10 – Testando transição no layout 09:30 – Ajustando cores pelas variáveis globais 10:03 – Como personalizar totalmente as cores 10:27 – Salvando no GitHub Desktop 10:46 – Projetos disponíveis no GitHub Pages 11:04 – Convite para seguir nas redes 11:27 – Finalização do projeto 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 #C29A13
