Colocando as fontes ao projeto - @Curso em Vídeo HTML5 e CSS3

[@_Victor-Lourenco]

Às vezes o *TEXTO* do nosso site fica adequado para telas maiores (desktop) mas quando abrimos a página em uma tela menor (celular), começa a ficar grande demais para ler... Então quando surgir esse tipo de problema, temos que tentar adaptar o texto do site pensando nessa questão. No desafio "Cordel Moderno" usamos um recurso que faz com que o *TEXTO* do site aumente ou diminua de acordo com o tamanho (tamanho da largura) da *janela do navegador.* Para fazer isso, a dica é usar as unidades de medidas *relativas* das CSS, como o *vh* e *vw.* Basicamente, vh significa " *viewport height* " e vw significa " *viewport width* ". Como nós já sabemos, de forma resumida a viewport é a área visível de uma janela. As unidades de medida *vh* e *vw* usam justamente o tamanho da viewport como referência para definir o tamanho das fontes de texto. Dessa forma, podemos configurar o nosso texto de uma maneira que ele aumente ou diminua dinamicamente, adaptando o tamanho desse texto para diferentes tamanhos de tela. Sendo assim, se você quer formatar o seu texto dessa forma, ao invés de configurá-lo com unidades de medida absolutas (como px ou em), configure o tamanho do texto (font-size) com a unidade de medida "vw". *Exemplo:* Para o título principal: *font-size: 10vw;* Paro o corpo da página: *font-size: 3.5vw;* Na primeira opção o tamanho da fonte vai ser *referente* a 10% da largura da viewport. Já na segunda opção, será *referente* a 3.5% da largura dessa viewport. Dessa forma, quando a tela for grande, ele coloca a letra grande... Quando a tela é menor, ele coloca a letra menor, alterando a o tamanho da fonte dinamicamente baseado na largura da tela. *Observação:* Essa técnica das medidas vh e vw para adaptar o texto não é o melhor recurso para fazer esse tipo de adaptação dinâmica. Pode até funcionar, mas não gera um resultado 100% perfeito. O ideal para fazer esse tipo de adaptação seria usar Media Queries, um conceito que veremos mais pra frente.

[@profa.inezlaert3336]

Boa tarde, prof. Guanabara! Tô muito feliz porque estou aprendendo a desenvolver sites. Consigo alterar as configurações do Site e usar sua aula como modelo para fazer outros projetos de Sites. Muito Obrigada prof.! Bjss

[@semente.criativa]

Pra quem usou tag pre no html, e a utilizou no css e for usar a --fonte3, ao invés de coloca-la na section{}, coloque font-family: var(--fonte3); na tag de estilo pre{};

[@MPENT12]

você é um anjo!!!

[@wilsonboppre5959]

@@MPENT12 salvando vidas

[@vitorac412]

Não da pra abrir mão de 10 segundos de vídeo, é toda hora uma info top na cara.

[@KappaD3]

Eu não estava a me ver aprender fazer um site com esse tipo de efeito... Já tentei várias vezes fazer cursos no KZbin, mas nunca encontrei um que me levasse do nível zero até ao que estou agora. Estou com **42 anos** e sempre fui apaixonado por tecnologias, mas a dois meses atrás decidi me empenhar ao máximo e estou amando demais. Poderia dizer que perdi muito tempo na vida para pensar em aprofundar e aprender, mas como se diz mais vale começar do que ficar se lamuriando com o que deveria ter aprendido. Já fiz o projecto android, adaptei o mesmo para uma coisa pessoal e mostrei nas pessoas próximas e estão a me chamar de profissional kkkk... Muito obrigado por essa paciência Professor Gustavo Guanabara...

[@camilalelis845]

Melhor professor, não existe!!!!

[@FalcaoJadson]

Pra quem não está a conseguir fazer as fontes funcionar: Consegui ao colocar os ajustes das fontes como CSS Interno, dentro do Espero ter ajudado ;)

[@alinegomes9084]

Amo seus vídeos Guanabara, obrigada por isso.

[@pirilampoVermelho]

Guanabara tem uma didática maravilhosa

[@misaelmatos7728]

Faz um vídeo falando sobre a 4 parte do curso de python

[@risadinha2148]

@Pedro Henrique ha ha ha aqui estamos

