Learn and Build using Polymer LitElement (beyond Polymer 3)

Name: Learn and Build using Polymer LitElement (beyond Polymer 3)
Rating: 4.1 (694 reviews)

Learn how to create Custom Elements and Web Applications with Polymer LitElement. LitElement is successor to Polymer 3

Created byArman Eker

Last updated 10/2018

English

What you'll learn

Learn fundamental Polymer LitElement
Create Custom Elements and save time and energy with easily reusable web components
Understand and use the Polymer Element Catalog
Register a Custom Element
Shadow DOM concept
Compose with local DOM
Use data binding
Use properties
Event handling
Build a To Do Web Application
Use Polymer CLI

Course content

12 sections • 116 lectures • 8h 45m total length

Course Intro3:07
Section Introduction0:41
What is Polymer2:15
Introduction to Polymer LitElement1:38
Project Preperation0:52
Polymer LitElement - Create a Custom Element Part 12:39
Polymer LitElement - Create a Custom Element Part 25:00
Polymer LitElement - Custom Element Properties3:41
Custom Elements Concepts5:54
Polymer LitElement - Use a Custom Element build by Polymer - checkbox3:23
Summary3:10
What's next1:06

Introduction to Section3:42
Initialize project using Polymer CLI4:21
Install NPM packages - concurrently and browser-sync4:30
Hello To Do App4:55
Add To Do items3:37
Event handling - on-keyup3:55
Integrating localstorage to store our to do items6:20
Add to do list to localstorage6:20
List To Do items7:53
List single To Do items5:39
Trigger Custom Event to render new to do item4:04
Trigger Custom Event to remove a to do item12:00
Change to do item state (done <-> not done) Part 15:48
Change to do item state (done <-> not done) Part 25:20
More on Immutable objects0:02
Style our To Do Web App - index.html2:39
Style our To Do Web App - app.js0:18
Style our To Do Web App - list-items.js2:37
Style our To Do Web App - todo-items.js2:52
Style our To Do Web App - add-item.js3:52
Style our To Do Web App Footer - index.html0:58
Summary4:37

Use a Polymer Element: Intro1:42
In this lecture we will have a look at what a custom element is and why and how it is used.
Chrome Dev Editor (CDE)5:24
In this lecture we will have a look at the Google Chrome Dev Editor which we will use to build our first Custom Elements and also use Polymer Elements.
Use a Polymer Element: Google Map4:27
In this lecture we learn about the Google Map Polymer Element.
Use a Polymer Element: Implement Google Map5:14
In this lecture we will learn how to implement the Google Map Polymer Element.
Use a Polymer Element: Implement Google Map Attributes3:04
In this lecture we will dive deeper into the Google Map Polymer Element and look at Attributes.
Use a Polymer Element: Implement Google Map Bundle Elements5:32
In this lecture we will dive even deeper into the Google Polymer Element and have a look at Bundles.
Polymer Element Catalog3:28
In this lecture we will have a look at the Polymer Element Catalog and learn about following:

Iron Elements

Paper Elements

Google Web Components

Gold Elements

Neon Elements

Platinum Elements

Molecules
[QUIZ] Measure your knowledge with this section Quiz on Polymer

Register a custom element: Concept3:44
In this lecture we will have a look at the concept of registering a custom element.
Register an element: Coding5:07
In this lecture we will implement the concept learned about registering a custom element.
Add local DOM: Concept2:35
In this lecture we will have a look at the concept of adding a local DOM to our custom element.
Add local DOM: Coding3:05
In this lecture we will implement the concept learned about adding a local DOM.
Compose with local DOM: Concept1:09
In this lecture we will have a look at the concept of composing with local DOM.
Compose with local DOM: Coding4:26
In this lecture we will implement the concept learned about composing with local DOM.
Use data binding: Concept2:02
In this lecture we will have a look at the concept of using data binding in our custom element.
Use data binding: Coding2:30
In this lecture we will implement the concept learned about using data binding.
Declare a property: Concept2:09
In this lecture we will have a look at the concept of declaring a property inside our custom element.
Declare a property: Coding3:46
In this lecture we will implement the concept learned about declaring a property.
Bind to a property: Concept1:03
In this lecture we will have a look at the concept of binding to a property.
Bind to a property: Coding5:56
In this lecture we will implement the concept learned about binding to a property.
Create a Custom Element with Polymer: Summary0:55
In this lecture we will summarize what we have learned about custom elements build with Polymer Library.
[QUIZ] Measure your knowledge with this section Quiz on Polymer

Polymer 2 - Introducing New Content3:02
Introducing Polymer 2.0! In the following weeks and months I will be added new Polymer 2.0 content. We will start to check out what Polymer 2.0 is and from there start building an element and afterwards a web app! So stay tuned.
Polymer 2 - What's New?9:54
In this lecture we will learn what's new in Polymer 2.0.
Polymer 2 - Polymer.Element Library and Elements7:54
In this lecture we will learn the Polymer.Library and our new Elements platform; webcomponents.org.
Polymer 2 - Tooling, PRPL pattern and App Toolbox7:16
In this lecture we will learn about Tools, the PRPL pattern and the App Toolbox
Polymer CLI (command-line interface) - The Swiss Army Knife8:06
In this lecture we will learn about the new and updated Polymer CLI (command-line interface)

