Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Logo da Microsoft com HTML e CSS

@Microsoft #microsoft #visualstudio #html #FrontEnd #Css3 ✨ Compre na Amazon: https://amzn.to/3UgqOhL 📚 Muito Obrigado por Assistir! Neste vídeo, mergulhamos no desenvolvimento web com um projeto visualmente que incorpora a icônica logo da Microsoft. Utilizamos HTML para estruturar nossa página e CSS para estilizá-la, criando um layout que é tão funcional quanto bonito. 🔹 O que você aprenderá: Como criar uma estrutura de contêineres no HTML para organizar seu conteúdo. Implementação de classes para gerenciar diferentes seções, como ‘container’, ‘content’, ‘brands’, e mais. Design de caixas coloridas representando as cores da Microsoft: vermelho, verde, azul e amarelo. Adição de uma barra vertical estilizada que exibe ‘Microsoft’ e ‘Store’. 🔹 No CSS, começamos com uma abordagem, garantindo que seja responsivo e acessível. O corpo do CSS tem as seguintes propriedades: Margin: 0 - Remove qualquer margem padrão para um visual limpo. Padding: 0 - Elimina o preenchimento para maximizar o espaço de tela. Justify Content: Flex-start - Alinha o conteúdo à esquerda, preparando o terreno para um layout flexível. Background: #f0f0f0 - Um tom neutro que serve como uma tela em branco para nossos elementos coloridos. Padding: 20px - Isso adiciona um pouco de espaço dentro de nossos elementos para evitar que o conteúdo toque as bordas. Align Items: flex-start - Alinha todos os itens filhos ao início do contêiner flex. Height: 100vh - Isso faz com que o nosso contêiner tenha a altura total da viewport, criando uma experiência de tela cheia. A classe .brand é configurada para exibir um grid: Display: grid - Transforma o elemento em um contêiner de grid. Grid Template Columns: repeat(2, 1fr) - Cria duas colunas com tamanhos iguais. Grid Template Rows: repeat(2, 1fr) - Cria duas linhas com tamanhos iguais. As caixas coloridas .box têm as seguintes propriedades: Width e Height: 10px - Define o tamanho das caixas. Background: Cada caixa tem uma cor de fundo correspondente à sua classe (red, green, blue, yellow). Na parte HTML, temos uma classe .text que contém um span com a barra e o nome “store”. As propriedades CSS para .text são: Margin Left: 5px - Isso separa o texto da borda esquerda. Font Size: 18px - Define o tamanho da fonte para uma leitura confortável. Display: flex - Permite o uso de flexbox para alinhar itens. Align Items: center - Centraliza o conteúdo verticalmente dentro do contêiner flex. A classe .microsoft, onde está o texto, tem um estilo mais destacado: Font Weight: bold - Torna o texto “Microsoft” mais proeminente. Margin Right: Ajusta o espaçamento à direita do texto. Junte-se a nós enquanto criamos um layout colorido e interativo com a logo da Microsoft. Aprenda a estruturar seu HTML e a adicionar estilo com CSS para criar um design que captura a essência da marca Microsoft. Com um grid dinâmico, caixas coloridas e tipografia elegante, este tutorial é perfeito para quem quer aprimorar suas habilidades de front-end. Não perca!🚀 SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve 🎵 Música 🎬 https://app.clipchamp.com ✨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/