Responsividade no CSS: Criando Layouts para Diferentes Dispositivos

  Рет қаралды 801

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 8 күн бұрын
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 14 күн бұрын
Entre mais em detalhes
@Luiz.macedoribeiro
@Luiz.macedoribeiro 16 күн бұрын
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
Рет қаралды 878 М.
LOVE LETTER - POPPY PLAYTIME CHAPTER 3 | GH'S ANIMATION
00:15
Children deceived dad #comedy
00:19
yuzvikii_family
Рет қаралды 7 МЛН
Always be more smart #shorts
00:32
Jin and Hattie
Рет қаралды 43 МЛН
Layout and Reading Order | Rachel Andrew | CSS Day 2024
50:47
Web Conferences Amsterdam
Рет қаралды 1,4 М.
Curso de HTML e CSS - Criando uma Landing Page do Zero [Aula 1]
37:22
Hashtag Programação
Рет қаралды 1 М.
Curso Básico de ChatGPT - Inteligência Artificial - Aula 2
12:22
Hashtag Treinamentos
Рет қаралды 15 М.
Aprenda Responsividade no REACT | Deixe seu Site Responsivo
23:20
DevClub | Programação
Рет қаралды 3,1 М.
TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL
29:25
A maneira mais simples de automatizar qualquer coisa GRATUITAMENTE
20:00
Pensando Artificial
Рет қаралды 49 М.
CSS Flexbox - Tudo o que você precisa saber
50:48
Otávio Miranda
Рет қаралды 20 М.
Responsividade na Prática | Masterclass #08
1:30:16
Rocketseat
Рет қаралды 232 М.
LOVE LETTER - POPPY PLAYTIME CHAPTER 3 | GH'S ANIMATION
00:15