LANDING PAGE COM HTML e CSS!

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:

Conteúdo adicional:

-------------------------------------------------------------------------------------------------------------------
í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

[felipechagas]

Ela faz parecer que front end é super fácil kkkk, trás mais mini projetos que ajuda muito quem tá aprendendo.

[marceloaraujo]

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.

[gdev]

Rafa, você não é CSS, mas é puro estilo 😎

[arthurgomesvaladao]

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)

[Thom.Zille.]

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!

[nunomiguel]

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.

[eberthsantana]

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 <3

[weslleyjose]

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.

[maicontavares]

Desafio: A borda que separa os conteúdos primário e secundário é menor porque o border-top foi colocado no <h3 e não na <section class="conteudo-secundário">, com isso a borda acompanhará o tamanho do título apenas.

[leonardochaguri]

Nem no curso que eu fiz na Alura eu entendi tão bem o flex-box.
Parabéns Rafa, sua didática é muito boa!!!

[clemilsonm]

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.

[FamiliaLemesSoaresInacio]

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!

[alexfernando]

O <main> e o <footer> possui propriedades semelhantes a <div>, nesse sentido tendem a ocupar a largura toda da dela. Por isso o border desses elementos ficaram na tela toda.

Já o <h3>, o tamanho dele é definido pelo conteúdo dentro dele, assim, o border ficou apenas daquele tamanho, igual ao tamanho do conteúdo.

[pedroteixeira]

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!

[MrTohwso]

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!

[guilhermechaves]

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

[CarlosEduardo-eylu]

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."

[rafaelfigueiredo]

Que diferença quando alguém explica o que está digitando!! Parabéns!!!

[silvioifam]

Fiz o formulário essa semana, e já tem o outro vídeo. Que legal! Um presente 🎁

[CleytonRivonielleBezerra]

O que eu aprendi nesse vídeo em pouco tempo e 1000 vezes melhor que qualquer faculdade 🎉