*PROPRIEDADES DE ESTILO PARA LISTAS:* Segue algumas Propriedades de Estilo extras apresentadas no vídeo para usarmos dentro de seletores de listas ( ex.: *ul {...}* ): Quando criamos uma lista dentro de outro elemento, dentro de um aside por exemplo, geralmente as "bolinhas" da lista (marcadores sequenciais no caso de listas ordenadas) irão ficar para fora do elemento pai (aside)... Para resolver isso e manter a lista inteira dentro do elemento pai, devemos utilizar a _Propriedade de Estilo_ " *list-style-position* " com o valor " *inside* " (por padrão marcadores de listas são posicionados com o valor " _outside_ "). Essa propriedade define a *posição dos marcadores da lista* e dessa forma as "bolinhas" ficarão para dentro do elemento pai. Outra questão, às vezes temos uma lista com muitos itens, muito extensa... E queremos dividi-la em duas partes para manter uma formatação mais agradável... Para fazer isso, temos a _Propriedade de Estilo_ " *columns* " com o valor " *2* ". Com isso iremos dividir a nossa lista em *duas colunas* (se quiser dividir em mais de duas colunas é só alterar o valor numérico da propriedade). É possível trocar as "bolinhas" ou marcadores de listas por outro símbolo, um emoji por exemplo. Para fazer isso, devemos usar a _Propriedade de Estilo_ " *list-style-type* "... Como valor dessa propriedade, devemos colocar entre aspas 'simples' o *número do código do emoji* que escolhermos (sem o "U+"), e após isso, para de fato carregar o emoji, adicionar uma contrabarra ( *\* ) antes do código do emoji e ainda dentro das aspas 'simples'. *Obs.:* A troca de símbolos de lista não é 100% compatível com todos os navegadores. Uma coisa que pode acontecer é o nosso símbolo ficar "grudado" no item da lista, para evitar isso é indicado acrescentar um "espaço" *entre* o emoji e o item de lista. Para fazer isso, ainda dentro das aspas 'simples' e DEPOIS do código do emoji, acrescente outra contrabarra ( *\* ) e logo após isso o código " *00A0* " ou " *0020* " (comando de *espaço* ). Se você quiser, pode inserir mais de um espaço, é só repetir o processo. *Obs.:* Sempre que você quiser dar um "espaço" ou inserir emojis pelo CSS, para qualquer outro elemento e não somente listas, faça como foi orientado nesse texto. *Exemplo geral:* ul { list-style-position: inside; columns: 2; list-style-type: '\1F5F8\00A0\00A0'; } *Nota:* Ainda existem muitas outras Propriedades de Estilo para *listas* além dessas três apresentadas no vídeo e descritas nesse texto. *MARGIN NEGATIVA:* No nosso projeto, dentro da área " *Saiba Mais* " (aside), formatamos o nosso h3 de um jeito que parece que o _subtítulo faz parte do topo da caixa._ Para fazer isso, inicialmente atribuímos um destaque de cores ao subtítulo e adicionamos um pequeno padding de 10px no mesmo... O resultado desejado seria que a caixa do h3 crescesse para "fora" e ocupasse a exata forma do topo da caixa do aside, resultando no efeito descrito. Para isso, configuramos as margins *laterais e superior* do nosso h3 com um valor *negativo de -10px,* dessa forma a caixa do h3 irá crescer para "fora" e ocupará a forma do topo da caixa aside. A margin (espaçamento externo) foi configurada com um valor negativo, *na prática essa margin está indo para dentro e se expandindo de forma inversa,* abrangendo o topo do aside. Uma mesma configuração com um valor positivo no margin não daria o mesmo efeito. Para fechar, posteriormente é só fazer o arredondamento da parte de cima da caixa do h3, para ficar condizente com a parte inferior da nossa caixa aside.
13:34 DICA: Coloque o cursor em uma das palavras "blank" do seu código; Aperte ctrl+D e toda palavra "blank" a partir daquela será selecionada. Após isto utilize a seta direita e digite a class="externo"
@@joaobomfim695 ah mano botofé, só reparei agora, geralmente eu leio o pdf dps do modulo p relembrar as coisas, mas vou dar uma olhada antes partir de agora, vlw ;)
Gente, tenho uma dica para vocês, ao invés de criarem uma classe e ter que colocar ela em cada link externo vocês podem colocar o parâmetro blank no CSS. Segue o modo que utilizei: a[target="_blank"]::after {content: '\00a0\1f517';} Desse modo, todos os links que levam para a área externa terão o clipe :)
Cara, quando fui fazer meu projeto, tive mt dificuldade pra dividir a lista em 2, fiz duas ID pra conseguir mas deu certo. O Gurnabara só utilizou (columns: 2;) kkkkk. Mano, fiquei com a boca aberta, o que é a informação em galera? Aula top, Parabéns.
@@matheusferraz8964 e eu fiz o mesmo deu maior trampo pra ficar igual (quase igual) coloquei float coloquei text align left e tudo mais fiquei uns 30 min fuçando kkk até ver que era so por isso !! kkkkkkkkk
@@robertsmith1762 eu quebrei muito a cabeça mas usei o display: inline block; kkk com esse comando eles ficam em linha mas ainda são block level se não estou enganado.
Vai cara, pula. Você é um gato. kkkkkkkkk Top demais as aulas, estou amando e praticando muito. O negócio é praticar. Parabéns ao canal e toda a equipe, por disponibilizar um conteúdo tão rico gratuito Muito obrigado, Gustavo!!
Triste saber que esse vídeo tem 10k de views e não tem 1k de likes, um curso maravilhoso, gratuito, o mínimo que deveríamos fazer é deixar o like sempre......
Poisé Thiago, quem faz pela plataforma do curso em vídeo a gente nao tem acesso a deixar o like lá. Tem que abrir o youtube pra deixar o like as vezes isso acaba impactando negativamente, eu mesmo não abro TODOS os videos no youtube para assistir. Todos que eu vi pelo YT eu deixei like
Para quem quer criar diferentes colulas na lista para cada tela faça assim: Coloque esse comando @media (max-width: 600px) { aside > ul { display: grid; grid-template-columns: 1ft; } } E no comando coloque: UL { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } Com isso vc terá 3 colunas quando a tela tive maior que 600px e 1 só coluna quando estiver igual ou menos que 600px; Espero ter ajudado 😉
Incrível como com você sempre aprendemos coisas novas, ta aí 3 propriedades que eu não conhecia, text-indent, list-style-position e o colum. Antes de ver os vídeos em que você vai criando o projeto, como eu não conhecia essas propriedades acabei recorrendo ao display: flex na lista dividindo a mesma em duas listas com a tag , e nesse caso da indentação utilizei o pseudo-elemento before, não ficou totalmente igual mas é legal saber que tem mais de uma forma de fazer, muito top.😁
Caraca eu fiz umas gambiarras nessas colunas antes de ver esse vídeo, viu.. uahsuahus eu tinha separado ela em duas, colocando elas dentro de uma div.. aushuahs resumindo, só sei que tive que usar o 'inline-block' e dar gap. E no 'Quer aprender mais?' fiz outra gambiarra, usando "border-top-right-radius;", "border-top-left-radius;" e "outline: 10px solid cor;" sei nem o que eu fiz, eu só fui lá no 'inspecionar' e saí fazendo até juntar direitinho.. uahsuahsu Com o mestre fazendo tudo fica mais fácil uahsuhaus
Pra quem ficou na duvida, dentro de o link perdeu o background-color, a solução que eu achei foi coloca-lo em uma class sozinho. a.externoA::after{ content: '\00A0\1F517'; } a.externoA{ background-color: var(--cor2); }
Perfeito professor !! Eu modifiquei a parte das versões do Android, ali eu fiz um hover para modificar a cor quando passa nas versões com nomes de doce.
se você quiser deixar o footer um pouquinho mais f*d*, faz isso aqui: footer { background-color: var(--cor5); color: white; text-align: center; font-size: 0.8em; padding: 5px; } footer a { color: white; font-weight: bolder; text-decoration: none; transition-duration: 0.5s; } footer a:hover { background-color: var(--cor3); border-radius: 5px; text-decoration: underline; margin-left: 5px; } footer a ::after { margin-left: 0px; background-color: var(--cor5); border-radius: 0px; text-decoration: none; } explicação: o 'footer a :hover', vai adicionar um background e afastar o link que você colocou. daí o 'footer a ::after', vai tirar esse background e esse afastamento assim que o mouse/cursor sair de cima do link, mas de uma maneira mais suave. Bons estudos!
vai vai pula vc é gato ksksksksksk todo serio aqui e o cara faz isso ksksksksksksksk bom demais cara foi digitando codigos contigo nas suas aulas que minha digitação melhorou absurdamente galera que tem medo de digitar devagar pratiquem ajuda demais ce ta doido o foda é que a gente erra pra caraaaalho tbm ai complica ksksks mas apaga e tenta de novo faz parte do ser humano
por enquanto ta moleza ja terminei o site e criei uma nav totalmente adaptada pra celular, super responsivo, acho que o mais difícil são as ideias de site mas acho que em uma situação real de trabalho pode ser que tenha um design que ja entregue o protótipo do site, dai você só põe pra funcionar
conheci o seu anal por outra pessoa e amei, to começando a programar e ja vi alguns videos do curso de python (que vou rever) e queria saber se o curso ainda serviria atualmente, pq o curso foi gravado em 2017. De qualquer forma amo sua didatica, e adorei saber que vc tem um gato, tenho 5 (risos), de qualquer forma adoro suas aulas ^^
Eu consegui colocar o emoji de link e o checked no meu site, mas eu fiz de outra maneira, eu usei uma imagem .svg que são bem mais leves que outros formatos e pode ser regulado a largura e altura muito fácíil direto pelo VS Code, já que é uma imagem gerada por vetores. (menos de 3KB pelas duas imagens, e ela não perde qualidade se dermos zoom.)
No meu caso (estou utilizando o navegador Edge), não foi possível usar valores negativos para a margem, então mudei o css para aside { background-color: var(--cor1); border-radius: 15px; } aside > * { /* faz todos que estão dentro do aside ficarem com essa propriedade */ padding: 10px; } aside > h3 { border-radious: 15px 15px 0px 0px; /* usei 15px para a caixa do aside */ }
Para tirar os pontilhados do (pq achei feio): abbr[title] { text-decoraction: none; } vc pode botar outra forma de marcar pra o usuário entender que tem um significado quando passar o mouse
cabo q fazendo sozinho eu tirei o estilo do ul e so coloquei no li::before o content com o emoji do proprio windows (win + .) / agr despausando o video vi q ele usou os codigos p dar espaço, com o content eu so dei um espaço depois do emoji e deu certinho
Pessoal, eu não sei se foi dito durante o curso, mas tem algum vídeo que ele falou sobre o aside, section, nav e outras estruturas? Eu lembro dele comentando no vídeo sobre box, em vídeos onde ele fez só o header do site, em alguns sobre semantica, mas não lembro se teve explicação diretamente sobre o que cada um faz. Não ficou mt claro para mim em que situação usar cada um
10:00 pra galera mais experiente, dentro do aside eu coloquei o header e configurei background-color(cor) dai ficou todo preenchido como o do guanabara, tem algum problema ter colocado o header dentro do aside? por que se me lembro bem o professor disse que no html5 foi liberado colocar qualquer tag dentro de outra tag
Professor, esta aula ainda não está no site do Curso em Vídeo. Tem alguma previsão de quando estará lá e de quando a prova de certificação do Módulo II estará disponível?
Aula bem explica e objetiva Professor como faço para mudar a cor de uma palavra numa frase? Por exemplo: semana passada do mês passado Quero deixar a palavra SEMANA na cor vermelha e o restante da frase na cor branca
*Dúvida* : Por que ao configurar a margem em 9:10 , o alinhamento das caixas funcionou perfeitamente com valores negativos e não positivos? Qual seria a diferença entre um valor positivo e um negativo afinal?
O valor positivo, basicamente funciona pra "dentro" da caixa h3. Quando se coloca o valor negativo, o padding tá indo pra fora da caixa, na direção contrária (negativa) do "normal", q seria um padding pra dentro. Afinal, o padding é o preenchimento da caixa, ou seja, entre a borda e o conteúdo. No caso do padding negativo, ele ta preenchendo pra fora, sacou?
Uma solução alternativa ao problema dos links externos, que elimina a necessidade de criação de uma nova classe: No lugar de a.externo, podemos utilizar a[href^=""].
@@jhulycurty4964 Recomendo assistir outras aulas, mas n abandonar o Guanabara, tem o dpw(um dos melhores que eu ja ví pra ensinar css), a rocketseat,o cfb cursos, entre outros... Porém esses que eu citei, tirando o cfb cursos, não tem uma playlist ensinado, como se fosse seus professores dizendo oq vc tem que aprender hoje e amanhã, tipo o Guanabara, vc vai ter que se organizar e ser muito autodidata, boa sorte
6:20 Meu Deus !!! Eu tinha feito duas Divs e coloquei elas com display inline block KKKKKKKKKKKKKKKKKKKKKKKKKKKKK Gambiarra braba a minha hein?! Kkkkkkkkkk
Galera, estou acompanhando tudo desde do inicio, não sei porque o meu "aside > ul { } " não entra de jeito nenhum as duas colunas, já fiz até o teste colocando "li" ao invés do "ul", mas não deu certo. Alguém poderia me ajudar?
@@rafaelamoreira926 Obrigado! fiz extamente como vc colocou, copiei e colei kakakak mas por algum motivo nao ta dividindo em duas colunas, nem a pau. Unica diferença que no meu só modifica a css quando coloco: aside > li (com ul nao ta indo) mas mto obrigado!
