Responsividade na Prática | Masterclass #08

✅ 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

[@realdrumfan]

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: __

[@joavitt]

Isso é muito interessante. Obrigado!

[@Cookieukw]

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

[@jukkaverissimo2687]

Cara, a didática do Mayk Brito é simplesmente uma das melhores que vi até hoje !! Parabéns vc é fenomenal 💜💜🚀

[@maykbrito]

Po. Muito obrigado 💜

[@rocketseat]

Que massa Jukka! O Maykão é fera mesmo 💜

[@RegisCrysis1]

Top mesmo, dúvidas nenhuma sobre responsividade , vlw Maik

[@tiagoleal6985]

irei fã também

[@lucaswyver]

Grande Maykão me inspiro muito nas palavras dele

[@jonathana.9043]

COMO NAO AMAR A ROCKETSEAT?

[@rocketseat]

Opaaa Jonathan!!! Vaaaleu 😍💜

[@danielmoreiradesousa185]

Sempre torrei minha mente com responsividade, porém sua capacidade explicar a responsividade passo a passo foi maravilhosa

[@rocketseat]

Que massa Daniel! Bora aplica isso agora! 💜🚀🚀

[@s0ufeioedai]

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.

[@diogoalves4469]

Sobre esse vídeo aqui eu achei um pouco complicado para entender. Muito por cima se adicionasse um pouco de detalhe séria ótimo.

[@Cookieukw]

@@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

[@Fabioeagle]

eu posso usar esse projeto pARA MEU GIT HUB COMO APRENDIZADO

[@newton892]

Ae, como eu consigo um trabalho remoto ou alguns freelas? Meus pais trabalham com vendas. E devido ao decreto do meu estado(PA/Belém), não podemos abrir nossa loja; e estamos sem uma fonte de renda por isso. O dinheiro reserva esta quase acabando e particulamente eu estou preocupado. Sei programar Em Javascript/NodeJs, Python e sei mexer o básico com Html/CSS. quem puder me ajudar com dicas ou indicações é de grande ajuda. Desde já, agradeço

[@LucasFavaretoSantos]

irmão, achei esse site www.99freelas.com.br/ , procure sites relacionados a esse e se cadastre em todos, vai ficar tudo bem

[@newton892]

@@LucasFavaretoSantos Eu to aprendendo WordPress na marra😅

[@danielamaral7310]

@@newton892 está dando certo mano?

[@newton892]

@@danielamaral7310 ta indo, to me virando. Porém, to ganhando pouco Me falta conhecimente mas estou estudando, trampando e uma hr vai ter que dá certo

[@gabrielsoares9405]

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?

[@rafaelalvesduarte4928]

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.

[@rocketseat]

Que bom que você gostou, Rafael! Ficamos super felizes por aqui 💜

[@williamalves471]

mano os cara é muito foda na moral, de longe os melhores(rocketseat).

[@renatosl165]

POR FAVOR, façam um vídeo de responsividade no React Native, sempre apanho pra isso ☹️

[@Gaimo_]

Tanto o *vh* quanto o *vw* podem sim passar de 100, pode usar por exemplo 125vh e ele vai ocupar 125% do viewport height.

[@Cookieukw]

Sim

[@RicardoCaldasGuitarra]

1:05:05 Você não sabe o quanto essa parte fez bem pro meu TOC kkkkkkk

[@rocketseat]

Hahahaha verdade! 😄💜

[@delanoalmeidafilho1389]

5:23 alguem pode sabe de um video que passe esse bizu de usar um card como modelo e criar os ostros dinamicamente com js, achei mt bom, pois deixa o html bem limpo

[@caynaboaes]

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!

[@lucaszanin7338]

otimo conteúdo, estou quebrando a cabeça com a resposividade e esses menus hamburguer, obrigado!

[@rlmn9468]

E ai pessoal !! Fal dev!!!! Tem como fazer isso usando Typescript e React JS?

[@reuelsiIva]

Aplicar body{overflow:hidden} na classe "on" não resolveria?

[@lisandredarioli5364]

Alguém sabe o porquê do 1fr no lugar de auto no grid-template-columns?

[@HumoRado222]

Sou iniciantes e até me dou bem fazendo páginas, o problema é quando tenho que deixar responsiva pro mobile por exemplo, fica uma desgraça. k

[@vitorialuiza9236]

Mayk você fez o menu hamburguer utilizando o html, mas costumo utilizar icones do fontwasome. Qual é o mais ideal?

[@fabioleonam]

O 62.5% que o Mayk coloca no inicio do video significa dizer que agora o root não é mais 16px, e sim 10px, certo? Então quando a gente coloca 1.4rem/2.5rem seria tipo 14px/25px só que com "rem" possui uma flexibilidade. É isso?

