Polymer 3: Learn Polymer 3 in 2020

Install git on Windows, download the installer, configure options, and use git bash to access a command line for navigating directories and running commands.

Download and install Node.js using the Windows or macOS installer, accept the license terms, choose the install folder, and finish the setup.

Verify node and npm versions in git bash, then paste the install command to install polymer. Confirm success by running polymer --version to view the version numbers.

Install Visual Studio Code on Windows, Mac OS, or Linux, then install the Polymer ID extension to enable code suggestions and completion for Polymer projects.

Create your first Polymer project by initializing a directory, selecting a template, naming the project, installing dependencies, and running the server to view the demo in your browser.

Learn the polymer 3 project structure, navigate the generated folders (node_modules, tests), and identify key files like polymer.json and package.json, while locating the main module and importing polymer components.

Learn to build a polymer element with a template and bind a name property to display greetings such as hello world, hello Luke, and hello Eva.

Create an article tile as a polymer element with a style, an h2 tag, a paragraph, and a paper button, and demonstrate data binding and a Google-style animation.

Transform your polymer app into an article by applying an article template and defining title and content properties as strings. Learn how to update the index to render two articles.

Learn to add a paper button to a polymer project by importing the paper button component, installing it via npm, and binding a string property to its content.

Learn to build a dynamic to-do list with checkboxes to mark tasks as completed and move items between completed and to-do across lectures.

Create a polymer 3 project from bash by making a directory, initializing the polymer library, selecting a template, installing dependencies, and testing the url in your browser.

Create a to-do list template by importing Polymer paper components, adding a checkbox, input, and button, and installing the necessary packages.

Create a Polymer 3 to-do list template with a task item, including a checkbox, input, and add button, and bind a completed property to show completed tasks.

Learn how to implement dom-repeat in Polymer 3 to efficiently render multiple tasks from an items array, using templates, two-way binding, and dynamic properties.

Create a functional to-do list in Polymer 3 by adding tasks to an array of objects with done and text properties, using two-way binding and an add task button.

Build a dynamic to-do list in Polymer 3 by filtering tasks with a function that uses the done property, with two-way data binding and observe-driven updates for completed items.

Learn to create a simple image slider in Polymer 3, using a custom image slider element and a slider item, with image changes and no animation.

Create a Polymer 3 project by initializing a directory, choosing a template, naming the app slider, and defining the main element slider-item, then run Polymer serve to view the app.

Copy and rename the slider item to create an image slider, then link the image slider script and ensure two hello slider item headings display on reload.

Import images in polymer 3, define an image slider with a dedicated slider item and an array of images, and use an index to display one image at a time.

Learn how to add functionality to an image slider in Polymer 3 by using a run method and setTimeout to cycle images every two seconds.

Set up slider-item with one way data binding for path, style images with max width 800, and implement show and hide methods to display only the first item.

Define slider items with image paths and duplicate them to cycle through four slides. Use run to hide and show images, creating a loop, and consider adding animation for transitions.