Criando a página inicial do projeto - @Curso em Vídeo HTML5 e CSS3

[@gabrielofront-end2553]

Estou fazendo curso de js pela udemy e estou quase finalizando e indo pro mercado de trabalho, e as vezes volto no seu canal pra te agradecer pq o senhor me fez gostar de programar, te agradeço mt professor, te amo demais, ainda sinto falta da forma que o senhor explica, a forma que o senhor nos ensina é única e eu nunca vi em nenhum professor, tmj e sucesso para ti❤️

[@MarcosFelipe-up9lc]

Qual curso de JS?

[@renatoorosco]

Como foi a estréia no mercado de trabalho?

[@lucaslinyker1810]

Quantos anos você tem?

[@jhonatadias30]

A imagem do celular que ele usou tem uma resolução bem alta. Se você estiver fazendo em uma tela pequena de notebook o celular vai ficar enorme mesmo fazendo o código idêntico ao dele. Para comprovar basta clicar na opção inspecionar elemento e ela fica normal igual no vídeo. Soluções: diminuir o zoom do navegador; diminuir a resolução da imagem; fazer uma gambiarra no código ou usar um computador com a tela maior.

[@jackripper8723]

valeu, tava travado aqui já tentando entender o que tinha feito de errado kkkk

[@lucasramos7614]

KKKKKkkk eu tbem tava aqui igual doido tentando entender oq fiz de errado

[@AdrianFariadeSouza]

Aprendam flexbox, esse método de position relative/absolute está caindo em desuso, então para centralizar o , o ideal seria configurá-lo no CSS da seguinte forma: display: flex; justify-content: center; align-items: center;

[@Leossj1]

Eu que nem estudei flexbox ainda pensei em colocar algo parecido com isso...

[@fabriciomonteirosmonteiro9499]

Pois então, eu cheguei justamente nessa parte, com essa faixa preta na parte de baixo(talvez por ser uma tela menor?). Acredito que a solução seja desse parâmetro displayflax. Mas nesse ponto da aula/capítulo ainda não foi ensinado.

[@limaworks9004]

valeu por evitar um massacre no notebook porque ja tinha perdido a paciencia kk

[@beatrizcarvalho2474]

isso tbem vale pro section?

[@renatoorosco]

