Summary
Keywords
Full Transcript
#menuLateral #menuSidebar #menuDashbord #Css3 #Html5 📚 Muito Obrigado por Assistir! 00:00 | INTRODUÇÃO Neste tópico, você receberá uma breve apresentação sobre o que será abordado no tutorial e as habilidades que você desenvolverá. 00:50 | CRIANDO NAV PARA MENU COM UL E LI Aqui, você aprenderá a estrutura básica de um menu de navegação em HTML usando as tags ul e li. 02:00 | COMO CRIAR UMA TAG A NO MENU Neste tópico, você descobrirá como adicionar um link a cada item de menu usando a tag a e como adicionar uma âncora em HTML. 04:14 | COMO CRIAR ÍCONES COM FONT AWESOME PARA MENU SIDEBAR Neste tópico, você aprenderá como usar a biblioteca de ícones Font Awesome para adicionar ícones ao seu menu. 05:20 | ZERANDO AS MARGENS E OS ESPAÇAMENTOS NO CSS Aqui, você aprenderá como remover as margens e os espaçamentos padrão do navegador em seu documento HTML usando CSS. 06:15 | COMO CRIAR MENU LATERAL FIXO Neste tópico, você aprenderá a criar um menu lateral fixo para melhorar a experiência do usuário. 09:20 | COMO DIFERENCIAR A COR DA LISTA Aqui, você aprenderá a estilizar as cores de fundo do seu menu e como diferenciar a cor do item de menu ativo. 10:05 | COMO CRIAR EFEITO HOVER NO MENU Neste tópico, você aprenderá como adicionar um efeito hover a cada item de menu para melhorar a interatividade do usuário. 11:02 | ESTILIZANDO A FONT AWESOME Aqui, você aprenderá a estilizar os ícones Font Awesome adicionados ao seu menu. 11:30 | ESCONDENDO O MENU Neste tópico, você aprenderá a criar um botão de menu responsivo e a ocultar o menu em dispositivos móveis. 12:46 | EXPANDINDO O MENU COM EFEITO HOVER Aqui, você aprenderá a adicionar um efeito hover ao botão de menu para expandir o menu em dispositivos móveis. 13:25 | COMO CRIAR UM EFEITO PARALLAX Neste tópico, você aprenderá a criar um efeito de paralaxe usando CSS e JavaScript para dar ao seu site um aspecto mais dinâmico e interativo. SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve Os Mais Vendidos na Amazon em Computadores e Informática: https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: https://amzn.to/39whbU9 Notebook: https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas 🎵 Música: Large Smile Mood - Nico Staf ✨IDE: ( Integrated Development Environment )Microsoft Visual Studio. ✨IDE: ( Integrated Development Environment ) Visual Studio Code. EXTENSÕES VISUAL STUDIO CODE: LIVE SERVER: Carrega a página automaticamente. BEAUTIFY : Padroniza a formatação do código COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css. INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código. ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 🔎https://fontawesome.com/ Ambiente de Desenvolvimento: codepen.io HTML E CSS: 🔎https://www.w3schools.com/default.asp Tabelas de cores: 🔎https://www.flextool.com.br/tabela_cores.html Imagem para baixar: 🔎https://pixabay.com/pt/ Site para criar Thumbnails: 🔎https://www.canva.com/ ********************************************** TELA FINAL DO VÍDEO: Saiba Mais: Canal do Savio Ferraz - Animações feitas por @Savio Ferraz *************************************************
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
