{"id":13402366,"url":"https://github.com/andreasbm/web-skills","last_synced_at":"2025-05-14T04:04:36.196Z","repository":{"id":37750459,"uuid":"211665033","full_name":"andreasbm/web-skills","owner":"andreasbm","description":"A visual overview of useful skills to learn as a web developer","archived":false,"fork":false,"pushed_at":"2024-04-19T03:22:28.000Z","size":122455,"stargazers_count":7154,"open_issues_count":54,"forks_count":676,"subscribers_count":152,"default_branch":"master","last_synced_at":"2025-05-02T15:38:02.940Z","etag":null,"topics":["accessibility","algorithms","architecture","backend","build-tools","css","design","frameworks","html","javascript","pwa","testing","web-components"],"latest_commit_sha":null,"homepage":"https://andreasbm.github.io/web-skills/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-29T13:11:44.000Z","updated_at":"2025-05-02T04:23:03.000Z","dependencies_parsed_at":"2024-01-10T23:02:07.694Z","dependency_job_id":"e43a9837-c9f1-4936-bd13-4d8a4caea55a","html_url":"https://github.com/andreasbm/web-skills","commit_stats":{"total_commits":166,"total_committers":4,"mean_commits":41.5,"dds":0.02409638554216864,"last_synced_commit":"51e7900697911bac3a7832aa22066fe3c215b40a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/web-skills/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254067284,"owners_count":22009131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","algorithms","architecture","backend","build-tools","css","design","frameworks","html","javascript","pwa","testing","web-components"],"created_at":"2024-07-30T19:01:15.116Z","updated_at":"2025-05-14T04:04:36.126Z","avatar_url":"https://github.com/andreasbm.png","language":"JavaScript","readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003eWeb Skills\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\tWeb Skills is a visual overview of useful skills to learn as a web developer. Go to \u003ca href=\"https://andreasbm.github.io/web-skills\" target=\"_blank\" aria-label=\"Link to Web Skills\"\u003ehttps://andreasbm.github.io/web-skills\u003c/a\u003e to check out the visual overview or scroll through this readme to get the overview \u003ca href=\"#-fundamentals\" target=\"_blank\" aria-label=\"Link to list of skills\"\u003eas a list\u003c/a\u003e. If you like the project you are very welcome to \u003ca href=\"https://github.com/andreasbm/web-skills/stargazers\" aria-label=\"Become stargazer link\"\u003ebecome a stargazer 🤩\u003c/a\u003e\n\u003c/p\u003e \n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"http://andreasbm.github.io/web-skills\" target=\"_blank\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-skills/master/demo.gif\" alt=\"Web Skills Demo\" width=\"800\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\u003cdetails\u003e\n\u003csummary\u003e📖 Table of Contents\u003c/summary\u003e\n\u003cbr /\u003e\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\n\n* [➤ FAQ](#-faq)\r\n\t* [What is Web Skills?](#what-is-web-skills)\r\n\t* [How did you choose the skills?](#how-did-you-choose-the-skills)\r\n\t* [How can I support you?](#how-can-i-support-you)\r\n\t* [How can I get involved?](#how-can-i-get-involved)\r\n\t* [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)\r\n\t* [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)\r\n\t* [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)\r\n\t* [What does the \"experimental\" banner mean?](#what-does-the-experimental-banner-mean)\r\n\t* [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)\r\n* [➤ Fundamentals](#-fundamentals)\r\n\t* [HTML](#html)\r\n\t* [Syntax](#syntax)\r\n\t\t* [Basic Tags](#basic-tags)\r\n\t* [Forms](#forms)\r\n\t* [SEO](#seo)\r\n\t\t* [Discoverable Content](#discoverable-content)\r\n\t* [Svg](#svg)\r\n\t* [Best Practices](#best-practices)\r\n\t* [CSS](#css)\r\n\t* [Syntax](#syntax-1)\r\n\t* [Selectors](#selectors)\r\n\t\t* [Specificity](#specificity)\r\n\t\t* [Pseudo Selectors](#pseudo-selectors)\r\n\t* [Box Model](#box-model)\r\n\t\t* [Margin Collapsing](#margin-collapsing)\r\n\t* [Colors](#colors)\r\n\t* [Calc](#calc)\r\n\t* [Layout](#layout)\r\n\t\t* [Flex](#flex)\r\n\t\t* [Grid](#grid)\r\n\t* [Transforms](#transforms)\r\n\t\t* [Animations](#animations)\r\n\t* [Responsive Design](#responsive-design)\r\n\t\t* [Media Queries](#media-queries)\r\n\t\t* [Relative Units](#relative-units)\r\n\t\t* [Images](#images)\r\n\t* [CSS Variables](#css-variables)\r\n\t* [Best Practices](#best-practices-1)\r\n\t* [Javascript](#javascript)\r\n\t* [Syntax](#syntax-2)\r\n\t\t* [Spread](#spread)\r\n\t\t* [Destructuring](#destructuring)\r\n\t* [DOM](#dom)\r\n\t\t* [DOM Manipulation](#dom-manipulation)\r\n\t* [Events](#events)\r\n\t* [Objects](#objects)\r\n\t\t* [Prototype](#prototype)\r\n\t\t\t* [Classes](#classes)\r\n\t* [Regex](#regex)\r\n\t* [Template Literals](#template-literals)\r\n\t* [Promises](#promises)\r\n\t\t* [Callbacks](#callbacks)\r\n\t\t* [Async/await](#asyncawait)\r\n\t\t* [Fetch](#fetch)\r\n\t* [Web Animations](#web-animations)\r\n\t* [Modules](#modules)\r\n\t* [Intl](#intl)\r\n\t* [Canvas](#canvas)\r\n\t* [Documentation](#documentation)\r\n\t* [Best Practices](#best-practices-2)\r\n\t* [The Browser](#the-browser)\r\n\t* [Standardization](#standardization)\r\n\t\t* [W3C](#w3c)\r\n\t\t* [TC39](#tc39)\r\n\t\t* [WHATWG](#whatwg)\r\n\t\t* [Specifications](#specifications)\r\n\t* [Browser Engines](#browser-engines)\r\n\t\t* [Webkit](#webkit)\r\n\t\t* [Blink](#blink)\r\n\t\t* [Gecko](#gecko)\r\n\t* [HTTP](#http)\r\n\t* [The Internet](#the-internet)\r\n\t* [Polyfills](#polyfills)\r\n\t* [Debugging](#debugging)\r\n\t\t* [Developer console](#developer-console)\r\n* [➤ Accessibility](#-accessibility)\r\n\t* [The why](#the-why)\r\n\t* [Screen Readers](#screen-readers)\r\n\t* [Accessibility tree](#accessibility-tree)\r\n\t\t* [ARIA](#aria)\r\n\t\t* [Accessible HTML](#accessible-html)\r\n\t\t\t* [Alt text](#alt-text)\r\n\t\t* [Accessible CSS](#accessible-css)\r\n\t* [Accessible forms](#accessible-forms)\r\n\t* [UI States](#ui-states)\r\n\t* [Keyboard Accessibility](#keyboard-accessibility)\r\n\t\t* [Focus](#focus)\r\n\t* [Accessible Colors](#accessible-colors)\r\n\t* [Laws \u0026 Policies](#laws--policies)\r\n\t\t* [Audits](#audits)\r\n* [➤ Web Components](#-web-components)\r\n\t* [Custom Elements](#custom-elements)\r\n\t* [HTML Templates](#html-templates)\r\n\t* [Shadow DOM](#shadow-dom)\r\n\t\t* [Shadow Parts](#shadow-parts)\r\n\t\t* [Slots](#slots)\r\n\t* [Best practices](#best-practices)\r\n\t* [Constructible Stylesheets](#constructible-stylesheets)\r\n\t* [Form Participation](#form-participation)\r\n* [➤ Progressive Webapps](#-progressive-webapps)\r\n\t* [API's](#apis)\r\n\t* [Storage](#storage)\r\n\t* [Routing](#routing)\r\n\t\t* [History API](#history-api)\r\n\t* [Service Workers](#service-workers)\r\n\t\t* [Offline first](#offline-first)\r\n\t\t* [Push notifications](#push-notifications)\r\n\t* [Web App manifest](#web-app-manifest)\r\n\t* [Add to homescreen](#add-to-homescreen)\r\n\t* [Pointer Events](#pointer-events)\r\n\t* [Loading Performance](#loading-performance)\r\n\t* [App shell](#app-shell)\r\n\t* [Render-Blocking Resources](#render-blocking-resources)\r\n\t* [Compression](#compression)\r\n\t* [Performance metrics](#performance-metrics)\r\n\t\t* [Largest Contentful Paint](#largest-contentful-paint)\r\n\t\t* [Total Blocking Time](#total-blocking-time)\r\n\t\t* [Time to Interactive](#time-to-interactive)\r\n\t* [Lazy Loading](#lazy-loading)\r\n\t\t* [Dynamic Import](#dynamic-import)\r\n\t\t* [Offscreen images](#offscreen-images)\r\n\t* [Critical Request Chains](#critical-request-chains)\r\n\t* [Tree shaking](#tree-shaking)\r\n\t* [Codesplitting](#codesplitting)\r\n\t* [PRPL Pattern](#prpl-pattern)\r\n\t* [Resource Prioritization](#resource-prioritization)\r\n\t* [Caching](#caching)\r\n\t* [Rendering Performance](#rendering-performance)\r\n\t* [Rendering](#rendering)\r\n\t* [Event loop](#event-loop)\r\n\t\t* [Microtask](#microtask)\r\n\t\t* [Stack](#stack)\r\n\t\t* [Heap](#heap)\r\n\t* [RAIL Model](#rail-model)\r\n\t\t* [requestAnimationFrame](#requestanimationframe)\r\n\t\t* [requestIdleCallback](#requestidlecallback)\r\n\t* [Critical Rendering Path](#critical-rendering-path)\r\n\t* [The Pixel Pipeline](#the-pixel-pipeline)\r\n\t\t* [Style calculations](#style-calculations)\r\n\t\t* [Transforms](#transforms-1)\r\n\t\t* [Paint areas](#paint-areas)\r\n\t\t* [Layout Trashing](#layout-trashing)\r\n\t\t* [Layers](#layers)\r\n\t\t* [Debounce](#debounce)\r\n\t* [CSS Containment](#css-containment)\r\n\t* [Web Workers](#web-workers)\r\n\t* [Security](#security)\r\n\t* [HTTPS](#https)\r\n\t* [Browser Sandbox](#browser-sandbox)\r\n\t* [OWASP](#owasp)\r\n\t\t* [Cross-Site Scripting](#cross-site-scripting)\r\n\t\t* [Clickjacking](#clickjacking)\r\n\t* [Content Security Policy](#content-security-policy)\r\n\t* [Audits](#audits-1)\r\n\t* [Performance budgets](#performance-budgets)\r\n\t* [Lighthouse](#lighthouse)\r\n\t* [Chrome DevTools](#chrome-devtools)\r\n* [➤ Build tools](#-build-tools)\r\n\t* [Package Managers](#package-managers)\r\n\t\t* [NPM](#npm)\r\n\t\t* [Yarn](#yarn)\r\n\t* [Module Bundlers](#module-bundlers)\r\n\t\t* [Rollup](#rollup)\r\n\t\t* [Webpack](#webpack)\r\n\t\t* [Parcel](#parcel)\r\n\t\t* [Snowpack](#snowpack)\r\n\t* [Linters and formatters](#linters-and-formatters)\r\n\t\t* [Prettier](#prettier)\r\n\t\t* [ESLint](#eslint)\r\n\t* [Task Runners](#task-runners)\r\n\t\t* [NPM Scripts](#npm-scripts)\r\n\t* [Transpilers](#transpilers)\r\n\t\t* [Babel](#babel)\r\n\t\t* [Typescript](#typescript)\r\n\t* [CSS Pre-processors](#css-pre-processors)\r\n\t\t* [SASS](#sass)\r\n\t\t* [PostCSS](#postcss)\r\n\t* [Node.js](#nodejs)\r\n* [➤ Frameworks \u0026 Libraries](#-frameworks--libraries)\r\n\t* [lit-element](#lit-element)\r\n\t* [Vue](#vue)\r\n\t* [React](#react)\r\n\t* [Angular](#angular)\r\n\t* [Svelte](#svelte)\r\n\t* [Stencil](#stencil)\r\n* [➤ Testing](#-testing)\r\n\t* [Testing Methodologies](#testing-methodologies)\r\n\t\t* [Unit Testing](#unit-testing)\r\n\t\t* [Integration Testing](#integration-testing)\r\n\t\t* [System Testing](#system-testing)\r\n\t\t* [Acceptance Testing](#acceptance-testing)\r\n\t\t* [Smoke Testing](#smoke-testing)\r\n\t\t* [Performance Testing](#performance-testing)\r\n\t\t* [Usability Testing](#usability-testing)\r\n\t\t* [White Box Testing](#white-box-testing)\r\n\t\t* [Black Box Testing](#black-box-testing)\r\n\t\t* [Automated Testing](#automated-testing)\r\n\t\t* [Manual Testing](#manual-testing)\r\n\t* [Continuous integration](#continuous-integration)\r\n\t* [A/B Testing](#ab-testing)\r\n\t* [Test Runners](#test-runners)\r\n\t\t* [Karma](#karma)\r\n\t\t* [Mocha](#mocha)\r\n\t\t* [Jasmine](#jasmine)\r\n\t\t* [Cypress](#cypress)\r\n\t\t* [Ava](#ava)\r\n\t* [Best Practices](#best-practices-3)\r\n* [➤ Architecture \u0026 paradigms](#-architecture--paradigms)\r\n\t* [Paradigms](#paradigms)\r\n\t* [Programming Paradigms](#programming-paradigms)\r\n\t* [Object Oriented Programming](#object-oriented-programming)\r\n\t\t* [S.O.L.I.D](#solid)\r\n\t* [Functional programming](#functional-programming)\r\n\t\t* [Recursion](#recursion)\r\n\t\t* [Higher-Order Functions](#higher-order-functions)\r\n\t\t* [Currying](#currying)\r\n\t\t* [Monads](#monads)\r\n\t* [Architecture](#architecture)\r\n\t* [Design Patterns](#design-patterns)\r\n\t\t* [Singleton](#singleton)\r\n\t\t* [Observer](#observer)\r\n\t\t* [Prototype](#prototype-1)\r\n\t\t* [Bridge](#bridge)\r\n\t\t* [Proxy](#proxy)\r\n\t\t* [Chain of responsibility](#chain-of-responsibility)\r\n\t\t* [Constructor](#constructor)\r\n\t* [CSS Methodologies](#css-methodologies)\r\n\t\t* [BEM](#bem)\r\n\t\t* [SMACSS](#smacss)\r\n\t\t* [OOCSS](#oocss)\r\n* [➤ Team Collaboration](#-team-collaboration)\r\n\t* [Version Control](#version-control)\r\n\t* [Git](#git)\r\n\t\t* [Github](#github)\r\n\t\t* [Bitbucket](#bitbucket)\r\n\t* [Management](#management)\r\n\t* [Agile Development](#agile-development)\r\n\t\t* [Scrum](#scrum)\r\n\t\t* [Kanban](#kanban)\r\n\t* [Waterfall Development](#waterfall-development)\r\n\t* [Test Driven Development](#test-driven-development)\r\n* [➤ Design \u0026 UX](#-design--ux)\r\n\t* [Color Theory](#color-theory)\r\n\t\t* [Color Wheel](#color-wheel)\r\n\t* [Typography](#typography)\r\n\t\t* [Font Size](#font-size)\r\n\t\t* [Line Spacing](#line-spacing)\r\n\t* [C.R.A.P](#crap)\r\n\t\t* [Contrast](#contrast)\r\n\t\t* [Repetition](#repetition)\r\n\t\t* [Alignment](#alignment)\r\n\t\t* [Proximity](#proximity)\r\n\t* [Consistency](#consistency)\r\n\t* [Spacing](#spacing)\r\n\t* [Error Handling](#error-handling)\r\n\t* [Loading](#loading)\r\n\t* [The Golden Ratio](#the-golden-ratio)\r\n\t* [Mobile First](#mobile-first)\r\n\t\t* [Hit Targets](#hit-targets)\r\n\t* [Design Systems](#design-systems)\r\n\t\t* [Material Design](#material-design)\r\n\t\t* [Fluent Design](#fluent-design)\r\n\t* [Accessibility](#accessibility)\r\n\t* [Best Practices](#best-practices-4)\r\n* [➤ The Modern Web](#-the-modern-web)\r\n\t* [Streams](#streams)\r\n\t\t* [Media Streams](#media-streams)\r\n\t\t* [Media Recorder](#media-recorder)\r\n\t\t* [Web RTC](#web-rtc)\r\n\t\t* [Screen Capture](#screen-capture)\r\n\t\t* [Generators](#generators)\r\n\t* [Speech Synthesis](#speech-synthesis)\r\n\t* [Web Sockets](#web-sockets)\r\n\t* [Geolocation](#geolocation)\r\n\t* [Device orientation \u0026 motion](#device-orientation--motion)\r\n\t* [Fullscreen](#fullscreen)\r\n\t* [Variable Fonts](#variable-fonts)\r\n\t* [HTTP/2](#http2)\r\n\t* [Payment Request API](#payment-request-api)\r\n\t* [Web Audio](#web-audio)\r\n\t* [Observers](#observers)\r\n\t\t* [Mutation Observer](#mutation-observer)\r\n\t\t* [Intersection Observer](#intersection-observer)\r\n\t\t* [Resize Observer](#resize-observer)\r\n\t\t* [Performance Observer](#performance-observer)\r\n\t* [Scrollsnapping](#scrollsnapping)\r\n\t* [Web Assembly](#web-assembly)\r\n\t* [Beacon](#beacon)\r\n\t* [Clipboard](#clipboard)\r\n\t* [Share](#share)\r\n\t* [Performance API](#performance-api)\r\n\t* [Gamepad API](#gamepad-api)\r\n\t* [Speech Recognition](#speech-recognition)\r\n\t* [Interaction Media Queries](#interaction-media-queries)\r\n\t* [Browser Extensions](#browser-extensions)\r\n\t* [Pointer Lock API](#pointer-lock-api)\r\n\t* [Picture In Picture](#picture-in-picture)\r\n\t* [Proxies](#proxies)\r\n\t* [Houdini](#houdini)\r\n\t* [Project Fugu](#project-fugu)\r\n\t* [Web Authentication API](#web-authentication-api)\r\n\t\t* [Credentials Manager API](#credentials-manager-api)\r\n\t* [Native File System](#native-file-system)\r\n\t* [Shape Detection](#shape-detection)\r\n\t* [Web Bluetooth](#web-bluetooth)\r\n\t* [Web USB](#web-usb)\r\n\t* [Web XR](#web-xr)\r\n\t* [Presentation](#presentation)\r\n\t* [Network Information API](#network-information-api)\r\n* [➤ Algorithms \u0026 Data structures](#-algorithms--data-structures)\r\n\t* [Data structures](#data-structures)\r\n\t* [Arrays](#arrays)\r\n\t* [Queues \u0026 Stacks](#queues--stacks)\r\n\t* [Trees](#trees)\r\n\t\t* [Binary Indexed Tree](#binary-indexed-tree)\r\n\t\t* [Heap](#heap-1)\r\n\t\t* [Red-black Tree](#red-black-tree)\r\n\t\t* [Trie](#trie)\r\n\t\t* [K-D Tree](#k-d-tree)\r\n\t* [Hash Tables](#hash-tables)\r\n\t* [Linked Lists](#linked-lists)\r\n\t* [Graphs](#graphs)\r\n\t* [Analysis](#analysis)\r\n\t* [Time complexity](#time-complexity)\r\n\t\t* [Cost model](#cost-model)\r\n\t\t* [Order of Growth](#order-of-growth)\r\n\t\t* [Big O notation](#big-o-notation)\r\n\t* [Space Complexity](#space-complexity)\r\n\t* [Algorithms](#algorithms)\r\n\t* [Sorting](#sorting)\r\n\t\t* [Insertion Sort](#insertion-sort)\r\n\t\t* [Quicksort](#quicksort)\r\n\t\t* [Mergesort](#mergesort)\r\n\t\t* [Heapsort](#heapsort)\r\n\t* [Searching](#searching)\r\n\t\t* [Binary Search](#binary-search)\r\n\t\t* [Breadth First Search](#breadth-first-search)\r\n\t\t* [Depth First Search](#depth-first-search)\r\n\t\t* [Dijkstra's Algorithm](#dijkstras-algorithm)\r\n\t\t* [String Search](#string-search)\r\n\t* [Hashing](#hashing)\r\n* [➤ Databases \u0026 Servers](#-databases--servers)\r\n\t* [Databases](#databases)\r\n\t* [Relational Databases](#relational-databases)\r\n\t\t* [SQL](#sql)\r\n\t\t* [MySQL](#mysql)\r\n\t\t* [PostgreSQL](#postgresql)\r\n\t* [Non-relational Databases](#non-relational-databases)\r\n\t\t* [Redis](#redis)\r\n\t\t* [MongoDB](#mongodb)\r\n\t* [Data Modelling](#data-modelling)\r\n\t\t* [ER Diagram](#er-diagram)\r\n\t\t* [Keys](#keys)\r\n\t* [Indexing](#indexing)\r\n\t* [Data Integrity](#data-integrity)\r\n\t* [Normalization](#normalization)\r\n\t\t* [Functional Dependencies](#functional-dependencies)\r\n\t\t* [Normal Forms](#normal-forms)\r\n\t* [Transactions](#transactions)\r\n\t\t* [ACID](#acid)\r\n\t\t* [Serializability](#serializability)\r\n\t\t* [Locks](#locks)\r\n\t\t\t* [Deadlocks](#deadlocks)\r\n\t\t* [Precedence graph](#precedence-graph)\r\n\t* [Servers](#servers)\r\n\t* [Architectural Models](#architectural-models)\r\n\t\t* [Client-Server](#client-server)\r\n\t\t* [Proxy Server](#proxy-server)\r\n\t\t* [Peer-To-Peer](#peer-to-peer)\r\n\t* [Middleware](#middleware)\r\n\t* [Request-Reply Protocol](#request-reply-protocol)\r\n\t\t* [UDP](#udp)\r\n\t\t* [TCP](#tcp)\r\n\t* [REST API](#rest-api)\r\n\t\t* [CRUD](#crud)\r\n\t* [Express](#express)\r\n\t* [GraphQL](#graphql)\r\n\t* [GNU/Linux](#gnulinux)\r\n\t* [Docker](#docker)\r\n\t* [SSH](#ssh)\r\n* [➤ Contributors](#-contributors)\r\n* [➤ License](#-license)\n\u003c/details\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#faq)\r\n\r\n## ➤ FAQ\n\n### What is Web Skills?\n\nWeb Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.\n\n### How did you choose the skills?\n\t\t\nThe skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.\n\n### How can I support you?\n\nI am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a [stargazer](https://github.com/andreasbm/web-skills/stargazers), share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you [support me with a cup of coffee](https://www.buymeacoffee.com/AndreasMehlsen)! \u003c3\n\n### How can I get involved?\n\nYou are welcome to get involved in any way you like. If you want to, you can go to the [issues page](https://github.com/andreasbm/web-skills/issues) and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!\n\n### How can I keep track of what skills I know?\n\nIf you scroll to the bottom of the page, you will find a button that says \"Sign in with Google\". If you click this button and sign in, you will be able to mark skills as completed.\n\n### I am overwhelmed! Help me!\n\nI totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.\n\n### Why haven't you included XYZ Technology?\n\nThe skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the [issues page](https://github.com/andreasbm/web-skills/issues).\n\n### What does the \"experimental\" banner mean?\n\nWhen a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on [MDN](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). You are very welcome to open an issue if you see a skill you believe should be marked as \"experimental\" or have the banner removed.\n\n### How can I get in contact with you?\n\nReach out to me on Twitter at [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) or take a look at [my website](https://andreasbm.github.io) if you want to learn more about what other projects I'm working on.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#fundamentals)\r\n\r\n## ➤ Fundamentals\r\n\r\n### HTML\r\n\r\n### Syntax\r\n\r\nLearn the basics of HTML and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)\r\n\r\n#### Basic Tags\r\n\r\nGet familiar with the basic HTML tags\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.elated.com\" alt=\"Logo\" /\u003e Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)\r\n\r\n### Forms\r\n\r\nLearn how to design efficient forms, validating them effectively and keeping the user informed along the way.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)\r\n\r\n### SEO\r\n\r\nLearn how to make your content search-friendly.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Discoverable](https://web.dev/discoverable)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - SEO audits](https://web.dev/lighthouse-seo)\r\n\r\n#### Discoverable Content\r\n\r\nLearn how to structure your HTML in a way that provides a rich experience when sharing it online.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Easily discoverable](https://web.dev/discoverable)\r\n\r\n### Svg\r\n\r\nLearn how to work with SVG files to make graphics look crisp across all screen resolutions.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Adding vector graphics to the Web](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsvgontheweb.com\" alt=\"Logo\" /\u003e SVG on the web](https://svgontheweb.com/)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing HTML.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)\r\n\r\n\r\n### CSS\r\n\r\n### Syntax\r\n\r\nLearn the basics of CSS and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)\r\n\r\n### Selectors\r\n\r\nLearn about CSS selectors and how to effeciently target DOM elements.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)\r\n\r\n#### Specificity\r\n\r\nLearn what specificity means and how to use it when writing CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspecificity.keegan.st\" alt=\"Logo\" /\u003e Specificity Calculator](https://specificity.keegan.st/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)\r\n\r\n#### Pseudo Selectors\r\n\r\nLearn how to use pseudo selectors.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /\u003e When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)\r\n\r\n### Box Model\r\n\r\nLearn what the CSS box model means.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to the CSS basic box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\r\n\r\n#### Margin Collapsing\r\n\r\nLearn about margin collapsing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /\u003e What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjonathan-harrell.com\" alt=\"Logo\" /\u003e What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)\r\n\r\n### Colors\r\n\r\nLearn the different ways you can define colors in CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - \u003ccolor\u003e](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)\r\n\r\n### Calc\r\n\r\nLearn how to use the CSS calc function.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)\r\n\r\n### Layout\r\n\r\nLearn the different layout types for web.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)\r\n\r\n#### Flex\r\n\r\nLearn how to create layouts using flexbox.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflexboxfroggy.com\" alt=\"Logo\" /\u003e Flexbox Froggy](https://flexboxfroggy.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fflexboxdefense.com\" alt=\"Logo\" /\u003e Flexbox Defense](http://flexboxdefense.com)\r\n\r\n#### Grid\r\n\r\nLearn how to create layouts using CSS Grid.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcssgridgarden.com\" alt=\"Logo\" /\u003e CSS Grid Garden](https://cssgridgarden.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)\r\n\r\n### Transforms\r\n\r\nLearn the different ways to transform elements through CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)\r\n\r\n#### Animations\r\n\r\nLearn how to animate elements through CSS using keyframes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)\r\n\r\n### Responsive Design\r\n\r\nLearn how to make your website responsive so it works across different screen sizes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n#### Media Queries\r\n\r\nLearn how use media queries to build responsive layout.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - CSS Media Queries \u0026 Using Available Space](https://css-tricks.com/css-media-queries/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)\r\n\r\n#### Relative Units\r\n\r\nLearn how to use relative units for properties such as font sizes and spacing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fthecssworkshop.com\" alt=\"Logo\" /\u003e The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - 15 CSS Relative units](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m)\r\n\r\n#### Images\r\n\r\nLearn how to make images responsive, always showing the best possible version for the screen size.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)\r\n\r\n### CSS Variables\r\n\r\nLearn how to define and use CSS variables.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspeckyboy.com\" alt=\"Logo\" /\u003e Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)\r\n\r\n\r\n### Javascript\r\n\r\n### Syntax\r\n\r\nLearn the basics of Javascript and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)\r\n\r\n#### Spread\r\n\r\nLearn how the spread syntax can help you when working with arrays.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e Object rest and spread properties](https://v8.dev/features/object-rest-spread)\r\n\r\n#### Destructuring\r\n\r\nLearn how destructuring can help you when working with objects.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /\u003e MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)\r\n\r\n### DOM\r\n\r\nLearn how the HTML is represented as objects that comprise the structure and content of a document.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - What's the DOM](https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flearn.co\" alt=\"Logo\" /\u003e Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtmldom.dev\" alt=\"Logo\" /\u003e htmldom.dev](https://htmldom.dev/)\r\n\r\n#### DOM Manipulation\r\n\r\nLearn how to query HTML elements through Javascript and manipulate them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)\r\n\r\n### Events\r\n\r\nLearn how to dispatch and listen for events.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e JavaScript Events Explained](https://flaviocopes.com/javascript-events/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quirksmode.org\" alt=\"Logo\" /\u003e Event order](https://www.quirksmode.org/js/events_order.html)\r\n\r\n### Objects\r\n\r\nLearn how to create and use objects.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Objects](https://javascript.info/object)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fscotch.io\" alt=\"Logo\" /\u003e Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)\r\n\r\n#### Prototype\r\n\r\nLearn how to extend objects and functions through its prototype.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)\r\n\r\n##### Classes\r\n\r\nLearn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)\r\n\r\n### Regex\r\n\r\nLearn how to use regex to extract information from strings.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Regular expressions](https://javascript.info/regular-expressions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\r\n\r\n### Template Literals\r\n\r\nLearn how template literals and tagged templates and help you manipulate strings.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /\u003e MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)\r\n\r\n### Promises\r\n\r\nLearn how to use promises and what asynchronous code means.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)\r\n\r\n#### Callbacks\r\n\r\nLearn how to use callbacks and why they are not always a good idea.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Callbacks](https://javascript.info/callbacks)\r\n\r\n#### Async/await\r\n\r\nLearn how to use the async and await keywords to make it easier to write asynchronous code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Async/await](https://javascript.info/async-await)\r\n\r\n#### Fetch\r\n\r\nLearn how to use the fetch API to fetch data.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Fetch practical guide](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator - Fetch API](https://alligator.io/js/fetch-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n### Web Animations\r\n\r\nLearn how to use web animations to animate elements in the DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)\r\n\r\n### Modules\r\n\r\nLearn how to modularize your code into ES6 modules using the export and import keywords.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e V8 - Modules](https://v8.dev/features/modules)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)\r\n\r\n### Intl\r\n\r\nLearn how to localize your website using the Intl API.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)\r\n\r\n### Canvas\r\n\r\nLearn how to paint graphics onto a canvas.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)\r\n\r\n### Documentation\r\n\r\nLearn how to create good documentation and why it is important.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjsdoc.app\" alt=\"Logo\" /\u003e Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.writethedocs.org\" alt=\"Logo\" /\u003e A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing Javascript.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - JavaScript guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Airbnb - JavaScript Style Guide](https://github.com/airbnb/javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e 5 JavaScript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e JavaScript Style Guide and Coding Conventions](https://www.w3schools.com/js/js_conventions.asp)\r\n\r\n\r\n### The Browser\r\n\r\n### Standardization\r\n\r\nLearn why web standards are important and how new specifications are standardised.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Web Standards](https://en.wikipedia.org/wiki/Web_standards)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.elcom.com.au\" alt=\"Logo\" /\u003e What Are Web Standards?](https://www.elcom.com.au/resources/blog/web-standards)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frobertnyman.com\" alt=\"Logo\" /\u003e A Comprehensive Explanation of Web Standards](https://robertnyman.com/2007/05/21/what-are-web-standards-a-comprehensive-explanation-of-what-is-comprised-in-the-term/)\r\n\r\n#### W3C\r\n\r\nLearn what W3C are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - About](https://www.w3.org/standards/about.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Standards](https://www.w3.org/standards/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwebdiy.org\" alt=\"Logo\" /\u003e W3C - Process](http://webdiy.org/w3c/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Web Standards Guide](https://www.smashingmagazine.com/2019/01/web-standards-guide/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Groups](https://www.w3.org/community/groups/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e The W3C At Twenty-Five](https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/)\r\n\r\n#### TC39\r\n\r\nLearn what TC39 are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F2ality.com\" alt=\"Logo\" /\u003e The TC39 process for ECMAScript features](https://2ality.com/2015/11/tc39-process.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - TC39](https://github.com/tc39)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.ecma-international.org\" alt=\"Logo\" /\u003e Ecma International - Programme of work](https://www.ecma-international.org/memento/tc39.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Ecma International](https://en.wikipedia.org/wiki/Ecma_International)\r\n\r\n#### WHATWG\r\n\r\nLearn what WHATWG are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwg.org\" alt=\"Logo\" /\u003e WHATWG - FAQ](https://whatwg.org/faq)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - Standards](https://spec.whatwg.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdzone.com\" alt=\"Logo\" /\u003e W3C vs. WHATWG HTML5 Specs](https://dzone.com/articles/w3c-vs-whatwg-html5-specs)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtml.spec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - HTML](https://html.spec.whatwg.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - WHATWG](https://en.wikipedia.org/wiki/WHATWG)\r\n\r\n#### Specifications\r\n\r\nLearn how to read specifications developed by the standards committees.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftimothygu.me\" alt=\"Logo\" /\u003e How to Read the ECMAScript Specification](https://timothygu.me/es-howto/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falistapart.com\" alt=\"Logo\" /\u003e How to Read W3C Specs](https://alistapart.com/article/readspec/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chenhuijing.com\" alt=\"Logo\" /\u003e Learning CSS by reading specs](https://www.chenhuijing.com/blog/learning-css-by-reading-specifications/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e Understanding the CSS Specifications](https://www.w3.org/Style/CSS/read.en.html)\r\n\r\n### Browser Engines\r\n\r\nLearn what a browser engine is and get an overview of the browser landscape and market share.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - Browser Engines](https://medium.com/@jonbiro/browser-engines-chromium-v8-blink-gecko-webkit-98d6b0490968)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Comparison](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftextslashplain.com\" alt=\"Logo\" /\u003e Demystifying Browsers](https://textslashplain.com/2020/02/09/demystifying-browsers/)\r\n\r\n#### Webkit\r\n\r\nLearn about the Webkit browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebkit.org\" alt=\"Logo\" /\u003e Webkit](https://webkit.org/)\r\n\r\n#### Blink\r\n\r\nLearn about the Blink browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine))\r\n\r\n#### Gecko\r\n\r\nLearn about the Gecko browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Gecko](https://en.wikipedia.org/wiki/Gecko_(software))\r\n\r\n### HTTP\r\n\r\nLearn how data is distributed through the HTTP protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTTP Glossary](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Hypertext Transfer Protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)\r\n\r\n### The Internet\r\n\r\nLearn the basics of how the internet works.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.explainthatstuff.com\" alt=\"Logo\" /\u003e Explain That Stuff - Internet](https://www.explainthatstuff.com/internet.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.stanford.edu\" alt=\"Logo\" /\u003e Stanford - How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.hubspot.com\" alt=\"Logo\" /\u003e How the Internet Works](https://blog.hubspot.com/marketing/how-the-internet-works)\r\n\r\n### Polyfills\r\n\r\nLearn how it is possible to use polyfills to increase the browser support for your website.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Introduction To Polyfills \u0026 Their Usage](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-polyfills-their-usage-9cd6db4b1923)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Polyfills and the evolution of the Web](https://www.w3.org/2001/tag/doc/polyfills/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fcaniuse.com\" alt=\"Logo\" /\u003e Can I use](http://caniuse.com/)\r\n\r\n### Debugging\r\n\r\nLearn about the basics concepts of debugging.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cross browser testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e 5 things to remember for better debugging of your code](https://medium.com/dev-bits/5-things-to-remember-for-better-debugging-of-your-code-94b9bc3fb3df)\r\n\r\n#### Developer console\r\n\r\nLearn how to use the developer console to debug your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Get Started with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Debugging HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Debugging in Chrome](https://javascript.info/debugging-chrome)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fraygun.com\" alt=\"Logo\" /\u003e 14 JavaScript debugging tips](https://raygun.com/javascript-debugging-tips)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Chrome DevTools 101](https://www.youtube.com/watch?v=H0XScE08hy8)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Chrome Devs - Quickly monitor events](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - 14 Must Know Chrome Dev Tools Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#accessibility)\r\n\r\n## ➤ Accessibility\r\n\r\n### The why\r\n\r\nLearn what accessibility is and why it is important.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility Fundamentals](https://developers.google.com/web/fundamentals/accessibility/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fudacity.github.io\" alt=\"Logo\" /\u003e Udacity - Chromevox Lite](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Dev.to - Why Accessibility Matters](https://dev.to/lhoffmanwg1/why-accessibility-matters-39nl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.abilitynet.org.uk\" alt=\"Logo\" /\u003e Abilitynet - Why Accessibility Matters](https://www.abilitynet.org.uk/why-accessibility-matters)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Headings, Landmarks, and Tabs](https://www.youtube.com/watch?v=HE2R86EZPMA)\r\n\r\n### Screen Readers\r\n\r\nLearn about assistive technology such as screen readers that reads sections of the page aloud based on the current focus.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - Screen Reader Myths](https://a11yproject.com/posts/people-who-use-screen-readers-dont-use-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - NVDA Screen Reader](https://a11yproject.com/posts/getting-started-with-nvda/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - OS X Voiceover](https://a11yproject.com/posts/getting-started-with-voiceover/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Screen Reader Survey](https://webaim.org/projects/screenreadersurvey7/)\r\n\r\n### Accessibility tree\r\n\r\nLearn about the accessibility tree and how assistive technology uses it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Accessibility Tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree)\r\n\r\n#### ARIA\r\n\r\nLearn how to use ARIA descriptions an labels to help assistive technology understanding your website.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - ARIA Labels](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Hiding and updating content](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - ARIA States](https://a11yproject.com/posts/ARIA-states/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - ARIA Properties](https://a11yproject.com/posts/ARIA-properties/)\r\n\r\n#### Accessible HTML\r\n\r\nLearn how to write HTML in such as way that assistive technology better understands it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Accessibility HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Skip navigation](https://webaim.org/techniques/skipnav/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e w3c - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fguide.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Semantic Elements](https://guide.freecodecamp.org/html/html5-semantic-elements/)\r\n\r\n##### Alt text\r\n\r\nLearn how to use the alt attribute to provide a useful text alternative to this image.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Text Alternatives for Images](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/text-alternatives-for-images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Accessible Images](https://webaim.org/techniques/images/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Alternative text](https://webaim.org/techniques/alttext/)\r\n\r\n#### Accessible CSS\r\n\r\nLearn how to write CSS in such as way that assistive technology better understands it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - CSS](https://webaim.org/techniques/css/)\r\n\r\n### Accessible forms\r\n\r\nLearn how to build accessible forms that makes it usable to as many people as possible.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Forms](https://webaim.org/techniques/forms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e Itnext - Form Accessibility Gudie](https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14)\r\n\r\n### UI States\r\n\r\nLearn how to make the state of each UI element clear.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessible Styles](https://developers.google.com/web/fundamentals/accessibility/accessible-styles)\r\n\r\n### Keyboard Accessibility\r\n\r\nLearn how to make it easy for keyboard users to navigate your site.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Keyboard](https://webaim.org/techniques/keyboard/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Smashing Magazine - Web with just a keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/)\r\n\r\n#### Focus\r\n\r\nLearn how to create a sensible tab order and how to make it easy for the users to locate the currently focused element.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Control focus with tabindex](https://web.dev/control-focus-with-tabindex/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Focus](https://developers.google.com/web/fundamentals/accessibility/focus/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Dom Order Matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Using Tabindex](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Track Focus](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - :focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)\r\n\r\n### Accessible Colors\r\n\r\nLearn how to select colors in such a way that users, including those with visual disabilities, can perceive the content on the page.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Contrast and Color](https://webaim.org/articles/contrast/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - Check contrast](https://a11yproject.com/posts/check-contrast-with-mobile-device/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - What is color contrast?](https://a11yproject.com/posts/what-is-color-contrast/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstripe.com\" alt=\"Logo\" /\u003e Designing accessible color systems](https://stripe.com/en-dk/blog/accessible-color-systems)\r\n\r\n### Laws \u0026 Policies\r\n\r\nLearn about the governmental policies related to web accessibility.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Laws \u0026 Policies](https://www.w3.org/WAI/policies/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Laws around the world](https://webaim.org/articles/laws/world/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Section 508](https://webaim.org/standards/508/checklist)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - WCAG 2 Checklist](https://webaim.org/standards/wcag/checklist)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11y.dev\" alt=\"Logo\" /\u003e A11Y.dev - Lawsuits](https://a11y.dev/470-digital-accessibility-cases-were-filed-in-q3-2018/)\r\n\r\n#### Audits\r\n\r\nLearn how to conduct an accessibility review to improve the overall experience of using your site. Remember, good accessibility equals good UX!\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Accessibility audits](https://web.dev/lighthouse-accessibility)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - How to review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Accessibility Tools](https://webaim.org/articles/tools/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwave.webaim.org\" alt=\"Logo\" /\u003e Webaim - Wave](http://wave.webaim.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fchrome.google.com\" alt=\"Logo\" /\u003e Google Chrome - NoCoffee Extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.digitala11y.com\" alt=\"Logo\" /\u003e Digital A11Y - Accessibility Plugins](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility for teams](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.wuhcag.com\" alt=\"Logo\" /\u003e WCAG 2.0 checklists](https://www.wuhcag.com/wcag-checklist/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#web-components)\r\n\r\n## ➤ Web Components\r\n\r\n### Custom Elements\r\n\r\nLearn how to create new HTML tags with Custom Elements.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e Javascript.info - Custom Elements](https://javascript.info/custom-elements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - An introduction to Custom Elements](https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Web Components](https://web.dev/web-components-io-2019/)\r\n\r\n### HTML Templates\r\n\r\nLearn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Templates \u0026 Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e Javascript.info - Template Element](https://javascript.info/template-element)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\r\n\r\n### Shadow DOM\r\n\r\nLearn how to encapsulate your CSS using Shadow DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Shadow Tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Encapsulating Style and Structure](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmeowni.ca\" alt=\"Logo\" /\u003e Monica - Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)\r\n\r\n#### Shadow Parts\r\n\r\nLearn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Fergald - CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmeowni.ca\" alt=\"Logo\" /\u003e Monica - ::part and ::theme, an explainer](https://meowni.ca/posts/part-theme-explainer/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - CSS Shadow Parts](https://www.youtube.com/watch?v=yVrvOueeb3s)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chromestatus.com\" alt=\"Logo\" /\u003e Chrome Status - ::part and ::theme](https://www.chromestatus.com/features/5763933658939392)\r\n\r\n#### Slots\r\n\r\nLearn how to compose Custom Elements by using slots.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator.io - Composing Custom Elements](https://alligator.io/web-components/composing-slots-named-slots/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e Javascript.info - Slots Composition](https://javascript.info/slots-composition)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML \u003cslot\u003e element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcomponent.kitchen\" alt=\"Logo\" /\u003e Component.kitchen - A history of the HTML slot element](https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)\r\n\r\n### Best practices\r\n\r\nGet familiar with best practices when it comes to building Web Components.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Custom Element Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.webcomponents.org\" alt=\"Logo\" /\u003e Webcomponents.org - Web Components Best Practices](https://www.webcomponents.org/community/articles/web-components-best-practices)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e mateusortiz - Web Components the Right Way](https://github.com/mateusortiz/webcomponents-the-right-way)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Making Web Components for Different Contexts](https://dev.to/equinusocio/making-web-components-for-different-contexts-25ed)\r\n\r\n### Constructible Stylesheets\r\n\r\nLearn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Constructable Stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwicg.github.io\" alt=\"Logo\" /\u003e W3C - Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Why Would Anyone Use Constructible Stylesheets](https://dev.to/westbrook/why-would-anyone-use-constructible-stylesheets-anyways-19ng)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Benjamin Farrel - Adopt a Design System](https://medium.com/swlh/adopt-a-design-system-inside-your-web-components-with-constructable-stylesheets-dd24649261e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e WICG - Constructable Stylesheet Objects](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chromestatus.com\" alt=\"Logo\" /\u003e Chrome Status - Constructible Stylesheets](https://www.chromestatus.com/feature/5394843094220800)\r\n\r\n### Form Participation\r\n\r\nLearn how the Form Participation API proposal enables elements, other than built-in form control elements, to participate in form submission and validation.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.google.com\" alt=\"Logo\" /\u003e Form Participation API Explained](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chromestatus.com\" alt=\"Logo\" /\u003e Chrome Status - Form-associated custom elements](https://www.chromestatus.com/features/4708990554472448)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e web-platform-tests - Form Participation](https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Form-associated custom elements](https://developers.google.com/web/updates/2019/09/nic77#form-associated_custom_elements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - More capable form controls](https://web.dev/more-capable-form-controls/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtml.spec.whatwg.org\" alt=\"Logo\" /\u003e W3C - Creating a form-associated custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#progressive-webapps)\r\n\r\n## ➤ Progressive Webapps\r\n\r\n### API's\r\n\r\n### Storage\r\n\r\nLearn how to store data for your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - View And Edit Local Storage](https://developers.google.com/web/tools/chrome-devtools/storage/localstorage)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Client-side storage](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)\r\n\r\n### Routing\r\n\r\nLearn what routing means in single page applications.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.pshrmn.com\" alt=\"Logo\" /\u003e How Single-Page Applications Work](https://blog.pshrmn.com/how-single-page-applications-work/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstaticapps.org\" alt=\"Logo\" /\u003e Static Apps - Routing URLs in Static Web Apps](https://staticapps.org/articles/routing-urls-in-static-apps/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fpennyforyourcode.com\" alt=\"Logo\" /\u003e Routing With Single Page Applications or Client Side Routing](https://pennyforyourcode.com/tldr-routing-with-single-page-applications-or-client-side-routing-327626cdc5dd)\r\n\r\n#### History API\r\n\r\nLearn how to use the history API to add single page applicaiton routing to your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Single-page application routing in vanilla JavaScript](https://medium.com/@george.norberg/history-api-getting-started-36bfc82ddefc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Using the HTML5 History API](https://css-tricks.com/using-the-html5-history-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e The History API](https://flaviocopes.com/history-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - History API: Scroll Restoration](https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - The Document Base URL element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)\r\n\r\n### Service Workers\r\n\r\nLearn how to register a service worker to provide a rich native-like experience.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Service Worker Registration](https://developers.google.com/web/fundamentals/primers/service-workers/registration)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - High-performance service worker loading](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Scripting the service worker](https://codelabs.developers.google.com/codelabs/pwa-scripting-the-service-worker/index.html?index=..%2F..dev-pwa-training#0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Caching files with the service worker](https://codelabs.developers.google.com/codelabs/pwa-caching-service-worker/index.html?index=..%2F..dev-pwa-training#0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Codelabs - Adding a Service Worker](https://developers.google.com/web/fundamentals/codelabs/offline)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Debugging Service Workers](https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjakearchibald.com\" alt=\"Logo\" /\u003e Caching best practices](https://jakearchibald.com/2016/caching-best-practices/)\r\n\r\n#### Offline first\r\n\r\nLearn how to make your web app working offline with an offline first approach.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Offline Web Applications](https://www.udacity.com/course/offline-web-applications--ud899)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fofflinefirst.org\" alt=\"Logo\" /\u003e Offline First](http://offlinefirst.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Offline Storage for Progressive Web Apps](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Offline quickstart](https://codelabs.developers.google.com/codelabs/pwa-offline-quickstart/index.html?index=..%2F..dev-pwa-training#0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Adding a Service Worker and Offline into your Web App](https://codelabs.developers.google.com/codelabs/offline/index.html?index=..%2F..%2Findex#0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - Offline Links](https://www.youtube.com/watch?v=7fnpsF9tMXc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Online and offline events](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Making PWAs work offline](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers)\r\n\r\n#### Push notifications\r\n\r\nLearn how to add push notifications to your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Adding Push Notifications to a Web App](https://developers.google.com/web/fundamentals/codelabs/push-notifications/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - How to make PWAs re-engageable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)\r\n\r\n### Web App manifest\r\n\r\nLearn how to tell the browser about your web app and how it should behave when 'installed' by creating a web app manifest.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Add a web app manifest](https://web.dev/add-manifest/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Web App Manifest](https://www.w3.org/TR/appmanifest/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - How to make PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)\r\n\r\n### Add to homescreen\r\n\r\nLearn how to make your web app installable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Installable](https://web.dev/installable)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Add to Home screen](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen)\r\n\r\n### Pointer Events\r\n\r\nLearn how to handle inputs from pointing devices such as a mouse, pen/stylus or touch.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Add Touch to Your Site](https://developers.google.com/web/fundamentals/design-and-ux/input/touch)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Pointing the Way Forward](https://developers.google.com/web/updates/2016/10/pointer-events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Touch Action Options](https://developers.google.com/web/updates/2016/10/touch-action)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Pointer Events](https://www.w3.org/TR/pointerevents/)\r\n\r\n\r\n### Loading Performance\r\n\r\n### App shell\r\n\r\nLearn how to use an app shell to provide an instant and reliable experience to users on repeat visits\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Architecture of an app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure)\r\n\r\n### Render-Blocking Resources\r\n\r\nLearn about render-blocking resources and why they are bad for the user-experience.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Render-blocking resources](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Loading#Render-blocking_resources)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Render-Blocking Resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)\r\n\r\n### Compression\r\n\r\nLearn how to minimize the overall download size by optimizing and compressing resources.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Optimizing Encoding and Transfer Size](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Replace Animated GIFs with Video](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsquoosh.app\" alt=\"Logo\" /\u003e Squoosh](https://squoosh.app/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Text Content](https://developers.google.com/web/fundamentals/performance/get-started/textcontent-3)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Optimize Images](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Reduce JavaScript execution time](https://web.dev/bootup-time/)\r\n\r\n### Performance metrics\r\n\r\nLearn why it is important to measure performance and which metrics you should prioritize.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - User-centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860)\r\n\r\n#### Largest Contentful Paint\r\n\r\nLearn about Largest Contentful Paint and how it impacts the overall performance.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Largest Contentful Paint](https://web.dev/lcp/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Lighthouse Largest Contentful Paint](https://web.dev/lighthouse-largest-contentful-paint)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - New Performance Metric: What is Largest Contentful Paint?](https://medium.com/speedrank-app/new-performance-metric-what-is-largest-contentful-paint-dc784a497dd5)\r\n\r\n#### Total Blocking Time\r\n\r\nLearn about Total Blocking Time and how it impacts the overall performance.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - First CPU Idle](https://web.dev/first-cpu-idle)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e Google Devs - Total Blocking Time](https://web.dev/tbt)\r\n\r\n#### Time to Interactive\r\n\r\nLearn about Time to Interactive and how it impacts the overall performance.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Time to Interactive](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)\r\n\r\n### Lazy Loading\r\n\r\nLearn how to use lazy loading to lower the initial page payload and load time.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faddyosmani.com\" alt=\"Logo\" /\u003e Addy Osmani - Lazy Loading Images](https://addyosmani.com/blog/lazy-loading/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading/)\r\n\r\n#### Dynamic Import\r\n\r\nLearn how to use dynamic import to lazy load javascript.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e V8 - Dynamic import()](https://v8.dev/features/dynamic-import)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e JavaScript dynamic import() \u0026 export](https://medium.com/@WebReflection/javascript-dynamic-import-export-b0e8775a59d4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Dynamic Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e TC39 - proposal-dynamic-import](https://github.com/tc39/proposal-dynamic-import)\r\n\r\n#### Offscreen images\r\n\r\nLearn why offscreen images increase the load time and how to avoid them by lazy loading images.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Defer offscreen images](https://web.dev/offscreen-images/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Properly Size Images](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faddyosmani.com\" alt=\"Logo\" /\u003e Addy Osmani - Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/)\r\n\r\n### Critical Request Chains\r\n\r\nLearn about the critical request chains and how to find them in your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Critical Request Chains](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Minimize critical requests depth](https://web.dev/critical-request-chains)\r\n\r\n### Tree shaking\r\n\r\nLearn how to use tree shaking to eliminate dead code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.keycdn.com\" alt=\"Logo\" /\u003e How to Clean Up Your JavaScript](https://www.keycdn.com/blog/tree-shaking)\r\n\r\n### Codesplitting\r\n\r\nLearn about codesplitting an how dividing your code into multiple chunks makes your web app faster.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.creativebloq.com\" alt=\"Logo\" /\u003e All you need to know about JavaScript code splitting](https://www.creativebloq.com/how-to/all-you-need-to-know-about-javascript-code-splitting)\r\n\r\n### PRPL Pattern\r\n\r\nLearn how to use the PRPL pattern to make web apps more performant.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - JavaScript Start-up Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbuilding.calibreapp.com\" alt=\"Logo\" /\u003e Ben Schwarz - Real world performance](https://building.calibreapp.com/beyond-the-bubble-real-world-performance-9c991dcd5342?gi=76804aa8f46e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e The Cost of Javascript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)\r\n\r\n### Resource Prioritization\r\n\r\nLearn about resource prioritization and how to inform the browser about the importance of a resource.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Resource Prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.igvita.com\" alt=\"Logo\" /\u003e Eliminating Roundtrips with Preconnect](https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Addy Osmani - Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Preconnect to required origins](https://web.dev/uses-rel-preconnect/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F3perf.com\" alt=\"Logo\" /\u003e Preload, prefetch and other \u003clink\u003e tags](https://3perf.com/blog/link-rels/)\r\n\r\n### Caching\r\n\r\nLearn about caching and how it can be uses to make web apps load faster.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - HTTP Caching](https://developers.google.com/web/fundamentals/performance/get-started/httpcaching-6)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)\r\n\r\n\r\n### Rendering Performance\r\n\r\n### Rendering\r\n\r\nLearn about rendering, how a page is rendered and why it is important to keep your web app interactive and smooth running.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Render-tree Construction](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Render Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css)\r\n\r\n### Event loop\r\n\r\nLearn about the event loop and how Javascript simulate like it’s running our commands in a multi-thread environment.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fyoutu.be\" alt=\"Logo\" /\u003e Youtube - Jake Archibald: In The Loop](https://youtu.be/cCOL7MC4Pl0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Understanding JavaScript](https://medium.com/@muratcatal/understanding-javascript-heap-stack-event-loops-and-callback-queue-6fdec3cfe32e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e JavaScript Event Loop Explained](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - JavaScript Visualized: Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)\r\n\r\n#### Microtask\r\n\r\nLearn about microtasks and the microtask queue.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjakearchibald.com\" alt=\"Logo\" /\u003e Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using microtasks in JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Microtasks and macrotasks](https://javascript.info/event-loop)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Microtasks](https://javascript.info/microtask-queue)\r\n\r\n#### Stack\r\n\r\nLearn about the stack and how to investigate the staack trace when debugging.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.scalyr.com\" alt=\"Logo\" /\u003e Javascript Stack Trade - Using it to debug](https://www.scalyr.com/blog/javascript-stack-trace-understanding-it-and-using-it-to-debug/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - console.trace()](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e V8 - Stack trace API](https://v8.dev/docs/stack-trace-api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)\r\n\r\n#### Heap\r\n\r\nLearn about the heap and how to investigate the heap snapshots when debugging.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - How to Use the Allocation Profiler Tool](https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler)\r\n\r\n### RAIL Model\r\n\r\nLearn how to use the RAIL model to ensure a good user experience.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - RAIL](https://developers.google.com/web/fundamentals/performance/rail)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Get Started With Analyzing](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Animations and Performance](https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - CSS Versus JavaScript Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Choosing the Right Easing](https://developers.google.com/web/fundamentals/design-and-ux/animations/choosing-the-right-easing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Animating Modal Views](https://developers.google.com/web/fundamentals/design-and-ux/animations/animating-modal-views)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS and JavaScript animation performance](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Performance fundamentals](https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Fast By Default](https://www.youtube.com/watch?v=_srJ7eHS3IM)\r\n\r\n#### requestAnimationFrame\r\n\r\nLearn how to use the requestAnimationFrame API to create butter-smooth animations.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Optimize JavaScript Execution](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)\r\n\r\n#### requestIdleCallback\r\n\r\nLearn how to use the requestIdleCallback to defer heavy tasks.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Background Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback?hl=en)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - requestIdleCallback()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)\r\n\r\n### Critical Rendering Path\r\n\r\nLearn about the critical rendering path and how to identify it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Critical Rendering Path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Understanding the critical rendering path](https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a)\r\n\r\n### The Pixel Pipeline\r\n\r\nLearn about the five key points in the pixels-to-screen pipeline.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The pixel pipeline](https://developers.google.com/web/fundamentals/performance/rendering#the_pixel_pipeline)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faerotwist.com\" alt=\"Logo\" /\u003e Pixels are expensive](https://aerotwist.com/blog/pixels-are-expensive/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Google Devs - The Applied Science of Runtime Performance](https://www.youtube.com/watch?v=RCFQu0hK6bU)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcsstriggers.com\" alt=\"Logo\" /\u003e CSS Triggers](https://csstriggers.com/)\r\n\r\n#### Style calculations\r\n\r\nLearn how to optimize your CSS to avoid heavy style calculations.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Style Calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)\r\n\r\n#### Transforms\r\n\r\nLearn about transforms and how it is possible to avoid both layout and paint.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Use transform and opacity for animations](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count#use_transform_and_opacity_changes_for_animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Achieving 60 FPS Animations with CSS3](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - High Performance Animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)\r\n\r\n#### Paint areas\r\n\r\nLearn about paint areas and how it is possible to reduce them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Paint Areas](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Browser painting](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - Avoiding Unnecessary Paints](https://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/)\r\n\r\n#### Layout Trashing\r\n\r\nLearn about layout trashing and how to avoid it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Layout Thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.idrsolutions.com\" alt=\"Logo\" /\u003e Beware JavaScript Layout Thrashing!](https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevhints.io\" alt=\"Logo\" /\u003e Layout thrashing cheatsheet](https://devhints.io/layout-thrashing)\r\n\r\n#### Layers\r\n\r\nLearn about layers and how to promote an element to another layer.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Manage Layer Count](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - Accelerated Rendering in Chrome](https://www.html5rocks.com/en/tutorials/speed/layers/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdassur.ma\" alt=\"Logo\" /\u003e Layers and how to force them](https://dassur.ma/things/forcing-layers/)\r\n\r\n#### Debounce\r\n\r\nLearn how to debounce computationally expensive code to avoid blocking the UI.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Debounce Your Input Handlers](https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flevelup.gitconnected.com\" alt=\"Logo\" /\u003e Level Up - Debounce in JavaScript](https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086)\r\n\r\n### CSS Containment\r\n\r\nLearn how to use CSS containment to improve the performance of your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - CSS Containment](https://developers.google.com/web/updates/2016/06/css-containment)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - CSS Containment Module](https://www.w3.org/TR/css-contain-1/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblogs.igalia.com\" alt=\"Logo\" /\u003e An introduction to CSS Containment](https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - CSS containment](https://css-tricks.com/css-containment/)\r\n\r\n### Web Workers\r\n\r\nLearn how to use web workers to run a script operation in a background thread separate from the main execution thread.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - The Basics of Web Workers](https://www.html5rocks.com/en/tutorials/workers/basics/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdassur.ma\" alt=\"Logo\" /\u003e When should you be using Web Workers?](https://dassur.ma/things/when-workers/)\r\n\r\n\r\n### Security\r\n\r\n### HTTPS\r\n\r\nLearn about HTTPS and why a website should always be protected with HTTPS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Mixed Content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)\r\n\r\n### Browser Sandbox\r\n\r\nLearn about the sandbox security mechanism and how it restricts the execution environment.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Browser sandbox](https://web.dev/browser-sandbox/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Sandbox (computer security)](https://en.wikipedia.org/wiki/Sandbox_(computer_security))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.howtogeek.com\" alt=\"Logo\" /\u003e Howtogeek - Sandboxes Explained](https://www.howtogeek.com/169139/sandboxes-explained-how-theyre-already-protecting-you-and-how-to-sandbox-any-program/)\r\n\r\n### OWASP\r\n\r\nLearn about the OWASP organization and how they help with web application security.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.owasp.org\" alt=\"Logo\" /\u003e OWASP - About](https://www.owasp.org/index.php/About_The_Open_Web_Application_Security_Project)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.owasp.org\" alt=\"Logo\" /\u003e OWASP - OWASP Top 10](https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcheatsheetseries.owasp.org\" alt=\"Logo\" /\u003e OWASP - Cheatsheets](https://cheatsheetseries.owasp.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - OWASP](https://www.youtube.com/user/OWASPGLOBAL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.sucuri.net\" alt=\"Logo\" /\u003e OWASP Top 10 Security Risks](https://blog.sucuri.net/2018/10/owasp-top-10-security-risks-part-i.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Web application security](https://en.wikipedia.org/wiki/Web_application_security)\r\n\r\n#### Cross-Site Scripting\r\n\r\nLearn about cross-site scripting and how it is possible mitigate these kind of attacks.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.owasp.org\" alt=\"Logo\" /\u003e OWASP - Cross-site Scripting (XSS)](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcheatsheetseries.owasp.org\" alt=\"Logo\" /\u003e OWASP - XSS Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fexcess-xss.com\" alt=\"Logo\" /\u003e Excess XSS](https://excess-xss.com/)\r\n\r\n#### Clickjacking\r\n\r\nLearn about clickjacking and how it is possible to mitigate these kind of attacks.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.owasp.org\" alt=\"Logo\" /\u003e OWASP - Clickjacking](https://www.owasp.org/index.php/Clickjacking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Clickjacking](https://en.wikipedia.org/wiki/Clickjacking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Same-origin policy](https://web.dev/same-origin-policy/#how-to-prevent-clickjacking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcheatsheetseries.owasp.org\" alt=\"Logo\" /\u003e OWASP - Clickjacking Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html)\r\n\r\n### Content Security Policy\r\n\r\nLearn about content security policy and how it can help to detect and mitigate certain types of attacks.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - CSP](https://developers.google.com/web/fundamentals/security/csp)\r\n\r\n\r\n### Audits\r\n\r\n### Performance budgets\r\n\r\nLearn about performance budgets and how you can create one for your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Performance Budgets](https://web.dev/performance-budgets-101)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Performance Budget](https://developers.google.com/web/tools/lighthouse/audits/budgets)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faddyosmani.com\" alt=\"Logo\" /\u003e Addy Osmani - Start Performance Budgeting](https://addyosmani.com/blog/performance-budgets/)\r\n\r\n### Lighthouse\r\n\r\nLearn about lighthouse and how it can be used to audit your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Lighthouse](https://developers.google.com/web/tools/lighthouse/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Staying off the Rocks](https://www.youtube.com/watch?v=NoRYn6gOtVo)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Measure](https://web.dev/measure)\r\n\r\n### Chrome DevTools\r\n\r\nLearn about the Chrome DevTools and how it can be used to audit your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Inspect animations](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcalibreapp.com\" alt=\"Logo\" /\u003e Investigate animation performance with DevTools](https://calibreapp.com/blog/investigate-animation-performance-with-devtools/)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#build-tools)\r\n\r\n## ➤ Build tools\r\n\r\n### Package Managers\r\n\r\nLearn about package managers and how they make managing dependencies easier.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - How JavaScript package managers work](https://www.freecodecamp.org/news/javascript-package-managers-101-9afd926add0a/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.javascriptstuff.com\" alt=\"Logo\" /\u003e Guide to JavaScript frontend package managers](https://www.javascriptstuff.com/javascript-frontend-package-managers/)\r\n\r\n#### NPM\r\n\r\nLearn about NPM and how it can be used to manage dependencies.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.npmjs.com\" alt=\"Logo\" /\u003e npmjs - About npm](https://docs.npmjs.com/about-npm/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.npmjs.com\" alt=\"Logo\" /\u003e npmjs - Getting started](https://docs.npmjs.com/getting-started/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Introduction to npm and basic npm commands](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-npm-and-basic-npm-commands-18aa16f69f6b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fnodesource.com\" alt=\"Logo\" /\u003e An Absolute Beginner's Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)\r\n\r\n#### Yarn\r\n\r\nLearn about Yarn and how it can be used to manage dependencies.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fyarnpkg.com\" alt=\"Logo\" /\u003e Yarnpkg - Getting Started](https://yarnpkg.com/en/docs/getting-started)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fengineering.fb.com\" alt=\"Logo\" /\u003e Facebook Engineering - Yarn](https://engineering.fb.com/web/yarn-a-new-package-manager-for-javascript/)\r\n\r\n### Module Bundlers\r\n\r\nLearn about module bundler and how they can help bundling your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - What is a module bundler?](https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e JavaScript Bundlers, a Comparison](https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364)\r\n\r\n#### Rollup\r\n\r\nLearn how you can use Rollup to bundle your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frollupjs.org\" alt=\"Logo\" /\u003e Rollup - Introduction](https://rollupjs.org/guide/en/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flengstorf.com\" alt=\"Logo\" /\u003e How to Bundle JavaScript With Rollup](https://lengstorf.com/learn-rollup-js/)\r\n\r\n#### Webpack\r\n\r\nLearn how you can use Webpack to bundle your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebpack.js.org\" alt=\"Logo\" /\u003e Webpack - Getting Started](https://webpack.js.org/guides/getting-started/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fauth0.com\" alt=\"Logo\" /\u003e Webpack: A Gentle Introduction to the Module Bundler](https://auth0.com/blog/webpack-a-gentle-introduction/)\r\n\r\n#### Parcel\r\n\r\nLearn how you can use Parcel to bundle your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fparceljs.org\" alt=\"Logo\" /\u003e Parcel - Getting Started](https://parceljs.org/getting_started.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e Parcel, a simpler webpack](https://flaviocopes.com/parcel/)\r\n\r\n#### Snowpack\r\n\r\nLearn how Snowpack can replace the traditional app bundler during development.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.snowpack.dev\" alt=\"Logo\" /\u003e Snowpack](https://www.snowpack.dev/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.snowpack.dev\" alt=\"Logo\" /\u003e Snowpack - Quickstart](https://www.snowpack.dev/#quickstart)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Snowpack](https://github.com/pikapkg/snowpack)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.pika.dev\" alt=\"Logo\" /\u003e Pika - About](https://www.pika.dev/about/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.pika.dev\" alt=\"Logo\" /\u003e A Future Without Webpack](https://www.pika.dev/blog/pika-web-a-future-without-webpack/)\r\n\r\n### Linters and formatters\r\n\r\nLearn how you can improve your code quality with linters and formatters.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.gistia.com\" alt=\"Logo\" /\u003e Improve Your JavaScript Code Quality With Linters](https://www.gistia.com/javascript-linters-formatter-prettier-eslint/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Why you should always use a Linter](https://medium.com/dailyjs/why-you-should-always-use-a-linter-and-or-pretty-formatter-bb5471115a76)\r\n\r\n#### Prettier\r\n\r\nLearn how you can use Prettier to format your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fprettier.io\" alt=\"Logo\" /\u003e Prettier - What is Prettier?](https://prettier.io/docs/en/index.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e Let the computer do the formatting](https://blog.bitsrc.io/let-the-computer-do-the-formatting-ddb799e8a068)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fprettier.io\" alt=\"Logo\" /\u003e Prettier - Playground](https://prettier.io/playground/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fprettier.io\" alt=\"Logo\" /\u003e Prettier - Integrating with Linters](https://prettier.io/docs/en/integrating-with-linters.html)\r\n\r\n#### ESLint\r\n\r\nLearn how you can use ESLint to lint your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Feslint.org\" alt=\"Logo\" /\u003e Eslint - Getting Started](https://eslint.org/docs/user-guide/getting-started)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Streamline Code Reviews with ESLint + Prettier](https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.futurehosting.com\" alt=\"Logo\" /\u003e Prettier vs ESLint: What’s The Difference?](https://www.futurehosting.com/blog/prettier-vs-eslint-whats-the-difference/)\r\n\r\n### Task Runners\r\n\r\nLearn about task runners and how you can automate code execution.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dbswebsite.com\" alt=\"Logo\" /\u003e The Advantages of Using Task Runners](https://www.dbswebsite.com/blog/the-advantages-of-using-task-runners/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Being Productive With Task Runners](https://www.smashingmagazine.com/2016/06/harness-machines-productive-task-runners/)\r\n\r\n#### NPM Scripts\r\n\r\nLearn about NPM scripts and how you can run your own.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Why npm Scripts?](https://css-tricks.com/why-npm-scripts/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmichael-kuehnel.de\" alt=\"Logo\" /\u003e Helpers and tips for npm run scripts](https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html)\r\n\r\n### Transpilers\r\n\r\nLearn what transpilers are and why we need them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fscotch.io\" alt=\"Logo\" /\u003e Scotch - Javascript Transpilers](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fthenewstack.io\" alt=\"Logo\" /\u003e What JavaScript Programmers Need to Know about Transpilers](https://thenewstack.io/javascript-transpilers-need-know/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Source-to-source compiler](https://en.wikipedia.org/wiki/Source-to-source_compiler)\r\n\r\n#### Babel\r\n\r\nLearn about Babel and how you can use it to transpile your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Complete Babel 7 Guide for Beginners](https://medium.com/@onlykiosk/complete-babel-7-guide-for-beginners-in-2019-7dd78214c464)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbabeljs.io\" alt=\"Logo\" /\u003e Babel - What is Babel?](https://babeljs.io/docs/en/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbabeljs.io\" alt=\"Logo\" /\u003e Babel - Usage Guide](https://babeljs.io/docs/en/usage)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e A Beginner’s Guide to Babel](https://www.sitepoint.com/babel-beginners-guide/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Moving to ES6 — Babel and Transpilers](https://hackernoon.com/moving-to-es6-babel-and-transpilers-337921c025b1)\r\n\r\n#### Typescript\r\n\r\nLearn how to use Typescript and how it can help making your code typesafe.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.typescriptlang.org\" alt=\"Logo\" /\u003e Typescript - Documentation](http://www.typescriptlang.org/docs/home.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Typescript: Why should one use i?](https://medium.com/tech-tajawal/typescript-why-should-one-use-it-a539faa92010)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Why TypeScript is the best way to write Front-end in 2019](https://medium.com/@jtomaszewski/why-typescript-is-the-best-way-to-write-front-end-in-2019-feb855f9b164)\r\n\r\n### CSS Pre-processors\r\n\r\nLearn about CSS pre-processors and why we need them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Advantages of Using a Preprocessor](https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Deconfusing Pre- and Post-processing](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3)\r\n\r\n#### SASS\r\n\r\nLearn about SASS and how you can use it to simplify your styles.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsass-lang.com\" alt=\"Logo\" /\u003e SASS - Guide](https://sass-lang.com/guide)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fraygun.com\" alt=\"Logo\" /\u003e 10 Reasons to Use a CSS Preprocessor in 2018](https://raygun.com/blog/10-reasons-css-preprocessor/)\r\n\r\n#### PostCSS\r\n\r\nLearn about PostCSS and how you can use its ecosystem of plugins to extend your CSS build pipeline.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fpostcss.org\" alt=\"Logo\" /\u003e PostCSS](https://postcss.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e What is PostCSS?](https://www.sitepoint.com/an-introduction-to-postcss/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e Introduction to PostCSS](https://flaviocopes.com/postcss/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.logrocket.com\" alt=\"Logo\" /\u003e Getting started with PostCSS in 2019](https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/)\r\n\r\n### Node.js\r\n\r\nLearn how to use Node.js.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fnodejs.org\" alt=\"Logo\" /\u003e Node.js](https://nodejs.org)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fnodejs.dev\" alt=\"Logo\" /\u003e Introduction to Node.js](https://nodejs.dev/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fnodejs.org\" alt=\"Logo\" /\u003e Node.js - Guides](https://nodejs.org/en/docs/guides/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - Node.js tutorial](https://www.w3schools.com/nodejs/)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#frameworks--libraries)\r\n\r\n## ➤ Frameworks \u0026 Libraries\r\n\r\n### lit-element\r\n\r\nLearn how to use lit-element for creating fast, lightweight web components.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flit-element.polymer-project.org\" alt=\"Logo\" /\u003e lit-element](https://lit-element.polymer-project.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Lightning-fast templates](https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvaadin.com\" alt=\"Logo\" /\u003e Vaadin - Creating a LitElement project](https://vaadin.com/tutorials/lit-element/starting-a-lit-element-project)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Web Components: from zero to hero, part three](https://dev.to/thepassle/web-components-from-zero-to-hero-part-three-3c5h)\r\n\r\n### Vue\r\n\r\nLearn about Vue and how you can use it for building web apps.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvuejs.org\" alt=\"Logo\" /\u003e Vue](https://vuejs.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcli.vuejs.org\" alt=\"Logo\" /\u003e Vue - CLI](https://cli.vuejs.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.taniarascia.com\" alt=\"Logo\" /\u003e Getting Started with Vue](https://www.taniarascia.com/getting-started-with-vue/)\r\n\r\n### React\r\n\r\nLearn about React and how you can use it for building web apps.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Freactjs.org\" alt=\"Logo\" /\u003e React](https://reactjs.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - React](https://web.dev/react)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.taniarascia.com\" alt=\"Logo\" /\u003e Getting Started with React](https://www.taniarascia.com/getting-started-with-react/)\r\n\r\n### Angular\r\n\r\nLearn about Angular and how you can use it for building web apps.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fangular.io\" alt=\"Logo\" /\u003e Angular](https://angular.io/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Angular](https://web.dev/angular)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcli.angular.io\" alt=\"Logo\" /\u003e Angular - CLI](https://cli.angular.io/)\r\n\r\n### Svelte\r\n\r\nLearn about Svelte and how it can convert your component into highly efficient imperative code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsvelte.dev\" alt=\"Logo\" /\u003e Svelte](https://svelte.dev/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Svelte FAQ](https://github.com/sveltejs/svelte/wiki/FAQ)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsvelte.dev\" alt=\"Logo\" /\u003e Svelte - Rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)\r\n\r\n### Stencil\r\n\r\nLearn how Stencil can be used for generating small, fast web components.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstenciljs.com\" alt=\"Logo\" /\u003e Stencil](https://stenciljs.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator - Getting Started With Stencil](https://alligator.io/stencil/getting-started/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e How to Build Reusable Web Components Using Stenciljs](https://codeburst.io/how-to-build-web-components-using-stenciljs-afacc5451c2d)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#testing)\r\n\r\n## ➤ Testing\r\n\r\n### Testing Methodologies\r\n\r\nLearn about various software testing methodologies and why it is important to test your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Software testing](https://en.wikipedia.org/wiki/Software_testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsmartbear.com\" alt=\"Logo\" /\u003e Software Testing Methodologies](https://smartbear.com/learn/automated-testing/software-testing-methodologies/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.inflectra.com\" alt=\"Logo\" /\u003e Learn The Methods \u0026 Tools](https://www.inflectra.com/ideas/topic/testing-methodologies.aspx)\r\n\r\n#### Unit Testing\r\n\r\nLearn about unit testing and how it can be used to test individual units of code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Unit Testing Tutorial](https://www.guru99.com/unit-testing-guide.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Unit testing](https://en.wikipedia.org/wiki/Unit_testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e What is Unit Testing?](https://www.tutorialspoint.com/software_testing_dictionary/unit_testing.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e The Arrange, Act and Assert (AAA) Pattern](https://medium.com/@pjbgf/title-testing-code-ocd-and-the-aaa-pattern-df453975ab80)\r\n\r\n#### Integration Testing\r\n\r\nLearn about integration testing and how it can be used to test modules as a group.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Integration Testing Tutorial](https://www.guru99.com/integration-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e What is Integration Testing?](https://www.tutorialspoint.com/software_testing_dictionary/integration_testing.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Integration Testing](http://softwaretestingfundamentals.com/integration-testing/)\r\n\r\n#### System Testing\r\n\r\nLearn about system testing and how it can be used to test the fully integrated software product.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e System Testing Tutorial](https://www.guru99.com/system-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e What is System Testing?](https://www.tutorialspoint.com/software_testing_dictionary/system_testing.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e System Testing](http://softwaretestingfundamentals.com/system-testing/)\r\n\r\n#### Acceptance Testing\r\n\r\nLearn about acceptance testing and how it can be used to test the software for acceptability\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is User Acceptance Testing?](https://www.guru99.com/user-acceptance-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Acceptance Testing](http://softwaretestingfundamentals.com/acceptance-testing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e What is Acceptance Testing?](https://www.tutorialspoint.com/software_testing_dictionary/acceptance_testing.htm)\r\n\r\n#### Smoke Testing\r\n\r\nLearn about smoke testing and how it can be used to ensure that critical functionalities of the program are working fine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Sanity Testing Vs Smoke Testing](https://www.guru99.com/smoke-sanity-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Smoke Testing](http://softwaretestingfundamentals.com/smoke-testing/)\r\n\r\n#### Performance Testing\r\n\r\nLearn about performance testing and how it can be used to determine the responsiveness and stability of a program.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Performance Testing Tutorial](https://www.guru99.com/performance-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Performance Testing](http://softwaretestingfundamentals.com/performance-testing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Software performance testing](https://en.wikipedia.org/wiki/Software_performance_testing)\r\n\r\n#### Usability Testing\r\n\r\nLearn about usability testing and how it can be used to determine if the system is easily usable for the end-user.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is Usability Testing?](https://www.guru99.com/usability-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Usability Testing](http://softwaretestingfundamentals.com/usability-testing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Usability testing](https://en.wikipedia.org/wiki/Usability_testing)\r\n\r\n#### White Box Testing\r\n\r\nLearn about white box testing and how it can be used to test the software's internal structure, design, and coding.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is White Box Testing?](https://www.guru99.com/white-box-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e White Box Testing](http://softwaretestingfundamentals.com/white-box-testing/)\r\n\r\n#### Black Box Testing\r\n\r\nLearn about black box testing and how a test can be carried out without looking at the internal code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is Black Box Testing?](https://www.guru99.com/black-box-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsoftwaretestingfundamentals.com\" alt=\"Logo\" /\u003e Black Box Testing](http://softwaretestingfundamentals.com/black-box-testing/)\r\n\r\n#### Automated Testing\r\n\r\nLearn about automated testing and when it should be applied.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsmartbear.com\" alt=\"Logo\" /\u003e What is Automated Testing?](https://smartbear.com/learn/automated-testing/what-is-automated-testing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Automated Testing Tutorial](https://www.guru99.com/automation-testing.html)\r\n\r\n#### Manual Testing\r\n\r\nLearn about manual testing and when it should be applied.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Manual Testing Tutorial](https://www.guru99.com/manual-testing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Manual Testing](https://en.wikipedia.org/wiki/Manual_testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e What is Manual Testing?](https://www.tutorialspoint.com/software_testing_dictionary/manual_testing.htm)\r\n\r\n### Continuous integration\r\n\r\nLearn about continuous integration and it can enable iterative software development.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Continuous Integration Explained](https://dev.to/markoa/continuous-integration-explained-59f9)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Continuous Integration Tutorial](https://www.tutorialspoint.com/continuous_integration/index.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Continuous integration](https://en.wikipedia.org/wiki/Continuous_integration)\r\n\r\n### A/B Testing\r\n\r\nLearn about A/B testing and how it can be used to optimize your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - A/B testing: introduction](https://dev.to/ice_lenor/ab-testing-introduction-3jpd)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - When Not To A/B Test](https://dev.to/ice_lenor/when-not-to-ab-test-4cc7)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.optimizely.com\" alt=\"Logo\" /\u003e A/B Testing](https://www.optimizely.com/optimization-glossary/ab-testing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - A/B testing](https://en.wikipedia.org/wiki/A/B_testing)\r\n\r\n### Test Runners\r\n\r\nLearn about test runners and how they can help running tests.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Famzotti.github.io\" alt=\"Logo\" /\u003e Classifications of Testing Software](https://amzotti.github.io/testing/2015/03/16/what-is-the-difference-between-a-test-runner-testing-framework-assertion-library-and-a-testing-plugin/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Javascript Testing](https://www.udacity.com/course/javascript-testing--ud549)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e JavaScript Unit Testing Frameworks](https://www.guru99.com/javascript-unit-testing-frameworks.html)\r\n\r\n#### Karma\r\n\r\nLearn about the Karma test runner.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fkarma-runner.github.io\" alt=\"Logo\" /\u003e Karma](https://karma-runner.github.io/latest/index.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Getting started with Karma and Mocha](https://medium.com/@jazcodes/getting-started-with-karma-and-mocha-for-automated-browser-tests-5ebb6cd02edf)\r\n\r\n#### Mocha\r\n\r\nLearn about the Mocha testing framework.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmochajs.org\" alt=\"Logo\" /\u003e Mocha](https://mochajs.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.logrocket.com\" alt=\"Logo\" /\u003e A quick and complete guide to Mocha testing](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e How to test JavaScript with Mocha](https://codeburst.io/how-to-test-javascript-with-mocha-the-basics-80132324752e)\r\n\r\n#### Jasmine\r\n\r\nLearn about the Jasmine testing frameworks.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjasmine.github.io\" alt=\"Logo\" /\u003e Jasmine](https://jasmine.github.io/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e How to set up a testing environment with Jasmine and karma](https://medium.com/bb-tutorials-and-thoughts/javascript-how-to-set-up-a-testing-environment-with-jasmine-and-karma-58591dd39734)\r\n\r\n#### Cypress\r\n\r\nLearn how to use Cypress for end-to-end-testing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.cypress.io\" alt=\"Logo\" /\u003e Cypress](https://www.cypress.io/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebdevstudios.com\" alt=\"Logo\" /\u003e End-to-End Testing with Cypress](https://webdevstudios.com/2018/11/13/end-to-end-testing-with-cypress-io/)\r\n\r\n#### Ava\r\n\r\nLearn about the Ava test runner.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Ava](https://github.com/avajs/ava)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fpusher.com\" alt=\"Logo\" /\u003e A Fresh Take On JavaScript Testing](https://pusher.com/sessions/meetup/the-js-roundabout/ava-test-runner-a-fresh-take-on-javascript-testing-and-growing-an-open-source-project)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - How you can test your Node.js applications](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)\r\n\r\n### Best Practices\r\n\r\nLearn about the best practices when it comes to testing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Javascript Testing Best Practices](https://github.com/goldbergyoni/javascript-testing-best-practices)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quora.com\" alt=\"Logo\" /\u003e What are the best practices in software Testing?](https://www.quora.com/What-are-the-best-practices-in-software-Testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.qasymphony.com\" alt=\"Logo\" /\u003e 7 Software Testing Best Practices](https://www.qasymphony.com/blog/7-software-testing-best-practices/)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#architecture--paradigms)\r\n\r\n## ➤ Architecture \u0026 paradigms\r\n\r\n### Paradigms\r\n\r\n### Programming Paradigms\r\n\r\nLearn how programming languages can be categoried into different paraigmes based on their features.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Programming paradigm](https://en.wikipedia.org/wiki/Programming_paradigm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Introduction of Programming Paradigms](https://www.geeksforgeeks.org/introduction-of-programming-paradigms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What Are JavaScript Programming Paradigms?](https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb)\r\n\r\n### Object Oriented Programming\r\n\r\nLearn about object oriented programming and how objects can make your code easier to read and debug.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Object-oriented JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - An introduction to Object-Oriented Programming](https://www.freecodecamp.org/news/an-introduction-to-object-oriented-programming-in-javascript-8900124e316a/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Introduction to Object Oriented Programming in JavaScript](https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/)\r\n\r\n#### S.O.L.I.D\r\n\r\nLearn about the SOLID design pricinples that can make your code more understandable, flexible and maintainable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - SOLID](https://en.wikipedia.org/wiki/SOLID)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fscotch.io\" alt=\"Logo\" /\u003e S.O.L.I.D: The First 5 Principles of Object Oriented Design](https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript](https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa)\r\n\r\n### Functional programming\r\n\r\nLearn about functional programming and how it can make your code easier to read and debug.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fopensource.com\" alt=\"Logo\" /\u003e An introduction to functional programming in JavaScript](https://opensource.com/article/17/6/functional-javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Functional Programming in JavaScript](https://codeburst.io/functional-programming-in-javascript-e57e7e28c0e5)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e The power of functional programming in Javascript](https://itnext.io/the-power-of-functional-programming-in-javascript-cc9797a42b60)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e An introduction to Functional Programming](https://flaviocopes.com/javascript-functional-programming/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Basic Functional Programming Patterns in JavaScript](https://dev.to/nestedsoftware/basic-functional-programming-patterns-in-javascript-49p2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Functional-ish JavaScript](https://medium.com/@bluepnume/functional-ish-javascript-205c05d0ed08)\r\n\r\n#### Recursion\r\n\r\nLearn about recursion and when it can be used to make your code more readable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Learn and Understand Recursion in JavaScript](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Understanding Recursion in JavaScript](https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Recursion in JavaScript](https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Recursion and stack](https://javascript.info/recursion)\r\n\r\n#### Higher-Order Functions\r\n\r\nLearn about higher-order functions and when it can be used to make your code more readable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e Higher-Order Functions](https://www.sitepoint.com/higher-order-functions-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - A quick intro to Higher-Order Functions](https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Higher-Order function](https://en.wikipedia.org/wiki/Higher-order_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e Understanding Higher-Order Functions in JavaScript](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)\r\n\r\n#### Currying\r\n\r\nLearn about currying and when it can be used to make your code more readable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - All you need to know about currying](https://dev.to/bettercodingacademy/functional-programming-all-you-need-to-know-about-currying-5k7)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgideonpyzer.dev\" alt=\"Logo\" /\u003e JavaScript: Currying and Partial Application](https://gideonpyzer.dev/blog/2017/01/14/javascript-currying-and-partial-application/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Curry and Function Composition](https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Currying](https://en.wikipedia.org/wiki/Currying)\r\n\r\n#### Monads\r\n\r\nLearn about monads and when it can be used to make your code more readable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Monad, FunFunFunction](https://www.youtube.com/watch?v=9QveBbn7t_c)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Functors, FunFunFunction ](https://www.youtube.com/watch?v=YLIH8TKbAh4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Functional JavaScript - Functors, Monads, and Promises](https://dev.to/joelnet/functional-javascript---functors-monads-and-promises-1pol)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Monad](https://en.wikipedia.org/wiki/Monad_(functional_programming))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e JavaScript Monads Made Simple](https://medium.com/javascript-scene/javascript-monads-made-simple-7856be57bfe8)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Implementing JavaScript Functors and Monads](https://medium.com/front-end-weekly/implementing-javascript-functors-and-monads-a87b6a4b4d9a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)\r\n\r\n\r\n### Architecture\r\n\r\n### Design Patterns\r\n\r\nLearn how commonly occurring problems can be solved using design patterns.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Software design pattern](https://en.wikipedia.org/wiki/Software_design_pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e The 7 Most Important Software Design Patterns](https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Software Design Patterns](https://www.geeksforgeeks.org/software-design-patterns/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Design Patterns](https://refactoring.guru/design-patterns)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e JavaScript Design Patterns](https://www.dofactory.com/javascript/design-patterns)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Design Patterns in TypeScript](https://github.com/torokmark/design_patterns_in_typescript)\r\n\r\n#### Singleton\r\n\r\nLearn about the singleton design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Singleton Pattern](https://refactoring.guru/design-patterns/singleton)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Singleton Example](https://www.dofactory.com/javascript/singleton-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Singleton Pattern](https://en.wikipedia.org/wiki/Singleton_pattern)\r\n\r\n#### Observer\r\n\r\nLearn about the observer design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Observer Pattern](https://refactoring.guru/design-patterns/observer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Observer Example](https://www.dofactory.com/javascript/observer-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern)\r\n\r\n#### Prototype\r\n\r\nLearn about the prototype design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Prototype Pattern](https://refactoring.guru/design-patterns/prototype)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Prototype Example](https://www.dofactory.com/javascript/prototype-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Prototype pattern](https://en.wikipedia.org/wiki/Prototype_pattern)\r\n\r\n#### Bridge\r\n\r\nLearn about the bridge design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Bridge Pattern](https://refactoring.guru/design-patterns/bridge)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Bridge Example](https://www.dofactory.com/javascript/bridge-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Bridge pattern](https://en.wikipedia.org/wiki/Bridge_pattern)\r\n\r\n#### Proxy\r\n\r\nLearn about the proxy design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Proxy Pattern](https://refactoring.guru/design-patterns/proxy)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Proxy Example](https://www.dofactory.com/javascript/proxy-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Proxy pattern](https://en.wikipedia.org/wiki/Proxy_pattern)\r\n\r\n#### Chain of responsibility\r\n\r\nLearn about the chain of responsibility design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoring.guru\" alt=\"Logo\" /\u003e Chain of Responsibility Pattern](https://refactoring.guru/design-patterns/chain-of-responsibility)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.dofactory.com\" alt=\"Logo\" /\u003e Chain of Responsibility Example](https://www.dofactory.com/javascript/chain-of-responsibility-design-pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Chain of responsibility](https://en.wikipedia.org/wiki/Chain-of-responsibility_pattern)\r\n\r\n#### Constructor\r\n\r\nLearn about the constructor design pattern and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.oreilly.com\" alt=\"Logo\" /\u003e The Constructor Pattern](https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s01.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Fundamental Object Design Patterns in JavaScript](https://medium.com/@severinperez/javascript-weekly-fundamental-object-design-patterns-31453f68427f)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstackoverflow.com\" alt=\"Logo\" /\u003e Difference between Constructor pattern and Prototype pattern](https://stackoverflow.com/questions/35057827/difference-between-constructor-pattern-and-prototype-pattern)\r\n\r\n### CSS Methodologies\r\n\r\nLearn how CSS can be structured using CSS methodologies.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.webfx.com\" alt=\"Logo\" /\u003e A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.creativebloq.com\" alt=\"Logo\" /\u003e A web designer's guide to CSS methodologies](https://www.creativebloq.com/features/a-web-designers-guide-to-css-methodologies)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.hongkiat.com\" alt=\"Logo\" /\u003e Understanding CSS Writing Methodologies](https://www.hongkiat.com/blog/css-writing-methodologies/)\r\n\r\n#### BEM\r\n\r\nLearn about the BEM methodology and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fgetbem.com\" alt=\"Logo\" /\u003e Get BEM](http://getbem.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - BEM 101](https://css-tricks.com/bem-101/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What is BEM? And Why you should use it in your project.](https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79)\r\n\r\n#### SMACSS\r\n\r\nLearn about the SMACSS methodology and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fsmacss.com\" alt=\"Logo\" /\u003e SMACSS](http://smacss.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e BEM vs SMACSS](https://www.sitepoint.com/bem-smacss-advice-from-developers/)\r\n\r\n#### OOCSS\r\n\r\nLearn about the OOCSS methodology and when it should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e OOCSS](https://github.com/stubbornella/oocss/wiki)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e An Introduction To Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.keycdn.com\" alt=\"Logo\" /\u003e The Future of Writing CSS](https://www.keycdn.com/blog/oocss)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#team-collaboration)\r\n\r\n## ➤ Team Collaboration\r\n\r\n### Version Control\r\n\r\n### Git\r\n\r\nLearn about git and how it is used for version control.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flearngitbranching.js.org\" alt=\"Logo\" /\u003e Learn Git Branching](https://learngitbranching.js.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fguides.github.com\" alt=\"Logo\" /\u003e Git Handbook](https://guides.github.com/introduction/git-handbook/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.github.com\" alt=\"Logo\" /\u003e Github Cheatsheet](https://github.github.com/training-kit/downloads/github-git-cheat-sheet/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fgit-school.github.io\" alt=\"Logo\" /\u003e Visualizing Git](http://git-school.github.io/visualizing-git/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Codecademy - Learn Gitthis](https://www.codecademy.com/learn/learn-git)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgit-hint.netlify.com\" alt=\"Logo\" /\u003e Git Hint](https://git-hint.netlify.com/)\r\n\r\n#### Github\r\n\r\nLearn how to use Github.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fguides.github.com\" alt=\"Logo\" /\u003e What is GitHub?](https://guides.github.com/activities/hello-world/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flab.github.com\" alt=\"Logo\" /\u003e GitHub Learning Lab](https://lab.github.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Github](https://en.wikipedia.org/wiki/Github)\r\n\r\n#### Bitbucket\r\n\r\nLearn how to use Bitbucket.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Bitbucket](https://en.wikipedia.org/wiki/Bitbucket)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fconfluence.atlassian.com\" alt=\"Logo\" /\u003e Tutorial: Learn Bitbucket with Git](https://confluence.atlassian.com/bitbucket/tutorial-learn-bitbucket-with-git-759857287.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tecmint.com\" alt=\"Logo\" /\u003e Getting Started with Bitbucket for Version Control](https://www.tecmint.com/bitbucket-for-version-control/)\r\n\r\n\r\n### Management\r\n\r\n### Agile Development\r\n\r\nLearn about agile development and when to use it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Agile software development](https://en.wikipedia.org/wiki/Agile_software_development)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.infoworld.com\" alt=\"Logo\" /\u003e What is agile methodology?](https://www.infoworld.com/article/3237508/what-is-agile-methodology-modern-software-development-explained.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.visual-paradigm.com\" alt=\"Logo\" /\u003e What is Agile Software Development?](https://www.visual-paradigm.com/scrum/what-is-agile-software-development/)\r\n\r\n#### Scrum\r\n\r\nLearn about scrum and when to use it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.knowledgehut.com\" alt=\"Logo\" /\u003e Scrum Tutorial](https://www.knowledgehut.com/tutorials/scrum-tutorial)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Scrum - Overview](https://www.tutorialspoint.com/scrum/scrum_overview.htm)\r\n\r\n#### Kanban\r\n\r\nLearn about kanban and when to use it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Kanban Tutorial](https://www.tutorialspoint.com/kanban/kanban_introduction.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.atlassian.com\" alt=\"Logo\" /\u003e What is kanban?](https://www.atlassian.com/agile/kanban)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.scrumhub.com\" alt=\"Logo\" /\u003e Kanban Fundamentals](https://www.scrumhub.com/kanban-fundamentals/)\r\n\r\n### Waterfall Development\r\n\r\nLearn about waterfall development and when to use it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Waterfall Model](https://www.tutorialspoint.com/sdlc/sdlc_waterfall_model.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.seguetech.com\" alt=\"Logo\" /\u003e Waterfall vs. Agile](https://www.seguetech.com/waterfall-vs-agile-methodology/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fairbrake.io\" alt=\"Logo\" /\u003e Waterfall Model: What and when](https://airbrake.io/blog/sdlc/waterfall-model)\r\n\r\n### Test Driven Development\r\n\r\nLearn about test driven development and when to use it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Test-driven development](https://en.wikipedia.org/wiki/Test-driven_development)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Red, Green, Refactor](https://www.codecademy.com/articles/tdd-red-green-refactor)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Test Driven Development](https://www.freecodecamp.org/news/test-driven-development-what-it-is-and-what-it-is-not-41fa6bca02a2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e TDD Changed My Life](https://medium.com/javascript-scene/tdd-changed-my-life-5af0ce099f80)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Test-driven development in JavaScript](https://dev.to/tomekbuszewski/test-driven-development-in-javascript-olg)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#design--ux)\r\n\r\n## ➤ Design \u0026 UX\r\n\r\n### Color Theory\r\n\r\nLearn about color theory and how you can make your own color schemes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e All you need to know about colors in UI Design](https://uxdesign.cc/all-you-need-to-know-about-colors-in-ui-design-theory-practice-235179712522)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.toptal.com\" alt=\"Logo\" /\u003e The Role of Color in UX](https://www.toptal.com/designers/ux/color-in-ux)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.muz.li\" alt=\"Logo\" /\u003e 10 Questions of Color Theory](https://medium.muz.li/10-questions-of-color-theory-that-will-make-you-a-better-ux-designer-b5244c1341a6)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Color Theory](https://en.wikipedia.org/wiki/Color_theory)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e The Meaning of Color](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvisme.co\" alt=\"Logo\" /\u003e 50 Gorgeous Color Schemes](https://visme.co/blog/website-color-schemes/)\r\n\r\n#### Color Wheel\r\n\r\nLearn how to use the color wheel when making a color scheme.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxplanet.org\" alt=\"Logo\" /\u003e Color Theory: Brief Guide For Designers](https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.canva.com\" alt=\"Logo\" /\u003e Color theory and the color wheel](https://www.canva.com/colors/color-wheel/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F99designs.dk\" alt=\"Logo\" /\u003e The fundamentals of understanding color theory](https://99designs.dk/blog/tips/the-7-step-guide-to-understanding-color-theory/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcolor.adobe.com\" alt=\"Logo\" /\u003e Adobe - Color wheel](https://color.adobe.com/)\r\n\r\n### Typography\r\n\r\nLearn about typography and how to describe fonts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Google - Understanding typography](https://material.io/design/typography/understanding-typography.html#type-classification)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.howtogeek.com\" alt=\"Logo\" /\u003e How to Understand Typography](https://www.howtogeek.com/howto/30065/how-to-understand-typography-like-a-professional-designer/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Typography Elements Everyone Needs to Understand](https://medium.com/gravitdesigner/typography-elements-everyone-needs-to-understand-5fdea82f470d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - 10 rules to help you rule type](https://www.youtube.com/watch?v=QrNi9FmdlxY)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.canva.com\" alt=\"Logo\" /\u003e Font Design](https://www.canva.com/learn/font-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.hubspot.com\" alt=\"Logo\" /\u003e Typography Tutorial for Beginners](https://blog.hubspot.com/marketing/typography-terms-introduction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.jotform.com\" alt=\"Logo\" /\u003e A Crash Course in Typography](https://www.jotform.com/blog/a-crash-course-in-typography-the-basics-of-type/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.fonts.com\" alt=\"Logo\" /\u003e Type Classifications](https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ffonts.google.com\" alt=\"Logo\" /\u003e Google Fonts](https://fonts.google.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e 7 web typography rules](https://uxdesign.cc/7-web-typography-rules-27de68c60f6)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.muz.li\" alt=\"Logo\" /\u003e 15 Best Practices To Excellent UI](https://medium.muz.li/typography-in-mobile-design-15-best-practices-to-excellent-ui-5eaf18280ad)\r\n\r\n#### Font Size\r\n\r\nLearn about font sizes and how to choose the right one.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftype-scale.com\" alt=\"Logo\" /\u003e Type scale](https://type-scale.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.cardinalpath.com\" alt=\"Logo\" /\u003e The importance of font size](https://www.cardinalpath.com/the-importance-of-font-size/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.liveseysolar.com\" alt=\"Logo\" /\u003e Website font size: Size does matter](https://www.liveseysolar.com/website-font-size-size-does-matter/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - font-size](https://css-tricks.com/almanac/properties/f/font-size/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/)\r\n\r\n#### Line Spacing\r\n\r\nLearn about line spacing and how to choose the right one.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.justinmind.com\" alt=\"Logo\" /\u003e Best UX practices for line spacing](https://www.justinmind.com/blog/best-ux-practices-for-line-spacing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fpracticaltypography.com\" alt=\"Logo\" /\u003e Line spacing](https://practicaltypography.com/line-spacing.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.invisionapp.com\" alt=\"Logo\" /\u003e Why you should go big with line spacing](https://www.invisionapp.com/inside-design/line-spacing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - line-height](https://css-tricks.com/almanac/properties/l/line-height/)\r\n\r\n### C.R.A.P\r\n\r\nLearn how the C.R.A.P. design principles can help you point out the qualities (or flaws) in a design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvwo.com\" alt=\"Logo\" /\u003e Build Better User Experience](https://vwo.com/blog/crap-design-principles/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.instructables.com\" alt=\"Logo\" /\u003e CRAP Principles](https://www.instructables.com/id/CRAP-principles/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.amazon.com\" alt=\"Logo\" /\u003e The Non-Designer's Design Book](https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - The Non-Designers Design Book](https://www.youtube.com/watch?v=NZ3ryLUR8CI)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcreativemarket.com\" alt=\"Logo\" /\u003e How CRAP Will Make You a Better Designer](https://creativemarket.com/blog/how-crap-will-make-you-a-better-designer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.presentationzen.com\" alt=\"Logo\" /\u003e The Big Four: Contrast, Repetition, Alignment, Proximity](https://www.presentationzen.com/chapter6_spread.pdf)\r\n\r\n#### Contrast\r\n\r\nLearn how the principles of contrast can help you when designing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.canva.com\" alt=\"Logo\" /\u003e Designing with contrast: 20 tips from a designer](https://www.canva.com/learn/contrasting-colors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Contrast Design principle of Graphic Design](https://www.youtube.com/watch?v=r0SAPEw0ru4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.designcontest.com\" alt=\"Logo\" /\u003e Contrast In Design](https://www.designcontest.com/blog/contrast-in-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.webdesignerdepot.com\" alt=\"Logo\" /\u003e Fully understanding contrast in design](https://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/)\r\n\r\n#### Repetition\r\n\r\nLearn how the principles of repetition can help you when designing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Repetition Design principle of Graphic Design](https://www.youtube.com/watch?v=u55BW6WBqVU)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F254-online.com\" alt=\"Logo\" /\u003e Repetition Principle of Design](https://254-online.com/repetition-principle-of-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interaction-design.org\" alt=\"Logo\" /\u003e Repetition, Pattern, and Rhythm](https://www.interaction-design.org/literature/article/repetition-pattern-and-rhythm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.johnlovett.com\" alt=\"Logo\" /\u003e Repetition, principles of design](https://www.johnlovett.com/repetition)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.edgee.net\" alt=\"Logo\" /\u003e How to Use Repetition Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-repetition-effectively/)\r\n\r\n#### Alignment\r\n\r\nLearn how the principles of alignment can help you when designing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Alignment Design principle of Graphic Design](https://www.youtube.com/watch?v=2kokQi9vb6E)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F254-online.com\" alt=\"Logo\" /\u003e Alignment Principle Of Design](https://254-online.com/alignment-principle-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.designmantic.com\" alt=\"Logo\" /\u003e The Art Of Alignment In Graphic Design](https://www.designmantic.com/blog/art-of-alignment-graphic-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxengineer.com\" alt=\"Logo\" /\u003e Introduction to Alignment](https://uxengineer.com/principles-of-design/alignment/)\r\n\r\n#### Proximity\r\n\r\nLearn how the principles of proximity can help you when designing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Proximity Design principle of Graphic Design](https://www.youtube.com/watch?v=xUdqSiI_G8Y)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.edgee.net\" alt=\"Logo\" /\u003e How to Use Proximity Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-proximity-effectively/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F254-online.com\" alt=\"Logo\" /\u003e Proximity Principle Of Design](https://254-online.com/proximity-principle-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxplanet.org\" alt=\"Logo\" /\u003e Gestalt Theory for UX Design: Principle of Proximity](https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e Principles of Design: Proximity](https://www.sitepoint.com/principles-of-design-proximity/)\r\n\r\n### Consistency\r\n\r\nLearn why consistency is one of the most important building-blocks in a design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Design principle: Consistency](https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.prototypr.io\" alt=\"Logo\" /\u003e Consistency, A Key Design Principle](https://blog.prototypr.io/consistency-a-key-design-principle-5d125469da8e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interaction-design.org\" alt=\"Logo\" /\u003e Consistency: MORE than what you think](https://www.interaction-design.org/literature/article/consistency-more-than-what-you-think)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interaction-design.org\" alt=\"Logo\" /\u003e Principle of Consistency in User Interface Design](https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.invisionapp.com\" alt=\"Logo\" /\u003e The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)\r\n\r\n### Spacing\r\n\r\nLearn how to use space in your design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Space in Design Systems](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvisme.co\" alt=\"Logo\" /\u003e How to use spacing margin and spacing in design](https://visme.co/blog/how-to-properly-use-margins-and-spacing-in-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvanseodesign.com\" alt=\"Logo\" /\u003e How To Use Space In Design](https://vanseodesign.com/web-design/design-space/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.prototypr.io\" alt=\"Logo\" /\u003e Importance of White Space in Design](https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftubikstudio.com\" alt=\"Logo\" /\u003e Negative Space in Design](https://tubikstudio.com/negative-space-in-design-tips-and-best-practices-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.shutterstock.com\" alt=\"Logo\" /\u003e How to Change Line Spacing in InDesign](https://www.shutterstock.com/support/article/how-to-change-line-spacing-in-indesign)\r\n\r\n### Error Handling\r\n\r\nLearn how to improve the user experience by handling errors in an intuitive way.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Design an Error Handling System before you structure your App](https://medium.com/lattice-product-development/design-an-error-handling-system-before-you-structure-your-app-or-software-project-part-i-efe6a1674628)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuimovement.com\" alt=\"Logo\" /\u003e UI Error Handling](https://uimovement.com/tag/error-handling/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Creating Error Messages](https://uxdesign.cc/creating-error-messages-best-practice-in-ux-design-cda3be0f5e16)\r\n\r\n### Loading\r\n\r\nLearn how a loading state can improve the user experience.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Everything you need to know about skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Engaging users with progressive loading in skeleton screen](https://uxdesign.cc/engaging-users-with-progressive-loading-in-skeleton-screen-335a4e287a55)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmarinaaisa.com\" alt=\"Logo\" /\u003e Design and code responsive Skeleton Screens](https://marinaaisa.com/blog/design-and-code-skeletons-screens/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sitepoint.com\" alt=\"Logo\" /\u003e How to Speed Up Your UX with Skeleton Screens](https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.viget.com\" alt=\"Logo\" /\u003e A Bone to Pick with Skeleton Screens](https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e When to use loaders \u0026 empty states](https://uxdesign.cc/when-to-use-loaders-empty-states-ebd23cecc7d6)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.uisources.com\" alt=\"Logo\" /\u003e Empty/Loading State](https://www.uisources.com/pattern/empty-loading-state)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxmovement.com\" alt=\"Logo\" /\u003e When You Need to Show a Button’s Loading State](https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.iamsuleiman.com\" alt=\"Logo\" /\u003e Stop Using Loading Spinner](https://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/)\r\n\r\n### The Golden Ratio\r\n\r\nLearn how the golden ratio can help you when choose measurements for your design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdesignshack.net\" alt=\"Logo\" /\u003e The Golden Ratio in Design](https://designshack.net/articles/layouts/golden-ratio-in-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.invisionapp.com\" alt=\"Logo\" /\u003e A guide to the Golden Ratio for designers](https://www.invisionapp.com/inside-design/golden-ratio-designers/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.canva.com\" alt=\"Logo\" /\u003e What is the golden ratio](https://www.canva.com/learn/what-is-the-golden-ratio/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.creativebloq.com\" alt=\"Logo\" /\u003e The Golden Ratio: A designer's guide](https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.prototypr.io\" alt=\"Logo\" /\u003e Golden Ratio: What It Is And Why Should You Use It In Design](https://blog.prototypr.io/golden-ratio-what-it-is-and-why-should-you-use-it-in-design-7c3f43bcf98)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgrtcalculator.com\" alt=\"Logo\" /\u003e Golden Ratio Typography (GRT) Calculator](https://grtcalculator.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.companyfolders.com\" alt=\"Logo\" /\u003e How to Use the Golden Ratio](https://www.companyfolders.com/blog/golden-ratio-design-examples)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwpamelia.com\" alt=\"Logo\" /\u003e Golden Ratio in Design](https://wpamelia.com/golden-ratio/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.format.com\" alt=\"Logo\" /\u003e How To Use The Golden Ratio In Design](https://www.format.com/magazine/resources/design/golden-ratio-in-design)\r\n\r\n### Mobile First\r\n\r\nLearn about designing for mobile first and why it is important.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.justinmind.com\" alt=\"Logo\" /\u003e Complete guide to mobile first design](https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What is Mobile First Design?](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.uxpin.com\" alt=\"Logo\" /\u003e A Hands-On Guide to Mobile-First Responsive Design](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdesignshack.net\" alt=\"Logo\" /\u003e Mobile First Design](https://designshack.net/articles/mobile/mobilefirst/)\r\n\r\n#### Hit Targets\r\n\r\nLearn about hit targets can why they should not be neglected.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Finger-Friendly Design](https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Size matters! Accessibility and Touch Targets](https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxmovement.com\" alt=\"Logo\" /\u003e Optimal Size and Spacing for Mobile Buttons](https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/)\r\n\r\n### Design Systems\r\n\r\nLearn what design systems are and get familiar with some.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.invisionapp.com\" alt=\"Logo\" /\u003e A guide to design systems](https://www.invisionapp.com/inside-design/guide-to-design-systems/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e What the heck is a design system?](https://uxdesign.cc/what-the-heck-is-a-design-system-c89a8ea73b0d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Everything you need to know about Design Systems](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.muz.li\" alt=\"Logo\" /\u003e What is a Design System?](https://medium.muz.li/what-is-a-design-system-1e43d19e7696)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e What's a Design System](https://dev.to/graphqleditor/what-s-design-system-and-why-you-need-one-31fh)\r\n\r\n#### Material Design\r\n\r\nLearn about material design and get familiar with the core principles.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Google - Material Design](https://material.io/design/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Google - Material Components](https://material.io/components/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Google - Material Develop](https://material.io/develop/web/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Google - Material Tutorial](https://material.io/collections/developer-tutorials/#web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Material Design](https://en.wikipedia.org/wiki/Material_Design)\r\n\r\n#### Fluent Design\r\n\r\nLearn about fluent design and get familiar with the core principles.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.microsoft.com\" alt=\"Logo\" /\u003e Microsoft - Fluent Design System](https://www.microsoft.com/design/fluent/#/web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.microsoft.com\" alt=\"Logo\" /\u003e Microsoft - Fluent UI Toolkit](https://www.microsoft.com/design/fluent/toolkits/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Fluent Design System](https://en.wikipedia.org/wiki/Fluent_Design_System)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Fluent: Design Behind the Design](https://medium.com/microsoft-design/fluent-design-behind-the-design-973028062fcc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Iconic Icons: Designing the World of Windows](https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Evolving the Microsoft Fluent Design System](https://medium.com/microsoft-design/evolving-the-microsoft-fluent-design-system-9b37fb890c82)\r\n\r\n### Accessibility\r\n\r\nLearn how and why it is important to design for accessibility.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Designing For Accessibility And Inclusion](https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fuxdesign.cc\" alt=\"Logo\" /\u003e Designing for accessibility is not that hard](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftheblog.adobe.com\" alt=\"Logo\" /\u003e Designing Accessible Experiences at Scale](https://theblog.adobe.com/accessibility-design-at-scale/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmaterial.io\" alt=\"Logo\" /\u003e Material Design - Accessibility](https://material.io/design/usability/accessibility.html#)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Designing for Web Accessibility](https://www.w3.org/WAI/tips/designing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faccessibility.blog.gov.uk\" alt=\"Logo\" /\u003e Accessibility in government](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Visual Presentation](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\r\n\r\n### Best Practices\r\n\r\nLearn about some of the best practices when designing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quicksprout.com\" alt=\"Logo\" /\u003e 13 Website Design Best Practices For 2019](https://www.quicksprout.com/website-design-best-practices/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Design Best Practices](https://medium.com/thinking-design/design-best-practices/home)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frefactoringui.com\" alt=\"Logo\" /\u003e Refactoring UI](https://refactoringui.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Refactoring UI | CSS Day 2019](https://www.youtube.com/watch?v=7Z9rrryIOC4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.3pillarglobal.com\" alt=\"Logo\" /\u003e Dieter Ram' 10 principles for good design](https://www.3pillarglobal.com/insights/dieter-rams-10-principles-good-design)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#the-modern-web)\r\n\r\n## ➤ The Modern Web\r\n\r\n### Streams\r\n\r\nLearn about streams and how they can help you effeciently transporting data.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Streams API concepts](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Concepts)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeanhume.com\" alt=\"Logo\" /\u003e Experimenting with the Streams API](https://deanhume.com/experimenting-with-the-streams-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstreams.spec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - Streams](https://streams.spec.whatwg.org/)\r\n\r\n#### Media Streams\r\n\r\nLearn about media streams and how it is possible to get a stream to device specific hardware such as the camera or microphone.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Media Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - mediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fw3c.github.io\" alt=\"Logo\" /\u003e W3C - Media Capture and Streams](https://w3c.github.io/mediacapture-main/#dom-mediastream)\r\n\r\n#### Media Recorder\r\n\r\nLearn how to use the media recorder API to record media streams.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faddpipe.com\" alt=\"Logo\" /\u003e Media Recorder API Demo](https://addpipe.com/media-recorder-api-demo/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e WTC - MediaStream Recording](https://www.w3.org/TR/mediastream-recording/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Recording Media](https://whatwebcando.today/recording.html)\r\n\r\n#### Web RTC\r\n\r\nLearn how to use Web RTC for establishing real-time communication.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebrtc.org\" alt=\"Logo\" /\u003e WebRTC - Getting Started](https://webrtc.org/start/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebrtc.github.io\" alt=\"Logo\" /\u003e WebRTC samples](https://webrtc.github.io/samples/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - WebRTC](https://en.wikipedia.org/wiki/WebRTC)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - WebRTC](https://whatwebcando.today/realtime.html)\r\n\r\n#### Screen Capture\r\n\r\nLearn how to use the Screen Capture API for recording the screen.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Intro to Screen Capture API](https://dev.to/al_khovansky/intro-to-screen-capture-api-scanning-qr-codes-bgi)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Screen Capture](https://www.w3.org/TR/screen-capture/)\r\n\r\n#### Generators\r\n\r\nLearn how to use generator functions to define iterative algorithms by writing functions whose execution is not continuous.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.jeremyfairbank.com\" alt=\"Logo\" /\u003e Functional JavaScript - Streams](https://blog.jeremyfairbank.com/javascript/functional-javascript-streams-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Understanding Generators with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - yield*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Generators](https://javascript.info/generators)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - A Simple Guide to Understanding Javascript Generators](https://medium.com/dailyjs/a-simple-guide-to-understanding-javascript-es6-generators-d1c350551950)\r\n\r\n### Speech Synthesis\r\n\r\nLearn how the speech synthesis API can help you converting text to speech.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Web apps that talk](https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - window.speechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fw3c.github.io\" alt=\"Logo\" /\u003e W3C - Web Speech API](https://w3c.github.io/speech-api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e The Speech Synthesis API](https://flaviocopes.com/speech-synthesis-api/)\r\n\r\n### Web Sockets\r\n\r\nLearn about web sockets and how you can push data to your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Websockets API](https://developer.mozilla.org/en-US/docs/Web/API/Websockets_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What are Web Sockets?](https://medium.com/@dominik.t/what-are-web-sockets-what-about-rest-apis-b9c15fd72aac)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - Introducing WebSockets](https://www.html5rocks.com/en/tutorials/websockets/basics/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtml.spec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - Web sockets](https://html.spec.whatwg.org/multipage/web-sockets.html)\r\n\r\n### Geolocation\r\n\r\nLearn how to ask the user for permission to the location.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligrator - Using the Geolocation API](https://alligator.io/js/geolocation-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Maps Platform - Displaying User Position on Maps](https://developers.google.com/maps/documentation/javascript/geolocation)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Geolocation](https://whatwebcando.today/geolocation.html)\r\n\r\n### Device orientation \u0026 motion\r\n\r\nLearn how to measure the orientation and motion of the device.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Detecting device orientation](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - DeviceOrientation Event Specification](https://www.w3.org/TR/orientation-event/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - Introduction](https://www.html5rocks.com/en/tutorials/device/orientation/index.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Device Position](https://whatwebcando.today/device-position.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Generic Sensor API](https://www.w3.org/TR/generic-sensor/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Sensor APIs](https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Sensors For The Web](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)\r\n\r\n### Fullscreen\r\n\r\nLearn how to use the fullscreen API to give the user a more immersive experience when needed.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Let Your Content Do the Talking](https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdavidwalsh.name\" alt=\"Logo\" /\u003e David Walsh - Fullscreen API](https://davidwalsh.name/fullscreen)\r\n\r\n### Variable Fonts\r\n\r\nLearn how to use variable fonts and how it is possible to customize fonts without the need for loading more.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv-fonts.com\" alt=\"Logo\" /\u003e v-fonts](https://v-fonts.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Variable fonts guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to variable fonts](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - Variable Fonts](https://www.youtube.com/watch?v=B42rUMdcB7c)\r\n\r\n### HTTP/2\r\n\r\nLearn about the faster and more convenient HTTP/2 protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - HTTP/2](https://en.wikipedia.org/wiki/HTTP/2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e HTTP/2: the difference between HTTP/1.1](https://medium.com/@factoryhr/http-2-the-difference-between-http-1-1-benefits-and-how-to-use-it-38094fa0e95b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhttp2.github.io\" alt=\"Logo\" /\u003e HTTP/2 - FAQ](https://http2.github.io/faq/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.lucidchart.com\" alt=\"Logo\" /\u003e Why turning on HTTP/2 was a mistake](https://www.lucidchart.com/techblog/2019/04/10/why-turning-on-http2-was-a-mistake/)\r\n\r\n### Payment Request API\r\n\r\nLearn about the payment request API and how it can help monetize your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Payment Request API](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Codelabs - Payment Request API](https://developers.google.com/web/fundamentals/codelabs/payment-request-api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Payments](https://whatwebcando.today/payments.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Payment Request API](https://www.w3.org/TR/payment-request/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to the Payment Request API](https://developers.google.com/web/ilt/pwa/introduction-to-the-payment-request-api)\r\n\r\n### Web Audio\r\n\r\nLearn how to use the Web Audio API to add audio to your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using the Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Web Audio API](https://www.w3.org/TR/webaudio/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - Getting Started with Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/intro/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e All You Need to Know About the Web Audio API](https://medium.com/better-programming/all-you-need-to-know-about-the-web-audio-api-3df170559378)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator - Your First Steps with the Web Audio API](https://alligator.io/js/first-steps-web-audio-api/)\r\n\r\n### Observers\r\n\r\nLearn about the observer pattern and get comfortable concepts such as subjects and observers.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fchromatichq.com\" alt=\"Logo\" /\u003e Javascript Observers and You](https://chromatichq.com/blog/javascript-observers-and-you)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebdevstudios.com\" alt=\"Logo\" /\u003e How to Use the Observable Pattern in JavaScript](https://webdevstudios.com/2019/02/19/observable-pattern-in-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e The Observer Pattern with Vanilla JavaScript](https://medium.com/@patrickackerman/the-observer-pattern-with-vanilla-javascript-8f85ea05eaa8)\r\n\r\n#### Mutation Observer\r\n\r\nLearn how to use the Mutation Observer API to get informed about changes to the DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Listening to the DOM changes with MutationObserver](https://medium.com/@abbeal/listening-to-the-dom-changes-with-mutationobserver-b53a068a58d2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdavidwalsh.name\" alt=\"Logo\" /\u003e David Walsh - MutationObserver API](https://davidwalsh.name/mutationobserver-api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Mutation observer](https://javascript.info/mutation-observer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdom.spec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - Mutation observers](https://dom.spec.whatwg.org/#mutation-observers)\r\n\r\n#### Intersection Observer\r\n\r\nLearn how to use the Intersection Observer API can help you detect when an element is visible on the screen.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Intersection Observer](https://www.w3.org/TR/intersection-observer/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Trust is Good, Observation is Better](https://developers.google.com/web/updates/2019/02/intersectionobserver-v2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - An Explanation of Intersection Observers](https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Understanding the Intersection Observer API in JavaScript](https://medium.com/better-programming/understanding-intersection-observer-api-in-javascript-bb1bf04b8081)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - A Few Functional Uses for Intersection Observer](https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e google Devs - An event for CSS position:sticky](https://developers.google.com/web/updates/2017/09/sticky-headers)\r\n\r\n#### Resize Observer\r\n\r\nLearn how to use the Resize Observer API to get informed when the element resizes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - It’s Like document.onresize for Elements](https://developers.google.com/web/updates/2016/10/resizeobserver)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator - A Look at the Resize Observer JavaScript API](https://alligator.io/js/resize-observer/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdavidwalsh.name\" alt=\"Logo\" /\u003e David Walsh - Resize Observer](https://davidwalsh.name/resize-observer)\r\n\r\n#### Performance Observer\r\n\r\nLearn how the Performance Observer API can help you get information about the performance of your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Efficient Access to Performance Data](https://developers.google.com/web/updates/2016/06/performance-observer)\r\n\r\n### Scrollsnapping\r\n\r\nLearn about the Scrollsnapping API and how it can help you provide an intuitive experience when scrolling.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Introducing CSS Scroll Snap Points](https://css-tricks.com/introducing-css-scroll-snap-points/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Well-Controlled Scrolling with CSS Scroll Snap](https://developers.google.com/web/updates/2018/07/css-scroll-snap)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebkit.org\" alt=\"Logo\" /\u003e The scroll-snap-* Properties](https://webkit.org/demos/scroll-snap/index.html)\r\n\r\n### Web Assembly\r\n\r\nLearn about Web Assembly and how it opens up the playing field for new types of web apps.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WebAssembly Concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Why the heck is everyone talking about WebAssembly?](https://dev.to/captainsafia/why-the-heck-is-everyone-talking-about-webassembly-455a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Introduction to Web Assembly](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-web-assembly-6cb6466a3478)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Google Codelabs - An Introduction to Web Assembly](https://codelabs.developers.google.com/codelabs/web-assembly-intro/index.html#0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e How We Used WebAssembly To Speed Up Our Web App By 20X](https://www.smashingmagazine.com/2019/04/webassembly-speed-web-app/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - WebAssembly](https://developers.google.com/web/updates/2019/02/hotpath-with-wasm)\r\n\r\n### Beacon\r\n\r\nLearn how the Beacon API can help you send data to endpoints before the user closes the page.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using the Beacon API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Logging Activity With The Web Beacon API](https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/)\r\n\r\n### Clipboard\r\n\r\nLearn about the Clipboard API and how it can help you copy and paste data.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Clipboard (Copy \u0026 Paste)](https://whatwebcando.today/clipboard.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Image Support for the Async Clipboard API](https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard)\r\n\r\n### Share\r\n\r\nLearn how the Web Share API can help users sharing your web app.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Share](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introducing the Web Share API](https://developers.google.com/web/updates/2016/09/navigator-share)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Registering as a Share Target](https://developers.google.com/web/updates/2018/12/web-share-target)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - How to Use the Web Share API](https://css-tricks.com/how-to-use-the-web-share-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.arnellebalane.com\" alt=\"Logo\" /\u003e The Web Share API](https://blog.arnellebalane.com/the-web-share-api-2cbb3e6cf007)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - How to implement the Web Share API with a fallback](https://dev.to/daviddalbusco/how-to-implement-the-web-share-api-with-a-fallback-b3)\r\n\r\n### Performance API\r\n\r\nLearn about the Performance API and how it can help you monitor the performance of the device.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - performance.measure()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Breaking Down the Performance API](https://css-tricks.com/breaking-performance-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Assessing Loading Performance](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Performance Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API#Specifications)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Performance Timeline](https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline)\r\n\r\n### Gamepad API\r\n\r\nLearn how the Gamepad API can help you integrate with various controllers such as an x-box or playstation controller\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using the Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fluser.github.io\" alt=\"Logo\" /\u003e luser - Gamepad Test](http://luser.github.io/gamepadtest/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Implementing controls using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)\r\n\r\n### Speech Recognition\r\n\r\nLearn how to use the Speech Recognition API to analyze speech.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdavidwalsh.name\" alt=\"Logo\" /\u003e David Walsh - JavaScript Speech Recognition](https://davidwalsh.name/speech-recognition)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - web-speech-api](https://github.com/mdn/web-speech-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Speech Recognition](https://whatwebcando.today/speech-recognition.html)\r\n\r\n### Interaction Media Queries\r\n\r\nLearn how to use Interaction Media Queries to optimize the user experience for the specific type of device.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Introducing CSS Interaction Media Queries](https://medium.com/@rossbulat/introducing-css-interaction-media-queries-38eea48f4221)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e Touch Devices Should Not Be Judged By Their Size](https://css-tricks.com/touch-devices-not-judged-size/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.opera.com\" alt=\"Logo\" /\u003e Interaction Media Features and their potential](https://dev.opera.com/articles/media-features/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Interaction Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-interaction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Pointing Device Adaptation](https://whatwebcando.today/pointer-adaptation.html)\r\n\r\n### Browser Extensions\r\n\r\nLearn how to build browser extensions to enhance the functionality of your browser.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Browser Extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.chrome.com\" alt=\"Logo\" /\u003e Chrome - What are extensions?](https://developer.chrome.com/extensions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.chrome.com\" alt=\"Logo\" /\u003e Chrome - Getting Started with Extensions](https://developer.chrome.com/extensions/getstarted)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Google Chrome Extensions](https://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B)\r\n\r\n### Pointer Lock API\r\n\r\nLearn how to use the Pointer Lock API to get the raw mouse movement and lock the target of mouse events to a single element.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Pointer Lock](https://www.w3.org/TR/pointerlock/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdzone.com\" alt=\"Logo\" /\u003e Use the Pointer Lock API to Restrict Mouse Movement](https://dzone.com/articles/html5-use-pointer-lock-api)\r\n\r\n### Picture In Picture\r\n\r\nLearn how to use the Picture-In-Picture API to watch videos in a floating window (always on top of other windows).\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Watch video using Picture-in-Picture](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgooglechrome.github.io\" alt=\"Logo\" /\u003e Picture-in-Picture Sample](https://googlechrome.github.io/samples/picture-in-picture/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - An Introduction to Picture-in-Picture](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Implement Picture-in-Picture on the Web](https://dev.to/ananyaneogi/implement-picture-in-picture-on-the-web-17g8)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - How to use “picture in picture 📺” in JavaScript.](https://medium.com/@ashifa454/how-to-use-picture-in-picture-in-javascript-d315296c5800)\r\n\r\n### Proxies\r\n\r\nLearn how to use proxies to intercept certain operations and implement custom behaviors.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Meta programming](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e A practical guide to Javascript Proxy](https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0?gi=92cd1f951006)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Introducing Javascript ES6 Proxies](https://hackernoon.com/introducing-javascript-es6-proxies-1327419ab413)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - How to use JavaScript Proxies for Fun and Profit](https://medium.com/dailyjs/how-to-use-javascript-proxies-for-fun-and-profit-365579d4a9f8)\r\n\r\n### Houdini\r\n\r\nLearn about the Houdini project and get excited about the future of CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Houdini, Demystifying CSS](https://developers.google.com/web/updates/2016/05/houdini)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Smarter custom properties](https://web.dev/css-props-and-vals/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-houdini.rocks\" alt=\"Logo\" /\u003e CSS Houdini Experiments](https://css-houdini.rocks/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fhoudini.glitch.me\" alt=\"Logo\" /\u003e Interactive Introduction to CSS Houdini](http://houdini.glitch.me/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e W3C - CSS Houdini Wiki](https://github.com/w3c/css-houdini-drafts/wiki)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Houdini's Animation Worklet](https://developers.google.com/web/updates/2018/10/animation-worklet)\r\n\r\n### Project Fugu\r\n\r\nLearn about Project Fugu project and get excited about the future of the Web.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.chromium.org\" alt=\"Logo\" /\u003e Our commitment to a more capable web](https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chromium.org\" alt=\"Logo\" /\u003e Web Capabilities (Fugu)](https://www.chromium.org/teams/web-capabilities-fugu)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbugs.chromium.org\" alt=\"Logo\" /\u003e Chromium Bugs - Fugu](https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Unlocking new capabilities for the web](https://developers.google.com/web/updates/capabilities)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Unlocking New Capabilities for the Web](https://www.youtube.com/watch?v=GSiUzuB-PoI)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fchromium.googlesource.com\" alt=\"Logo\" /\u003e Controlling Access to Powerful Web Platform Features](https://chromium.googlesource.com/chromium/src/+/f384207e04ad27f58287e972907f17ad66acc115/docs/security/permissions-for-powerful-web-platform-features.md)\r\n\r\n### Web Authentication API\r\n\r\nLearn how to use the Web Authentication API to provide a strong authentication with public key cryptography.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Authentication API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Web Authentication: An API for accessing Public Key Credentials](https://www.w3.org/TR/webauthn-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Enabling Strong Authentication with WebAuthn](https://developers.google.com/web/updates/2018/05/webauthn)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fauth0.com\" alt=\"Logo\" /\u003e Introduction to Web Authentication: The New W3C Spec](https://auth0.com/blog/introduction-to-web-authentication/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.microsoft.com\" alt=\"Logo\" /\u003e Microsoft - Web Authentication and Windows Hello](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/windows-integration/web-authentication)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fduo.com\" alt=\"Logo\" /\u003e Web Authentication: What It Is and What It Means for Passwords](https://duo.com/blog/web-authentication-what-it-is-and-what-it-means-for-passwords)\r\n\r\n#### Credentials Manager API\r\n\r\nLearn about the Credentials Manager API proposal and how it can help authenticating users.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Sign in Users](https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Save Credentials from Forms](https://developers.google.com/web/fundamentals/security/credential-management/save-forms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Credentials](https://whatwebcando.today/credentials.html)\r\n\r\n### Native File System\r\n\r\nLearn how the Native File System API proposal enables interacting with files on the user's local device.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Native File System API](https://developers.google.com/web/updates/2019/08/native-file-system)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Native File System](https://github.com/WICG/native-file-system/blob/master/EXPLAINER.md)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwicg.github.io\" alt=\"Logo\" /\u003e W3C - Native File System](https://wicg.github.io/native-file-system/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.google.com\" alt=\"Logo\" /\u003e Native File System Web API - Chromium Security Model](https://docs.google.com/document/d/1NJFd-EWdUlQ7wVzjqcgXewqC5nzv_qII4OvlDtK6SE8/edit#heading=h.7nki9mck5t64)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chromestatus.com\" alt=\"Logo\" /\u003e Chromestatus - Native File System](https://www.chromestatus.com/feature/6284708426022912)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fw3c.github.io\" alt=\"Logo\" /\u003e W3C - File API](https://w3c.github.io/FileAPI/)\r\n\r\n### Shape Detection\r\n\r\nLearn how the Shape Detection API proposal can be use to detect shapes such as faces or barcodes in pictures.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwicg.github.io\" alt=\"Logo\" /\u003e W3C - Accelerated Shape Detection in Images](https://wicg.github.io/shape-detection-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - A Picture is Worth a Thousand Words](https://web.dev/shape-detection/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Shape Detection API Specification](https://github.com/WICG/shape-detection-api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.arnellebalane.com\" alt=\"Logo\" /\u003e Introduction to the Shape Detection API](https://blog.arnellebalane.com/introduction-to-the-shape-detection-api-e07425396861)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fpaul.kinlan.me\" alt=\"Logo\" /\u003e Face detection using Shape Detection API](https://paul.kinlan.me/face-detection/)\r\n\r\n### Web Bluetooth\r\n\r\nLearn how the Web Bluetooth API proposal can be used to connect with nearby devices.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Interact with Bluetooth devices](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today -\tBluetooth](https://whatwebcando.today/bluetooth.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebbluetoothcg.github.io\" alt=\"Logo\" /\u003e W3C - Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgooglechrome.github.io\" alt=\"Logo\" /\u003e Web Bluetooth Samples](https://googlechrome.github.io/samples/web-bluetooth/)\r\n\r\n### Web USB\r\n\r\nLearn the Web USB API proposal can be used to connect with hardware through a cable.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - USB](https://developer.mozilla.org/en-US/docs/Web/API/USB)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e WICG - Web USB](https://github.com/WICG/webusb)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Access USB Devices on the Web](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today -\tWeb USB](https://whatwebcando.today/usb.html)\r\n\r\n### Web XR\r\n\r\nLearn how to use Web XR API proposal for virtual- and augmented reality experiences.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WebXR Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Welcome to the immersive web](https://developers.google.com/web/updates/2018/05/welcome-to-immersive)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /\u003e New API to Bring Augmented Reality to the Web](https://hacks.mozilla.org/2018/09/webxr/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fimmersive-web.github.io\" alt=\"Logo\" /\u003e W3C - WebXR Device API](https://immersive-web.github.io/webxr/)\r\n\r\n### Presentation\r\n\r\nLearn how the Presentation API proposal enables your web app to use the presentation display mode in the browser or at an external display device.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Presentation Features](https://whatwebcando.today/presentation.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Present web pages to secondary attached displays](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fw3c.github.io\" alt=\"Logo\" /\u003e W3C - Presentation API](https://w3c.github.io/presentation-api)\r\n\r\n### Network Information API\r\n\r\nLearn how the Network Information API proposal can give you information about the state of the network.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faddyosmani.com\" alt=\"Logo\" /\u003e Addy Osmani - Adaptive Serving](https://addyosmani.com/blog/adaptive-serving/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwicg.github.io\" alt=\"Logo\" /\u003e W3C - Network Information API](https://wicg.github.io/netinfo/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgooglechrome.github.io\" alt=\"Logo\" /\u003e Network Information API Sample](https://googlechrome.github.io/samples/network-information/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwebcando.today\" alt=\"Logo\" /\u003e What Web Can Do Today - Network Type \u0026 Speed](https://whatwebcando.today/network-type-speed.html)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#algorithms--data-structures)\r\n\r\n## ➤ Algorithms \u0026 Data structures\r\n\r\n### Data structures\r\n\r\n### Arrays\r\n\r\nLearn how and when arrays should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Arrays](https://javascript.info/array)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Arrays, A Visual Introduction for Beginners](https://www.freecodecamp.org/news/data-structures-101-arrays-a-visual-introduction-for-beginners-7f013bcc355a/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Array data structure](https://en.wikipedia.org/wiki/Array_data_structure)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\r\n\r\n### Queues \u0026 Stacks\r\n\r\nLearn how and when queues and stacks should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.cs.cmu.edu\" alt=\"Logo\" /\u003e Stacks and Queues](https://www.cs.cmu.edu/~adamchik/15-121/lectures/Stacks%20and%20Queues/Stacks%20and%20Queues.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Difference between Stack and Queue Data Structures](https://www.geeksforgeeks.org/difference-between-stack-and-queue-data-structures/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Data Structures: Stacks \u0026 Queues](https://medium.com/@hitherejoe/data-structures-stacks-queues-a3b3591c8cb0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Stacks vs. Queues In JavaScript](https://dev.to/emmawedekind/stacks-vs-queues-in-javascript-4d1o)\r\n\r\n### Trees\r\n\r\nLearn how and when trees should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Tree (data structure)](https://en.wikipedia.org/wiki/Tree_(data_structure))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Everything you need to know about tree data structure](https://www.freecodecamp.org/news/all-you-need-to-know-about-tree-data-structures-bceacb85490c/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Data Structure and Algorithms - Tree](https://www.tutorialspoint.com/data_structures_algorithms/tree_data_structure.htm)\r\n\r\n#### Binary Indexed Tree\r\n\r\nLearn how and when binary indexed trees should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Fenwick tree](https://en.wikipedia.org/wiki/Fenwick_tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcs.stackexchange.com\" alt=\"Logo\" /\u003e What is the intuition behind a binary indexed tree?](https://cs.stackexchange.com/questions/10538/bit-what-is-the-intuition-behind-a-binary-indexed-tree-and-how-was-it-thought-a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Binary Indexed Tree or Fenwick Tree](https://www.geeksforgeeks.org/binary-indexed-tree-or-fenwick-tree-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Fenwick Tree / Binary Indexed Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/fenwick-tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Binary Indexed Tree](https://www.youtube.com/watch?v=CWDQJGaN1gY\u0026index=18\u0026t=0s\u0026list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - fast-binary-indexed-tree-js](https://github.com/microsoft/fast-binary-indexed-tree-js)\r\n\r\n#### Heap\r\n\r\nLearn how and when heaps should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Heap (data structure)](https://en.wikipedia.org/wiki/Heap_(data_structure))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - Heap Data Structure](https://www.tutorialspoint.com/data_structures_algorithms/heap_data_structure.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Learning to Love Heaps](https://medium.com/basecs/learning-to-love-heaps-cef2b273a238)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Freactgo.com\" alt=\"Logo\" /\u003e How to implement Heap Data structure in JavaScript](https://reactgo.com/javascript-heap-datastructure/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Data Structures: Heaps](https://www.youtube.com/watch?v=t0Cq6tVNRBA\u0026list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8\u0026index=5)\r\n\r\n#### Red-black Tree\r\n\r\nLearn how and when red-black trees should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Red–black tree](https://en.wikipedia.org/wiki/Red%E2%80%93black_tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Painting Nodes Black With Red-Black Trees](https://dev.to/vaidehijoshi/painting-nodes-black-with-red-black-trees)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Red-Black Tree](https://www.geeksforgeeks.org/red-black-tree-set-1-introduction-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Red Black Trees in JavaScript](https://medium.com/@julianknodt/red-black-trees-in-javascript-c20eec1d5d1c)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Red–Black Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/red-black-tree)\r\n\r\n#### Trie\r\n\r\nLearn how and when tries should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Trie](https://en.wikipedia.org/wiki/Trie)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Trie (Insert and Search)](https://www.geeksforgeeks.org/trie-insert-and-search/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Trying to Understand Tries](https://medium.com/basecs/trying-to-understand-tries-3ec6bede0014)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interviewcake.com\" alt=\"Logo\" /\u003e Trie, Datastructure](https://www.interviewcake.com/concept/java/trie)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Data Structures: Tries](https://www.youtube.com/watch?v=zIjfhVPRZCg\u0026list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8\u0026index=7)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Practical Data Structures: Tries](https://hackernoon.com/practical-data-structures-for-frontend-applications-when-to-use-tries-5428a565eba4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.cs.usfca.edu\" alt=\"Logo\" /\u003e Trie, visualization](https://www.cs.usfca.edu/~galles/visualization/Trie.html)\r\n\r\n#### K-D Tree\r\n\r\nLearn how and when K-D trees should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - k-d tree](https://en.wikipedia.org/wiki/K-d_tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - k-d Tree JavaScript Library](https://github.com/ubilabs/kd-tree-javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.cs.cmu.edu\" alt=\"Logo\" /\u003e kd-Trees](https://www.cs.cmu.edu/~ckingsf/bioinfo-lectures/kdtrees.pdf)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - KD Tree Algorithm](https://www.youtube.com/watch?v=TLxWtXEbtFE)\r\n\r\n### Hash Tables\r\n\r\nLearn how and when hash tables should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Hash table](https://en.wikipedia.org/wiki/Hash_table)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fyourbasic.org\" alt=\"Logo\" /\u003e Hash tables explained](https://yourbasic.org/algorithms/hash-tables-explained/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.hackerearth.com\" alt=\"Logo\" /\u003e Basics of Hash Tables](https://www.hackerearth.com/practice/data-structures/hash-tables/basics-of-hash-tables/tutorial/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Javascript Hash Table](https://medium.com/@yanganif/javascript-hash-table-8878afceecbc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Objects and Hash Tables in Javascript](https://codeburst.io/objects-and-hash-tables-in-javascript-a472ad1940d9)\r\n\r\n### Linked Lists\r\n\r\nLearn how and when linked lists should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Linked list](https://en.wikipedia.org/wiki/Linked_list)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Introduction to Linked Lists](https://www.studytonight.com/data-structures/introduction-to-linked-list)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Linked Lists in JavaScript](https://codeburst.io/linked-lists-in-javascript-es6-code-part-1-6dd349c3dcc3)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e The Little Guide of Linked List in JavaScript](https://hackernoon.com/the-little-guide-of-linked-list-in-javascript-9daf89b63b54)\r\n\r\n### Graphs\r\n\r\nLearn how and when graphs should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Graph theory](https://en.wikipedia.org/wiki/Graph_theory)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Implementation of Graph in JavaScript](https://www.geeksforgeeks.org/implementation-graph-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frunestone.academy\" alt=\"Logo\" /\u003e Graphs and Graph Algorithms](https://runestone.academy/runestone/books/published/pythonds/Graphs/Objectives.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e The Javascript Developer’s Guide to Graphs](https://hackernoon.com/the-javascript-developers-guide-to-graphs-and-detecting-cycles-in-them-96f4f619d563)\r\n\r\n\r\n### Analysis\r\n\r\n### Time complexity\r\n\r\nLearn about time complexity and how it can be used to analyze an algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Time complexity](https://en.wikipedia.org/wiki/Time_complexity)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Time Complexity of Algorithms](https://www.studytonight.com/data-structures/time-complexity-of-algorithms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - An Introduction to Time Complexity](https://www.freecodecamp.org/news/time-complexity-of-algorithms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fadrianmejia.com\" alt=\"Logo\" /\u003e 8 time complexities that every programmer should know](https://adrianmejia.com/most-popular-algorithms-time-complexity-every-programmer-should-know-free-online-tutorial-course/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.jenniferbland.com\" alt=\"Logo\" /\u003e Time Complexity Analysis in JavaScript](https://www.jenniferbland.com/time-complexity-analysis-in-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e An intro to Algorithms](https://codeburst.io/algorithms-i-searching-and-sorting-algorithms-56497dbaef20)\r\n\r\n#### Cost model\r\n\r\nLearn how to setup a cost model for an algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Analysis of algorithms](https://en.wikipedia.org/wiki/Analysis_of_algorithms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Faofa.cs.princeton.edu\" alt=\"Logo\" /\u003e Analysis of Algorithms](https://aofa.cs.princeton.edu/10analysis/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e The cost of JavaScript in 2019](https://v8.dev/blog/cost-of-javascript-2019)\r\n\r\n#### Order of Growth\r\n\r\nLearn how to make an order-of-growth classification to classify the cost model.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quora.com\" alt=\"Logo\" /\u003e Quora - What is the meaning of 'order of growth'](https://www.quora.com/What-is-the-meaning-of-order-of-growth-in-algorithm-analysis-and-how-can-we-find-the-order-of-growth-of-given-algorithm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.ccs.neu.edu\" alt=\"Logo\" /\u003e Orders of Growth](http://www.ccs.neu.edu/home/jaa/CS7800.12F/Information/Handouts/order.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.coursera.org\" alt=\"Logo\" /\u003e Coursera - Order-of-Growth Classifications](https://www.coursera.org/lecture/algorithms-part1/order-of-growth-classifications-Xk03a)\r\n\r\n#### Big O notation\r\n\r\nLearn how to use Big O notation to classify the time complexity of an algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Big O notation](https://en.wikipedia.org/wiki/Big_O_notation)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Time Complexity/Big O Notation](https://medium.com/javascript-scene/time-complexity-big-o-notation-1a4310c3ee4b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Big O Notation in JavaScript](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Big O in JS: The basic that you need to know](https://medium.com/front-end-weekly/big-o-in-js-the-basic-that-you-need-to-know-a5abb45570fa)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Big O in JavaScript](https://medium.com/@gmedina229/big-o-in-javascript-36ff67766051)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - What is Big O Notation, and Why is it Useful?](https://dev.to/mattdmccarley/what-is-big-o-notation-and-why-is-it-useful-2b7l)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Big-O Notation Useful guide](https://dev.to/yashwanthambati/big-o-notation-complete-guide-226h)\r\n\r\n### Space Complexity\r\n\r\nLearn about space complexity and how it can be used to analyze an algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Space Complexity of Algorithms](https://www.studytonight.com/data-structures/space-complexity-of-algorithms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Fix Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Debugging Memory Leaks in JavaScript](https://medium.com/@sarahelson81/debugging-memory-leaks-in-javascript-ed6d0fa84b40)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Space complexity](https://en.wikipedia.org/wiki/Space_complexity)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fexploreshaifali.github.io\" alt=\"Logo\" /\u003e Space Complexity](http://exploreshaifali.github.io/2014/02/13/Space-Complexity/)\r\n\r\n\r\n### Algorithms\r\n\r\n### Sorting\r\n\r\nLearn about the most important sorting algorithms and figure out what challenges there are involved with implementing one.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e A Guide To Sorting Algorithms in JavaScript](https://blog.bitsrc.io/a-guide-to-sorting-algorithms-in-javascript-5b32da4eae1e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Sorting Algorithms with Javascript](https://dev.to/wangonya/sorting-algorithms-with-javascript-part-1-4aca)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Introduction to Sorting](https://www.studytonight.com/data-structures/introduction-to-sorting)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Implementing Sorting Algorithms in JavaScript](https://medium.com/@rwillt/implementing-sorting-algorithms-in-javascript-b08504cdf4a9)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fnotlaura.com\" alt=\"Logo\" /\u003e Algorithms – Sorting Algorithms in JavaScript](https://notlaura.com/day-6-algorithms-sorting-algorithms-in-javascript/)\r\n\r\n#### Insertion Sort\r\n\r\nLearn about the insertion sort algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Insertion sort](https://en.wikipedia.org/wiki/Insertion_sort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Insertion Sort](https://www.geeksforgeeks.org/insertion-sort/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interviewbit.com\" alt=\"Logo\" /\u003e Insertion Sort Algorithm](https://www.interviewbit.com/tutorial/insertion-sort-algorithm/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Insertion Sorting for Beginners in JS](https://dev.to/ryan_dunton/insertion-sorting-for-beginners-in-js------fkg)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Algorithms: Insertion Sort in JavaScript](https://medium.com/dailyjs/insertion-sort-in-javascript-9c077844717a)\r\n\r\n#### Quicksort\r\n\r\nLearn about the quicksort algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Quicksort](https://en.wikipedia.org/wiki/Quicksort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e A Quick Explanation of Quick Sort](https://medium.com/karuna-sehgal/a-quick-explanation-of-quick-sort-7d8e2563629b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e QuickSort](https://www.geeksforgeeks.org/quick-sort/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Implementing Quicksort in JavaScript](https://medium.com/@Charles_Stover/implementing-quicksort-in-javascript-8044a8e2bf39)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhumanwhocodes.com\" alt=\"Logo\" /\u003e Computer science in JavaScript: Quicksort](https://humanwhocodes.com/blog/2012/11/27/computer-science-in-javascript-quicksort/)\r\n\r\n#### Mergesort\r\n\r\nLearn about the mergesort algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Merge sort](https://en.wikipedia.org/wiki/Merge_sort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Merge Sort Algorithm in JavaScript](https://medium.com/javascript-in-plain-english/javascript-merge-sort-3205891ac060)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e A Simplified Explanation of Merge Sort](https://medium.com/karuna-sehgal/a-simplified-explanation-of-merge-sort-77089fe03bb2)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.khanacademy.org\" alt=\"Logo\" /\u003e Overview of merge sort](https://www.khanacademy.org/computing/computer-science/algorithms/merge-sort/a/overview-of-merge-sort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - The Merge Sort Algorithm Explained](https://www.freecodecamp.org/forum/t/the-merge-sort-algorithm-explained/16104)\r\n\r\n#### Heapsort\r\n\r\nLearn about the heapsort algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Heapsort](https://en.wikipedia.org/wiki/Heapsort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Heapify All The Things With Heap Sort](https://medium.com/basecs/heapify-all-the-things-with-heap-sort-55ee1c93af82)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Heap Sort Algorithm](https://www.studytonight.com/data-structures/heap-sort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interviewcake.com\" alt=\"Logo\" /\u003e Heapsort Algorithm](https://www.interviewcake.com/concept/java/heapsort)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbrilliant.org\" alt=\"Logo\" /\u003e Heap Sort](https://brilliant.org/wiki/heap-sort/)\r\n\r\n### Searching\r\n\r\nLearn about the most important searching algorithms and figure out what challenges there are involved with implementing one.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Search algorithm](https://en.wikipedia.org/wiki/Search_algorithm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Search Algorithms with ES6](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6/tree/master/13-chapter-Searching-Algorithms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Introduction to Searching Algorithms](https://www.studytonight.com/data-structures/search-algorithms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Implement linear and binary search algorithms with Javascript](https://medium.com/employbl/implement-linear-and-binary-search-algorithms-with-javascript-2149997588f0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.scriptonitejs.com\" alt=\"Logo\" /\u003e Searching Algorithms In Javascript](https://www.scriptonitejs.com/javascript-searching-algorithms/)\r\n\r\n#### Binary Search\r\n\r\nLearn about the binary search algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Binary search algorithm](https://en.wikipedia.org/wiki/Binary_search_algorithm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Freactgo.com\" alt=\"Logo\" /\u003e How to implement a Binary search algorithm](https://reactgo.com/binary-search-algorithm-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.interviewbit.com\" alt=\"Logo\" /\u003e Binary Search](https://www.interviewbit.com/courses/programming/topics/binary-search/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e What Is Binary Search, A Detailed Step-By-Step](https://medium.com/@jeffrey.allen.lewis/javascript-algorithms-explained-binary-search-25064b896470)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Programming with JS: Binary Search](https://hackernoon.com/programming-with-js-binary-search-aaf86cef9cb3)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Binary Search In JavaScript](https://www.geeksforgeeks.org/binary-search-in-javascript/)\r\n\r\n#### Breadth First Search\r\n\r\nLearn about the breadth first search algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Breadth-first search](https://en.wikipedia.org/wiki/Breadth-first_search)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Breaking Down Breadth-First Search](https://medium.com/basecs/breaking-down-breadth-first-search-cebe696709d9)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Breadth First Search in JavaScript](https://medium.com/dailyjs/breadth-first-search-in-javascript-e655cd824fa4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Breadth-First Search (BFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/breadth-first-search)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flevelup.gitconnected.com\" alt=\"Logo\" /\u003e The Magician’s Guide to Algorithms](https://levelup.gitconnected.com/the-magicians-guide-to-algorithms-part-4-the-breadth-first-search-b800aec8ccf8)\r\n\r\n#### Depth First Search\r\n\r\nLearn about the depth first search algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Depth-first search](https://en.wikipedia.org/wiki/Depth-first_search)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fedgy.app\" alt=\"Logo\" /\u003e Depth First Search Algorithm](https://edgy.app/depth-first-search-algorithm-what-it-is-and-how-it-works)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Depth first and breadth first search on trees](https://medium.com/employbl/depth-first-and-breadth-first-search-on-trees-in-javascript-58dcd6ff8de1)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Breadth-first vs Depth-first Tree Traversal](https://medium.com/@kenny.hom27/breadth-first-vs-depth-first-tree-traversal-in-javascript-48df2ebfc6d1)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - Depth-First Search (DFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/depth-first-search)\r\n\r\n#### Dijkstra's Algorithm\r\n\r\nLearn about dijkstra's algorithm.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Dijkstra's algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcourses.cs.washington.edu\" alt=\"Logo\" /\u003e Dijkstra’s algorithm](https://courses.cs.washington.edu/courses/cse373/16su/lectures/lecture15.pdf)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e How to implement Dijkstra’s Algorithm](https://hackernoon.com/how-to-implement-dijkstras-algorithm-in-javascript-abdfd1702d04)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e A Walkthrough of Dijkstra’s Algorithm](https://medium.com/@adriennetjohnson/a-walkthrough-of-dijkstras-algorithm-in-javascript-e94b74192026)\r\n\r\n#### String Search\r\n\r\nLearn about various algorithms for searching in strings.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - String-searching algorithm](https://en.wikipedia.org/wiki/String-searching_algorithm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fongspxm.github.io\" alt=\"Logo\" /\u003e Boyer Moore String Search](https://ongspxm.github.io/blog/2017/05/boyer-moore-search/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Boyer–Moore string-search algorithm](https://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string-search_algorithm)\r\n\r\n### Hashing\r\n\r\nLearn about hashing algorithms.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Hash function](https://en.wikipedia.org/wiki/Hash_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcomputer.howstuffworks.com\" alt=\"Logo\" /\u003e How Encryption Works](https://computer.howstuffworks.com/encryption5.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Cryptography for JavaScript: Hash Function](https://medium.com/@promentol/cryptography-for-javascript-node-js-developers-part-1-hash-function-86d119c7304)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgist.github.com\" alt=\"Logo\" /\u003e Github - hash.js](https://gist.github.com/iperelivskiy/4110988)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#databases--servers)\r\n\r\n## ➤ Databases \u0026 Servers\r\n\r\n### Databases\r\n\r\n### Relational Databases\r\n\r\nLearn about relational databases and how to use them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Relational database](https://en.wikipedia.org/wiki/Relational_database)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchdatamanagement.techtarget.com\" alt=\"Logo\" /\u003e Relational database](https://searchdatamanagement.techtarget.com/definition/relational-database)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Everything you need to know about (Relational) Databases](https://dev.to/lmolivera/everything-you-need-to-know-about-relational-databases-3ejl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcomputer.howstuffworks.com\" alt=\"Logo\" /\u003e What are relational databases?](https://computer.howstuffworks.com/question599.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e What is a Relational Database Management System?](https://www.codecademy.com/articles/what-is-rdbms-sql)\r\n\r\n#### SQL\r\n\r\nLearn how to write SQL statements to communicate with a database.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Learn SQL](https://www.codecademy.com/learn/learn-sql)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - SQL](https://en.wikipedia.org/wiki/SQL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flearntocodewith.me\" alt=\"Logo\" /\u003e A beginners guide to SQL](https://learntocodewith.me/posts/sql-guide/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e The Last SQL Guide for Data Analysis You’ll Ever Need](https://medium.com/better-programming/the-last-sql-guide-for-data-analysis-youll-ever-need-17ae10fa4a6f)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialrepublic.com\" alt=\"Logo\" /\u003e SQL Tutorial](https://www.tutorialrepublic.com/sql-tutorial/)\r\n\r\n#### MySQL\r\n\r\nLearn about the open-source relational database management system called MySQL.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.mysql.com\" alt=\"Logo\" /\u003e MySQL](https://www.mysql.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - MySQL](https://en.wikipedia.org/wiki/MySQL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - MySQL Tutorial](https://www.tutorialspoint.com/mysql/index.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchoracle.techtarget.com\" alt=\"Logo\" /\u003e MySQL Definition](https://searchoracle.techtarget.com/definition/MySQL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.mysqltutorial.org\" alt=\"Logo\" /\u003e Getting Started with MySQL](http://www.mysqltutorial.org/getting-started-with-mysql/)\r\n\r\n#### PostgreSQL\r\n\r\nLearn about the open-source relational database management system called PostgreSQL.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.postgresql.org\" alt=\"Logo\" /\u003e PostgreSQL](https://www.postgresql.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - PostgreSQL](https://en.wikipedia.org/wiki/PostgreSQL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.postgresqltutorial.com\" alt=\"Logo\" /\u003e PostgreSQL Tutorial](http://www.postgresqltutorial.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fpostgresguide.com\" alt=\"Logo\" /\u003e Postgres Guide](http://postgresguide.com/)\r\n\r\n### Non-relational Databases\r\n\r\nLearn about non-relational databases and how to use them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.mongodb.com\" alt=\"Logo\" /\u003e What Is A Non Relational Database](https://www.mongodb.com/scale/what-is-a-non-relational-database)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - NoSQL](https://en.wikipedia.org/wiki/NoSQL)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Relational SQL vs. Non-Relational NoSQL Databases](https://dev.to/trevoirwilliams/relational-sql-vs-non-relational-nosql-databases-hi5)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.microsoft.com\" alt=\"Logo\" /\u003e Non-relational data and NoSQL](https://docs.microsoft.com/en-us/azure/architecture/data-guide/big-data/non-relational-data)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.techopedia.com\" alt=\"Logo\" /\u003e Non-Relational Database](https://www.techopedia.com/definition/25218/non-relational-database)\r\n\r\n#### Redis\r\n\r\nLearn about the open-source non-relational database management system called Redis.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fredis.io\" alt=\"Logo\" /\u003e Redis](https://redis.io/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Ftry.redis.io\" alt=\"Logo\" /\u003e Try Redis](http://try.redis.io/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Redis](https://en.wikipedia.org/wiki/Redis)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fredis.io\" alt=\"Logo\" /\u003e An introduction to Redis data types and abstractions](https://redis.io/topics/data-types-intro)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fredis.io\" alt=\"Logo\" /\u003e Redis - Documentation](https://redis.io/documentation)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e Redis: What and Why?](https://codeburst.io/redis-what-and-why-d52b6829813)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - Redis Tutorial](https://www.tutorialspoint.com/redis/index.htm)\r\n\r\n#### MongoDB\r\n\r\nLearn about the open-source non-relational database management system called MongoDB.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.mongodb.com\" alt=\"Logo\" /\u003e MongoDB](https://www.mongodb.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.mongodb.com\" alt=\"Logo\" /\u003e MongoDB - Documentation](https://docs.mongodb.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Funiversity.mongodb.com\" alt=\"Logo\" /\u003e MongoDB - University](https://university.mongodb.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - MongoDB Tutorial](https://www.tutorialspoint.com/mongodb/index.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - MongoDB In 30 Minutes](https://www.youtube.com/watch?v=pWbMrx5rVBE)\r\n\r\n### Data Modelling\r\n\r\nLearn how data modelling can help your database design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fopentextbc.ca\" alt=\"Logo\" /\u003e Chapter 5 Data Modelling](https://opentextbc.ca/dbdesign01/chapter/chapter-5-data-modelling/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Database Model](https://en.wikipedia.org/wiki/Database_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Database Modelling](https://en.wikipedia.org/wiki/Data_modeling)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is Data Modelling?](https://www.guru99.com/data-modelling-conceptual-logical.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchdatamanagement.techtarget.com\" alt=\"Logo\" /\u003e Data Modeling Definition](https://searchdatamanagement.techtarget.com/definition/data-modeling)\r\n\r\n#### ER Diagram\r\n\r\nLearn how to model your data using ER diagrams.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - DBMS, Data Models](https://www.tutorialspoint.com/dbms/dbms_data_models.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smartdraw.com\" alt=\"Logo\" /\u003e Entity Relationship Diagram](https://www.smartdraw.com/entity-relationship-diagram/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Entity Relationship Diagram Tutorial](https://www.youtube.com/watch?v=QpdhBUYk7Kk)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Entity–relationship model](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbeginnersbook.com\" alt=\"Logo\" /\u003e Entity Relationship Diagram](https://beginnersbook.com/2015/04/e-r-model-in-dbms/)\r\n\r\n#### Keys\r\n\r\nLearn how to figure out what types of keys to use and where to use them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e Introduction to Database Keys](https://www.studytonight.com/dbms/database-key.php)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.csestack.org\" alt=\"Logo\" /\u003e 7 Different Types of Database Keys](https://www.csestack.org/different-types-database-keys-example/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdatabasemanagement.fandom.com\" alt=\"Logo\" /\u003e Database Management: Keys](https://databasemanagement.fandom.com/wiki/Relational_Database:_Keys)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialcup.com\" alt=\"Logo\" /\u003e Database Keys](https://www.tutorialcup.com/dbms/keys.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Database Keys](https://www.youtube.com/watch?v=yMYH0zP1m8U)\r\n\r\n### Indexing\r\n\r\nLearn how to use indexing to speed up your database.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Indexing in Databases](https://www.geeksforgeeks.org/indexing-in-databases-set-1/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Database index](https://en.wikipedia.org/wiki/Database_index)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.essentialsql.com\" alt=\"Logo\" /\u003e Database Indexes Explained](https://www.essentialsql.com/what-is-a-database-index/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e Indexing in Databases with EXAMPLES](https://www.guru99.com/indexing-in-database.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fchartio.com\" alt=\"Logo\" /\u003e What Does Indexing Do?](https://chartio.com/learn/databases/how-does-indexing-work/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e An in-depth look at Database Indexing](https://www.freecodecamp.org/news/database-indexing-at-a-glance-bb50809d48bd/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Indexing your database data — the easy way](https://medium.com/faun/explained-indexing-your-database-data-the-easy-way-3c7127ed36a)\r\n\r\n### Data Integrity\r\n\r\nLearn how to assure the accuracy and consistency of data.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Data Integrity](https://en.wikipedia.org/wiki/Data_integrity)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.talend.com\" alt=\"Logo\" /\u003e What is Data Integrity and Why Is It Important?](https://www.talend.com/resources/what-is-data-integrity/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdigitalguardian.com\" alt=\"Logo\" /\u003e hat is Data Integrity?](https://digitalguardian.com/blog/what-data-integrity-data-protection-101)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdatabase.guide\" alt=\"Logo\" /\u003e What is Data Integrity?](https://database.guide/what-is-data-integrity/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialcup.com\" alt=\"Logo\" /\u003e Data Integrity](https://www.tutorialcup.com/dbms/integrity.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Database Design, Data Integrity](https://www.youtube.com/watch?v=1D_h-yFtQVo)\r\n\r\n### Normalization\r\n\r\nLearn how data normalization can help you decrease data redundancy and improve data integrity in your database.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Database normalization](https://en.wikipedia.org/wiki/Database_normalization)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.essentialsql.com\" alt=\"Logo\" /\u003e Database Normalization (Explained in Simple English)](https://www.essentialsql.com/get-ready-to-learn-sql-database-normalization-explained-in-simple-english/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e What is Normalization?](https://www.guru99.com/database-normalization.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Normal Forms in DBMS](https://www.geeksforgeeks.org/normal-forms-in-dbms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchsqlserver.techtarget.com\" alt=\"Logo\" /\u003e Database normalization](https://searchsqlserver.techtarget.com/definition/normalization)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftowardsdatascience.com\" alt=\"Logo\" /\u003e Database Normalization Explained](https://towardsdatascience.com/database-normalization-explained-53e60a494495)\r\n\r\n#### Functional Dependencies\r\n\r\nLearn how to find functional dependencies to improve your database design.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.lifewire.com\" alt=\"Logo\" /\u003e Full Functional Dependency in Database Normalization](https://www.lifewire.com/full-functional-dependency-1019753)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstackoverflow.com\" alt=\"Logo\" /\u003e Stackoverflow - Functional dependency and normalization](https://stackoverflow.com/questions/4199444/functional-dependency-and-normalization)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - DBMS, Normalization](https://www.tutorialspoint.com/dbms/database_normalization.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.ict.griffith.edu.au\" alt=\"Logo\" /\u003e Functional Dependencies and Normalization](http://www.ict.griffith.edu.au/~jw/normalization/assets/Functional%20Dependencies%20and%20Normalization.pdf)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e DBMS Functional Dependency](https://www.guru99.com/dbms-functional-dependency.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Armstrong's axioms](https://en.wikipedia.org/wiki/Armstrong%27s_axioms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.includehelp.com\" alt=\"Logo\" /\u003e Armstrong's Axioms in Functional Dependency](https://www.includehelp.com/dbms/armstrongs-axioms-in-functional-dependency.aspx)\r\n\r\n#### Normal Forms\r\n\r\nLearn how normal forms can help you normalize your database.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Normal forms](https://en.wikipedia.org/wiki/Database_normalization#Normal_forms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbeginnersbook.com\" alt=\"Logo\" /\u003e 1NF, 2NF, 3NF and BCNF in Database](https://beginnersbook.com/2015/05/normalization-in-dbms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fopentextbc.ca\" alt=\"Logo\" /\u003e Chapter 12 Normalization](https://opentextbc.ca/dbdesign01/chapter/chapter-12-normalization/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Boyce–Codd normal form](https://en.wikipedia.org/wiki/Boyce%E2%80%93Codd_normal_form)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Boyce-Codd Normal Form (BCNF)](https://www.geeksforgeeks.org/boyce-codd-normal-form-bcnf/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Third normal form](https://en.wikipedia.org/wiki/Third_normal_form)\r\n\r\n### Transactions\r\n\r\nLearn how transactions can group a set of database tasks into a single execution unit.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Database transaction](https://en.wikipedia.org/wiki/Database_transaction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstackoverflow.com\" alt=\"Logo\" /\u003e Stackoverflow - What is a database transaction?](https://stackoverflow.com/questions/974596/what-is-a-database-transaction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - DBMS, Transaction](https://www.tutorialspoint.com/dbms/dbms_transaction.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fdb4beginners.com\" alt=\"Logo\" /\u003e Why do you need to know transactions?](http://db4beginners.com/blog/relationaldb-transaction/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e SQL Transactions](https://www.geeksforgeeks.org/sql-transactions/)\r\n\r\n#### ACID\r\n\r\nLearn about the ACID properties of transactions.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvladmihalcea.com\" alt=\"Logo\" /\u003e A beginner’s guide to ACID](https://vladmihalcea.com/a-beginners-guide-to-acid-and-database-transactions/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.guru99.com\" alt=\"Logo\" /\u003e DBMS Transaction Management: ACID Properties](https://www.guru99.com/dbms-transaction-management.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e ACID Properties in DBMS](https://www.geeksforgeeks.org/acid-properties-in-dbms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - ACID](https://en.wikipedia.org/wiki/ACID)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.ibm.com\" alt=\"Logo\" /\u003e ACID properties of transactions](https://www.ibm.com/support/knowledgecenter/en/SSGMCP_5.4.0/product-overview/acid.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.yugabyte.com\" alt=\"Logo\" /\u003e A Primer on ACID Transactions](https://blog.yugabyte.com/a-primer-on-acid-transactions/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstackoverflow.com\" alt=\"Logo\" /\u003e Stackoverflow - How do ACID and database transactions work?](https://stackoverflow.com/questions/3740280/how-do-acid-and-database-transactions-work)\r\n\r\n#### Serializability\r\n\r\nLearn how to determine whether a schedule is serializable and leaves the database in a consistent state.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Serializability](https://en.wikipedia.org/wiki/Serializability)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialcup.com\" alt=\"Logo\" /\u003e Transaction Serializability in DBMS](https://www.tutorialcup.com/dbms/transaction-serializability.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbeginnersbook.com\" alt=\"Logo\" /\u003e DBMS Serializability](https://beginnersbook.com/2018/12/dbms-serializability/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e View Serializability in DBMS Transactions](https://www.geeksforgeeks.org/view-serializability-in-dbms-transactions/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Conflict Serializability in DBMS](https://www.geeksforgeeks.org/conflict-serializability-in-dbms/)\r\n\r\n#### Locks\r\n\r\nLearn about locks and when they should be used.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Record locking](https://en.wikipedia.org/wiki/Record_locking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.methodsandtools.com\" alt=\"Logo\" /\u003e Database Locking: What, why and how?](http://www.methodsandtools.com/archive/archive.php?id=83)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fvladmihalcea.com\" alt=\"Logo\" /\u003e A beginner’s guide to locking and lost updates](https://vladmihalcea.com/a-beginners-guide-to-database-locking-and-the-lost-update-phenomena/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.microsoft.com\" alt=\"Logo\" /\u003e Monitoring SQL Database Locks](https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/administration/monitor-database-locks)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Implementation of Locking in DBMS](https://www.geeksforgeeks.org/implementation-of-locking-in-dbms/)\r\n\r\n##### Deadlocks\r\n\r\nLearn about deadlocks and why they should be avoided.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Deadlock in DBMS](https://www.geeksforgeeks.org/deadlock-in-dbms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Deadlock](https://en.wikipedia.org/wiki/Deadlock)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.studytonight.com\" alt=\"Logo\" /\u003e What is a Deadlock?](https://www.studytonight.com/operating-system/deadlocks)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.oracle.com\" alt=\"Logo\" /\u003e Oracle - Deadlocks](https://docs.oracle.com/javadb/10.8.3.0/devguide/cdevconcepts28436.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatis.techtarget.com\" alt=\"Logo\" /\u003e Deadlock Definition](https://whatis.techtarget.com/definition/deadlock)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.javatpoint.com\" alt=\"Logo\" /\u003e Introduction to Deadlock](https://www.javatpoint.com/os-deadlocks-introduction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - Understanding SQL Server Deadlocks](https://dev.to/integerman/understanding-sql-server-deadlocks-2ej6)\r\n\r\n#### Precedence graph\r\n\r\nLearn how to create a precedence graph to test for conflict serializability of a schedule.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Precedence graph](https://en.wikipedia.org/wiki/Precedence_graph)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - How to draw a precedence graph](https://www.youtube.com/watch?v=U3SHusK80q0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fashutoshtripathi.com\" alt=\"Logo\" /\u003e Precedence Graph to check Conflict Serializable Schedule](https://ashutoshtripathi.com/2017/04/15/how-to-check-conflict-serializability-using-precedence-graph-algorithm/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.exploredatabase.com\" alt=\"Logo\" /\u003e Testing for conflict serializablity](http://www.exploredatabase.com/2017/11/testing-for-conflict-serializablity-using-precedence-graph.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.includehelp.com\" alt=\"Logo\" /\u003e Precedence Graph, DBMS](https://www.includehelp.com/dbms/precedence-graph.aspx)\r\n\r\n\r\n### Servers\r\n\r\n### Architectural Models\r\n\r\nLearn about the fundamental architectural server models.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.techopedia.com\" alt=\"Logo\" /\u003e Server Architecture](https://www.techopedia.com/definition/30262/server-architecture)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Architectural model](https://www.youtube.com/watch?v=SKtR7NVxYFA)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sciencedirect.com\" alt=\"Logo\" /\u003e Architectural Model](https://www.sciencedirect.com/topics/computer-science/architectural-model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww2.imm.dtu.dk\" alt=\"Logo\" /\u003e Distributed Systems: Models and Design](http://www2.imm.dtu.dk/courses/02220/2018/L3/Models.pdf)\r\n\r\n#### Client-Server\r\n\r\nLearn about the client-server model.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Client-server model](https://en.wikipedia.org/wiki/Client%E2%80%93server_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcio-wiki.org\" alt=\"Logo\" /\u003e Client Server Architecture](https://cio-wiki.org/wiki/Client_Server_Architecture)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ffreefeast.info\" alt=\"Logo\" /\u003e Understanding What Client Server Architecture Is All About](https://freefeast.info/general-it-articles/client-server-architecture/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsimple.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Client-server](https://simple.wikipedia.org/wiki/Client-server)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchnetworking.techtarget.com\" alt=\"Logo\" /\u003e Client-server model (client-server architecture)](https://searchnetworking.techtarget.com/definition/client-server)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.techopedia.com\" alt=\"Logo\" /\u003e Client-Server Model](https://www.techopedia.com/definition/18321/client-server-model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.sciencedirect.com\" alt=\"Logo\" /\u003e Learn more about Client-Server Model](https://www.sciencedirect.com/topics/computer-science/client-server-model)\r\n\r\n#### Proxy Server\r\n\r\nLearn about the proxy-server model.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Proxy Server](https://en.wikipedia.org/wiki/Proxy_server)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - What is a Proxy Server?](https://www.youtube.com/watch?v=5cPIukqXe5w)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.varonis.com\" alt=\"Logo\" /\u003e What is a Proxy Server and How Does it Work?](https://www.varonis.com/blog/what-is-a-proxy-server/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatis.techtarget.com\" alt=\"Logo\" /\u003e Proxy Server Definition](https://whatis.techtarget.com/definition/proxy-server)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.itpro.co.uk\" alt=\"Logo\" /\u003e What is a proxy server?](https://www.itpro.co.uk/server-storage/30246/what-is-a-proxy-server)\r\n\r\n#### Peer-To-Peer\r\n\r\nLearn about the peer-to-peer model.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Peer-to-peer](https://en.wikipedia.org/wiki/Peer-to-peer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - What is a Peer to Peer Network? ](https://www.youtube.com/watch?v=ie-qRQIQT4I)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.computerworld.com\" alt=\"Logo\" /\u003e What's a Peer-to-Peer (P2P) Network?](https://www.computerworld.com/article/2588287/networking-peer-to-peer-network.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchnetworking.techtarget.com\" alt=\"Logo\" /\u003e Peer-to-peer (P2P)](https://searchnetworking.techtarget.com/definition/peer-to-peer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Make a P2P connection in 10 minutes](https://dev.to/carloslfu/make-a-p2p-connection-in-10-minutes-4b32)\r\n\r\n### Middleware\r\n\r\nLearn about middleware.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Middleware](https://en.wikipedia.org/wiki/Middleware)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchapparchitecture.techtarget.com\" alt=\"Logo\" /\u003e Middleware Definition](https://searchapparchitecture.techtarget.com/definition/middleware)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quora.com\" alt=\"Logo\" /\u003e Quora - Why is Middleware important?](https://www.quora.com/Why-is-Middleware-important)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.redhat.com\" alt=\"Logo\" /\u003e What is middleware?](https://www.redhat.com/en/topics/middleware/what-is-middleware)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.talend.com\" alt=\"Logo\" /\u003e What is Middleware? Technology’s Go-to Middleman](https://www.talend.com/resources/what-is-middleware/)\r\n\r\n### Request-Reply Protocol\r\n\r\nLearn how computers communicate with eachother using the request-reply protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Request Response](https://en.wikipedia.org/wiki/Request%E2%80%93response)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Event-Driven Architecture](https://www.youtube.com/watch?v=3bxAm3XIFmk)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsolace.com\" alt=\"Logo\" /\u003e Request/Reply](https://solace.com/samples/solace-samples-jms/request-reply/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwww.informit.com\" alt=\"Logo\" /\u003e Enterprise Integration - Request-Reply](http://www.informit.com/articles/article.aspx?p=1398616\u0026seqNum=4)\r\n\r\n#### UDP\r\n\r\nLearn about the UDP transport layer protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchnetworking.techtarget.com\" alt=\"Logo\" /\u003e UDP (User Datagram Protocol)](https://searchnetworking.techtarget.com/definition/UDP-User-Datagram-Protocol)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - User Datagram Protocol](https://en.wikipedia.org/wiki/User_Datagram_Protocol)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.techopedia.com\" alt=\"Logo\" /\u003e User Datagram Protocol (UDP)](https://www.techopedia.com/definition/13460/user-datagram-protocol-udp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Explained! UDP and TCP](https://www.youtube.com/watch?v=1LYqtkgtSPU)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e User Datagram Protocol](https://www.geeksforgeeks.org/user-datagram-protocol-udp/)\r\n\r\n#### TCP\r\n\r\nLearn about the TCP transport layer protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchnetworking.techtarget.com\" alt=\"Logo\" /\u003e TCP (Transmission Control Protocol)](https://searchnetworking.techtarget.com/definition/TCP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Transmission Control Protocol](https://en.wikipedia.org/wiki/Transmission_Control_Protocol)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchnetworking.techtarget.com\" alt=\"Logo\" /\u003e TCP/IP (Transmission Control Protocol/Internet Protocol)](https://searchnetworking.techtarget.com/definition/TCP-IP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e Services and Segment structure in TCP](https://www.geeksforgeeks.org/services-and-segment-structure-in-tcp/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e TCP and UDP in Transport Layer](https://www.geeksforgeeks.org/tcp-and-udp-in-transport-layer/)\r\n\r\n### REST API\r\n\r\nLearn how an API can be designed to be RESTful.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipeia - Representational state transfer](https://en.wikipedia.org/wiki/Representational_state_transfer)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.restapitutorial.com\" alt=\"Logo\" /\u003e Learn REST: A RESTful Tutorial](https://www.restapitutorial.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - REST API concepts and examples](https://www.youtube.com/watch?v=7YcW25PHnAA)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frestfulapi.net\" alt=\"Logo\" /\u003e REST API Tutorial](https://restfulapi.net/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.mulesoft.com\" alt=\"Logo\" /\u003e What is a REST API?](https://www.mulesoft.com/resources/api/what-is-rest-api-design)\r\n\r\n#### CRUD\r\n\r\nLearn about the CRUD operations.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Create, read, update and delete](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Codecademy - What is CRUD?](https://www.codecademy.com/articles/what-is-crud)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.bmc.com\" alt=\"Logo\" /\u003e What is the Difference between REST and CRUD?](https://www.bmc.com/blogs/rest-vs-crud-whats-the-difference/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Introduction to CRUD Operations](https://www.youtube.com/watch?v=Lyi8SoVdkhM)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftyk.io\" alt=\"Logo\" /\u003e REST was NEVER about CRUD](https://tyk.io/rest-never-crud/)\r\n\r\n### Express\r\n\r\nLearn about the Node.js web application framework called Express.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fexpressjs.com\" alt=\"Logo\" /\u003e Express](https://expressjs.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - Express Framework](https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Express.js \u0026 Node.js Course for Beginners](https://www.youtube.com/watch?v=G8uL0lFFoN0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Understanding Node.js \u0026 Express.js fundamentals](https://medium.com/@LindaVivah/the-beginners-guide-understanding-node-js-express-js-fundamentals-e15493462be1)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Express.js](https://en.wikipedia.org/wiki/Express.js)\r\n\r\n### GraphQL\r\n\r\nLearn how to use the GraphQL query language.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgraphql.org\" alt=\"Logo\" /\u003e GraphQL](https://graphql.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Introduction to GraphQL](https://www.youtube.com/watch?v=Y0lDGjwRYKw)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - GraphQL Specification](https://github.com/graphql/graphql-spec)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.howtographql.com\" alt=\"Logo\" /\u003e The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)\r\n\r\n### GNU/Linux\r\n\r\nLearn about the GNU/Linux operating system\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.gnu.org\" alt=\"Logo\" /\u003e Linux and the GNU System](https://www.gnu.org/gnu/linux-and-gnu.en.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - GNU/Linux naming controversy](https://en.wikipedia.org/wiki/GNU/Linux_naming_controversy)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.debian.org\" alt=\"Logo\" /\u003e What is GNU/Linux?](https://www.debian.org/releases/stable/amd64/ch01s02.en.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchdatacenter.techtarget.com\" alt=\"Logo\" /\u003e GNU Linux](https://searchdatacenter.techtarget.com/definition/GNU-Linux)\r\n\r\n### Docker\r\n\r\nLearn how to use Docker.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.docker.com\" alt=\"Logo\" /\u003e Docker](https://www.docker.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Docker (software)](https://en.wikipedia.org/wiki/Docker_(software))\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocker-curriculum.com\" alt=\"Logo\" /\u003e Docker for beginners](https://docker-curriculum.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fopensource.com\" alt=\"Logo\" /\u003e What is Docker?](https://opensource.com/resources/what-docker)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdocs.docker.com\" alt=\"Logo\" /\u003e Get Started, Part 1: Orientation and setup](https://docs.docker.com/get-started/)\r\n\r\n### SSH\r\n\r\nLearn how to use SSH and learn how to connect to a device using an SSH client.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Secure Shell](https://en.wikipedia.org/wiki/Secure_Shell)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsearchsecurity.techtarget.com\" alt=\"Logo\" /\u003e Secure Shell (SSH)](https://searchsecurity.techtarget.com/definition/Secure-Shell)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.geeksforgeeks.org\" alt=\"Logo\" /\u003e SSH command in Linux with Examples](https://www.geeksforgeeks.org/ssh-command-in-linux-with-examples/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhelp.ubnt.com\" alt=\"Logo\" /\u003e How to Establish a Connection Using SSH](https://help.ubnt.com/hc/en-us/articles/218850057-Intro-to-Networking-How-to-Establish-a-Connection-Using-SSH)\r\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)\r\n\r\n## ➤ Contributors\n\t\n\n| [\u003cimg alt=\"Andreas Mehlsen\" src=\"https://avatars1.githubusercontent.com/u/6267397?s=460\u0026v=4\" width=\"100\"\u003e](https://twitter.com/andreasmehlsen) | [\u003cimg alt=\"You?\" src=\"https://joeschmoe.io/api/v1/random\" width=\"100\"\u003e](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |\n|:--------------------------------------------------:|:--------------------------------------------------:|\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |\r\n| 🔥                                               |                                                  |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).","funding_links":["https://www.buymeacoffee.com/AndreasMehlsen)!"],"categories":["JavaScript","Awesome Github Repositorys","algorithms","web-components","frameworks"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fweb-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-skills/lists"}