Cryptocurrency Price Dashboard - Our Custom Element in Polymer 21:36
In this lecture we will have a look at our Custom Element which we are going to build in Polymer 2. Our custom element will be a Cryptocurrency Price Dashboard.
Visual Studio Code - Our Code Editor2:48
In this lecture we will have a look at what code editor we are going to use.
Prepare Polymer CLI and Polymer IDE5:45
In this lecture we will learn about Polymer CLI and Polymer IDE and install both.
Fundamentals of a Custom Element in Polymer 2 - Theory Lecture11:02
In this lecture we will have a theory session and will learn more about Polymer 2 element details.
Create an Polymer 2 Element Template using Polymer CLI12:08
In this lecture we will create our first Polymer 2 element using Polymer CLI and Polymer 2 Element Template.
Analyzing details of a Polymer 2 Element Template5:09
In this lecture we will check out how the Polymer 2 Element Template is build.
Roadmap - Building a Cryptocurrency Market Dashboard Custom Element in Polymer 21:17
In this lecture we will check out our Roadmap to build a Cryptocurrency Market Dashboard.
Install Polymer 2 & Create a Basic Custom Element from scratch8:20
In this lecture we create a new project, install Polymer 2 and create a basic Custom Element.
Creating and using a Github repository for our Polymer 2 project5:11
In this lecture we will use Github.
Theory Lecture: Using ready() - Custom Element Lifecycles in Polymer 22:24
How to use iron-ajax polymer element with coinbase api to get data6:01
Using iron-ajax to get crypto data from coinbase12:19
Using iron-ajax to get multiple crypto data from coinbase5:29
Theory Lecture: Data Bindings and Observable Changes9:21
Using Observable Changes to set currencies array with price data8:16
Theory: Template Repeater - dom-repeat1:30
Using template dom-repeat in our project2:31
Using paper-spinner as loader6:12
Get Historic Data from coinbase api for crypto5:53
Using Chart.js and Moment.js in Polymer 22:48
Implement Chart.js into our Polymer 2 custom element project8:34
Implement Moment.js into our Polymer 2 custom element project4:16
Theory Lecture: Event Listeners - on-click in Polymer 21:11
Implement paper-button and on-click in Polymer 27:19
Finishing our Polymer 2 custom element project3:04
Some last makeup for our Polymer 2 custom element project2:49

Requirements

Basic JavaScript, HTML/CSS and EcmaScript 6 Knowledge
A Web Browser

Description

UPDATE September 2018 - Course has been updated to support 'Polymer LitElement', which is the latest version of Polymer. Enjoy building Custom Web Components and a beautiful To Do Web Application using Polymer LitElement!

---

There are some Polymer courses on the web now. Which one should you take? If you're looking to quickly grasp the core concepts of Polymer with hands-on examples on the latest Polymer version and want to learn from a developer/instructor with over 10 years of experience who has also launched and advised multiple tech startups then this is the course for you!

The Polymer library is designed to make it easier and faster for developers to create great, reusable web components for the modern web. By the time you're done with this course you'll understand how Polymer can be used to build web applications. This includes learning the fundamentals of Polymer, how to use Polymer Elements from the Polymer Element Catalog, and how to create your own custom elements. This is a hands-on course that you can follow along with and learn by doing.

We will build a To Do Web Application from scratch using Polymer LitElement. We are going to use custom components, Polymer Elements, Polymer CLI, Visual Studio Code and may many more to create the perfect elements.

The new, leaner Polymer LitElement core base class makes it easier than ever to make fast, beautiful, and interoperable web components. If you haven't used Polymer before, it's time to try it out. If you haven't tried it recently, time to take another look.

The Polymer course is broken down into following sections:

Learn Polymer, Polymer LitElement and build a custom component
Dive deeper into Shadow DOM and Event Handling concepts
Prepare Development Environment
Build a Beautiful To Do Web Application from scratch using Polymer LitElement

By the end of the course you'll have walked through of all of the key components in Polymer, used a Polymer Element and built a working Custom Element with Polymer. If you're looking to boost your Polymer knowledge look no further than this course. It's a great technology to know and add to your resume!

Who this course is for:

Anyone interested to learn in building beautiful Web Applications
Anyone interested to learn Polymer LitElement
Anyone interested to learn more about Web Components

Learn and Build using Polymer LitElement (beyond Polymer 3)

What you'll learn

Explore related topics

Course content

What is Polymer and Polymer LitElement12 lectures • 33min

Polymer LitElement Features7 lectures • 28min

Set up Development Environment for Polymer LitElement1 lecture • 5min

Build a To Do Web App with Polymer 3 and LitElement22 lectures • 1hr 36min

What is Polymer? (depreciated)3 lectures • 10min

Use a Polymer Element from the Polymer Catalog (depreciated)7 lectures • 29min

Create a Custom Element with the Polymer Library (depreciated)13 lectures • 38min

Learn and Build using Polymer 2 (depreciated)5 lectures • 36min

Build a Custom Element using Polymer 2 - Cryptocurrency Dashboard (depreciated)26 lectures • 2hr 23min

Preparing our Professional Development Environment for Polymer 1 (depreciated)2 lectures • 10min

Requirements

Description

Who this course is for: