Criando as páginas de cada rede social - @Curso em Vídeo HTML5 e CSS3

[@_Victor-Lourenco]

*1* Basicamente, a *barra de rolagem* de uma página pode ser dividida em quatro áreas: *Corpo* - O elemento " corpo " é aquele que contém todos os outros componentes que formam a barra de rolagem. *Trilho* - A parte do " trilho " é representada por aquele espaço em branco por onde o indicador cinza arrastável desliza. *Scrollbar* - A parte do " scrollbar " é representada por aquela alça (retângulo) cinza arrastável, que tem como função indicar a posição da página deslizando pelo trilho. *Botões* - Toda barra de rolagem tem dois botões, que ficam nas extremidades do trilho. Tendo isso em mente, para personalizarmos a nossa barra de rolagem, é necessário abrir um seletor para cada um desses elementos (corpo, trilho, scrollbar e botões). No CSS, esses elementos são representados por pseudo-elementos (isso ocorre porque barras de rolagem são conteúdos periféricos) - Segue uma lista com esses elementos e suas representações: *::-webkit-scrollbar - CORPO* Esse elemento representa CORPO (objeto que contém todos os outros componentes da barra de rolagem: trilho, scrollbar e botões). Abra um seletor para esse elemento se deseja personalizar o corpo da barra de rolagem. Geralmente abrimos um seletor para esse elemento somente para declarar a LARGURA E ALTURA da barra de rolagem (altura no caso para barras horizontais) - Sempre declare a largura e altura. Não definimos as cores de fundo aqui porque os outros elementos ficam na frente desse, e portanto as configurações de estilo deles podem acabar cobrindo e estilização feita nesse seletor. Também é possível ocultar a barra de rolagem, fazendo com que ela "suma" por completo (e ao mesmo tempo mantenha a funcionalidade de rolagem da página normalmente). Para fazer isso basta usar a declaração " display: none " no seletor do corpo da barra de rolagem (::-webkit-scrollbar {...} ). *::-webkit-scrollbar-track - TRILHO* Esse elemento representa o TRILHO. Abra um seletor para esse elemento se deseja personalizar o trilho da sua barra de rolagem. *Você pode personalizar o trilho de várias maneiras:* Configurar a cor de fundo, definir uma borda, arredondar as pontas da caixa e inclusive adicionar uma imagem como background por exemplo (não recomendado). *Obs.:* A largura do trilho segue a largura do CORPO (elemento que contém todos os componentes da barra de rolagem). Isso significado que a largura definida para o corpo que será aplicada ao trilho. *::-webkit-scrollbar-thumb - SCROLLBAR* Esse elemento representa o SCROLLBAR (indicador de posicionamento). Abra um seletor para esse elemento se deseja personalizar o scrollbar da sua barra de rolagem. *Você pode personalizar o scrollbar de várias maneiras:* Configurar a cor de fundo, definir uma borda, arredondar as pontas da caixa e inclusive também adicionar uma imagem como background por exemplo (não recomendado). *Obs.:* A largura do scrollbar segue a largura do CORPO (elemento que contém todos os componentes da barra de rolagem). Isso significado que a largura definida para o corpo que será aplicada ao scrollbar. *::-webkit-scrollbar-button - BOTÕES* Esse elemento representa os BOTÕES. Abra um seletor para esse elemento se deseja personalizar os botões da sua barra de rolagem. *Você pode personalizar os botões de várias maneiras:* Formatar a altura, mudar a cor de fundo, definir uma borda, arredondar as pontas da caixa e por aí vai... *Atenção:* Se você quer personalizar a barra de rolagem do seu site, você deve adicionar esses seletores de estilização de barra como pseudo-elemento do "body", do "html" ou do seu seletor global. Vale lembrar que também é possível adicionar esses seletores de estilização de barra em um elemento específico que também tenha barra de rolagem, numa caixa do overflow por exemplo (se já foi definido no seletor global não precisa, já que assim fica válido para todos os elementos da página...) *Nota:* Você também pode estilizar esses componentes que formam a barra usando a pseudo-classe "hover". Por exemplo, abrir um seletor para o scrollbar (indicador de posicionamento) e configurar um background-color diferente que só vai ser ativado quando o usuário passar o mouse por cima do indicador. Exemplo: ::-webkit-scrollbar-thumb:hover { background-color: rgb(92, 92, 92); } *_BARRA DE ROLAGEM VERTICAL E HORIZONTAL:_* Toda caixa pode ter barras de rolagem tanto verticais quanto horizontais, ocorre que ao personalizarmos os componentes da nossa barra, podemos definir se queremos aplicar essas configurações especificamente para uma barra horizontal ou vertical. Para especificar um desses dois tipos de barra, normalmente usamos uma das duas pseudo-classes listadas abaixo nos seletores dos nossos componentes: *:vertical* *:horizontal* Para especificar se a estilização do seu componente é para uma barra vertical ou horizontal, é necessário inserir no final do seletor do componente uma dessas duas pseudo-classes apresentadas. Exemplo: Seletor para estilizar especificamente o scrollbar *HORIZONTAL:* ::-webkit-scrollbar-thumb:horizontal { background-color: rgb(0, 255, 242); } Seletor para estilizar especificamente o scrollbar *VERTICAL:* ::-webkit-scrollbar-thumb:vertical { background-color: rgb(0, 255, 242); } Caso você queira criar seletores que abrangem ambos os tipos de barras, tanto verticais quanto horizontais, basta NÃO USAR nenhuma dessas pseudo-classes apresentadas (:vertical / :horizontal). Nesse caso, lembre-se de declarar a propriedade de altura no seletor do componente corpo, caso contrário as barras horizontais ficarão com uma dimensão diferente das verticais. Uma coisa que vai ocorrer ser a sua caixa tiver duas barras de rolagem (vertical e horizontal), é o surgimento do elemento " corner " (CANTO). Segue uma descrição desse elemento e sua representação: *::-webkit-scrollbar-corner - CANTO* Esse é um elemento extra que representa o CANTO. Ele só fica visível quando temos ativado na nossa página uma barra de rolagem vertical e horizontal ao mesmo tempo. Ele fica onde as duas barras de rolagem horizontal e vertical se encontram. Geralmente, esse é o canto inferior direito da janela do navegador. Pode ser necessário estilizar esse elemento em caixas do overflow por exemplo, onde às vezes temos duas barras de rolagem que se encontram. *Você pode personalizar o canto de várias maneiras:* Mudar a cor de fundo, definir uma borda e por aí vai...

