Quando devemos usar o sinal de maior ( " *>* " ) para manipular elementos que estão dentro de outros elementos (filho/children)? Talvez alguns de vocês estejam na dúvida, porque tem vezes que o Guanabara usa o sinal, e outras não... E às vezes, quando inserimos o sinal nos nossos seletores, as declarações simplesmente não tem efeito... *ESCLARECENDO:* Nesse caso, você precisa lembrar dos conceitos de *COMBINADORES DE SELETORES,* que nada mais é do que criar uma *relação útil* entre os seletores. Você usa o " > " quando quer indicar que deseja estilizar um *FILHO DIRETO* de um elemento. Segue um exemplo:
No caso do exemplo acima, o "p" é um filho direto da div especial , e portanto é um elemento de *Primeiro Nível.* Da mesma forma, veja que o "h1" identicamente é um filho direto de header e portanto é um elemento de Primeiro Nível também. É como se e fossem *IRMÃOS.* Mas quando você *NÃO USA* o " *>* ", você quer indicar os elementos que *não são necessariamente filhos,* mas são *DESCENDENTES.* Veja outro exemplo:
_SELETOR NÃO SIMPLIFICADO PARA O EXEMPLO ACIMA:_ *" main > article > h1 {...} ".* H1 é filho direto de article, que é filho direto de main. Tem como simplificar? Sim. Nesse caso, perceba que h1 é descendente de main (como se fosse um *NETO* ), então você pode *DEIXAR DE USAR* o " *>* " sem problema nenhum, dessa forma estará indicando elementos que *não são necessariamente filhos,* e sim _descendentes._ Exemplo: _MESMO SELETOR ANTERIOR, SÓ QUE SIMPLIFICADO:_ *" main h1 {...} "* *Obs.:* Se tivéssemos criado o seletor simplificado do exemplo acima, mas com o sinal " > " ( *ex: main > h1 {...}* ), não funcionaria porque esse h1 NÃO É FILHO DIRETO do main, e sim neto. Sendo que o sinal de maior ( ">" ) serve apenas para indicar *filhos diretos.* É por isso que o Guanabara não usa o sinal de maior (>) às vezes, ele está simplificando o seletor (quando possível). Isso facilita muito, porque você não precisará de uma pancada de classes e deixa o seu código mais limpo. Créditos: Alisson Radam
Muito obrigado cara, já estava a 2 dias tentando descobrir pq o meu código não estava funcionando, com sua dica tudo está rodando lindíssimo agora. Muito obg mesmo
é incrível como quando eu tentei fazer sozinho o desafio antes da explicação, ainda tinha uns detalhes de CSS que eu me atentei que não conseguia fazer direito, e agora assistindo as aulas que explicam o desafio parece que é até mais fácil de fixar o conteúdo certinho
Quem está usando a tag picture e viu que o srcset não busca na pasta usando espaço, escreva as três primeiras letras e coloca igual 'src=', faz a busca na pasta imagens e depois escreve set. Ai fica completo: srcset="caminho da imagem"
Estou amando as aulas professor, eu tentei fazer este exercício antes do desafio, cheguei a fazer 90%, e com decorrer das aulas do desafio venho aprendendo mais e tomando nota nas explicações. Obrigada.
Eu consegui fazer boa parte sozinho, mas travei na parte de responsividade. Mesmo assim fiquei animado, pois consegui juntar vários conceitos iniciais que ja foram ensinados. Além disso, vendo essa sequencia, aprendi - talvez o mais importante - em como inciar uma construção de um site de forma bem organizada. E que a organização vem muito antes do que fazer codigos apenas. Saber como, onde é muito importante.
Esse "remake" curso em vídeo de html e css tá sensacional, só quero ver se vai ter um "remake daquele curso básico de Java que tá uma delicinha, seria incrível!
@@rykz1337 nesse shorthand com 2 valores que vc escreveu o que prevalece são as vértices opostas então vai ficar assim: top-left e bottom-right: 0px; top-right e bottom-left: 10px; o certo seria o que o camarada ali em cima escreveu mesmo. (eu tbm achava que só com 2 valores funcionaria assim igual o padding por exemplo)
Que aula toop!! Finalmente coloquei meu site todo responsivo *-*, pelo que entendi as imagens são mais trabalhosas, no meu site eu tenho umas 10 imagens, e tenho que criar pelo menos 3 tamanhos diferentes no meu caso. Conhecimento sensacional, thank you Professor Guanabara!!
Muito bom! Eu fiz o projeto todo com base nos exercicios anteriores e buscando no google, ficou uma bagunça, tudo remendado na base da gambiarra, mas o legal é que ficou identico e responsivo, então fazendo a correção agora vc vai entendendo tudo melhor e arrumando o código de um jeito legivel kkkk.
Fiquei bem feliz que eu "descobri" esse 'border-bottom-left-radius' só de ver o projeto pela foto no PDF e consegui fazer antes do mestre mostrar.. significa que tô fixando tudo que aprendi com ele! Obrigada, mestre!
Amei essa parte de fazer os desafios juntos, eu fui vendo que realmente aprendi com o curso, e entendi tudo oque você fez passo a passo, muito obrigada ❤️❤️❤️❤️❤️
Para centralizar a imagem é: display: flex; justify-content: center; Pra quem estiver com problema de a imagem não adaptar ao tamanho da tela mesmo usando o width: 100%; O problema é que você provavelmente esta usando um id ou class e definindo ela no css como .fotos ou img#fotos ou qualquer variante disso, o certo é como ele botou no vídeo. É pq ele depende do elemento pai que é o main para ficar em 100%. Coloca: main img{ width: 100%; display: flex; justify-content: center; } que vai funcionar e ficar centralizado, falou!! Demorei um bom tempo pesquisando kkkk EDIT: para a imagem do bugdroid ficar pequeno e centralizar, define uma class e no css coloca .foto ou o nome que você definiu e deixa do jeito que ele faz no vídeo que funciona.
tava com o mesmo problema, li seu comentario fui verificar meu codigo e reparei que tinha escrito "classe="pequena" tava ficando com a imagem toda estourada, vc me salvou ein hahaha
Se alguém estiver com dúvida, o min-heigth serve para que, se o texto ultrapassar do mínimo que você determinou, o tamanho do espaço da tag vai se adaptando No exemplo que ele deu: header{ min-height: 150px; } Se o texto que você vai colocar dentro do header ultrapassar de 150px, o tamanho do header se adaptará "sozinho."
por algum motivo a imagem dos dandroids pequena não ficava responsiva quando eu colocava o site no meu celular, através do github, voce vai aprender a usar o gitbuh no proximo modulo, então para vc não passar o perrengue que eu passei, cortei a imagem dos dandroids pequena nas laterais, pelo menos eu tive que fazer isso.
Boa noite galera, caso alguem esteja assistindo essa aula em 2024, e estiver com problemas para ajustar o tamanho da imagem do bugdroid no desafio, se estiver colocando dentro do css main img.pequeno{} pode colocar main img#pequeno{} que funciona.
Eu estou estudando e desenvolvendo um site pra mangas, se algum dia no futuro, vcs virem um site de manga com a temática de Darling the franxx, foi pq deu muito certo😂😂
Dica: Quando você terminar o vídeo e também os códigos, volte o vídeo do início e reveja ele fazendo e explicando cada passo, para que você entenda a interpretação de cada conteúdo. OBS: sempre coloque comentário no seu código para fixar o que você está aplicando. Para inserir e fechar comentário no CSS /**/
Sempre faça seu código, pare de copiar, só copie para aprender e após a aula acabar praticar! Pois, é na prática que o conhecimento é colocado a prova. E sempre faça anotações de tudo que achar importante e tags novas.
Sei que o Guanabara já gravou o curso inteiro mas seria interessante se ele mostrasse a responsividade com o recurso do próprio Chrome, em que ao apertar F12 aparece no canto superior esquerdo da barra lateral a opção de redimensionar a tela pra smartphones, pelo menos eu acho mais fácil do que a extensão
Pessoal Alguém pode me ajudar ????? eu criei basicamente 80% do site sozinho, como o prof pediu, só não tinha feito a parte da responsividade, agora com o site praticamente igual, eu fui colocar as funções para deixar o site responsivo e nada !!! eu coloquei igualzinho no vídeo, no main, min-width e max-width e meu site não fica responsivo, alguém sabe me dizer pq ???não estou conseguindo achar esse erro no meu código, eu até abri um outro arquivo e criei a resposividade e deu certo !! será que tem que criar a resposividade antes de estilizar o site ???
Eu estou acompanhando religiosamente os vídeos desde o início mas fiquei com uma dúvida: porque vc usou o "main img" e não o "main > img" aprendi que os atributos dentro de outro são representados com o sinal de >, mas no caso do main img não tem, porque? obrigado!
@@InfiniteZZ Assim: com "main > img" somente os img que estejam DIRETAMENTE dentro do main serão afetadas. Exemplo: Tenho um main e logo dentro do main tenho um img. Sem o sinal de > ("main img") todos os img que estão dentro do main e todos os img que estão dentro de outras tags que estejam dentro do main serão afetadas, exemplo: Tenho um e dentro dele tenho um e dentro do section tenho um e dentro do article tenho um no caso acima, se eu usar o "main img" sem o >, o img seria afetado mesmo estando numa hierarquia bem distante Espero que tenha entendido, não sei se expliquei bem..
Guanabara o método que o senhor passou para utilizar fontes não está funcionando, e não é só comigo, diversas pessoas nos vídeos relacionados a fontes estão tendo esse problema, faz ideia do que pode ser ?
Guanabara eu estou com uma dúvida, quando devo usar ">" para manipular elementos que estão dentro de uma div? Sempre usei ">" para manipula-los mas aparentemente tem diferença se não usar, no vídeo você está manipulando os elementos dentro do main sem usar ">". Como sempre usei ">" tentei usa-los, mas se eu os coloco não funciona... Assim que os tirei tudo funcionou, resolvi fazer um teste e tirei todos ">" de todo meu arquivo style e continuou tudo funcionando, assim surgiu esta dúvida: Quando devo usar ">"?
Cara eu sou iniciante, mas pelo que eu entendi, tanto faz vc colocar ou não o > Podendo fazer direto por exemplo main section class {} seria a mesma coisa que main>section>class {}. Caso eu esteja errado me corrijam por favor!!!
Nesse caso, você precisa lembrar dos conceitos de COMBINADORES de seletores, que nada mais é do que criar uma relação útil entre os seletores. Você usa o ">" quando quer indicar que quer estilizar um FILHO DIRETO de um elemento. Nesse caso, o exemplo "header > p" é perfeito, pois é o "p" é um elemento de primeiro nível. Veja que é um filho direto da div especial . Veja que também é filho direto de . É como se e fossem IRMÃOS. Mas quando você não usa o ">", você está indicando quer quer indicar os elementos que não são necessariamente filhos, mas são DESCENDENTES. Veja o exemplo: "Main > article > h1". H1 é filho direto de article que é filho direto de main. Tem como simplificar? Sim. Nesse caso, você percebe que h1 é descendente de main (como se fosse um NETO), então pode usar sem problema nenhum o combinador "main h1", assim como pode usar também "main h2". Isso facilita demais porque você não precisará de uma pancada de classes e deixa seu código mais limpinho.
Pessoal aos 9:02 de vídeo encaixaria uma Shor-thand desse jeito border-radius: 0px 0px 10px 10px; pra arredondar as bordas do bottom apenas? Aqui deu certo mais alguém sberia dizer se teria algum problema mais a frente?
gente a minha fonte da letra android fica vermelha, ja tentei mudar várias coisas, se eu tiro ela o site fica normal sem erro, mas se eu boto a fonte já fica vermelho
O é um contêiner adequado para usar vários elementos 'source' para um elemento 'img'. Ou seja, ótimo para o tratamento de imagens responsivas. O picture é um conteiner, enquanto a tag figure serve para adicionar legendas a uma determinada imagem. Posso estar errado, já que estamos aprendendo, mas não vejo problema em usar uma figure dentro de uma picture. Vou até ver no Validator do W3C.
oi eu sou novo nesse canal e é a primeria vez que vou fazer esses curso e quero saber qual onder de curso devo aprender eu vou aprender do 0 mas não seu qual curso começar
Galera se puderem me tirar uma dúvida eu agradeço, quando eu coloco a font android ela não funciona fiz tudo igual ele fez no vídeo e nada. E na hora que envelopa o img com picture, escrevo o max-width 800px a minha imagem android some em vez de quebrar linha
Alguém sabe como resolve. Quando coloco o margin: auto; no meu main, a caixa do main não fica centralizada igual a do vídeo alguém sabe me dizer o que é ?
Quando devemos usar o sinal de maior ( " *>* " ) para manipular elementos que estão dentro de outros elementos (filho/children)? Talvez alguns de vocês estejam na dúvida, porque tem vezes que o Guanabara usa o sinal, e outras não... E às vezes, quando inserimos o sinal nos nossos seletores, as declarações simplesmente não tem efeito...
*ESCLARECENDO:*
Nesse caso, você precisa lembrar dos conceitos de *COMBINADORES DE SELETORES,* que nada mais é do que criar uma *relação útil* entre os seletores.
Você usa o " > " quando quer indicar que deseja estilizar um *FILHO DIRETO* de um elemento. Segue um exemplo:
No caso do exemplo acima, o "p" é um filho direto da div especial , e portanto é um elemento de *Primeiro Nível.* Da mesma forma, veja que o "h1" identicamente é um filho direto de header e portanto é um elemento de Primeiro Nível também. É como se e fossem *IRMÃOS.*
Mas quando você *NÃO USA* o " *>* ", você quer indicar os elementos que *não são necessariamente filhos,* mas são *DESCENDENTES.* Veja outro exemplo:
_SELETOR NÃO SIMPLIFICADO PARA O EXEMPLO ACIMA:_ *" main > article > h1 {...} ".* H1 é filho direto de article, que é filho direto de main.
Tem como simplificar? Sim. Nesse caso, perceba que h1 é descendente de main (como se fosse um *NETO* ), então você pode *DEIXAR DE USAR* o " *>* " sem problema nenhum, dessa forma estará indicando elementos que *não são necessariamente filhos,* e sim _descendentes._ Exemplo:
_MESMO SELETOR ANTERIOR, SÓ QUE SIMPLIFICADO:_ *" main h1 {...} "*
*Obs.:* Se tivéssemos criado o seletor simplificado do exemplo acima, mas com o sinal " > " ( *ex: main > h1 {...}* ), não funcionaria porque esse h1 NÃO É FILHO DIRETO do main, e sim neto. Sendo que o sinal de maior ( ">" ) serve apenas para indicar *filhos diretos.*
É por isso que o Guanabara não usa o sinal de maior (>) às vezes, ele está simplificando o seletor (quando possível).
Isso facilita muito, porque você não precisará de uma pancada de classes e deixa o seu código mais limpo.
Créditos: Alisson Radam
boa garoto
realmente ajudou, não tenho muita duvida em relação mais ajudou bastante a esclarecer !
Caramba, valeu pelo ensinamento adicional!!!
Muito obrigado cara, já estava a 2 dias tentando descobrir pq o meu código não estava funcionando, com sua dica tudo está rodando lindíssimo agora. Muito obg mesmo
Valeu, tive a mesma dúvida!
Não desista, você é capaz!
Obrigada pelo comentário. ❤
desisti.. vo me matar
@@lucasbento6971 Não fale assim
@@lucasbento6971 kskskskksksk
sem ver esse video, ja terminei 90% do site, so quebrando a cabeça e vendo o material no pdf.
Agora vou so organizar e ajeitar o restante !
é incrível como quando eu tentei fazer sozinho o desafio antes da explicação, ainda tinha uns detalhes de CSS que eu me atentei que não conseguia fazer direito, e agora assistindo as aulas que explicam o desafio parece que é até mais fácil de fixar o conteúdo certinho
'Trabalho dá trabalho'. Confesso que fiquei emocionado com o simples fato de lembrar da aula das imagens flexíveis.
Essa aula é a que eu sempre esperei
Quem está usando a tag picture e viu que o srcset não busca na pasta usando espaço,
escreva as três primeiras letras e coloca igual 'src=', faz a busca na pasta imagens e depois escreve set.
Ai fica completo: srcset="caminho da imagem"
Boa!
Estou amando as aulas professor, eu tentei fazer este exercício antes do desafio, cheguei a fazer 90%, e com decorrer das aulas do desafio venho aprendendo mais e tomando nota nas explicações. Obrigada.
Eu consegui fazer boa parte sozinho, mas travei na parte de responsividade. Mesmo assim fiquei animado, pois consegui juntar vários conceitos iniciais que ja foram ensinados. Além disso, vendo essa sequencia, aprendi - talvez o mais importante - em como inciar uma construção de um site de forma bem organizada. E que a organização vem muito antes do que fazer codigos apenas. Saber como, onde é muito importante.
Esse "remake" curso em vídeo de html e css tá sensacional, só quero ver se vai ter um "remake daquele curso básico de Java que tá uma delicinha, seria incrível!
Será que o curso de JavaScript já está desatualizado?
O Border-radius tem como fazer usando um SHORTHAND . Ficaria assim:
border-radius: 0px 0px 10px 10px;
o resultado seria o mesmo do vídeo .
Ou simplismente Border-radius: 0px 10px;
@@rykz1337 nesse shorthand com 2 valores que vc escreveu o que prevalece são as vértices opostas então vai ficar assim:
top-left e bottom-right: 0px;
top-right e bottom-left: 10px;
o certo seria o que o camarada ali em cima escreveu mesmo. (eu tbm achava que só com 2 valores funcionaria assim igual o padding por exemplo)
@@andressmendess eu sei ;-;
Eu n tinha visto o vídeo inteiro, desculpas
Fiz assim, aprendi no outro vídeo dele.
Quem assistiu a aula sobre os vértices arredondados sabe disso.
muito bom meu caro professor que você nunca pare de fortalecer a nossa qualidade de ensino
TEAMO Guanabara!
Voce mudou minha vida!
Que aula toop!! Finalmente coloquei meu site todo responsivo *-*, pelo que entendi as imagens são mais trabalhosas, no meu site eu tenho umas 10 imagens, e tenho que criar pelo menos 3 tamanhos diferentes no meu caso. Conhecimento sensacional, thank you Professor Guanabara!!
Melhor professor de todos!!
Estou acompanhando todos os vídeos e fazendo os exercícios!
No caso, talvez vocês não consigam usar "main > img" para centralizar, então usem: "picture > img" que vai dar certinho :)
vim ver o video no youtube só pra ver se alguem também estava com esse problema... obg.
vim pro youtube só pra procurar isso, valeuu
Que aula maravilhosa guanabara, muito obrigado!!
Cada aula ta melhor que a outra, obrigado prof.
Não vejo a hora de sair o próximo vídeo.
Valeu Guanabara!!!!!
Esse cara é muito bom, sério!👋👏👏👏👏
Aulão heim. valeu mestre.
Obrigado por mais esse vídeo!
Já fiz um exercício de uma página de um site para móveis planejados com este curso. Agora é ajustar ele para a responsividade. Obrigado professor.
Ficando cada vez mais top.
Tooppp, melhor canal
Essa tag do source no HTML eu não conhecia, achei sensacional, Valeu Guanabara, seguindo em frente...
Muito bom! Eu fiz o projeto todo com base nos exercicios anteriores e buscando no google, ficou uma bagunça, tudo remendado na base da gambiarra, mas o legal é que ficou identico e responsivo, então fazendo a correção agora vc vai entendendo tudo melhor e arrumando o código de um jeito legivel kkkk.
Curso simplesmente perfeito 😍😍😍😍
Graças a você Guanabara consegui fazer um site em texto bem legal
cara!!! muito felizzz. cheguei ate aqui!!!
Comentando para engajar!
Baita aula, como sempre.
Muito mehor que alguns cursos pagos...
Parabéns cara!
Antes de começar os vídeos passo a passo do projeto, eu fiz o meu e agora estou corrigindo os erros.
Top.
Fiquei bem feliz que eu "descobri" esse 'border-bottom-left-radius' só de ver o projeto pela foto no PDF e consegui fazer antes do mestre mostrar.. significa que tô fixando tudo que aprendi com ele!
Obrigada, mestre!
podia usar um shorthand tbm, seria bem melhor que a maneira que ele fez
Obrigado!
Obrigado professor!
Musiquinha top!
Amei essa parte de fazer os desafios juntos, eu fui vendo que realmente aprendi com o curso, e entendi tudo oque você fez passo a passo, muito obrigada ❤️❤️❤️❤️❤️
Aprendeu nada, se tivesse aprendido faria o site sozinha, copiar não ajuda em nada!
kkkkkkkkkkkkkkkk calma@@chriis_nt
Opa video novo!
Aula do almoço!
9:35 eu testei e poderia escrever também:
border-radius: 0px 0px 10px 10px;
ótima aula!
Para centralizar a imagem é:
display: flex;
justify-content: center;
Pra quem estiver com problema de a imagem não adaptar ao tamanho da tela mesmo usando o width: 100%;
O problema é que você provavelmente esta usando um id ou class e definindo ela no css como .fotos ou img#fotos ou qualquer variante disso, o certo é como ele botou no vídeo.
É pq ele depende do elemento pai que é o main para ficar em 100%.
Coloca:
main img{
width: 100%;
display: flex;
justify-content: center;
}
que vai funcionar e ficar centralizado, falou!!
Demorei um bom tempo pesquisando kkkk
EDIT: para a imagem do bugdroid ficar pequeno e centralizar, define uma class e no css coloca .foto ou o nome que você definiu e deixa do jeito que ele faz no vídeo que funciona.
tava com o mesmo problema, li seu comentario fui verificar meu codigo e reparei que tinha escrito "classe="pequena" tava ficando com a imagem toda estourada, vc me salvou ein hahaha
Cara , c salvou minha vida com este comentário!!!!
Muito Obrigado!!!
Muito boa aula, e foi ótimo o comentário" trabalho dá trabalho" kkkkkkkkk!
Se alguém estiver com dúvida, o min-heigth serve para que, se o texto ultrapassar do mínimo que você determinou, o tamanho do espaço da tag vai se adaptando No exemplo que ele deu:
header{
min-height: 150px;
}
Se o texto que você vai colocar dentro do header ultrapassar de 150px, o tamanho do header se adaptará "sozinho."
por algum motivo a imagem dos dandroids pequena não ficava responsiva quando eu colocava o site no meu celular, através do github, voce vai aprender a usar o gitbuh no proximo modulo, então para vc não passar o perrengue que eu passei, cortei a imagem dos dandroids pequena nas laterais, pelo menos eu tive que fazer isso.
Se vc esta com problemas colocando "margin-bottom: 30px; " verifique se esse comando está abaixo do "margin: auto;" isso pode ajudá-lo 😉
fiz 100% sem acompanhar, tô orgulhoso.
Aqui eu envelopei a imagem com uma tag para centralizar as imagens, tinha esquecido do display block rs.
quando eu era criança achava que era "cabeçario". se nao me engano as minhas professoras falavam assim, la no começo dos anos 2000
valeu, guanabara!
Boa noite galera, caso alguem esteja assistindo essa aula em 2024, e estiver com problemas para ajustar o tamanho da imagem do bugdroid no desafio, se estiver colocando dentro do css main img.pequeno{} pode colocar main img#pequeno{} que funciona.
Eu estou estudando e desenvolvendo um site pra mangas, se algum dia no futuro, vcs virem um site de manga com a temática de Darling the franxx, foi pq deu muito certo😂😂
9:25 Eu usei 'border-radius: 0px 0px 10px 10px; Deu certo.
Eu também, lembrei dessa shorthand das outras aulas :)
Dica:
Quando você terminar o vídeo e também os códigos, volte o vídeo do início e reveja ele fazendo e explicando cada passo, para que você entenda a interpretação de cada conteúdo.
OBS: sempre coloque comentário no seu código para fixar o que você está aplicando. Para inserir e fechar comentário no CSS /**/
Sempre faça seu código, pare de copiar, só copie para aprender e após a aula acabar praticar! Pois, é na prática que o conhecimento é colocado a prova. E sempre faça anotações de tudo que achar importante e tags novas.
Estou com um problema na tag picture, as imagens não estão quebrando
7:25
Nao entendi o conceito dessa imagem q precisou de margin auto e display block para ela centralizar, pq so 1 dos dois nao funcionou?
Like
Sei que o Guanabara já gravou o curso inteiro mas seria interessante se ele mostrasse a responsividade com o recurso do próprio Chrome, em que ao apertar F12 aparece no canto superior esquerdo da barra lateral a opção de redimensionar a tela pra smartphones, pelo menos eu acho mais fácil do que a extensão
Ele faz isso, é a mesma coisa que inspecionar
10/10
11:05 Trabalho dá trabalho, mas dá resultado se for honesto.
Cheguei no semanal zzz
❤️
Gustavo faz curso de Swift
Guanabara fofo
Pessoal Alguém pode me ajudar ????? eu criei basicamente 80% do site sozinho, como o prof pediu, só não tinha feito a parte da responsividade, agora com o site praticamente igual, eu fui colocar as funções para deixar o site responsivo e nada !!! eu coloquei igualzinho no vídeo, no main, min-width e max-width e meu site não fica responsivo, alguém sabe me dizer pq ???não estou conseguindo achar esse erro no meu código, eu até abri um outro arquivo e criei a resposividade e deu certo !! será que tem que criar a resposividade antes de estilizar o site ???
Eu estou acompanhando religiosamente os vídeos desde o início mas fiquei com uma dúvida: porque vc usou o "main img" e não o "main > img" aprendi que os atributos dentro de outro são representados com o sinal de >, mas no caso do main img não tem, porque? obrigado!
tbm tenho essa pergunta, se souber a resposta fala aqui por favor
@@InfiniteZZ Assim: com "main > img" somente os img que estejam DIRETAMENTE dentro do main serão afetadas. Exemplo: Tenho um main e logo dentro do main tenho um img.
Sem o sinal de > ("main img") todos os img que estão dentro do main e todos os img que estão dentro de outras tags que estejam dentro do main
serão afetadas, exemplo:
Tenho um e dentro dele tenho um e dentro do section tenho um e dentro do article tenho um
no caso acima, se eu usar o "main img" sem o >, o img seria afetado mesmo estando numa hierarquia bem distante
Espero que tenha entendido, não sei se expliquei bem..
quando a minha imagem muda da maior para a menor a imagem n aperece e fl que esta quebrada
como resolvo isso?
Guanabara o método que o senhor passou para utilizar fontes não está funcionando, e não é só comigo, diversas pessoas nos vídeos relacionados a fontes estão tendo esse problema, faz ideia do que pode ser ?
tente dessa forma :
@import url('fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@font-face{
font-family: 'Android';
src: url('fontes/idroid.otf') ;
}
:root{
Seu navegador não estar atualizado esse pode ser o problema
Quando voltam as aulas? Acabou?
Fiz exatamente como no video mas minha imagem nao quebra. Permanece a maior
Guanabara eu estou com uma dúvida, quando devo usar ">" para manipular elementos que estão dentro de uma div? Sempre usei ">" para manipula-los mas aparentemente tem diferença se não usar, no vídeo você está manipulando os elementos dentro do main sem usar ">". Como sempre usei ">" tentei usa-los, mas se eu os coloco não funciona... Assim que os tirei tudo funcionou, resolvi fazer um teste e tirei todos ">" de todo meu arquivo style e continuou tudo funcionando, assim surgiu esta dúvida: Quando devo usar ">"?
Cara eu sou iniciante, mas pelo que eu entendi, tanto faz vc colocar ou não o >
Podendo fazer direto por exemplo main section class {} seria a mesma coisa que main>section>class {}.
Caso eu esteja errado me corrijam por favor!!!
Nesse caso, você precisa lembrar dos conceitos de COMBINADORES de seletores, que nada mais é do que criar uma relação útil entre os seletores.
Você usa o ">" quando quer indicar que quer estilizar um FILHO DIRETO de um elemento. Nesse caso, o exemplo "header > p" é perfeito, pois é o "p" é um elemento de primeiro nível. Veja que é um filho direto da div especial . Veja que também é filho direto de . É como se e fossem IRMÃOS.
Mas quando você não usa o ">", você está indicando quer quer indicar os elementos que não são necessariamente filhos, mas são DESCENDENTES. Veja o exemplo: "Main > article > h1". H1 é filho direto de article que é filho direto de main.
Tem como simplificar? Sim. Nesse caso, você percebe que h1 é descendente de main (como se fosse um NETO), então pode usar sem problema nenhum o combinador "main h1", assim como pode usar também "main h2".
Isso facilita demais porque você não precisará de uma pancada de classes e deixa seu código mais limpinho.
@@sharalisson Muito obrigado por esclarecer!
No meu não funcionou o alinhamento da imagem que ele criou uma classe, alguem sabe dizer pq?
Quando é a previsão de término deste curso?
Pessoal aos 9:02 de vídeo encaixaria uma Shor-thand desse jeito
border-radius: 0px 0px 10px 10px; pra arredondar as bordas do bottom apenas? Aqui deu certo mais alguém sberia dizer se teria algum problema mais a frente?
Não, o código fica maisnlimpo
gente a minha fonte da letra android fica vermelha, ja tentei mudar várias coisas, se eu tiro ela o site fica normal sem erro, mas se eu boto a fonte já fica vermelho
Quando sairá o próximo vídeo?
Se chamar de sobra é só preta. Mas se chamar de luz indireta pode ser de qualquer cor.
Nossa eu estou beem hypado criando esse site
Já fiz ele quase todo, só tem uma coisa que ta me matando que é a lista que fica pra fora do main
ul li{
list-style: none;
} ?🤔
@@darlleybrito4198 Eu consegui colocar pra dentro colocando paddin no aside kk
o melhor é usar a tag picture ou a tag figure para imagens?
figure apenas dá a opção de uma espécie de legenda para a imagem o 'figcaption' tag, só isso.
picture é usavel para aplicar responsividade
@@thomasthemazzerrunner3615 entendi, dá pra usar as duas juntas ou não fica semanticamente correto?
@@josealysson2166 Depende do que se espera, acho que dá para usar sim semanticamente
O é um contêiner adequado para usar vários elementos 'source' para um elemento 'img'. Ou seja, ótimo para o tratamento de imagens responsivas.
O picture é um conteiner, enquanto a tag figure serve para adicionar legendas a uma determinada imagem.
Posso estar errado, já que estamos aprendendo, mas não vejo problema em usar uma figure dentro de uma picture. Vou até ver no Validator do W3C.
fiz exatamente igual mas mesmo assim não esta indo
Alguém conseguiu colocar a imagem no meio com display block ? Não consegui
eu também não consegui!
@@sweetappalled coloca o display block e coloca tbm o margin: auto que vai :)
@@ramonsantospinto eu fiz isso e não pegou 😫
oi eu sou novo nesse canal e é a primeria vez que vou fazer esses curso e quero saber qual onder de curso devo aprender eu vou aprender do 0 mas não seu qual curso começar
oi Gustavo voce é meu Mestre, porem não aprendi, acho você nao faz um video sobre como agente saber fazer m site responsivo
O display-blocck não tá centralizando a imagem de jeito nenhum, e fiz do jeito que ele ensinou.
Galera se puderem me tirar uma dúvida eu agradeço, quando eu coloco a font android ela não funciona fiz tudo igual ele fez no vídeo e nada.
E na hora que envelopa o img com picture, escrevo o max-width 800px a minha imagem android some em vez de quebrar linha
no picture, ao final do arquivo digita .png ( voce deve estar digitando jpg que é a propriedade errada )
QUERO MAIS MODOLUS MUITO OBG GUANABRA
não estou a pular nenhum videu
vídeo
up
no video coloquei " width="100%" "
Boa
Se eu não estiver enganado, o "" é obsoleto. Ou está nesse caminho.
muito estranho. No Opera da certinho, já no chrome o margin: auto e o main img { width: 100% } não funcionam
Atualizei a página com shift+f5 e ficou certo agora!!
Alguém sabe como resolve. Quando coloco o margin: auto; no meu main, a caixa do main não fica centralizada igual a do vídeo alguém sabe me dizer o que é ?
Tenta por um display: block;
Será que ele vai ensinar sobre PWA?
fiz o exercicio todo sozinho , e to refazendo outro igual na correçao e ficou todo bugado :(
Ja tem o modulo 3,4 e 5?
ainda não terminou o 2, man.
@@ilmardanilo beleza muito obrigado
@@danielrochasouza7432 mas segundo ele já está tudo gravado, porém só posta semanalmente