Build lightning fast web components apps for any framework

Course Curriculum

Chapter 1: A high level introduction to webcomponents

Lecture 1: Join the webcomponents Facebook community

Lecture 2: What are webcomponents?

Lecture 3: How component systems evolved until webcomponents came along

Lecture 4: What do I get from learning webcomponents?

Lecture 5: The four parts of the webcomponents spec in a nutshell

Lecture 6: When to choose webcomponents & when to avoid them

Chapter 2: Bonus Chapter: Introduction to ES Next JavaScript features used in this course

Lecture 1: Using ES Modules for importing and exporting dependencies

Lecture 2: Arrow functions to the rescue for shorter syntax and easier this references

Chapter 3: Writing vanilla webcomponents without any libraries

Lecture 1: The components we're going to build before our production app

Lecture 2: Getting the course content from GitHub

Lecture 3: Running a basic http-server for ES modules on localhost

Lecture 4: Creating a profile card that renders dynamic data on atrribute/property change

Lecture 5: Protip: When defining custom element fails – dealing with version conflicts

Lecture 6: Styling our profile card with the new :host pseudo selector

Lecture 7: Protip: Choosing your own tag name vs letting users choose their own tag name

Lecture 8: Creating a rendering base class & extending our card component with it

Lecture 9: Protip: The difference between constructor & connectedCallback

Lecture 10: Creating a no-shadow DOM app-shell that applies shared styles and theming

Lecture 11: Fetching profiles and rendering a list of profile cards onto the page

Lecture 12: Animating cards when data changes via slot change events of a parent component

Lecture 13: Dispatching and listening to events from our cards to open a dialog component

Lecture 14: Protip: Working around issues with the hidden attribute to hide components

Lecture 15: Feeding data to our dialog and finishing the final layout

Chapter 4: Adding automated tests to our app

Lecture 1: Why it matters to create automated tests

Lecture 2: A look at the testing pyramid to understand what we will be testing

Lecture 3: Stranger Testings: When tests go into the upside down

Lecture 4: Creating a testing plan for our app & components

Lecture 5: Setting up linting for our app with the open-wc.org recommendations

Lecture 6: Using prettier to auto-format our code

Lecture 7: Discovering and adjusting linting issues via the CLI and fixing linting errors

Lecture 8: Installing karma for unit testing and creating our first test

Lecture 9: Creating the remaining unit tests

Lecture 10: Adding the chrome binary permanently to our env vars

Lecture 11: Adjusting the acceptable threshold of our code coverage report

Lecture 12: Running automation tests automatically when pushing to GitHub via CircleCI

Lecture 13: Setting up slack notifications for failing CI tests

Lecture 14: Adding badges to our repo to reflect the status of our tests