[@nohbody666]

Vlw, muito legal!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@renanmacho]

muita informação, misericórdia kkkkkk

[@MarcusVinicius33z]

Obrigado pela informação, ela é muito útil. Tentei ocultar a barra de rolagem como o Guanabara fez no vídeo, usando ::-webkit-scrollbar {width: 0px; height: 0px; } , porém ela tirou a funcionalidade da barra, não conseguir mais rolar a tela até o botão, também tentei usando o ::-webkit-scrollbar {display: none}, mas continuou da mesma forma. O que eu faço?

[@matheusdiedrichs]

@@MarcusVinicius33z Opa mano tentou deixar ocuppacity = 0 ??

[@alexandrabarros3724]

Viciada nesse canal. Vcs são extraordinários🥰🥰🥰 compartilhandooo.

[@ZAKI44444]

?

[@marvin1290]

@@ZAKI44444 ?

[@MBLGBTQI]

@@marvin1290 ??

[@robertsmith1762]

@@MBLGBTQI ???

[@robloker]

@@robertsmith1762 ????

[@jhowgmdsg]

Pra tirar a barra de rolagem no iFrame pode também alterar o width da img pra 100% ao invés de 100vw, dessa forma nem precisa do ::-webkit-scrollbar.

[@user-bl4po5kv8d]

Kkk, tava pensando nisso. Mas isso não vai manter a barra de rolagem horizontal? Vô fazer os testes aqui.

[@laurocaetano]

ou overflow-x: hidden;

[@user-bl4po5kv8d]

@@laurocaetano na verdade essa propriedade tem um problema quando se aplica direto ao elemento body (creio q html também) no mobile além de tirar a possibilidade de girar a página.

[@dibandit8816]

​@@user-bl4po5kv8d digite scrolling="no" no para retirar a barra de rolagem

[@arielxavier4018]

@@dibandit8816 isso pode causar problema ou erros em outras funcionalidades ou telas? pq estou usando dessa forma que vc escreveu e anotei tambem, mas nao sei se altera algo.

[@antoniotrindade2117]

Rapaz, cada vez mais encantado com as aulas e o resultado

[@Familyhayzn]

​ @João Folha Obrigado consegui, tinha esquecido de colocar o nome no target. não esqueça de colocar o nome do id certo, para a imagem não sair do

[@PatsFerrer]

