Frontend é a parte mais tranquila do desenvolvimento de software, é uma questão de prática, quanto maior a prática maior a naturalidade do desenvolvimento.
Desafio: A borda que separa os conteúdos primário e secundário é menor porque o border-top foi colocado no e não na , com isso a borda acompanhará o tamanho do título apenas.
Eu só consegui fazer essa borda colocando um hr no HTML e definindo o tamanho dele no css. Se eu coloco dessa forma no vídeo, parece que a borda não respeita o tamanho do meu título.
Acho que entendi o que está acontecendo. Na classe .conteudo-secundario estou colocando (text-aling para centralizar) quando uso text-aling a linha pega de toda a tela na horizontal. Mas quando mudo para aling-items essa linha parece que se adapta ao tamanho do meu titulo. Deve ser isso.
Caso queiram colocar um efeito de escurecimento mais natural do HOVER do botão (para que ele não mude de cor imediatamente) Basta colocar: transition-duration: 0.4s; (Você pode escolher quanto tempo vai demorar para mudar de uma cor para a outra)
Finalmente entendi o uso da flex-box e parece bem simples de usar. Desafio: a borda é mais pequena porque esta foi associada a um elemento header, que por sua vez tem a largura do texto, ao contrário das outras bordas que estão associadas a contentores cujo a largura é igual à largura da tela.
58:10, o display block além de transformar a imagem em um bloco, permite que você use o margin, padding etc. O "margin: 0 auto;" tá fazendo o seguinte: O primeiro valor representa o margin-top e margin-bottom, já o segundo valor representa o margin-right e margin-left. Sendo assim, com aquela linha de código, você tá dizendo que pra cima e pra baixo não vai haver mudanças na margem, mas pros lados vai ficar centralizado. Acho que expliquei de uma forma simples pra ajudar vcs, e pra ajudar a rafa que não soube explicar o pq, só lançou o famoso "confia" KAKAKAKAKAK PS: As configurações de margin e padding funcionam no sentido horário e começam no top. Então fica: margin-top -> margin-right -> margin-bottom -> margin-left. E a Rafa usou uma shorthand. Ao invés de fazer: "margin: 0 auto 0 auto" que significa zero no top, auto no right, 0 no bottom e auto no left, ela usou apenas 2 valores, que é mais prático kkkk
Mulher do céu, não tem nada nesse RUclips como você. Eu tô devorando os vídeos e triste porque queria que tivesse uma playlist de, pelo menos, 100 vídeos kkkkk Decidi que esse ano vou aprender e decidi por sua causa, consigo aprender DE FATO com seus videos❤️❤️❤️
Nossa! Estou fazendo um curso em que paguei 3 mil reais e eu não tava entendendo NADA por causa da forma de ensinar do professor. E você simplesmente ensina de uma forma incrível, já aprendi mais nesse vídeo do que em todos os módulos que já fiz até agora. Muito obrigado, continua fazendo mais conteúdo assim e de Java script por favor
Tu pode usar um comando do VScode para envelopar textos em tags: 1. Marca o que tu quer envelopar 2. Aperta ctrl + shift + p (vai aparecer um espaço para vc digitar, ai vc digita Wrap with abbreviation) 3. Aperta enter 4. Digita a tag que você quer 5. Aperta enter
Olá Rafa eu tô aprendendo HTML, CSS e futuramente javascript e me veio a mente criar um projeto inspirado no tier make que é um site de ranking de várias coisas. Eu não sei se só com HTML e o CSS é possível fazer esse projeto, mas eu gostaria de ver no seu canal acho que seria bacana. Mas isso é só uma dica. Ótimo conteúdo como sempre ;)
o véio vlw mesmo... fiz muitas aulas de html e css que me deram muita base pra entender tudo o que vc fez... mas nada foi tão claro quanto ver vc fazer na prática, realmente esse seu trabalho foi motivador e inspirador, muito obrigado pela disposição de compartilhar seu conhecimento e sua simpatia, vlw gata... um beijo grande um forte abraço e continua ai que tá da hora.
@@davidpreisigke6925 Oi, David! Tudo bem? Vou voltar a estudar, pois tive que dar uma paradinha porque fiz cirurgia na visão. Mas não vou desanimar. ;) S2
27:37 quando eu estava aprendendo a usar o css eu fui me mostrar pra um amigo na escola e fiz um codigo do zero, quando eu abri o site e não tinha mudado nada eu fiz a mesma cara akakakkakakakkak
Sou estudante de programação e sempre assisto aos seus vídeos em busca de motivação para estudar, ler livros, etc. Pois não é fácil estudar front-end."
O e o possui propriedades semelhantes a , nesse sentido tendem a ocupar a largura toda da dela. Por isso o border desses elementos ficaram na tela toda. Já o , o tamanho dele é definido pelo conteúdo dentro dele, assim, o border ficou apenas daquele tamanho, igual ao tamanho do conteúdo.
Muito bom! Eu dou aula gratuita pra algumas pessoas que querem migrar de área e indiquei seu canal pra acompanhar e até cobro esses tutoriais como exercícios. Muito bom!
Sobre o desafio no final: Porque a borda do meio é menor das bordas de cima e a ultima? Resp: porque a borda do meio faz parte do título do conteudo secundário, por fazer parte junto com o conteudo secundário(titulo) os dois tem a mesma largura ocupa o mesmo espaço. 0.4 seria a espessura da borda.
Vc podia ir mais direto ao assunto. No início do vídeo vc falou coisas que quem vai desenvolver uma landing page já deveria saber, como por exemplo, a estrutura básica do HTML, as tags meta, tags semântica, etc. Esse conhecimento é pré requisito pra desenvolver uma página web. Partindo do princípio que a pessoa já sabe isso pra acompanhar o tutorial, o vídeo iria ficar muito mais curto.
Eu ensino a de fato desenvolver, não a copiar e colar meu código e meu público alvo é a galera iniciante, por isso faço questão de ensinar tudo o que estou fazendo, pra depois td mundo saber se virar 😊 se vc só que ver como eu fiz ao invés de entender o que tem por trás vc pode pegar o repositório do Github na descrição direto com o código
@@rafaellaballerini Não leve a mau meu feedback. Apenas falei pq é mais prático criar um vídeo com a parte que é genérica de todo projeto: a estrutura básica, os links css e tags de script, etc e a cada novo projeto vc recomendar esse vídeo, do que falar essa parte introdutória a cada novo tutorial.
O que essa menina tem de beleza tem de paciência para explicar detalhe por detalhe e passando o conhecimento com esse sorriso no rosto. Demonstra que gosta realmente do que faz. Parabéns pelo conteúdo!
Nesse caso ai, não necessita de JavaScript para poder linkar as coisas? Pq no final dentro do css vc linkou um menu que vai pro seu discor... eu achava que para dar vida a pagina faltaria o javascript... estou iniciando por isso tenho essa duvida... video otimo!!! obrigado!
Rafa, trás mais tutoriais assim, por favoooor! Quando sobrar uma moedinha com ctz vou comprar um curso que vc é professora na Alura!!! Parabéns pelo trabalho, está muuuuuito bom!!! E rapaziada, se alguém souber de outro canal que trás projetos assim de forma didática e explicando tudo, me passei ai!
Nesse traço eu fiz sozinho mas coloquei no secundário pai aí ficou grande kkkk aí pensei vou espera ela pra ver se coloca alguma coisa a mais mas aí vi q colocou no título então a linha acompanha onde vc coloca neh? Não soube explica direito mas eu entendi kkkkk
Linda você arrasa, mds sério explicação simples e intuitiva, super admiro você e seu trabalho. tenho sonho de ser programador e estou em busca disso. Enfim parabéns!
Seu conteúdo é muito foda. Tenho certeza que seus vídeos estão ajudando milhares de pessoas a ingressarem no universo do desenvolvimento web. Que a vida te traga só o que houver de melhor!
é muito simples a linha não é do mesmo tamanha porque ela segue a classe h2 (conteudo-secundario-titulo) o tamanho da linha segue o tamanho da frase do h2.
Meu pai.. não costumo comentar em vídeos. Mas o sentimento de gratidão foi tão grande que tive que deixar aqui meus agradecimentos pelo enorme compartilhamento de sabedoria. MUITO OBRIGADO ! Que Deus continue te abençoando.
Desafio: O border-top está mas curto, porque está associado ao h3 acompanhando do o tamanho do titúlo, diferente dos demais que estão acompanhando a largura da viweport... parábens Rafa seus conteúdos são sempre muito didáticos.
A borda do conteúdo principal ficou curta por que ficou dentro de uma coluna no flex-direction. Achei muito boa a dica do css tricks... vai ajudar muito. Obrigado.
Alguém conseguiu entender essa parte da borda no desafio? Criei um novo arquivo e criei duas classes, uma classe pai e a outra filho. Na classe pai coloquei o display flex e as colunas, na classe filho só coloquei o meu título. Quando vou colocar o border-top na minha classe filho, a linha pega toda a página na horizontal. Eu só consegui deixar essa linha pequena em cima do título, colocando um hr no HTML e definindo o width dele no css.
Acho que entendi o que está acontecendo. Na classe .conteudo-secundario estou colocando (text-aling para centralizar) quando uso text-aling a linha pega de toda a tela na horizontal. Mas quando mudo para aling-items essa linha parece que se adapta ao tamanho do meu titulo. Deve ser isso.
A linha que é menor no conteúdo secundário , ela ficou menor por que você colocou o border-top dentro da classe onde estava o H3, por isso ela pegou somente o tamanho do que havia sido escrito dentro do H3, detalhe estou iniciando em HTML/CSS, e aprendi bastante com seu vídeo parabéns pela didática!
Conteúdo top como sempre! Quem tiver interesse de aprender mais sobre HTML CSS e JS, além do canal da Rafaella Ballerini que é excelente (sem querer fazer propaganda) recomendo o canal do Curso em Vídeo, do Gustavo Guanabara. Ele tá criando um curso de HTML e CSS bem completo vale muito a pena e outro canal é o Girl Coding, da Giovanna Moeller, é um canal novo, fala sobre CSS, responsividade, flex-box conteúdo muito bom também. Para práticar tem o Frontend Mentor e o Codier, tem desafios para serem replicados em forma de HTML, CSS e JS. E também o flexbox froggy é um joguinho pra aprender e praticar flexbox.
Muito obrigado por essa aula, Rafa! Eu entendi perfeitamente o conceito do flexbox, já havia assistido várias aulas em outros lugares mas não entendia, esse vídeo me ajudou a fixar o conteúdo. Obrigado :D
Você é incrível !! Comecei meu curso de TI faz 1 mês e já quero explorar tudo o que tem para ser explorado. Amei tudo na área de TI, quero cada vez ir mais a fundo de tudo. Eu estou um pouco perdido em questão dos códigos, mas de pouco em pouco, vou me aprofundando
Meu Deus Rafaaaa!! Você é maravilhosa e necessária no mundo dos aprendizes de programação!😲 Mulher , que didativa maravilhosa! Eu tava batendo cabeça em CSS e você transformou a sombra em luz em apenas 1 vídeo! Muito obrigada por dividir seu conhecimento com o mundo!!🤗
Salve Rafa, queria saber qual o navegador você usou, que mostrar todas as dimensões cores etc. Você e braba, tô começando estudar front end, esse ei ano 🙏💥. Estou aguardando mais vídeos assim. Já tô seguindo no Instagram também, vamos Dale 💥💥🙏
Rafaella, se você fosse médica e clinicasse com a elegância e domínio com que ministrou esse tutorial, seria a melhor médica existente. A linha é menor porque ela é a margem superior do elemento do elemento h3, cuja classe é conteudo-secundario-titulo.
MUITO FODA, e o melhor jeito de aprender é usar essas técnicas e tentar modificar pra criar a sua própria LP, super estressante pq tu vai achar erros que ela não vai te dar passo a passo já to na quinta xicara de café muito massa
Sobre o desafio que foi proposto sobre a linha da borda que fica no top. Quando o display flex é usado com o flex-direction com collumn, ele acaba limitando o tamanho da área, porque estamos codando no sentido vertival. Se fosse um row, que seria na horizontal, o border-top iria preencher todo o tamanho da tela. Acho que seria isso Adorei o conteúdo do vídeo!
Quem apóia fazermos um grupo para estudarmos ?? deixe um comment .. Eu estudo diariamente, mas um grupo para partilhar idéias e construir projetos juntos para treinar, seria muito bom .
Parabéns pelo conteúdo. Estou gostando muito da didática, para quem quer aprender não tem desculpa. Mas tenho uma observação. Faça uma pesquisa mais aprofundada sobre o assunto do h1 ser só um por página. Isso na verdade já foi comprovado que é um mito. Existe inclusive uma entrevista com um desenvolvedor do Google onde ele cita que para os bots isso não influência em nada. Portanto, mito.
Caraca, entrei aqui sem saber nada de CSS, apenas tinha estudado HTML e após terminar o vídeo parece que já sei o suficiente para criar um site e estilizar usando CSS. kkkk sei que não é fácil assim mas deu uma boa noção do que o CSS faz, e esse flex vou usar muito !!!
Muito obrigado Rafa! Primeiro vi sua aula completa. Depois vi de novo, mas fazendo o código. Consegui fazer a página igualzinha. Nunca tinha mexido com HTML nem CSS, e com sua aula consegui desenvolver minha primeira página (na realidade sua página hehehe...). Muitíssimo obrigado pelas aulas, estou adorando seu conteúdo!! Siga em frente!!
¿Hola que PC tienes??? Si te digo el mío me puedes decir si me sirve para desarrollo web y programación. I3 6100 - 16 GB RAM - 2 núcleos - NVIDIA GeForce GT 610
Eu vi esse vídeo a um tempo atrás e ontem decidi fazer essa Landing Page. Consegui completar a tarefa sem olhar o vídeo, mas uma diferença que ficou foi que no lugar dos parágrafos eu acabei criando uma ol seguida por 3 li dentro da section. De qualquer forma ficou igualzinho o exemplo do vídeo.
Ela faz parecer que front end é super fácil kkkk, trás mais mini projetos que ajuda muito quem tá aprendendo.
Mas é, tendo uma boa noção de Design e concentração na hora de escrever é algo bem simples, depois que aprende nunca mais esquece.
Frontend é a parte mais tranquila do desenvolvimento de software, é uma questão de prática, quanto maior a prática maior a naturalidade do desenvolvimento.
@@ygortorresgaleno9654 fico feliz em ver isso, pq CSS3 mesmo sendo daora me assusta muitokkkkkkkkkk
@@grupotocabr e facil ate vc começar com o reactJs
mas é, complicado mesmo e back end, front end e izi
Rafa, você não é CSS, mas é puro estilo 😎
KKKKKKKKKKKKKK
kkkkkkkkkk essa foi boa!!!!!!!
Kkkkkkkkk boa
KKKKKKKKK
😂😂😂😂😂
Desafio: A borda que separa os conteúdos primário e secundário é menor porque o border-top foi colocado no e não na , com isso a borda acompanhará o tamanho do título apenas.
Muito Bom 😄
certinho amigo
Ai sim
Eu só consegui fazer essa borda colocando um hr no HTML e definindo o tamanho dele no css.
Se eu coloco dessa forma no vídeo, parece que a borda não respeita o tamanho do meu título.
Acho que entendi o que está acontecendo.
Na classe .conteudo-secundario estou colocando (text-aling para centralizar) quando uso text-aling a linha pega de toda a tela na horizontal.
Mas quando mudo para aling-items essa linha parece que se adapta ao tamanho do meu titulo.
Deve ser isso.
Tenho 53 anos, e depois que comecei a ver os vídeos da Rafaella decidi que vou aprender HTML e CSS. Muito legal esse conteúdo.
Html css e js
Caso queiram colocar um efeito de escurecimento mais natural do HOVER do botão (para que ele não mude de cor imediatamente)
Basta colocar: transition-duration: 0.4s; (Você pode escolher quanto tempo vai demorar para mudar de uma cor para a outra)
Boaaaa
Finalmente entendi o uso da flex-box e parece bem simples de usar.
Desafio: a borda é mais pequena porque esta foi associada a um elemento header, que por sua vez tem a largura do texto, ao contrário das outras bordas que estão associadas a contentores cujo a largura é igual à largura da tela.
AEEEEEEE!!!! 🤩
Um monstro da CSS 👏👏👏
ou pra treinar o flex tem um joguinho flex froggy
@@joaocosta1228 ESSE JOGO É MARAVILHOSO. E flexbox além de ser muito útil me ajudou a entender melhor a relacao entre containers e filhos.
@@joaocosta1228 vlw pela dica mano ajudou muito kkk
Nem no curso que eu fiz na Alura eu entendi tão bem o flex-box.
Parabéns Rafa, sua didática é muito boa!!!
Vale apena mano fazer o curso da Alura?
CLARO
@@liciooliveiraramos5834
58:10, o display block além de transformar a imagem em um bloco, permite que você use o margin, padding etc. O "margin: 0 auto;" tá fazendo o seguinte: O primeiro valor representa o margin-top e margin-bottom, já o segundo valor representa o margin-right e margin-left. Sendo assim, com aquela linha de código, você tá dizendo que pra cima e pra baixo não vai haver mudanças na margem, mas pros lados vai ficar centralizado. Acho que expliquei de uma forma simples pra ajudar vcs, e pra ajudar a rafa que não soube explicar o pq, só lançou o famoso "confia" KAKAKAKAKAK
PS: As configurações de margin e padding funcionam no sentido horário e começam no top. Então fica: margin-top -> margin-right -> margin-bottom -> margin-left. E a Rafa usou uma shorthand. Ao invés de fazer: "margin: 0 auto 0 auto" que significa zero no top, auto no right, 0 no bottom e auto no left, ela usou apenas 2 valores, que é mais prático kkkk
Aaaaaaaaaa ❤️ obrigada pelo conteúdo em forma de comentário Guilherme! Hahahaha com certeza vai ajudar a galera que quer entender mais
vcs são brabos
fala irmao, estava testando isso, e tentei com uma imagem, audio e deu boa, mas nao consegui fazer com outras tags, tipo h1, p e outras, sabe o pq?
Mano, apenas faça mais desses pfv, é um aprendizado sem tamanho ver como vc faz a organização do das tags e do css, muito obrigado mesmo!
Mulher do céu, não tem nada nesse RUclips como você. Eu tô devorando os vídeos e triste porque queria que tivesse uma playlist de, pelo menos, 100 vídeos kkkkk
Decidi que esse ano vou aprender e decidi por sua causa, consigo aprender DE FATO com seus videos❤️❤️❤️
Que foda!
Só vai garotinha..
tem uma youtuber chamada gabriela pinheiro, tem poucos videos mas sao bons também
Nossa! Estou fazendo um curso em que paguei 3 mil reais e eu não tava entendendo NADA por causa da forma de ensinar do professor. E você simplesmente ensina de uma forma incrível, já aprendi mais nesse vídeo do que em todos os módulos que já fiz até agora. Muito obrigado, continua fazendo mais conteúdo assim e de Java script por favor
Já preparada pra fazer essa landing page incrível, obrigada Rafa!
Fiz o formulário essa semana, e já tem o outro vídeo. Que legal! Um presente 🎁
Bora pro ultimo projetinho do ano Silvio!!!
Tu pode usar um comando do VScode para envelopar textos em tags:
1. Marca o que tu quer envelopar
2. Aperta ctrl + shift + p
(vai aparecer um espaço para vc digitar, ai vc digita Wrap with abbreviation)
3. Aperta enter
4. Digita a tag que você quer
5. Aperta enter
Q trampo, é mais fácil abrir a tag, selecionar o texto e recortar e copiar
ou fazer um atalho, coloquei alt + w para abrir o Wrap with abbreviation
Olá Rafa eu tô aprendendo HTML, CSS e futuramente javascript e me veio a mente criar um projeto inspirado no tier make que é um site de ranking de várias coisas. Eu não sei se só com HTML e o CSS é possível fazer esse projeto, mas eu gostaria de ver no seu canal acho que seria bacana. Mas isso é só uma dica. Ótimo conteúdo como sempre ;)
Vc pode fazer sim, só que seria estático e não dinâmico por causa da falta do JavaScript
@@ilovemacross Verdade 👍
o véio vlw mesmo... fiz muitas aulas de html e css que me deram muita base pra entender tudo o que vc fez... mas nada foi tão claro quanto ver vc fazer na prática, realmente esse seu trabalho foi motivador e inspirador, muito obrigado pela disposição de compartilhar seu conhecimento e sua simpatia, vlw gata... um beijo grande um forte abraço e continua ai que tá da hora.
Rafa tem algum vídeo falando do Figma de como usar e fazer design? ☺️
Que aula incrível!
Sou iniciante em Dev. e seu vídeo está me ajudando.
Esse flex facilita muito...
Sucesso pra ti s2
olá camila cmo estão os estudos? alguma novidade? :)
@@davidpreisigke6925 Oi, David! Tudo bem?
Vou voltar a estudar, pois tive que dar uma paradinha porque fiz cirurgia na visão. Mas não vou desanimar. ;) S2
caralho, esse bizú do guia do flexbox salvou demais!
Inteligente e ainda joga LOL !!! hahahaahaha
Parabéns, adoro o teu trabalho. Poderias fazer uma página web responsiva ?
27:37 quando eu estava aprendendo a usar o css eu fui me mostrar pra um amigo na escola e fiz um codigo do zero, quando eu abri o site e não tinha mudado nada eu fiz a mesma cara akakakkakakakkak
Desafio: a linha é menor porque você colocou o border-top dentro do elemento titulo então tá seguindo o tamanho dele
cara, só usar tailwind que voce consegue reduzir o tempo de fazer uma landing page em mais de 60%
Rafa, traz esse mesmo conteúdo utilizando a RESPONSIVIDADE, seria muito bacana!!!! Fico no aguardo!
Além da aula deixou os capítulos bem organizados
Sou estudante de programação e sempre assisto aos seus vídeos em busca de motivação para estudar, ler livros, etc. Pois não é fácil estudar front-end."
O e o possui propriedades semelhantes a , nesse sentido tendem a ocupar a largura toda da dela. Por isso o border desses elementos ficaram na tela toda.
Já o , o tamanho dele é definido pelo conteúdo dentro dele, assim, o border ficou apenas daquele tamanho, igual ao tamanho do conteúdo.
Boto fé !!!acho que isso mesmo.
Que diferença quando alguém explica o que está digitando!! Parabéns!!!
Muito bem explicado . Parabéns.
Muito bom!
Eu dou aula gratuita pra algumas pessoas que querem migrar de área e indiquei seu canal pra acompanhar e até cobro esses tutoriais como exercícios. Muito bom!
Sobre o desafio no final: Porque a borda do meio é menor das bordas de cima e a ultima?
Resp: porque a borda do meio faz parte do título do conteudo secundário, por fazer parte junto com o conteudo secundário(titulo) os dois tem a mesma largura ocupa o mesmo espaço. 0.4 seria a espessura da borda.
Um exercício legal também é pegar essa landing page que ela fez e tentar deixar ela responsiva
Vc podia ir mais direto ao assunto. No início do vídeo vc falou coisas que quem vai desenvolver uma landing page já deveria saber, como por exemplo, a estrutura básica do HTML, as tags meta, tags semântica, etc. Esse conhecimento é pré requisito pra desenvolver uma página web. Partindo do princípio que a pessoa já sabe isso pra acompanhar o tutorial, o vídeo iria ficar muito mais curto.
Eu ensino a de fato desenvolver, não a copiar e colar meu código e meu público alvo é a galera iniciante, por isso faço questão de ensinar tudo o que estou fazendo, pra depois td mundo saber se virar 😊 se vc só que ver como eu fiz ao invés de entender o que tem por trás vc pode pegar o repositório do Github na descrição direto com o código
@@rafaellaballerini Não leve a mau meu feedback. Apenas falei pq é mais prático criar um vídeo com a parte que é genérica de todo projeto: a estrutura básica, os links css e tags de script, etc e a cada novo projeto vc recomendar esse vídeo, do que falar essa parte introdutória a cada novo tutorial.
O que essa menina tem de beleza tem de paciência para explicar detalhe por detalhe e passando o conhecimento com esse sorriso no rosto. Demonstra que gosta realmente do que faz. Parabéns pelo conteúdo!
Nesse caso ai, não necessita de JavaScript para poder linkar as coisas? Pq no final dentro do css vc linkou um menu que vai pro seu discor... eu achava que para dar vida a pagina faltaria o javascript... estou iniciando por isso tenho essa duvida... video otimo!!! obrigado!
Incrível, Rafa! Muito grato por essa aula... Agradeço! Vai fazer projetinhos assim com JavaScript?
E essa propriedade funciona?
Rafa: Confia que dá bom 👍
kkkkkk
Rafa, trás mais tutoriais assim, por favoooor! Quando sobrar uma moedinha com ctz vou comprar um curso que vc é professora na Alura!!! Parabéns pelo trabalho, está muuuuuito bom!!! E rapaziada, se alguém souber de outro canal que trás projetos assim de forma didática e explicando tudo, me passei ai!
É minha gente, parece que front não é tão difícil assim não. Bora praticar.
A Rafaella deveria receber um prêmio nobel, pois a aula dela SALVOU minha semana de estudos e trouxe PAZ pra minha vida acadêmica. Forte abraço!
Eu aí kkkk, preciso enviar o trabalho nesse sábado
Nesse traço eu fiz sozinho mas coloquei no secundário pai aí ficou grande kkkk aí pensei vou espera ela pra ver se coloca alguma coisa a mais mas aí vi q colocou no título então a linha acompanha onde vc coloca neh? Não soube explica direito mas eu entendi kkkkk
Linda você arrasa, mds sério explicação simples e intuitiva, super admiro você e seu trabalho. tenho sonho de ser programador e estou em busca disso. Enfim parabéns!
show de bola... consegui fazer e deu tudo certo... parabens RAFA didatica incrivel... 😁😁😁
Seu conteúdo é muito foda. Tenho certeza que seus vídeos estão ajudando milhares de pessoas a ingressarem no universo do desenvolvimento web. Que a vida te traga só o que houver de melhor!
é muito simples a linha não é do mesmo tamanha porque ela segue a classe h2 (conteudo-secundario-titulo) o tamanho da linha segue o tamanho da frase do h2.
Meu pai.. não costumo comentar em vídeos. Mas o sentimento de gratidão foi tão grande que tive que deixar aqui meus agradecimentos pelo enorme compartilhamento de sabedoria. MUITO OBRIGADO ! Que Deus continue te abençoando.
Rafa, qual é o nome desse tema que tu usas? Ele está disponível como extensão no VsCode?
Que aula incrível! Rafa você explica tão bem, não tem como não entender com você!
Obrigada ♥️
Strong e B tem muita diferença ? Sou novo e quando quero deixar algo em negrito eu coloco entre e não entre , da diferença ?
Desafio: O border-top está mas curto, porque está associado ao h3 acompanhando do o tamanho do titúlo, diferente dos demais que estão acompanhando a largura da viweport... parábens Rafa seus conteúdos são sempre muito didáticos.
merece um beijo de lingua
Eu crio bots discord. E de vez enquando tento aprender um pouco de front-end
Guria! Adoraria ter aulas só contigo. Eu aprendi CSS em minutos! Muito bom. Sucesso!
Duas, cara! Só um 🤯🤯🤯 hahaha, muito bom!!
O chato é que absolutamente toda hora vem um anuncio e eu me perco no código, ai toda hora eu tenho que voltar para verificar para não haver erro
Rafa parabéns pelos vídeos e pela didática!
Você pretende fazer algum vídeo focando em reponsividade e media query?
Thanks! ☺️
Vou fazer pelo celular se der certo eu volto e disponibilizo o domínio que o replit proporciona pra pessoas acessarem sua página!!
Lá vai eu usar o replit ou spck editor pra fazer isso pq PC eu não tenho, o limite sou eu mesmo ehehe.
Rafa, eu largaria a Bella por você 🥰
HAHAHAHAHA
A borda do conteúdo principal ficou curta por que ficou dentro de uma coluna no flex-direction. Achei muito boa a dica do css tricks... vai ajudar muito. Obrigado.
Mr bom abrir o vídeo n entender nada, ai estudar e entender tudo slc orgulho
29/11 e isso prova o empenho da Rafa pra fazer edição
Alguém conseguiu entender essa parte da borda no desafio?
Criei um novo arquivo e criei duas classes, uma classe pai e a outra filho. Na classe pai coloquei o display flex e as colunas, na classe filho só coloquei o meu título. Quando vou colocar o border-top na minha classe filho, a linha pega toda a página na horizontal.
Eu só consegui deixar essa linha pequena em cima do título, colocando um hr no HTML e definindo o width dele no css.
Acho que entendi o que está acontecendo.
Na classe .conteudo-secundario estou colocando (text-aling para centralizar) quando uso text-aling a linha pega de toda a tela na horizontal.
Mas quando mudo para aling-items essa linha parece que se adapta ao tamanho do meu titulo.
Deve ser isso.
Não sou da área mas consegui fazer. Obrigado.
A linha que é menor no conteúdo secundário , ela ficou menor por que você colocou o border-top dentro da classe onde estava o H3, por isso ela pegou somente o tamanho do que havia sido escrito dentro do H3, detalhe estou iniciando em HTML/CSS, e aprendi bastante com seu vídeo parabéns pela didática!
thank you so much rafa for this video
Nada de desgosto nem de desânimo se acabas de fracassar; recomeça
Conteúdo top como sempre!
Quem tiver interesse de aprender mais sobre HTML CSS e JS, além do canal da Rafaella Ballerini que é excelente (sem querer fazer propaganda) recomendo o canal do Curso em Vídeo, do Gustavo Guanabara. Ele tá criando um curso de HTML e CSS bem completo vale muito a pena e outro canal é o Girl Coding, da Giovanna Moeller, é um canal novo, fala sobre CSS, responsividade, flex-box conteúdo muito bom também.
Para práticar tem o Frontend Mentor e o Codier, tem desafios para serem replicados em forma de HTML, CSS e JS. E também o flexbox froggy é um joguinho pra aprender e praticar flexbox.
Não consegui colocar o background.
Fantástico tutorial, menina. Parabéns!
Muito obrigado por essa aula, Rafa! Eu entendi perfeitamente o conceito do flexbox, já havia assistido várias aulas em outros lugares mas não entendia, esse vídeo me ajudou a fixar o conteúdo. Obrigado :D
Você é incrível !! Comecei meu curso de TI faz 1 mês e já quero explorar tudo o que tem para ser explorado. Amei tudo na área de TI, quero cada vez ir mais a fundo de tudo. Eu estou um pouco perdido em questão dos códigos, mas de pouco em pouco, vou me aprofundando
Meu Deus Rafaaaa!! Você é maravilhosa e necessária no mundo dos aprendizes de programação!😲 Mulher , que didativa maravilhosa! Eu tava batendo cabeça em CSS e você transformou a sombra em luz em apenas 1 vídeo! Muito obrigada por dividir seu conhecimento com o mundo!!🤗
Eu não consegui transportar nenhuma imagem do figma! Nem lincar, o CSS ao HTML mesmo transcrevendo o link que ela colocou! SOCORRO, alguem me ajuda?
Deu uma destravada legal! Ótimo tutorial!
Oi, eu ví que você utilzou a tag ao invés da como ví em outros vídeos. Qual seria a diferença entre elas?
Mano, muito excelente namoral.
curti muito o vídeo, seria legal vc fazer um vídeo deixando esta landingpage que criamos responsiva, desde já obrigado pelo vídeo S2
Fooogggoooo! Tu és espectacular!!!! Parabens estou aprender muito contigo!! Parabens Beijo!
Salve Rafa, queria saber qual o navegador você usou, que mostrar todas as dimensões cores etc. Você e braba, tô começando estudar front end, esse ei ano 🙏💥. Estou aguardando mais vídeos assim. Já tô seguindo no Instagram também, vamos Dale 💥💥🙏
Eu usando display absoluto, e relativo ''-' ;c, eu vendo a rafa fazendo só usando display: flex \o/ ^---^
achei muito interessante o video um inscrito a mais
Conteúdo impressionante! Eu que sou de infra, acho que já consigo fazer uma LP com essa aula!
Rafaella, se você fosse médica e clinicasse com a elegância e domínio com que ministrou esse tutorial, seria a melhor médica existente.
A linha é menor porque ela é a margem superior do elemento do elemento h3, cuja classe é conteudo-secundario-titulo.
Por mais Videos Assim por Favor Rafaella Muito bom continue fazendo esse tipo de Video
parabéns top de maisssssssss!!!!!!!!!!!!!!!!!!!!!!!!!
MUITO FODA, e o melhor jeito de aprender é usar essas técnicas e tentar modificar pra criar a sua própria LP, super estressante pq tu vai achar erros que ela não vai te dar passo a passo já to na quinta xicara de café muito massa
E eu que nem tomo café.🤡🤣
Sobre o desafio que foi proposto sobre a linha da borda que fica no top. Quando o display flex é usado com o flex-direction com collumn, ele acaba limitando o tamanho da área, porque estamos codando no sentido vertival. Se fosse um row, que seria na horizontal, o border-top iria preencher todo o tamanho da tela. Acho que seria isso
Adorei o conteúdo do vídeo!
Quem apóia fazermos um grupo para estudarmos ?? deixe um comment .. Eu estudo diariamente, mas um grupo para partilhar idéias e construir projetos juntos para treinar, seria muito bom .
Parabéns pelo conteúdo. Estou gostando muito da didática, para quem quer aprender não tem desculpa. Mas tenho uma observação. Faça uma pesquisa mais aprofundada sobre o assunto do h1 ser só um por página. Isso na verdade já foi comprovado que é um mito. Existe inclusive uma entrevista com um desenvolvedor do Google onde ele cita que para os bots isso não influência em nada. Portanto, mito.
Caraca, entrei aqui sem saber nada de CSS, apenas tinha estudado HTML e após terminar o vídeo parece que já sei o suficiente para criar um site e estilizar usando CSS. kkkk sei que não é fácil assim mas deu uma boa noção do que o CSS faz, e esse flex vou usar muito !!!
Rafa, amo sua didática. Mais um vídeo sensacional, como sempre. Obrigada! ♥
Vídeo muito lindo,super conteúdo,me ajudou muito. Gratidão sempre.🇺🇲🇧🇷💜🌲🙏👀
Show suas aulas. Continue trazendo estes tipos de aula, HTML com css
Por algum motivo, meu texto no cabecalho ta com um espaço muito grande acima dele. Ai ele não alinha com a imagem
Muito obrigado Rafa! Primeiro vi sua aula completa. Depois vi de novo, mas fazendo o código. Consegui fazer a página igualzinha. Nunca tinha mexido com HTML nem CSS, e com sua aula consegui desenvolver minha primeira página (na realidade sua página hehehe...). Muitíssimo obrigado pelas aulas, estou adorando seu conteúdo!! Siga em frente!!
¿Hola que PC tienes??? Si te digo el mío me puedes decir si me sirve para desarrollo web y programación. I3 6100 - 16 GB RAM - 2 núcleos - NVIDIA GeForce GT 610
essa mina e um robo to inpressionado parabens
Eu vi esse vídeo a um tempo atrás e ontem decidi fazer essa Landing Page.
Consegui completar a tarefa sem olhar o vídeo, mas uma diferença que ficou foi que no lugar dos parágrafos eu acabei criando uma ol seguida por 3 li dentro da section.
De qualquer forma ficou igualzinho o exemplo do vídeo.
Estou fazendo os cursos da Alura, este projeto que vc passou aprendi muito e curti muito tbm obg.
Olá @Rafaella Ballerini! Fiz minha primeira Landing Page... Está lá no seu linkedin... Curte lá por favor... Obrigado!