[@flavianafernandes8069]

Eu consegui acertar algumas coisas e fiz diferente em outras (mas o resultado visual ficou bem parecido), minha maior dificuldade era justamente fazer com que a caixa se adaptasse ao tamanho do conteúdo quando ele crescesse (também estava usando um width). Não creio que era somente um 'display: inline-block; kkkkkk mds como eu sofri com isso. Obg, professor.

[@manoelAguiar-m5x]

Essas aulas estão ajudando muito!

[@rafaelnargolo]

Quem quiser manter o texto com background na mesma direção dos de background branco, só usar no section.imagem um transform: translateX(-20px). Pode ser só translate. O valor dentro dos parenteses vai ser o mesmo de padding-left, só que negativo pra ele voltar pra esquerda.

[@lucasludtke3631]

Estou fazendo todos cursos pelo próprio site e acompanhando o material em PDF, está muito top, observação, estão dando na epic o jogo WHILE TRUE LEARN, focando em programação e bem didático, poderia fazer um vídeo para o pessoal ficar sabendo

[@amaduscamara4378]

muito obrigado prof gustavo curso top ... aparte de G-Bissau

[@Pedro-e3m9x]

Valeu Gustavo tu é foda cara! obrigado de verdade >)

[@MPENT12]

ótima aula professor!!!

[@osnaza_oficial8089]

Eu te amo guanabara

[@raphaelrychard5440]

#TOP-AULA

[@williamscapini5758]

11:12 , uma solução que achei melhor seria colocar o *width: fit-content;* , nessa configuração a largura sempre será a mínima pra caber o conteúdo, igual um box inline-level

[@antoniotrindade2117]

Muito bom!

[@speedleal14]

Curso top demais! Obrigada!

[@corteamplificado]

Minhas fontes nunca ficavam iguais ao do professor! Caso alguém tenha tido esse mesmo problema, descobri que o meu Chrome traduzia a página para Português automaticamente e quando eu importava pro VScode, ficava zoada! kkkk Então, basta desabilitar a tradução automática do chrome e atualizar a página. Depois, só importar o código novamente!

[@ryag4050]

show

[@GabrielAlves-cf8wy]

Consegui fazer quase todo o projeto sozinho, menos esse efeito de alterar o tamanho da fonte... Eu tava tentando fazer fonte-size: 10%; 🤡🤡🤡 Eu pistolei na hora pq n tava entendendo o motivo de não funcionar kkkkk Vlw Guanabara!!

[@apolo3145]

cara 10vh literalmente não funciona para mim kkkkkkkkkkkkkkkkkkkk fica muito grande

[@flavianofreire479]

mesma coisa comigo, kkkkkk eu nao li o PDF ai fiquei perdido. Pistolei na hra pra depois ele falar no video que não é a melhor forma de fazer

[@gabrieltioberio]

excelente

[@xicosorocaba6083]

sensacional parabéns

[@talilotarlison]

Obrigado !

[@GuilhermeSilva-yp4fe]

ótima aula!

[@andretakayama2088]

Baita aula

[@adolfojeffersonfernandeslo9022]

Valeu o video

[@rodrigo.moreno]

[@luisp1381]

Otimooooooooooo

[@MatheusSilva-qm3ph]

Muito top.... Voce pensa em nos ensinar a fazer um site dinamico? Obrigado.

[@lilomayke]

acho que ele não vai falar disso no curso, pois deve envolver outra linguagem (js, php...), mas eu também não tenho certeza.

[@pedrophillipe]

Em 11:38 ele usa display: inline-block; - Porém da para ter o mesmo efeito com width: fit-content; - Alguém sabe explicar o pq e qual o melhor para este caso ?

[@ramiro1410]

eu realmente não sei espero ter ajudado

[@lordfluid3369]

Velho creio q vai ser muito complicado aprender Python, pq nao tenho um Pc mano! Foda, e ate eu conseguir comprar um, ja me desanima. E comecei ontem a fazer o seu curso, mas ja to crendo q eu nao evoluiria no mesmo por este simples detalhe.

[@anavitoriaalmeidadasilva2938]

Professor, faz o módulo 5 de html.

[@Explorador170]

Bah Guanabara, para fontes faz uso do clamp font-size: clamp(1rem, 4vw, 2.5rem);

