Conteúdo massa como sempre! Uma dica legal pra quando se trabalha com responsividade é usar medidas como %, rem e em, você pode por exemplo, aplicar porcentagem no tamanho da fonte no elemento html, com base na media query e depois utilizar rem quando precisar definir alguma medida, ela será sempre relativa a porcentagem aplicada anteriormente, dessa forma já conseguimos ganhar uma leve responsividade com regras simples.
@@felipecoutinho_ Olha se me permite dar uma dica, pense assim: doc html tem um font-size padrão de 16px, ou seja 16px = 100%. Agora imagina que voce tenha uma media query para tablet @media (max-width: 720px) você quer diminuir esse font-size digamos que para 14px, adicionar 14px na media query é uma prática ruim, pois alguns usuários utilizam um tamanho de fonte personalizado no celular (minha mãe aumenta tudo no máximo 😂) sendo assim o px não irá respeitar essa configuração do usuário, pra isso você pode converter esses 14px em %, ficando com 87.5% uma medida que será relativa ao tamanho da fonte independente de qualquer configuração que o usuário tenha.
@@felipecoutinho_ Ah e o cálculo pra conversão é simples, basta pegar o tamanho que você deseja aplicar em px, multiplicar por 100 e por fim dividir por 16 (tamanho padrão do htm). Exp: 15px -> % 15 * 100 = 1.500 1.500 / 16 = 93.75% Mas não precisa se preocupar com isso tem vários sites que fazem a conta basta jogar no Google 😅
@@lucas-morais-1998 Caramba, Lucas! Sei que não era pra mim, mas muito obrigado por essa explicação! Até printei aqui pra começar a testar nos próximos projetos.
Boa noite Prof° Matheus, obrigado pelo excelente conteúdo, quem tem Qualifica no seu serviço de Internet, procura os cursos do professor, quem não tem vai pela Udemy, eu tenho em ambas plataformas e recomendo demais, além do RUclips tem o Blog com excelentes dicas, bora movimentar galera, curte e compartilhe o conteúdo.
As unidades de medidas são outro assunto importantíssimo para responsividade, eu mal utilizo o mediasquery quando se tem as unidades de medidas como vh ou em.
Olá Matheus, tudo bem? Gosto muito de seu canal no youtube e sempre estou vendo seus vídeos por lá. E como vc é fera em CSS gostaria de tirar uma dúvida... Eu vejo vídeos de diferentes pessoas no RUclips e em particular cada pessoa tem uma forma ou acha uma forma mais adequando de construir a estrutura do arquivo CSS. Vou explicar... junto vem a dúvida. Tem pessoas que usam apenas um arquivo style.css e faz toda estilização neste mesmo arquivo. Outras usam uma pasta CSS e dentro divide os arquivos conforme as tags mais importantes como: > header > body >footer Essa é minha dúvida, qual a melhor forma é indicado para se ter boas práticas e ter um bom desempenho do site?? Tem algum vídeo que mostre essa estruturação do CSS? Desde já, muito obrigado por compartilha seus conhecimentos através do canal.
Parabeéns pelo conteúdo !! Estou com uma dúvida, e nao sei onde estou errando. Quando aciono o @media , não está mantendo as configuração padrões. Onde posso esta errando?
Sintaxe eh brabo mesmo, tava codando um site e criei um script em js que ativava o botao com o click do mouse, mas eu escrevi click com C maiusculo, perdi quase 30 minutos pra descorbrir kkkkk
terminei um projeto a pouco tempo só que quando fui abrir pela a tela do celular não ficou muito legal, essa é a linguagem que preciso pra melhorar ainda mais!
Olá Mateus deixa ver se entendi, começamos pelo mobile first no caso essa regra ficaria na parte geral e depois adaptamos através de break points com min-wdth para resoluções maiores é isso?
A configuração para print nao rolou h1{ color: red; } /* 2 - sintaxe */ @media screen and (max-width: 500px){ /* (quando for menor do que 500 px)MAX WIDTH = TELAS MENORES QUE ALGUMA RESOLUÇÃO */ h1{ color: blue; } } /* a partir desse momento faça alguma coisa, antes dessa resolução faça outra coisa */ /* 3 - Outros modos */ /* screen, print, speech, all */ @media print and (max-width:600px){ h1{ color: green; } }
🔴 Conheça nosso curso completo de HTML e CSS: app.horadecodar.com.br/course/curso-html-e-css-completo
Conteúdo massa como sempre!
Uma dica legal pra quando se trabalha com responsividade é usar medidas como %, rem e em, você pode por exemplo, aplicar porcentagem no tamanho da fonte no elemento html, com base na media query e depois utilizar rem quando precisar definir alguma medida, ela será sempre relativa a porcentagem aplicada anteriormente, dessa forma já conseguimos ganhar uma leve responsividade com regras simples.
falou tudo estou tentando entender melhor % em e rem para utilizar nos projetos
@@felipecoutinho_ Olha se me permite dar uma dica, pense assim: doc html tem um font-size padrão de 16px, ou seja 16px = 100%.
Agora imagina que voce tenha uma media query para tablet @media (max-width: 720px) você quer diminuir esse font-size digamos que para 14px, adicionar 14px na media query é uma prática ruim, pois alguns usuários utilizam um tamanho de fonte personalizado no celular (minha mãe aumenta tudo no máximo 😂) sendo assim o px não irá respeitar essa configuração do usuário, pra isso você pode converter esses 14px em %, ficando com 87.5% uma medida que será relativa ao tamanho da fonte independente de qualquer configuração que o usuário tenha.
@@felipecoutinho_ Ah e o cálculo pra conversão é simples, basta pegar o tamanho que você deseja aplicar em px, multiplicar por 100 e por fim dividir por 16 (tamanho padrão do htm).
Exp: 15px -> %
15 * 100 = 1.500
1.500 / 16 = 93.75%
Mas não precisa se preocupar com isso tem vários sites que fazem a conta basta jogar no Google 😅
@@lucas-morais-1998 Obg pelas dicas irei começar utilizas na pratica
@@lucas-morais-1998 Caramba, Lucas! Sei que não era pra mim, mas muito obrigado por essa explicação! Até printei aqui pra começar a testar nos próximos projetos.
Boa noite Prof° Matheus, obrigado pelo excelente conteúdo, quem tem Qualifica no seu serviço de Internet, procura os cursos do professor, quem não tem vai pela Udemy, eu tenho em ambas plataformas e recomendo demais, além do RUclips tem o Blog com excelentes dicas, bora movimentar galera, curte e compartilhe o conteúdo.
valeu Caio, tamo junto! =))
Muito Obrigado Matheus, tinha um site para entregar hoje e só faltava a responsividade, resolvi essa questão em 1 hora! Gratidão!!
Boa noite professor. Cara, que aula expetacular. Agradeço de coração por criar esse conteúdo de vasta informações. Tmj fessor.
amei sua didatica, assim que eu acabar meu curso da b7web sem duvidas irei fazer um dos seus, desde ja muito obrigado pela aula, me ajudou muito msm
Vídeo bem completo e rápido, mas o melhor: com uma didática de se admirar, parabéns pelo seu empenho Matheus!
Esses dias tava vendo se tinha um vídeo assim no seu canal kkk, conhecidencia. Show!!!
aí sim Raisa! =D
Matheus, sua didática é impecável. Obrigado por compartilhar o seu conhecimento.
Abracos de Moçambique, muito obrigado, você é tão atencioso e simples na sua explicação. Parabéns.
obrigado Dariuh! =)
O exemplo do Joãozinho foi o melhor kakkakakaka, aula excelente, professor :D
hahah coitado do Jãozin! =D
CSS é algo que eu tenho bastante dificuldade, mas com essa aula ficou bem claro como funciona
Seu conteúdo foi excelente e foi exatamente a aula que eu estava precisando! Muito obrigado Matheus 👊
showww deep, que bom que curtiu! Te convido tb a conhecer a nossa plataforma de cursos: horadecodar.com.br/comunidade-hora-de-codar/
Cara, você é fantástico na sua didática! Obrigado pelos ensinamentos.
Valeuuu Raoni, tamo junto 😀
Aula completamente sensacional 🎉👏👏 Tirou todas minhas dúvidas sobre @Media Query. Muito obrigado pelo conteúdo 👏
Muito obrigada Matheus, espero que seu novo projeto seja "viral"
As unidades de medidas são outro assunto importantíssimo para responsividade, eu mal utilizo o mediasquery quando se tem as unidades de medidas como vh ou em.
obrigado por compartilhar seu conhecimento.
de nada Andre!
Simplesmente uma aula perfeita não tive duvidas !
Estava precisando das informações finais. Obrigado!
Esse é o melhor video sobre o assunto para acéfalos[ Eu :) ]
Gostei demais da aula, finalmente consegui aprender alguma coisa de media query!!
Só tenho a agradecer a você Matheus, muito obrigada!!
de nada Júlia, espero te ajudar mais! =)
que aula incrível, muito obrigado!!
Aula top, bora praticar e integrar isso em alguns projetos
boa Lucas!
Faz um vídeo explicando o conceito BEM no CSS
top de mais esse canal.
cara, que aula fod4! mais um inscrito.
Gostei. Obrigado!
valeu Douglas!
Muito bom. Obrigado pelo tutorial.
Como deixei passar batido essa aula hahaha... Top demais, aula sensacional!
valeuu Neder =D
Muito obrigado de verdade.
Conteúdo de qualidade como sempre
Cara você é incrível
Que aula top! Valeu professor!
voce e muito bom explica muito bem parabens
valeu Marta! =D
top lindo ótima explicação
Sempre ótima aula!
valeu amigo!
valeu pelo conteudo profesosor!!! uma ideia de video, se puder trazer um video sobre um CRUD com firebase e js
boa sugestão Munir!
Cara, vídeo muito bom! Me ajudou bastante, parabéns pela didática!
Parabéns, claríssimo e didático!
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Valeu Matheus…. Obrigado pela aula. Vida longa….
muito show o vídeo! top!
Obrigado professor!
de nada Eduardo!
Explicação muito boa. Muito obrigado!
valeuu Cristian! =)
Obrigado pelo vídeo!
de nada Pablo!
vlw amigo. Amei a explicação
Olá Matheus, tudo bem?
Gosto muito de seu canal no youtube e sempre estou vendo seus vídeos por lá. E como vc é fera em CSS gostaria de tirar uma dúvida...
Eu vejo vídeos de diferentes pessoas no RUclips e em particular cada pessoa tem uma forma ou acha uma forma mais adequando de construir a estrutura do arquivo CSS.
Vou explicar... junto vem a dúvida.
Tem pessoas que usam apenas um arquivo style.css e faz toda estilização neste mesmo arquivo.
Outras usam uma pasta CSS e dentro divide os arquivos conforme as tags mais importantes como:
> header
> body
>footer
Essa é minha dúvida, qual a melhor forma é indicado para se ter boas práticas e ter um bom desempenho do site??
Tem algum vídeo que mostre essa estruturação do CSS?
Desde já, muito obrigado por compartilha seus conhecimentos através do canal.
Ajudou d+ man.
position absolute interfere no media querry?
Ganhou mais um inscrito 👏👏
Ótima aula
muito bom. obrigada
Excelente 👏
valeu Daniel!
kkk, podia contar mais dessas do fulaninho fazendo cag** espertão 😅
Conteúdo top cara, logo estarei adquirindo algum curso seu, grande abraço.
A quantidade de media query depende do tipo de projeto né um tamanho pra celular outro computador etc
Exatamente Vitor, e até cabe a pergunta: precisamos adaptar para tablet ou está bom assim? Um exemplo..
@@MatheusBattisti vdd
Parabeéns pelo conteúdo !! Estou com uma dúvida, e nao sei onde estou errando. Quando aciono o @media , não está mantendo as configuração padrões. Onde posso esta errando?
Sintaxe eh brabo mesmo, tava codando um site e criei um script em js que ativava o botao com o click do mouse, mas eu escrevi click com C maiusculo, perdi quase 30 minutos pra descorbrir kkkkk
matheus, não tá funcionando para baixar o ebook
terminei um projeto a pouco tempo só que quando fui abrir pela a tela do celular não ficou muito legal, essa é a linguagem que preciso pra melhorar ainda mais!
Joãosinho, manda pro pae kkkkk
acho q fiz algo errado, ou n esta funcionando
ate o 9:33
Muito bom!
o meu orientation n ficou marcado n
Como faço para entrar na comunidade do WhatsApp ??
Olá Mateus deixa ver se entendi, começamos pelo mobile first no caso essa regra ficaria na parte geral e depois adaptamos através de break points com min-wdth para resoluções maiores é isso?
sim
No print nao rolou ! Nao muda!
muito bom
A configuração para print nao rolou h1{
color: red;
}
/* 2 - sintaxe */
@media screen and (max-width: 500px){
/* (quando for menor do que 500 px)MAX WIDTH = TELAS MENORES QUE ALGUMA RESOLUÇÃO */
h1{
color: blue;
}
}
/* a partir desse momento faça alguma coisa, antes dessa resolução faça outra coisa */
/* 3 - Outros modos */
/* screen, print, speech, all */
@media print and (max-width:600px){
h1{
color: green;
}
}
agora, com fontes sempre dão bugs
sabe oq eu percebi, se vc tiver usando elementor anteriormente de aprender CSS e HTML vc já vem com as ideias pré estabelecidas na cabeça...ehheheheh
Video de CSS? Morri
Muito bom!
muito bom