uahsuahsua finalmente descobri como dar scroll na tela, a minha não tava dando por causa do background-image (como eu pensava).. daí eu tinha mudado pra img antes de ver os videos.. porem ficava feio, por causa do scroll exagerado e fiquei 'presa' nisso uhaushaus era so usar o bendito webkit-scrollbar que resolvia tudo uahsuahsua aula maravilhosa

[@MegaElionara]

Eu gosto do método de estudo do Guanabara Porque ele ensina como se a gente fosse um neandertal. Só assim para eu aprender

[@jeffersondealmeidapinheiro5198]

papo reto KKKKKKKKKKKKKKKK

[@nilomsousa]

Excelente trabalho, Deus abençoe sua vida!

[@semente.criativa]

Que projeto massa professor.

[@MatheusAlves-cq6pj]

Seria uma honra ter voce guanabara no forum empresarial da bahia , falando sobre tecnológia para empresarios locais e mostrando a importancia , voce é nota 10 professor

[@_Gabriwl_]

Passando aqui só pra exibir meu emblema de 6 meses , continua com o trabalho foda Guanabara!

Olá 🦗! Parabéns pelo emblema de 6 meses! É um marco importante e mostra seu comprometimento e dedicação. Fico feliz em fazer parte da sua jornada de aprendizado. Continue explorando os conteúdos e se desenvolvendo cada vez mais! Agradeço pelo apoio e pelas palavras. O trabalho aqui no Curso em Vídeo é feito com muito carinho e dedicação, sempre buscando oferecer o melhor para vocês. 💪🚀 Considere se tornar Estudonauta ou Aluno Apoiador em nosso site para ajudar no seu aprendizado. Sua participação é valiosa para nós! 🌟🖖

[@komai-2706]

que trabalheiraaaaaaaaa... mas com um tutor desse, fica muito mais fácil, slk

[@renansoares272]

Dica: No meu projeto quando eu clicava em Home a imagem não fica limitada a tela do "celular", ao invés disso abria uma imagem nova com a home ocupando a tela toda. Assisti todas as aulas 2x tentando arrumar. Só deu certo quando mudei o "name" para um nome diferente do id. coloquei name="tela1" id="tela", e todos os taget="tela1", então tudo funcionou igual ao vídeo do guanabara. Talvez eu tenha feito alguma merda, talvez seja uma att do vscode... sei lá! Estava muito frustrado e encontrei esse modo, então repasso a experiência a fim de ajudar alguém. Abraços.

[@Billgamespp]

eu não conseguir também acho que fiz uma merda maior kkkkkk

[@Billgamespp]

esta abrindo em outra aba tentei do modo que vc fez não conseguir

[@RutharFps]

como é um anjo

[@nildogalvino6394]

É simplesmente maravilhoso.

[@danielvicentefagundes6774]

Maravilha !#! SUCESSO !!! Parabéns !!!

[@deputadohenrick]

Caso aconteça com alguém o mesmo que ocorreu comigo, aviso que mesmo redimensionando a altura do link, ele fica com uma diferença e não gruda por nada na imagem. Tentei redefinir a margin e o padding para 0 dentro do img, caso fosse esse o problema, porém o motivo é que o img poder lido como inline-block, o que atrapalha o processo mesmo o link sendo definido como block... RESOLUÇÃO REDEFINA A ALTURA DO IFRAME#TELA PARA 267 DEPOIS ENTRE NOS STILOS DAS IMAGENS (social.css) e defina no img um display: block;

[@Leossj1]

Eu mudei o margin-top do link para -6px, porém não sei se é o certo a se fazer

[@andref181]

Deu certo aqui, alterando no style a img para block

[@deputadohenrick]

@@Leossj1 Não textei cara, mas acho que dependendo da resolução de tela pode bugar, seria interessante vc ver se funciona em outros dispositivos diferentes

[@MairaAraujoTech]

Eu corrigi o espaço que ficou entre a tela do KZbin e o botao ACESSE colocando margin-top de -5px no CSS de

[@joaopedro0135]

Vai no flow Man, salve de Itanhaém, fazendo seu curso de JS ❤️👏

[@vanderribeiro9283]

Obrigado Guanabara por tanto conhecimento que aprendi!

[@gustavo_sobreira]

Pensei que seria muito difícil, mas não, foi muito fácil

[@eliasluciano2154]

melhor professor de tecnologia

[@renatoorosco]

Valeu por mais essa super aula, Gafanhotão-Rex :)

[@caleblima8968]

