Este projeto foi desenvolvido como parte do módulo "Trabalhando com Web Components no Front-end" do curso "Ganhando Produtividade com Angular".O objetivo era criar um blog dinâmico, e eu resolvi fazer sobre os filmes do Harry Potter, pois sou fã. Ele foi criado usando Angular e Web Components. O blog exibe informações sobre os filmes, como autor, título, link, foto e conteúdo. Ao passar o mouse sobre um card, uma gif do filme é exibida, dando um toque interativo.
Web Components são uma coleção de tecnologias que permitem criar elementos HTML customizados, que podem ser reutilizados em diferentes aplicações web. Os Web Components são compostos por três tecnologias principais:
- 🌗 Shadow DOM: Encapsula o CSS e o JavaScript do elemento, isolando-o do resto da página.
- HTML Templates: Permitem definir o conteúdo do elemento em um arquivo HTML separado.
- ✅ Encapsulamento: O CSS e o JavaScript dos Web Components são encapsulados, isolando-os do resto da página. Isso facilita a manutenção e a reutilização dos componentes.
- 🔄 Interoperabilidade: Os Web Components são interoperáveis com outros frameworks JavaScript, como Angular e React.
- 📊 Organização: O estilo e a funcionalidade dos elementos são isolados do resto da página, o que facilita a manutenção e a reutilização.
- 🔄 Reutilização: Os elementos personalizados podem ser reutilizados em diferentes partes da aplicação.
- Consistência: O estilo e a funcionalidade dos elementos são consistentes em toda a aplicação.
Web Components são uma ótima maneira de melhorar a organização, a reutilização e a consistência do código no desenvolvimento web. Neste projeto, conseguimos utilizar Web Components para criar um blog, que pode ser adaptado à sua maneira. ✨
