Це відео не доступне.
Перепрошуємо.
Criando o site do Papai Noel com HTML, CSS e JavaScript
Вставка
- Опубліковано 8 сер 2024
- 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.
🔗 𝗟𝗜𝗡𝗞 𝗗𝗢 𝗡𝗢𝗧𝗜𝗢𝗡
leovargas.notion.site/Projeto...
🎥 𝗢𝗨𝗧𝗥𝗢𝗦 𝗩𝗜𝗗𝗘𝗢𝗦
• Criando um portfólio do zero
• CRIANDO UM SITE DE POR...
• Projetos de frontend para o portfólio
• Criação de sites para ...
• Configurando o ambiente de programação (linux, terminal, vscode)
• Configurando ambiente ...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
/ discord
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
⮞ Twitch: / leovargasdev
⮞ Instagram: / leuvargas
⮞ Twitter: / leovargasdev
⮞ Github: www.github.com/leovargasdev
⮞ Linkedin: / leonardo-luis-de-vargas
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💻 𝗦𝗘𝗧𝗨𝗣
Notebook Dell (amzn.to/48080ra)
Tela 1: Monitor AOC(amzn.to/3NAJq8L)
Suporte Ergonômico ELG (amzn.to/3t0i1G5)
Hub USB C p/ usar na 2ª tela (amzn.to/3uI2jjs)
Webcam Logitech BRIO (amzn.to/3RDm4BP)
Microfone Blue Yeticaster (amzn.to/3sW32wW)
Teclado Redragon Varuna (amzn.to/3T8Dkji)
Mouse Logitech G300s (amzn.to/3Rtnfn4)
Mouse Pad (amzn.to/3Rtnfn4)
Estante (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
Notion com os arquivos iniciais
leovargas.notion.site/Projeto-box-natalina-b90357a35a264277a965db34e3ab19d8
Visualizar projeto
box-natalina.leonardovargas.dev/
Muito lindo esse site, eu fiz e recomendo 🎉
Obrigado jovem!
Projeto legal da treinar.
Como ideia de projeto tem como fazer um landing page dark light ou contador para o final de ano
Daria para fazer um contador de final de ano, se eu não me engano a lib particles JS tem um efeito de fogos de artifício, ficaria legal. Obrigado Anderson!
Muito bom, mais um projeto legal, parabéns !!!! Ho Ho Ho🎅
Obrigado Diego!!! :)
Parabéns pelo conteúdo, estou aprendendo muito com você. Sua didáctica é muito boa e explicativa pra ensinar.
Muito obrigado!! 🙃
Parabéns e obrigado pelo conteúdo Leo. Aprendi bastante coisa com este vídeo.
Uma dúvida, esse método que você usou de criar várias folhas de estilos e importa para a global, tem alguma nome? É a primeira vez que vejo alguém fazendo isso. Normalmente pessoal criar tudo na mesma folha.
Olá Zenan! Não sei se tem um nome para esse método no CSS hahahha eu usei como referência os componentes do React.JS, onde o objetivo é fragmentar o código e facilitar a manutenção do código.