Pretende ensinar algum framework futuramente tipo React ou Vue?

[@GilsonFN1]

Simplesmente notavel

[@MsDAVIDCARLOS]

Muito obrigado! Está me ajudando muito!

[@andretakayama2088]

como sempre, que aula!

[@isaiasandre9164]

O cara é demais!

[@Onsllaught]

Perfeito professor! Eu uso o live server para não precisar ficar salvando, porém o webkit-scrollbar , não sei pq não funciona no navegador do firefox. A barra de rolagem persiste.

[@periclesperesoficial]

Muito legal!!!

[@ianfelipe3552]

Muito bom!!!

[@ziul]

11:38 ele falou o nome delas literalmente o vídeo inteiro kkkkkk

[@Familyhayzn]

top, top

[@ze0ss.p468]

Guanabara é o pai do conhecimento de programação do Brasil.

[@Leossj1]

Só passando aqui para dizer que eu mudei a tag meta viewport initial scale para 0.75 e ficou melhor a visualização em celulares, porém talvez não funcione em dekstops

[@christoferfritsche9966]

Bom dia! Estou precisando de certificados para complementar horas no meu curso de ciências da computação e eu curto muito suas aulas. Você é o melhor. Didática excelente. Minha dúvida é qual a principal diferença entre o curso em vídeo ou a estudonauta. Onde me inscrever. Qual o motivo de dois sites?

[@MatheusAlves-cq6pj]

Dirença entre curso em vídeo e estudonauta, é que no estudonauta tem todos os cursos do curso em vídeo e aulas com antecipação de data, além de ter cursos exclusivos com conteúdo mais avançando sobre determinada linguagens, e o curso em vídeo sendo dedicado somente a iniciantes. e lógico estudonauta é pago.

[@MatheusSantos-xo7wh]

Alguém entrou no site pelo cll? A resposponsividade n ficou boa, e se vc girar a tela do cll a html com o fundo preto fica aparecendo, n consigo resolver sozinho ainda

[@MarcosSilva-fj8dt]

para esconder a barra de rolagem também pode usar ::-webkit-scrollbar { display: none; }

[@lucastoledobm]

Se for firefox tente: html { scrollbar-width: none; }

[@show39897]

@@lucastoledobm Tentei, no chrome fica certo, já no firefox não some por nada

[@gabrielfernandes4555]

estou tendo problemas com responsividades ao visualizar no smartphone, oque eu fiz para melhorar foi colocar na tag de styles section#telefone {left: 42%;} diminui para 42% e deu uma melhorada porque o celular chegou mais para a esquerda, mais agora quando vira o celular ainda o celular fica fora, mais pelo menos o outro já deu uma melhorada!

[@luhmattjie]

Queria sabe se vai pro curso online??

[@anavitoriaalmeidadasilva2938]

Só utilizo basicamente 2 redes sociais: KZbin(ouvir música e estudar) e GitHub(estudos e quardar repositórios.)

[@inicolsz7391]

na hora de linkar as paginas ao eu me esqueci de que podia chamar a pagina de css nas paginas das redes sociais e acabei copiando e colando os estilos em todas as paginas kkkkkkkkkkk, enfim o importante é que deu certo

[@alexsouza9665]

genial

[@walthmoreiraduarte4730]

Gostei

[@alvarooliveira5013]

Projeto finalizado . O meu ficou bugado acessando no celular. Imagem do telefone não ficou responsiva, ficou cobrindo os ícones ao lado. Mais alguém com esse problema ?

[@MaiaSantiago-p9e]

Tmbém fique com esse problema. Estou tentando corrigir. Se ja tiver conseguido me avisa com você fez.

[@ianfelipe3552]

🤩🤩🤩

[@fhellypeviniciusdepaula4097]

Gustavo Guanabara o senhor pode falar se vai lançar o modulo 4 e 5 de python ouuuuuu o senhor desistiu do python???

[@mauriciomira2]

