Responsividade para sites - @Curso em Vídeo HTML5 e CSS3

[@tascintra]

Quem não quer ficar colocando o pt-br toda hora na estrutura padrão do html criado pelo snippet pode configurar uma variável de ambiente indo em Arquivo > Preferências > Configurações, depois pesquisa por "variáveis emmet" e depois clica em adicionar item e cria a variável lang e o valor coloca pt-br. Aí todas as vezes que pressionar o ! + Enter ele já vai criar o código padrão com o parâmetro lang="pt-br"

[@brunolemes563]

Obrigado pela dica

[@komai-2706]

herói de mais

[@DevSamir-je7md]

Thank you!

[@viniciusfaria4708]

Nem todo herói usa capa 🗿🍷

[@brunomoraes7653]

Vlw, ajudou demais

[@allan1310]

O que aconteceu em 16:36 foi em razão do Guanabara não ter zerado o marging e padding padrões que já vêm pré configurados no css, para evitar que altere as medidas que a gente determina é sempre importante antes de qualquer projeto definir nas configurações do seu css: * { padding: 0; margin: 0; box-sizing: border-box; } Dessa forma a gente vai garantir que as medidas que a gente for definir vão realmente ter aquelas medidas sem acrescentar medidas extras de padding e margin que já são pré estabelecidas pelas css. Eu zerei essas pré configurações, defini as medidas e fiz o teste pela extensão Window Resizer e pela ferramenta de teste de responsividade do próprio DevTools e ficou 100% responsivo em todos os tamanhos de tela. PS: Ótima aula e explicação, eu consegui fazer o site inteiro mas não consegui tornar ele responsivo, agora to aprendendo bastante sobre responsividade, continuar estudando e praticando, valeu Guanabara!

[@unwlad]

Muito bom, uma dica pra quem está com dificuldade em memorizar o que estudou, tentem só assistir o video sem fazer nada, depois tentem fazer o que o Guanabara fez sem consultar o video, caso surja uma dúvida é só reassistir o vídeo, espero ajudar no aprendizado de alguem, isso me ajudou muito e agora tá bem mais facil pra mim entender o processo.

[@matheusbarbosa9048]

Assim é o Ideal msm

[@PCPC-k5f]

Eu gosto de assistir e ir fazendo, depois assistir denovo e fazer anotações...

[@renanmacho]

@@brigadadoslobos77 a melhor coisa é praticar, a pratica literalmente leva a perfeição. depois que eu terminar esse modulo dois, quero voltar no modulo 1 e fazer um projeto com tudo que o professor ensinou no primeiro modulo, mas vou criar um projeto só pra praticar mesmo, pq quando mais a gente pratica, mais fácil fica de entender o conteúdo.

[@wyllamrenato]

Melhor escrever tudo o que dá, depois tentar replicar, o que não lembrar volta no caderno e vê. Mais rápido do que ficar assistindo o vídeo várias vezes.

[@josekhalil8348]

Acho que todos estão certos, cada um desenvolve uma técnica de memorização, eu por exemplo não faço nenhuma anotação, mas vejo os vídeos todos os dia três a quatro vezes por dia quando vou para o trabalho no ônibus e na volta também

[@robpontojunior]

Galera, quando o "Ctrl+Espaço" não tiver função dentro "srcset", é só ir até o destino na pasta lá na esquerda do vscode e clicar com direito sobre a imagem "irina-blok-pq.jpg", clicar no "Copy Relative Path", depois colar dentro do SRCSET. 😎😎 Estilo jaiminho - "Tudo pra evitar a fadiga" kkkk

[@anonimodosite3357]

Me salvou maninho, digitando a mão não tava funcionando mesmo digitando tudo certo, vai entender... !+...............

[@davidgomes9442]

vc é um amigo

[@nataliavitoria1537]

obrigado amigo você é um amigo

[@cruzzzZZz-d5w]

me salvou, valeu

[@lucaswillian7941]

