HTML & CSS - Tornando o Site Responsivo com Media Queries - Projeto Front-end (HTML, CSS e Javascript) [Aula 7/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_Wx8Hw0VLmDw PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_Wx8Hw0VLmDw ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1Oj6rRKxPkO_ZuYomqNUYKnWZOb62UwCJ?origemurl=hashtag_yt_org_planilhahc_Wx8Hw0VLmDw ► 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 sétima e última 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 fazer os ajustes de responsividade na página, ou seja, vamos tornar o site responsivo com media queries. Isso quer dizer que, nós vamos colocar algumas regras, para que a nossa página não tenha um layout quebrado quando utilizado em dispositivos com telas menores. Se você fizer o teste de diminuir o tamanho da tela, vai notar que muitos elementos vão ficar quebrados e isso é péssimo para a visualização. Então temos que fazer esse ajuste para que independentemente do dispositivo, que a pessoa consiga visualizar e interagir com todos os elementos da nossa página! Com isso nós vamos finalizar a nossa série, deixando nossa página completa e totalmente responsiva! ----------------------------------------------------------------------- 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 02:18 Verificando a responsividade na página 03:40 Overflow (corte de informações) + análise 05:40 Aplicando os primeiros ajustes 06:25 Breakpoint em uma página (quebra de layout) 07:00 Formatação para tamanho específico (media query) 08:55 Ajuste da formatação com media query 11:20 Ajuste do layout para responsividade 14:30 Alteração do fundo da seção + ajuste nos elementos 15:56 Ajuste do layout (position static + ajustes) 18:00 Ajuste no card 19:30 Verificando a responsividade nas outras seções 21:10 Display flex de coluna + ajuste para responsividade 23:30 Ajuste na seção aprender (imagens e espaçamentos) 25:12 Ajuste na seção disclaimer 26:20 Diminuindo o tamanho da imagem 27:30 Breakpoint final - 360px (últimos ajustes) 43:00 Responsividade no popup 48:00 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao