Responsividade na Prática | Masterclass #08
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- ✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/marat...
Fala Dev, Mayk Brito na área! 💜
Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?)
Na Masterclass de hoje, vamos usar estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos.
Utilizaremos também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo.
Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo.
Se você ainda não sabe muito bem como fazer layouts responsivos, está começando nesse assunto, está um pouco inseguro, fique tranquilo, vem comigo que eu vou tirar suas dúvidas!
Espero que faça sentido pra você. 🥰
Bora codar? 🚀
Github: github.com/Roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
30:09 esqueceu uma que não vem quando usamos a exclamação no VSCODE, a *user-escalabe=no*
Ela impede que o usuário dê zoom na sua página, o que torna bem chato, porque as vezes o usuário mobile acaba dando zoom sem querer na página usando os dedos, e com isso ele vai acabar vendo o site com um zoom que ele não percebeu que deu, e vai tornar a experiência com a interface bem desagradável porque ele vai achar que o site é daquele jeito ali.
Então sempre usem a função *user-escalable=no*
Ate porque se a página estiver responsiva, não tem o porquê do usuário precisar dar um zoom.
Vai ficar assim:
__
Isso é muito interessante. Obrigado!
Tem um negocio do css também que se você pesquisa, acha um código do stack overflow(pesquisa por "disable text selection css"). Basicamente vários atributos para diferentes navegadores desabilitar a seleção de texto, que acho que também tira experiência porque se o cara selecionar qualquer elemento fica azul
Cara, a didática do Mayk Brito é simplesmente uma das melhores que vi até hoje !! Parabéns vc é fenomenal 💜💜🚀
Po. Muito obrigado 💜
Que massa Jukka! O Maykão é fera mesmo 💜
Top mesmo, dúvidas nenhuma sobre responsividade , vlw Maik
irei fã também
Grande Maykão me inspiro muito nas palavras dele
eu estou estudando css a 2 meses. já assisti aulas de praticamente quase todo mundo nesse youtube. mas esse cara é diferenciado demais. pra mim, ele e o gustavo guanabara são os que tem as melhores didáticas. ensinam de formas simples e com exemplos pra pessoas que estão aprendendo. mas só um adendo, você poderia explicar os atalhos que você vai usando ao longo do curso. por exemplo: você usou o "Ctrl + F" pra poder achar os elementos de "980px" no código. pra quem é leigo, se mata pra achar.
Sobre esse vídeo aqui eu achei um pouco complicado para entender. Muito por cima se adicionasse um pouco de detalhe séria ótimo.
@@diogoalves4469 Nada a ver. As pessoas sempre vão ter dificuldade com coisas mínimas. Se você se esforçar, daqui a pouco já sabe isso aí de có. Se for ficar detalhando cada coisa fica muito chato e longo
Sempre torrei minha mente com responsividade, porém sua capacidade explicar a responsividade passo a passo foi maravilhosa
Que massa Daniel! Bora aplica isso agora! 💜🚀🚀
Cara, sem brincadeira alguma..
Foi a melhor aula que já assisti no youtube, fluída, bem explicada, vou assistir de novo e tentar aplicar os conceitos no site que estou criando, o 1ºde muitos!
Linda aula.
Que bom que você gostou, Rafael! Ficamos super felizes por aqui 💜
mano os cara é muito foda na moral, de longe os melhores(rocketseat).
Tô fazendo um site responsivo pela primeira vez, aí do nada eu pesquiso sobre o assunto e vejo essa aula incrível de responsividada. Não poderia ter achado vídeo melhor! Obrigadão!
Pqp sem meu Mayk Brito eu não consigo, o cara com essa didática ensina até criança!
Fico feliz de ver uma empresa apostando nesse modelo de conteúdo que empresas de outros países já vêm fazendo, e que além de dar certo, também ajuda muita gente, como por exemplo o canal da Traversy Media.
Parabéns pelo trabalho!
Que bom que curtiu brother!
Legal Lucas! Que bom que curtiu 💜
A Rocket é a melhor do mundo!
O melhor curso! Bem reconhecido no território nacional.
E o melhor matérial para quem está iniciando, tem cursos pagos que não chegam a esse grau de perfeição, de qualidade de conteúdo, e com uma equipe deslumbrante e brilhante!
Parabéns!
otimo conteúdo, estou quebrando a cabeça com a resposividade e esses menus hamburguer, obrigado!
Se você não aprende com Mayk Brito, esquece! Você não aprende com mais ninguém. Lord Mayk, you're great!
A didática do Maykão é sensacional mesmo, Bruno! 💜
comecei a estudar responsividade no explorer e vim dar aquela revisada, os ensinamentos do mayk é espetacular.
Boa Mike, estava a tempos para assistir esse vídeo, e agora ao construir meu site pessoal estou tendo muito trabalho para ajustar ele as telas mobile, até estou conseguindo resolver, mas o trabalho está imenso. Daí veio a necessidade de assistir finalmente a esse vídeo que estava guardado aqui carinhosamente para o momento ideal. Enfim, ajudou imensamente como sempre! Didática e cuidado na edição de vídeos perfeitas! Obrigado a todos!
Caras Maykão vc é o cara meu, sua didática é extraordinária... Você , Diego e Gustavo Guanabara são os melhores...
Frontend é o meu ponto fraco a vida toda, mas com esse vídeo excelente, me ajudou a entender e como aplicar o css. Parabéns e obrigado pelo conteúdo.
Mano, o Mayke é foda puta merda, eu estava apanhando muito pra ajustar um pequeno bug que nao me permitia alterar a responsividade do site, estava torto, e em 9 minutos de video, eu consegui arrumar isso com uma simples dica, plmds, o cara é um monstro sagrado!!!
Obrigado Mayk, estou tentando melhorar meus conceitos e esse vídeo me ajudou muito!
Ei cara, não sei como agradecer. Aula objetiva, bem explicada, aprofundada com simplicidade. Vc é 10! Obrigado a Rocketseat também. Me ajudou muito. Abraço!
Uouu, a explicação do Mayk é muito boa. Tinha ficado com uma dúvida em relação a tag porque no vídeo o Maykão coloca e no meu código eu coloquei o resultado fica diferente do tamanho da imagem, mas deu para entender do mesmo jeito. Valeu Rocketseat 💜
picture é só um termo semantico. Na prática é apenas uma div
Comecei a desenvolver minha página pessoal e to querendo fazer ela responsiva pra qualquer tamanho de tela. Encontrei essa masterclass na hora certa!
Estou começando, sem vcs que se importam com os outros, seria praticamente impossível aprender dessa forma.
Boooa, João! 💜
Nosso principal objetivo é justamente esse, ajudar as pessoas a evoluírem e alcançarem o próximo nível! 🚀
Você já faz parte da nossa comunidade no Discord, João!?
Lá tem milhares de devs que, com certeza, podem te ajudar nessa caminhada! 💜
Vou te deixar o link da nossa plataforma, caso queira fazer a integração e entrar no nosso servidor: app.rocketseat.com.br
Já que você está iniciando, acho que seria bem bacana você acompanhar o *Discover* , com aulas básicas de html, css e js!
Seja bem vindo ao mundo do desenvolvimento! 💜
Aperte os cintos e voe com a gente nessa! 🚀
Eu estou aprendendo muito com Maiky, já estava pensando em mudar de área e acabei decidindo continuar em programação.
Caraaaaaa... eu já assisti uns 200 vídeos, mas nunca ví um tão bom quanto esse, parabéns Brito!
hahaha 💜💜
Muito obrigado Mayk e toda Rocketseat pelo assunto disponibilizado. Tá me ajudando muito!! didática excelente, aulas diretas e muitíssimo bem explicadas. Assim que estiver trabalhando na Área irei comprar o que eu puder de curso de voces, tanto pra me aprimorar, quanto pra agradecer. Muito obrigado.
Cara... sensacional
Assistindo agora em 19/03/2021.
Maykão é o cara.
Como é que não vi isso antes.
Obrigado, Deus abençoe muito.
Seguindo VC...
Video brabo de mais... você entra nele para supostamente aprender design responsivo, mas na verdade vc aprende a criar modal, menu mobile e muito mais!
melhor explicação possível de um site responsivo vlw a pena ter conhecido o canal
Essa estratégia de deixar as fontes responsivas alterando o padrão na raiz da página inegavelmente elevou os meus conhecimentos
Esse Mayk Brito na área é muito top!!!!!!
E esse canal também é muito top, parabéns pessoal!!!!!!
PELO AMOR DE DEUS, ISSO NAO É UMA AULA, É UMA LIÇÃO DE VIDA !! QUE CARA SENSACIONAL
parei no 57:40
quando eu tiver um pouco mais avançado no JS eu volto, ótimo vídeo, ja aprendi css grid graças a vocês!!
Esse aqui é um dos melhores vídeos, sempre recorro a ele nas dúvidas de responsibilidade
Show de bola parabens didatica inpecavel Mayk Brito na área! 💜
Valeu Alan! :D
Vlw Rockeseat, vlw Maikão. Seu vídeo quebrou meu galho. Tirou muita dúvidas de responsibilidade
COMO NAO AMAR A ROCKETSEAT?
Opaaa Jonathan!!! Vaaaleu 😍💜
A melhor explicação que já tive. Top. Parabéns.
Esse cara é sensacional! Obrigado pelo conteúdo! Não tem a menor ideia de como esta sendo importante pra mim.
Obrigado Mayk pela boa didática e dedicação. E obrigado ao Diego por disponibilizar a aula. 😃
Mano, esse vídeo é demais! Tem me ajudado bastante a construir os layouts e fazer a responsividade de forma ideal e eficiente. Recentemente, tive uns problemas ao utilizar o viewport height quando existe um campo de entrada de dados (input) uma vez que ele aciona o teclado virtual e a janela é redimensionadas mudando o tamanho dos elementos com vh. Alguém conseguiu achar uma solução para esse problema?
top umas das melhores explicações de responsividade!!!
parabéns pela aula!!!
Olá, com certeza vc deu seu melhor, e conseguiu passar muito bem, obrigado.
Mayk, eu te amo
Você é a lenda Mayk, te respeito MT mano.
Muito bom cara. Esmiuçou tudo!
Teve assuntos que não imaginava fazer como o menu x. Muito bacana. Obrigado por compartilhar.
MUITO BOM!!! a sua explicação é das melhores que eu já encontrei por aqui, show . Pena que eu ainda estou engatinhando na web o bagulho tá meio doido ainda pra min, é muita coisa pra aprender, não sei se consigo. Mais valeu mesmo vc está de parabéns.
Valeeu por esse feedback incrível, Ailton! 💜💜
Top demais... não tem como não se inscrever após assistir um vídeo tão explicativo como esse !
Vale mais que muito curso por ai, gratidão Maykão!!!
Parabéns Maykão!! Foi insana essa didática! Queria ter encontrado esse vídeo há uns 2 anos atrás hehe 🚀😻👏
Mayk é sensacionaaaaaalllll!!!
Maykão é figura!! Humildade demais!!!
Maykão é fera, né, Arthur!? 💜 😍
@@rocketseat Muito fera! Parabéns pelo empenho de vocês! Tenho certeza que a Rocket vai ainda mais longe e nós vamos acompanhar daqui! Abraço!
Obrigado, mayk brito. Vc é o cara!
As vezes temos a arrogância de menosprezar o CSS, mas quando estamos no campo de batalha e surgem os desafios ai vc leva uma surra do CSS. aula top Maykão.
Já compartilhando com o pessoal de Design que está cursando o modulo digital esse semestre!
Ótimo e muito bem explicado!
Aí sim!! Que massa! Tomara que ajude bastante! Abração💜
💜🚀
você explica muito bem !!
Master Class com Mayk Brito? Awesome!!!
Excelente. Aprendi muito. Agradeço por compartilhar tanto conhecimento. Sucesso à você.
Conteúdo top, vou assistir tudo
Maykao, tu é fera demais. Meta!!!!
Primeiramente na minha opinião o Mayk é o melhor professor , é simples a explicação dele e fácil de compreender.
E sobre as imagens eu posso utilizar na aplicação toda somente imagens svg ?
Mais uma aula maravilhosa com o Britão foda de mais esse cara , ajudou demais a aula tmj👍
Estava esperançoso por este vídeo, Parabéns Maike e equipe rocketseat.
Opa Charles! Muito massa que tenha curtido! 💜
rapaz que video bom,otima didatica
aprendendo mto aqui com o seu video
Caracas tu destruiu nessa aula Mayk, foi muito boa, aprendi muita coisa, thanks very much.
bem mais prático do que colocar clamp em todas as fontes, adorei, obrigada.
Primeira vez vendo uma aula e cara ganhou um inscrito.. Show demais
39:40 só por essa parte já valeu a vida ter visto o vídeo ♥
uma visão geral bem bacana
Uma observação na parte do vídeo onde você fala sobre imagens e a tag . Você cita que com essa técnica o dispositivo não irá consumir recursos 1:23:30, quando na verdade ele consumirá mais banda do que apenas carregando uma única imagem.
Ou seja, com essa técnica a página acaba carregando 3 imagens com resoluções diferentes, porém só estará exibindo uma. Tanto que quando a resolução da tela muda, uma nova imagem surge.
O que então, você quis dizer quando falou que evitaria consumir mais recursos?
Marcos, Opa, essa acho que posso responder.
A ideia só é aplicada em devices difere entre os breakpoints, então quando o usuário acessar de um celular pequeno a imagem baixada será a de baixa qualidade e se acessar de um device grande somente baixará a de alta qualidade ignorando as menores.
Essa aula foi muito boa, acabei agora de assistir e já vou dar replay tomando mais algumas notas. Vale a pena ver de novo!
Abraços
Tanto o *vh* quanto o *vw* podem sim passar de 100, pode usar por exemplo 125vh e ele vai ocupar 125% do viewport height.
Sim
Muito da hora!!!
Sensacional! que aula mágica.
Maykão vai pra cima!
Estou assistindo as Maratonas discovers, mas essas e outras aulas tem muito conteúdo ainda.
Topzera! Tmj
Melhor vídeo que já assisti de CSS
Wooow!
Massa demais, Helânio! 🚀
Colocando na prática assim fica muito mais fácil de entender, né!?
Valeeeeu! 💜 😍
@@rocketseat ôoo, sua didática e preparo da aula é show
Muito bom, parabens!!!
Você fazendo parece tão fácil hehe Parabéns pela didática!!! Show.
Já assisti esse vídeo 3x e sempre aprendo!
Boaa João! 🚀🚀
Aula perfeita!
POR FAVOR, façam um vídeo de responsividade no React Native, sempre apanho pra isso ☹️
aula muito bem explicada um dos melhores professores que assisto !!! tks mayk!!
aula muito top, muito necessária ela
Nossa aprendi muito cara vc é excelente professor explica muito bem
Parabéns pelo seu esforço e didática, alguns videos do you tube tem opções gorjeta tente colocar em seus vídeos muitas gente alem do like adoraria le dar uma recompensaçao pelo seu esforço.
Muito bom Mayk! Sempre mandando muito nas explicações.
Booa Douglas! Vaaleu pelo feedback 💜
massa demais a aula, valeu!
De verdade, nunca tinha tido essa sacada do font-size com o rem kkkkkkkk que aula!
Mto bom mesmo, mais de uma hora e meia de vídeo e passa voando, parabéns mesmo !!!
Faaala Eric! Valeu pelo feedback! Que legal que curtiu 😍
Cara!! Que vídeo sensacional.
Aprendi demais, adotarei esses conceitos. Muito obrigado.
Você tem uma aula sobre aqueles modais? Como você criou?
Master Class incrível! valeu cada segundo de aula! Arrasou :)
me ajudou bastante esse video!!
1:05:05 Você não sabe o quanto essa parte fez bem pro meu TOC kkkkkkk
Hahahaha verdade! 😄💜
mano, me ajudou muito em uma parada que tava fazendo no trabalho.
valeu msm.
vlw maykao, cara você é o cara!
Ele é brabo! 💜
Excelente aula! Parabéns ao Prof, didática muito boa!
Bacana demais. Como sempre Mayk mandando muito bem.
Muito bom! Obrigado :)
Excelente conteúdo e didática, muito obrigado!
Valeeeu, Marcus! 🚀
Maykão é incrível! 💜
Masterclass irada. Vim do NLW 6 indicado pelo Diego para ver, começar a assistir todas
Gostei muito da maneira que foi passada a informação! Ótima didática ❤
Muito bom, Mayk. Mais uma aula espetacular. Tem me ajudado bastante a desbravar o front-end. Muito obrigado.
Maykão é fera demais! 💜
Regis, você já conhece o Discover da nossa plataforma!? 👀
São mais de 400 aulas *gratuitas* abordando _HTML, CSS e JS_ ! 😍
Vou deixar o link aqui caso queira dar uma olhadinha: app.rocketseat.com.br/discover
💜
@@rocketseat sim, eu conheço e já passei por lá. Sou aluno do GoStack. Por sinal, estou sentindo falta dos conteúdos bônus que estavam disponíveis ao alunos.
Excelente aula... me ajudou demais!!!!! muito obrigado
Aula muito boa! didática incrível
Sensacional! Muito obrigado pelo vídeo.