Comecei a fazer o projeto sozinho antes de olhar as aulas e estava apanhando na centralização do telefone. Os conceitos de position relative e absolute estavam corretos, (com top, left e transform também corretos. O detalhe que faltou foi configurar o container pai (no caso, o ) com 100vh (assim como no e ). É um bom exercício quebrar a cabeça antes e depois descobrir que pequenos detalhes fazem toda a diferença.

[@matheushenrique2966]

Para os que não querem abrir o Gimp para ver o tamanho da imagem é só clicar com o botão direito na imagem ir em propriedades > detalhes. Vai está lá também as dimensões

[@GustavoHumanes]

10:55 Nesse Shorthand de background dá para colocar o back-size no shorthand direto, sem precisar usar mais uma linha de código para tal, se faz assim ó: background: color, url, position position/cover no-repeat fixed; Se não em engano era assim, mas o que eu quero avisar é que para colocar o cover depois do top e left no vídeo, é só botar uma barra que resolve.

[@vitorac412]

Melhor professor! Isso que o mundo da programação precisa, DIDÁTICA! Bora que bora Guanabaraaa

[@jonaldoking3804]

Finalista no curso de algoritmo☝️😇 Parabens a toda equipe❤️

[@waldirjunior1414]

Uma dica: estudem sobre a propriedade position: absoluta e posotion: relative , assim o exercício vai ficar mais claro pra ser entendido.

[@renatoorosco]

Realmente! Estudei e estudei e ainda está confuso.

[@Quatschy]

@@renatoorosco só com prática pra pegar essa propriedade

[@paullinhafortes]

9:30, não precisa abrir o gimp, somente deixar o mouse encima da imagem uns 3 segundos, no explorador de arquivos que aparece, tipo de item: se é jpg/png, dimensões: em px e tamanho em KB

[@layanalobo6772]

Adorando fazer esse projeto, é muito bom colocarmos em prática o que já aprendemos. Aproveito e faço os meus 'testes' aqui para praticar um pouco mais.

[@gabrieloliveira6879]

Centralize o main de forma rápida: main { display: flex; justify-content: center; align-intems: center; }

[@dvgustauz]

Cara top demais, queria ter toda essa prática, sou pequeno gafanhoto e sou fã do Guanabara! Parabéns a toda equipe envolvido 👏

[@silass310]

Parabens Guanabara pelo esforço

[@DiegoAdler]

o cara mais fantastico do mundo!

[@piterclementedasilva3067]

valeeeeeu guaná

[@renatoorosco]

Obrigado, professor gafanhotão-mor 🖖

[@doObr]

Essa parada de 'tirar' a barra de rolagem do tive que copiar do código do guanabara, em nenhum lugar achava como fazer isso, nem no chat GPT estava ajudando e também usar o border-box no box-sizing foi complicado para descobrir, sem isso os outros ícones ficavam dando umas 'tremilicadinhas' . Enfim, levei uns 3 - 4 dias para fazer, mas fiz.

[@ShacoDiJuliet]

Estava com um problema na rolagem do site e com a imagem das madeiras que nao estava cobrindo todo o fundo entao vou deixar aqui a solução que encontrei o que fiz foi tirar o "height" e "width" do "html, body" e deixar apenas no "body "isso resolveu o problema com o fundo do site ja a rolagem eu apenas coloquei um "overflow:clip;" para cortar o que ficar para fora do site e a rolagem nao aparecer mas voce tambem pode apenas diminuir os valores de "width" e "height" para algo em torno de 98, 97 vw e vh respectivamente espero ter ajudado 😄

[@pepo8226]

Guanabara Gênio

[@marvintavares6123]

Aula Muito Booa!!

[@PatsFerrer]

9:20 nem precisava abrir o gimp pra ver o tamanho da imagem, bastava clicar com o botão direito e clicar em 'propriedades' (a última opção) > clica em 'Detalhes' que ia mostrar o tamanho :p

[@andretakayama2088]

baita aula, como sempre

[@Adonias_C_Silva]

Top 👏🏽👏🏽

[@loky8281]

Fala rapaizada, sobre a parte de ver o tamanho da imagem, pra quem n tem o gimp vc pode simplesmente clicar com o botão direito na imagem ir em propriedades e em detalhes, la tem a largura e a dimensão da imagem. Propriedades>Destalhes

[@chrystophermedeiros4422]

Show

[@Familyhayzn]

top

[@llucasbrasil]

No meu, não sei porque, mas fui obrigado a adicionar novamente a declaração 'margin:0; ,no seletor 'body' . Mesmo ela já estando resetada para todos os elementos. Caso contrário, estava sendo criado uma margin no meu body, e o mesmo sendo deslocado para fora do viewport, criando barras de rolagem.

[@periclesperesoficial]

No meu essas barras não sai nem a pau kkk to bolado aqui, fica uma barra preta na parte de baixo do site.

[@periclesperesoficial]

resolvi esse problema deixando assim. html, body { background-image: url('../imagens/fundo-madeira.jpg') no-repeat top center; height: 100vh; position: relative; }

[@marcosalencar1983]

era exatamente o que eu tava pensando... fiz o exercicio de novo do 0 pq achei que tinha errado alguma coisa... kkkkkkkkk

[@tiagolimapimenta8059]

@@periclesperesoficial fiz isso e resolveu aqui também 😁

[@thaysprado15]

valeeeeu! salvou demais! o meu tava dando uma margem no top preta, agora fixou certinho :D

[@wilzz-2]

9:16 Não era só colocar um background-size: contain; ?

[@wesleymedeiros3175]

Para quem tiver a barra preta no final da pagina eu usei a seguinte solução: Section#telefone { min-heigth: 100vh; (apaga o heigth anterior) Background-size: contain; Background-position: center; (Resto permanece igual). }

[@leonardomorais4674]

Meu background (telefone) ficou da altura quase que total da minha tela ou seja quase sem espaço na parte de cima e na de baixo, como resolvo? O do Guanabara ficou centralizado na tela dele...

[@dvgustauz]

Cara eu tô aprendendo fazer apps, no meu caso isso resolveria com o layout, passaria os parâmetros, tbm com gravity, e tamanho do text tbm... Procura sobre acho q ajuda! Editado (vc também tem q ver o tamanho da sua imagem, pq isso influência, tamanho e qualidade, precisa ser específico) Editado part2( assistindo o vídeo vi q estava certo ele ensina em 9:15

[@GabrielGeriGodofwars]

Acredito que seja por causa do tamanho da imagem do celular, o meu também ficou grande mas se alterar no css, vai ficar descentralizado e cortado a imagem.

[@na_panfletos_e_cartoes]

O meu também, resolveu? acho que vou ter que redimensionar a imagem pq as dimensões da minha bateu com a do Guanabara mas estão enorme pegandoa tela toda com 627 e 311 rsrsrs

[@samuellibio4742]

@@na_panfletos_e_cartoes conseguiram resolver?

[@MarcosFelipe-up9lc]

@@samuellibio4742 Conseguiu?

[@Thiago-dk1dz]

para quem esta com o problema de rolagem, e so colocar margin: 0px; que ira resolver👍

[@MarcosSilva-fj8dt]

5:17 algum motivo especial pra colocar o "position: relative" dentro do ? eu apenas coloquei dentro do e deu certo.

[@RafaelOliveira-ho4sb]

Porque o é o elemento pai imediato das , elas foram posicionadas em relação ao elemento pai, e funciona no porque a (assim como o ) são filhas dele.

[@marketingcomsamurai]

1° ✓✓® Parabéns pelo vídeo 💪😍🤌

[@diamon_darms]

por que botar a css de tamanho no html,body ao inves de botar só no body?

[@wk4222]

Fiz as mesmas configurações que o professor fez porem a imagem do telefone parece que ficou maior, causando uma rolagem horizontal e criando uma linha preta no final da página. Alguem sabe me responder como resolvo isso ?

[@JoaoVictor-ps8zm]

coloca margin 0 no body, no meu tbm ficou assim.

[@teusmabolado]

Verifique o zoom do navegador. Aqui em casa eu precisei tirar parte do zoom do navegador na exibição porque eu havia ampliado as letras e fontes de todo notebook, afetando assim a exibição do código feito. Percebi isso porque na tela externa a exibição ficava OK e no notebook ficava cortado como no seu.

[@wk4222]

@@teusmabolado Era isso mesmo, valeu mano

[@periclesperesoficial]

o meu tbm ta assim e não consigo resolver kkk

[@periclesperesoficial]

resolvi esse problema da barra preta deixando assim. html, body { background-image: url('../imagens/fundo-madeira.jpg') no-repeat top center; height: 100vh; position: relative; }

[@saskaroth5122]

As imagens que ele pede para utilizar durante o projeto não esta funcionando.. @CursoemVideo !

[@MinecraftRespaw]

o meu section não tava ficando centralizado usando as configurações do video então mudei o top pra 20 e o left pra 40 section#telefone { position: absolute; top: 20%; left: 40%;

Não precisa advinhar o tamanho do FRAME IPHONE, é só olhar as medidas da imagem deixando o mouse parado sob ela, ou, PROPRIEDADES, e colocar exatamente o Px.

[@joaoguilhermesoligo6580]

RECEBA

[@luhmattjie]

É só aqui no KZbin ou tá no site???

[@aluilsonpeixoto3788]

Olá. Tbm tem no site. Te aconselho a fazer por lá, pois no final do curso ele disponibiliza uma prova e certificado de conclusão. Espero ter ajudado.

[@rafaelmattos468]

Parece q sim, n ta aparecendo no site do curso em video.

[@luhmattjie]

@@aluilsonpeixoto3788 é que eu não vi no site se achar me avisa aqui, obrigada 🥀🍷🔥

[@aluilsonpeixoto3788]

@@luhmattjie é que falta ele adicionar essa aula no módulo do curso. Pelo que observei ela sai primeiro aqui no KZbin mesmo e depois ele importa o do vídeo lá no site.

[@luhmattjie]

@@aluilsonpeixoto3788 obrigada

[@BrunaSales-e3s]

Não esta aparecendo para mim a opção da imagem mesmo, é como se não tivesse esse arquivo na pasta ou meu vscode não está buscando, alguém pode me ajudar ?] Estou há dois dias já e a pono de deletar tudo e começar de novo 🥲😤

[@flavianafernandes8069]

não sei se era isso que estava acontecendo contigo, mas no meu caso eu estava esquecendo dos dois pontinhos e da barra antes da palavras imagens (já que as imagens estão dentro de uma pasta), assim: ../imagens/fundo-madeira.jpg. Depois de muito rodar foi que me toquei disso e aí consegui colocar a imagem

[@texugodoido2098]

Estou com uma dúvida, no body temos a imagem de fundo madeira, porém a posição é top center. Não deveria ser bottom center?

[@texugodoido2098]

E tbm o meu projeto ficou enorme no navegador, é normal isso? 😂 Parece até que coloquei um zoom kkkk

[@yagosilva6217]

Eu redimensionei a imagem do celular. Coloquei em 455x255 e ficou legal, pq tava muito grande e com barra de rolagem. Redimensiona no gimp pra um tamanho q vc ache bom pro projeto 😅

[@isabelmeiraoliveirabarreto4827]

Eu posso colocar a imagem do celular no código do HTML em vez de colocá-la na CSS? Se sim, qual seria a melhor opção?

[@thaysprado15]

também pensei a mesma cois! tenho preferencia em por no HTML o código da img, e depois centralizar no CSS, mas fiquei na dúvida como por

[@MityRiver]

O celular ficou muito grande, resolvi a barra de rolagem colocando margin 0px no body, mas o celular continua enorme. Redimensionei minha imagem porque minha tela é menor, mas ai mandei o site pro meu namorado que tem a tela maior e ficou pequena pra ele. Alguém sabe como fazer com que o celular se adeque a cada dispositivo?

[@MBLGBTQI]

Se você estiver fazendo em uma tela pequena de notebook o celular vai ficar enorme mesmo fazendo o código idêntico ao dele. Para comprovar basta clicar na opção inspecionar elemento e ela fica normal igual no vídeo. Soluções: diminuir o zoom do navegador; diminuir a resolução da imagem; fazer uma gambiarra no código ou usar um computador com a tela maior.

[@emanuelnascente1205]

Aonde fica a aula 4 do módulo 23 desse curso?

[@GustavoCardososilva]

no caso seria modulo 4 aula 23 mais ainda não foi lançada, nao seria modulo 3 aula 23 ?

[@emanuelnascente1205]

@@GustavoCardososilva seria a continuação dessa aula

[@rogerioribei7333]

Olá tudo bem, estou aprendendo python através do seu curso, mas estou com dificuldade para instalar o pycharm , pões, uso um Chromebook e não consigo fazer ele descompactar o arquivo, se você puder me ajudar.

[@rogerioribei7333]

Estou assistindo o curso de Linux já que ele vem com um instalado mas mesmo assim não consegui fazer a instalação do pycharm

[@adjair9888]

Olá, gente. Vocês podem me ajudar? Gostaria de saber o local onde fica as respostas das atividades do material (PDF´s). Eu as faço; porém não consigo saber quais acertei/errei... e creio que isso seja essencial para aprender. Se alguém quiser me ajudar, fico agradecido. Bons estudos.

[@GabrielGeriGodofwars]

Por enquanto os pdf's não estão disponibilizados no GH, só está do capitulo 20 pra baixo, acho que futuramente ele poste os desse módulo

[@GabrielGeriGodofwars]

@@uosp3. Então mano, mas os pdf's só estão disponíveis do capítulo 20 pra baixo, o resto desse módulo ainda não está disponível

[@marianaaltivo8515]

as imagens do pacote pra fazer esse desafio não funcionam

[@MateusPaulino-w9y]

voce conseguiu baixar?

[@anavitoriaalmeidadasilva2938]

A imagem do celular está responsiva.

[@DznSkips]

Olá, como seria para posicionar o telefone e as redes-sociais utilizando CSS Grid ou Flex Box? Tentei aqui e não consegui :/ . Alguém que já souber desse assunto poderia dar uma força?

[@andressmendess]

opa, no código css na main vc pode colocar o seguinte código: display: flex; align-items: center; align-content: center; justify-content: center;

[@AS_Souza]

Flexbox e Grid, não foram ensinados ainda, então ele provavelmente vai usar position relative e absolute.

[@allan24zz27]

As imagens nao funciona

[@brunobrgamer807]

alguém me ajuda? A minha imagem fica muito grande na tela e aparece uma barra de rolagem

[@isacepifanio8027]

mano ele falou isso na aula de background

[@ronaldofilho6952]

coloca o fundo de madeira como background, e nas css, usa as propriedades de background pra ajustar a imagem c tu n lembra mt delas, procura os vídeos de background e dá uma revisada que c consegue mano

[@sistem2772]

O daminani ta diferente.

[@Leossj1]

Eu pensei que era só pôr a imagem do telefone e centrarlizar ela.... me fudi

[@speakermethos]

não mudou nada desde 2004 e 2006 kkkkk ainda to no mercado pelo jeito kkkk