*_VARIÁVEIS EM CSS:_* É possível utilizar *variáveis* dentro do CSS. Isso não torna a linguagem CSS uma linguagem de programação... Ela ainda continua sendo uma linguagem de marcação, assim como o HTML. Toda linguagem de programação tem variáveis, mas nem toda linguagem que tem variável é uma linguagem de programação. As *Variáveis* *GUARDAM VALORES* para serem _usados mais na frente_ no nosso projeto/programa. Por que deveríamos usar variáveis em CSS? Porque isso facilita, e muito, o nosso _processo de desenvolvimento_ e posteriormente a *manutenção do projeto* , caso desejemos alterar algo no futuro... Fora que tudo fica ainda mais organizado. Usando a _Paleta de Cores_ de um projeto qualquer como exemplo, geralmente alguns desenvolvedores simplesmente fixam a Paleta de Cores (códigos das cores) de um site em um comentário no documento CSS, e copiam e colam esses códigos sempre que precisam alterar uma cor... Na realidade esse não é o modo mais adequado de se fazer isso e existe uma maneira muito melhor e prática de se obter um melhor resultado, com *variáveis CSS.* Para declarar variáveis em CSS, devemos criar uma Pseudo-classe especial dentro do documento CSS atual, que seria uma espécie de *referência* dentro desse documento. As _variáveis CSS_ são definidas dentro da Pseudo-classe " *root* " ( :root {...} ). Essa pseudo-classe define as configurações para a " *RAIZ DA ÁRVORE* ", que vai servir para o _documento inteiro_ . Tudo que colocarmos e definirmos dentro dessa pseudo-classe será válido para todo o documento, já que essa pseudoclasse (root) tem uma *especificidade* muito alta, ou seja, aplicado ao HTML, :root representa o elemento e é idêntico ao seletor html, abrangendo todo o projeto... Dessa forma, basicamente podemos criar *Variáveis "Globais"* dentro de root. *Observação:* Por exemplo, em linguagens de programação, normalmente temos uma "área principal", que é onde podemos declarar as nossas variáveis globais... No CSS, essa "área principal" é na Pseudo-classe root. Todas as _Variáveis em CSS_ tem que começar com " *dois traços* " ( *--* ), após isso é preciso dar um *nome* (de sua preferência) para essa variável, posteriormente inserindo o valor da variável (código da cor nesse caso). Exemplo: *:root {* *--cor0: **#ebe5c5**;* *--cor1: **#83e1ab**;* *--cor2: **#3ddc84**;* *--cor3: **#2fa866**;* *--cor4: **#1a5c37**;* *--cor5: **#063d1e**;* *}* *Nota:* Não cadastramos as cores branco e preto nas variáveis do exemplo, mas isso é opcional e se você quiser pode cadastrar... Já que branco e preto sempre vai estar em um site, independentemente da Paleta utilizada. *IMPORTANTE:* Referente ao nome que damos para as nossas variáveis, ele é de sua preferência e você pode nomear como no exemplo acima, mas você também pode nomear de acordo com a função da variável. Por exemplo, no caso das cores da nossa Paleta, podemos nomear cada cor (variável) com o seu respectivo encargo, exemplo: "cor-de-destaque", "cor-de-fundo" e etc. Recapitulando... Para declararmos variáveis CSS, devemos abrir um seletor para a pseudo-classe "root" (referência e raiz da árvore) no início do código CSS (logo após os códigos de regra) e posteriormente declarar as nossas variáveis ( -- ) dentro desse seletor. Depois de declarar as suas *variáveis "globais"* de cor dentro do root, na hora de _formatarmos um elemento_ , qualquer elemento que seja, ao invés de digitar ou copiar e colar um código de cor, simplesmente usamos o atalho "Ctrl + Espaço", avançamos até o fim da lista de sugestões e lá estará a nossa _Paleta de Cores_ declarada no root (valores guardados por variáveis)... Posteriormente basta escolher a cor desejada e adicioná-la. Ao selecionar variáveis na lista de sugestões como valor da respectiva Propriedade, o VSC coloca a função "var(--ex-nome);" como o valor (também é possível digitar a especificação da variável ao invés de usar a lista). O legal das variáveis é que podemos pode usá-las em quaisquer elementos e depois, se um cliente pedir por exemplo, facilmente trocar o tema do site inteiro só *mudando o valor* que está *configurado na variável* (dentro de root)... É tipo um CSS dentro do CSS, trocando o valor da variável global que está no :root, você troca no *site inteiro* ... Tudo que foi configurado com essa cor/variável irá ser *automaticamente adaptado* , sem precisar modificar propriedade por propriedade, item por item... Lembrando que nos exemplos anteriores, usamos variáveis contendo valores de cores, mas ainda dentro do mesmo seletor root que abrimos, podemos também declarar variáveis de fontes de texto, tanto fontes padrão, externas ou locais... E tudo irá funcionar exatamente como as variáveis de cores. Exemplo: *:root {* *--fonte-padrao: Arial, Verdana, Helvetica, sans-serif;* *--fonte-destaque: 'Bebas Neue', sans-serif;* *--fonte-android: 'Android', sans-serif;* *}* ---> 'Bebas Neue' e 'Android' são fontes externas e locais respectivamente, que foram configuradas como valor de variáveis. *Observação:* Ao iniciarmos a configuração CSS de um novo projeto, por uma questão de organização, é muito indicado que você vá abrindo os seletores de estilização CSS de acordo com a *ordem das tags da estrutura HTML* , assim os seletores CSS ficarão organizados ao invés de aglomerados e completamente desordenados, e na hora de fazer alguma alteração pontual você irá se nortear de forma muito mais fácil pelo código CSS.
parabéns de verdade por esse repasse do que foi ensinado, é muito inspirador ver isso enquanto eu escrevo tão pouco nas minhas anotações... você vai longe!!!!
@@isaiasandre9164 eu estava também KKKKKKK vim ver os comentários para ver se achava alguém com o mesmo problema que eu, e acabei encontrando a solução, valeu @Ezequiel santos
Mano eu fico de cara vendo esse curso, PQ esse Curso esta Disponível de graça aqui no youtube, e eu aprendo demais com ele, esse curso é muito melhor que muitos cursos pagos que você encontra pela internet, um curso como esse devia custar 1000 reais , porque eu tenho certeza que quando eu terminar ele, eu vou sair como um profissional, Muito Obrigado Curso em Video por disponibilizar este curso de qualidade de graça aqui no youtube, Vocês são demais .
Para quem a fonte do Idroid não funcionar, faça o seguinte: 1º Instale a fonte no computador 2º Tire a fonte da pasta de "fontes" e jogue dentro da pasta "Style" 3º Feche o Visual Code e abra novamente alterando o caminho no: @font-face { font-family: 'Andoid'; src: url ('idroid.otf') format ('opentype'); font-weight: normal; } Um ponto interessante é que ao declarar: src: url ('idroid.otf'), funciona também não adicionando as aspas, ou seja, src: url (idroid.otf). Funcionou aqui!
Caso sua fonte "idroid.otf" não tenha funcionada foi pq voce precisa configurar no css que o h1 é filho do article que é filho do main... assim : main > article > h1 { font-family: var(- - font-android); foi o que funcionou pra mim quando não funcionou a font. espero ter ajudado...
Na verdade, o 'main h1' e 'main h2' indicam que não h1 e h2 não são filho diretos, mas são DESCENDENTES da tag 'main'. Funciona perfeitamente, pois você está informando que esses elementos não são elementos de primeiro nível, mas são DESCENDENTES.
Boa tarde professor! Concluí o curso de python no estudonauta, mas acredito muito que falta um mundo 4 ensinando a trabalhar com GUI, e gostaria muito que tivesse. Muito obrigado pelo seu ensino!
Eu também tomei o curso de python, e no final ele promete o mundo 4 e o 5, espero já tem um tempão e nunca saiu! Mesmo assim é o melhor professor que eu já tive.
Finalmente to em dia com os videos do curso. Fiz tbm o curso de Git e GitHub e vou aplicar nesse projeto pra ir praticando e criando repositórios. Obrigado Guanabara e Curso em Video por nos ajudar nesse sonho de programação e Desenvolvimento.
nossa gente nenhuma das fontes tava funcionando pra mim, passei muita raiva kkkk mas lendo os comentários consegui resolver! não desista! lembre-se o porque você começou. você vai conseguir!
Muito Obrigado amigo!!! Já estava quebrando a cabeça, cheguei a baixar novamente as fontes do site, achei que poderia ser algum problema com o arquivo do Guanabara. Salvou!
Caso sua fonte "idroid.otf" não tenha funcionado, vc coloca ela dentro da pasta "estilo", onde está o link do css @font-face { font-family: 'Android'; src: url('../idroid.otf'); font-weight: normal; } foi o que funcionou pra mim quando não funcionou a font. Espero ter ajudado...
Muito bacana essa parte de variável nas CSS, acho que irei fazer em todos os meus projetos, pra já virar um abito, e quando tiver que mudar alguma coisa no site, fique mais fácil.
Variáveis em CSS que maravilha. To contando os segundos pra aula de responsividade, muitos sites perdem clientes por desenvolver seu código apenas para PC, onde talvez o público alvo acesse mais via smartphone ou iphone. Deixando aqui aquele agradecimento ao Guanabara por todos esses anos compartilhando conhecimento com qualidade, Deus abençoe sempre meu querido. Um grande abraço.
para quem está apanhando para o --fonte-destaque: 'Bebas Neue', cursive; basta colocar o cursive entre aspas simples, a mas no guanabara nao precisou....bom aqui deu certo
Professor Guanabara! Obrigado por compartilhar seu conhecimento com a gente, e de forma gratuita! Sua didática é sensacional, ensina de forma simples e objetiva!!! Ainda sou iniciante, mais com sua ajuda, irei longe! Obrigado!
Mano essa aula FOI FODA!!!!! Pior que assim, talvez até tenha, mas a maioria dos videos ai de CSS não vejo comentando sobre essa possibilidade de colocar variáveis! Ai se torna muito mais prático a questão de deixar um template pré-determinado dependendo da paleta da empresa.
@@gustavo.c7641 provavelmento pelo local da fonte, esta dentro de uma pasta o estilo em outra, o guanabara falou no video que tem que colocar 2 pontos antes da barra / ,pra dá certo
Algo que pode parecer besteira, mas aconteceu comigo nessa aula e eu fiquei batendo cabeça uns 40 minutos pra resolve. Cuidado com erro de digitação, enters e espaços....eu dei enters a mais quando abri a main para as fontes e a fonte do meu h1 simplesmente não carregava e eu havia digitado tudo certinho, deletei, copiei, colei e aí com o video pausado fiquei prestando atenção no meu código e no código do Prof. e vi que eu tinha dado enters a mais, fiquei tipo: Q??? hahaha qdo arrumei a fonte carregou, eu até parei pra dar uma respirada. Acho que meus olhos estão viciando pq qdo algo não funciona ja logo vou ver se não foi erro de digitação. Essa aula foi muito boa tô amando! Obrigada Guanabara e equipe!
Ufa! Devo confessar que foi difícil mesmo acompanhando com o professor, pois teve alguns 'bugs' de fonte ou coisas do gênero. E sinceramente? Foram esses bugs que me fizeram quebrar a cabeça e entender melhor sobre as variaveis e sobre as fontes. Quando o professor fala sobre nós não sermos copiadores de código, é sobre isso! Aprendemos cada detalhe de cada código, e compreenderemos o motivo de algo não funcionar. Podemos no futuro copiar estruturas para otimizar nosso trabalho,mas devemos saber como eles funcionam para resolver problemas, até porquê vamos trabalhar em desenvolvimentos em andamento também ! Agradeço aos comentários daqui, que me ajudaram a entender o problema. VAMOS AO MODULO 3 PESSOAL
A fonte "Bebas Neue" não está mais disponível no site Google-fonts, coloquei outra fonte também cursiva, detalhe: não funcionava de modo algum, descobri que o problema era que o site do Google-fonts traduzia automaticamente para português os códigos das fontes (nome, etc)... resolvi desativando o tradutor... claro que CSS não lẽ códigos em português né!
desativei o tradutor automático, aliás eu proibi de traduzir o Google fonts e mesmo assim não funciona o diabo da Bebas e o meu import tá idêntico ao do Guanabara
✨ *DICA* Existe uma extensão muito boa no VS Code, chamada "Colorize", que pinta o fundo da declaração (ex: #c5ebd6) com a cor do código. Facilita a visualização da cor, até mesmo em código comentado.
pessoal pra quem tá com duvida da font idroid n funcionar no root tem que tá --fonte-android (com a letra E) do mesmo jeito que o guanabara fez, mas no main h1 tem que sem font (sem o E)
Mano do ceu, eu já não sabia mais o que fazer, muito obrigado pelo comentário, nossa agora vou conseguir dormir, já se passaram boas 7hrs, obrigado amigo.
Dicas : Fiquem atentos aos espaçamentos, ; e palavras maiúsculas que vocês escrevem. Até mesmo o guanabara teve alguns errinhos que ele voltou pra corrigir. Faça com CALMA, devagar e no seu tempo. Se nao tiver igual, quebre a cabeça lendo comentários e testando até compreender, pois apenas copiar o código do guanabara você NÃO vai aprender totalmente. A cada ano, o visual code muda algumas coisas aqui outras ali, então fique atento.
Quando eu fiz a primeira vez, meu não ficou descolado do main, então quando usei o *{ e coloquei margin e padding 0px, o main ficou colado do lado esquerdo e não aceitou o margin auto. Depois analisando meu código, vi que as tags iniciais estavam em níveis diferentes, quando eu organizei, o ficou descolado do body e aí deu para o usar o margin com 0px, mas não precisei usar o padding 0px. Isso de as tags estarem em níveis diferentes influencia mesmo ou é só mexi em outra coisa sem perceber e funcionou?
Aí gente, vai uma dica. Pra quem sabe que não vai lembrar do :root, usa só esse sinal : *{} isso vai ajudar vocês bastante e pode ter a mesma função que o root que no caso é a sua principal fonte do CSS.
Em alguns caso a fonte 'idroid.otf' não vai funcionar, tem duas maneiras de fazer ela funcionar. Primeira: main > article > h1{font-family: var(--fonte-android);}. Faça isso para h2 também. Segunda: main h1 {font-family: var (--font-android);}
Gente pra quem nao esta conseguindo por a fonte iDroid, e ja seguiu todas as dicas dos comentários e não deu certo igual EU, tentem Ir diretamente no site DAFONTES e baixa a fonte diretamente na pasta do exercício de vcs, e tentem coloca novamente, não precisa muda nada no codigo que o prof passou, somente baixa e coloca a nova fonte baixada, eu acho que ela foi modificada ou algo do tipo, pq depois que eu fiz isso, o meu começou a funcionar !
Tive que retirar o arquivo da fonte android de dentro da pasta e mesmo assim precisei colocar os dois pontos, então ficou assim: @font-face { font-family: 'Android'; src: url('../idroid.otf') format('opentype'); font-weight: normal; }
@@arthurvs_silva eu estava com esse problema tambem. tira a fonte de dentro da pasta de fontes, ou de onde quer que ela esteja, e coloca na pasta de estilo. vai dar certo
Guanabara amo seus vídeos e cursos. Longe de mim querer lhe corrigir, mas para selecionar todas as tags com o * creio que seja mais ruim. Seria melhor selecionar todas uma a frente da outra como no exemplo que você falou que ia da mais trabalho, porque vai ter que escrever todas. Mas acho que em questão de um site grande o * vai deixar o site mais lento do que a outra opção. Porque o * na hora do Google fazer a busca ele vai passar uma a uma das tags no HTML verificando, e da outra forma vai ser verificado só as tags que foi colocada no CSS e não todo HTML. Me corrija se eu estiver errado e seria bom um video para explicar entre as duas funções. Desculpa qualquer coisa, até porque estou aprendendo hehe.
com a pasta externa eu não consegui por a fonte idroid ( ../ ) então eu passei a pasta fontes para dentro da pasta onde estava o html e css e, só assim, funcionou! Mas o unico que não funcionou foi o h1, então criei um class nele pra mudar diretamente ele no css e assim funcionou.
galera, parece que o arquivo CSS só reconhece os arquivos de fonte(para quem passou perrengue com o Idroid, como eu) se eles estiverem na mesma pasta que ele ou se ele estiver na mesma pasta com a pasta "fontes", separado e sem estar em pasta nenhuma. É uma hipótese, mas deve ser por isso que colocar o arquivo CSS numa pasta separada deu errado. Tentando fazer o que falei no começo pode solucionar o problema. Se ficou confuso, tente pegar o "idroid.otf" e colocar dentro da pasta "style" ou tirar o style.css da pasta style e jogar para a pasta d10.
Galera, a estilização da minha fonte só deu certo nessa estrutura: main > article h1{ color: var(--cor5); font-family: var(--fonte-android); } main > article h2 { font-family: var(--fonte-android); }
aqui no meu, na parte da fonte do android 11:00 , n precisei usar dois pontos, funcionou normal, sim a fonte está dento de uma pasta, e esta pasta está exatamente onde o arquivo princial "index" está, mistérios da vida rs
Fiz o desafio sem usar as variáveis, demorei 28 horas sendo BURRO, mas no final ficou bom, com as fontes certinhas coisa e tal. Mas fiz agora de novo com o Guanabara e minha variável da fonte android deu ruim, o h1 não queria reconhecer de forma nenhuma usando o valor em variável, aí eu perdi a paciência e botei font-family: Android; :]
Eu fiz sem o vídeo, mas n sabia que tinha que ter responsividade e tal, demorou 3 horas, mas não to querendo te desmerecer, talvez se eu tentasse fazer tudo que era pra ser feito mesmo, acho que eu teria até desistido kkkkkkkkkkkkkkkk
Vim aqui pra dizer que no meu caso, a fonte idroid não estava funcionando corretamente devido o caminho que eu não coloquei direito, ficou assim: @font-face{ font-family: 'Android'; src: url('/fontes/idroid.otf') format('opentype'); font-weight: normal; } Espero que a fonte não dê mais problemas.
Aqui comigo, o problema da fonte foi resolvido da seguinte forma: Quando usando o main > h1, o css não encontrava; Nem mesmo usando o main > article > h1; Então depois de alguns testes, eu tentei só o article > h1; E funcionou! Se der certo pra mais alguém, comenta ai.
Fiz o site primeiro pra depois assistir as aulas, e eu estava me matando pra tirar margem e padding era só fazer um * { margin: 0px padding:0 px} kkkkkkk, fiquei uma hora tentando tirar
Professor você queria configurar o h1 do header, pra isso usou comando header > h1 { } Dai você quis também configurar agora h1 do main, mas não usou o ">" main h1 { } Por que? Por que um precisa e outro não? E parabéns para o conteúdo de qualidade
Não deu nada certo no meu nessa aula… Não to mais nem sabendo oq eu to fazendo kkkkk Edit: Apaguei a 'merda' que tinha feito antes e fiz do jeito que tá no vídeo e deu certo.
![Quando Rondo - Life Goes On [Official Music Video]](http://i.ytimg.com/vi/eIf3fhMXAow/mqdefault.jpg)
*_VARIÁVEIS EM CSS:_*
É possível utilizar *variáveis* dentro do CSS. Isso não torna a linguagem CSS uma linguagem de programação... Ela ainda continua sendo uma linguagem de marcação, assim como o HTML. Toda linguagem de programação tem variáveis, mas nem toda linguagem que tem variável é uma linguagem de programação.
As *Variáveis* *GUARDAM VALORES* para serem _usados mais na frente_ no nosso projeto/programa.
Por que deveríamos usar variáveis em CSS? Porque isso facilita, e muito, o nosso _processo de desenvolvimento_ e posteriormente a *manutenção do projeto* , caso desejemos alterar algo no futuro... Fora que tudo fica ainda mais organizado.
Usando a _Paleta de Cores_ de um projeto qualquer como exemplo, geralmente alguns desenvolvedores simplesmente fixam a Paleta de Cores (códigos das cores) de um site em um comentário no documento CSS, e copiam e colam esses códigos sempre que precisam alterar uma cor... Na realidade esse não é o modo mais adequado de se fazer isso e existe uma maneira muito melhor e prática de se obter um melhor resultado, com *variáveis CSS.*
Para declarar variáveis em CSS, devemos criar uma Pseudo-classe especial dentro do documento CSS atual, que seria uma espécie de *referência* dentro desse documento.
As _variáveis CSS_ são definidas dentro da Pseudo-classe " *root* " ( :root {...} ). Essa pseudo-classe define as configurações para a " *RAIZ DA ÁRVORE* ", que vai servir para o _documento inteiro_ .
Tudo que colocarmos e definirmos dentro dessa pseudo-classe será válido para todo o documento, já que essa pseudoclasse (root) tem uma *especificidade* muito alta, ou seja, aplicado ao HTML, :root representa o elemento e é idêntico ao seletor html, abrangendo todo o projeto... Dessa forma, basicamente podemos criar *Variáveis "Globais"* dentro de root.
*Observação:* Por exemplo, em linguagens de programação, normalmente temos uma "área principal", que é onde podemos declarar as nossas variáveis globais... No CSS, essa "área principal" é na Pseudo-classe root.
Todas as _Variáveis em CSS_ tem que começar com " *dois traços* " ( *--* ), após isso é preciso dar um *nome* (de sua preferência) para essa variável, posteriormente inserindo o valor da variável (código da cor nesse caso). Exemplo:
*:root {*
*--cor0: **#ebe5c5**;*
*--cor1: **#83e1ab**;*
*--cor2: **#3ddc84**;*
*--cor3: **#2fa866**;*
*--cor4: **#1a5c37**;*
*--cor5: **#063d1e**;*
*}*
*Nota:* Não cadastramos as cores branco e preto nas variáveis do exemplo, mas isso é opcional e se você quiser pode cadastrar... Já que branco e preto sempre vai estar em um site, independentemente da Paleta utilizada.
*IMPORTANTE:* Referente ao nome que damos para as nossas variáveis, ele é de sua preferência e você pode nomear como no exemplo acima, mas você também pode nomear de acordo com a função da variável. Por exemplo, no caso das cores da nossa Paleta, podemos nomear cada cor (variável) com o seu respectivo encargo, exemplo: "cor-de-destaque", "cor-de-fundo" e etc.
Recapitulando... Para declararmos variáveis CSS, devemos abrir um seletor para a pseudo-classe "root" (referência e raiz da árvore) no início do código CSS (logo após os códigos de regra) e posteriormente declarar as nossas variáveis ( -- ) dentro desse seletor.
Depois de declarar as suas *variáveis "globais"* de cor dentro do root, na hora de _formatarmos um elemento_ , qualquer elemento que seja, ao invés de digitar ou copiar e colar um código de cor, simplesmente usamos o atalho "Ctrl + Espaço", avançamos até o fim da lista de sugestões e lá estará a nossa _Paleta de Cores_ declarada no root (valores guardados por variáveis)... Posteriormente basta escolher a cor desejada e adicioná-la.
Ao selecionar variáveis na lista de sugestões como valor da respectiva Propriedade, o VSC coloca a função "var(--ex-nome);" como o valor (também é possível digitar a especificação da variável ao invés de usar a lista).
O legal das variáveis é que podemos pode usá-las em quaisquer elementos e depois, se um cliente pedir por exemplo, facilmente trocar o tema do site inteiro só *mudando o valor* que está *configurado na variável* (dentro de root)... É tipo um CSS dentro do CSS, trocando o valor da variável global que está no :root, você troca no *site inteiro* ... Tudo que foi configurado com essa cor/variável irá ser *automaticamente adaptado* , sem precisar modificar propriedade por propriedade, item por item...
Lembrando que nos exemplos anteriores, usamos variáveis contendo valores de cores, mas ainda dentro do mesmo seletor root que abrimos, podemos também declarar variáveis de fontes de texto, tanto fontes padrão, externas ou locais... E tudo irá funcionar exatamente como as variáveis de cores. Exemplo:
*:root {*
*--fonte-padrao: Arial, Verdana, Helvetica, sans-serif;*
*--fonte-destaque: 'Bebas Neue', sans-serif;*
*--fonte-android: 'Android', sans-serif;*
*}*
---> 'Bebas Neue' e 'Android' são fontes externas e locais respectivamente, que foram configuradas como valor de variáveis.
*Observação:* Ao iniciarmos a configuração CSS de um novo projeto, por uma questão de organização, é muito indicado que você vá abrindo os seletores de estilização CSS de acordo com a *ordem das tags da estrutura HTML* , assim os seletores CSS ficarão organizados ao invés de aglomerados e completamente desordenados, e na hora de fazer alguma alteração pontual você irá se nortear de forma muito mais fácil pelo código CSS.
parabéns de verdade por esse repasse do que foi ensinado, é muito inspirador ver isso enquanto eu escrevo tão pouco nas minhas anotações... você vai longe!!!!
Gente quem tiver com problema no font-family: cursive; é só colocar o cursive entre aspa ex: --fonte-android: 'android', 'cursive';
Valeu funcionou aqui!!!!🤟👊
Obrigado Ezequiel, estava quebrando a cabeça aqui pois o cursive ficava sem reconhecimento na ide
@@isaiasandre9164 eu estava também KKKKKKK vim ver os comentários para ver se achava alguém com o mesmo problema que eu, e acabei encontrando a solução, valeu @Ezequiel santos
nossa, eu ja tava ficando louca aqui kkkk 🤣😅
vlw
Mano eu fico de cara vendo esse curso, PQ esse Curso esta Disponível de graça aqui no youtube, e eu aprendo demais com ele, esse curso é muito melhor que muitos cursos pagos que você encontra pela internet, um curso como esse devia custar 1000 reais , porque eu tenho certeza que quando eu terminar ele, eu vou sair como um profissional, Muito Obrigado Curso em Video por disponibilizar este curso de qualidade de graça aqui no youtube, Vocês são demais .
Para quem a fonte do Idroid não funcionar, faça o seguinte:
1º Instale a fonte no computador
2º Tire a fonte da pasta de "fontes" e jogue dentro da pasta "Style"
3º Feche o Visual Code e abra novamente alterando o caminho no:
@font-face {
font-family: 'Andoid';
src: url ('idroid.otf') format ('opentype');
font-weight: normal;
}
Um ponto interessante é que ao declarar:
src: url ('idroid.otf'), funciona também não adicionando as aspas, ou seja, src: url (idroid.otf). Funcionou aqui!
valeu , irmao. Tmj
finalmente funcionou, muitíssimo obrigado!
posso estar errada, mas se eu instalar no meu pc, é possível que funcione só aqui comigo? acho que se fosse de algum cliente não iria funcionar...
MANOOOOOO ... deu muito bom, estava a horas tentando resolver esse problema. Vlw demais
depois de 3 horas tentando deu certo obrigado
Caso sua fonte "idroid.otf" não tenha funcionada foi pq voce precisa configurar no css que o h1 é filho do article que é filho do main... assim :
main > article > h1 { font-family: var(- - font-android);
foi o que funcionou pra mim quando não funcionou a font.
espero ter ajudado...
Obrigado! Kkkk
Valeu demais , ajudou muito
Mito, mito demais, ajudou muito vlw
Comentar up pra outros que tiverem com o mesmo problema olharem isso
Up
obrigado a todos que comentam!! Vocês me ajudam muito!!
Dica digite só o var e nos ( ) aperte ctrl + espaço que aparecem só as cores das variáveis pré-definidas 👊
até se digitar diretamente a cor ele já completa (ao menos no meu).
Que curso perfeito, não tem nenhum canal no RUclips que entrega conteúdo de desenvolvimento de forma tão caprichada e mastigada assim!
to começando a questionar do pq eu to fazendo faculdade... esse profe me ensina tudo que eu preciso e muito mais
Faz facu de que?
@@ferreira8800 sistemas para internet.
@@graziellarodrigues7955 é da Unicesumar?
vai pelo diploma
Sensacional. Em sites mais complexos, o uso do ':root' facilita demais. Curso igual a esse não existe, definitivamente.
O caminho correto para aplicar a fonte Android ao e na verdade é main > article > h1
Na verdade, o 'main h1' e 'main h2' indicam que não h1 e h2 não são filho diretos, mas são DESCENDENTES da tag 'main'.
Funciona perfeitamente, pois você está informando que esses elementos não são elementos de primeiro nível, mas são DESCENDENTES.
Valeu irmão, tava quase atacando o monitor no chão HAHAHAHA
@@sharalisson Vim atrás justamente dessa informação, obrigado pela resposta.
@@sharalisson ajudou pakas
Eu tentei fazer isso e n consegui, então eu tirei a fonte da pasta e deu certo
Boa tarde professor! Concluí o curso de python no estudonauta, mas acredito muito que falta um mundo 4 ensinando a trabalhar com GUI, e gostaria muito que tivesse. Muito obrigado pelo seu ensino!
Eu também tomei o curso de python, e no final ele promete o mundo 4 e o 5, espero já tem um tempão e nunca saiu! Mesmo assim é o melhor professor que eu já tive.
Conteudo literalmente de graça carakk
Esse lance das variáveis foi MT TOP
Você por aqui kk Te acompanho no Insta
Que Deus te abençoe prof Gustavo, seu trabalho com certeza mudou a vida de muitos, parabéns por tudo!
Só comecei a gostar de criar sites por tua causa desde o primeiro curso em vídeo, tu ensina muito bem
Finalmente to em dia com os videos do curso. Fiz tbm o curso de Git e GitHub e vou aplicar nesse projeto pra ir praticando e criando repositórios. Obrigado Guanabara e Curso em Video por nos ajudar nesse sonho de programação e Desenvolvimento.
nossa gente nenhuma das fontes tava funcionando pra mim, passei muita raiva kkkk mas lendo os comentários consegui resolver!
não desista! lembre-se o porque você começou. você vai conseguir!
kkkkkk passei essa raiva também
@@Matheuss_77 duas aspas dão uma tremenda diferença kkkkkk
Pra quem esta com erro na fonte h1 e h2, tenta trocar o "main > h1" e "main > h2" por "article > h1" e por "article > h2"
Valeeu, salvou muito
Que Deus te abençoe, amigo.
salvou demais velho, brigadão
Muito Obrigado amigo!!! Já estava quebrando a cabeça, cheguei a baixar novamente as fontes do site, achei que poderia ser algum problema com o arquivo do Guanabara.
Salvou!
Ou também: main > article > h1 e main > article > h2
MELHOR CANAL DO RUclips! Quem dúvida, vai ver a qualidade dos cursos PAGOS por aí e depois volta aqui...!
Caso sua fonte "idroid.otf" não tenha funcionado, vc coloca ela dentro da pasta "estilo", onde está o link do css
@font-face {
font-family: 'Android';
src: url('../idroid.otf');
font-weight: normal;
}
foi o que funcionou pra mim quando não funcionou a font.
Espero ter ajudado...
Salvou hein 👏🏽 só de colocar na pasta estilo e apertar ctrl* espaço já apareceu 🙌🏽
16:44 cara isso me deu maior dor de cabeça, tive que mexer em cada elemento separado. Olha só a simplicidade dessa solução!
Muito bacana essa parte de variável nas CSS, acho que irei fazer em todos os meus projetos, pra já virar um abito, e quando tiver que mudar alguma coisa no site, fique mais fácil.
hábito*
Para quem não estiver conseguindo mudar as propriedades no CSS usando: main > h1 {} Você resolve adicionando o article: main > article h1 {}
Obrigada por lembrar.
Manoooo, muito obg 😢
Obrigada
Variáveis em CSS que maravilha. To contando os segundos pra aula de responsividade, muitos sites perdem clientes por desenvolver seu código apenas para PC, onde talvez o público alvo acesse mais via smartphone ou iphone.
Deixando aqui aquele agradecimento ao Guanabara por todos esses anos compartilhando conhecimento com qualidade, Deus abençoe sempre meu querido.
Um grande abraço.
para quem está apanhando para o --fonte-destaque: 'Bebas Neue', cursive; basta colocar o cursive entre aspas simples, a mas no guanabara nao precisou....bom aqui deu certo
obrigado!
I paused as you went along and did the steps myself and that helped a TON.
Professor Guanabara! Obrigado por compartilhar seu conhecimento com a gente, e de forma gratuita! Sua didática é sensacional, ensina de forma simples e objetiva!!! Ainda sou iniciante, mais com sua ajuda, irei longe! Obrigado!
ansiosa pelo proximo video, a parte de responsividade é a que eu nao consegui fazer, enquanto isso vou p curso de JavaScript.
O atalho pra criar comentário em qualquer linguem ,seja HTML5 ,CSS3 ,JAVASCRIPT, é "shift + alt +a"
var em css foi um apredizando em tanto o/// eternamente grato.
estou acompanhando desde o primeiro vídeo, é sensacional, é só prestar atenção em cada detalhe e anotar tudo que você aprende com muita facilidade
Que aula, meu amigo! Obrigado professor pelas aulas!
Mano essa aula FOI FODA!!!!!
Pior que assim, talvez até tenha, mas a maioria dos videos ai de CSS não vejo comentando sobre essa possibilidade de colocar variáveis! Ai se torna muito mais prático a questão de deixar um template pré-determinado dependendo da paleta da empresa.
Muito bom, variaveis em CSS facilita demais a nossa vida!
Pode me enviar o código dessa aula? tem algo de errado no meu, n ta aparecendo a fonte q eu baixei... pf
@@gustavo.c7641 provavelmento pelo local da fonte, esta dentro de uma pasta o estilo em outra, o guanabara falou no video que tem que colocar 2 pontos antes da barra / ,pra dá certo
src: url("../fontes/idroid.otf")
melhor professor de todos, a didatica do guanabara é fod4stica
essas cores pasteis simplesmente me fascinam
Algo que pode parecer besteira, mas aconteceu comigo nessa aula e eu fiquei batendo cabeça uns 40 minutos pra resolve. Cuidado com erro de digitação, enters e espaços....eu dei enters a mais quando abri a main para as fontes e a fonte do meu h1 simplesmente não carregava e eu havia digitado tudo certinho, deletei, copiei, colei e aí com o video pausado fiquei prestando atenção no meu código e no código do Prof. e vi que eu tinha dado enters a mais, fiquei tipo: Q??? hahaha qdo arrumei a fonte carregou, eu até parei pra dar uma respirada. Acho que meus olhos estão viciando pq qdo algo não funciona ja logo vou ver se não foi erro de digitação. Essa aula foi muito boa tô amando! Obrigada Guanabara e equipe!
Ensinamento perfeito, passei a entender alguns conceitos que ficava boiando. Boa Guanabara!
Cara você faz um trabalho incrível
📝 *LEMBRE-SE:*
*Variáveis:* toda variável em CSS inicia com --
*Pseudoclasse :root* -> raiz da árvore do documento.
- Tudo que for definido dentro, servirá para o documento todo.
*Ex:* Salvando variáveis de cores e fontes
:root {
--cor0: #c5ebd6;
--cor1: #83e1ad;
--cor2: #3ddc84;
--cor3: #2fa866;
--cor4: #1a5c37;
--cor5: #063d1e;
--fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
--fonte-destaque: 'Bebas Neue', cursive;
--fonte-android: 'Android', cursive;
}
Obrigadi Tiago Sampa
😮💨😶🌫😉
pra quem tbm nao conseguiu usar a fonte idroid, tentem colocar o seguinte seletor: main > article > h1 {} (ou h2, dependendo da sua situação).
Obrigado Mestre !!!
Obrigado grande mestre
obrigado grande sábio
Ufa! Devo confessar que foi difícil mesmo acompanhando com o professor, pois teve alguns 'bugs' de fonte ou coisas do gênero. E sinceramente? Foram esses bugs que me fizeram quebrar a cabeça e entender melhor sobre as variaveis e sobre as fontes. Quando o professor fala sobre nós não sermos copiadores de código, é sobre isso! Aprendemos cada detalhe de cada código, e compreenderemos o motivo de algo não funcionar. Podemos no futuro copiar estruturas para otimizar nosso trabalho,mas devemos saber como eles funcionam para resolver problemas, até porquê vamos trabalhar em desenvolvimentos em andamento também ! Agradeço aos comentários daqui, que me ajudaram a entender o problema. VAMOS AO MODULO 3 PESSOAL
Obrigado Professor!
A fonte "Bebas Neue" não está mais disponível no site Google-fonts, coloquei outra fonte também cursiva, detalhe: não funcionava de modo algum, descobri que o problema era que o site do Google-fonts traduzia automaticamente para português os códigos das fontes (nome, etc)... resolvi desativando o tradutor... claro que CSS não lẽ códigos em português né!
Valeu mano, faltava isso pra me também
Meu Deus kkkkk, fiquei horas tentando descobrir o q estava errado e era algo tão simples
desativei o tradutor automático, aliás eu proibi de traduzir o Google fonts e mesmo assim não funciona o diabo da Bebas e o meu import tá idêntico ao do Guanabara
Já ta no modulo 2 nossa esse canal tem muito conteudo😎😎
✨ *DICA*
Existe uma extensão muito boa no VS Code, chamada "Colorize", que pinta o fundo da declaração (ex: #c5ebd6) com a cor do código. Facilita a visualização da cor, até mesmo em código comentado.
Excelente ... sem igual e já estou na plataforma!
pessoal pra quem tá com duvida da font idroid n funcionar no root tem que tá --fonte-android (com a letra E) do mesmo jeito que o guanabara fez, mas no main h1 tem que sem font (sem o E)
Mano do ceu, eu já não sabia mais o que fazer, muito obrigado pelo comentário, nossa agora vou conseguir dormir, já se passaram boas 7hrs, obrigado amigo.
Incrível, que aula maravilhosa
De novo, obrigado pela aula!!!
oooooooooooo melhorr professor!!!
Muito Obrigado, Professor!
Dicas :
Fiquem atentos aos espaçamentos, ; e palavras maiúsculas que vocês escrevem. Até mesmo o guanabara teve alguns errinhos que ele voltou pra corrigir.
Faça com CALMA, devagar e no seu tempo. Se nao tiver igual, quebre a cabeça lendo comentários e testando até compreender, pois apenas copiar o código do guanabara você NÃO vai aprender totalmente. A cada ano, o visual code muda algumas coisas aqui outras ali, então fique atento.
Quando eu fiz a primeira vez, meu não ficou descolado do main, então quando usei o *{ e coloquei margin e padding 0px, o main ficou colado do lado esquerdo e não aceitou o margin auto.
Depois analisando meu código, vi que as tags iniciais estavam em níveis diferentes, quando eu organizei, o ficou descolado do body e aí deu para o usar o margin com 0px, mas não precisei usar o padding 0px.
Isso de as tags estarem em níveis diferentes influencia mesmo ou é só mexi em outra coisa sem perceber e funcionou?
Valeu pela aula!
Muuuito bom, eu te amo Guanabara
Que aula!! Meu Deus!!
Aí gente, vai uma dica. Pra quem sabe que não vai lembrar do :root, usa só esse sinal : *{} isso vai ajudar vocês bastante e pode ter a mesma função que o root que no caso é a sua principal fonte do CSS.
Em alguns caso a fonte 'idroid.otf' não vai funcionar, tem duas maneiras de fazer ela funcionar.
Primeira:
main > article > h1{font-family: var(--fonte-android);}.
Faça isso para h2 também.
Segunda:
main h1 {font-family: var (--font-android);}
Caraca, esse foi o único que funcinou. Valeu!
Vlw Irmãoo, eu to uma hora aqui tentando arrumar e nada dava certo. Deus abençõe :).
Super Sayajin BLUE, massa!!!
Gente pra quem nao esta conseguindo por a fonte iDroid, e ja seguiu todas as dicas dos comentários e não deu certo igual EU, tentem
Ir diretamente no site DAFONTES e baixa a fonte diretamente na pasta do exercício de vcs, e tentem coloca novamente, não precisa muda nada no codigo que o prof passou, somente baixa e coloca a nova fonte baixada, eu acho que ela foi modificada ou algo do tipo, pq depois que eu fiz isso, o meu começou a funcionar !
Tinha feito tudo o que podia usando os comentários acima e nada, ainda bem que você comentou, me salvou. Obrigada!
Ufaaaa! Obrigada!
Estava quebrando a cabeça, só deu certo depois que alterei a fonte!! Obrigado kkkkkk
top professor
Tive que retirar o arquivo da fonte android de dentro da pasta e mesmo assim precisei colocar os dois pontos, então ficou assim:
@font-face {
font-family: 'Android';
src: url('../idroid.otf') format('opentype');
font-weight: normal;
}
muita coisa! maravilha!
Aguardando o próximo vídeo 🧠🖖🏽
Bom demais essas variáveis.
alguém aqui teve o problema do CSS não reconhecer a fonte geral "cursive", dentro das especificações da família da fonte "Bebas Neue"?
Eu estou, tbm não ta funcionando, vim ver os comentsrios pra ve se era so eu ou tem mais gente!
fiz assim e deu certo,
--font-destaque:'Bebas Neue', cursive;
era isso?
@@romulonunes7908 deu certo meu caro. Obrigado
estou com esse mesmo problema, e não consigo resolver! alguém sabe como resolve???
@@arthurvs_silva eu estava com esse problema tambem. tira a fonte de dentro da pasta de fontes, ou de onde quer que ela esteja, e coloca na pasta de estilo. vai dar certo
Pra quem tá apanhando com a importação da fonte como eu: @import deve estar no topo antes das @font-face. Pra mim só puxou a fonte do google assim!
achei q só eu que não estava conseguindo
e mesmo assim não entendi como colocar esse @import antes da @font-face
I N C R Í V E L ! ! !
Baita professor
1:30 buguei e demorei até voltar do bug. Boora!
Vai ter alguma aula sobre fontes variaveis no css? procurei em tudo que é canto mas não achei muito conteudo sobre elas
Guanabara amo seus vídeos e cursos.
Longe de mim querer lhe corrigir, mas para selecionar todas as tags com o * creio que seja mais ruim.
Seria melhor selecionar todas uma a frente da outra como no exemplo que você falou que ia da mais trabalho, porque vai ter que escrever todas.
Mas acho que em questão de um site grande o * vai deixar o site mais lento do que a outra opção.
Porque o * na hora do Google fazer a busca ele vai passar uma a uma das tags no HTML verificando, e da outra forma vai ser verificado só as tags que foi colocada no CSS e não todo HTML.
Me corrija se eu estiver errado e seria bom um video para explicar entre as duas funções.
Desculpa qualquer coisa, até porque estou aprendendo hehe.
show!
ótima aula!
Aula premium 💎
Obrigadoo
com a pasta externa eu não consegui por a fonte idroid ( ../ ) então eu passei a pasta fontes para dentro da pasta onde estava o html e css e, só assim, funcionou! Mas o unico que não funcionou foi o h1, então criei um class nele pra mudar diretamente ele no css e assim funcionou.
Meu deus Obrigado!!!!!
Salvou demaisss
galera, parece que o arquivo CSS só reconhece os arquivos de fonte(para quem passou perrengue com o Idroid, como eu) se eles estiverem na mesma pasta que ele ou se ele estiver na mesma pasta com a pasta "fontes", separado e sem estar em pasta nenhuma. É uma hipótese, mas deve ser por isso que colocar o arquivo CSS numa pasta separada deu errado. Tentando fazer o que falei no começo pode solucionar o problema.
Se ficou confuso, tente pegar o "idroid.otf" e colocar dentro da pasta "style" ou tirar o style.css da pasta style e jogar para a pasta d10.
Pra quem não esta conseguindo usar a fonte Bebas, basta colocar o link que o professor coloca no video, o do google está com erro mesmo.
caramba é serio? to com dor de cabeça ja de tanto procurar kkk
Quebrei tanto a cabeça com isso. Daí vi seu comentário, digitei igualzinho do vídeo e deu bom kkk meninaa, que ódio. Obrigada, flor 😘
Nem desse jeito deu certo, tive que baixar pelo dafont, só assim a 'Bebas Neue' funcionou.
Galera, a estilização da minha fonte só deu certo nessa estrutura:
main > article h1{
color: var(--cor5);
font-family: var(--fonte-android);
}
main > article h2 {
font-family: var(--fonte-android);
}
aqui no meu, na parte da fonte do android 11:00 , n precisei usar dois pontos, funcionou normal, sim a fonte está dento de uma pasta, e esta pasta está exatamente onde o arquivo princial "index" está, mistérios da vida rs
Fiz o desafio sem usar as variáveis, demorei 28 horas sendo BURRO, mas no final ficou bom, com as fontes certinhas coisa e tal. Mas fiz agora de novo com o Guanabara e minha variável da fonte android deu ruim, o h1 não queria reconhecer de forma nenhuma usando o valor em variável, aí eu perdi a paciência e botei font-family: Android;
:]
Eu fiz sem o vídeo, mas n sabia que tinha que ter responsividade e tal, demorou 3 horas, mas não to querendo te desmerecer, talvez se eu tentasse fazer tudo que era pra ser feito mesmo, acho que eu teria até desistido kkkkkkkkkkkkkkkk
Vim aqui pra dizer que no meu caso, a fonte idroid não estava funcionando corretamente devido o caminho que eu não coloquei direito, ficou assim: @font-face{
font-family: 'Android';
src: url('/fontes/idroid.otf') format('opentype');
font-weight: normal;
}
Espero que a fonte não dê mais problemas.
ajudou bastante vlw
otimo video
Lenda!
Aqui comigo, o problema da fonte foi resolvido da seguinte forma:
Quando usando o main > h1, o css não encontrava;
Nem mesmo usando o main > article > h1;
Então depois de alguns testes, eu tentei só o article > h1;
E funcionou!
Se der certo pra mais alguém, comenta ai.
Outra coisa, eu estava usando o " > ", sendo que o Guanabara não estava, então pode ser por isso que não estava funcionando tbm 😅
Que isso man, me ajudou aqui, vlw
Comigo só funcionou main > article > h1
eu te amo
O cara que da dislike em um vídeo desce não tem alma! já morreu por dentro faz tempo e não sabe!
vamos nessa
Toop
Dois vídeos em um dia :O :D
Bom pra gente kkkkk
Cara, que conteúdo f#da! Parabéns!
te amo gustavo guanabara te amo
Guanabara ta é gordin, viu! heheh grande homemm! obg!!!
Vlw man
Fiz o site primeiro pra depois assistir as aulas, e eu estava me matando pra tirar margem e padding
era só fazer um * { margin: 0px padding:0 px} kkkkkkk, fiquei uma hora tentando tirar
Sim ele explicou em vídeo anterior.
Professor você queria configurar o h1 do header, pra isso usou comando header > h1 { }
Dai você quis também configurar agora h1 do main, mas não usou o ">"
main h1 { }
Por que? Por que um precisa e outro não?
E parabéns para o conteúdo de qualidade
Ola amigo, é opicional o uso do "maior que" >
@@fabianomarques853 sempre opcional? Ou só no Main?
Help, na hora de colocar o font-family, o cursive não ficou vermelho aqui
Não deu nada certo no meu nessa aula… Não to mais nem sabendo oq eu to fazendo kkkkk
Edit: Apaguei a 'merda' que tinha feito antes e fiz do jeito que tá no vídeo e deu certo.