Como deixar um site responsivo - Portfólio com HTML e CSS - Pt. 08/08
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- ✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Seja membro deste canal e ganhe benefícios:
/ @inteliogiadev
Hora de deixar o nosso portfólio responsivo. Nesse vídeo utilizamos as media queries para aplicar a responsividade em nosso projeto. Dessa forma o nosso site consegue se adaptar para todo tamanho de tela, seja de um celular ou de um telão.
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ Links úteis:
🔹Simulador de celular: bit.ly/47E37EK
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiadev
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
💡Ei, calma aí! Me diz uma coisa: você está criando este portfólio, mas já sabe o que vai colocar nele? Bom, se quiser aprender a criar sites para deixar o seu portfólio mais rico, ative o Modo Front-end 👉🏾bit.ly/3KY8mpn e crie sites como profissional 😁
Ao invés de desenvolver o site para desktop e depois ajustar para o mobile, o ideal é seguir a prática do "mobile first". Seguindo essa prática você evita muita dor de cabeça na hora de entregar um projeto.
Concordo com vc mano, realmente seguir a prática do mobile-first é uma ótima opção, mas para quem tá começando, q é o meu público-alvo, isso pode ser muito confuso kkkkkk então eu tenho q tomar esse cuidado.
Nossa mano total !!!!!!!!
sempre tive muita dificuldade com responsividade, voce foi quem mais esclareceu e mostrou como pode ser tranquilo. Agradeço muito !
😍 Me ajudou bastante!✅ Não é difícil é só um pouco trabalhoso,mas dá pra aprender sim.
Meu jovem, seu canal é realmente incrível! Aprendi muito com ele e vejo um grande potencial para crescer. Por favor, continue assim!
concordo! muito bom! tem tudo pra crescer, continue sempre.
Projeto finalizado e não tenho nem palavras viu!!! Sensacional conteúdo top demais como sempre!!
Aí sim meu mano! Pow muito obrigado de verdade. TMJ Sempre
Conteúdo toooooop de mais! Exatamente o que eu queria. Criei um projetinho com pra desktop e quero deixar ele responsivo para celular. Vou aplicar os conteúdos desse vídeo e portifólio. Quero assistir seus vídeos e aprender a criar ele❤❤
hahaha aí sim Cássiaaaaa, se tiver dúvidas pode comentar aqui 😁
Didática perfeita! Com certeza você terá muito sucesso!❤
muito bom amigo muito obrigado
Aguardando ansiosa aparte do menu mobile!
Meu amigo, sem palavras para descrever o aprendizado que você ofereceu. Terminei o portfolio e fiquei satisfeito com o resultado... Queria saber se você poderia fazer uma aula de como fazer aqueles slides de imagens, que geralmente fica em sites de lojas online. Sua didática é excelente! Muito obrigado!
Faz mais projetos assim,fiz minha versao e ficou muito legal!
Ola professor gostei muito do seu treinamento consegui fazer tudo de acordo com seus ensinamentos, mas faltou uma coisa fazer os links do menu fincionar tipo quando clicar em contato ele ie direto para o formulario essim por diante poderia fazer um video ensinando isso. Obrigado.
Basta marcar a seção que vc quer ir com um id, e quando clicar no menu vai acionar o id
Muito top as suas aulas! E nessa parte de reponsividade eu estava com um problema em relação ao tela deslizar para o lado quando estava no modo celular!! Aí eu coloque a função body dentro do media screen e coloquei isso:
overflow-y: Scroll
overflow-x: hidden
E deu super certo, obrigado!!
Pra mim deu certo apenas passando dentro do @media o .interface {
overflow-x: hidden
overflow -y: hidden
}
Passar o valor hidden também no eixo y (vertical) esconde a linha de rolagem, deixando mais clean
Eu que estou migrando de área, começando do zero absoluto, este curso é excelente.
Muito obrigado professor, ajudou muito
Nunca pensei que deixar um site responsivo fosse tão facil. Voce é muito foda! Obrigada por todo conhecimento gratuito.
hahaha muito obrigado! É realmente muito fácil, basta saber as técnicas corretas 😊
Sensacional mano!
Preciso entregar um projeto, porém tava com dificuldade de fazer ele fica responsivo.
Muito obrigado!!
muito braboooo comecei a estudar programação tem uns meses e seu canal me ajuda muito em css, ta doido otimo canal
🍷 Qualidade excelente!
Essa extensão de simular o celular é muito boa
Agradeço de mais, maratonei todos os vídeos e consegui fazer o portfólio 😀
Cara, parabéns por cada aula! Esse, sem dúvidas é o melhor projeto de html+css disponível no TH-cam, didática incrível, muito obrigado!
You helped a lot dude, thanks...Estou trabalhando em alguns desafios do curso e este vídeo me caiu como uma luva!
Muito bom, cara! Genial! Adorei teu vídeo.
que didática incrivel
Muito bom, estou vendo e praticando o projeto. Já saiu o video para os menus responsivos?
mano, melhor explicação de todas, e olhe que eu vi inumeros videos! parabens mais um incrito !!! parabens !!!
Show 👏🏾👏🏾👏🏾
Obrigado Professor, em breve eu publicarei o meu site aqui com base nestes tutoriais para uma avaliação.
Cara, que Deus te abençoe grandiosamente. Muito incrível!!!
Muito obrigado, foi de grande ajuda TODOO esse conteúdo, você é fera!!!
Ótimo conteúdo! Continue por favor
Exelente video!!!!!!!!! Adquiri muito conhecimento!
Ajudou muito, bem explicado
Boa brother, gostei muito do projeto, finalizei aqui !!!
Cara, muito muito muito muito obrigado S2
Adorei todos os videos e aprendi muito
Parabens meu amigo, baita aula, ensina muito!
Canal incrível, Parabéns
Ea tranquilo, então estou começando agora na programação e gostei mt desse projeto, venho procurando video como deixar o site responsivo, e não achava um vídeo q explicasse com clareza, mas vendo agr eu entendi um pouco, flw, pela ajuda,
Faz um projeto usando uma alguma api
Anderson eu fico muito feliz de ter participado dessa tua fase de aprendizado. Futuramente pretendo trazer uns assuntos sobre consumir API's
O conteúdo desse canal tá com uma qualidade excelente até o momento.
Desejo sucesso!
Uma sugestão pro próximo vídeo é fazer um painel de controle pro um site E-commerce. Pode até utilizar algum tema ex: hambúrguer, pizza etc...
Fala Flavio! Pow mano muito obrigado kkkkkk esse teu pedido é avançado viu kkkkkk vou estudar a maneira mais fácil de trazer aqui para o canal
@@InteliogiaDev Por nada.
Continue firme, como eu já disse o conteúdo é de qualidade, com o tempo você receberá o reconhecimento.
Em relação ao pedido, estarei no aguardo. SUCESSO💯🫵🏽
Uma bela didática, conteúdo incrivel!
Projeto muito bom, perfeito, explicação muito boa também, obrigado !!!
Muito bom projeto !!!
Conteúdo maravilhoso obrigado.
Mil likes, suas aulas me ajudaram demais!
esse vc editou pra esse tipo de dispositivo e se eu mudar do outro lado e mudar o dispositivo vou ter que editar diferente ai tenho que criar outra media screen???
Excelente.
Uma dúvida que sempre tive é se no mercado de trabalho o uso de bootstrap é comum, ou até mesmo bem visto. Poderia me ajudar com isso?
estou aprendendo a usar media querry, pra deixar o projeto do site responsivo queria fazer que depois de uma determinada largura a minha galeria de fotos virasse um efeito carrosel, não sei como proceder
Em relaçao as guias do cabeçalho como faz para pra ligar a um certo lugar no site?
Uma pequena dúvida, na parte do img.port na seção de portfólio, ao invés de eu mexer no gap da classe responsável que é a classe flex, eu poderia colocar na classe margin do img,port: 5% auto; ao invés de margin: 0 auto?? Eu pensei dessa forma quando estava codando, mas se você fez com o gap da classe flex nessa seção, então se adaptaria melhor as proporções de tela? Faz alguma diferença? Ou só foi opcional mesmo?
bom demaiss
Uma duvida vc menciona no video que media querie seriea "@media screen and (max-width: ...) {}" mas temtei usar da seguinte maneira "@media (max-width: ...) {}" e funcionou também fiz desse modo por que eu confundi um negócio maa funcionou 😅
Pq o código é screen AND(e) (max-width)
boooa. so uma coisa eu bati cabeça ate umas hras para fazer sites responsivel. o ponto fatal ai para fazer isso rapido, foi nós ter declaro o flex desde o inicio do site?
É possível fazer pelo celular?
Tô fazendo um , eu n aguento mais, parece que nada fica legal, as porc4ria das imagens era em linha agora tem que cortar imagem por imagem deixa em coluna put4 raiva meu deus, n aguento mais ouvi responsividade
Top demais+++++++
Cara não achei essa informação em nenhum lugar... Mas gostaria de saber por exemplo, como impedir as pessoas de inspecionarem o css do meu site?
Vejo ai umas outras páginas, que nao é possível ver o css apenas o html e queria fazer a mesma coisa no meu site... Se por exemplo eu inspecionar meu site vou conseguir ver todas as linhas de código do css e html
top
Parabéns mano! Tá muito top as aulas. Vou pra parte responsiva agora. Só tem uma coisa que quero saber... O envelope e o email do footer ficaram colados e o email um pouco descentralizado. Tentei resolver mas n consegui. Como resolver?
Fala Wandemberg. Então mano se isso aconteceu com vc, tem algo errado da estrutura do HTML ou na forma q vc elaborou o CSS, se no meu deu certo o seu tbm é pra dar kkkkkk
Nesse caso cara, tenta rever o código do vídeo e compara com o seu, certamente tem algum errinho q passou despercebido
vem dar aula na UniAlfa Umuarama Pr seu delicio
Kkkkkkkkkk pow com um convite desses como q recusa? Kkkkkkk
so falta os botão do header funcionar
Meu caro, só conheci seu canal hoje e gostei muito. No entanto, eu que não sou Programador, fiquei "mal acostumado" com diversos vídeos que assisti nesses dois últimos anos que entrei no ramo de Desenvolvedor, em que os autores colocam na descrição os códigos ensinados, ou dispobilizam pelo Google Drive. No seu caso, eu teria que parar o vídeo e tentar copiar os códigos?
Abração.
Fala Sérgio, então esse projeto ainda nãos está finalizado, o intuito dele é que meus inscritos possam praticar e colocar as habilidades em dias kkkkk. Por isso ainda não disponibilizei o código, pois não faria sentido ensinar o passo a passo sendo que o projeto ta todo finalizado na descrição kkkkk
Mas não se preocupe, irei disponibilizar o código no próximo vídeo.
alguem tem o codigo completo
cometi algum erro ao longo do codigo e nem tudo funciona como deveria
Onde consigo o codigo Pronto?
Mano o links da extensão não funcionam não consigo abrir aqui da erro?
Boa tarde
Na parte de responsividade nenhum comando esta dando certo... poxa, meu portfolio tava ficando tao legal kkk mas na responsividade nao esta obedecendo os codigos..
Mano, certamente é um erro de sintaxe (erro de escrita) na media query. Compara com o vídeo e vê se tá certo, beleza?
Como adicionar esse codigo para shopfy ?
Tem o download do site ?
TOOOPPPPPP!!!!1
queria saber se tem como eu usar esse @media screen and para fazer códigos em html 5, tipo eu criar códigos só para o celular
É possível mano, nesse caso vc pode utilizar o método mobile first que consiste em criar um projeto pensando primeiro no celular pra só aí depois adaptar para computador
no meu nao deu certo, alhuem me ajuda!
Mano na hora de deixar responsivo assim que coloquei o flex direction já ficou nos esquemas kkk nem fiz mais nada rssr
como assim? não entendi direito kkkkkkkk
Mano me diz como vc deixou aquela foto dentro do losângulo @@siqueeeira
o meu site esta "sobrando" pro lado, alguem sabe como resolvo?
Tem algum elemento no site que está maior que os limites da tela. Tenta verificar as dimensões dos elementos como as imagens.
cade o repo do projeto
Como faço para deixar o inspecionar assim igual um celular e qual o seu tema no VS CODE ?
Fala mano, na descrição do vídeo tem o link da extensão do Chrome que simula um celular. E o tema do meu VS Code é o RainGlow
qual comando usar pra subir mais a imagem topo do site?
podes usar um margin-top, dai tu só seta o espaçamento superior em Px
@@victorcesario9147 consegui, valeu