[@leozzaoocorbi7486]

Cara, qual a extensão que você usa para ver as modificações que ocorreram na linha do seu código ?? Esse vídeo me ajudou muito!!!! TOP DEMAIS !!!!

[@denisvazevedo]

GitLens

[@Fabio-Fornasier]

Olá Mayk, por acaso vc acha bom para fazer a responsividade dos elementos no Site usando um Max-width seguido com a width do Elemento sendo 90% ~ 0%. Oque você acha desse tipo de aproximação pra responsividade?

[@_gabrielfratelli]

Tem vídeo do mediaquery no styled-components? faz ai por favor

[@hugosimoes6332]

Obrigado Mayk, estou tentando melhorar meus conceitos e esse vídeo me ajudou muito!

[@rasag1]

O meu javascript está dando dizendo que o menuSection is null alguém poderia me explicar pois sou iniciante em javascript

[@alexcamposdesouza]

Mayk, sua didática e ótima, me tira uma dúvida, no video, mais precisamente aos 00:24:52, você usa uma estratégia de ver o que tinha no código, depois que fez uma alteração acidental.. Qual procedimento usou?

[@chuvacaindo]

Do lado da linha do código fica uma corzinha, é só clicar que ele mostra uma "linha do tempo" das alterações que voce fez por ali.

[@lolswan3100]

Preciso estudar programação pelo discord mas a maioria só tem entrado pelo horário tipo de madrugada..alguém livre?

[@felipefee1577]

Cara tenho uma duvida, eu fiz exatamente como você apresentou no video, porém quando abro em um dispositivo mobile os elementos (div) não ocupam 100vw, ele deixa um pequeno espaço vago a direita. Você poderia me ajudar a corrigir isso? o site é wemarried.site

[@brunoscheneider1442]

Se você não aprende com Mayk Brito, esquece! Você não aprende com mais ninguém. Lord Mayk, you're great!

[@rocketseat]

A didática do Maykão é sensacional mesmo, Bruno! 💜

[@CyberWorld7x]

Rapaz, depois dessa aula eu vi que a responsividade não é nenhum bicho de sete cabeças kajskk.

[@thescriptkiddie]

O que quer dizer quando faço ".menu-section.on" no CSS?

[@TheSkitersGFX]

Alguém talvez consiga me ajudar? Quando eu tento mandar o texto do menu para o meio da página com o flexbox ele manda o toggle junto :/

[@calvinteixeira1087]

É engraçado o mayk ficando incomodado com pequenos pixels que não deixam o menu-toggle alinhado kkkkkkkkkkkk eu sou da mesma forma, se não tiver no mínimo detalhe parece que não dá pra deitar a cabeça no travesseiro, isso te assombra

[@CaiqueMoraes93]

Cara!! Que vídeo sensacional. Aprendi demais, adotarei esses conceitos. Muito obrigado. Você tem uma aula sobre aqueles modais? Como você criou?

[@rasag1]

Coloquei a chamada do javascript no head do html que carregava primeiro antes do html e dava erro menuSection null agora a chamada está no fim do html corrigiu o problema.

[@zeckinho_]

Pqp sem meu Mayk Brito eu não consigo, o cara com essa didática ensina até criança!

[@ederhayduki718]

Boa noite Mayk tudo bem? qual o tamanho mínimo que o site deve ter para que os elementos não quebrem? por exemplo: se eu for reduzindo a tela vai chegar um momento que não será mais possível o site redimensionar os elementos sem haver uma quebra. como tratar isso? é boa pratica colocar um tamanho mínimo?

[@matheusmosca3665]

Faz um vídeo com TypeScript e typeorm

[@rocketseat]

Fala Matheus! Tá na lista 🚀

[@Thiago-jm7gr]

Uma forma de construir o menu hambúrguer sem ter que ficar ajustando pixel no olho: *1.* Dá margin top e bottom *somente na barra do meio* *2.* Display none somente na barra do meio. Isso fará com que a barra de cima e a de baixo fique coladas, pois só quem tinha margin era a do meio, que agora não existe. *3.* Na propriedade transform, usa o rotate e o transtaley, ao invés do translate *4.* Aqui vai o truque: a soma dos dois translatey (barra de cima e de baixo) tem que ser exatamente igual ao height das barras (que são iguais). Porém, o translatey da barra de cima deve ser positivo e o da barra de baixo, negativo. *Exemplo:* suponha que o height das barras seja 5px, então o translatey da barra de cima deve ser 2.5px e o da barra de baixo -2.5px *Obs:* Eu sei essa soma dá zero kkkkk, mas entenda como a soma dos módulos. Isso funciona pq estamos deixando uma barra em cima da outra e o rotate por padrão gira em torno do próprio eixo, então o X fica centralizado.

