Learn and Build using Polymer LitElement (beyond Polymer 3)

Course Curriculum

Chapter 1: What is Polymer and Polymer LitElement

Lecture 1: Course Intro

Lecture 2: Section Introduction

Lecture 3: What is Polymer

Lecture 4: Introduction to Polymer LitElement

Lecture 5: Project Preperation

Lecture 6: Polymer LitElement – Create a Custom Element Part 1

Lecture 7: Polymer LitElement – Create a Custom Element Part 2

Lecture 8: Polymer LitElement – Custom Element Properties

Lecture 9: Custom Elements Concepts

Lecture 10: Polymer LitElement – Use a Custom Element build by Polymer – checkbox

Lecture 11: Summary

Lecture 12: What's next

Chapter 2: Polymer LitElement Features

Lecture 1: Introduction to Section

Lecture 2: Shadow DOM Concept

Lecture 3: Shadow DOM hands on part 1

Lecture 4: Shadow DOM hands on part 2

Lecture 5: Event Handling with Polymer LitElement

Lecture 6: Event Handling – Hands on Lecture

Lecture 7: Summary

Chapter 3: Set up Development Environment for Polymer LitElement

Lecture 1: Set up Development Environment for Polymer LitElement

Chapter 4: Build a To Do Web App with Polymer 3 and LitElement

Lecture 1: Introduction to Section

Lecture 2: Initialize project using Polymer CLI

Lecture 3: Install NPM packages – concurrently and browser-sync

Lecture 4: Hello To Do App

Lecture 5: Add To Do items

Lecture 6: Event handling – on-keyup

Lecture 7: Integrating localstorage to store our to do items

Lecture 8: Add to do list to localstorage

Lecture 9: List To Do items

Lecture 10: List single To Do items

Lecture 11: Trigger Custom Event to render new to do item

Lecture 12: Trigger Custom Event to remove a to do item

Lecture 13: Change to do item state (done <-> not done) Part 1

Lecture 14: Change to do item state (done <-> not done) Part 2

Lecture 15: More on Immutable objects

Lecture 16: Style our To Do Web App – index.html

Lecture 17: Style our To Do Web App – app.js

Lecture 18: Style our To Do Web App – list-items.js

Lecture 19: Style our To Do Web App – todo-items.js

Lecture 20: Style our To Do Web App – add-item.js

Lecture 21: Style our To Do Web App Footer – index.html

Lecture 22: Summary

Chapter 5: What is Polymer? (depreciated)

Lecture 1: How are we going to learn Polymer

Lecture 2: What is Polymer?

Lecture 3: What is Polymer? Part 2

Chapter 6: Use a Polymer Element from the Polymer Catalog (depreciated)

Lecture 1: Use a Polymer Element: Intro

Lecture 2: Chrome Dev Editor (CDE)

Lecture 3: Use a Polymer Element: Google Map

Lecture 4: Use a Polymer Element: Implement Google Map

Lecture 5: Use a Polymer Element: Implement Google Map Attributes

Lecture 6: Use a Polymer Element: Implement Google Map Bundle Elements

Lecture 7: Polymer Element Catalog

Chapter 7: Create a Custom Element with the Polymer Library (depreciated)

Lecture 1: Register a custom element: Concept

Lecture 2: Register an element: Coding

Lecture 3: Add local DOM: Concept

Lecture 4: Add local DOM: Coding

Lecture 5: Compose with local DOM: Concept

Lecture 6: Compose with local DOM: Coding

Lecture 7: Use data binding: Concept

Lecture 8: Use data binding: Coding

Lecture 9: Declare a property: Concept

Lecture 10: Declare a property: Coding

Lecture 11: Bind to a property: Concept

Lecture 12: Bind to a property: Coding

Lecture 13: Create a Custom Element with Polymer: Summary

Chapter 8: Learn and Build using Polymer 2 (depreciated)

Lecture 1: Polymer 2 – Introducing New Content

Lecture 2: Polymer 2 – What's New?

Lecture 3: Polymer 2 – Polymer.Element Library and Elements

Lecture 4: Polymer 2 – Tooling, PRPL pattern and App Toolbox

Lecture 5: Polymer CLI (command-line interface) – The Swiss Army Knife

Chapter 9: Build a Custom Element using Polymer 2 – Cryptocurrency Dashboard (depreciated)

Lecture 1: Cryptocurrency Price Dashboard – Our Custom Element in Polymer 2

Lecture 2: Visual Studio Code – Our Code Editor

Lecture 3: Prepare Polymer CLI and Polymer IDE

Lecture 4: Fundamentals of a Custom Element in Polymer 2 – Theory Lecture

Lecture 5: Create an Polymer 2 Element Template using Polymer CLI

Lecture 6: Analyzing details of a Polymer 2 Element Template

Lecture 7: Roadmap – Building a Cryptocurrency Market Dashboard Custom Element in Polymer 2

Lecture 8: Install Polymer 2 & Create a Basic Custom Element from scratch

Lecture 9: Creating and using a Github repository for our Polymer 2 project

Lecture 10: Theory Lecture: Using ready() – Custom Element Lifecycles in Polymer 2

Lecture 11: How to use iron-ajax polymer element with coinbase api to get data

Lecture 12: Using iron-ajax to get crypto data from coinbase

Lecture 13: Using iron-ajax to get multiple crypto data from coinbase

Lecture 14: Theory Lecture: Data Bindings and Observable Changes

Lecture 15: Using Observable Changes to set currencies array with price data

Lecture 16: Theory: Template Repeater – dom-repeat

Lecture 17: Using template dom-repeat in our project

Lecture 18: Using paper-spinner as loader