/wc-workshop

Demos and exercises for instructing on Web Components

Primary LanguageHTMLMIT LicenseMIT

Web Components Workshop

Source code to accompany a Web Components workshop.

The Project

The project for this workshop is to create a very simple app that "sings" along with the "Song that Doesn't End" from the children's show Lamb Chop's Play-Along!

Prerequisites

  • npm
  • git
  • An Internet connection
  • One or more of the following browsers:*
    • Chrome 67+ (recommended)
    • Firefox 63+
    • Safari 10.1+
    • Opera 41+

Setup

  1. Clone this project to your computer: git clone https://github.com/CITguy/wc-workshop.git
  2. Install npm dependencies: npm install
  3. Start the dev server: npm start
  4. Navigate to http://localhost:8080 in your browser.
  5. Close the dev server by pressing CTRL-C

Syllabus

  1. Lesson 1: Vanilla HTML, CSS, and JavaScript
  2. Lesson 2: HTML Templates
  3. Lesson 3: Shadow DOM
  4. Lesson 4: Autonomous Custom Elements
  5. Lesson 5: HTML Imports
  6. Lesson 6: ES Modules