[@lucasjaning4710]

Qual é o nome da extensão que você consegue ver a versão anterior do código, momento 24:52 do video.

[@adenilsoncosta7342]

Fiz o meu site todo em várias sections, segui o tutorial mas quando o menu fica responsivo e vc clica no link não vai para a seção desejada.

[@matheusfelixflaviano7251]

Cara, como que faz essa pesquisa de elementos pra já ir mudando?

[@GustavoSantos-xf3ig]

Mayk, eu te amo

[@TheSanozukez]

Estou tentando seguir o video, fazer o esquema do menu, porém não esta funcionando. meu js esta dando erro escuta do evento. Se alguém puder me ajudar agradeço yamanakafilho.com.br coloquei o código online pra poderem ver se encontram o que eu errei.

[@joaomarcosfonseca560]

Estou começando, sem vcs que se importam com os outros, seria praticamente impossível aprender dessa forma.

[@rocketseat]

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! 🚀

[@na_panfletos_e_cartoes]

Maik VC saberia me explicar que bizarrice é essa eu acerto as configuaçãoes das media queries usando justamente o dev tools e assim que estiver ajustado os elementos passo os valores pro vs code, tudo certo ao abrir o projeto no browser sem abrir o dev tools as mudanças as vezes não vem como coloquei e apareceu no dev mesmo confirmando os valores no editor como falei ex: fui fazer as configurações em 597 px no dev tools tudo no seu devido lugar passei os valores para o editor na media queries dos 597px ao fechar o dev tools e deixar o browser na forma comum o footer estava todo bulgado mesmo no dev tools eu ter posto ele na forma correta não entendi nada e os valores sáo mesmos tanto no dev quanto no editor

[@sheldorgames]

Muito boa a aula, mas os links de imagem não estão funcionando difculta um pouco!

[@reuelsiIva]

Fiquei esperando testar a responsividade do texto alterando font-size no root

[@15alef]

Alguém sabe se ainda tem e onde encontrar o link do projeto?

[@arthurnevesduarte5944]

como vc vê como fica na tela dos dispositivos ( android, apple . etc)

[@Claudio-vj6nm]

Bom dia, esse video faz parte do qual curso???

[@demetrio_10]

Eu estou aprendendo muito com Maiky, já estava pensando em mudar de área e acabei decidindo continuar em programação.

[@atlas_bhz4556]

Qual comando ele usou para pesquisar dentro do css?

[@_Gohara]

Incrível conteúdo Premium no plano Free! 🚀

[@JardelSG]

esses que dão deslike só pode ser desenvolvedor invejoso kkkkkk

[@bornfromshadows]

cade as outras masterclass? não as consigo encontrar.

[@brunosantanamds]

Eu ainda não entendo nada de css grid mais acho que já fiquei especialista kk, esse video é muito top, na moral !!! A explicação então nem se fala, perfeita. OBS: Estou retornando aos estudos de web 😜

[@rocketseat]

Hahaha que massa Bruno!! Valeeu pelo feedback! 💜💜

[@Saudavelpro]

Eu prefiro usar realmente o root quando uso medidas em e rem, ao invés do html, por ter um pseudo-seletor com especificidade maior

[@maykbrito]

Show Raphael! Ótima dica!

[@dudzcec]

Cara... sensacional

[@MarceloLynx]

Vale mais que muito curso por ai, gratidão Maykão!!!

[@rodolfocoprodutor]

Tem vídeo ensinando a fazer esses cards ai com o JS?

[@yurealveshenrique9196]

Onde fica disponível o link dessa pagina .

[@glproducao]

Show!!! Uma dúvida: Primeiro construo o site em pixel e após faço as mudanças para um layout fluido?

[@rocketseat]

Faala, Lucas! Tanto faz. Você pode fazer mobile first, ou seja, pensando primeiro no mobile e todo fluído, e depois, adaptar ele para o desktop.. ou, como desktop first que é quando você pensa ele todo no desktop, e depois, faz a portabilidade para o mobile 💜

[@mariaeugenia6940]

@@rocketseat tg

[@analogicplayerff4630]

Na mídia só funciona com rem ou da para fazer com em

[@AgnaldoPinheiro]

Excelente. Aprendi muito. Agradeço por compartilhar tanto conhecimento. Sucesso à você.

[@lucasdossantosgomes8312]

37:35 vc altera o tamanho doq q não mostra na tela???