pode se deixar a imagem com responsividade desta forma: img{ min-width: 10%; max-width: 100%; } a imagem vai ficar com o maximo do tamanho que ela tem originamente, e com o minimo adquado para celular. se colocar somente: img{ width: 100%; } a imagem vai espandir mais doque o tamanho que ela é originalmente.

[@dreyzico0999]

mito.

[@na_panfletos_e_cartoes]

Mano vc matou a charada cara ,coloquei o main min:380px, max:1220px e as imagens do jeito que vc disse 10% e 100% e margem auto, ficaram todas centralizada e flexíveis obrigado. ps:estou fazendo um site paralelo a esse do profê guanabara,

[@lucaswillian7941]

@@na_panfletos_e_cartoes fiz alguns tb paralelos. que bom que ajudei man TMJ

[@karinaalmeida103]

só com o 100% minha imagem ficou minuscula, valeeeu

[@rakavargas]

@@dreyzico0999 vlw irmão!!! eu ja tava xingando o papai Smarf pq tava ok as imagens e do nada tava gigante. ajudou mto!!!

[@Hector-np3zi]

Cara, eu estou amando esse curso! Um conteúdo valioso que deve ser valorizado, obrigado Gustavo Guanabara!

[@toddynho_0139]

Uso o Windows a anos e ia morrer sem saber dessa onda de "sacudir" hahaha Vivendo e aprendendo, didática incrível!

[@Lucao477]

2 kkkkk

[@guilhermechaves3833]

EU aí

[@engracadinho0890]

Max-width Ex:max-width:300px; (Tudo que estiver acima de 300px carregara a imagem grande,se diminuir ou chegar a 300 px, carrega a imagem pequena) Min-width Ex:min-width:300px; (Tudo que estiver entre 1px e 299px carregara a imagem pequena,se ultrapassar os 300px carregara a imagem grande.)

[@messidaquebrada8536]

MUITO OBRIGADO

[@thiagodemelo3921]

Faz u tempo q n visitava o canal. Realmente n esperava ver o Guanabara de cabelo azul

[@ViniciusAlccantara]

passando pra deixar uma dica pra quem teve dificuldade com o window resizer, o meu quando abria a janela pop-up ele não aparecia do lado como em 9:43 . Para fazer aparecer eu cliquei na area branca do site (no popup) e aparece a opção de abrir as extensões por ali, funcionou. Antes estava somente abrindo o popup sem as configurações!

[@caio4599]

Para quem tá com dificuldade na parte do pop-up no minuto 16:09, assim que você clicar no ícone de abrir o pop-up e caso abra apenas uma nova aba do site, clique no site com o botão direito do mouse que vai aparecer a opção "Show the resizer window" que irá aparecer o pop-up ao lado logo em seguida

[@gabrielcamargo3160]

Impossível não amar o Guanabara! O cara faz um serviço social fantástico! Vi muito dele na Fundação Bradesco. O cara é 10+

[@douglaswhisper]

Lembrando gente, que assistir o vídeo sem curtir e indicar pros colegas, não é algo viável. Volta lá nos vídeos, curte todos e passa pro teu amigo que ta afim de abandonar o trabalho horrível que ele tem. Vai que ele gosta e descobre que pode ser um bom profissional nesta área?

[@LuanHenrique-pc3nn]

16:21 Isso pra mim foi sensacional KKKKKK

[@Luis-Felipe1999]

Pra mim tbm kkkk, tentei fazer no linux tbm, mas não deu certo

[@beatrizrodrigues9070]

kkkkkkk eu ameei

[@adrianapenas9690]

Que aula excelente!! Anotando tudo. O melhor é que, quando eu fiquei em duvida em max-width e min-width, voltei nas minhas próprias anotaçoes das aulas anteriores de picture e consegui entender melhor.

[@navegandoemc0d1gos]

14:47 Não funcionava até eu achar uma solução, basta ir na parte de extensões e instalar uma extensão chamado "Path Autocomplete". Depois irá funcionar normalmente com o "CTRL+ESPAÇO".

[@rogerioeduardoo]

Perfeito meu nobre, isso ai !!!