Eitaa cadê o módulo 5 meu Deus? :(

[@LofiBR-Gamer]

Aqui no meu, quando acesso pelo celular, o "celular" da página tampa os ícones. Aconteceu com mais alguém!? Sabem como resolver?

[@MatheusSantos-xo7wh]

Sim, vim aq atrás de respostas. Se vc deitar ocll o fundo preto tbm aparece

[@flavianafernandes8069]

no meu também ficou assim, triste

[@matheussouza01ful]

#ObrigadoGuanabara

[@leumasCross]

Professor, vai demorar a ser postado no site do Curso em video?

[@netoramos5979]

esse projeto não é responsivo, fica com barra de rolagem pra cima e para os lados e o conteúdo fica cortado dentro da tela do celular.

[@erickanimacoesbr]

eu só não vou conseguir pegar o link do twitter do professor, para acessar no site ☠

[@erickmartins-t3i]

kkkkkk

[@branmendes2491]

Quem assistir, por favor, deixe seu like.

[@ZerOo-w6x]

Ainda não tem o módulo 5 não né?

[@opgenesis2.032]

Mesmo sabendo, eu prefiro digitar o código base todo, assim sinto mais segurança, independente de demora, sei que estou gravando na mente 😊

[@jonattanrodrigues2037]

Tem dois cursos no site sendo HTML5 e HTML e CSS3 qual dos dois devo estudar?

[@alvarooliveira5013]

HTML5 e CSS3 , vai ser 5 módulos , já está no módulo 4.

[@Umgolbege]

estive analisando e acho que vou por o botao home no botao do iphone

[@vitorfalavinha4546]

O scrolling sem barra de rolagem não vai nem a pau, será que atualizou algo desde então? Já procurei no SO, mas não achei nada.

[@brennusbrennus]

O meu problema é o seguinte: quando o site é publicado, as imagens das redes sociais (as imagens compridas) desaparecem, menos a tela inicial. Mais alguém está com esse problema? Além disso, eu fiz das duas formas: imagem com caminho normal e com caminho relativo, e em ambos está com esse problema

[@MarcusVinicius33z]

Tentei ocultar a barra de rolagem como o Guanabara fez no vídeo, usando ::-webkit-scrollbar {width: 0px; height: 0px; } , porém ela tirou a funcionalidade da barra, não conseguir mais rolar a tela até o botão, também tentei usando o ::-webkit-scrollbar {display: none}, mas continuou da mesma forma. O que eu faço?

[@queloucura666]

não aparece no modulo 04 no site cursoemvideo

[@JarbasAj]

Pelo amor... alguém me ajuda! As imagens das redes sociais ficam muito grande dentro do frame do smartphone.... já olhei tudo o que tinha pra olhar e não acho onde está o problema.

[@Familyhayzn]

​ @João Folha Obrigado consegui, tinha esquecido de colocar o nome no target. não esqueça de colocar o nome do id certo, para a imagem não sair do

[@etivaldosouza]

Alguem conseguiu resolver o problema da responsividade no celular? Pois os icones ficam colado no aparelho quando

[@ChandlerBing-t3k]

cara o meu não estar abrindo dentro do do celular, ja fiz umas duas vezes mais não carrega dentro a tela do yotube abri a pagina separada! alguém com o mesmo problema?

[@joaofolha]

O meu também não estava. Descobri que o nome do id que estava colocando errado

[@ChandlerBing-t3k]

@@joaofolha vou dar uma olhada pra ver si é isso mesmo

[@buckbart_shorts]

@@ChandlerBing-t3k o meu tbm não. conseguiu resolver?

[@ChandlerBing-t3k]

@@buckbart_shorts Sim resolvi

[@sadvodkaa1757]

@@ChandlerBing-t3k como colega?

[@show39897]

Estou tendo problema da barra de rolagem no Firefox, no Chrome está tudo certo ela não aparece mas no Firefox não some por nada! alguém sabe como resolver?

[@gabrieloliveira6879]

/* Permitir rolagem, mas esconder as barras de rolagem */ .elemento { overflow: scroll; scrollbar-width: none; /* Para navegadores Firefox */ -ms-overflow-style: none; /* Para navegadores Internet Explorer e Edge */ } .elemento::-webkit-scrollbar { display: none; /* Para navegadores WebKit, como Chrome e Safari */ }

[@oliveira1650]

e onde vc colocou essa class "elemento"? Foi no ?

[@NataliaRodrigues-bh7pr]

dentro do celular o meu nn quer rola pra baixo

[@clebersoncosta7]

Eu também estou com o mesmo problema

[@luisgustavo2153]

como faz pra as imagens ficar nesse formato?

[@sadvodkaa1757]

tbm estou nesta duvida

[@KrisSouza1994]

No github pages só está abrindo as imagens das logos das redes sociais. Alguém sabe como resolver?

[@plantswithsara]

mesmo problema por aki :(

[@Swag7zx]

Rapaz, tá meio dificil, todas as páginas estão recusando os s