This repository contains the list of the documentation used and code written following tutorials while learning about Web Components and related libraries/frameworks like Polymer and LitElement.
There's a folder in the root of this repository for each tutorial followed. Each of those folders contains a project that can be imported to an IDE of choice.
The folder web-dev-server-starter of this repository contains a npm project to be used as an optional starter template for the tutorials folllowed to learn about Web Components. To use this folder as a starter template, copy/clone it to another folder and then change directory to the new folder. Once in the new folder, edit the file package.json as needed and then run the following command:
npm install
Downloading just the folder web-dev-server-starter from GitHub is easily made with the DownGit online tool.
-
Google Developers/Web/Fundamentals/Web Components;
2.1. Custom Elements;
2.2. Shadow DOM;
-
3.1. Using custom elements;
3.2. Using shadow DOM;
This code written following the LitElement Tutorial created by Marcus Hellberg and made available by vaadin is stored in the folder lit-element-tutorial of this repository.
The text, and also the videos, of this tutorial can be found at vaadin's website.
This tutorial is composed by the following five chapters/videos:
- V01: Creating a LitElement project;
- V02: LitElement templating, properties, and events;
- V03: Using Redux in a LitElement app;
- V04: Navigation and code splitting in a LitElement project;
- V05: PWA and offline.
The code written following the tutorial Web Components Crash Course published by Traversy Media on their youTube Channel is stored in the folder transversy-media-crash-course of this repository.
The code written following the Lit Tutorial published by the Lit Project is stored in the folder lit-dev-tutorial of this repository.
The folder curso-litelement-libreria contains the code developed following the course LitElement: explorando la librería created by David Isaac Sánchez Sandoval. This folder contains a folder for each section of the course. Each of those folders contains the projects (one folder for each one) developed following the course's curriculum and their content can be imported to an IDE of choice.
Spanish is the language of this course.
The folder grid contains the code developed following the Section 2: Plantilla Grid of the course LitElement: explorando la librería and it can be imported to an IDE of choice.
The folder components contains the code developed following the Section 5 - Creación de componentes of the course LitElement: explorando la librería and it can be imported to an IDE of choice.
The SVG icons used were downloaded from Icon Finder and optimized/minimized with SVG Optimizer. The Home, Search and Trash icons were taken from the Basic UI - Jumpicon (Glyph) icon pack designed by Ayub Irawan and the Edit icon was taken from the Google Material Design Icons pack designed by Google.
The folder rick-morty contains the code developed following the Section 6 - Buscador Rick and Morty of the course LitElement: explorando la librería and it can be imported to an IDE of choice.
This project uses The Rick and Morty API to develop a web app that allows searching the characteres of the show Rick and Morty.
The folder meataweather contains the code developed following the Section 7 - Aplicación para clima of the course LitElement: explorando la librería and it can be imported to an IDE of choice.
This project intended to use the MetaWeather API to develop a web app that displays the weather predictions for a given city but it doesn't have open CORS. Therefore, this the folder api-mockup contains a set of JSON files that will be used to mockup the api.