[@hiagos.4406]

Colocar o valor em do 'font-size' em '%' funciona melhor que o "vw" quando se trata de responsividade.

[@joaolucas3279]

god demais

[@emiliorobertodasilva]

Olá, professor Guanabara! O Timestamp do vídeo está incompleto, ainda assim obrigado pela aula

[@ismaelalcantara6043]

professor, o font-size eu coloquei 4em e 2em, abri no meu celular e ele se adaptou

[@fellypefellype]

o paragrafo da section normal e da section imagem ficaram desalinhados, então coloquei mais um padding no section.normal > p de 10px

[@lendel-off]

eu tava com dificuldade justamente nessa parte da responsividade do texto,agora ta tudo pronto

[@oliveira1650]

resolveu ? O meu está dando problema na hora de configurar a vw, porque quando coloca tela cheia, as letras ficam tudas grudadas

[@hevertonmariano4673]

Faaaala ae galera da Curso em Video blz?? Ano que vem estarei iniciando no curso de Análise e Desenvolvimento de Sistemas na instituição Fatec o que vocês acham, teria alguma dica a mais ???

[@Henry-ln2sk]

boa sorte cara!

[@gabrieldias708]

up

[@ritaferreira135]

Bom dia. Verifiquei que essa aula foi gravada em 06/20, teria alguma forma de eu acessar as próximas desse e dos outros módulos? Gostaria de terminar todos os módulos antes de entrar em JS, mas acredito que vai demorar muito para lançar :(

[@carlaoliveiraevangelista4331]

também quero terminar ele antes de entrar em js

[@JhonTakes]

to na mesma, rita, aparentemente vou acabar entrando em JS antes de terminar todos módulos.

[@ritaferreira135]

Pessoal, eu entrei em JS sem finalizar e deu tudo certo!!! O impacto não é grande não.

[@ThiagoCFO]

@@JhonTakes Verdade, tava querendo terminar todo esse curso pra começar no JS, mas vamos ter q iniciar antes.

[@RobsonDanger]

@@ritaferreira135 qual o seu repositorio?

[@evertonods1]

Mais alguém esta com dificuldade para incluir " --fonte2: 'Passion One', cursive; " e " --fonte3: 'Sriracha', cursive; "? O VSCode não aceita, como se a fonte " cursive" não fosse mais utilizada. Só é aceito se utilizar " sans-serif " no lugar de " cursive ".

[@KawatosLife]

Eu também estou com esse problema, que chato

[@oliveira1650]

coloca aspas simples em cursive

[@engracadinho0890]

Nossa,até agora tudo que fiz deu certo,so tive pequenos erros como font-weight etc,e tbm n coloquei as fonts,mas a parte de css eu fiz igual. O único maior erro foi no html que eu n coloquei eu coloquei o poema inteiro dentro de um e as fotos paralax coloquei em uma .

[@renatoorosco]

Deu certo mesmo com esse erro?

[@engracadinho0890]

@@renatoorosco sim

[@Umgolbege]

@@engracadinho0890 eu tambem identico cara kkkkk

[@alamo_DevFlow]

O modo que ele pronuncia sriracha me mata de rir kkkkkkk

[@henriquediomedes8954]

no site do curso em video eu não consigo passar dessa aula, ja assisti mais de três vezes e não libera a proxima aula.

[@tbagzinxl]

Porque as fontes bebas neue, cursive e sriracha não funcionam??

[@enriquecamposalvarez2721]

no meu as fontes nao funcionaram, baixei as fontes e tbm nao funcionou, fiz todo o processo pra fonte funcionar, porem tbm nao funcionou😔

[@renatoorosco]

Colocou as aspas simples? Aqui era o meu problema

[@Allexmatrix]

Pessoal, como faço para o VSCode reconhecer as fonte Geneva e Cursive? no meu fica em branco e a fonte nao muda. Obrigado por quem puder ajudar

[@RobsonDanger]

tem gente envelopando ela assim 'cursive'

[@Jcst3ch]

Pode ser pq vc esteja colocando os links das fontes em português, por conta do Google tradutor. Esse foi o meu caso, eu coloquei em inglês e deu certo.

[@daianesampaio8172]

A fonte 'Sriracha' não funcionou de jeito nenhum. Nem pelo link e nem baixando ela. Alguém teve o mesmo problema?

[@GilsonFN1]

Boa noite, estou de cabeça quente aqui, as fontes importadas não estão funcionando.. *_*

[@daianesampaio8172]

@@GilsonFN1 boa noite! Eu fiquei um tempão tentando resolver, mas não consegui. Então segui em frente.

[@paulonunes9564]

alguem sabe cade a aula na qual ele poe as imagens no site? nao to achando

[@adrianoalcantara4812]

No meu projeto eu nao carreguei as fontes direto do google fontes com o @import mas sim eu utilizei o @font-face desse modo as fontes ficam carregadas no meu projeto independente do site do google funcionar ou nao.

[@KawatosLife]

Professor, eu estou com dificuldade para incluir " --fonte2: 'Passion One', cursive; " e " --fonte3: 'Sriracha', cursive; " parece que o VS code não identifica os parâmetros cursive mais..."

[@eduardorosa2644]

[@Jeanzzz-y]

Guanabara, posso tirar seu nome na parte do footer do projeto e colocar o meu? Quando eu for colocar no githup.pages.

[@marvintavares6123]

o de mais alguém não funcionou as fontes do google?? Que coisa kkk

[@robpontojunior]

Só consegui retirando a var(--font1) da reset do CSS (*), ela não aplicava de forma alguma! Pode tentar também baixando a fonte e usando ela em seu projeto, não tentei mas provável que dê certo também. Se conseguiu de alguma forma diferente responde ai pra eu saber também

[@kidloko5689]

Quando eu copiava o código da fonte no ctrl C não funcionou, mas quando copiei na opção do Google fonts deu certo. Só retirei os Style e já era.

[@FFCagadaseMancadas]

Selecione a opção @import clique em copy code, cole no vscode e retire a tag style. Depois copie na parte de baixo somente a opção font-family

[@willianlima3487]

ei pessoal, alguém sabe oq aconteceu com o github não ta no ar ???

[@duzz6393]

Alguém poderia me falar qual curso eu poderia começar a fazer, pois não sei quase nada sobre programação, se alguém puder falar qual o melhor pra iniciantes, agradeço!!

[@franklinferreira4908]

Brother, primeiro vc tem que decidir se será front-end ou Back-end veja um pouco sobre e decida por onde seguir, abraços!

[@rodrigo.moreno]

Para mim, funcionou o seguinte, primeiro eu procurei um problema que eu possa resolver com programação e depois eu procurei qual linguagem eu devo aprender para resolver o determinado problema. Quando comecei a estudar sem um porquê, eu não senti animação para continuar.

[@kauanvicttor3975]

Lembrando que esse Software que ele está mostrando: "GitHub Desktop" não tem para Linux, porém dentro do próprio VS Code tem como vc colocar o Git e Github, vc consegue dar o commit e fazer o push para seu GitHub.

[@daianesampaio8172]

Tem no Linux sim. Utilizo o Pop!_Os e estou utilizando o GitHub Desktop normalmente e ainda baixei usando a Pop!_Shop. Anteriormente, Linux era o principal sistema utilizado por devs, impossível não ter.

[@SenhorMassacre]

😏

[@douglashenrique6766]

Não consigo importar a font Sriracha =/

[@douglashenrique6766]

O problema não estava com a font, dentro da minha section continha uma tag "", foi necessário aplicar a font family dentro dessa tag, ai deu certo.

[@robpontojunior]

Só consegui retirando a var(--font1) da reset do CSS (*), ela não aplicava de forma alguma! Pode tentar também baixando a fonte e usando ela em seu projeto, não tentei mas provável que dê certo também. Se conseguiu de alguma forma diferente Douglas responde ai pra eu saber também

[@MBLGBTQI]

as vezes pode acontecer do teu navegador estar com o tradutor automatico

[@ramonrodrigues1926]

Para mim foi quase do 0 mesmo, Pois não achei o pacote de txt e imagens fui atrás das minhas fontes

[@josegildodelima5722]

muito rápido

[@pedroeugenio1975]

excelente aula !

[@rafaelcampanincarneiro3553]

up

[@ViagensdeRaphael]

up

[@douglashenrique6766]

up