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

[@InteliogiaDev]

💡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 😁

[@thevocoder]

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]

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

[@amandasantossilva7582]

😍 Me ajudou bastante!✅ Não é difícil é só um pouco trabalhoso,mas dá pra aprender sim.

[@RodrigoOliveira-gd1zj]

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

[@mauricio4159]

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

[@emillyferrao29]

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

[@mrluquinhasz]

Projeto finalizado e não tenho nem palavras viu!!! Sensacional conteúdo top demais como sempre!!

[@InteliogiaDev]

Aí sim meu mano! Pow muito obrigado de verdade. TMJ Sempre

[@MarciaPintoBarcelo1]

Aguardando ansiosa aparte do menu mobile!

[@edvaldojunior1745]

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]

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

[@LucasRS_]

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

[@cassiasantos_dev]

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]

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

[@tiagofigueira4785]

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]

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

[@rafaaraujo3752]

Muito obrigado professor, ajudou muito

[@sandwicheems]

🍷 Qualidade excelente!

[@RobertoFanganiello-op8qc]

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

[@_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 😊

[@testandomeucanal1243]

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

[@kannato2494]

Agradeço de mais, maratonei todos os vídeos e consegui fazer o portfólio 😀

[@LCMBELEM]

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.

[@caio7740]

Basta marcar a seção que vc quer ir com um id, e quando clicar no menu vai acionar o id

[@neemiaspatrocinio4626]

muito bom amigo muito obrigado

[@alexandrecarvalho7372]

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

[@Nss_20]

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

[@derikfonsecx]

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

[@jheisonfrancelino7799]

que didática incrivel

[@ianbarddal7294]

Muito bom, cara! Genial! Adorei teu vídeo.

[@andresouzaoffice]

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

[@CodificaMídia]

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

[@kleysonrenatodossantos6939]

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

[@jonathalopes3141]

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

[@BernardoMB2]

Essa extensão de simular o celular é muito boa

[@Titovictoor]

Ótimo conteúdo! Continue por favor

[@TheDragonsCraft]

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

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

[@michelzinhogeocafbatera8215]

Show 👏🏾👏🏾👏🏾

[@devfilipeads]

Parabens meu amigo, baita aula, ensina muito!

[@Goncalves22k]

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

[@Bruno_Sant]

Canal incrível, Parabéns

[@progboy1]

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

[@felipecavalcante5928]

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

[@andersoncarvalho9137]

Ajudou muito, bem explicado

[@wesleycarvalho4931]

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

[@roneipereira3508]

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

[@jaquelinelima123]

Mil likes, suas aulas me ajudaram demais!

[@marcelobp10]

Muito bom projeto !!!

[@felipemaozinha353]

Conteúdo maravilhoso obrigado.

[@nataneukk]

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

[@Andradedev]

Excelente.

[@mateusteixeiradasilva67]

Em relaçao as guias do cabeçalho como faz para pra ligar a um certo lugar no site?

[@euVicodes]

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

[@jessicacastro9022]

bom demaiss

[@myc3266]

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 😅

[@caio7740]

Pq o código é screen AND(e) (max-width)

[@gracasantos2893]

Top demais+++++++

[@RennanGYM]

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]

É 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

[@victor474747]

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?

[@enzoguilherme4949]

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?

[@krek_t.i]

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?

[@KelvynSantos10K]

so falta os botão do header funcionar

[@cassiosantos6866]

top

[@Nayara_alvesdesign]

É possível fazer pelo celular?

[@gabrielavieira1023]

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

[@FelipeCosta-p3e]

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

[@wandemberg017]

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]

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

[@luizFernandoSPFC]

vem dar aula na UniAlfa Umuarama Pr seu delicio

[@InteliogiaDev]

Kkkkkkkkkk pow com um convite desses como q recusa? Kkkkkkk

[@Scopel_Yan]

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

[@iagopereira9594]

Onde consigo o codigo Pronto?

[@frankguitarr]

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

[@Netinho87]

Como adicionar esse codigo para shopfy ?

[@rudsonmoura9754]

TOOOPPPPPP!!!!1

[@frankguitarr]

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

[@siqueeeira]

como assim? não entendi direito kkkkkkkk

[@frankguitarr]

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

[@michelquaresma]

no meu nao deu certo, alhuem me ajuda!

[@adrieltechlab]

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

[@InteliogiaDev]

Mano, certamente é um erro de sintaxe (erro de escrita) na media query. Compara com o vídeo e vê se tá certo, beleza?

[@guii345]

Tem o download do site ?

[@NgKelviinho]

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

[@InteliogiaDev]

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

[@1ssphenix]

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]

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.

[@LohanBittencourt]

o meu site esta "sobrando" pro lado, alguem sabe como resolvo?

[@InteliogiaDev]

Tem algum elemento no site que está maior que os limites da tela. Tenta verificar as dimensões dos elementos como as imagens.

[@bkzin.xp28]

cade o repo do projeto

[@dreamer3153]

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

[@victorcesario9147]

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

[@dreamer3153]

@@victorcesario9147 consegui, valeu