Criando o site do Papai Noel com HTML, CSS e JavaScript

Neste tutorial, vamos criar o site oficial do Papai Noel utilizando HTML, CSS e JavaScript! 🎅✨ Descubra passo a passo como desenvolvemos uma encantadora landing page que destaca a venda da misteriosa box do Papai Noel. 🎁💻

Durante o processo de construção, exploramos duas poderosas bibliotecas: AOS para animações de carregamento de página e a Particles.JS para adicionar um toque mágico com partículas dinâmicas ao criar o efeito de confetti. 🚀🌟

Se você é um entusiasta do desenvolvimento web ou apenas quer adicionar um toque festivo ao seu portfólio, este tutorial é para você! Acompanhe cada linha de código e veja como transformamos conceitos simples em uma experiência online envolvente.

Não se esqueça de deixar seus comentários, dúvidas e sugestões abaixo. Inscreva-se para mais conteúdo incrível de desenvolvimento web e fique ligado para futuros tutoriais.

🔗 𝗟𝗜𝗡𝗞 𝗗𝗢 𝗡𝗢𝗧𝗜𝗢𝗡
https://leovargas.notion.site/Projeto...

🎥 𝗢𝗨𝗧𝗥𝗢𝗦 𝗩𝗜𝗗𝗘𝗢𝗦

• Criando um portfólio do zero
   • CRIANDO UM SITE DE PORTFÓLIO DO ZERO  

• Projetos de frontend para o portfólio
   • Criação de sites para portfólio - Frontend  

• Configurando o ambiente de programação (linux, terminal, vscode)
   • Configurando ambiente de programação - Lin...  

▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗

  / discord  

▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦

⮞ Twitch:   / leovargasdev  
⮞ Instagram:   / leuvargas  
⮞ Twitter:   / leovargasdev  
⮞ Github: https://www.github.com/leovargasdev
⮞ Linkedin:   / leonardo-luis-de-vargas  

▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

💻 𝗦𝗘𝗧𝗨𝗣

Notebook Dell (https://amzn.to/48080ra)
Tela 1: Monitor AOC(https://amzn.to/3NAJq8L)
Suporte Ergonômico ELG (https://amzn.to/3t0i1G5)
Hub USB C p/ usar na 2ª tela (https://amzn.to/3uI2jjs)
Webcam Logitech BRIO (https://amzn.to/3RDm4BP)
Microfone Blue Yeticaster (https://amzn.to/3sW32wW)
Teclado Redragon Varuna (https://amzn.to/3T8Dkji)
Mouse Logitech G300s (https://amzn.to/3Rtnfn4)
Mouse Pad (https://amzn.to/3Rtnfn4)
Estante (https://amzn.to/46KgVfr)

▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

📑 𝗦𝗨𝗠𝗔𝗥𝗜𝗢 𝗗𝗢 𝗩𝗜́𝗗𝗘𝗢

00:00 Introdução
00:43 Estruturando o html do header
02:35 Estilizando o body
03:46 Adicionando CSS no arquivo header.css
08:50 Estruturando o html da main
10:30 Estilizando a main e a imagem do Papai Noel
12:43 Adicionando CSS no arquivo section.css
15:32 Adicionando CSS no arquivo buy.css
20:00 Criando o evento de contagem no carrinho
23:22 Adicionando efeitos sonoros no evento do contador
25:30 Criando animação do confetti com a biblioteca Particles.js
29:28 Criando animações de carregamento com a biblioteca AOS
33:20 Responsividade do site
43:00 Encerramento

#desenvolvimentoweb #html #css #javascript #SiteNatalino #tutorialWeb