Web Components: Reusable UI Building Blocks Virtual Internship
In this virtual internship, students will learn how to leverage the Web Components standard and libraries like Lit to create encapsulated, reusable UI components for building modular web applications. They will gain hands-on experience in designing and implementing custom web components, managing state, and integrating them into larger web applications. By the end of the internship, students will have a portfolio of projects demonstrating their expertise in creating robust, scalable, and maintainable front-end architectures.
Track Overview
Tasks & Milestones
Exploring Web Components
IntermediateIn this task, you will investigate the Web Components standard, its features, and the advantages it offers for building web applications.
Creating a Reusable Button Component
IntermediateIn this task, you will create a reusable button component using the Lit library, with support for various styles and functionality.
Building a Reusable Card Component
IntermediateIn this task, you will create a reusable card component using Lit, with support for various layouts and content types.
Implementing a Stateful Counter Component
IntermediateIn this task, you will create a stateful counter component using Lit, with support for incrementing, decrementing, and resetting the counter value.
Communicating Between Web Components
IntermediateIn this task, you will create a pair of web components that communicate with each other using events and a shared state management approach.
Packaging and Distributing Web Components
IntermediateIn this task, you will package your custom web components into a distributable format and publish them to a package registry.
Integrating Web Components into a React Application
IntermediateIn this task, you will integrate your custom web components into a React-based web application, demonstrating their interoperability with existing front-end frameworks.
Prerequisites
- • Proficiency in HTML, CSS, and JavaScript
- • Experience with at least one front-end framework (React, Vue.js, or Angular)
Certificate
Certificate of Completion
Earn a certificate upon successful completion