[@fenrir4128]

Rafinha bastos virou programador

[@guilhermemolinatrindade3344]

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 💜

[@ichinose7541]

picture é só um termo semantico. Na prática é apenas uma div

[@marcielledepaula3373]

❤️❤️❤️❤️

[@romuloalencar9652]

quando dou um zoom no layout ele quebra, porque?

[@danilosampaio4830]

Vlw Rockeseat, vlw Maikão. Seu vídeo quebrou meu galho. Tirou muita dúvidas de responsibilidade

[@lucasalmeida-yp2sr]

aula muito top, muito necessária ela

[@llongaray77]

Mds quanta enrolação!!! crl

[@thescriptkiddie]

===SALVANDO MEUS MINUTOS IMPORTANTES=== Menu Hamburger - Começa: 44:20 / Termina: 1:05:10 Explicação função Toggle() - 1:00:18

[@micaelkeys]

Como que eu uso esse meta viewport no react?

[@MrPanrox]

Olá.. obrigado por disponibilizar o conhecimento.. mas me surgiu uma dúvida, o que seria uma sessão HERO na semântica HTML?

[@eduardoimagno3987]

como que faço essa pesquina por palavras no meu arquivo? video muito bom, obrigado pelo exelente conteudo, ajudou bastante

[@matheusempixels]

Ctrl+F!

[@RicardoBelfort]

Fala Mayk blz, tem algum plugin pra aparecer o mockup do smartphone ai no browser?? Abs

[@maykbrito]

Fala Ricardo beleza? Aqui pra mim aparece sem plugin mesmo. No seu DevTools não?

[@RicardoBelfort]

@@maykbrito bom aqui não aparece, mas utilizo windows, não sei se tem alguma diferença.

[@JoaoOliveira-fz2nv]

@@RicardoBelfort , no windows deveria aparecer

[@jpedroschmitz]

Perto de onde você troca o dispositivo, tem 3 pontinhos bem no canto direito. Só clicar neles e marcar a opção "Show device frame"

[@RicardoBelfort]

@@jpedroschmitz valeu meu querido, funcionou... é o tal dos 3 pontinhos que ninguém nunca dá valor...

[@israelruano]

Mayk ou amigos, como faço para ter essas opções de visualização no Vscode que é apresentado no inicio deste video? ipad, iphone, tablet .... Obrigado

[@aroldogoulart6216]

Master Class incrível! valeu cada segundo de aula! Arrasou :)

[@deborallyon]

A melhor explicação que já tive. Top. Parabéns.

[@Pedrodias4562]

top umas das melhores explicações de responsividade!!! parabéns pela aula!!!

[@Paulo_Mateus]

36:34 Eu posso fazer isso sem ser uma grid?

[@marcusvinidp]

Salve! Ótimo vídeo, me tirou várias dúvidas com um conteúdo bem direto e rápido. Mas estou com dúvidas para fazer o JS fechar o menu "hambuger" automaticamente quando clico em alguma das opções de link do menu

[@natanmiguel2977]

Marcus, conseguiu resolver? estou com a mesma dúvida.

[@pamelaneiva5136]

Assistindo agora em 19/03/2021. Maykão é o cara. Como é que não vi isso antes. Obrigado, Deus abençoe muito. Seguindo VC...

[@hitoshiyanaguibashi]

Excelente aula! Parabéns ao Prof, didática muito boa!

[@caiovinicius8448]

Eu gostei, porém acho mais fácil desenvolver primeiro pensando no mooble

[@viniciusvidal4894]

Ótima didática! Super aula. Gostaria de saber quando tem largura iguais e alturas diferentes. Como fazer em média queries. Exemplo: 320x580 320x 480.

[@rodrigodeoliveira9359]

você explica muito bem !!

[@ducouteausect3231]

Essa porcentagem do font-size no html é relacionado a que? À porcentagem do font-size padrão da página?

[@arturosmar6178]

me ajudou bastante esse video!!

[@Elldevv]

Conteúdo top, vou assistir tudo

[@cabral.creations]

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!!!

[@carolfreitas_devjr]

Você fazendo parece tão fácil hehe Parabéns pela didática!!! Show.

[@niltonsilvaferreira6849]

Muito bom, parabens!!!

[@robertmendes3242]

Essa estratégia de deixar as fontes responsivas alterando o padrão na raiz da página inegavelmente elevou os meus conhecimentos

[@danielwaiter9990]

Onde fica o código dessa aula ?

[@HopeUnveiled]

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!

[@ailtonfranciscodiniz5055]

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.

[@rocketseat]

Valeeu por esse feedback incrível, Ailton! 💜💜