Build Your Own Blog Portfolio with Web Components: The Basics

Part 1 — Custom elements, Shadow DOM, and HTML Templates

As developers, we all know that we should reuse code as much as possible. Duplicated code is one of the main causes for software bugs, and it is essential to avoid it. Web Components help us to create reusable markup structures with encapsulated functionality.

In this series of articles, we will learn the fundamentals and advanced features of Web Components by applying them to an example. We will develop step by step a portfolio to showcase medium articles of any medium user.

1. Build Your Own Blog Portfolio with Web Components: Basics
2. Build Your Own Blog Portfolio with Web Components: Attributes, Props, Lifecycle Callbacks
3. Build Your Own Blog Portfolio with Web Components: Webpack
4. Build Your Own Blog Portfolio with Web Components: Typescript
5. Build Your Own Blog Portfolio with Web Components: Lit Library

Why Web Components?

“Web Components will replace Frontend Frameworks”

Google this assumption, and you will find thousands of articles on the web discussing the future of Web…