Hospedagem de sites anuais na Hostinger com até 77% de desconto: https://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: https://code.visualstudio.com/Download
Figma com o Design: https://www.figma.com/file/myqP66iQwzjwjrIAJyyrip/BalleBot?node-id=0%3A1
Extensão Ballerini Theme: https://marketplace.visualstudio.com/items?itemName=BalleriniServer.ballerini-theme
Extensão Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Google Fonts: https://fonts.google.com/
Guia do Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Repositório com o código desse vídeo: https://github.com/rafaballerini/LandingPage
Comunidade no Discord: https://discord.gg/wagxzStdcR
Minhas redes sociais: https://beacons.ai/rafaballerini
Desconto da ALURA: https://www.alura.com.br/promocao/rafaballerini

Conteúdo adicional:

Dicionário de tags HTML: https://www.instagram.com/p/CHiQXYPgXTU/?igshid=ohu3btcytyen
Principais propriedades CSS: https://www.instagram.com/p/CIQnsYugB3W/?igshid=1cabwlubxa2qa
Seletores CSS: https://www.instagram.com/p/CH8AD71AH6-/?igshid=klpwcpq96hqg
-------------------------------------------------------------------------------------------------------------------
í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