Aprenda MEDIA QUERIES no CSS em 10 MINUTOS
Вставка
- Опубліковано 12 січ 2025
- 🚀 Bora desenvolver um CLONE DO IFOOD em 5 aulas gratuitas? Toca no link e participe comigo! swiy.co/yt-c-fsw4
Neste vídeo vamos aprender a utilizar Media Queries no CSS para construirmos sites responsivos, que se adaptem a vários tipos de dispositivos.
--------------------------
ASSISTA AOS MELHORES VÍDEOS DO CANAL:
▸ CURSO DE TYPESCRIPT PARA COMPLETOS INICIANTES
• Curso de TypeScript pa...
▸ CURSO DE REACT PARA COMPLETOS INICIANTES
• Curso de React Para Co...
▸ CURSO DE JAVASCRIPT PARA COMPLETOS INICIANTES
ua-cam.com/users/pl....
▸ CURSO DE NODE.JS PARA COMPLETOS INICIANTES
• Curso de Node.js Para ...
--------------------------
▸ ME SIGA NO INSTAGRAM
/ byfeliperocha
▸ RECEBA DICAS NO TELEGRAM
t.me/dicaspara...
--------------------------
REDES SOCIAIS
GitHub: github.com/fel...
LinkedIn: / felipe-ro. .
Usar troca de verde pra vermelho e vice-versa é sacanagem com os daltônicos aqui 😂! Excelente explicação, obrigado!
acho que nunca na minha vida eu tive 10 minutos tao bem aproveitados assim. karaka. fiquei estupefato.
obrigado
Agora eu entendi sobre responsividade, cara parabéns pelo conteúdo fantástico :)
Dos canais do youtube esse é o meu preferido para estudar HTML , CSS e JavaScript! A meta é ver todos os videos do seu canal !!!
fico muito feliz lendo isso, Thiagão! tmj
Felipe, brigadão pelos conteúdos cara! Sinceramente, você me ajuda/ajudou muito mais do que um certo bootcamp aí que eu fiz e do que minha facul. Aprendi muito mais aqui do que lá... Super recomendo teus vídeos e teu canal, abraço irmão.
Sacanagem uma aula assim em 10m, bom de mais mano, vlw.
Cara eu estava quase desistindo.
Ainda bem que vi o seu vídeo.
Muito obrigado.
mano muito boa aula, eu tava assistindo a aula do cursinho sobre o media orientation e tava tendo dificuldades mas depois de assistir essa video aula ficou tudo esclarecido
Rápido e direto. Muito boa a aula.
Muito obrigado pelo vídeo colega!
Parabéns... Sem enrolação!
Parabéns elo conteúdo . Você ensinando clareou muito . Valeu!
sem enrolação e bem explicado
Cara muito obrigado de verdade. Eu estava estudando e me estressei pq eu mudei Algo que mudou uma div e eu fiquei puto. Deus te abençoe 🙏🙏
Esse vídeo veio na hora certa, estou me aprofundando em sites responsivos, ótimo vídeo!👏👏👏
boaaaa!
Sem enrolação mesmo. Muito obrigada 1
mt obrigado irmão, to na luta p web front end e esse video me ajudou muito
Obrigado pela aula. Foi show. Parabéns. 👍☝️👏👏👏👏
irmão me ajudou muito, parabéns pelo seu trabalho explicou muito bem , +1 inscrito
tava fazendo meu portfolio agr que ta quase todo pronto me toquei q so ta pra pc agr to com uma dor de cabeca pra deixar responsivo
exatamente kkkk , hoje o esquema e ser FULL STACK
mano oq vc fez pra resolver? to com o msm problema
Muito top. Me ajudou demais colega, ganhou um like e um inscrito kkk
Cara como eu amo esse canal!
tmj bro!
Aula perfeita. Amei muito 🩷🩷
Obrigado irmão me ajudou muito
Mano, muito bom o jeito q tu explica, de vdd
felipe eu amo teus video mds cara vc é nota 1000 ,parabens
muito obrigado, Henry! :)
Que video massa!! Vai ajudar bastante
Valeu, irmão!
meu deus bati cabeça a bessa pra aprender no curso e chegou agora em dez min entendi
Baita explicação!!
Obrigado, didática incrível!
Muito bom,me ajudou muito
Valeu, irmão!
Pow mano muito obrigado! Pensava que responsividade era um bixo de 7 cabeças, mas graças a seu vídeo vi que isso era um pensamento equivocado 👍
Você é ninja, valeu.
obrigado pela explicação
🥰
Muito bom, excelente conteúdo!!
Ótima explicação, muito obrigado.
Estou iniciando, mas mudar a cor é mais fácil, o que me quebra é as imagens no body, texto e background, aí desalinham tudo😅
Muito massa! Obrigado!
Boa noite. Gostaria de saber como faço para ter a visualização que vc tem quantos as medidas responsivas referente as medidas de celulares. É alguma extensão?? Poderia me ajudar neste sentido.
Utilizo o Liveserv do vscode para visualização das páginas, mas gostaria de saber como faço para ter uma visualização como a sua, onde posso simular as medidas dos celulares.
Eu queria saber exatamente isso mano
Não sei se essa extensão que ele usou é o Devtools
Vc é muito bom. Obrigado 👍
Muito obrigado 😃 👍🏻
excelente vídeo👏👏👏
Valeu, muito obg!
Eu precisava disso 🙌🙌🙌
:)
Obrigado! ( +1 inscrito e 5 Likes )
valeu pela dica mano
Eu que agradeço!
Qual sistema operacional utilizado no vídeo?
Top !! Alguem sabe dizer se essa parte quando ele inspeciona e vê a largura, onde aparece o tipo de dispositivo movel é uma extenssão do google?
cara muito bom seus exemplos , fazz um com um sitee real mais um escrito !!!!!!!!!!!!
Mano, fiz e deu certo, no trebedit aparecia o menu, mas na hospedagem não, ❤
Muito bom!!
Você já fez o vídeo criando o site responsivo pra mobile?
obrigada!!!
o felipe eu estava estudando aqui, ai quando eu abro o responsivo o espaço do meu cabeçalho e do meu footer so ocupa 50% da tela, sabe como eu posso resolver? eu tentei aumentar o padding-left más não deu certo
Qual o nome dessa extensão usada para redimensionar no navegador?
ótimo vídeo!
obrigado, irmão!
estou recriando a lanfing page do facebook, mas quando cheguei no responsivo (nunca fiz responsivo antes) tive um problema: setei o responsivo pra iphone, depois fui trabalhar o responsivo pra desktop, ai td que fazia no desktop afetava o responsivo de iphone. Pode me ajudar?
felipe uma duvida como vc consegue ver as larguras de celular e fica mudando de iphone XR para um SE pq meu chorme não tem essa função, por acaso é uma extenção do vs code studio?
Você precisa apertar o F12 para abrir o modo dev, e depois clicar no ícone de celular/tablet no topo da janela que vai abrir ,do lado esquerdo.
Pois é, ficou muito mal explicado. Muita pressa para terminar o vídeo.
Qual curso você fez inicialmente???
Estou tendo problemas com o media query. Copiei o código exatamente igual o do vídeo, com a meta tag viewport e etc, mas na hora de testar a responsividade no inspecionar elementos do navegador simplesmente não funciona! Já vi diversos vídeos para ver onde está o erro e não consigo encontrar. Alguém pode me ajudar?
coloque seu codigo CSS aqui. vou tentar ajudar
Quando você vai olhar como ficou a responsividade no celular real, não tem nada haver com as simulações web.
Bom vídeo
mano e essa extensão no chrome pra escolher a resolução?
opa amigo, não é extensão, é um recurso do próprio navegador msm, vai em inspecionar com botão direito do mouse e clica no ícone de celular no canto direito
parabens!
como usar essa tela do navegador que dá pra mudar as dimensões?
opa amigo, aperta F12 e clica no ícone de celular/tablet que vai aparecer em cima da página à direita
conteúdo é bom e explica bem, mas sério, o áudio me deixa agoniado, fica aquela engolida toda hora no som... ahh... uma boa seria resolver isso
Tá aí uma coisa que não entendo: será msm que o iPhone XR tem só *414px* de largura??
Meu simples Moto G5S tem 1080px de largura!! Kk (de acordo com as especificações do aparelho)
Qual a lógica nessas medidas?
Celular com 1080px ??? tem ctz q essa não é a resolução de video q ele roda não?
O chato msm é mexer nos container kkkkkkk tirando isso o mídia é ótimo
Hahaha sim, faz parte!
parece facil broen
Eu devo ser muito burro....não estou conseguindo fazer....😑
Não brother, é mal explicado mesmo.
@@eletronicamNão é não. A didática dele é muito boa e as informações são diretas e objetivas