HTML & CSS - Responsividade no CSS: Criando Layouts para Diferentes Dispositivos

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_Ub83Yz9Nxj8 PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_Ub83Yz9Nxj8 ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1-QFxp1mMpf06m_udVEvgcgfCu57UUWHp?origemurl=hashtag_yt_org_planilhahc_Ub83Yz9Nxj8 ► Flexbox CSS - Noções Essenciais para um Layout Flexível [Tutorial] https://youtu.be/rNjSx8rrxBY ► Domine o CSS Grid Layout em Menos de 30 Minutos - Guia Passo a Passo https://youtu.be/D2tZnDq9Qw0 ► Criando o Cabeçalho da Página do Google - [Especificidade] https://youtu.be/ZtM5jkt53-4 ► Box Model: O Conceito Mais Importante do CSS https://youtu.be/XownDv0tZqg ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/responsividade-no-css-htmlcss ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Você já se perguntou o que é responsividade? Sabe o que é isso e como isso funciona nas páginas da internet? Nessa aula eu vou te explicar o que é responsividade no CSS e como você pode fazer os ajustes na sua página para que ela não fique quebrada em diferentes dispositivos. Você já deve ter visto em algum lugar uma página que abre normalmente no computador, mas quando você abre no celular está toda quebrada e não consegue ver nada! Isso acontece quando a página não tem responsividade, ou seja, ela não se adapta aos diferentes dispositivos que nós temos. Então vamos ver como adaptar a nossa página com grid no CSS, flexbox, media query (restrição de tamanho no CSS) para criar o nosso layout responsivo. Dessa maneira vamos conseguir ter um layout visível em qualquer dispositivo, seja ele celular, tablet, computador ou até televisão! ----------------------------------------------------------------------- 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:34 O que é layout responsivo? 01:55 Ferramentas do desenvolvedor (programador) 03:48 Limpando o layout (flexbox) 08:45 Como o grid vai se comportar? 11:00 Media query (@media) – Condições/Restrição 20:45 Responsividade do cabeçalho (ajuste imagem e espaçamento) 27:50 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao