Responsividade no CSS: Criando Layouts para Diferentes Dispositivos

  Рет қаралды 806

Hashtag Programação

Hashtag Programação

Күн бұрын

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma:
dlp.hashtagtreinamentos.com/h...
PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS:
pages.hashtagtreinamentos.com...
-----------------------------------------------------------------------
► Arquivos Utilizados no Vídeo:
pages.hashtagtreinamentos.com...
► Flexbox CSS - Noções Essenciais para um Layout Flexível [Tutorial]
• Flexbox CSS - Noções E...
► Domine o CSS Grid Layout em Menos de 30 Minutos - Guia Passo a Passo
• Domine o CSS Grid Layo...
► Criando o Cabeçalho da Página do Google - [Especificidade]
• Criando o Cabeçalho da...
► Box Model: O Conceito Mais Importante do CSS
• Box Model: O Conceito ...
-----------------------------------------------------------------------
Caso prefira o vídeo em formato de texto:
www.hashtagtreinamentos.com/r...
-----------------------------------------------------------------------
PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
www.hashtagtreinamentos.com/t...
-----------------------------------------------------------------------
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
• Curso Básico de Html e...
► Como Baixar e Configurar o VSCode para HTML e CSS
• Instalação do VS Code ...
-----------------------------------------------------------------------
Hashtag Programação
► Inscreva-se em nosso canal: bit.ly/3c0LJQi
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!
-----------------------------------------------------------------------
Redes Sociais
► Blog: bit.ly/2MRUZs0
► KZfaq: bit.ly/3c0LJQi
► Instagram: bit.ly/3o6dw42
► Facebook: 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

Пікірлер: 3
@moderacaohashtag
@moderacaohashtag 11 күн бұрын
Fala galera! Gostou do vídeo? Deixa a sua curtida e se inscreve no canal! PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css?origemurl=hashtag_yt_org_minihtmlcss_Ub83Yz9Nxj8 ► Arquivos Utilizados no Vídeo: pages.hashtagtreinamentos.com/arquivo-htmlcss-1-QFxp1mMpf06m_udVEvgcgfCu57UUWHp?origemurl=hashtag_yt_org_planilhahc_Ub83Yz9Nxj8 ► Blog: bit.ly/2MRUZs0 ► KZfaq: bit.ly/3c0LJQi ► Instagram: bit.ly/3o6dw42 ► Facebook: bit.ly/3qGtaF2 Vídeos Recomendados: ► Flexbox CSS - Noções Essenciais para um Layout Flexível [Tutorial] kzfaq.info/get/bejne/qLSahttp19jcco0.html ► Domine o CSS Grid Layout em Menos de 30 Minutos - Guia Passo a Passo kzfaq.info/get/bejne/epikjdF11p-1p2Q.html ► Criando o Cabeçalho da Página do Google - [Especificidade] kzfaq.info/get/bejne/kNp9aM2c2ZuXXWg.html ► Box Model: O Conceito Mais Importante do CSS kzfaq.info/get/bejne/jtWnoaenldq-oZs.html
@alessandraaquino2232
@alessandraaquino2232 17 күн бұрын
Entre mais em detalhes
@Luiz.macedoribeiro
@Luiz.macedoribeiro 19 күн бұрын
O som tá meio estranho
Criando uma Animação de Scroll Horizontal Infinito com HTML, CSS e JavaScript
39:22
100+ Linux Things you Need to Know
12:23
Fireship
Рет қаралды 273 М.
Haha😂 Power💪 #trending #funny #viral #shorts
00:18
Reaction Station TV
Рет қаралды 16 МЛН
Дибала против вратаря Легенды
00:33
Mr. Oleynik
Рет қаралды 4,7 МЛН
THEY made a RAINBOW M&M 🤩😳 LeoNata family #shorts
00:49
LeoNata Family
Рет қаралды 24 МЛН
Vivaan  Tanya once again pranked Papa 🤣😇🤣
00:10
seema lamba
Рет қаралды 31 МЛН
Unveiling CSS Grid in practice | Mayk Brito
36:17
Rocketseat
Рет қаралды 371 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 116 М.
Criando uma aplicação de API com FastAPI em Python
12:20
Muri Tech
Рет қаралды 16 М.
We can now transition to and from display: none
21:20
Kevin Powell
Рет қаралды 79 М.
TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL
29:25
Como aprender CSS GRID de uma vez por todas! 🤯
21:19
Sujeito programador
Рет қаралды 6 М.
⭐ Minicurso Animações CSS
53:01
dpw
Рет қаралды 128 М.
Ryan Dahl introduces JSR at DevWorld 2024
29:13
Deno
Рет қаралды 101 М.
Responsividade na Prática | Masterclass #08
1:30:16
Rocketseat
Рет қаралды 232 М.
Haha😂 Power💪 #trending #funny #viral #shorts
00:18
Reaction Station TV
Рет қаралды 16 МЛН