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.2 (704 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
Explore the base class elements, learn about custom elements, properties, and the list element, and prepare for a hands-on implementation of concepts from the concepts lecture.
What is Polymer2:15
Explore Polymer and its mission to build custom elements beyond native HTML, covering attributes, properties, methods, and events for web components.
Introduction to Polymer LitElement1:38
Project Preperation0:52
Polymer LitElement - Create a Custom Element Part 12:39
Build a custom element from scratch with Polymer LitElement, creating a blank JavaScript project, installing npm packages, importing web components, and wiring templates for browser compatibility.
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
Declare properties in Polymer LitElement with static get properties() returning declarations, including 'feeling'. Bind attributes to these properties and map attribute names to camelCase names to ensure data passes.
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
Learn how to build a custom element using LitElement, import Polymer and web components libraries, define properties, render templates, and register the custom element for deployment.
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
Demonstrate shadow dom structure with the shadow host and shadow tree. Show how slots render children, including named slots with attribute matching and default slot behavior in a custom element.
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
Explore the lifecycle functions of element-based classes in lit-element, including the first render hook and property-change handling, and learn to dispatch custom events with bubbles and composed.
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
Install npm concurrently and browser-sync, and configure npm start to run scripts concurrently, watch project files, and auto refresh the browser.
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
Learn how to persist to-do items with local storage in a Polymer LitElement app, generating unique ids and retrieving data after page refresh.
Add to do list to localstorage6:20
Learn to implement a to-do list with local storage by reading and parsing stored items, initializing the list, and pushing new entries while validating empty input and updating storage.
List To Do items7:53
Store and display to-do lists in local storage by creating a list items component that renders each item with a repeat and passes the list as a prop.
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
Dispatch a new custom event to render the updated to do list when a new item is added, sending the item and list in the event detail with bubble true.
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 by removing the existing styling in app.js. Then continue implementing the list items component using Polymer LitElement in this course.
Style our To Do Web App - list-items.js2:37
Style our To Do Web App - todo-items.js2:52
Style the to-do web app by adding a list item class, input controls, and a remove button, with strike-through for completed items in the todo-items.js file using Polymer LitElement.
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
Explore custom element reactions and lifecycle callbacks, including upgraded, connected, disconnected, and attribute changes, and learn how the constructor must call super and initialize templates and properties.
How to use iron-ajax polymer element with coinbase api to get data6:01
Fetch cryptocurrency price data from Coinbase using the iron-ajax element in Polymer LitElement, handling current prices and price history data for charts.
Using iron-ajax to get crypto data from coinbase12:19
Learn to fetch crypto data from Coinbase using iron-ajax in Polymer LitElement. Define currency codes, trigger requests, and parse responses to display Bitcoin and other currencies.
Using iron-ajax to get multiple crypto data from coinbase5:29
Learn to fetch multiple crypto data from Coinbase using iron-ajax in Polymer lit-element, issuing three requests and handling three responses, while tracking changes with Git.
Theory Lecture: Data Bindings and Observable Changes9:21
Explore data bindings and observable changes in Polymer LitElement, linking host properties to template nodes, and understand one-way and two-way bindings, property effects, observers, and compute properties.
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
Fetch historic data from the Coinbase API for a currency and load it into the Polymer LitElement. Differentiate between spot data and historic data to prepare for visualization.
Using Chart.js and Moment.js in Polymer 22:48
Learn to build a line chart in polymer 2 using chart.js and moment.js, pulling historic cryptocurrency data, formatting dates, and customizing the chart with provided options.
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
Install moment.js, integrate it into a Polymer 2 custom element, and implement a helper to format dates, handle clicks, and render readable time strings.
Theory Lecture: Event Listeners - on-click in Polymer 21:11
Implement paper-button and on-click in Polymer 27:19
Learn to implement a paper-button and on-click in Polymer 2, including installing and importing the button and binding data in a LitElement project. Visualize currency history data with a graphic.
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
Install paper style and flex layouts to polish the polymer 2 custom element project, then apply the Roboto font to complete the latest version.

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: