Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn and Build using Polymer LitElement (beyond Polymer 3)

Name: Learn and Build using Polymer LitElement (beyond Polymer 3)
Rating: 4.1 (698 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

English [Auto],

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
Learn the fundamentals of Polymer and build a simple custom element using LitElement (beyond Polymer 3), then explore shadow dom, event handling, and setting up your development environment.
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
Learn to create a polymer lit-element custom element by importing libraries, defining a class that extends LitElement, and registering a dash-containing name, with template rendering inside a shadow root.
Polymer LitElement - Custom Element Properties3:41
Custom Elements Concepts5:54
Define custom elements with lit element by creating a class that extends the element base, declaring observed properties, and rendering templates that react to property changes.
Polymer LitElement - Use a Custom Element build by Polymer - checkbox3:23
Summary3:10
What's next1:06
Explore upcoming lectures on event listeners and custom css, and learn to build a web application from scratch using polymer lit-element.

Introduction to Section0:54
Explore slots and their use in custom elements, learn styling essentials, and study polymer lifecycle functions and events through hands-on practice.
Shadow DOM Concept5:29
Shadow DOM hands on part 15:53
Shadow DOM hands on part 25:50
Explore shadow DOM hands on part 2 by styling a custom element, testing isolated styles, and examining host versus shadow root, color inheritance, and slot behavior.
Event Handling with Polymer LitElement3:02
Event Handling - Hands on Lecture5:41
Summary0:54
Explore shut down concept, slots, styling, events, and listeners, then practice applying these ideas. Prepare the development environment, installing bridges and prerequisites to build a web app with Polymer LitElement.

Introduction to Section3:42
Initialize project using Polymer CLI4:21
Initialize a Polymer CLI project for a to-do app using lit-element, create and clean boilerplate, install lit-element, configure index.html, and prepare the project for future steps.
Install NPM packages - concurrently and browser-sync4:30
Hello To Do App4:55
Add To Do items3:37
Event handling - on-keyup3:55
Create a controlled input field in a polymer lit-element component and handle on-keyup. Check the key code and call the item function to create the next lectures.
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
Learn to create a custom to do item component in Polymer LitElement, wire it into a to do items list, pass each item as an object, and render the list.
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
Style our to do web app footer in index.html within a polymer LitElement project, exploring footer styling and integration for a polished user interface.
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
Learn how to parse a price response from Coinbase, map each currency to its data index, and update a currencies array with live price data using observable changes.
Theory: Template Repeater - dom-repeat1:30
Using template dom-repeat in our project2:31
Using paper-spinner as loader6:12
Learn to build a responsive loader in Polymer LitElement by using the paper-spinner, with two-way binding to a loading property and data fetched from Quimby's API.
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
Install chart.js and import it into a polymer 2 custom element project. Build a dynamic line chart by wiring data labels and price datasets, then render and refine the chart.
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
Finish the polymer 2 custom element project by integrating the css styling, pushing the completed element, and preparing it for integration into your own element.
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: