Como deixar um site responsivo - Portfólio com HTML e CSS

No video

Como deixar um site responsivo - Portfólio com HTML e CSS - Pt. 08/08

Рет қаралды 33,518

Жыл бұрын

✅ 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 👨🏼‍💻

Пікірлер: 82

@thevocoder 8 ай бұрын

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.

@InteliogiaDev 8 ай бұрын

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.

@NathMaia Күн бұрын

Nossa mano total !!!!!!!!

@RodrigoOliveira-gd1zj Ай бұрын

sempre tive muita dificuldade com responsividade, voce foi quem mais esclareceu e mostrou como pode ser tranquilo. Agradeço muito !

@_amadaline_ Ай бұрын

Nunca pensei que deixar um site responsivo fosse tão facil. Voce é muito foda! Obrigada por todo conhecimento gratuito.

@InteliogiaDev Ай бұрын

hahaha muito obrigado! É realmente muito fácil, basta saber as técnicas corretas 😊

@mauricio4159 Жыл бұрын

Meu jovem, seu canal é realmente incrível! Aprendi muito com ele e vejo um grande potencial para crescer. Por favor, continue assim!

@emillyferrao28 10 ай бұрын

concordo! muito bom! tem tudo pra crescer, continue sempre.

@RobertoFanganiello-op8qc Ай бұрын

Eu que estou migrando de área, começando do zero absoluto, este curso é excelente.

@andersoncarvalho9137 Ай бұрын

Ajudou muito, bem explicado

@cassiasantos1796 4 ай бұрын

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

@InteliogiaDev 4 ай бұрын

hahaha aí sim Cássiaaaaa, se tiver dúvidas pode comentar aqui 😁

@edvaldojunior1745 7 ай бұрын

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!

@juninagiotagabigo3813 4 ай бұрын

Didática perfeita! Com certeza você terá muito sucesso!❤

@alexandrecarvalho7372 2 ай бұрын

muito braboooo comecei a estudar programação tem uns meses e seu canal me ajuda muito em css, ta doido otimo canal

@tiagofigueira4785 9 ай бұрын

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

@ODINKZ 8 ай бұрын

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

@NuII_Identity 3 ай бұрын

You helped a lot dude, thanks...Estou trabalhando em alguns desafios do curso e este vídeo me caiu como uma luva!

@LCMBELEM 4 ай бұрын

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.

@derikfonsecx 8 ай бұрын

Cara, parabéns por cada aula! Esse, sem dúvidas é o melhor projeto de html+css disponível no KZfaq, didática incrível, muito obrigado!

@LucasRS_ 6 ай бұрын

Sensacional mano! Preciso entregar um projeto, porém tava com dificuldade de fazer ele fica responsivo. Muito obrigado!!

@hizar_ Ай бұрын

professor muito objetivo 👏

@kleysonrenatodossantos6939 Ай бұрын

Exelente video!!!!!!!!! Adquiri muito conhecimento!

@BernardoMB2 2 ай бұрын

Essa extensão de simular o celular é muito boa

@MarciaPintoBarcelo1 11 ай бұрын

Aguardando ansiosa aparte do menu mobile!

@andresouzaoffice 7 ай бұрын

Obrigado Professor, em breve eu publicarei o meu site aqui com base nestes tutoriais para uma avaliação.

@jonathalopes3141 11 ай бұрын

mano, melhor explicação de todas, e olhe que eu vi inumeros videos! parabens mais um incrito !!! parabens !!!

@user-hv8sn9jm7m 6 ай бұрын

Cara, que Deus te abençoe grandiosamente. Muito incrível!!!

@mininusequeci Жыл бұрын

🍷 Qualidade excelente!

@jheisonfrancelino7799 4 ай бұрын

que didática incrivel

@TheDragonsCraft 7 ай бұрын

Muito obrigado, foi de grande ajuda TODOO esse conteúdo, você é fera!!!

@devfilipeads 9 ай бұрын

Parabens meu amigo, baita aula, ensina muito!

@Titovictoor 10 ай бұрын

Ótimo conteúdo! Continue por favor

@wesleycarvalho4931 10 ай бұрын

Projeto muito bom, perfeito, explicação muito boa também, obrigado !!!

@marcelobp10 4 ай бұрын

Muito bom projeto !!!

@progboy1 9 ай бұрын

Cara, muito muito muito muito obrigado S2 Adorei todos os videos e aprendi muito

@felipecavalcante5928 7 ай бұрын

Uma bela didática, conteúdo incrivel!

@AndersonCSilva-mv8br Жыл бұрын

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

@InteliogiaDev Жыл бұрын

Anderson eu fico muito feliz de ter participado dessa tua fase de aprendizado. Futuramente pretendo trazer uns assuntos sobre consumir API's

@Goncalves22k 9 ай бұрын

Boa brother, gostei muito do projeto, finalizei aqui !!!

@flaviopinho6372 Жыл бұрын

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

@InteliogiaDev Жыл бұрын

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

@flaviopinho6372 Жыл бұрын

@@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💯🫵🏽

@jaquelinelima123 10 ай бұрын

Mil likes, suas aulas me ajudaram demais!

@Bruno_Sant 11 ай бұрын

Canal incrível, Parabéns

@nataneukk 2 ай бұрын

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

@user-xr6cz1cz5y 3 ай бұрын

alguem tem o codigo completo cometi algum erro ao longo do codigo e nem tudo funciona como deveria

@felipemaozinha353 11 ай бұрын

Conteúdo maravilhoso obrigado.

@testandomeucanal1243 Жыл бұрын

Faz mais projetos assim,fiz minha versao e ficou muito legal!

@roneipereira3508 2 ай бұрын

Muito bom, estou vendo e praticando o projeto. Já saiu o video para os menus responsivos?

@victor474747 28 күн бұрын

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?

@RennanGYM 6 ай бұрын

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

@InteliogiaDev 6 ай бұрын

É 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

@jessicacastro9022 2 ай бұрын

bom demaiss

@Andradedev 6 ай бұрын

Excelente.

@michelzinhogeocafbatera8215 Жыл бұрын

Show 👏🏾👏🏾👏🏾

@krek_t.i 4 ай бұрын

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?

@luizfernandosantos2644 2 ай бұрын

vem dar aula na UniAlfa Umuarama Pr seu delicio

@InteliogiaDev 2 ай бұрын

Kkkkkkkkkk pow com um convite desses como q recusa? Kkkkkkk

@enzoguilherme4949 4 ай бұрын

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?

@gracasantos2893 2 ай бұрын

Top demais+++++++

@frankguitarr 4 ай бұрын

Mano o links da extensão não funcionam não consigo abrir aqui da erro?

@Netinho87 4 ай бұрын

Como adicionar esse codigo para shopfy ?

@rudsonmoura9754 5 ай бұрын

TOOOPPPPPP!!!!1

@michelquaresma 2 ай бұрын

no meu nao deu certo, alhuem me ajuda!

@iagopereira9594 3 ай бұрын

Onde consigo o codigo Pronto?

@wandemberg017 10 ай бұрын

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?

@InteliogiaDev 10 ай бұрын

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

@cassiosantos6866 8 ай бұрын

top

@1ssphenix 11 ай бұрын

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.

@InteliogiaDev 11 ай бұрын

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.

@frankguitarr 4 ай бұрын

Mano na hora de deixar responsivo assim que coloquei o flex direction já ficou nos esquemas kkk nem fiz mais nada rssr

@siqueeeira 4 ай бұрын

como assim? não entendi direito kkkkkkkk

@frankguitarr 4 ай бұрын

Mano me diz como vc deixou aquela foto dentro do losângulo @@siqueeeira

@KelvinMoreira. 11 ай бұрын

Como faço para deixar o inspecionar assim igual um celular e qual o seu tema no VS CODE ?

@InteliogiaDev 11 ай бұрын

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

@guga3448 7 ай бұрын

Tem o download do site ?

@bkzin.xp28 11 ай бұрын

cade o repo do projeto

@dreamer3153 11 ай бұрын

qual comando usar pra subir mais a imagem topo do site?

@victorcesario9147 11 ай бұрын

podes usar um margin-top, dai tu só seta o espaçamento superior em Px

@dreamer3153 11 ай бұрын

@@victorcesario9147 consegui, valeu

@gabrielavieira1023 9 ай бұрын

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