[@caio4599]

meu herói

[@maninisiemel]

De tudo que aprendi até agora essa de sacudir a janela foi a melhor coisa possível.

[@Gostosolucas]

Para quem está com dificuldades na parte da troca da imagem, preste atenção na tag em que você envelopou a , como eu sou burro, envelopei com a tag ao invés de . Bons estudos

[@layanalobo6772]

Eu estou amando aprender HTML E CSS dessa forma. Conteúdo e didática incrível!!

[@zoltancaputo9562]

Excelente ... sem igual e já estou na plataforma! Didática simples , exercícios e pdf de nível superior!!!! Guanabara é Ninja do Code!

[@kauanmeirelles9198]

Para quem ta com o problema da imagem ficar pequena, eu tirei o img do css (eu comentei o código) e funcionou

[@ev3lynn141]

Excelentes cursos Guanabara, parabéns! A sua didática é muito boa. Todos os cursos que faço no Curso em Vídeo nunca me desapontam. 👏🏽

[@anthonysantana5021]

Cada aula do Guanabara é muito enriquecedora em conhecimento. Eu que não sabia absolutamente nada de programação estou aprendendo tanta coisa que jamais imaginei ser capaz de faze-lo. Muito Obrigado a toda equipe do curso em video.

[@littlejhon7746]

Pessoal, existe uma extensão no vscode que faz com que você consiga abrir automaticamente seu navegador e atualiza, a partir, do que salvar no vscode... O nome é Live Server, bons estudos!

[@rachel77248]

O melhor professor de todos!

[@Luclb94]

Que isso !? Conteúdo muito top 👏👏👏👏👏👏👏👏👏👏👏👏👏 muito mesmo, me ajudou muito

[@MatheusOliveira-ou1gf]

Muito bom mestre, não entendia nada de responsividade e graças a essa aula consegui entender e vou assistir ela de novo!

[@flavi_oow]

Uhullll!!!! Eu estava esperando muuuuito por esse vídeo, eu tava com um site mais ou menos feio kkk, mas acho que agora ele vai ficar lindão B)

[@juelmapereira4277]

Obrigada Deus vos enviar-nos este ser!!

[@gleysibianchi3807]

Aulassa como sempre... Acho que já estamos quase acabando o módulo 2 ao considerar a ementa.

[@caioalexandresousaleme2334]

Maravilha Guanabara, estava esperando ancioso pra aula de responsividade, seguindo em frente...

[@Dariuh_Prince]

prof faz um curso de cssgrid e flexbox outro de animacoes usando css e js... abracos de mocambique.........

[@guilhermechaves3833]

@CursoemVideo

[@mamaco3886]

eu usava uns código muito grande pra fazer o site ficar responsivo. mds que simples

[@victorreisdavid]

Só tenho 1 coisa a dizer Gustavo Guanabara é foda!

[@retrorami]

Então, temos um problema aqui. Usando exatamente as medidas que vc citou (min-width: 320px e max-width: 800px) no main, quando abro o devtools, ele fica com barra de rolagem horizontal se eu setar o viewport pra 320, o que em tese não deveria acontecer. Eu resolvi o problema da rolagem descendo o min-width do main pra exatos 260px, o que nos deixa com 60px de diferença pro seu código, e não faço ideia de onde vêm esses 60px. Ainda, tive que usar o Mozilla, pq no Chrome a janela não diminui abaixo de 500px (procurei até no stack overflow sobre isso), e a extensão indicada da erro quando tento selecionar o viewport de 320.

[@gui_visotto]

pra galera que tiver essa dificuldade com a extensão, tem que usar a opção "Open as a popup", quando fizer isso vai abrir uma "copia" da sua janela, essa copia pode ser redimensionada até um valor menor que os 500px dos chromium.

[@pedroaugustolimaronchi6352]

Que curso meus amigos!

[@GuilhermeHenrique-fp1wo]

Caraca, valeu demais. Top demais me ajudou muitoo!!!

[@joaopedro6001]

