Summary
Keywords
Full Transcript
#LayoutResponsive #FrontEnd #Css3 #Html5 📚 Muito Obrigado por Assistir! SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve ✨Link da Amazon: https://www.amazon.com.br/?&_encoding=UTF8&tag=webonlinedese-20&linkCode=ur2&linkId=a68116d5cabc4dafc8fdf73d84a56689&camp=1789&creative=9325 "Quer aprender a adicionar links externos ao seu site usando HTML e CSS? Este tutorial é perfeito para você! Neste vídeo, vamos mostrar passo a passo como criar links externos que direcionam os usuários para outros sites. Vamos começar explicando o básico do elemento 'a'' do HTML e como usá-lo para criar links. Em seguida, termos o CSS para estilizar o link e torná-los mais atraentes e visualmente agradáveis. Você aprenderá como adicionar cores, alterar fontes e aplicar efeitos de hover para dar vida aos seu link. Além disso, abordaremos algumas melhores práticas ao criar links externos, incluindo como configurar corretamente os atributos target e rel para garantir uma experiência de usuário segura e consistente. Vamos começar criando uma estrutura básica usando a tag 'div' como container e 'a' como a tag de link. Usaremos o atributo target="_blank" para garantir que o link externo seja aberto em uma nova aba. Em seguida, temos o CSS para estilizar nosso botão. Usaremos uma classe chamada 'botao' para aplicar estilos como display: inline-block, padding, background-color, color, font-size, font-weight: bold, text-decoration, text-transform: uppercase, border-radius, box-shadow e transition para adicionar uma aparência moderna e interativa ao nosso botão. Além disso, vamos criar um efeito de hover para o botão, onde a opacidade será reduzida para 0.8 e adicionaremos um suave efeito de sombra, proporcionando uma experiência visual agradável aos usuários. 🎵 Música: Back to the Future - Ofshane ✨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. ✨Tema do VS Code: Escuro+ (Escuro padrão) ✨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 Site de verificação de erro: 🔎https://validator.w3.org/ 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/
