Тёмный

Design Responsivo: CSS Media Queries Explicado! 

Programação Web
Подписаться 57 тыс.
Просмотров 3,8 тыс.
50% 1

Nesse vídeo vamos aprender sobre design responsivo e principalmente as Media Queries um recurso muito importante do CSS. As media queries são uma parte essencial do design web moderno, permitindo que seu site se adapte perfeitamente a diferentes tamanhos de tela, desde smartphones até desktops. Neste vídeo, abordaremos os conceitos básicos das media queries, mostraremos exemplos práticos e compartilharemos as melhores práticas para tornar seu site verdadeiramente adaptável.
👉 Meu curso: curso.programacaoweb.com.br
🔥 Use o Cupom: 5PORCENTO
⏱ Neste vídeo:
00:00 - O que são media queries?
00:45 - Visão geral
02:10 - Tipos de Devices - screen, print e speech
04:20 - Determinando max-width e min-width
08:15 - Media Query do tipo Print (impressão)
10:45 - Media Query Orientation (orientação de tela)
14:10 - Fique atento ao posicionamento!
16:32 - Deixa seu like e se inscreve!
Principais tópicos abordados neste vídeo:
- O que são media queries e por que são importantes
- Sintaxe e estrutura de uma media query
- Exemplos práticos de como aplicar media queries
Se você é um designer web, desenvolvedor front-end ou alguém interessado em aprimorar a responsividade de seus sites, este vídeo é para você. Assista agora e comece a criar designs web deslumbrantes que se destacam em qualquer dispositivo!
#MediaQueries #DesignResponsivo #programacaoweb
⭐Torne-se Membro: youtube.com/@programacaoweb/join
Ao se tornar membro você recebe acesso a cursos exclusivos para membros - jQuery, Bootstrap 5, React Completo, PHP, Node JS.
🎓 Cursos Gratuitos:
Curso de HTML Completo 👉 • Curso HTML Completo (4...
Curso de CSS Completo 👉 • Curso CSS Completo (7 ...
Curso de JavaScript Completo 👉 • Curso Javascript Compl...
Curso de Sass para Iniciantes 👉 • Aprenda Sass em 25 Min...
Curso de Git e Github Para Iniciantes 👉 • Curso de Git e Github ...
Curso de React Para Iniciantes 👉 • Curso de React Para In...
Curso de TypeScript Para Iniciantes 👉 • Curso de TypeScript Pa...
Forte abraço!

Наука

Опубликовано:

 

30 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 27   
@programacaoweb
@programacaoweb 9 месяцев назад
*Conheça meu curso completo:* 👉curso.programacaoweb.com.br 🔥 Use cupom: 5PORCENTO Abraço!
@MrBUGUI10
@MrBUGUI10 9 месяцев назад
Ótimo canal, sou um estudante Engenharia Eletrotécnica e o seu canal salvou o nosso site no projeto final de curso
@programacaoweb
@programacaoweb 9 месяцев назад
Opa, que legal. Fico muito feliz que te ajudou. Grande abraço!
@cabral1971
@cabral1971 9 месяцев назад
Parabéns Dimitri, mais uma aula show de bola. Seria interessante um vídeo ensinado como criar um app para abrir um site usando o webview (Android/IOS). Já existe este vídeo ?
@programacaoweb
@programacaoweb 9 месяцев назад
Oi Ricardo. Muito obrigado. No canal não tem nenhuma aula sobre o assunto. Tenho aulas sobre isso apenas no meu curso completo de desenvolvimento de apps 👉 criaraplicativos.com .Abraço!
@DanielRodrigues-hp6pl
@DanielRodrigues-hp6pl 9 месяцев назад
Ótimo canal..os videos sempre agregando😁 conheci a media print aqui pelo video.
@programacaoweb
@programacaoweb 9 месяцев назад
Legal Daniel. Elas são muito úteis em vários cenários. Principalmente com sistemas que lidam muito com impressão. Forte abraço!
@brunopereira8325
@brunopereira8325 9 месяцев назад
Mais uma aula excelente! 👏🏽
@programacaoweb
@programacaoweb 9 месяцев назад
Muito obrigado Bruno! 😁👍
@nalldaosnyper
@nalldaosnyper 9 месяцев назад
Gostei muito das suas aulas. Rápidas e práticas em sua abordagem de forma ludica.
@programacaoweb
@programacaoweb 9 месяцев назад
Muito obrigado Nalldão! Grande abraço!
@nalldaosnyper
@nalldaosnyper 9 месяцев назад
@@programacaoweb Seria possível ou existe algum vídeo seu ensinando a fazer carrossel?
@programacaoweb
@programacaoweb 9 месяцев назад
Oi Nalldao. Você que é membro sim, no curso de Bootstrap 👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lXKdsJbglPc.html .Abraço!
@helder-rangel
@helder-rangel 2 месяца назад
😁
@sidneycaetano951
@sidneycaetano951 7 месяцев назад
Boa tarde. Poderia ensinar como controlar colunas usando o mediaQuery. Tipo dependendo do tamanho as colunas ficam se adaptando-se.
@programacaoweb
@programacaoweb 7 месяцев назад
Oi Sidney. Da uma assistida nessa aula de Flexbox do CSS. Lá nos exemplos mostramos uma aplicação parecida com o que você quer 👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NQTU9hEStD8.html .Forte abraço!
@f450fpv7
@f450fpv7 Месяц назад
@nataliacastro4912
@nataliacastro4912 9 месяцев назад
Olá, professor! Tudo bem? Comentei em um outro vídeo que tenho interesse em comprar o curso. Contudo me preocupo com a assistência que vamos ter. Gostaria de saber qual é o prazo para termos respostas a cerca de algumas dúvidas que tenhamos?
@programacaoweb
@programacaoweb 9 месяцев назад
Oi Natália. Quando você compra o curso recebe meu contato de atendimento no whatsapp. Dentro do horário de atendimento eu sempre respondo na medida do possível. Na plataforma do curso tbm pode deixar sua dúvida de baixo da aula. Eu respondo todos os dias por lá também. Só final de semanas e feriados que não respondo, por que todo mundo precisa descansar 😆 .Vai ser muito bem vinda na turma! Abraço
@motivacao-fire
@motivacao-fire 9 месяцев назад
Traz vídeo de css grid? pfv
@programacaoweb
@programacaoweb 9 месяцев назад
Uma excelente sugestão Diogo. Quero fazer um vídeo completo sobre CSS Grid sim. Abraço!
@whoamiservidorasdad
@whoamiservidorasdad 9 месяцев назад
Professor gostaria de mostrar pro senhor o site que eu conseguir, criar apenas com html,css graças a o senhor como eu faço pra você ver o meu site ?
@programacaoweb
@programacaoweb 9 месяцев назад
Olá. Você pode publicar no github pages e mandar o link. Tem vídeo no canal mostrando o processo 👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nIR4myZ8w9c.html .Abraço!
@whoamiservidorasdad
@whoamiservidorasdad 9 месяцев назад
Obrigado @@programacaoweb
@guipython
@guipython Месяц назад
Mais qual é o pix ideal para mobile ?varios vídeos no RU-vid mas ninguém fala sobre
@programacaoweb
@programacaoweb Месяц назад
Olá. Desculpe, não entendi sua pergunta. Acredito que quando você diz "pix" quer dizer "pixels", ou seja, o tamanho padrão para mobile? Se for isso, para celulares usamos 320px a 480px de largura, sendo 400px a média para maioria dos aparelhos. Tablets (modo retrato): 481px a 768px de largura. Abraço!
@guipython
@guipython Месяц назад
@@programacaoweb perdão pela pergunta mal feita, tenho dúvidas, em relação ao tamanho no exemplo max-width (800px) ou 1000 ou 100 , teria um tamanho ideal para mobile que sirva para todos 📱 ou somente testando um a um obrigado pelo vídeo e pela resposta
Далее
5 Extensões do VSCode Sensacionais!
10:40
Просмотров 5 тыс.
5 simple tips to making responsive layouts the easy way
15:54
😍😂❤️ #shorts
00:12
Просмотров 105 тыс.
🎙️ПЕСНИ ВЖИВУЮ от КВАШЕНОЙ💖
3:23:13
Aprenda MEDIA QUERIES no CSS em 10 MINUTOS
10:32
Просмотров 33 тыс.
CSS Responsivo: A importância e COMO FAZER.
11:11
Просмотров 53 тыс.
Learn Every CSS Selector In 20 Minutes
19:38
Просмотров 439 тыс.
CSS - Курс по CSS для Начинающих
1:27:35
Como criar imagens responsivas (css responsivo) ?
26:01
Gizli Apple Watch Özelliği😱
0:14
Просмотров 4,7 млн