dá pra fazer no devtools as mesmas coisas que o guanabara fez com aquela extensão

[@thiagowilker6003]

Obrigado professor!

[@vitorfontes4202]

Obrigado pela aula

[@welderressutti5364]

Conteúdo muito valioso!!!

[@marcosyuri443]

amei tudo aqui desde a intro ate o conteudo

[@mauricioscain6466]

muito bom =) Quero ver com flexbox agora

[@martins3389]

Salve Mestre Gustavo Guanabara, Aqui um dos Gafanhotos mais antigos, gostaria de fazer um pedido. Poderia fazer um Curso de Adobe Premiere? Muito Obrigado!

[@rodrigoramos1x]

Tem lá no Estudonauta, se não me engano

[@marcusribeiro5759]

Show!!

[@tiago.sampa_]

📝 REVISÃO: *Extensão Chrome recomendada:* Window Resizer *Largura Responsiva:* min-width: 320px; (tela de cel mais antigos) max-width: 800px; margin: auto; *Para imagens:* img { width: 100% } - Envelopar a junto com ' source:media ' dentro da tag , para imagem dinâmica (que altera de acordo com a largura da tela). *Ex:*

[@MarcoCastro_]

Não consegui pega a Extensão

[@dannisiqueira1997]

Ótima aula, valeu professor!

[@edoardopazz]

Achei que não ia ter kkkkkk melhor professor 🖖🤓

[@viniciusgabriel942]

noooosa, esperei tanto por essa aula!!!

[@alyssonandrade3128]

Professor incrível!

[@enriquecerdenaalauk8084]

Parabéns !! que cabelo doido rsssss!!!!!

[@PatsFerrer]

Ele ensina até coisas do windows! Ahahahhaa.. Não existe professor mais gracioso que esse!

[@guilhermemarques1835]

show o video, mais fiquei com uma duvida, não usa media query ?

[@andretakayama2088]

Excelente aula, professor

[@tomsantos220]

show professor me ajudou demais obg !!

[@raise8715]

guanabara tu é top cara

[@hebergoncalves4981]

Obrigado, seu lindo.

[@Ryuk_oOmen]

Que sdds🥺❤️

[@GustavoHumanes]

16:20 eu fiquei tipo " NeM fUdEnDo ", eu não sabia dessa kakaakaakak

[@beatrizrodrigues9070]

Valeu professor 🖖

[@paulogomes724]

Muito bom o conteudo!

[@Ryuk_oOmen]

Ebaaaa❤️

[@wallisonmota4138]

