Responsividade no CSS: Criando Layouts para Diferentes Dispositivos

  Рет қаралды 830

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
► KZbin: 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 27 күн бұрын
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 ► KZbin: 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] kzbin.info/www/bejne/qH_NhKtup9ereLs ► Domine o CSS Grid Layout em Menos de 30 Minutos - Guia Passo a Passo kzbin.info/www/bejne/emPXi6F6pp6ErZI ► Criando o Cabeçalho da Página do Google - [Especificidade] kzbin.info/www/bejne/kKWwZp2hqZpmY5Y ► Box Model: O Conceito Mais Importante do CSS kzbin.info/www/bejne/jqDan3esZdmNp8k
@alessandraaquino2232
@alessandraaquino2232 Ай бұрын
Entre mais em detalhes
@Luiz.macedoribeiro
@Luiz.macedoribeiro Ай бұрын
O som tá meio estranho
Criando uma Animação de Scroll Horizontal Infinito com HTML, CSS e JavaScript
39:22
Learn CSS Grid the easy way
37:04
Kevin Powell
Рет қаралды 885 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 69 МЛН
Heartwarming Unity at School Event #shorts
00:19
Fabiosa Stories
Рет қаралды 17 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:26
CRAZY GREAPA
Рет қаралды 3,5 МЛН
Looks realistic #tiktok
00:22
Анастасия Тарасова
Рет қаралды 104 МЛН
Dois Tipos de Subqueries no SQL: Escalar e Lista
12:25
Hashtag Programação
Рет қаралды 985
⭐ Minicurso Animações CSS
53:01
dpw
Рет қаралды 129 М.
CSS Grid Crash Course
53:45
Traversy Media
Рет қаралды 312 М.
Top 10 Advanced CSS Responsive Design Concepts You Should Know
20:16
Web Dev Simplified
Рет қаралды 510 М.
Responsividade na Prática | Masterclass #08
1:30:16
Rocketseat
Рет қаралды 232 М.
TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL
29:25
Aprenda Responsividade no REACT | Deixe seu Site Responsivo
23:20
DevClub | Programação
Рет қаралды 3,3 М.
Como aprender CSS GRID de uma vez por todas! 🤯
21:19
Sujeito programador
Рет қаралды 6 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 711 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 69 МЛН