Exercise: The Anatomy of a Web Component

This is a premium lesson.

Subscribe to get access to the entire course.

You’ve already dipped your hands in a little code throughout this course, but now you’ll build your very first web component.

If you remember, we were playing with Album Odyssey a site that catalogues the latest and greatest music releases. The album cover UI used a lot of repeated HTML and so you’ll be migrating the markup to a web component. This migration will happen over 3 exercises:

Exercise 1

You’ll set the groundwork by creating the template for your album-art element

Exercise 2

You’ll create the web components and register them to the window. You’ll then remove the repeated HTML and replace te with your shiny new album-art element.

Exercise 3

You’ll fix up the appearance