Preferi utilizar o width 100% do quer usar duas imagens, achei assim mais interessante código: main{ background-color: #ffffff; /* 20px */ padding: 1.25em; /* 688px */ max-width: 43em; /* 300px */ min-height: 18em; /* sempre deixar o conteudo no centro independete do tamanho da tela */ margin: auto; } img{ /* imagem se adequa ao tamanho da tela */ width: 100%; } img#bugdroid{ width: 50%; /* tranformando o img em bloco */ display: block; /* alinhando o bloco */ margin: auto; }

[@erikreis2391]

A parada da sacudida é top kkkk

[@mathsoa]

Olá professor!

[@brunopereira4643]

Se alguém tiver tendo problema com a imagem pequena da irina não aparecer ao diminuir a tela, eu consegui fazendo assim:

[@sharalisson]

Que curso é esse, hein? Absurdo. Mais uma megaaula de Tio Guanabara.

[@thiagosilveira9227]

por algum motivo tive que renomear a foto irina pq para irina e funcionou

[@GuilhermeSilva-yp4fe]

ótima aula!

[@MarcosFelipe-up9lc]

Top!!

[@helenosalgado7453]

Muito bom!

[@Lumini_Luminiverso]

Zerei Sonic Generations hoje, em homenagem a ti! Gotta code fast!

[@bignuke7798]

Eu queria saber se esse curso vai ter Javascript também

[@abnersilas3]

estou faz dois anos sacudindo minha janela para minimizar as outras

[@eduardolaux9976]

Mt bom!!!

[@brunomarques5258]

Uma curiosidade, essa tag viewport vem de computação gráfica, sendo usada para definir a área útil de renderização, nos seguintes formatos, `glViewport` pra OpenGL, em D3D11 vc tem o `D3D11_VIEWPORT`, em D3D12 vc tem o `D3D12_VIEWPORT`, já em Vulkan vc tem o `VkViewport`, se alguém tiver interesse, é uma área bem diferente de computação, mas muito legal, posso garantir uma coisa, em algum ponto do renderizador do Dark Souls 3 tem o `D3D11_VIEWPORT`.

[@isabellebicudo4094]

Foda demais!!!

[@isaacmartinezrizo]

Muito obrigado

[@darkomunista]

MUITO BOM

[@jonaspetty8767]

Muito obrigado!!!!

[@doObr]

Rodei a internet toda atrás dessa responsividade e fui até no chat GPT perguntar como que fazia e o meu site nada de ficar responsivo. E agora assistindo a aula descobri que é algo simples utilizando max-width e min-width. kkkkk

[@mateusbistene]

O espaçamento entre elementos na tela (ex. título e texto; texto e imagem; imagem e botão) devem ser fixos? ou eles reduzem proporcionalmente quando tamanho vertical da tela diminui?

[@saiphyart]

Salve, professor

[@mathsoa]

Hmm

[@Lucassousa-vt8en]

Pra quem ta com dificuldade quando aumenta ou diminui a tela, basta tirar o WIDTH: 800PX e deixar apenas os WIDITH MAX E MIN, ACREDITO QUE CAUSE CONFLITO ENTRE OS 3 CODIGOS.

[@rbercos]

Cara, obrigado, salvou demais aqui

[@GeorgeNascimento08]

no própiro dev tools tem assa função de screen resize

[@diegoagramarr1982]

prof vamos estudar sobre IA

[@israelbaruque]

que cabelo bonito

[@isabelmeiraoliveirabarreto4827]

Eu estou com uma dúvida em relação ao min-width. Se o texto já quebrava conforme ia diminuindo a tela, para que colocar o min-width?

[@GuilhermeAlmeida-mi6ny]

Aeee finalmente lkkkk

[@sarafaniceto]

Eu não consegui fazer o chrome, nem o edge diminuir o navegador pra menos que 500px (nem com a extensão que ele indica). Só usando o devtools pra simulação de dispositivo móvel mesmo, mas aí vc não vê a partir de quando apareceria a barra de rolagem já que não tem barra de rolagem no simulador.

[@Laina2]

Eu estou com o mesmo problema, até tentei pedir ajuda, mas não resolveu

[@WesleySantosFingerstyle]

alguém saber me dizer como faço para abrir os arquivos html no iphone para testar?

[@glpoficial]

Segundo a comenta 😅😅

[@ronaldojr95]

Professor, mudei o width do pra 100% da largura do main e funcionou tbm, é certo fazer assim ou n tem problema?

[@xavier_IV]

Caraca, eu dei uma desmotivada esses dias, fiz o header tudo bonitin, fonte e paleta legal, qnd coloquei as img corpo do site ficou uma bosta, fiquei 3 dias sem nem entrar no editor kkklkk

[@DersonMarinho]

por algum motivo o youtube pulou essa aula, me confundir todo

[@_Liquid]

Como que faz os conteúdos responderem instantaneamente conforme se aumenta e diminui a janela, no meu caso os conteúdo ficam estático qdo diminuo a janela e só respondem de forma brusca qdo solto o botão do mouse, isso seria uma vantagem de um computador melhor como macbook ? Ou é possível em qualquer máquina ?

[@xuoti]

Opa cheguei no dia!

[@icaroguitarra]

top. :)

[@Umgolbege]

to vendo que essa galera falando "ah o meu não deu certo mais fiz assim e funcionou" vai reclamar la na frente q o site não ta igual ! kkk

[@diegodreossi1458]

Meu navegador fica com largura mínima de 500, como posso alterar isso?