Build progressively enhanced pagination
Learn how to start with plain HTML and progressively enhance it—layering in interactivity using the Custom Elements API and lifecycle callbacks. In this hands-on course, you’ll implement a reusable pagination component for a static website, while learning the principles of web components along the way.
You’ll also explore accessibility and maintainability, including publishing your component to npm, embedding in a static site generator like Eleventy, and ensuring graceful degradation when JavaScript is disabled.
Web Components let you build reusable, encapsulated UI elements that work anywhere, without a framework, or dependencies. They’re part of the web platform itself, so they will never become obsolete. Learning them equips you to build for the long term, independent of shifting libraries or frameworks.
What you’ll learn
Progressive Enhancement
Ensure your pagination works with or without JavaScript, and gracefully degrades when JS is disabled.Custom Elements API
Define reusable, self-contained web component tags using native browser APIs.State & User Interacton
Handle component state and user interactions with clean, framework-free JavaScript.Static Site Integration
Embed your component into a static site generator like Eleventy for real-world projects.Testing & Deployment
Test your component thoroughly and deploy it in a production environment.Accessibility & Maintainability
Follow best practices for ARIA, semantic HTML, and structured, reusable code.
Who is this course for?
This course is for intermediate web developers. You should be comfortable with HTML, CSS, JavaScript, and want to extend your skills with web components. If you’ve built interactive UI using frameworks like React or Vue, and want to learn how to achieve the same results with native browser features, this is a good way to learn how.
Outcome
By the end of this course, you will have built an accessible, reusable pagination web component for an online store. This includes client-side rendering and server-side rendering for
Included with purchase
- Written guides with examples / code snippets
- Github repo with source code
- Publish your component to npm for easy reuse
- Access to a private Discord server for questions