HTML & CSS - Construindo a Seção Hero e Passos - Projeto Front-end (HTML, CSS e Javascript) [Aula 3/7]

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma: https://dlp.hashtagtreinamentos.com/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_c5BMR_mXjBw PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_c5BMR_mXjBw ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1NAq7yX4smkqasUSH0sIhbBGSbGtiQ06?origemurl=hashtag_yt_org_planilhahc_c5BMR_mXjBw ► Site da MasterClass de Full Stack que foi Utilizada na Aula: https://lp.hashtagtreinamentos.com/full-stack/aula/inscricao ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/landing-page-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Hoje vamos para terceira aula do Curso de HTML e CSS que tem como objetivo te ensinar a criar uma Landing Page do ZERO! Nessa aula nós vamos criar a seção de passo a passo da nossa landing page. Essa é uma seção onde temos 3 passos para o usuário seguir, só que nós vamos precisar criar essa parte toda do zero. Vamos inserir o título H2 (não podemos colocar outro H1, pois cada página só pode ter um único H1) e em seguida vamos criar os passos. Essa criação vai usar basicamente tudo o que já vimos até aqui, então vamos utilizar flex box, alinhamento, espaçamento, sombra e vamos fazer ajustes, alinhamentos e formatações. Lembrando que aqui não tem muita regra de números, ou seja, você vai de acordo com o que achar que fica bom para sua página, então pode ir fazendo alterações para verificar se fica bom ou não. A ideia é que você entenda os conceitos e como as ferramentas funcionam antes de fazer essas modificações! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 01:28 O que temos até o momento? 01:50 O que está faltando? 02:34 Padding na seção hero (espaçamento) 05:13 Flex box (alinhando conteúdos) 07:44 Ajuste de imagem (tamanho e proporções) 10:32 Seção de disclaimer + ajustes 16:30 Seção de passo a passo 18:16 Passo individual (cabeçalho, conteúdo e formatações) 27:25 Ajustes, alinhamentos e formatações dos passos 33:00 Barra lateral (barra de divisão) 36:36 Ajuste do ícone (formatação, display inline e display block) 43:50 Duplicando para os outros passos 45:13 Ajustes finais no passo a passo 46:40 Box-shadow (sombra) 49:23 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao