LANDING PAGE COM HTML e CSS!
Вставка
- Опубліковано 12 лип 2024
- Hospedagem de sites anuais na Hostinger com até 77% de desconto: hostinger.com.br/rafa + cupom RAFA
No video de hoje eu mostro pra vocês como é simples e rápido montar uma página web de landing page apenas com HTML e CSS!
Nesse caso, utilizamos o projeto da Balle Bot, um robô que modera a nossa comunidade no Discord, que inclusive está aberto para qualquer pessoa que queira participar =) link abaixo
O que mais você quer ver aqui no canal? Comenta aqui embaixo pra eu saber!
------------------------------------------------------------------------------------------------------------------
Links importantes:
Visual Studio Code: code.visualstudio.com/Download
Figma com o Design: www.figma.com/file/myqP66iQwz...
Extensão Ballerini Theme: marketplace.visualstudio.com/...
Extensão Live Server: marketplace.visualstudio.com/...
Google Fonts: fonts.google.com/
Guia do Flexbox: css-tricks.com/snippets/css/a...
Repositório com o código desse vídeo: github.com/rafaballerini/Land...
Comunidade no Discord: / discord
Minhas redes sociais: beacons.ai/rafaballerini
Desconto da ALURA: www.alura.com.br/promocao/raf...
Conteúdo adicional:
Dicionário de tags HTML: pCHiQXYPgX...
Principais propriedades CSS: pCIQnsYugB...
Seletores CSS: pCH8AD71AH...
-------------------------------------------------------------------------------------------------------------------
índice do vídeo:
00:00 - O que é Landing Page
02:15 - Conheça a Hostinger
03:04 - Configurando o ambiente
03:46 - Criando o projeto
04:54 - Iniciando com HTML
05:55 - Head + metadados do HTML
09:04 - Body + tags semânticas do HTML
10:54 - Cabeçalho do HTML + Live Server
15:30 - Conteúdo principal do HTML
19:04 - Footer do HTML
19:55 - Detalhes visuais da página
20:37 - Iniciando com CSS e adicionando as classes
22:28 - Importanto fontes no Google Fonts
25:05 - Reset CSS: apagando pré configurações
27:01 - Estilizando o body
27:40 - Importanto o CSS no HTML
28:38 - Estilizando o cabeçalho
29:26 - Flexbox: conceitos e como utilizar
38:09 - Estilizando conteúdo principal pt 1
51:22 - Estilizando conteúdo principal pt 2
56:16 - Estilizando o footer
58:36 - Desafio
59:10 - Efeito hover: estilo ao passar o mouse por cima
1:00:35 - Adicionando links no menu
1:01:15 - Finalização + cupom da Hostinger
#html #css #landingpage - Наука та технологія
Rafa, você não é CSS, mas é puro estilo 😎
KKKKKKKKKKKKKK
kkkkkkkkkk essa foi boa!!!!!!!
Kkkkkkkkk boa
KKKKKKKKK
😂😂😂😂😂
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
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
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.
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
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!
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
rafa, queria muito te agradecer pelo conteúdo incrível que vc faz! ano que vem vou começar o curso de ciências da computação, e te agradeço desde já por ter me influenciado totalmente a seguir essa área que eu amo tanto :) seu jeito de explicar e seu carisma são únicos, vc é incrível !!
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!
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!
Que aula incrível! Rafa você explica tão bem, não tem como não entender com você!
Obrigada ♥️
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!
Projeto finalizado! Muito obrigado por compartilhar dos seus conhecimentos com todos, contribuindo com evolução e crescimento de todos que buscam conteúdo nessa área, sua didática no curso do alura fez eu vir praticar seus projetos que estão no yt, sucesso e vamos que vamos! 🙌🏾
Rafa, amo sua didática. Mais um vídeo sensacional, como sempre. Obrigada! ♥
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!
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!
Rafa, você é demais, gratidão, você não tem ideia do tempo que eu estou procurando uma aula dessas, prática, direta ao assunto e o mais importante o modo como explica é simplesmente sensacional parabéns pelo seu trabalho, muito obrigado e tenha bastante sucesso abs.
Assisti muitas aulas e essa foi a mais simples e objetiva de todas, parabéns pelo conteúdo e dedicação nos vídeos.
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!
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?
Estava eu toda perdida no flex-box e caio de paraquedas nessa aula maravilhosa... Pena que não da para curtir mais vezes, que didática! e com musiquinha de fundo ainda. Ameii!!
Rafa, antes de tudo eu estou amando muito estudar pelos seus videos, realmente são muito bons e super simples.
Meu que lindo essa lading page caracassssss to in love, Rafaaaa, muitíssimo obrigaadaaaaa vc é incrível querida, continue sempre pq precisamos de vc.
Fiz o formulário essa semana, e já tem o outro vídeo. Que legal! Um presente 🎁
Bora pro ultimo projetinho do ano Silvio!!!
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."
Só tenho a agradecer por passar todo esse conhecimento para as pessoas que estão começando agora na área. Mil vez gratidão.
Ahhh que PERFEIÇÃO !
Estou aprendendo Html e Css e eu simplesmente amo tutoriais desse jeito.
Projeto ficou lindo Rafa, como sempre arransando em tudo o que se propõe a fazer.
Amei a recomendação do Guia do Flexbox, eu estava batendo a cabeça na parede pq não entendia NADA. Mas com o guia a minha mente fez 🤯
Que diferença quando alguém explica o que está digitando!! Parabéns!!!
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.
Namoral, quanto conteúdo massa sem enrolação e bem descrito, parabéns rafa.
Eu volto nesse video sempre pois estou começando HTML e CSS e ele é recheado de ótimas dicas e sua didática é incrivel ele marcou meu ponto de partida vlw!
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
Mulher do céu, não tem nada nesse UA-cam 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
Sem palavras para o tanto que eu aprendi em uma única aula.
Muito Obrigada! Incrível!!!!!
Rafa, você é incrível. ❤
Apaixonada na sua didática, excelente aula!!!
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.
Além da aula deixou os capítulos bem organizados
Eu aprendo tanto com você Rafa, só tenho a agradecer, você mora no meu coração juro!
Manooo, que AULA! Eu aprendi tudo que eu precisava para fazer um site para o trabalho da faculdade... Só tenho a agradecer, vc é TOP
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
Rafa, traz esse mesmo conteúdo utilizando a RESPONSIVIDADE, seria muito bacana!!!! Fico no aguardo!
Maravilhosa como sempre. Estou aqui revisitando o HTML e CSS.
Muito obrigado por compartilhar seu conhecimento, mais tarde irei postar minha página feita e te marcar.
Eu tava procrastinando horrores porque estava muito difícil de entender os conceitos básicos e com esse video maravilhoso eu voltei aos estudos. Agradeço de coração por esse vídeo. Aliás, sua didática é foda.
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
caralho, esse bizú do guia do flexbox salvou demais!
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
Parabéns, essa explicação de flexbox foi a melhor e mais didática q eu vi até hoje 👍🏽
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.
Incrível, Rafa! Muito grato por essa aula... Agradeço! Vai fazer projetinhos assim com JavaScript?
Cara, que conteúdo incrível! Sem palavras para descrever o quão gratificante foi assistir uma aula como essa. Tudo bem explicado (o tamanho nem importou pois não foi nada cansativo) e a cada passo dado conforme o vídeo dava aquela sensação de: "caraca, eu realmente to conseguindo usar flexbox" (juro, eu apanho demais pra ele e esse site que você disponibilizou foi a minha salvação)
Muito obrigado pelo conteúdo de ótima qualidade Rafa! Continue trazendo mais vídeos assim montando algo, isso é algo muito bacana para quem está iniciando na área de front-end.
Eu comecei no frontend a uns 6 meses e tudo oq eu ainda não tinha entendido sobre html e css eu entendi agora, didática incrível!
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 👍
Guria! Adoraria ter aulas só contigo. Eu aprendi CSS em minutos! Muito bom. Sucesso!
Duas, cara! Só um 🤯🤯🤯 hahaha, muito bom!!
Não tinha visto um vídeo que me fizesse achar HTML e CSS tão simples , obrigado pela iniciativa e já vi outros vídeos que estão me ajudando muito. Parabéns!!!!
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!!🤗
Parabéns, adoro o teu trabalho. Poderias fazer uma página web responsiva ?
Rafa tem algum vídeo falando do Figma de como usar e fazer design? ☺️
Nossa que vídeo bom! Um dos poucos vídeo que ensina de maneira fácil e direta, obrigado!
Eu gostaria de agradece-la imensamente por esse conteúdo! Você merece o mundo!
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
Um exercício legal também é pegar essa landing page que ela fez e tentar deixar ela responsiva
Você tem uma das melhores didáticas do youtube, parabéns e obrigado!
Rafa, muito obrigado por esse vídeo incrível, me abriu os olhos para organizar melhor um site que estou montando, tudo de um jeito bem simples e fácil de entender. Você é demais!!! Faça mais conteúdos como esse, é muito bom.
Desafio: a linha é menor porque você colocou o border-top dentro do elemento titulo então tá seguindo o tamanho dele
Rafa parabéns pelos vídeos e pela didática!
Você pretende fazer algum vídeo focando em reponsividade e media query?
Thanks! ☺️
Excelente didática e uma landing page maravilhosa! Parabéns, Rafa!
Sensacional, nunca consegui me engajar no aprendizado de html e css, mas a abordagem direta sem lero lero é simplesmente a melhor que eu já encontrei, melhor até que de cursos pagos que tenho. Meus parabéns Rafaella, pelo conteúdo de qualidade!
Aprendi muito com esse seu vídeo. Incrível e obrigado viu! você ensina muito bem. Tem detalhes pequenos que a gente não entende e você vai explicando a medida que vai fazendo isso é muito útil, principalmente para iniciantes que entendem pouco. Um beijão!
agr falando serio, um dos melhores vídeos que já vi, até pq comecei a pouco tempo e to brincando de fazer códigos, até pq eu sei as vezes o que eu to digitando, ent faço como Akita falou, vou me jogar nesse mundo e explorar o máximo possível, até pq n tem como cair e se machucar no mundo dos códigos, esse vídeo me fez entender tudo msm sendo leigo no assunto. Muito bommmmm!!!!
Que aula top!! Maioria dos canais só saem codando.. você ensina cada parâmetro, que era esse meu intuito.. aprender o que significa cada coisa!!!
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
Parabens Rafa!! Sua didática é incrivél, simplemesmente amo seus videos!
Gosto da forma que ela ensina, ela explica cada detalhe, cada tag, explica tudo direitin, se eu não soubesse nada de html e css com certeza iria aprender tudo nesse vídeo
Ola Raffaela, esse video achei na hora mais do que certa! para eu complementar minha materia que estou estudando. Muito feliz por poder aprender cada vez mais. sua didatica excelente. Muito obrigada
Você é MUITO didática, meu Deus. Isso é perfeito.
Tô 2 dias direto vendo vídeos pra tentar aprender isso e só consegui aprender com vc, explica bem demais
1 hora de vídeo que nem vi passar! Sensacional e super explicativo! Sou incitante, mas deu pra captar tudo que explicou! Ganhou mais um inscrito 🙏
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!!
Nossa, muito da hora e bem explicativo. Adorei que você foi estilizando e mostrando o que acontece com aquela informação inserida
Deus abençõe pela sua ajuda ,pois jamais iria aprender do modo certo sem suas aulas ,Deus abençõe de coração.
Rafa você é incrível, faz pouco tempo que estou te acompanhando já sou teu fã😍
Oi Rafaela, gosto dos seus conteúdos no UA-cam.
Estou a ser formado em programação mas só hoje tive a melhor e mais símplis explicação para aprender de uma vez por todas o Css.
Parabéns e muito sucesso, continue apresentado os seu conteúdos com essa simplicidade que tens mostrado.
O que eu demorei meses pra entender, eu entendi em apenas 1 vídeo. Thanks Rafa, you are amazing!
amei o vídeo, Rafa!! você é incrível por compartilhar isso com a gente!
Sempre tive um bloqueio enorme com html e css. Sua explicação dessa landing page, simplesmente deixou tudo muito simples. Parabéns.
Rafa, finalmente entendi flexbox através desse vídeo! OBRIGADA!!! Continue postando vídeos assim, adoro sua didática e seu conteúdo
Adorei desenvolver essa landing page, e gostei muito de utilizar o Figma, excelentíssimo para criar telas.
Um dos melhores vídeos (se não for o melhor) que assisti nessa semana!
Obrigada por ajudar tantos desenvolvedores! =)
Estou começando agora no mundo da programação e consegui entender de forma clara o seu conteúdo, parabéns por explicar tão bem!
Se eu tivesse visto esse vídeo há 3 semanas atrás, não tinha sofrido tanto pra aprender HTML + css... Parabéns!!!
Mulherrrr, te conheci no alura!! E você é super didática, deixa tudo mais leve. Parabéns demais, pelo conteúdo e pelo canal!
Conteúdo impressionante! Eu que sou de infra, acho que já consigo fazer uma LP com essa aula!
Adorei o tutorial, comecei a estudar esse tem 20 dias engenharia da computação e vou focar em frontend e esse video me ajudou bastante, consegui fazer meu primeiro site graças a sua ajuda
Que video maravilhoso. Esse guia de flexbox mudou minha vida. Interessante como tirar 1 horinha do dia para ver algo que você acha que sabe, sempre te apresenta uma coisa nova.
Eu antes de começar a faculdade mês que vem já aprendi tanto com essa menina, queria mt que ela fosse professora, daria volta ao mundo pra ter aula com ela ❤️
Sem palavras pra você rafa, estou fazendo um curso aqui e estava cheio de duvidas que não consegui sanar com o curso, vendo este video a maior parte delas ja foi resolvida.
Muito obrigado pela aula, você é muito simpática e tem uma didática incrível, tornou algo que para muitos é complicado em uma coisa simples e de fácil compreensão. Ótimo conteúdo muito bem explicado.
Vídeo perfeito Rafa!! Você é incrível, sua didática é maravilhosa
Meu Deus! Que auulaaaa!! Não sabia q precisava tanto assistir esse vídeo até ter assistido. Parabéns pela didática incrível, Rafa! Continue esse ótimo trabalho, por favor!
Rafaaa gratidão por esse super vídeo, didático e muito bem explicado. Teu conteúdo é espetacular! Parabéns!