Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://andreasbm.github.io/web-skills/?compact

A visual overview of useful skills to learn as a web developer
https://andreasbm.github.io/web-skills/?compact

accessibility algorithms architecture backend build-tools css design frameworks html javascript pwa testing web-components

Last synced: about 2 months ago
JSON representation

A visual overview of useful skills to learn as a web developer

Awesome Lists containing this project

README

        

Web Skills



Web Skills is a visual overview of useful skills to learn as a web developer. Go to https://andreasbm.github.io/web-skills to check out the visual overview or scroll through this readme to get the overview as a list. If you like the project you are very welcome to become a stargazer 🤩




Web Skills Demo



📖 Table of Contents

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)

## ➤ Table of Contents

* [➤ FAQ](#-faq)
* [What is Web Skills?](#what-is-web-skills)
* [How did you choose the skills?](#how-did-you-choose-the-skills)
* [How can I support you?](#how-can-i-support-you)
* [How can I get involved?](#how-can-i-get-involved)
* [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)
* [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)
* [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)
* [What does the "experimental" banner mean?](#what-does-the-experimental-banner-mean)
* [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)
* [➤ Fundamentals](#-fundamentals)
* [HTML](#html)
* [Syntax](#syntax)
* [Basic Tags](#basic-tags)
* [Forms](#forms)
* [SEO](#seo)
* [Discoverable Content](#discoverable-content)
* [Svg](#svg)
* [Best Practices](#best-practices)
* [CSS](#css)
* [Syntax](#syntax-1)
* [Selectors](#selectors)
* [Specificity](#specificity)
* [Pseudo Selectors](#pseudo-selectors)
* [Box Model](#box-model)
* [Margin Collapsing](#margin-collapsing)
* [Colors](#colors)
* [Calc](#calc)
* [Layout](#layout)
* [Flex](#flex)
* [Grid](#grid)
* [Transforms](#transforms)
* [Animations](#animations)
* [Responsive Design](#responsive-design)
* [Media Queries](#media-queries)
* [Relative Units](#relative-units)
* [Images](#images)
* [CSS Variables](#css-variables)
* [Best Practices](#best-practices-1)
* [Javascript](#javascript)
* [Syntax](#syntax-2)
* [Spread](#spread)
* [Destructuring](#destructuring)
* [DOM](#dom)
* [DOM Manipulation](#dom-manipulation)
* [Events](#events)
* [Objects](#objects)
* [Prototype](#prototype)
* [Classes](#classes)
* [Regex](#regex)
* [Template Literals](#template-literals)
* [Promises](#promises)
* [Callbacks](#callbacks)
* [Async/await](#asyncawait)
* [Fetch](#fetch)
* [Web Animations](#web-animations)
* [Modules](#modules)
* [Intl](#intl)
* [Canvas](#canvas)
* [Documentation](#documentation)
* [Best Practices](#best-practices-2)
* [The Browser](#the-browser)
* [Standardization](#standardization)
* [W3C](#w3c)
* [TC39](#tc39)
* [WHATWG](#whatwg)
* [Specifications](#specifications)
* [Browser Engines](#browser-engines)
* [Webkit](#webkit)
* [Blink](#blink)
* [Gecko](#gecko)
* [HTTP](#http)
* [The Internet](#the-internet)
* [Polyfills](#polyfills)
* [Debugging](#debugging)
* [Developer console](#developer-console)
* [➤ Accessibility](#-accessibility)
* [The why](#the-why)
* [Screen Readers](#screen-readers)
* [Accessibility tree](#accessibility-tree)
* [ARIA](#aria)
* [Accessible HTML](#accessible-html)
* [Alt text](#alt-text)
* [Accessible CSS](#accessible-css)
* [Accessible forms](#accessible-forms)
* [UI States](#ui-states)
* [Keyboard Accessibility](#keyboard-accessibility)
* [Focus](#focus)
* [Accessible Colors](#accessible-colors)
* [Laws & Policies](#laws--policies)
* [Audits](#audits)
* [➤ Web Components](#-web-components)
* [Custom Elements](#custom-elements)
* [HTML Templates](#html-templates)
* [Shadow DOM](#shadow-dom)
* [Shadow Parts](#shadow-parts)
* [Slots](#slots)
* [Best practices](#best-practices)
* [Constructible Stylesheets](#constructible-stylesheets)
* [Form Participation](#form-participation)
* [➤ Progressive Webapps](#-progressive-webapps)
* [API's](#apis)
* [Storage](#storage)
* [Routing](#routing)
* [History API](#history-api)
* [Service Workers](#service-workers)
* [Offline first](#offline-first)
* [Push notifications](#push-notifications)
* [Web App manifest](#web-app-manifest)
* [Add to homescreen](#add-to-homescreen)
* [Pointer Events](#pointer-events)
* [Loading Performance](#loading-performance)
* [App shell](#app-shell)
* [Render-Blocking Resources](#render-blocking-resources)
* [Compression](#compression)
* [Performance metrics](#performance-metrics)
* [Largest Contentful Paint](#largest-contentful-paint)
* [Total Blocking Time](#total-blocking-time)
* [Time to Interactive](#time-to-interactive)
* [Lazy Loading](#lazy-loading)
* [Dynamic Import](#dynamic-import)
* [Offscreen images](#offscreen-images)
* [Critical Request Chains](#critical-request-chains)
* [Tree shaking](#tree-shaking)
* [Codesplitting](#codesplitting)
* [PRPL Pattern](#prpl-pattern)
* [Resource Prioritization](#resource-prioritization)
* [Caching](#caching)
* [Rendering Performance](#rendering-performance)
* [Rendering](#rendering)
* [Event loop](#event-loop)
* [Microtask](#microtask)
* [Stack](#stack)
* [Heap](#heap)
* [RAIL Model](#rail-model)
* [requestAnimationFrame](#requestanimationframe)
* [requestIdleCallback](#requestidlecallback)
* [Critical Rendering Path](#critical-rendering-path)
* [The Pixel Pipeline](#the-pixel-pipeline)
* [Style calculations](#style-calculations)
* [Transforms](#transforms-1)
* [Paint areas](#paint-areas)
* [Layout Trashing](#layout-trashing)
* [Layers](#layers)
* [Debounce](#debounce)
* [CSS Containment](#css-containment)
* [Web Workers](#web-workers)
* [Security](#security)
* [HTTPS](#https)
* [Browser Sandbox](#browser-sandbox)
* [OWASP](#owasp)
* [Cross-Site Scripting](#cross-site-scripting)
* [Clickjacking](#clickjacking)
* [Content Security Policy](#content-security-policy)
* [Audits](#audits-1)
* [Performance budgets](#performance-budgets)
* [Lighthouse](#lighthouse)
* [Chrome DevTools](#chrome-devtools)
* [➤ Build tools](#-build-tools)
* [Package Managers](#package-managers)
* [NPM](#npm)
* [Yarn](#yarn)
* [Module Bundlers](#module-bundlers)
* [Rollup](#rollup)
* [Webpack](#webpack)
* [Parcel](#parcel)
* [Snowpack](#snowpack)
* [Linters and formatters](#linters-and-formatters)
* [Prettier](#prettier)
* [ESLint](#eslint)
* [Task Runners](#task-runners)
* [NPM Scripts](#npm-scripts)
* [Transpilers](#transpilers)
* [Babel](#babel)
* [Typescript](#typescript)
* [CSS Pre-processors](#css-pre-processors)
* [SASS](#sass)
* [PostCSS](#postcss)
* [Node.js](#nodejs)
* [➤ Frameworks & Libraries](#-frameworks--libraries)
* [lit-element](#lit-element)
* [Vue](#vue)
* [React](#react)
* [Angular](#angular)
* [Svelte](#svelte)
* [Stencil](#stencil)
* [➤ Testing](#-testing)
* [Testing Methodologies](#testing-methodologies)
* [Unit Testing](#unit-testing)
* [Integration Testing](#integration-testing)
* [System Testing](#system-testing)
* [Acceptance Testing](#acceptance-testing)
* [Smoke Testing](#smoke-testing)
* [Performance Testing](#performance-testing)
* [Usability Testing](#usability-testing)
* [White Box Testing](#white-box-testing)
* [Black Box Testing](#black-box-testing)
* [Automated Testing](#automated-testing)
* [Manual Testing](#manual-testing)
* [Continuous integration](#continuous-integration)
* [A/B Testing](#ab-testing)
* [Test Runners](#test-runners)
* [Karma](#karma)
* [Mocha](#mocha)
* [Jasmine](#jasmine)
* [Cypress](#cypress)
* [Ava](#ava)
* [Best Practices](#best-practices-3)
* [➤ Architecture & paradigms](#-architecture--paradigms)
* [Paradigms](#paradigms)
* [Programming Paradigms](#programming-paradigms)
* [Object Oriented Programming](#object-oriented-programming)
* [S.O.L.I.D](#solid)
* [Functional programming](#functional-programming)
* [Recursion](#recursion)
* [Higher-Order Functions](#higher-order-functions)
* [Currying](#currying)
* [Monads](#monads)
* [Architecture](#architecture)
* [Design Patterns](#design-patterns)
* [Singleton](#singleton)
* [Observer](#observer)
* [Prototype](#prototype-1)
* [Bridge](#bridge)
* [Proxy](#proxy)
* [Chain of responsibility](#chain-of-responsibility)
* [Constructor](#constructor)
* [CSS Methodologies](#css-methodologies)
* [BEM](#bem)
* [SMACSS](#smacss)
* [OOCSS](#oocss)
* [➤ Team Collaboration](#-team-collaboration)
* [Version Control](#version-control)
* [Git](#git)
* [Github](#github)
* [Bitbucket](#bitbucket)
* [Management](#management)
* [Agile Development](#agile-development)
* [Scrum](#scrum)
* [Kanban](#kanban)
* [Waterfall Development](#waterfall-development)
* [Test Driven Development](#test-driven-development)
* [➤ Design & UX](#-design--ux)
* [Color Theory](#color-theory)
* [Color Wheel](#color-wheel)
* [Typography](#typography)
* [Font Size](#font-size)
* [Line Spacing](#line-spacing)
* [C.R.A.P](#crap)
* [Contrast](#contrast)
* [Repetition](#repetition)
* [Alignment](#alignment)
* [Proximity](#proximity)
* [Consistency](#consistency)
* [Spacing](#spacing)
* [Error Handling](#error-handling)
* [Loading](#loading)
* [The Golden Ratio](#the-golden-ratio)
* [Mobile First](#mobile-first)
* [Hit Targets](#hit-targets)
* [Design Systems](#design-systems)
* [Material Design](#material-design)
* [Fluent Design](#fluent-design)
* [Accessibility](#accessibility)
* [Best Practices](#best-practices-4)
* [➤ The Modern Web](#-the-modern-web)
* [Streams](#streams)
* [Media Streams](#media-streams)
* [Media Recorder](#media-recorder)
* [Web RTC](#web-rtc)
* [Screen Capture](#screen-capture)
* [Generators](#generators)
* [Speech Synthesis](#speech-synthesis)
* [Web Sockets](#web-sockets)
* [Geolocation](#geolocation)
* [Device orientation & motion](#device-orientation--motion)
* [Fullscreen](#fullscreen)
* [Variable Fonts](#variable-fonts)
* [HTTP/2](#http2)
* [Payment Request API](#payment-request-api)
* [Web Audio](#web-audio)
* [Observers](#observers)
* [Mutation Observer](#mutation-observer)
* [Intersection Observer](#intersection-observer)
* [Resize Observer](#resize-observer)
* [Performance Observer](#performance-observer)
* [Scrollsnapping](#scrollsnapping)
* [Web Assembly](#web-assembly)
* [Beacon](#beacon)
* [Clipboard](#clipboard)
* [Share](#share)
* [Performance API](#performance-api)
* [Gamepad API](#gamepad-api)
* [Speech Recognition](#speech-recognition)
* [Interaction Media Queries](#interaction-media-queries)
* [Browser Extensions](#browser-extensions)
* [Pointer Lock API](#pointer-lock-api)
* [Picture In Picture](#picture-in-picture)
* [Proxies](#proxies)
* [Houdini](#houdini)
* [Project Fugu](#project-fugu)
* [Web Authentication API](#web-authentication-api)
* [Credentials Manager API](#credentials-manager-api)
* [Native File System](#native-file-system)
* [Shape Detection](#shape-detection)
* [Web Bluetooth](#web-bluetooth)
* [Web USB](#web-usb)
* [Web XR](#web-xr)
* [Presentation](#presentation)
* [Network Information API](#network-information-api)
* [➤ Algorithms & Data structures](#-algorithms--data-structures)
* [Data structures](#data-structures)
* [Arrays](#arrays)
* [Queues & Stacks](#queues--stacks)
* [Trees](#trees)
* [Binary Indexed Tree](#binary-indexed-tree)
* [Heap](#heap-1)
* [Red-black Tree](#red-black-tree)
* [Trie](#trie)
* [K-D Tree](#k-d-tree)
* [Hash Tables](#hash-tables)
* [Linked Lists](#linked-lists)
* [Graphs](#graphs)
* [Analysis](#analysis)
* [Time complexity](#time-complexity)
* [Cost model](#cost-model)
* [Order of Growth](#order-of-growth)
* [Big O notation](#big-o-notation)
* [Space Complexity](#space-complexity)
* [Algorithms](#algorithms)
* [Sorting](#sorting)
* [Insertion Sort](#insertion-sort)
* [Quicksort](#quicksort)
* [Mergesort](#mergesort)
* [Heapsort](#heapsort)
* [Searching](#searching)
* [Binary Search](#binary-search)
* [Breadth First Search](#breadth-first-search)
* [Depth First Search](#depth-first-search)
* [Dijkstra's Algorithm](#dijkstras-algorithm)
* [String Search](#string-search)
* [Hashing](#hashing)
* [➤ Databases & Servers](#-databases--servers)
* [Databases](#databases)
* [Relational Databases](#relational-databases)
* [SQL](#sql)
* [MySQL](#mysql)
* [PostgreSQL](#postgresql)
* [Non-relational Databases](#non-relational-databases)
* [Redis](#redis)
* [MongoDB](#mongodb)
* [Data Modelling](#data-modelling)
* [ER Diagram](#er-diagram)
* [Keys](#keys)
* [Indexing](#indexing)
* [Data Integrity](#data-integrity)
* [Normalization](#normalization)
* [Functional Dependencies](#functional-dependencies)
* [Normal Forms](#normal-forms)
* [Transactions](#transactions)
* [ACID](#acid)
* [Serializability](#serializability)
* [Locks](#locks)
* [Deadlocks](#deadlocks)
* [Precedence graph](#precedence-graph)
* [Servers](#servers)
* [Architectural Models](#architectural-models)
* [Client-Server](#client-server)
* [Proxy Server](#proxy-server)
* [Peer-To-Peer](#peer-to-peer)
* [Middleware](#middleware)
* [Request-Reply Protocol](#request-reply-protocol)
* [UDP](#udp)
* [TCP](#tcp)
* [REST API](#rest-api)
* [CRUD](#crud)
* [Express](#express)
* [GraphQL](#graphql)
* [GNU/Linux](#gnulinux)
* [Docker](#docker)
* [SSH](#ssh)
* [➤ Contributors](#-contributors)
* [➤ License](#-license)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#faq)

## ➤ FAQ

### What is Web Skills?

Web 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.

### How did you choose the skills?

The 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.

### How can I support you?

I 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)! <3

### How can I get involved?

You 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!

### How can I keep track of what skills I know?

If 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.

### I am overwhelmed! Help me!

I 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.

### Why haven't you included XYZ Technology?

The 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).

### What does the "experimental" banner mean?

When 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.

### How can I get in contact with you?

Reach 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.

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#fundamentals)

## ➤ Fundamentals

### HTML

### Syntax

Learn the basics of HTML and get comfortable with it's syntax and main concepts.

* [ ] [Logo MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
* [ ] [Logo MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)
* [ ] [Logo Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)

#### Basic Tags

Get familiar with the basic HTML tags

* [ ] [Logo MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
* [ ] [Logo Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)
* [ ] [Logo Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)
* [ ] [Logo W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)

### Forms

Learn how to design efficient forms, validating them effectively and keeping the user informed along the way.

* [ ] [Logo MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)
* [ ] [Logo Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)
* [ ] [Logo W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)

### SEO

Learn how to make your content search-friendly.

* [ ] [Logo web.dev - Discoverable](https://web.dev/discoverable)
* [ ] [Logo Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)
* [ ] [Logo Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)
* [ ] [Logo web.dev - SEO audits](https://web.dev/lighthouse-seo)

#### Discoverable Content

Learn how to structure your HTML in a way that provides a rich experience when sharing it online.

* [ ] [Logo Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)
* [ ] [Logo Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)
* [ ] [Logo Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)
* [ ] [Logo web.dev - Easily discoverable](https://web.dev/discoverable)

### Svg

Learn how to work with SVG files to make graphics look crisp across all screen resolutions.

* [ ] [Logo 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)
* [ ] [Logo SVG on the web](https://svgontheweb.com/)

### Best Practices

Learn the best practices of writing HTML.

* [ ] [Logo MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)
* [ ] [Logo W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)

### CSS

### Syntax

Learn the basics of CSS and get comfortable with it's syntax and main concepts.

* [ ] [Logo MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
* [ ] [Logo W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)
* [ ] [Logo Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)
* [ ] [Logo MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)
* [ ] [Logo MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)
* [ ] [Logo MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [ ] [Logo MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)

### Selectors

Learn about CSS selectors and how to effeciently target DOM elements.

* [ ] [Logo MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
* [ ] [Logo MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
* [ ] [Logo CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)
* [ ] [Logo CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)
* [ ] [Logo W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)

#### Specificity

Learn what specificity means and how to use it when writing CSS.

* [ ] [Logo MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
* [ ] [Logo MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
* [ ] [Logo dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)
* [ ] [Logo Specificity Calculator](https://specificity.keegan.st/)
* [ ] [Logo W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)

#### Pseudo Selectors

Learn how to use pseudo selectors.

* [ ] [Logo MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
* [ ] [Logo CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)
* [ ] [Logo When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)
* [ ] [Logo W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)
* [ ] [Logo W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)

### Box Model

Learn what the CSS box model means.

* [ ] [Logo 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)
* [ ] [Logo MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
* [ ] [Logo CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

#### Margin Collapsing

Learn about margin collapsing.

* [ ] [Logo MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
* [ ] [Logo Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)
* [ ] [Logo CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)
* [ ] [Logo What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)
* [ ] [Logo What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)

### Colors

Learn the different ways you can define colors in CSS.

* [ ] [Logo MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
* [ ] [Logo MDN - ](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
* [ ] [Logo W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)

### Calc

Learn how to use the CSS calc function.

* [ ] [Logo MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
* [ ] [Logo CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)

### Layout

Learn the different layout types for web.

* [ ] [Logo Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)
* [ ] [Logo W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)
* [ ] [Logo MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
* [ ] [Logo MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

#### Flex

Learn how to create layouts using flexbox.

* [ ] [Logo MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
* [ ] [Logo A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* [ ] [Logo MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
* [ ] [Logo Flexbox Froggy](https://flexboxfroggy.com/)
* [ ] [Logo Flexbox Defense](http://flexboxdefense.com)

#### Grid

Learn how to create layouts using CSS Grid.

* [ ] [Logo MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
* [ ] [Logo A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [ ] [Logo MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
* [ ] [Logo CSS Grid Garden](https://cssgridgarden.com/)
* [ ] [Logo Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)

### Transforms

Learn the different ways to transform elements through CSS.

* [ ] [Logo MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
* [ ] [Logo CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)

#### Animations

Learn how to animate elements through CSS using keyframes.

* [ ] [Logo MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
* [ ] [Logo CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)

### Responsive Design

Learn how to make your website responsive so it works across different screen sizes.

* [ ] [Logo MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
* [ ] [Logo Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)
* [ ] [Logo Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)
* [ ] [Logo Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)
* [ ] [Logo Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)
* [ ] [Logo Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)

#### Media Queries

Learn how use media queries to build responsive layout.

* [ ] [Logo CSS Tricks - CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/)
* [ ] [Logo MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
* [ ] [Logo MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)

#### Relative Units

Learn how to use relative units for properties such as font sizes and spacing.

* [ ] [Logo MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
* [ ] [Logo MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [ ] [Logo The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)
* [ ] [Logo CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)
* [ ] [Logo 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)

#### Images

Learn how to make images responsive, always showing the best possible version for the screen size.

* [ ] [Logo Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)
* [ ] [Logo MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

### CSS Variables

Learn how to define and use CSS variables.

* [ ] [Logo MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
* [ ] [Logo Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)
* [ ] [Logo dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)
* [ ] [Logo CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)

### Best Practices

Learn the best practices of writing CSS.

* [ ] [Logo MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)
* [ ] [Logo MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)
* [ ] [Logo Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)

### Javascript

### Syntax

Learn the basics of Javascript and get comfortable with it's syntax and main concepts.

* [ ] [Logo MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)
* [ ] [Logo MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
* [ ] [Logo MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)

#### Spread

Learn how the spread syntax can help you when working with arrays.

* [ ] [Logo MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
* [ ] [Logo Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)
* [ ] [Logo Object rest and spread properties](https://v8.dev/features/object-rest-spread)

#### Destructuring

Learn how destructuring can help you when working with objects.

* [ ] [Logo MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
* [ ] [Logo MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)
* [ ] [Logo javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)

### DOM

Learn how the HTML is represented as objects that comprise the structure and content of a document.

* [ ] [Logo MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* [ ] [Logo 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/)
* [ ] [Logo Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)
* [ ] [Logo htmldom.dev](https://htmldom.dev/)

#### DOM Manipulation

Learn how to query HTML elements through Javascript and manipulate them.

* [ ] [Logo MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
* [ ] [Logo Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)

### Events

Learn how to dispatch and listen for events.

* [ ] [Logo MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)
* [ ] [Logo MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)
* [ ] [Logo Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)
* [ ] [Logo Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)
* [ ] [Logo JavaScript Events Explained](https://flaviocopes.com/javascript-events/)
* [ ] [Logo MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
* [ ] [Logo MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
* [ ] [Logo Event order](https://www.quirksmode.org/js/events_order.html)

### Objects

Learn how to create and use objects.

* [ ] [Logo MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)
* [ ] [Logo MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
* [ ] [Logo javascript.info - Objects](https://javascript.info/object)
* [ ] [Logo MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
* [ ] [Logo W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)
* [ ] [Logo MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
* [ ] [Logo MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)
* [ ] [Logo MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)
* [ ] [Logo Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)

#### Prototype

Learn how to extend objects and functions through its prototype.

* [ ] [Logo The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
* [ ] [Logo Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)
* [ ] [Logo dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)

##### Classes

Learn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.

* [ ] [Logo MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
* [ ] [Logo Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)
* [ ] [Logo MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)
* [ ] [Logo MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)
* [ ] [Logo MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)

### Regex

Learn how to use regex to extract information from strings.

* [ ] [Logo MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
* [ ] [Logo javascript.info - Regular expressions](https://javascript.info/regular-expressions)
* [ ] [Logo MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

### Template Literals

Learn how template literals and tagged templates and help you manipulate strings.

* [ ] [Logo MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
* [ ] [Logo MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)
* [ ] [Logo Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)

### Promises

Learn how to use promises and what asynchronous code means.

* [ ] [Logo Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)
* [ ] [Logo MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
* [ ] [Logo Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)

#### Callbacks

Learn how to use callbacks and why they are not always a good idea.

* [ ] [Logo MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
* [ ] [Logo JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)
* [ ] [Logo javascript.info - Callbacks](https://javascript.info/callbacks)

#### Async/await

Learn how to use the async and await keywords to make it easier to write asynchronous code.

* [ ] [Logo MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
* [ ] [Logo Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)
* [ ] [Logo javascript.info - Async/await](https://javascript.info/async-await)

#### Fetch

Learn how to use the fetch API to fetch data.

* [ ] [Logo Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)
* [ ] [Logo Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)
* [ ] [Logo Freecodecamp - Fetch practical guide](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)
* [ ] [Logo MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
* [ ] [Logo Alligator - Fetch API](https://alligator.io/js/fetch-api/)
* [ ] [Logo Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)
* [ ] [Logo Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)

### Web Animations

Learn how to use web animations to animate elements in the DOM.

* [ ] [Logo Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)
* [ ] [Logo MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [ ] [Logo CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)

### Modules

Learn how to modularize your code into ES6 modules using the export and import keywords.

* [ ] [Logo MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
* [ ] [Logo MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
* [ ] [Logo V8 - Modules](https://v8.dev/features/modules)
* [ ] [Logo Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)

### Intl

Learn how to localize your website using the Intl API.

* [ ] [Logo MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
* [ ] [Logo MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
* [ ] [Logo New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)

### Canvas

Learn how to paint graphics onto a canvas.

* [ ] [Logo MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
* [ ] [Logo MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
* [ ] [Logo CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)

### Documentation

Learn how to create good documentation and why it is important.

* [ ] [Logo Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)
* [ ] [Logo A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)
* [ ] [Logo Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)
* [ ] [Logo The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)
* [ ] [Logo Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)

### Best Practices

Learn the best practices of writing Javascript.

* [ ] [Logo MDN - JavaScript guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript)
* [ ] [Logo Airbnb - JavaScript Style Guide](https://github.com/airbnb/javascript)
* [ ] [Logo Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js/)
* [ ] [Logo 5 JavaScript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)
* [ ] [Logo JavaScript Style Guide and Coding Conventions](https://www.w3schools.com/js/js_conventions.asp)

### The Browser

### Standardization

Learn why web standards are important and how new specifications are standardised.

* [ ] [Logo Wikipedia - Web Standards](https://en.wikipedia.org/wiki/Web_standards)
* [ ] [Logo What Are Web Standards?](https://www.elcom.com.au/resources/blog/web-standards)
* [ ] [Logo 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/)

#### W3C

Learn what W3C are doing and how they are moving the web forward.

* [ ] [Logo W3C - About](https://www.w3.org/standards/about.html)
* [ ] [Logo W3C - Standards](https://www.w3.org/standards/)
* [ ] [Logo W3C - Process](http://webdiy.org/w3c/)
* [ ] [Logo Web Standards Guide](https://www.smashingmagazine.com/2019/01/web-standards-guide/)
* [ ] [Logo W3C - Groups](https://www.w3.org/community/groups/)
* [ ] [Logo The W3C At Twenty-Five](https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/)

#### TC39

Learn what TC39 are doing and how they are moving the web forward.

* [ ] [Logo The TC39 process for ECMAScript features](https://2ality.com/2015/11/tc39-process.html)
* [ ] [Logo Github - TC39](https://github.com/tc39)
* [ ] [Logo Ecma International - Programme of work](https://www.ecma-international.org/memento/tc39.htm)
* [ ] [Logo Wikipedia - Ecma International](https://en.wikipedia.org/wiki/Ecma_International)

#### WHATWG

Learn what WHATWG are doing and how they are moving the web forward.

* [ ] [Logo WHATWG - FAQ](https://whatwg.org/faq)
* [ ] [Logo WHATWG - Standards](https://spec.whatwg.org/)
* [ ] [Logo MDN - WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)
* [ ] [Logo W3C vs. WHATWG HTML5 Specs](https://dzone.com/articles/w3c-vs-whatwg-html5-specs)
* [ ] [Logo WHATWG - HTML](https://html.spec.whatwg.org/)
* [ ] [Logo Wikipedia - WHATWG](https://en.wikipedia.org/wiki/WHATWG)

#### Specifications

Learn how to read specifications developed by the standards committees.

* [ ] [Logo How to Read the ECMAScript Specification](https://timothygu.me/es-howto/)
* [ ] [Logo How to Read W3C Specs](https://alistapart.com/article/readspec/)
* [ ] [Logo Learning CSS by reading specs](https://www.chenhuijing.com/blog/learning-css-by-reading-specifications/)
* [ ] [Logo Understanding the CSS Specifications](https://www.w3.org/Style/CSS/read.en.html)

### Browser Engines

Learn what a browser engine is and get an overview of the browser landscape and market share.

* [ ] [Logo Medium - Browser Engines](https://medium.com/@jonbiro/browser-engines-chromium-v8-blink-gecko-webkit-98d6b0490968)
* [ ] [Logo Wikipedia - Comparison](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)
* [ ] [Logo HTML5 Rocks - How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
* [ ] [Logo Demystifying Browsers](https://textslashplain.com/2020/02/09/demystifying-browsers/)

#### Webkit

Learn about the Webkit browser engine.

* [ ] [Logo Webkit](https://webkit.org/)

#### Blink

Learn about the Blink browser engine.

* [ ] [Logo Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine))

#### Gecko

Learn about the Gecko browser engine.

* [ ] [Logo Gecko](https://en.wikipedia.org/wiki/Gecko_(software))

### HTTP

Learn how data is distributed through the HTTP protocol.

* [ ] [Logo MDN - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [ ] [Logo MDN - HTTP Glossary](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)
* [ ] [Logo MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
* [ ] [Logo Wikipedia - Hypertext Transfer Protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)

### The Internet

Learn the basics of how the internet works.

* [ ] [Logo MDN - How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
* [ ] [Logo Youtube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
* [ ] [Logo Explain That Stuff - Internet](https://www.explainthatstuff.com/internet.html)
* [ ] [Logo Stanford - How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
* [ ] [Logo How the Internet Works](https://blog.hubspot.com/marketing/how-the-internet-works)

### Polyfills

Learn how it is possible to use polyfills to increase the browser support for your website.

* [ ] [Logo MDN - Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
* [ ] [Logo Introduction To Polyfills & Their Usage](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-polyfills-their-usage-9cd6db4b1923)
* [ ] [Logo W3C - Polyfills and the evolution of the Web](https://www.w3.org/2001/tag/doc/polyfills/)
* [ ] [Logo Can I use](http://caniuse.com/)

### Debugging

Learn about the basics concepts of debugging.

* [ ] [Logo Google Devs - Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/)
* [ ] [Logo MDN - Cross browser testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)
* [ ] [Logo 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)

#### Developer console

Learn how to use the developer console to debug your code.

* [ ] [Logo MDN - Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)
* [ ] [Logo Google Devs - Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/api)
* [ ] [Logo Google Devs - Get Started with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript)
* [ ] [Logo Google Devs - Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities)
* [ ] [Logo MDN - Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)
* [ ] [Logo MDN - Debugging HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
* [ ] [Logo javascript.info - Debugging in Chrome](https://javascript.info/debugging-chrome)
* [ ] [Logo 14 JavaScript debugging tips](https://raygun.com/javascript-debugging-tips)
* [ ] [Logo The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)
* [ ] [Logo Youtube - Chrome DevTools 101](https://www.youtube.com/watch?v=H0XScE08hy8)
* [ ] [Logo Chrome Devs - Quickly monitor events](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)
* [ ] [Logo Youtube - 14 Must Know Chrome Dev Tools Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#accessibility)

## ➤ Accessibility

### The why

Learn what accessibility is and why it is important.

* [ ] [Logo Google Devs - Accessibility Fundamentals](https://developers.google.com/web/fundamentals/accessibility/)
* [ ] [Logo A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)
* [ ] [Logo Udacity - Chromevox Lite](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)
* [ ] [Logo Dev.to - Why Accessibility Matters](https://dev.to/lhoffmanwg1/why-accessibility-matters-39nl)
* [ ] [Logo Abilitynet - Why Accessibility Matters](https://www.abilitynet.org.uk/why-accessibility-matters)
* [ ] [Logo Udacity - Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)
* [ ] [Logo Youtube - Headings, Landmarks, and Tabs](https://www.youtube.com/watch?v=HE2R86EZPMA)

### Screen Readers

Learn about assistive technology such as screen readers that reads sections of the page aloud based on the current focus.

* [ ] [Logo The A11Y Project - Screen Reader Myths](https://a11yproject.com/posts/people-who-use-screen-readers-dont-use-javascript/)
* [ ] [Logo The A11Y Project - NVDA Screen Reader](https://a11yproject.com/posts/getting-started-with-nvda/)
* [ ] [Logo The A11Y Project - OS X Voiceover](https://a11yproject.com/posts/getting-started-with-voiceover/)
* [ ] [Logo Webaim - Screen Reader Survey](https://webaim.org/projects/screenreadersurvey7/)

### Accessibility tree

Learn about the accessibility tree and how assistive technology uses it.

* [ ] [Logo Google Devs - The Accessibility Tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree)

#### ARIA

Learn how to use ARIA descriptions an labels to help assistive technology understanding your website.

* [ ] [Logo Google Devs - ARIA Labels](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships)
* [ ] [Logo Google Devs - Hiding and updating content](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content)
* [ ] [Logo The A11Y Project - ARIA States](https://a11yproject.com/posts/ARIA-states/)
* [ ] [Logo The A11Y Project - ARIA Properties](https://a11yproject.com/posts/ARIA-properties/)

#### Accessible HTML

Learn how to write HTML in such as way that assistive technology better understands it.

* [ ] [Logo Google Devs - Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/)
* [ ] [Logo MDN - Accessibility HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
* [ ] [Logo Webaim - Skip navigation](https://webaim.org/techniques/skipnav/)
* [ ] [Logo w3c - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
* [ ] [Logo Freecodecamp - Semantic Elements](https://guide.freecodecamp.org/html/html5-semantic-elements/)

##### Alt text

Learn how to use the alt attribute to provide a useful text alternative to this image.

* [ ] [Logo Google Devs - Text Alternatives for Images](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/text-alternatives-for-images)
* [ ] [Logo Webaim - Accessible Images](https://webaim.org/techniques/images/)
* [ ] [Logo Webaim - Alternative text](https://webaim.org/techniques/alttext/)

#### Accessible CSS

Learn how to write CSS in such as way that assistive technology better understands it.

* [ ] [Logo Webaim - CSS](https://webaim.org/techniques/css/)

### Accessible forms

Learn how to build accessible forms that makes it usable to as many people as possible.

* [ ] [Logo Webaim - Forms](https://webaim.org/techniques/forms/)
* [ ] [Logo Itnext - Form Accessibility Gudie](https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14)

### UI States

Learn how to make the state of each UI element clear.

* [ ] [Logo Google Devs - Accessible Styles](https://developers.google.com/web/fundamentals/accessibility/accessible-styles)

### Keyboard Accessibility

Learn how to make it easy for keyboard users to navigate your site.

* [ ] [Logo Webaim - Keyboard](https://webaim.org/techniques/keyboard/)
* [ ] [Logo Smashing Magazine - Web with just a keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/)

#### Focus

Learn how to create a sensible tab order and how to make it easy for the users to locate the currently focused element.

* [ ] [Logo web.dev - Control focus with tabindex](https://web.dev/control-focus-with-tabindex/)
* [ ] [Logo Google Devs - Focus](https://developers.google.com/web/fundamentals/accessibility/focus/)
* [ ] [Logo Google Devs - Dom Order Matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters)
* [ ] [Logo Google Devs - Using Tabindex](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex)
* [ ] [Logo Google Devs - Track Focus](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus)
* [ ] [Logo MDN - :focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
* [ ] [Logo MDN - :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)

### Accessible Colors

Learn how to select colors in such a way that users, including those with visual disabilities, can perceive the content on the page.

* [ ] [Logo Webaim - Contrast and Color](https://webaim.org/articles/contrast/)
* [ ] [Logo The A11Y Project - Check contrast](https://a11yproject.com/posts/check-contrast-with-mobile-device/)
* [ ] [Logo The A11Y Project - What is color contrast?](https://a11yproject.com/posts/what-is-color-contrast/)
* [ ] [Logo Designing accessible color systems](https://stripe.com/en-dk/blog/accessible-color-systems)

### Laws & Policies

Learn about the governmental policies related to web accessibility.

* [ ] [Logo W3C - Laws & Policies](https://www.w3.org/WAI/policies/)
* [ ] [Logo Webaim - Laws around the world](https://webaim.org/articles/laws/world/)
* [ ] [Logo Webaim - Section 508](https://webaim.org/standards/508/checklist)
* [ ] [Logo Webaim - WCAG 2 Checklist](https://webaim.org/standards/wcag/checklist)
* [ ] [Logo A11Y.dev - Lawsuits](https://a11y.dev/470-digital-accessibility-cases-were-filed-in-q3-2018/)

#### Audits

Learn how to conduct an accessibility review to improve the overall experience of using your site. Remember, good accessibility equals good UX!

* [ ] [Logo web.dev - Accessibility audits](https://web.dev/lighthouse-accessibility)
* [ ] [Logo Google Devs - How to review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)
* [ ] [Logo Webaim - Accessibility Tools](https://webaim.org/articles/tools/)
* [ ] [Logo Google Devs - Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference)
* [ ] [Logo Webaim - Wave](http://wave.webaim.org/)
* [ ] [Logo Google Chrome - NoCoffee Extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)
* [ ] [Logo Digital A11Y - Accessibility Plugins](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/)
* [ ] [Logo Google Devs - Accessibility for teams](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)
* [ ] [Logo WCAG 2.0 checklists](https://www.wuhcag.com/wcag-checklist/)
* [ ] [Logo How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#web-components)

## ➤ Web Components

### Custom Elements

Learn how to create new HTML tags with Custom Elements.

* [ ] [Logo Google Devs - Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)
* [ ] [Logo MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
* [ ] [Logo CSS Tricks - Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)
* [ ] [Logo Javascript.info - Custom Elements](https://javascript.info/custom-elements)
* [ ] [Logo dev.to - An introduction to Custom Elements](https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327)
* [ ] [Logo itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d)
* [ ] [Logo web.dev - Web Components](https://web.dev/web-components-io-2019/)

### HTML Templates

Learn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.

* [ ] [Logo MDN - Using Templates & Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)
* [ ] [Logo Javascript.info - Template Element](https://javascript.info/template-element)
* [ ] [Logo MDN - The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)

### Shadow DOM

Learn how to encapsulate your CSS using Shadow DOM.

* [ ] [Logo Google Devs - Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)
* [ ] [Logo MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
* [ ] [Logo MDN - Shadow Tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)
* [ ] [Logo CSS Tricks - Encapsulating Style and Structure](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)
* [ ] [Logo itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332)
* [ ] [Logo Monica - Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)

#### Shadow Parts

Learn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.

* [ ] [Logo Fergald - CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)
* [ ] [Logo MDN - ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
* [ ] [Logo W3C - CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/)
* [ ] [Logo Monica - ::part and ::theme, an explainer](https://meowni.ca/posts/part-theme-explainer/)
* [ ] [Logo Youtube - CSS Shadow Parts](https://www.youtube.com/watch?v=yVrvOueeb3s)
* [ ] [Logo Chrome Status - ::part and ::theme](https://www.chromestatus.com/features/5763933658939392)

#### Slots

Learn how to compose Custom Elements by using slots.

* [ ] [Logo Alligator.io - Composing Custom Elements](https://alligator.io/web-components/composing-slots-named-slots/)
* [ ] [Logo Javascript.info - Slots Composition](https://javascript.info/slots-composition)
* [ ] [Logo MDN - HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)
* [ ] [Logo Component.kitchen - A history of the HTML slot element](https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)

### Best practices

Get familiar with best practices when it comes to building Web Components.

* [ ] [Logo Google Devs - Custom Element Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices)
* [ ] [Logo Webcomponents.org - Web Components Best Practices](https://www.webcomponents.org/community/articles/web-components-best-practices)
* [ ] [Logo mateusortiz - Web Components the Right Way](https://github.com/mateusortiz/webcomponents-the-right-way)
* [ ] [Logo dev.to - Making Web Components for Different Contexts](https://dev.to/equinusocio/making-web-components-for-different-contexts-25ed)

### Constructible Stylesheets

Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.

* [ ] [Logo Google Devs - Constructable Stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)
* [ ] [Logo W3C - Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/)
* [ ] [Logo dev.to - Why Would Anyone Use Constructible Stylesheets](https://dev.to/westbrook/why-would-anyone-use-constructible-stylesheets-anyways-19ng)
* [ ] [Logo Benjamin Farrel - Adopt a Design System](https://medium.com/swlh/adopt-a-design-system-inside-your-web-components-with-constructable-stylesheets-dd24649261e)
* [ ] [Logo WICG - Constructable Stylesheet Objects](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)
* [ ] [Logo Chrome Status - Constructible Stylesheets](https://www.chromestatus.com/feature/5394843094220800)

### Form Participation

Learn how the Form Participation API proposal enables elements, other than built-in form control elements, to participate in form submission and validation.

* [ ] [Logo Form Participation API Explained](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit)
* [ ] [Logo Chrome Status - Form-associated custom elements](https://www.chromestatus.com/features/4708990554472448)
* [ ] [Logo web-platform-tests - Form Participation](https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated)
* [ ] [Logo Google Devs - Form-associated custom elements](https://developers.google.com/web/updates/2019/09/nic77#form-associated_custom_elements)
* [ ] [Logo web.dev - More capable form controls](https://web.dev/more-capable-form-controls/)
* [ ] [Logo W3C - Creating a form-associated custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#progressive-webapps)

## ➤ Progressive Webapps

### API's

### Storage

Learn how to store data for your web app.

* [ ] [Logo MDN - Storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API)
* [ ] [Logo MDN - Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
* [ ] [Logo MDN - Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
* [ ] [Logo MDN - IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
* [ ] [Logo Google Devs - View And Edit Local Storage](https://developers.google.com/web/tools/chrome-devtools/storage/localstorage)
* [ ] [Logo MDN - Client-side storage](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)

### Routing

Learn what routing means in single page applications.

* [ ] [Logo How Single-Page Applications Work](https://blog.pshrmn.com/how-single-page-applications-work/)
* [ ] [Logo Static Apps - Routing URLs in Static Web Apps](https://staticapps.org/articles/routing-urls-in-static-apps/)
* [ ] [Logo Routing With Single Page Applications or Client Side Routing](https://pennyforyourcode.com/tldr-routing-with-single-page-applications-or-client-side-routing-327626cdc5dd)

#### History API

Learn how to use the history API to add single page applicaiton routing to your web app.

* [ ] [Logo MDN - Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [ ] [Logo MDN - History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
* [ ] [Logo Single-page application routing in vanilla JavaScript](https://medium.com/@george.norberg/history-api-getting-started-36bfc82ddefc)
* [ ] [Logo CSS Tricks - Using the HTML5 History API](https://css-tricks.com/using-the-html5-history-api/)
* [ ] [Logo The History API](https://flaviocopes.com/history-api/)
* [ ] [Logo Google Devs - History API: Scroll Restoration](https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration)
* [ ] [Logo MDN - The Document Base URL element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)

### Service Workers

Learn how to register a service worker to provide a rich native-like experience.

* [ ] [Logo Google Devs - Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
* [ ] [Logo Google Devs - The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)
* [ ] [Logo Google Devs - Service Worker Registration](https://developers.google.com/web/fundamentals/primers/service-workers/registration)
* [ ] [Logo MDN - Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
* [ ] [Logo Google Devs - High-performance service worker loading](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading)
* [ ] [Logo Codelabs - Scripting the service worker](https://codelabs.developers.google.com/codelabs/pwa-scripting-the-service-worker/index.html?index=..%2F..dev-pwa-training#0)
* [ ] [Logo 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)
* [ ] [Logo Codelabs - Adding a Service Worker](https://developers.google.com/web/fundamentals/codelabs/offline)
* [ ] [Logo Google Devs - Debugging Service Workers](https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers)
* [ ] [Logo Caching best practices](https://jakearchibald.com/2016/caching-best-practices/)

#### Offline first

Learn how to make your web app working offline with an offline first approach.

* [ ] [Logo Google Devs - The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook)
* [ ] [Logo Udacity - Offline Web Applications](https://www.udacity.com/course/offline-web-applications--ud899)
* [ ] [Logo Offline First](http://offlinefirst.org/)
* [ ] [Logo Google Devs - Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)
* [ ] [Logo Google Devs - Offline Storage for Progressive Web Apps](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa)
* [ ] [Logo Codelabs - Offline quickstart](https://codelabs.developers.google.com/codelabs/pwa-offline-quickstart/index.html?index=..%2F..dev-pwa-training#0)
* [ ] [Logo Codelabs - Adding a Service Worker and Offline into your Web App](https://codelabs.developers.google.com/codelabs/offline/index.html?index=..%2F..%2Findex#0)
* [ ] [Logo Supercharged - Offline Links](https://www.youtube.com/watch?v=7fnpsF9tMXc)
* [ ] [Logo MDN - Online and offline events](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events)
* [ ] [Logo MDN - Making PWAs work offline](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers)

#### Push notifications

Learn how to add push notifications to your web app.

* [ ] [Logo Google Devs - Adding Push Notifications to a Web App](https://developers.google.com/web/fundamentals/codelabs/push-notifications/)
* [ ] [Logo MDN - How to make PWAs re-engageable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push)
* [ ] [Logo MDN - Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)

### Web App manifest

Learn how to tell the browser about your web app and how it should behave when 'installed' by creating a web app manifest.

* [ ] [Logo Google Devs - Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/)
* [ ] [Logo web.dev - Add a web app manifest](https://web.dev/add-manifest/)
* [ ] [Logo W3C - Web App Manifest](https://www.w3.org/TR/appmanifest/)
* [ ] [Logo MDN - How to make PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)

### Add to homescreen

Learn how to make your web app installable.

* [ ] [Logo web.dev - Installable](https://web.dev/installable)
* [ ] [Logo Google Devs - App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/)
* [ ] [Logo MDN - Add to Home screen](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen)

### Pointer Events

Learn how to handle inputs from pointing devices such as a mouse, pen/stylus or touch.

* [ ] [Logo MDN - Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
* [ ] [Logo Google Devs - Add Touch to Your Site](https://developers.google.com/web/fundamentals/design-and-ux/input/touch)
* [ ] [Logo Google Devs - Pointing the Way Forward](https://developers.google.com/web/updates/2016/10/pointer-events)
* [ ] [Logo Google Devs - Touch Action Options](https://developers.google.com/web/updates/2016/10/touch-action)
* [ ] [Logo W3C - Pointer Events](https://www.w3.org/TR/pointerevents/)

### Loading Performance

### App shell

Learn how to use an app shell to provide an instant and reliable experience to users on repeat visits

* [ ] [Logo Google Devs - The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell)
* [ ] [Logo MDN - Architecture of an app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure)

### Render-Blocking Resources

Learn about render-blocking resources and why they are bad for the user-experience.

* [ ] [Logo MDN - Render-blocking resources](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Loading#Render-blocking_resources)
* [ ] [Logo Google Devs - Render-Blocking Resources](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)

### Compression

Learn how to minimize the overall download size by optimizing and compressing resources.

* [ ] [Logo Google Devs - Optimizing Encoding and Transfer Size](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer)
* [ ] [Logo Google Devs - Replace Animated GIFs with Video](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)
* [ ] [Logo Squoosh](https://squoosh.app/)
* [ ] [Logo Google Devs - Text Content](https://developers.google.com/web/fundamentals/performance/get-started/textcontent-3)
* [ ] [Logo Google Devs - Optimize Images](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)
* [ ] [Logo web.dev - Reduce JavaScript execution time](https://web.dev/bootup-time/)

### Performance metrics

Learn why it is important to measure performance and which metrics you should prioritize.

* [ ] [Logo Google Devs - User-centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics)
* [ ] [Logo Udacity - Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884)
* [ ] [Logo Udacity - Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860)

#### Largest Contentful Paint

Learn about Largest Contentful Paint and how it impacts the overall performance.

* [ ] [Logo web.dev - Largest Contentful Paint](https://web.dev/lcp/)
* [ ] [Logo web.dev - Lighthouse Largest Contentful Paint](https://web.dev/lighthouse-largest-contentful-paint)
* [ ] [Logo Medium - New Performance Metric: What is Largest Contentful Paint?](https://medium.com/speedrank-app/new-performance-metric-what-is-largest-contentful-paint-dc784a497dd5)

#### Total Blocking Time

Learn about Total Blocking Time and how it impacts the overall performance.

* [ ] [Logo web.dev - First CPU Idle](https://web.dev/first-cpu-idle)
* [ ] [Logo Google Devs - Total Blocking Time](https://web.dev/tbt)

#### Time to Interactive

Learn about Time to Interactive and how it impacts the overall performance.

* [ ] [Logo web.dev - Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)
* [ ] [Logo Google Devs - Time to Interactive](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)

### Lazy Loading

Learn how to use lazy loading to lower the initial page payload and load time.

* [ ] [Logo Google Devs - Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video)
* [ ] [Logo Addy Osmani - Lazy Loading Images](https://addyosmani.com/blog/lazy-loading/)
* [ ] [Logo web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading/)

#### Dynamic Import

Learn how to use dynamic import to lazy load javascript.

* [ ] [Logo V8 - Dynamic import()](https://v8.dev/features/dynamic-import)
* [ ] [Logo JavaScript dynamic import() & export](https://medium.com/@WebReflection/javascript-dynamic-import-export-b0e8775a59d4)
* [ ] [Logo MDN - Dynamic Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports)
* [ ] [Logo TC39 - proposal-dynamic-import](https://github.com/tc39/proposal-dynamic-import)

#### Offscreen images

Learn why offscreen images increase the load time and how to avoid them by lazy loading images.

* [ ] [Logo web.dev - Defer offscreen images](https://web.dev/offscreen-images/)
* [ ] [Logo Google Devs - Properly Size Images](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)
* [ ] [Logo web.dev - Native lazy-loading for the web](https://web.dev/native-lazy-loading)
* [ ] [Logo Addy Osmani - Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/)

### Critical Request Chains

Learn about the critical request chains and how to find them in your web app.

* [ ] [Logo Google Devs - Critical Request Chains](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)
* [ ] [Logo web.dev - Minimize critical requests depth](https://web.dev/critical-request-chains)

### Tree shaking

Learn how to use tree shaking to eliminate dead code.

* [ ] [Logo Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking)
* [ ] [Logo How to Clean Up Your JavaScript](https://www.keycdn.com/blog/tree-shaking)

### Codesplitting

Learn about codesplitting an how dividing your code into multiple chunks makes your web app faster.

* [ ] [Logo Google Devs - Reduce JavaScript Payloads](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting)
* [ ] [Logo All you need to know about JavaScript code splitting](https://www.creativebloq.com/how-to/all-you-need-to-know-about-javascript-code-splitting)

### PRPL Pattern

Learn how to use the PRPL pattern to make web apps more performant.

* [ ] [Logo Google Devs - The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)
* [ ] [Logo Google Devs - JavaScript Start-up Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization)
* [ ] [Logo Ben Schwarz - Real world performance](https://building.calibreapp.com/beyond-the-bubble-real-world-performance-9c991dcd5342?gi=76804aa8f46e)
* [ ] [Logo The Cost of Javascript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)

### Resource Prioritization

Learn about resource prioritization and how to inform the browser about the importance of a resource.

* [ ] [Logo Google Devs - Resource Prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization)
* [ ] [Logo Eliminating Roundtrips with Preconnect](https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/)
* [ ] [Logo Addy Osmani - Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)
* [ ] [Logo web.dev - Preconnect to required origins](https://web.dev/uses-rel-preconnect/)
* [ ] [Logo Preload, prefetch and other tags](https://3perf.com/blog/link-rels/)

### Caching

Learn about caching and how it can be uses to make web apps load faster.

* [ ] [Logo Google Devs - HTTP Caching](https://developers.google.com/web/fundamentals/performance/get-started/httpcaching-6)
* [ ] [Logo MDN - HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)

### Rendering Performance

### Rendering

Learn about rendering, how a page is rendered and why it is important to keep your web app interactive and smooth running.

* [ ] [Logo Google Devs - Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)
* [ ] [Logo Google Devs - Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering)
* [ ] [Logo Google Devs - Render-tree Construction](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)
* [ ] [Logo Google Devs - Render Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css)

### Event loop

Learn about the event loop and how Javascript simulate like it’s running our commands in a multi-thread environment.

* [ ] [Logo Youtube - Jake Archibald: In The Loop](https://youtu.be/cCOL7MC4Pl0)
* [ ] [Logo Understanding JavaScript](https://medium.com/@muratcatal/understanding-javascript-heap-stack-event-loops-and-callback-queue-6fdec3cfe32e)
* [ ] [Logo JavaScript Event Loop Explained](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)
* [ ] [Logo Youtube - What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
* [ ] [Logo The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/)
* [ ] [Logo dev.to - JavaScript Visualized: Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

#### Microtask

Learn about microtasks and the microtask queue.

* [ ] [Logo Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
* [ ] [Logo MDN - Using microtasks in JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)
* [ ] [Logo javascript.info - Microtasks and macrotasks](https://javascript.info/event-loop)
* [ ] [Logo javascript.info - Microtasks](https://javascript.info/microtask-queue)

#### Stack

Learn about the stack and how to investigate the staack trace when debugging.

* [ ] [Logo Javascript Stack Trade - Using it to debug](https://www.scalyr.com/blog/javascript-stack-trace-understanding-it-and-using-it-to-debug/)
* [ ] [Logo MDN - console.trace()](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)
* [ ] [Logo V8 - Stack trace API](https://v8.dev/docs/stack-trace-api)
* [ ] [Logo Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)

#### Heap

Learn about the heap and how to investigate the heap snapshots when debugging.

* [ ] [Logo Google Devs - Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems/)
* [ ] [Logo Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)
* [ ] [Logo Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)
* [ ] [Logo Confused about Stack and Heap?](https://medium.com/fhinkel/confused-about-stack-and-heap-2cf3e6adb771)
* [ ] [Logo Google Devs - How to Use the Allocation Profiler Tool](https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler)

### RAIL Model

Learn how to use the RAIL model to ensure a good user experience.

* [ ] [Logo Google Devs - RAIL](https://developers.google.com/web/fundamentals/performance/rail)
* [ ] [Logo Google Devs - Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)
* [ ] [Logo Google Devs - Get Started With Analyzing](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)
* [ ] [Logo Google Devs - Animations and Performance](https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance)
* [ ] [Logo Google Devs - CSS Versus JavaScript Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript)
* [ ] [Logo Google Devs - Choosing the Right Easing](https://developers.google.com/web/fundamentals/design-and-ux/animations/choosing-the-right-easing)
* [ ] [Logo Google Devs - Animating Modal Views](https://developers.google.com/web/fundamentals/design-and-ux/animations/animating-modal-views)
* [ ] [Logo MDN - CSS and JavaScript animation performance](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance)
* [ ] [Logo MDN - Performance fundamentals](https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals)
* [ ] [Logo Youtube - Fast By Default](https://www.youtube.com/watch?v=_srJ7eHS3IM)

#### requestAnimationFrame

Learn how to use the requestAnimationFrame API to create butter-smooth animations.

* [ ] [Logo Google Devs - Optimize JavaScript Execution](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution)
* [ ] [Logo MDN - requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

#### requestIdleCallback

Learn how to use the requestIdleCallback to defer heavy tasks.

* [ ] [Logo MDN - Background Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API)
* [ ] [Logo Google Dev - requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback?hl=en)
* [ ] [Logo MDN - requestIdleCallback()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)

### Critical Rendering Path

Learn about the critical rendering path and how to identify it.

* [ ] [Logo Google Devs - Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
* [ ] [Logo MDN - Critical Rendering Path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)
* [ ] [Logo Understanding the critical rendering path](https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a)

### The Pixel Pipeline

Learn about the five key points in the pixels-to-screen pipeline.

* [ ] [Logo Google Devs - The pixel pipeline](https://developers.google.com/web/fundamentals/performance/rendering#the_pixel_pipeline)
* [ ] [Logo Pixels are expensive](https://aerotwist.com/blog/pixels-are-expensive/)
* [ ] [Logo Google Devs - The Applied Science of Runtime Performance](https://www.youtube.com/watch?v=RCFQu0hK6bU)
* [ ] [Logo CSS Triggers](https://csstriggers.com/)

#### Style calculations

Learn how to optimize your CSS to avoid heavy style calculations.

* [ ] [Logo Google Devs - Style Calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)

#### Transforms

Learn about transforms and how it is possible to avoid both layout and paint.

* [ ] [Logo 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)
* [ ] [Logo Achieving 60 FPS Animations with CSS3](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108)
* [ ] [Logo HTML5 Rocks - High Performance Animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

#### Paint areas

Learn about paint areas and how it is possible to reduce them.

* [ ] [Logo Google Devs - Paint Areas](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas)
* [ ] [Logo CSS Tricks - Browser painting](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/)
* [ ] [Logo HTML5 Rocks - Avoiding Unnecessary Paints](https://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/)

#### Layout Trashing

Learn about layout trashing and how to avoid it.

* [ ] [Logo Google Devs - Layout Thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
* [ ] [Logo Beware JavaScript Layout Thrashing!](https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/)
* [ ] [Logo Layout thrashing cheatsheet](https://devhints.io/layout-thrashing)

#### Layers

Learn about layers and how to promote an element to another layer.

* [ ] [Logo Google Devs - Manage Layer Count](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)
* [ ] [Logo HTML5 Rocks - Accelerated Rendering in Chrome](https://www.html5rocks.com/en/tutorials/speed/layers/)
* [ ] [Logo Layers and how to force them](https://dassur.ma/things/forcing-layers/)

#### Debounce

Learn how to debounce computationally expensive code to avoid blocking the UI.

* [ ] [Logo Google Devs - Debounce Your Input Handlers](https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers)
* [ ] [Logo What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1)
* [ ] [Logo Level Up - Debounce in JavaScript](https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086)

### CSS Containment

Learn how to use CSS containment to improve the performance of your web app.

* [ ] [Logo Google Devs - CSS Containment](https://developers.google.com/web/updates/2016/06/css-containment)
* [ ] [Logo W3C - CSS Containment Module](https://www.w3.org/TR/css-contain-1/)
* [ ] [Logo An introduction to CSS Containment](https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/)
* [ ] [Logo MDN - Contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
* [ ] [Logo CSS Tricks - CSS containment](https://css-tricks.com/css-containment/)

### Web Workers

Learn how to use web workers to run a script operation in a background thread separate from the main execution thread.

* [ ] [Logo MDN - Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
* [ ] [Logo HTML5 Rocks - The Basics of Web Workers](https://www.html5rocks.com/en/tutorials/workers/basics/)
* [ ] [Logo When should you be using Web Workers?](https://dassur.ma/things/when-workers/)

### Security

### HTTPS

Learn about HTTPS and why a website should always be protected with HTTPS.

* [ ] [Logo Google Devs - Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
* [ ] [Logo Google Devs - Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)
* [ ] [Logo Google Devs - Mixed Content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)
* [ ] [Logo Youtube - Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)

### Browser Sandbox

Learn about the sandbox security mechanism and how it restricts the execution environment.

* [ ] [Logo web.dev - Browser sandbox](https://web.dev/browser-sandbox/)
* [ ] [Logo Wikipedia - Sandbox (computer security)](https://en.wikipedia.org/wiki/Sandbox_(computer_security))
* [ ] [Logo Howtogeek - Sandboxes Explained](https://www.howtogeek.com/169139/sandboxes-explained-how-theyre-already-protecting-you-and-how-to-sandbox-any-program/)

### OWASP

Learn about the OWASP organization and how they help with web application security.

* [ ] [Logo Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP)
* [ ] [Logo OWASP - About](https://www.owasp.org/index.php/About_The_Open_Web_Application_Security_Project)
* [ ] [Logo OWASP - OWASP Top 10](https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf)
* [ ] [Logo OWASP - Cheatsheets](https://cheatsheetseries.owasp.org/)
* [ ] [Logo Youtube - OWASP](https://www.youtube.com/user/OWASPGLOBAL)
* [ ] [Logo OWASP Top 10 Security Risks](https://blog.sucuri.net/2018/10/owasp-top-10-security-risks-part-i.html)
* [ ] [Logo Wikipedia - Web application security](https://en.wikipedia.org/wiki/Web_application_security)

#### Cross-Site Scripting

Learn about cross-site scripting and how it is possible mitigate these kind of attacks.

* [ ] [Logo MDN - Cross-site scripting](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)
* [ ] [Logo OWASP - Cross-site Scripting (XSS)](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS))
* [ ] [Logo OWASP - XSS Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
* [ ] [Logo Excess XSS](https://excess-xss.com/)

#### Clickjacking

Learn about clickjacking and how it is possible to mitigate these kind of attacks.

* [ ] [Logo OWASP - Clickjacking](https://www.owasp.org/index.php/Clickjacking)
* [ ] [Logo Wikipedia - Clickjacking](https://en.wikipedia.org/wiki/Clickjacking)
* [ ] [Logo web.dev - Same-origin policy](https://web.dev/same-origin-policy/#how-to-prevent-clickjacking)
* [ ] [Logo OWASP - Clickjacking Cheatsheet](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html)

### Content Security Policy

Learn about content security policy and how it can help to detect and mitigate certain types of attacks.

* [ ] [Logo MDN - Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
* [ ] [Logo Google Devs - CSP](https://developers.google.com/web/fundamentals/security/csp)

### Audits

### Performance budgets

Learn about performance budgets and how you can create one for your web app.

* [ ] [Logo web.dev - Performance Budgets](https://web.dev/performance-budgets-101)
* [ ] [Logo Google Devs - Performance Budget](https://developers.google.com/web/tools/lighthouse/audits/budgets)
* [ ] [Logo Addy Osmani - Start Performance Budgeting](https://addyosmani.com/blog/performance-budgets/)

### Lighthouse

Learn about lighthouse and how it can be used to audit your web app.

* [ ] [Logo Google Devs - Lighthouse](https://developers.google.com/web/tools/lighthouse/)
* [ ] [Logo Youtube - Staying off the Rocks](https://www.youtube.com/watch?v=NoRYn6gOtVo)
* [ ] [Logo web.dev - Measure](https://web.dev/measure)

### Chrome DevTools

Learn about the Chrome DevTools and how it can be used to audit your web app.

* [ ] [Logo Google Devs - Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
* [ ] [Logo Google Devs - Inspect animations](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)
* [ ] [Logo Investigate animation performance with DevTools](https://calibreapp.com/blog/investigate-animation-performance-with-devtools/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#build-tools)

## ➤ Build tools

### Package Managers

Learn about package managers and how they make managing dependencies easier.

* [ ] [Logo Freecodecamp - How JavaScript package managers work](https://www.freecodecamp.org/news/javascript-package-managers-101-9afd926add0a/)
* [ ] [Logo Guide to JavaScript frontend package managers](https://www.javascriptstuff.com/javascript-frontend-package-managers/)

#### NPM

Learn about NPM and how it can be used to manage dependencies.

* [ ] [Logo npmjs - About npm](https://docs.npmjs.com/about-npm/)
* [ ] [Logo npmjs - Getting started](https://docs.npmjs.com/getting-started/)
* [ ] [Logo Introduction to npm and basic npm commands](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-npm-and-basic-npm-commands-18aa16f69f6b)
* [ ] [Logo An Absolute Beginner's Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)

#### Yarn

Learn about Yarn and how it can be used to manage dependencies.

* [ ] [Logo Yarnpkg - Getting Started](https://yarnpkg.com/en/docs/getting-started)
* [ ] [Logo Facebook Engineering - Yarn](https://engineering.fb.com/web/yarn-a-new-package-manager-for-javascript/)

### Module Bundlers

Learn about module bundler and how they can help bundling your code.

* [ ] [Logo dev.to - What is a module bundler?](https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2)
* [ ] [Logo 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/)
* [ ] [Logo JavaScript Bundlers, a Comparison](https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364)

#### Rollup

Learn how you can use Rollup to bundle your code.

* [ ] [Logo Rollup - Introduction](https://rollupjs.org/guide/en/)
* [ ] [Logo How to Bundle JavaScript With Rollup](https://lengstorf.com/learn-rollup-js/)

#### Webpack

Learn how you can use Webpack to bundle your code.

* [ ] [Logo Webpack - Getting Started](https://webpack.js.org/guides/getting-started/)
* [ ] [Logo Webpack: A Gentle Introduction to the Module Bundler](https://auth0.com/blog/webpack-a-gentle-introduction/)

#### Parcel

Learn how you can use Parcel to bundle your code.

* [ ] [Logo Parcel - Getting Started](https://parceljs.org/getting_started.html)
* [ ] [Logo Parcel, a simpler webpack](https://flaviocopes.com/parcel/)

#### Snowpack

Learn how Snowpack can replace the traditional app bundler during development.

* [ ] [Logo Snowpack](https://www.snowpack.dev/)
* [ ] [Logo Snowpack - Quickstart](https://www.snowpack.dev/#quickstart)
* [ ] [Logo Github - Snowpack](https://github.com/pikapkg/snowpack)
* [ ] [Logo Pika - About](https://www.pika.dev/about/)
* [ ] [Logo A Future Without Webpack](https://www.pika.dev/blog/pika-web-a-future-without-webpack/)

### Linters and formatters

Learn how you can improve your code quality with linters and formatters.

* [ ] [Logo Improve Your JavaScript Code Quality With Linters](https://www.gistia.com/javascript-linters-formatter-prettier-eslint/)
* [ ] [Logo Why you should always use a Linter](https://medium.com/dailyjs/why-you-should-always-use-a-linter-and-or-pretty-formatter-bb5471115a76)

#### Prettier

Learn how you can use Prettier to format your code.

* [ ] [Logo Prettier - What is Prettier?](https://prettier.io/docs/en/index.html)
* [ ] [Logo Let the computer do the formatting](https://blog.bitsrc.io/let-the-computer-do-the-formatting-ddb799e8a068)
* [ ] [Logo Prettier - Playground](https://prettier.io/playground/)
* [ ] [Logo Prettier - Integrating with Linters](https://prettier.io/docs/en/integrating-with-linters.html)

#### ESLint

Learn how you can use ESLint to lint your code.

* [ ] [Logo Eslint - Getting Started](https://eslint.org/docs/user-guide/getting-started)
* [ ] [Logo Streamline Code Reviews with ESLint + Prettier](https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d)
* [ ] [Logo Prettier vs ESLint: What’s The Difference?](https://www.futurehosting.com/blog/prettier-vs-eslint-whats-the-difference/)

### Task Runners

Learn about task runners and how you can automate code execution.

* [ ] [Logo The Advantages of Using Task Runners](https://www.dbswebsite.com/blog/the-advantages-of-using-task-runners/)
* [ ] [Logo Being Productive With Task Runners](https://www.smashingmagazine.com/2016/06/harness-machines-productive-task-runners/)

#### NPM Scripts

Learn about NPM scripts and how you can run your own.

* [ ] [Logo CSS Tricks - Why npm Scripts?](https://css-tricks.com/why-npm-scripts/)
* [ ] [Logo Helpers and tips for npm run scripts](https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html)

### Transpilers

Learn what transpilers are and why we need them.

* [ ] [Logo Scotch - Javascript Transpilers](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them)
* [ ] [Logo What JavaScript Programmers Need to Know about Transpilers](https://thenewstack.io/javascript-transpilers-need-know/)
* [ ] [Logo Wikipedia - Source-to-source compiler](https://en.wikipedia.org/wiki/Source-to-source_compiler)

#### Babel

Learn about Babel and how you can use it to transpile your code.

* [ ] [Logo Complete Babel 7 Guide for Beginners](https://medium.com/@onlykiosk/complete-babel-7-guide-for-beginners-in-2019-7dd78214c464)
* [ ] [Logo Babel - What is Babel?](https://babeljs.io/docs/en/)
* [ ] [Logo Babel - Usage Guide](https://babeljs.io/docs/en/usage)
* [ ] [Logo A Beginner’s Guide to Babel](https://www.sitepoint.com/babel-beginners-guide/)
* [ ] [Logo Moving to ES6 — Babel and Transpilers](https://hackernoon.com/moving-to-es6-babel-and-transpilers-337921c025b1)

#### Typescript

Learn how to use Typescript and how it can help making your code typesafe.

* [ ] [Logo Typescript - Documentation](http://www.typescriptlang.org/docs/home.html)
* [ ] [Logo Typescript: Why should one use i?](https://medium.com/tech-tajawal/typescript-why-should-one-use-it-a539faa92010)
* [ ] [Logo 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)

### CSS Pre-processors

Learn about CSS pre-processors and why we need them.

* [ ] [Logo MDN - CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
* [ ] [Logo Advantages of Using a Preprocessor](https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944)
* [ ] [Logo Deconfusing Pre- and Post-processing](https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3)

#### SASS

Learn about SASS and how you can use it to simplify your styles.

* [ ] [Logo SASS - Guide](https://sass-lang.com/guide)
* [ ] [Logo 10 Reasons to Use a CSS Preprocessor in 2018](https://raygun.com/blog/10-reasons-css-preprocessor/)

#### PostCSS

Learn about PostCSS and how you can use its ecosystem of plugins to extend your CSS build pipeline.

* [ ] [Logo PostCSS](https://postcss.org/)
* [ ] [Logo What is PostCSS?](https://www.sitepoint.com/an-introduction-to-postcss/)
* [ ] [Logo Introduction to PostCSS](https://flaviocopes.com/postcss/)
* [ ] [Logo Getting started with PostCSS in 2019](https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/)

### Node.js

Learn how to use Node.js.

* [ ] [Logo Node.js](https://nodejs.org)
* [ ] [Logo Introduction to Node.js](https://nodejs.dev/)
* [ ] [Logo Node.js - Guides](https://nodejs.org/en/docs/guides/)
* [ ] [Logo W3Schools - Node.js tutorial](https://www.w3schools.com/nodejs/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#frameworks--libraries)

## ➤ Frameworks & Libraries

### lit-element

Learn how to use lit-element for creating fast, lightweight web components.

* [ ] [Logo lit-element](https://lit-element.polymer-project.org/)
* [ ] [Logo Google Devs - Lightning-fast templates](https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html)
* [ ] [Logo Vaadin - Creating a LitElement project](https://vaadin.com/tutorials/lit-element/starting-a-lit-element-project)
* [ ] [Logo dev.to - Web Components: from zero to hero, part three](https://dev.to/thepassle/web-components-from-zero-to-hero-part-three-3c5h)

### Vue

Learn about Vue and how you can use it for building web apps.

* [ ] [Logo Vue](https://vuejs.org/)
* [ ] [Logo Vue - CLI](https://cli.vuejs.org/)
* [ ] [Logo Getting Started with Vue](https://www.taniarascia.com/getting-started-with-vue/)

### React

Learn about React and how you can use it for building web apps.

* [ ] [Logo React](https://reactjs.org/)
* [ ] [Logo web.dev - React](https://web.dev/react)
* [ ] [Logo Getting Started with React](https://www.taniarascia.com/getting-started-with-react/)

### Angular

Learn about Angular and how you can use it for building web apps.

* [ ] [Logo Angular](https://angular.io/)
* [ ] [Logo web.dev - Angular](https://web.dev/angular)
* [ ] [Logo Angular - CLI](https://cli.angular.io/)

### Svelte

Learn about Svelte and how it can convert your component into highly efficient imperative code.

* [ ] [Logo Svelte](https://svelte.dev/)
* [ ] [Logo Github - Svelte FAQ](https://github.com/sveltejs/svelte/wiki/FAQ)
* [ ] [Logo Svelte - Rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)

### Stencil

Learn how Stencil can be used for generating small, fast web components.

* [ ] [Logo Stencil](https://stenciljs.com/)
* [ ] [Logo Alligator - Getting Started With Stencil](https://alligator.io/stencil/getting-started/)
* [ ] [Logo How to Build Reusable Web Components Using Stenciljs](https://codeburst.io/how-to-build-web-components-using-stenciljs-afacc5451c2d)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#testing)

## ➤ Testing

### Testing Methodologies

Learn about various software testing methodologies and why it is important to test your code.

* [ ] [Logo Wikipedia - Software testing](https://en.wikipedia.org/wiki/Software_testing)
* [ ] [Logo Software Testing Methodologies](https://smartbear.com/learn/automated-testing/software-testing-methodologies/)
* [ ] [Logo Learn The Methods & Tools](https://www.inflectra.com/ideas/topic/testing-methodologies.aspx)

#### Unit Testing

Learn about unit testing and how it can be used to test individual units of code.

* [ ] [Logo Unit Testing Tutorial](https://www.guru99.com/unit-testing-guide.html)
* [ ] [Logo Wikipedia - Unit testing](https://en.wikipedia.org/wiki/Unit_testing)
* [ ] [Logo What is Unit Testing?](https://www.tutorialspoint.com/software_testing_dictionary/unit_testing.htm)
* [ ] [Logo The Arrange, Act and Assert (AAA) Pattern](https://medium.com/@pjbgf/title-testing-code-ocd-and-the-aaa-pattern-df453975ab80)

#### Integration Testing

Learn about integration testing and how it can be used to test modules as a group.

* [ ] [Logo Integration Testing Tutorial](https://www.guru99.com/integration-testing.html)
* [ ] [Logo What is Integration Testing?](https://www.tutorialspoint.com/software_testing_dictionary/integration_testing.htm)
* [ ] [Logo Integration Testing](http://softwaretestingfundamentals.com/integration-testing/)

#### System Testing

Learn about system testing and how it can be used to test the fully integrated software product.

* [ ] [Logo System Testing Tutorial](https://www.guru99.com/system-testing.html)
* [ ] [Logo What is System Testing?](https://www.tutorialspoint.com/software_testing_dictionary/system_testing.htm)
* [ ] [Logo System Testing](http://softwaretestingfundamentals.com/system-testing/)

#### Acceptance Testing

Learn about acceptance testing and how it can be used to test the software for acceptability

* [ ] [Logo What is User Acceptance Testing?](https://www.guru99.com/user-acceptance-testing.html)
* [ ] [Logo Acceptance Testing](http://softwaretestingfundamentals.com/acceptance-testing/)
* [ ] [Logo What is Acceptance Testing?](https://www.tutorialspoint.com/software_testing_dictionary/acceptance_testing.htm)

#### Smoke Testing

Learn about smoke testing and how it can be used to ensure that critical functionalities of the program are working fine.

* [ ] [Logo Sanity Testing Vs Smoke Testing](https://www.guru99.com/smoke-sanity-testing.html)
* [ ] [Logo Smoke Testing](http://softwaretestingfundamentals.com/smoke-testing/)

#### Performance Testing

Learn about performance testing and how it can be used to determine the responsiveness and stability of a program.

* [ ] [Logo Performance Testing Tutorial](https://www.guru99.com/performance-testing.html)
* [ ] [Logo Performance Testing](http://softwaretestingfundamentals.com/performance-testing/)
* [ ] [Logo Wikipedia - Software performance testing](https://en.wikipedia.org/wiki/Software_performance_testing)

#### Usability Testing

Learn about usability testing and how it can be used to determine if the system is easily usable for the end-user.

* [ ] [Logo What is Usability Testing?](https://www.guru99.com/usability-testing.html)
* [ ] [Logo Usability Testing](http://softwaretestingfundamentals.com/usability-testing/)
* [ ] [Logo Wikipedia - Usability testing](https://en.wikipedia.org/wiki/Usability_testing)

#### White Box Testing

Learn about white box testing and how it can be used to test the software's internal structure, design, and coding.

* [ ] [Logo What is White Box Testing?](https://www.guru99.com/white-box-testing.html)
* [ ] [Logo White Box Testing](http://softwaretestingfundamentals.com/white-box-testing/)

#### Black Box Testing

Learn about black box testing and how a test can be carried out without looking at the internal code.

* [ ] [Logo What is Black Box Testing?](https://www.guru99.com/black-box-testing.html)
* [ ] [Logo Black Box Testing](http://softwaretestingfundamentals.com/black-box-testing/)

#### Automated Testing

Learn about automated testing and when it should be applied.

* [ ] [Logo What is Automated Testing?](https://smartbear.com/learn/automated-testing/what-is-automated-testing/)
* [ ] [Logo Automated Testing Tutorial](https://www.guru99.com/automation-testing.html)

#### Manual Testing

Learn about manual testing and when it should be applied.

* [ ] [Logo Manual Testing Tutorial](https://www.guru99.com/manual-testing.html)
* [ ] [Logo Wikipedia - Manual Testing](https://en.wikipedia.org/wiki/Manual_testing)
* [ ] [Logo What is Manual Testing?](https://www.tutorialspoint.com/software_testing_dictionary/manual_testing.htm)

### Continuous integration

Learn about continuous integration and it can enable iterative software development.

* [ ] [Logo dev.to - Continuous Integration Explained](https://dev.to/markoa/continuous-integration-explained-59f9)
* [ ] [Logo Continuous Integration Tutorial](https://www.tutorialspoint.com/continuous_integration/index.htm)
* [ ] [Logo Wikipedia - Continuous integration](https://en.wikipedia.org/wiki/Continuous_integration)

### A/B Testing

Learn about A/B testing and how it can be used to optimize your web app.

* [ ] [Logo dev.to - A/B testing: introduction](https://dev.to/ice_lenor/ab-testing-introduction-3jpd)
* [ ] [Logo dev.to - When Not To A/B Test](https://dev.to/ice_lenor/when-not-to-ab-test-4cc7)
* [ ] [Logo A/B Testing](https://www.optimizely.com/optimization-glossary/ab-testing/)
* [ ] [Logo Wikipedia - A/B testing](https://en.wikipedia.org/wiki/A/B_testing)

### Test Runners

Learn about test runners and how they can help running tests.

* [ ] [Logo 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/)
* [ ] [Logo Udacity - Javascript Testing](https://www.udacity.com/course/javascript-testing--ud549)
* [ ] [Logo JavaScript Unit Testing Frameworks](https://www.guru99.com/javascript-unit-testing-frameworks.html)

#### Karma

Learn about the Karma test runner.

* [ ] [Logo Karma](https://karma-runner.github.io/latest/index.html)
* [ ] [Logo Getting started with Karma and Mocha](https://medium.com/@jazcodes/getting-started-with-karma-and-mocha-for-automated-browser-tests-5ebb6cd02edf)

#### Mocha

Learn about the Mocha testing framework.

* [ ] [Logo Mocha](https://mochajs.org/)
* [ ] [Logo A quick and complete guide to Mocha testing](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)
* [ ] [Logo How to test JavaScript with Mocha](https://codeburst.io/how-to-test-javascript-with-mocha-the-basics-80132324752e)

#### Jasmine

Learn about the Jasmine testing frameworks.

* [ ] [Logo Jasmine](https://jasmine.github.io/)
* [ ] [Logo 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)

#### Cypress

Learn how to use Cypress for end-to-end-testing.

* [ ] [Logo Cypress](https://www.cypress.io/)
* [ ] [Logo End-to-End Testing with Cypress](https://webdevstudios.com/2018/11/13/end-to-end-testing-with-cypress-io/)

#### Ava

Learn about the Ava test runner.

* [ ] [Logo Github - Ava](https://github.com/avajs/ava)
* [ ] [Logo 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)
* [ ] [Logo Freecodecamp - How you can test your Node.js applications](https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/)

### Best Practices

Learn about the best practices when it comes to testing.

* [ ] [Logo Javascript Testing Best Practices](https://github.com/goldbergyoni/javascript-testing-best-practices)
* [ ] [Logo What are the best practices in software Testing?](https://www.quora.com/What-are-the-best-practices-in-software-Testing)
* [ ] [Logo 7 Software Testing Best Practices](https://www.qasymphony.com/blog/7-software-testing-best-practices/)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#architecture--paradigms)

## ➤ Architecture & paradigms

### Paradigms

### Programming Paradigms

Learn how programming languages can be categoried into different paraigmes based on their features.

* [ ] [Logo Wikipedia - Programming paradigm](https://en.wikipedia.org/wiki/Programming_paradigm)
* [ ] [Logo Introduction of Programming Paradigms](https://www.geeksforgeeks.org/introduction-of-programming-paradigms/)
* [ ] [Logo What Are JavaScript Programming Paradigms?](https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb)

### Object Oriented Programming

Learn about object oriented programming and how objects can make your code easier to read and debug.

* [ ] [Logo MDN - Object-oriented JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)
* [ ] [Logo Freecodecamp - An introduction to Object-Oriented Programming](https://www.freecodecamp.org/news/an-introduction-to-object-oriented-programming-in-javascript-8900124e316a/)
* [ ] [Logo Introduction to Object Oriented Programming in JavaScript](https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/)

#### S.O.L.I.D

Learn about the SOLID design pricinples that can make your code more understandable, flexible and maintainable.

* [ ] [Logo Wikipedia - SOLID](https://en.wikipedia.org/wiki/SOLID)
* [ ] [Logo 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)
* [ ] [Logo 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)

### Functional programming

Learn about functional programming and how it can make your code easier to read and debug.

* [ ] [Logo An introduction to functional programming in JavaScript](https://opensource.com/article/17/6/functional-javascript)
* [ ] [Logo Functional Programming in JavaScript](https://codeburst.io/functional-programming-in-javascript-e57e7e28c0e5)
* [ ] [Logo The power of functional programming in Javascript](https://itnext.io/the-power-of-functional-programming-in-javascript-cc9797a42b60)
* [ ] [Logo An introduction to Functional Programming](https://flaviocopes.com/javascript-functional-programming/)
* [ ] [Logo dev.to - Basic Functional Programming Patterns in JavaScript](https://dev.to/nestedsoftware/basic-functional-programming-patterns-in-javascript-49p2)
* [ ] [Logo Functional-ish JavaScript](https://medium.com/@bluepnume/functional-ish-javascript-205c05d0ed08)

#### Recursion

Learn about recursion and when it can be used to make your code more readable.

* [ ] [Logo Learn and Understand Recursion in JavaScript](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea)
* [ ] [Logo Understanding Recursion in JavaScript](https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03)
* [ ] [Logo Freecodecamp - Recursion in JavaScript](https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f/)
* [ ] [Logo javascript.info - Recursion and stack](https://javascript.info/recursion)

#### Higher-Order Functions

Learn about higher-order functions and when it can be used to make your code more readable.

* [ ] [Logo Higher-Order Functions](https://www.sitepoint.com/higher-order-functions-javascript/)
* [ ] [Logo Freecodecamp - A quick intro to Higher-Order Functions](https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/)
* [ ] [Logo Wikipedia - Higher-Order function](https://en.wikipedia.org/wiki/Higher-order_function)
* [ ] [Logo Understanding Higher-Order Functions in JavaScript](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)

#### Currying

Learn about currying and when it can be used to make your code more readable.

* [ ] [Logo dev.to - All you need to know about currying](https://dev.to/bettercodingacademy/functional-programming-all-you-need-to-know-about-currying-5k7)
* [ ] [Logo JavaScript: Currying and Partial Application](https://gideonpyzer.dev/blog/2017/01/14/javascript-currying-and-partial-application/)
* [ ] [Logo Curry and Function Composition](https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983)
* [ ] [Logo Wikipedia - Currying](https://en.wikipedia.org/wiki/Currying)

#### Monads

Learn about monads and when it can be used to make your code more readable.

* [ ] [Logo Youtube - Monad, FunFunFunction](https://www.youtube.com/watch?v=9QveBbn7t_c)
* [ ] [Logo Youtube - Functors, FunFunFunction ](https://www.youtube.com/watch?v=YLIH8TKbAh4)
* [ ] [Logo Functional JavaScript - Functors, Monads, and Promises](https://dev.to/joelnet/functional-javascript---functors-monads-and-promises-1pol)
* [ ] [Logo Wikipedia - Monad](https://en.wikipedia.org/wiki/Monad_(functional_programming))
* [ ] [Logo JavaScript Monads Made Simple](https://medium.com/javascript-scene/javascript-monads-made-simple-7856be57bfe8)
* [ ] [Logo Implementing JavaScript Functors and Monads](https://medium.com/front-end-weekly/implementing-javascript-functors-and-monads-a87b6a4b4d9a)
* [ ] [Logo MDN - Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

### Architecture

### Design Patterns

Learn how commonly occurring problems can be solved using design patterns.

* [ ] [Logo Wikipedia - Software design pattern](https://en.wikipedia.org/wiki/Software_design_pattern)
* [ ] [Logo The 7 Most Important Software Design Patterns](https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e)
* [ ] [Logo Software Design Patterns](https://www.geeksforgeeks.org/software-design-patterns/)
* [ ] [Logo Design Patterns](https://refactoring.guru/design-patterns)
* [ ] [Logo JavaScript Design Patterns](https://www.dofactory.com/javascript/design-patterns)
* [ ] [Logo Design Patterns in TypeScript](https://github.com/torokmark/design_patterns_in_typescript)

#### Singleton

Learn about the singleton design pattern and when it should be used.

* [ ] [Logo Singleton Pattern](https://refactoring.guru/design-patterns/singleton)
* [ ] [Logo Singleton Example](https://www.dofactory.com/javascript/singleton-design-pattern)
* [ ] [Logo Wikipedia - Singleton Pattern](https://en.wikipedia.org/wiki/Singleton_pattern)

#### Observer

Learn about the observer design pattern and when it should be used.

* [ ] [Logo Observer Pattern](https://refactoring.guru/design-patterns/observer)
* [ ] [Logo Observer Example](https://www.dofactory.com/javascript/observer-design-pattern)
* [ ] [Logo Wikipedia - Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern)

#### Prototype

Learn about the prototype design pattern and when it should be used.

* [ ] [Logo Prototype Pattern](https://refactoring.guru/design-patterns/prototype)
* [ ] [Logo Prototype Example](https://www.dofactory.com/javascript/prototype-design-pattern)
* [ ] [Logo Wikipedia - Prototype pattern](https://en.wikipedia.org/wiki/Prototype_pattern)

#### Bridge

Learn about the bridge design pattern and when it should be used.

* [ ] [Logo Bridge Pattern](https://refactoring.guru/design-patterns/bridge)
* [ ] [Logo Bridge Example](https://www.dofactory.com/javascript/bridge-design-pattern)
* [ ] [Logo Wikipedia - Bridge pattern](https://en.wikipedia.org/wiki/Bridge_pattern)

#### Proxy

Learn about the proxy design pattern and when it should be used.

* [ ] [Logo Proxy Pattern](https://refactoring.guru/design-patterns/proxy)
* [ ] [Logo Proxy Example](https://www.dofactory.com/javascript/proxy-design-pattern)
* [ ] [Logo Wikipedia - Proxy pattern](https://en.wikipedia.org/wiki/Proxy_pattern)

#### Chain of responsibility

Learn about the chain of responsibility design pattern and when it should be used.

* [ ] [Logo Chain of Responsibility Pattern](https://refactoring.guru/design-patterns/chain-of-responsibility)
* [ ] [Logo Chain of Responsibility Example](https://www.dofactory.com/javascript/chain-of-responsibility-design-pattern)
* [ ] [Logo Wikipedia - Chain of responsibility](https://en.wikipedia.org/wiki/Chain-of-responsibility_pattern)

#### Constructor

Learn about the constructor design pattern and when it should be used.

* [ ] [Logo The Constructor Pattern](https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s01.html)
* [ ] [Logo Fundamental Object Design Patterns in JavaScript](https://medium.com/@severinperez/javascript-weekly-fundamental-object-design-patterns-31453f68427f)
* [ ] [Logo Difference between Constructor pattern and Prototype pattern](https://stackoverflow.com/questions/35057827/difference-between-constructor-pattern-and-prototype-pattern)

### CSS Methodologies

Learn how CSS can be structured using CSS methodologies.

* [ ] [Logo A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)
* [ ] [Logo A web designer's guide to CSS methodologies](https://www.creativebloq.com/features/a-web-designers-guide-to-css-methodologies)
* [ ] [Logo Understanding CSS Writing Methodologies](https://www.hongkiat.com/blog/css-writing-methodologies/)

#### BEM

Learn about the BEM methodology and when it should be used.

* [ ] [Logo Get BEM](http://getbem.com/)
* [ ] [Logo CSS Tricks - BEM 101](https://css-tricks.com/bem-101/)
* [ ] [Logo 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)

#### SMACSS

Learn about the SMACSS methodology and when it should be used.

* [ ] [Logo SMACSS](http://smacss.com/)
* [ ] [Logo BEM vs SMACSS](https://www.sitepoint.com/bem-smacss-advice-from-developers/)

#### OOCSS

Learn about the OOCSS methodology and when it should be used.

* [ ] [Logo OOCSS](https://github.com/stubbornella/oocss/wiki)
* [ ] [Logo An Introduction To Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)
* [ ] [Logo The Future of Writing CSS](https://www.keycdn.com/blog/oocss)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#team-collaboration)

## ➤ Team Collaboration

### Version Control

### Git

Learn about git and how it is used for version control.

* [ ] [Logo Learn Git Branching](https://learngitbranching.js.org/)
* [ ] [Logo Git Handbook](https://guides.github.com/introduction/git-handbook/)
* [ ] [Logo Github Cheatsheet](https://github.github.com/training-kit/downloads/github-git-cheat-sheet/)
* [ ] [Logo Visualizing Git](http://git-school.github.io/visualizing-git/)
* [ ] [Logo Codecademy - Learn Gitthis](https://www.codecademy.com/learn/learn-git)
* [ ] [Logo Git Hint](https://git-hint.netlify.com/)

#### Github

Learn how to use Github.

* [ ] [Logo What is GitHub?](https://guides.github.com/activities/hello-world/)
* [ ] [Logo GitHub Learning Lab](https://lab.github.com/)
* [ ] [Logo Wikipedia - Github](https://en.wikipedia.org/wiki/Github)

#### Bitbucket

Learn how to use Bitbucket.

* [ ] [Logo Wikipedia - Bitbucket](https://en.wikipedia.org/wiki/Bitbucket)
* [ ] [Logo Tutorial: Learn Bitbucket with Git](https://confluence.atlassian.com/bitbucket/tutorial-learn-bitbucket-with-git-759857287.html)
* [ ] [Logo Getting Started with Bitbucket for Version Control](https://www.tecmint.com/bitbucket-for-version-control/)

### Management

### Agile Development

Learn about agile development and when to use it.

* [ ] [Logo Wikipedia - Agile software development](https://en.wikipedia.org/wiki/Agile_software_development)
* [ ] [Logo What is agile methodology?](https://www.infoworld.com/article/3237508/what-is-agile-methodology-modern-software-development-explained.html)
* [ ] [Logo What is Agile Software Development?](https://www.visual-paradigm.com/scrum/what-is-agile-software-development/)

#### Scrum

Learn about scrum and when to use it.

* [ ] [Logo Scrum Tutorial](https://www.knowledgehut.com/tutorials/scrum-tutorial)
* [ ] [Logo Scrum - Overview](https://www.tutorialspoint.com/scrum/scrum_overview.htm)

#### Kanban

Learn about kanban and when to use it.

* [ ] [Logo Kanban Tutorial](https://www.tutorialspoint.com/kanban/kanban_introduction.htm)
* [ ] [Logo What is kanban?](https://www.atlassian.com/agile/kanban)
* [ ] [Logo Kanban Fundamentals](https://www.scrumhub.com/kanban-fundamentals/)

### Waterfall Development

Learn about waterfall development and when to use it.

* [ ] [Logo Waterfall Model](https://www.tutorialspoint.com/sdlc/sdlc_waterfall_model.htm)
* [ ] [Logo Waterfall vs. Agile](https://www.seguetech.com/waterfall-vs-agile-methodology/)
* [ ] [Logo Waterfall Model: What and when](https://airbrake.io/blog/sdlc/waterfall-model)

### Test Driven Development

Learn about test driven development and when to use it.

* [ ] [Logo Wikipedia - Test-driven development](https://en.wikipedia.org/wiki/Test-driven_development)
* [ ] [Logo Red, Green, Refactor](https://www.codecademy.com/articles/tdd-red-green-refactor)
* [ ] [Logo Freecodecamp - Test Driven Development](https://www.freecodecamp.org/news/test-driven-development-what-it-is-and-what-it-is-not-41fa6bca02a2/)
* [ ] [Logo TDD Changed My Life](https://medium.com/javascript-scene/tdd-changed-my-life-5af0ce099f80)
* [ ] [Logo dev.to - Test-driven development in JavaScript](https://dev.to/tomekbuszewski/test-driven-development-in-javascript-olg)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#design--ux)

## ➤ Design & UX

### Color Theory

Learn about color theory and how you can make your own color schemes.

* [ ] [Logo 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)
* [ ] [Logo The Role of Color in UX](https://www.toptal.com/designers/ux/color-in-ux)
* [ ] [Logo 10 Questions of Color Theory](https://medium.muz.li/10-questions-of-color-theory-that-will-make-you-a-better-ux-designer-b5244c1341a6)
* [ ] [Logo Wikipedia - Color Theory](https://en.wikipedia.org/wiki/Color_theory)
* [ ] [Logo The Meaning of Color](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)
* [ ] [Logo 50 Gorgeous Color Schemes](https://visme.co/blog/website-color-schemes/)

#### Color Wheel

Learn how to use the color wheel when making a color scheme.

* [ ] [Logo Color Theory: Brief Guide For Designers](https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa)
* [ ] [Logo Color theory and the color wheel](https://www.canva.com/colors/color-wheel/)
* [ ] [Logo The fundamentals of understanding color theory](https://99designs.dk/blog/tips/the-7-step-guide-to-understanding-color-theory/)
* [ ] [Logo Adobe - Color wheel](https://color.adobe.com/)

### Typography

Learn about typography and how to describe fonts.

* [ ] [Logo Google - Understanding typography](https://material.io/design/typography/understanding-typography.html#type-classification)
* [ ] [Logo How to Understand Typography](https://www.howtogeek.com/howto/30065/how-to-understand-typography-like-a-professional-designer/)
* [ ] [Logo Typography Elements Everyone Needs to Understand](https://medium.com/gravitdesigner/typography-elements-everyone-needs-to-understand-5fdea82f470d)
* [ ] [Logo Youtube - 10 rules to help you rule type](https://www.youtube.com/watch?v=QrNi9FmdlxY)
* [ ] [Logo Font Design](https://www.canva.com/learn/font-design/)
* [ ] [Logo Typography Tutorial for Beginners](https://blog.hubspot.com/marketing/typography-terms-introduction)
* [ ] [Logo A Crash Course in Typography](https://www.jotform.com/blog/a-crash-course-in-typography-the-basics-of-type/)
* [ ] [Logo Type Classifications](https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications)
* [ ] [Logo Google Fonts](https://fonts.google.com/)
* [ ] [Logo 7 web typography rules](https://uxdesign.cc/7-web-typography-rules-27de68c60f6)
* [ ] [Logo 15 Best Practices To Excellent UI](https://medium.muz.li/typography-in-mobile-design-15-best-practices-to-excellent-ui-5eaf18280ad)

#### Font Size

Learn about font sizes and how to choose the right one.

* [ ] [Logo Type scale](https://type-scale.com/)
* [ ] [Logo The importance of font size](https://www.cardinalpath.com/the-importance-of-font-size/)
* [ ] [Logo Website font size: Size does matter](https://www.liveseysolar.com/website-font-size-size-does-matter/)
* [ ] [Logo CSS Tricks - font-size](https://css-tricks.com/almanac/properties/f/font-size/)
* [ ] [Logo CSS Tricks - Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/)

#### Line Spacing

Learn about line spacing and how to choose the right one.

* [ ] [Logo Best UX practices for line spacing](https://www.justinmind.com/blog/best-ux-practices-for-line-spacing/)
* [ ] [Logo Line spacing](https://practicaltypography.com/line-spacing.html)
* [ ] [Logo Why you should go big with line spacing](https://www.invisionapp.com/inside-design/line-spacing/)
* [ ] [Logo CSS Tricks - line-height](https://css-tricks.com/almanac/properties/l/line-height/)

### C.R.A.P

Learn how the C.R.A.P. design principles can help you point out the qualities (or flaws) in a design.

* [ ] [Logo Build Better User Experience](https://vwo.com/blog/crap-design-principles/)
* [ ] [Logo CRAP Principles](https://www.instructables.com/id/CRAP-principles/)
* [ ] [Logo The Non-Designer's Design Book](https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151)
* [ ] [Logo Youtube - The Non-Designers Design Book](https://www.youtube.com/watch?v=NZ3ryLUR8CI)
* [ ] [Logo How CRAP Will Make You a Better Designer](https://creativemarket.com/blog/how-crap-will-make-you-a-better-designer)
* [ ] [Logo The Big Four: Contrast, Repetition, Alignment, Proximity](https://www.presentationzen.com/chapter6_spread.pdf)

#### Contrast

Learn how the principles of contrast can help you when designing.

* [ ] [Logo Designing with contrast: 20 tips from a designer](https://www.canva.com/learn/contrasting-colors/)
* [ ] [Logo Contrast Design principle of Graphic Design](https://www.youtube.com/watch?v=r0SAPEw0ru4)
* [ ] [Logo Contrast In Design](https://www.designcontest.com/blog/contrast-in-design/)
* [ ] [Logo Fully understanding contrast in design](https://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/)

#### Repetition

Learn how the principles of repetition can help you when designing.

* [ ] [Logo Repetition Design principle of Graphic Design](https://www.youtube.com/watch?v=u55BW6WBqVU)
* [ ] [Logo Repetition Principle of Design](https://254-online.com/repetition-principle-of-design/)
* [ ] [Logo Repetition, Pattern, and Rhythm](https://www.interaction-design.org/literature/article/repetition-pattern-and-rhythm)
* [ ] [Logo Repetition, principles of design](https://www.johnlovett.com/repetition)
* [ ] [Logo How to Use Repetition Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-repetition-effectively/)

#### Alignment

Learn how the principles of alignment can help you when designing.

* [ ] [Logo Alignment Design principle of Graphic Design](https://www.youtube.com/watch?v=2kokQi9vb6E)
* [ ] [Logo Alignment Principle Of Design](https://254-online.com/alignment-principle-design/)
* [ ] [Logo The Art Of Alignment In Graphic Design](https://www.designmantic.com/blog/art-of-alignment-graphic-design/)
* [ ] [Logo Introduction to Alignment](https://uxengineer.com/principles-of-design/alignment/)

#### Proximity

Learn how the principles of proximity can help you when designing.

* [ ] [Logo Proximity Design principle of Graphic Design](https://www.youtube.com/watch?v=xUdqSiI_G8Y)
* [ ] [Logo How to Use Proximity Effectively](https://www.edgee.net/the-principles-of-graphic-design-how-to-use-proximity-effectively/)
* [ ] [Logo Proximity Principle Of Design](https://254-online.com/proximity-principle-design/)
* [ ] [Logo Gestalt Theory for UX Design: Principle of Proximity](https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1)
* [ ] [Logo Principles of Design: Proximity](https://www.sitepoint.com/principles-of-design-proximity/)

### Consistency

Learn why consistency is one of the most important building-blocks in a design.

* [ ] [Logo Design principle: Consistency](https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f)
* [ ] [Logo Consistency, A Key Design Principle](https://blog.prototypr.io/consistency-a-key-design-principle-5d125469da8e)
* [ ] [Logo Consistency: MORE than what you think](https://www.interaction-design.org/literature/article/consistency-more-than-what-you-think)
* [ ] [Logo Principle of Consistency in User Interface Design](https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design)
* [ ] [Logo The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)

### Spacing

Learn how to use space in your design.

* [ ] [Logo Space in Design Systems](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)
* [ ] [Logo How to use spacing margin and spacing in design](https://visme.co/blog/how-to-properly-use-margins-and-spacing-in-design/)
* [ ] [Logo How To Use Space In Design](https://vanseodesign.com/web-design/design-space/)
* [ ] [Logo Importance of White Space in Design](https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd)
* [ ] [Logo Negative Space in Design](https://tubikstudio.com/negative-space-in-design-tips-and-best-practices-2/)
* [ ] [Logo How to Change Line Spacing in InDesign](https://www.shutterstock.com/support/article/how-to-change-line-spacing-in-indesign)

### Error Handling

Learn how to improve the user experience by handling errors in an intuitive way.

* [ ] [Logo 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)
* [ ] [Logo UI Error Handling](https://uimovement.com/tag/error-handling/)
* [ ] [Logo Creating Error Messages](https://uxdesign.cc/creating-error-messages-best-practice-in-ux-design-cda3be0f5e16)

### Loading

Learn how a loading state can improve the user experience.

* [ ] [Logo Everything you need to know about skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a)
* [ ] [Logo Engaging users with progressive loading in skeleton screen](https://uxdesign.cc/engaging-users-with-progressive-loading-in-skeleton-screen-335a4e287a55)
* [ ] [Logo Design and code responsive Skeleton Screens](https://marinaaisa.com/blog/design-and-code-skeletons-screens/)
* [ ] [Logo How to Speed Up Your UX with Skeleton Screens](https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/)
* [ ] [Logo A Bone to Pick with Skeleton Screens](https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens/)
* [ ] [Logo When to use loaders & empty states](https://uxdesign.cc/when-to-use-loaders-empty-states-ebd23cecc7d6)
* [ ] [Logo Empty/Loading State](https://www.uisources.com/pattern/empty-loading-state)
* [ ] [Logo When You Need to Show a Button’s Loading State](https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/)
* [ ] [Logo Stop Using Loading Spinner](https://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/)

### The Golden Ratio

Learn how the golden ratio can help you when choose measurements for your design.

* [ ] [Logo The Golden Ratio in Design](https://designshack.net/articles/layouts/golden-ratio-in-design/)
* [ ] [Logo A guide to the Golden Ratio for designers](https://www.invisionapp.com/inside-design/golden-ratio-designers/)
* [ ] [Logo What is the golden ratio](https://www.canva.com/learn/what-is-the-golden-ratio/)
* [ ] [Logo The Golden Ratio: A designer's guide](https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546)
* [ ] [Logo 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)
* [ ] [Logo Golden Ratio Typography (GRT) Calculator](https://grtcalculator.com/)
* [ ] [Logo How to Use the Golden Ratio](https://www.companyfolders.com/blog/golden-ratio-design-examples)
* [ ] [Logo Golden Ratio in Design](https://wpamelia.com/golden-ratio/)
* [ ] [Logo How To Use The Golden Ratio In Design](https://www.format.com/magazine/resources/design/golden-ratio-in-design)

### Mobile First

Learn about designing for mobile first and why it is important.

* [ ] [Logo Complete guide to mobile first design](https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/)
* [ ] [Logo What is Mobile First Design?](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)
* [ ] [Logo A Hands-On Guide to Mobile-First Responsive Design](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/)
* [ ] [Logo Mobile First Design](https://designshack.net/articles/mobile/mobilefirst/)

#### Hit Targets

Learn about hit targets can why they should not be neglected.

* [ ] [Logo Finger-Friendly Design](https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)
* [ ] [Logo Size matters! Accessibility and Touch Targets](https://medium.com/@zacdicko/size-matters-accessibility-and-touch-targets-56e942adc0cc)
* [ ] [Logo Optimal Size and Spacing for Mobile Buttons](https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/)

### Design Systems

Learn what design systems are and get familiar with some.

* [ ] [Logo A guide to design systems](https://www.invisionapp.com/inside-design/guide-to-design-systems/)
* [ ] [Logo What the heck is a design system?](https://uxdesign.cc/what-the-heck-is-a-design-system-c89a8ea73b0d)
* [ ] [Logo Everything you need to know about Design Systems](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)
* [ ] [Logo What is a Design System?](https://medium.muz.li/what-is-a-design-system-1e43d19e7696)
* [ ] [Logo What's a Design System](https://dev.to/graphqleditor/what-s-design-system-and-why-you-need-one-31fh)

#### Material Design

Learn about material design and get familiar with the core principles.

* [ ] [Logo Google - Material Design](https://material.io/design/)
* [ ] [Logo Google - Material Components](https://material.io/components/)
* [ ] [Logo Google - Material Develop](https://material.io/develop/web/)
* [ ] [Logo Google - Material Tutorial](https://material.io/collections/developer-tutorials/#web)
* [ ] [Logo Wikipedia - Material Design](https://en.wikipedia.org/wiki/Material_Design)

#### Fluent Design

Learn about fluent design and get familiar with the core principles.

* [ ] [Logo Microsoft - Fluent Design System](https://www.microsoft.com/design/fluent/#/web)
* [ ] [Logo Microsoft - Fluent UI Toolkit](https://www.microsoft.com/design/fluent/toolkits/)
* [ ] [Logo Wikipedia - Fluent Design System](https://en.wikipedia.org/wiki/Fluent_Design_System)
* [ ] [Logo Fluent: Design Behind the Design](https://medium.com/microsoft-design/fluent-design-behind-the-design-973028062fcc)
* [ ] [Logo Iconic Icons: Designing the World of Windows](https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416)
* [ ] [Logo Evolving the Microsoft Fluent Design System](https://medium.com/microsoft-design/evolving-the-microsoft-fluent-design-system-9b37fb890c82)

### Accessibility

Learn how and why it is important to design for accessibility.

* [ ] [Logo Designing For Accessibility And Inclusion](https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/)
* [ ] [Logo Designing for accessibility is not that hard](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)
* [ ] [Logo Designing Accessible Experiences at Scale](https://theblog.adobe.com/accessibility-design-at-scale/)
* [ ] [Logo Material Design - Accessibility](https://material.io/design/usability/accessibility.html#)
* [ ] [Logo W3C - Designing for Web Accessibility](https://www.w3.org/WAI/tips/designing/)
* [ ] [Logo Accessibility in government](https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/)
* [ ] [Logo W3C - Visual Presentation](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

### Best Practices

Learn about some of the best practices when designing.

* [ ] [Logo 13 Website Design Best Practices For 2019](https://www.quicksprout.com/website-design-best-practices/)
* [ ] [Logo Design Best Practices](https://medium.com/thinking-design/design-best-practices/home)
* [ ] [Logo Refactoring UI](https://refactoringui.com/)
* [ ] [Logo Refactoring UI | CSS Day 2019](https://www.youtube.com/watch?v=7Z9rrryIOC4)
* [ ] [Logo Dieter Ram' 10 principles for good design](https://www.3pillarglobal.com/insights/dieter-rams-10-principles-good-design)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#the-modern-web)

## ➤ The Modern Web

### Streams

Learn about streams and how they can help you effeciently transporting data.

* [ ] [Logo MDN - Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)
* [ ] [Logo MDN - Streams API concepts](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Concepts)
* [ ] [Logo Experimenting with the Streams API](https://deanhume.com/experimenting-with-the-streams-api/)
* [ ] [Logo WHATWG - Streams](https://streams.spec.whatwg.org/)

#### Media Streams

Learn about media streams and how it is possible to get a stream to device specific hardware such as the camera or microphone.

* [ ] [Logo MDN - Media Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API)
* [ ] [Logo MDN - Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API)
* [ ] [Logo MDN - mediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
* [ ] [Logo W3C - Media Capture and Streams](https://w3c.github.io/mediacapture-main/#dom-mediastream)

#### Media Recorder

Learn how to use the media recorder API to record media streams.

* [ ] [Logo MDN - MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)
* [ ] [Logo Media Recorder API Demo](https://addpipe.com/media-recorder-api-demo/)
* [ ] [Logo WTC - MediaStream Recording](https://www.w3.org/TR/mediastream-recording/)
* [ ] [Logo What Web Can Do Today - Recording Media](https://whatwebcando.today/recording.html)

#### Web RTC

Learn how to use Web RTC for establishing real-time communication.

* [ ] [Logo MDN - WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
* [ ] [Logo WebRTC - Getting Started](https://webrtc.org/start/)
* [ ] [Logo WebRTC samples](https://webrtc.github.io/samples/)
* [ ] [Logo Wikipedia - WebRTC](https://en.wikipedia.org/wiki/WebRTC)
* [ ] [Logo What Web Can Do Today - WebRTC](https://whatwebcando.today/realtime.html)

#### Screen Capture

Learn how to use the Screen Capture API for recording the screen.

* [ ] [Logo MDN - Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API)
* [ ] [Logo dev.to - Intro to Screen Capture API](https://dev.to/al_khovansky/intro-to-screen-capture-api-scanning-qr-codes-bgi)
* [ ] [Logo W3C - Screen Capture](https://www.w3.org/TR/screen-capture/)

#### Generators

Learn how to use generator functions to define iterative algorithms by writing functions whose execution is not continuous.

* [ ] [Logo MDN - Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
* [ ] [Logo Functional JavaScript - Streams](https://blog.jeremyfairbank.com/javascript/functional-javascript-streams-2/)
* [ ] [Logo Understanding Generators with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)
* [ ] [Logo MDN - function*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
* [ ] [Logo MDN - yield*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*)
* [ ] [Logo dev.to - JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)
* [ ] [Logo javascript.info - Generators](https://javascript.info/generators)
* [ ] [Logo Medium - A Simple Guide to Understanding Javascript Generators](https://medium.com/dailyjs/a-simple-guide-to-understanding-javascript-es6-generators-d1c350551950)

### Speech Synthesis

Learn how the speech synthesis API can help you converting text to speech.

* [ ] [Logo Google Devs - Web apps that talk](https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API)
* [ ] [Logo MDN - window.speechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis)
* [ ] [Logo MDN - SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
* [ ] [Logo W3C - Web Speech API](https://w3c.github.io/speech-api)
* [ ] [Logo The Speech Synthesis API](https://flaviocopes.com/speech-synthesis-api/)

### Web Sockets

Learn about web sockets and how you can push data to your web app.

* [ ] [Logo MDN - Websockets API](https://developer.mozilla.org/en-US/docs/Web/API/Websockets_API)
* [ ] [Logo What are Web Sockets?](https://medium.com/@dominik.t/what-are-web-sockets-what-about-rest-apis-b9c15fd72aac)
* [ ] [Logo HTML5 Rocks - Introducing WebSockets](https://www.html5rocks.com/en/tutorials/websockets/basics/)
* [ ] [Logo WHATWG - Web sockets](https://html.spec.whatwg.org/multipage/web-sockets.html)

### Geolocation

Learn how to ask the user for permission to the location.

* [ ] [Logo MDN - Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [ ] [Logo Alligrator - Using the Geolocation API](https://alligator.io/js/geolocation-api/)
* [ ] [Logo Google Maps Platform - Displaying User Position on Maps](https://developers.google.com/maps/documentation/javascript/geolocation)
* [ ] [Logo What Web Can Do Today - Geolocation](https://whatwebcando.today/geolocation.html)

### Device orientation & motion

Learn how to measure the orientation and motion of the device.

* [ ] [Logo MDN - Detecting device orientation](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)
* [ ] [Logo W3C - DeviceOrientation Event Specification](https://www.w3.org/TR/orientation-event/)
* [ ] [Logo HTML5 Rocks - Introduction](https://www.html5rocks.com/en/tutorials/device/orientation/index.html)
* [ ] [Logo What Web Can Do Today - Device Position](https://whatwebcando.today/device-position.html)
* [ ] [Logo W3C - Generic Sensor API](https://www.w3.org/TR/generic-sensor/)
* [ ] [Logo MDN - Sensor APIs](https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs)
* [ ] [Logo Google Devs - Sensors For The Web](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)

### Fullscreen

Learn how to use the fullscreen API to give the user a more immersive experience when needed.

* [ ] [Logo MDN - Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
* [ ] [Logo Google Devs - Let Your Content Do the Talking](https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API)
* [ ] [Logo David Walsh - Fullscreen API](https://davidwalsh.name/fullscreen)

### Variable Fonts

Learn how to use variable fonts and how it is possible to customize fonts without the need for loading more.

* [ ] [Logo v-fonts](https://v-fonts.com/)
* [ ] [Logo MDN - Variable fonts guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)
* [ ] [Logo Google Devs - Introduction to variable fonts](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts)
* [ ] [Logo Supercharged - Variable Fonts](https://www.youtube.com/watch?v=B42rUMdcB7c)

### HTTP/2

Learn about the faster and more convenient HTTP/2 protocol.

* [ ] [Logo Google Devs - Introduction to HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/)
* [ ] [Logo Wikipedia - HTTP/2](https://en.wikipedia.org/wiki/HTTP/2)
* [ ] [Logo 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)
* [ ] [Logo HTTP/2 - FAQ](https://http2.github.io/faq/)
* [ ] [Logo Why turning on HTTP/2 was a mistake](https://www.lucidchart.com/techblog/2019/04/10/why-turning-on-http2-was-a-mistake/)

### Payment Request API

Learn about the payment request API and how it can help monetize your web app.

* [ ] [Logo MDN - Payment Request API](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API)
* [ ] [Logo Codelabs - Payment Request API](https://developers.google.com/web/fundamentals/codelabs/payment-request-api)
* [ ] [Logo What Web Can Do Today - Payments](https://whatwebcando.today/payments.html)
* [ ] [Logo W3C - Payment Request API](https://www.w3.org/TR/payment-request/)
* [ ] [Logo Google Devs - Introduction to the Payment Request API](https://developers.google.com/web/ilt/pwa/introduction-to-the-payment-request-api)

### Web Audio

Learn how to use the Web Audio API to add audio to your web app.

* [ ] [Logo MDN - Using the Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
* [ ] [Logo MDN - Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
* [ ] [Logo W3C - Web Audio API](https://www.w3.org/TR/webaudio/)
* [ ] [Logo HTML5 Rocks - Getting Started with Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/intro/)
* [ ] [Logo 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)
* [ ] [Logo Alligator - Your First Steps with the Web Audio API](https://alligator.io/js/first-steps-web-audio-api/)

### Observers

Learn about the observer pattern and get comfortable concepts such as subjects and observers.

* [ ] [Logo Javascript Observers and You](https://chromatichq.com/blog/javascript-observers-and-you)
* [ ] [Logo How to Use the Observable Pattern in JavaScript](https://webdevstudios.com/2019/02/19/observable-pattern-in-javascript/)
* [ ] [Logo Wikipedia - Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)
* [ ] [Logo The Observer Pattern with Vanilla JavaScript](https://medium.com/@patrickackerman/the-observer-pattern-with-vanilla-javascript-8f85ea05eaa8)

#### Mutation Observer

Learn how to use the Mutation Observer API to get informed about changes to the DOM.

* [ ] [Logo MDN - MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
* [ ] [Logo Listening to the DOM changes with MutationObserver](https://medium.com/@abbeal/listening-to-the-dom-changes-with-mutationobserver-b53a068a58d2)
* [ ] [Logo David Walsh - MutationObserver API](https://davidwalsh.name/mutationobserver-api)
* [ ] [Logo javascript.info - Mutation observer](https://javascript.info/mutation-observer)
* [ ] [Logo WHATWG - Mutation observers](https://dom.spec.whatwg.org/#mutation-observers)

#### Intersection Observer

Learn how to use the Intersection Observer API can help you detect when an element is visible on the screen.

* [ ] [Logo MDN - Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
* [ ] [Logo W3C - Intersection Observer](https://www.w3.org/TR/intersection-observer/)
* [ ] [Logo Google Devs - Trust is Good, Observation is Better](https://developers.google.com/web/updates/2019/02/intersectionobserver-v2)
* [ ] [Logo CSS Tricks - An Explanation of Intersection Observers](https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/)
* [ ] [Logo Understanding the Intersection Observer API in JavaScript](https://medium.com/better-programming/understanding-intersection-observer-api-in-javascript-bb1bf04b8081)
* [ ] [Logo 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/)
* [ ] [Logo google Devs - An event for CSS position:sticky](https://developers.google.com/web/updates/2017/09/sticky-headers)

#### Resize Observer

Learn how to use the Resize Observer API to get informed when the element resizes.

* [ ] [Logo MDN - Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
* [ ] [Logo Google Devs - It’s Like document.onresize for Elements](https://developers.google.com/web/updates/2016/10/resizeobserver)
* [ ] [Logo Alligator - A Look at the Resize Observer JavaScript API](https://alligator.io/js/resize-observer/)
* [ ] [Logo David Walsh - Resize Observer](https://davidwalsh.name/resize-observer)

#### Performance Observer

Learn how the Performance Observer API can help you get information about the performance of your web app.

* [ ] [Logo MDN - Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API)
* [ ] [Logo MDN - PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
* [ ] [Logo Google Devs - Efficient Access to Performance Data](https://developers.google.com/web/updates/2016/06/performance-observer)

### Scrollsnapping

Learn about the Scrollsnapping API and how it can help you provide an intuitive experience when scrolling.

* [ ] [Logo CSS Tricks - Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping/)
* [ ] [Logo CSS Tricks - Introducing CSS Scroll Snap Points](https://css-tricks.com/introducing-css-scroll-snap-points/)
* [ ] [Logo Google Devs - Well-Controlled Scrolling with CSS Scroll Snap](https://developers.google.com/web/updates/2018/07/css-scroll-snap)
* [ ] [Logo MDN - CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)
* [ ] [Logo The scroll-snap-* Properties](https://webkit.org/demos/scroll-snap/index.html)

### Web Assembly

Learn about Web Assembly and how it opens up the playing field for new types of web apps.

* [ ] [Logo MDN - WebAssembly Concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)
* [ ] [Logo MDN - WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [ ] [Logo dev.to - Why the heck is everyone talking about WebAssembly?](https://dev.to/captainsafia/why-the-heck-is-everyone-talking-about-webassembly-455a)
* [ ] [Logo Introduction to Web Assembly](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-web-assembly-6cb6466a3478)
* [ ] [Logo Google Codelabs - An Introduction to Web Assembly](https://codelabs.developers.google.com/codelabs/web-assembly-intro/index.html#0)
* [ ] [Logo How We Used WebAssembly To Speed Up Our Web App By 20X](https://www.smashingmagazine.com/2019/04/webassembly-speed-web-app/)
* [ ] [Logo Google Devs - WebAssembly](https://developers.google.com/web/updates/2019/02/hotpath-with-wasm)

### Beacon

Learn how the Beacon API can help you send data to endpoints before the user closes the page.

* [ ] [Logo MDN - sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)
* [ ] [Logo MDN - Using the Beacon API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API)
* [ ] [Logo Logging Activity With The Web Beacon API](https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/)

### Clipboard

Learn about the Clipboard API and how it can help you copy and paste data.

* [ ] [Logo MDN - Clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard)
* [ ] [Logo What Web Can Do Today - Clipboard (Copy & Paste)](https://whatwebcando.today/clipboard.html)
* [ ] [Logo Google Devs - Image Support for the Async Clipboard API](https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard)

### Share

Learn how the Web Share API can help users sharing your web app.

* [ ] [Logo MDN - Share](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
* [ ] [Logo Google Devs - Introducing the Web Share API](https://developers.google.com/web/updates/2016/09/navigator-share)
* [ ] [Logo Google Devs - Registering as a Share Target](https://developers.google.com/web/updates/2018/12/web-share-target)
* [ ] [Logo CSS Tricks - How to Use the Web Share API](https://css-tricks.com/how-to-use-the-web-share-api/)
* [ ] [Logo The Web Share API](https://blog.arnellebalane.com/the-web-share-api-2cbb3e6cf007)
* [ ] [Logo 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)

### Performance API

Learn about the Performance API and how it can help you monitor the performance of the device.

* [ ] [Logo MDN - Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
* [ ] [Logo MDN - performance.measure()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure)
* [ ] [Logo CSS Tricks - Breaking Down the Performance API](https://css-tricks.com/breaking-performance-api/)
* [ ] [Logo Google Devs - Assessing Loading Performance](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/)
* [ ] [Logo MDN - Performance Specifications](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API#Specifications)
* [ ] [Logo MDN - Performance Timeline](https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline)

### Gamepad API

Learn how the Gamepad API can help you integrate with various controllers such as an x-box or playstation controller

* [ ] [Logo MDN - Using the Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
* [ ] [Logo MDN - Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
* [ ] [Logo luser - Gamepad Test](http://luser.github.io/gamepadtest/)
* [ ] [Logo MDN - Implementing controls using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)

### Speech Recognition

Learn how to use the Speech Recognition API to analyze speech.

* [ ] [Logo MDN - Using the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [ ] [Logo David Walsh - JavaScript Speech Recognition](https://davidwalsh.name/speech-recognition)
* [ ] [Logo MDN - SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
* [ ] [Logo MDN - Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
* [ ] [Logo Github - web-speech-api](https://github.com/mdn/web-speech-api/)
* [ ] [Logo What Web Can Do Today - Speech Recognition](https://whatwebcando.today/speech-recognition.html)

### Interaction Media Queries

Learn how to use Interaction Media Queries to optimize the user experience for the specific type of device.

* [ ] [Logo Introducing CSS Interaction Media Queries](https://medium.com/@rossbulat/introducing-css-interaction-media-queries-38eea48f4221)
* [ ] [Logo MDN - Media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)
* [ ] [Logo Touch Devices Should Not Be Judged By Their Size](https://css-tricks.com/touch-devices-not-judged-size/)
* [ ] [Logo Interaction Media Features and their potential](https://dev.opera.com/articles/media-features/)
* [ ] [Logo W3C - Interaction Media Features](https://www.w3.org/TR/mediaqueries-4/#mf-interaction)
* [ ] [Logo What Web Can Do Today - Pointing Device Adaptation](https://whatwebcando.today/pointer-adaptation.html)

### Browser Extensions

Learn how to build browser extensions to enhance the functionality of your browser.

* [ ] [Logo MDN - Browser Extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [ ] [Logo Chrome - What are extensions?](https://developer.chrome.com/extensions)
* [ ] [Logo Chrome - Getting Started with Extensions](https://developer.chrome.com/extensions/getstarted)
* [ ] [Logo Youtube - Google Chrome Extensions](https://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B)

### Pointer Lock API

Learn how to use the Pointer Lock API to get the raw mouse movement and lock the target of mouse events to a single element.

* [ ] [Logo MDN - Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
* [ ] [Logo W3C - Pointer Lock](https://www.w3.org/TR/pointerlock/)
* [ ] [Logo Use the Pointer Lock API to Restrict Mouse Movement](https://dzone.com/articles/html5-use-pointer-lock-api)

### Picture In Picture

Learn how to use the Picture-In-Picture API to watch videos in a floating window (always on top of other windows).

* [ ] [Logo Google Devs - Watch video using Picture-in-Picture](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
* [ ] [Logo Picture-in-Picture Sample](https://googlechrome.github.io/samples/picture-in-picture/)
* [ ] [Logo CSS Tricks - An Introduction to Picture-in-Picture](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)
* [ ] [Logo dev.to - Implement Picture-in-Picture on the Web](https://dev.to/ananyaneogi/implement-picture-in-picture-on-the-web-17g8)
* [ ] [Logo Medium - How to use “picture in picture 📺” in JavaScript.](https://medium.com/@ashifa454/how-to-use-picture-in-picture-in-javascript-d315296c5800)

### Proxies

Learn how to use proxies to intercept certain operations and implement custom behaviors.

* [ ] [Logo MDN - Meta programming](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming)
* [ ] [Logo MDN - Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
* [ ] [Logo A practical guide to Javascript Proxy](https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0?gi=92cd1f951006)
* [ ] [Logo Introducing Javascript ES6 Proxies](https://hackernoon.com/introducing-javascript-es6-proxies-1327419ab413)
* [ ] [Logo Medium - How to use JavaScript Proxies for Fun and Profit](https://medium.com/dailyjs/how-to-use-javascript-proxies-for-fun-and-profit-365579d4a9f8)

### Houdini

Learn about the Houdini project and get excited about the future of CSS.

* [ ] [Logo Google Devs - Houdini, Demystifying CSS](https://developers.google.com/web/updates/2016/05/houdini)
* [ ] [Logo web.dev - Smarter custom properties](https://web.dev/css-props-and-vals/)
* [ ] [Logo CSS Houdini Experiments](https://css-houdini.rocks/)
* [ ] [Logo Interactive Introduction to CSS Houdini](http://houdini.glitch.me/)
* [ ] [Logo W3C - CSS Houdini Wiki](https://github.com/w3c/css-houdini-drafts/wiki)
* [ ] [Logo Google Devs - Houdini's Animation Worklet](https://developers.google.com/web/updates/2018/10/animation-worklet)

### Project Fugu

Learn about Project Fugu project and get excited about the future of the Web.

* [ ] [Logo Our commitment to a more capable web](https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html)
* [ ] [Logo Web Capabilities (Fugu)](https://www.chromium.org/teams/web-capabilities-fugu)
* [ ] [Logo Chromium Bugs - Fugu](https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu)
* [ ] [Logo Google Devs - Unlocking new capabilities for the web](https://developers.google.com/web/updates/capabilities)
* [ ] [Logo Youtube - Unlocking New Capabilities for the Web](https://www.youtube.com/watch?v=GSiUzuB-PoI)
* [ ] [Logo Controlling Access to Powerful Web Platform Features](https://chromium.googlesource.com/chromium/src/+/f384207e04ad27f58287e972907f17ad66acc115/docs/security/permissions-for-powerful-web-platform-features.md)

### Web Authentication API

Learn how to use the Web Authentication API to provide a strong authentication with public key cryptography.

* [ ] [Logo MDN - Web Authentication API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)
* [ ] [Logo W3C - Web Authentication: An API for accessing Public Key Credentials](https://www.w3.org/TR/webauthn-2/)
* [ ] [Logo Google Devs - Enabling Strong Authentication with WebAuthn](https://developers.google.com/web/updates/2018/05/webauthn)
* [ ] [Logo Introduction to Web Authentication: The New W3C Spec](https://auth0.com/blog/introduction-to-web-authentication/)
* [ ] [Logo Microsoft - Web Authentication and Windows Hello](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/windows-integration/web-authentication)
* [ ] [Logo 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)

#### Credentials Manager API

Learn about the Credentials Manager API proposal and how it can help authenticating users.

* [ ] [Logo MDN - Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API)
* [ ] [Logo Google Devs - The Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management)
* [ ] [Logo Google Devs - Sign in Users](https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials)
* [ ] [Logo Google Devs - Save Credentials from Forms](https://developers.google.com/web/fundamentals/security/credential-management/save-forms)
* [ ] [Logo What Web Can Do Today - Credentials](https://whatwebcando.today/credentials.html)

### Native File System

Learn how the Native File System API proposal enables interacting with files on the user's local device.

* [ ] [Logo Google Devs - The Native File System API](https://developers.google.com/web/updates/2019/08/native-file-system)
* [ ] [Logo Github - Native File System](https://github.com/WICG/native-file-system/blob/master/EXPLAINER.md)
* [ ] [Logo W3C - Native File System](https://wicg.github.io/native-file-system/)
* [ ] [Logo Native File System Web API - Chromium Security Model](https://docs.google.com/document/d/1NJFd-EWdUlQ7wVzjqcgXewqC5nzv_qII4OvlDtK6SE8/edit#heading=h.7nki9mck5t64)
* [ ] [Logo Chromestatus - Native File System](https://www.chromestatus.com/feature/6284708426022912)
* [ ] [Logo W3C - File API](https://w3c.github.io/FileAPI/)

### Shape Detection

Learn how the Shape Detection API proposal can be use to detect shapes such as faces or barcodes in pictures.

* [ ] [Logo W3C - Accelerated Shape Detection in Images](https://wicg.github.io/shape-detection-api/)
* [ ] [Logo web.dev - A Picture is Worth a Thousand Words](https://web.dev/shape-detection/)
* [ ] [Logo Github - Shape Detection API Specification](https://github.com/WICG/shape-detection-api)
* [ ] [Logo Introduction to the Shape Detection API](https://blog.arnellebalane.com/introduction-to-the-shape-detection-api-e07425396861)
* [ ] [Logo Face detection using Shape Detection API](https://paul.kinlan.me/face-detection/)

### Web Bluetooth

Learn how the Web Bluetooth API proposal can be used to connect with nearby devices.

* [ ] [Logo MDN - Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)
* [ ] [Logo Google Devs - Interact with Bluetooth devices](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)
* [ ] [Logo What Web Can Do Today - Bluetooth](https://whatwebcando.today/bluetooth.html)
* [ ] [Logo W3C - Web Bluetooth](https://webbluetoothcg.github.io/web-bluetooth/)
* [ ] [Logo Web Bluetooth Samples](https://googlechrome.github.io/samples/web-bluetooth/)

### Web USB

Learn the Web USB API proposal can be used to connect with hardware through a cable.

* [ ] [Logo MDN - USB](https://developer.mozilla.org/en-US/docs/Web/API/USB)
* [ ] [Logo WICG - Web USB](https://github.com/WICG/webusb)
* [ ] [Logo Google Devs - Access USB Devices on the Web](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)
* [ ] [Logo What Web Can Do Today - Web USB](https://whatwebcando.today/usb.html)

### Web XR

Learn how to use Web XR API proposal for virtual- and augmented reality experiences.

* [ ] [Logo MDN - WebXR Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)
* [ ] [Logo Google Devs - Welcome to the immersive web](https://developers.google.com/web/updates/2018/05/welcome-to-immersive)
* [ ] [Logo New API to Bring Augmented Reality to the Web](https://hacks.mozilla.org/2018/09/webxr/)
* [ ] [Logo W3C - WebXR Device API](https://immersive-web.github.io/webxr/)

### Presentation

Learn how the Presentation API proposal enables your web app to use the presentation display mode in the browser or at an external display device.

* [ ] [Logo MDN - Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)
* [ ] [Logo What Web Can Do Today - Presentation Features](https://whatwebcando.today/presentation.html)
* [ ] [Logo Google Devs - Present web pages to secondary attached displays](https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays)
* [ ] [Logo W3C - Presentation API](https://w3c.github.io/presentation-api)

### Network Information API

Learn how the Network Information API proposal can give you information about the state of the network.

* [ ] [Logo MDN - Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
* [ ] [Logo Addy Osmani - Adaptive Serving](https://addyosmani.com/blog/adaptive-serving/)
* [ ] [Logo W3C - Network Information API](https://wicg.github.io/netinfo/)
* [ ] [Logo Network Information API Sample](https://googlechrome.github.io/samples/network-information/)
* [ ] [Logo What Web Can Do Today - Network Type & Speed](https://whatwebcando.today/network-type-speed.html)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#algorithms--data-structures)

## ➤ Algorithms & Data structures

### Data structures

### Arrays

Learn how and when arrays should be used.

* [ ] [Logo javascript.info - Arrays](https://javascript.info/array)
* [ ] [Logo Freecodecamp - Arrays, A Visual Introduction for Beginners](https://www.freecodecamp.org/news/data-structures-101-arrays-a-visual-introduction-for-beginners-7f013bcc355a/)
* [ ] [Logo Wikipedia - Array data structure](https://en.wikipedia.org/wiki/Array_data_structure)
* [ ] [Logo MDN - Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

### Queues & Stacks

Learn how and when queues and stacks should be used.

* [ ] [Logo Stacks and Queues](https://www.cs.cmu.edu/~adamchik/15-121/lectures/Stacks%20and%20Queues/Stacks%20and%20Queues.html)
* [ ] [Logo Difference between Stack and Queue Data Structures](https://www.geeksforgeeks.org/difference-between-stack-and-queue-data-structures/)
* [ ] [Logo Data Structures: Stacks & Queues](https://medium.com/@hitherejoe/data-structures-stacks-queues-a3b3591c8cb0)
* [ ] [Logo Stacks vs. Queues In JavaScript](https://dev.to/emmawedekind/stacks-vs-queues-in-javascript-4d1o)

### Trees

Learn how and when trees should be used.

* [ ] [Logo Wikipedia - Tree (data structure)](https://en.wikipedia.org/wiki/Tree_(data_structure))
* [ ] [Logo 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/)
* [ ] [Logo Data Structure and Algorithms - Tree](https://www.tutorialspoint.com/data_structures_algorithms/tree_data_structure.htm)

#### Binary Indexed Tree

Learn how and when binary indexed trees should be used.

* [ ] [Logo Wikipedia - Fenwick tree](https://en.wikipedia.org/wiki/Fenwick_tree)
* [ ] [Logo 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)
* [ ] [Logo Binary Indexed Tree or Fenwick Tree](https://www.geeksforgeeks.org/binary-indexed-tree-or-fenwick-tree-2/)
* [ ] [Logo Fenwick Tree / Binary Indexed Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/fenwick-tree)
* [ ] [Logo Youtube - Binary Indexed Tree](https://www.youtube.com/watch?v=CWDQJGaN1gY&index=18&t=0s&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8)
* [ ] [Logo Github - fast-binary-indexed-tree-js](https://github.com/microsoft/fast-binary-indexed-tree-js)

#### Heap

Learn how and when heaps should be used.

* [ ] [Logo Wikipedia - Heap (data structure)](https://en.wikipedia.org/wiki/Heap_(data_structure))
* [ ] [Logo Tutorialspoint - Heap Data Structure](https://www.tutorialspoint.com/data_structures_algorithms/heap_data_structure.htm)
* [ ] [Logo Learning to Love Heaps](https://medium.com/basecs/learning-to-love-heaps-cef2b273a238)
* [ ] [Logo How to implement Heap Data structure in JavaScript](https://reactgo.com/javascript-heap-datastructure/)
* [ ] [Logo Youtube - Data Structures: Heaps](https://www.youtube.com/watch?v=t0Cq6tVNRBA&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8&index=5)

#### Red-black Tree

Learn how and when red-black trees should be used.

* [ ] [Logo Wikipedia - Red–black tree](https://en.wikipedia.org/wiki/Red%E2%80%93black_tree)
* [ ] [Logo Painting Nodes Black With Red-Black Trees](https://dev.to/vaidehijoshi/painting-nodes-black-with-red-black-trees)
* [ ] [Logo Red-Black Tree](https://www.geeksforgeeks.org/red-black-tree-set-1-introduction-2/)
* [ ] [Logo Red Black Trees in JavaScript](https://medium.com/@julianknodt/red-black-trees-in-javascript-c20eec1d5d1c)
* [ ] [Logo Github - Red–Black Tree](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/tree/red-black-tree)

#### Trie

Learn how and when tries should be used.

* [ ] [Logo Wikipedia - Trie](https://en.wikipedia.org/wiki/Trie)
* [ ] [Logo Trie (Insert and Search)](https://www.geeksforgeeks.org/trie-insert-and-search/)
* [ ] [Logo Trying to Understand Tries](https://medium.com/basecs/trying-to-understand-tries-3ec6bede0014)
* [ ] [Logo Trie, Datastructure](https://www.interviewcake.com/concept/java/trie)
* [ ] [Logo Youtube - Data Structures: Tries](https://www.youtube.com/watch?v=zIjfhVPRZCg&list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8&index=7)
* [ ] [Logo Practical Data Structures: Tries](https://hackernoon.com/practical-data-structures-for-frontend-applications-when-to-use-tries-5428a565eba4)
* [ ] [Logo Trie, visualization](https://www.cs.usfca.edu/~galles/visualization/Trie.html)

#### K-D Tree

Learn how and when K-D trees should be used.

* [ ] [Logo Wikipedia - k-d tree](https://en.wikipedia.org/wiki/K-d_tree)
* [ ] [Logo Github - k-d Tree JavaScript Library](https://github.com/ubilabs/kd-tree-javascript)
* [ ] [Logo kd-Trees](https://www.cs.cmu.edu/~ckingsf/bioinfo-lectures/kdtrees.pdf)
* [ ] [Logo Youtube - KD Tree Algorithm](https://www.youtube.com/watch?v=TLxWtXEbtFE)

### Hash Tables

Learn how and when hash tables should be used.

* [ ] [Logo Wikipedia - Hash table](https://en.wikipedia.org/wiki/Hash_table)
* [ ] [Logo Hash tables explained](https://yourbasic.org/algorithms/hash-tables-explained/)
* [ ] [Logo Basics of Hash Tables](https://www.hackerearth.com/practice/data-structures/hash-tables/basics-of-hash-tables/tutorial/)
* [ ] [Logo Javascript Hash Table](https://medium.com/@yanganif/javascript-hash-table-8878afceecbc)
* [ ] [Logo Objects and Hash Tables in Javascript](https://codeburst.io/objects-and-hash-tables-in-javascript-a472ad1940d9)

### Linked Lists

Learn how and when linked lists should be used.

* [ ] [Logo Wikipedia - Linked list](https://en.wikipedia.org/wiki/Linked_list)
* [ ] [Logo Introduction to Linked Lists](https://www.studytonight.com/data-structures/introduction-to-linked-list)
* [ ] [Logo Linked Lists in JavaScript](https://codeburst.io/linked-lists-in-javascript-es6-code-part-1-6dd349c3dcc3)
* [ ] [Logo The Little Guide of Linked List in JavaScript](https://hackernoon.com/the-little-guide-of-linked-list-in-javascript-9daf89b63b54)

### Graphs

Learn how and when graphs should be used.

* [ ] [Logo Wikipedia - Graph theory](https://en.wikipedia.org/wiki/Graph_theory)
* [ ] [Logo Implementation of Graph in JavaScript](https://www.geeksforgeeks.org/implementation-graph-javascript/)
* [ ] [Logo Graphs and Graph Algorithms](https://runestone.academy/runestone/books/published/pythonds/Graphs/Objectives.html)
* [ ] [Logo The Javascript Developer’s Guide to Graphs](https://hackernoon.com/the-javascript-developers-guide-to-graphs-and-detecting-cycles-in-them-96f4f619d563)

### Analysis

### Time complexity

Learn about time complexity and how it can be used to analyze an algorithm.

* [ ] [Logo Wikipedia - Time complexity](https://en.wikipedia.org/wiki/Time_complexity)
* [ ] [Logo Time Complexity of Algorithms](https://www.studytonight.com/data-structures/time-complexity-of-algorithms)
* [ ] [Logo Freecodecamp - An Introduction to Time Complexity](https://www.freecodecamp.org/news/time-complexity-of-algorithms/)
* [ ] [Logo 8 time complexities that every programmer should know](https://adrianmejia.com/most-popular-algorithms-time-complexity-every-programmer-should-know-free-online-tutorial-course/)
* [ ] [Logo Time Complexity Analysis in JavaScript](https://www.jenniferbland.com/time-complexity-analysis-in-javascript/)
* [ ] [Logo An intro to Algorithms](https://codeburst.io/algorithms-i-searching-and-sorting-algorithms-56497dbaef20)

#### Cost model

Learn how to setup a cost model for an algorithm.

* [ ] [Logo Wikipedia - Analysis of algorithms](https://en.wikipedia.org/wiki/Analysis_of_algorithms)
* [ ] [Logo Analysis of Algorithms](https://aofa.cs.princeton.edu/10analysis/)
* [ ] [Logo The cost of JavaScript in 2019](https://v8.dev/blog/cost-of-javascript-2019)

#### Order of Growth

Learn how to make an order-of-growth classification to classify the cost model.

* [ ] [Logo 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)
* [ ] [Logo Orders of Growth](http://www.ccs.neu.edu/home/jaa/CS7800.12F/Information/Handouts/order.html)
* [ ] [Logo Coursera - Order-of-Growth Classifications](https://www.coursera.org/lecture/algorithms-part1/order-of-growth-classifications-Xk03a)

#### Big O notation

Learn how to use Big O notation to classify the time complexity of an algorithm.

* [ ] [Logo Wikipedia - Big O notation](https://en.wikipedia.org/wiki/Big_O_notation)
* [ ] [Logo Time Complexity/Big O Notation](https://medium.com/javascript-scene/time-complexity-big-o-notation-1a4310c3ee4b)
* [ ] [Logo Big O Notation in JavaScript](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)
* [ ] [Logo 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)
* [ ] [Logo Big O in JavaScript](https://medium.com/@gmedina229/big-o-in-javascript-36ff67766051)
* [ ] [Logo 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)
* [ ] [Logo dev.to - Big-O Notation Useful guide](https://dev.to/yashwanthambati/big-o-notation-complete-guide-226h)

### Space Complexity

Learn about space complexity and how it can be used to analyze an algorithm.

* [ ] [Logo Space Complexity of Algorithms](https://www.studytonight.com/data-structures/space-complexity-of-algorithms)
* [ ] [Logo Google Devs - Fix Memory Problems](https://developers.google.com/web/tools/chrome-devtools/memory-problems)
* [ ] [Logo Google Devs - Memory Terminology](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)
* [ ] [Logo Google Devs - How to Record Heap Snapshots](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)
* [ ] [Logo Debugging Memory Leaks in JavaScript](https://medium.com/@sarahelson81/debugging-memory-leaks-in-javascript-ed6d0fa84b40)
* [ ] [Logo Wikipedia - Space complexity](https://en.wikipedia.org/wiki/Space_complexity)
* [ ] [Logo Space Complexity](http://exploreshaifali.github.io/2014/02/13/Space-Complexity/)

### Algorithms

### Sorting

Learn about the most important sorting algorithms and figure out what challenges there are involved with implementing one.

* [ ] [Logo A Guide To Sorting Algorithms in JavaScript](https://blog.bitsrc.io/a-guide-to-sorting-algorithms-in-javascript-5b32da4eae1e)
* [ ] [Logo dev.to - Sorting Algorithms with Javascript](https://dev.to/wangonya/sorting-algorithms-with-javascript-part-1-4aca)
* [ ] [Logo Introduction to Sorting](https://www.studytonight.com/data-structures/introduction-to-sorting)
* [ ] [Logo Implementing Sorting Algorithms in JavaScript](https://medium.com/@rwillt/implementing-sorting-algorithms-in-javascript-b08504cdf4a9)
* [ ] [Logo Algorithms – Sorting Algorithms in JavaScript](https://notlaura.com/day-6-algorithms-sorting-algorithms-in-javascript/)

#### Insertion Sort

Learn about the insertion sort algorithm.

* [ ] [Logo Wikipedia - Insertion sort](https://en.wikipedia.org/wiki/Insertion_sort)
* [ ] [Logo Insertion Sort](https://www.geeksforgeeks.org/insertion-sort/)
* [ ] [Logo Insertion Sort Algorithm](https://www.interviewbit.com/tutorial/insertion-sort-algorithm/)
* [ ] [Logo Insertion Sorting for Beginners in JS](https://dev.to/ryan_dunton/insertion-sorting-for-beginners-in-js------fkg)
* [ ] [Logo Algorithms: Insertion Sort in JavaScript](https://medium.com/dailyjs/insertion-sort-in-javascript-9c077844717a)

#### Quicksort

Learn about the quicksort algorithm.

* [ ] [Logo Wikipedia - Quicksort](https://en.wikipedia.org/wiki/Quicksort)
* [ ] [Logo A Quick Explanation of Quick Sort](https://medium.com/karuna-sehgal/a-quick-explanation-of-quick-sort-7d8e2563629b)
* [ ] [Logo QuickSort](https://www.geeksforgeeks.org/quick-sort/)
* [ ] [Logo Implementing Quicksort in JavaScript](https://medium.com/@Charles_Stover/implementing-quicksort-in-javascript-8044a8e2bf39)
* [ ] [Logo Computer science in JavaScript: Quicksort](https://humanwhocodes.com/blog/2012/11/27/computer-science-in-javascript-quicksort/)

#### Mergesort

Learn about the mergesort algorithm.

* [ ] [Logo Wikipedia - Merge sort](https://en.wikipedia.org/wiki/Merge_sort)
* [ ] [Logo Merge Sort Algorithm in JavaScript](https://medium.com/javascript-in-plain-english/javascript-merge-sort-3205891ac060)
* [ ] [Logo A Simplified Explanation of Merge Sort](https://medium.com/karuna-sehgal/a-simplified-explanation-of-merge-sort-77089fe03bb2)
* [ ] [Logo Overview of merge sort](https://www.khanacademy.org/computing/computer-science/algorithms/merge-sort/a/overview-of-merge-sort)
* [ ] [Logo Freecodecamp - The Merge Sort Algorithm Explained](https://www.freecodecamp.org/forum/t/the-merge-sort-algorithm-explained/16104)

#### Heapsort

Learn about the heapsort algorithm.

* [ ] [Logo Wikipedia - Heapsort](https://en.wikipedia.org/wiki/Heapsort)
* [ ] [Logo Heapify All The Things With Heap Sort](https://medium.com/basecs/heapify-all-the-things-with-heap-sort-55ee1c93af82)
* [ ] [Logo Heap Sort Algorithm](https://www.studytonight.com/data-structures/heap-sort)
* [ ] [Logo Heapsort Algorithm](https://www.interviewcake.com/concept/java/heapsort)
* [ ] [Logo Heap Sort](https://brilliant.org/wiki/heap-sort/)

### Searching

Learn about the most important searching algorithms and figure out what challenges there are involved with implementing one.

* [ ] [Logo Wikipedia - Search algorithm](https://en.wikipedia.org/wiki/Search_algorithm)
* [ ] [Logo Search Algorithms with ES6](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6/tree/master/13-chapter-Searching-Algorithms)
* [ ] [Logo Introduction to Searching Algorithms](https://www.studytonight.com/data-structures/search-algorithms)
* [ ] [Logo Implement linear and binary search algorithms with Javascript](https://medium.com/employbl/implement-linear-and-binary-search-algorithms-with-javascript-2149997588f0)
* [ ] [Logo Searching Algorithms In Javascript](https://www.scriptonitejs.com/javascript-searching-algorithms/)

#### Binary Search

Learn about the binary search algorithm.

* [ ] [Logo Wikipedia - Binary search algorithm](https://en.wikipedia.org/wiki/Binary_search_algorithm)
* [ ] [Logo How to implement a Binary search algorithm](https://reactgo.com/binary-search-algorithm-javascript/)
* [ ] [Logo Binary Search](https://www.interviewbit.com/courses/programming/topics/binary-search/)
* [ ] [Logo What Is Binary Search, A Detailed Step-By-Step](https://medium.com/@jeffrey.allen.lewis/javascript-algorithms-explained-binary-search-25064b896470)
* [ ] [Logo Programming with JS: Binary Search](https://hackernoon.com/programming-with-js-binary-search-aaf86cef9cb3)
* [ ] [Logo Binary Search In JavaScript](https://www.geeksforgeeks.org/binary-search-in-javascript/)

#### Breadth First Search

Learn about the breadth first search algorithm.

* [ ] [Logo Wikipedia - Breadth-first search](https://en.wikipedia.org/wiki/Breadth-first_search)
* [ ] [Logo Breaking Down Breadth-First Search](https://medium.com/basecs/breaking-down-breadth-first-search-cebe696709d9)
* [ ] [Logo Breadth First Search in JavaScript](https://medium.com/dailyjs/breadth-first-search-in-javascript-e655cd824fa4)
* [ ] [Logo Github - Breadth-First Search (BFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/breadth-first-search)
* [ ] [Logo The Magician’s Guide to Algorithms](https://levelup.gitconnected.com/the-magicians-guide-to-algorithms-part-4-the-breadth-first-search-b800aec8ccf8)

#### Depth First Search

Learn about the depth first search algorithm.

* [ ] [Logo Wikipedia - Depth-first search](https://en.wikipedia.org/wiki/Depth-first_search)
* [ ] [Logo Depth First Search Algorithm](https://edgy.app/depth-first-search-algorithm-what-it-is-and-how-it-works)
* [ ] [Logo Depth first and breadth first search on trees](https://medium.com/employbl/depth-first-and-breadth-first-search-on-trees-in-javascript-58dcd6ff8de1)
* [ ] [Logo Breadth-first vs Depth-first Tree Traversal](https://medium.com/@kenny.hom27/breadth-first-vs-depth-first-tree-traversal-in-javascript-48df2ebfc6d1)
* [ ] [Logo Github - Depth-First Search (DFS)](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/graph/depth-first-search)

#### Dijkstra's Algorithm

Learn about dijkstra's algorithm.

* [ ] [Logo Wikipedia - Dijkstra's algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm)
* [ ] [Logo Dijkstra’s algorithm](https://courses.cs.washington.edu/courses/cse373/16su/lectures/lecture15.pdf)
* [ ] [Logo How to implement Dijkstra’s Algorithm](https://hackernoon.com/how-to-implement-dijkstras-algorithm-in-javascript-abdfd1702d04)
* [ ] [Logo A Walkthrough of Dijkstra’s Algorithm](https://medium.com/@adriennetjohnson/a-walkthrough-of-dijkstras-algorithm-in-javascript-e94b74192026)

#### String Search

Learn about various algorithms for searching in strings.

* [ ] [Logo Wikipedia - String-searching algorithm](https://en.wikipedia.org/wiki/String-searching_algorithm)
* [ ] [Logo Boyer Moore String Search](https://ongspxm.github.io/blog/2017/05/boyer-moore-search/)
* [ ] [Logo Boyer–Moore string-search algorithm](https://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string-search_algorithm)

### Hashing

Learn about hashing algorithms.

* [ ] [Logo Wikipedia - Hash function](https://en.wikipedia.org/wiki/Hash_function)
* [ ] [Logo How Encryption Works](https://computer.howstuffworks.com/encryption5.htm)
* [ ] [Logo Cryptography for JavaScript: Hash Function](https://medium.com/@promentol/cryptography-for-javascript-node-js-developers-part-1-hash-function-86d119c7304)
* [ ] [Logo Github - hash.js](https://gist.github.com/iperelivskiy/4110988)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#databases--servers)

## ➤ Databases & Servers

### Databases

### Relational Databases

Learn about relational databases and how to use them.

* [ ] [Logo Wikipedia - Relational database](https://en.wikipedia.org/wiki/Relational_database)
* [ ] [Logo Relational database](https://searchdatamanagement.techtarget.com/definition/relational-database)
* [ ] [Logo Everything you need to know about (Relational) Databases](https://dev.to/lmolivera/everything-you-need-to-know-about-relational-databases-3ejl)
* [ ] [Logo What are relational databases?](https://computer.howstuffworks.com/question599.htm)
* [ ] [Logo What is a Relational Database Management System?](https://www.codecademy.com/articles/what-is-rdbms-sql)

#### SQL

Learn how to write SQL statements to communicate with a database.

* [ ] [Logo Learn SQL](https://www.codecademy.com/learn/learn-sql)
* [ ] [Logo Wikipedia - SQL](https://en.wikipedia.org/wiki/SQL)
* [ ] [Logo A beginners guide to SQL](https://learntocodewith.me/posts/sql-guide/)
* [ ] [Logo 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)
* [ ] [Logo SQL Tutorial](https://www.tutorialrepublic.com/sql-tutorial/)

#### MySQL

Learn about the open-source relational database management system called MySQL.

* [ ] [Logo MySQL](https://www.mysql.com/)
* [ ] [Logo Wikipedia - MySQL](https://en.wikipedia.org/wiki/MySQL)
* [ ] [Logo Tutorialspoint - MySQL Tutorial](https://www.tutorialspoint.com/mysql/index.htm)
* [ ] [Logo MySQL Definition](https://searchoracle.techtarget.com/definition/MySQL)
* [ ] [Logo Getting Started with MySQL](http://www.mysqltutorial.org/getting-started-with-mysql/)

#### PostgreSQL

Learn about the open-source relational database management system called PostgreSQL.

* [ ] [Logo PostgreSQL](https://www.postgresql.org/)
* [ ] [Logo Wikipedia - PostgreSQL](https://en.wikipedia.org/wiki/PostgreSQL)
* [ ] [Logo PostgreSQL Tutorial](http://www.postgresqltutorial.com/)
* [ ] [Logo Postgres Guide](http://postgresguide.com/)

### Non-relational Databases

Learn about non-relational databases and how to use them.

* [ ] [Logo What Is A Non Relational Database](https://www.mongodb.com/scale/what-is-a-non-relational-database)
* [ ] [Logo Wikipedia - NoSQL](https://en.wikipedia.org/wiki/NoSQL)
* [ ] [Logo dev.to - Relational SQL vs. Non-Relational NoSQL Databases](https://dev.to/trevoirwilliams/relational-sql-vs-non-relational-nosql-databases-hi5)
* [ ] [Logo Non-relational data and NoSQL](https://docs.microsoft.com/en-us/azure/architecture/data-guide/big-data/non-relational-data)
* [ ] [Logo Non-Relational Database](https://www.techopedia.com/definition/25218/non-relational-database)

#### Redis

Learn about the open-source non-relational database management system called Redis.

* [ ] [Logo Redis](https://redis.io/)
* [ ] [Logo Try Redis](http://try.redis.io/)
* [ ] [Logo Wikipedia - Redis](https://en.wikipedia.org/wiki/Redis)
* [ ] [Logo An introduction to Redis data types and abstractions](https://redis.io/topics/data-types-intro)
* [ ] [Logo Redis - Documentation](https://redis.io/documentation)
* [ ] [Logo Redis: What and Why?](https://codeburst.io/redis-what-and-why-d52b6829813)
* [ ] [Logo Tutorialspoint - Redis Tutorial](https://www.tutorialspoint.com/redis/index.htm)

#### MongoDB

Learn about the open-source non-relational database management system called MongoDB.

* [ ] [Logo MongoDB](https://www.mongodb.com/)
* [ ] [Logo MongoDB - Documentation](https://docs.mongodb.com/)
* [ ] [Logo MongoDB - University](https://university.mongodb.com/)
* [ ] [Logo Tutorialspoint - MongoDB Tutorial](https://www.tutorialspoint.com/mongodb/index.htm)
* [ ] [Logo Youtube - MongoDB In 30 Minutes](https://www.youtube.com/watch?v=pWbMrx5rVBE)

### Data Modelling

Learn how data modelling can help your database design.

* [ ] [Logo Chapter 5 Data Modelling](https://opentextbc.ca/dbdesign01/chapter/chapter-5-data-modelling/)
* [ ] [Logo Wikipedia - Database Model](https://en.wikipedia.org/wiki/Database_model)
* [ ] [Logo Wikipedia - Database Modelling](https://en.wikipedia.org/wiki/Data_modeling)
* [ ] [Logo What is Data Modelling?](https://www.guru99.com/data-modelling-conceptual-logical.html)
* [ ] [Logo Data Modeling Definition](https://searchdatamanagement.techtarget.com/definition/data-modeling)

#### ER Diagram

Learn how to model your data using ER diagrams.

* [ ] [Logo Tutorialspoint - DBMS, Data Models](https://www.tutorialspoint.com/dbms/dbms_data_models.htm)
* [ ] [Logo Entity Relationship Diagram](https://www.smartdraw.com/entity-relationship-diagram/)
* [ ] [Logo Youtube - Entity Relationship Diagram Tutorial](https://www.youtube.com/watch?v=QpdhBUYk7Kk)
* [ ] [Logo Wikipedia - Entity–relationship model](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model)
* [ ] [Logo Entity Relationship Diagram](https://beginnersbook.com/2015/04/e-r-model-in-dbms/)

#### Keys

Learn how to figure out what types of keys to use and where to use them.

* [ ] [Logo Introduction to Database Keys](https://www.studytonight.com/dbms/database-key.php)
* [ ] [Logo 7 Different Types of Database Keys](https://www.csestack.org/different-types-database-keys-example/)
* [ ] [Logo Database Management: Keys](https://databasemanagement.fandom.com/wiki/Relational_Database:_Keys)
* [ ] [Logo Database Keys](https://www.tutorialcup.com/dbms/keys.htm)
* [ ] [Logo Youtube - Database Keys](https://www.youtube.com/watch?v=yMYH0zP1m8U)

### Indexing

Learn how to use indexing to speed up your database.

* [ ] [Logo Indexing in Databases](https://www.geeksforgeeks.org/indexing-in-databases-set-1/)
* [ ] [Logo Wikipedia - Database index](https://en.wikipedia.org/wiki/Database_index)
* [ ] [Logo Database Indexes Explained](https://www.essentialsql.com/what-is-a-database-index/)
* [ ] [Logo Indexing in Databases with EXAMPLES](https://www.guru99.com/indexing-in-database.html)
* [ ] [Logo What Does Indexing Do?](https://chartio.com/learn/databases/how-does-indexing-work/)
* [ ] [Logo An in-depth look at Database Indexing](https://www.freecodecamp.org/news/database-indexing-at-a-glance-bb50809d48bd/)
* [ ] [Logo Indexing your database data — the easy way](https://medium.com/faun/explained-indexing-your-database-data-the-easy-way-3c7127ed36a)

### Data Integrity

Learn how to assure the accuracy and consistency of data.

* [ ] [Logo Wikipedia - Data Integrity](https://en.wikipedia.org/wiki/Data_integrity)
* [ ] [Logo What is Data Integrity and Why Is It Important?](https://www.talend.com/resources/what-is-data-integrity/)
* [ ] [Logo hat is Data Integrity?](https://digitalguardian.com/blog/what-data-integrity-data-protection-101)
* [ ] [Logo What is Data Integrity?](https://database.guide/what-is-data-integrity/)
* [ ] [Logo Data Integrity](https://www.tutorialcup.com/dbms/integrity.htm)
* [ ] [Logo Youtube - Database Design, Data Integrity](https://www.youtube.com/watch?v=1D_h-yFtQVo)

### Normalization

Learn how data normalization can help you decrease data redundancy and improve data integrity in your database.

* [ ] [Logo Wikipedia - Database normalization](https://en.wikipedia.org/wiki/Database_normalization)
* [ ] [Logo Database Normalization (Explained in Simple English)](https://www.essentialsql.com/get-ready-to-learn-sql-database-normalization-explained-in-simple-english/)
* [ ] [Logo What is Normalization?](https://www.guru99.com/database-normalization.html)
* [ ] [Logo Normal Forms in DBMS](https://www.geeksforgeeks.org/normal-forms-in-dbms/)
* [ ] [Logo Database normalization](https://searchsqlserver.techtarget.com/definition/normalization)
* [ ] [Logo Database Normalization Explained](https://towardsdatascience.com/database-normalization-explained-53e60a494495)

#### Functional Dependencies

Learn how to find functional dependencies to improve your database design.

* [ ] [Logo Full Functional Dependency in Database Normalization](https://www.lifewire.com/full-functional-dependency-1019753)
* [ ] [Logo Stackoverflow - Functional dependency and normalization](https://stackoverflow.com/questions/4199444/functional-dependency-and-normalization)
* [ ] [Logo Tutorialspoint - DBMS, Normalization](https://www.tutorialspoint.com/dbms/database_normalization.htm)
* [ ] [Logo Functional Dependencies and Normalization](http://www.ict.griffith.edu.au/~jw/normalization/assets/Functional%20Dependencies%20and%20Normalization.pdf)
* [ ] [Logo DBMS Functional Dependency](https://www.guru99.com/dbms-functional-dependency.html)
* [ ] [Logo Wikipedia - Armstrong's axioms](https://en.wikipedia.org/wiki/Armstrong%27s_axioms)
* [ ] [Logo Armstrong's Axioms in Functional Dependency](https://www.includehelp.com/dbms/armstrongs-axioms-in-functional-dependency.aspx)

#### Normal Forms

Learn how normal forms can help you normalize your database.

* [ ] [Logo Wikipedia - Normal forms](https://en.wikipedia.org/wiki/Database_normalization#Normal_forms)
* [ ] [Logo 1NF, 2NF, 3NF and BCNF in Database](https://beginnersbook.com/2015/05/normalization-in-dbms/)
* [ ] [Logo Chapter 12 Normalization](https://opentextbc.ca/dbdesign01/chapter/chapter-12-normalization/)
* [ ] [Logo Wikipedia - Boyce–Codd normal form](https://en.wikipedia.org/wiki/Boyce%E2%80%93Codd_normal_form)
* [ ] [Logo Boyce-Codd Normal Form (BCNF)](https://www.geeksforgeeks.org/boyce-codd-normal-form-bcnf/)
* [ ] [Logo Wikipedia - Third normal form](https://en.wikipedia.org/wiki/Third_normal_form)

### Transactions

Learn how transactions can group a set of database tasks into a single execution unit.

* [ ] [Logo Wikipedia - Database transaction](https://en.wikipedia.org/wiki/Database_transaction)
* [ ] [Logo Stackoverflow - What is a database transaction?](https://stackoverflow.com/questions/974596/what-is-a-database-transaction)
* [ ] [Logo Tutorialspoint - DBMS, Transaction](https://www.tutorialspoint.com/dbms/dbms_transaction.htm)
* [ ] [Logo Why do you need to know transactions?](http://db4beginners.com/blog/relationaldb-transaction/)
* [ ] [Logo SQL Transactions](https://www.geeksforgeeks.org/sql-transactions/)

#### ACID

Learn about the ACID properties of transactions.

* [ ] [Logo A beginner’s guide to ACID](https://vladmihalcea.com/a-beginners-guide-to-acid-and-database-transactions/)
* [ ] [Logo DBMS Transaction Management: ACID Properties](https://www.guru99.com/dbms-transaction-management.html)
* [ ] [Logo ACID Properties in DBMS](https://www.geeksforgeeks.org/acid-properties-in-dbms/)
* [ ] [Logo Wikipedia - ACID](https://en.wikipedia.org/wiki/ACID)
* [ ] [Logo ACID properties of transactions](https://www.ibm.com/support/knowledgecenter/en/SSGMCP_5.4.0/product-overview/acid.html)
* [ ] [Logo A Primer on ACID Transactions](https://blog.yugabyte.com/a-primer-on-acid-transactions/)
* [ ] [Logo Stackoverflow - How do ACID and database transactions work?](https://stackoverflow.com/questions/3740280/how-do-acid-and-database-transactions-work)

#### Serializability

Learn how to determine whether a schedule is serializable and leaves the database in a consistent state.

* [ ] [Logo Wikipedia - Serializability](https://en.wikipedia.org/wiki/Serializability)
* [ ] [Logo Transaction Serializability in DBMS](https://www.tutorialcup.com/dbms/transaction-serializability.htm)
* [ ] [Logo DBMS Serializability](https://beginnersbook.com/2018/12/dbms-serializability/)
* [ ] [Logo View Serializability in DBMS Transactions](https://www.geeksforgeeks.org/view-serializability-in-dbms-transactions/)
* [ ] [Logo Conflict Serializability in DBMS](https://www.geeksforgeeks.org/conflict-serializability-in-dbms/)

#### Locks

Learn about locks and when they should be used.

* [ ] [Logo Wikipedia - Record locking](https://en.wikipedia.org/wiki/Record_locking)
* [ ] [Logo Database Locking: What, why and how?](http://www.methodsandtools.com/archive/archive.php?id=83)
* [ ] [Logo A beginner’s guide to locking and lost updates](https://vladmihalcea.com/a-beginners-guide-to-database-locking-and-the-lost-update-phenomena/)
* [ ] [Logo Monitoring SQL Database Locks](https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/administration/monitor-database-locks)
* [ ] [Logo Implementation of Locking in DBMS](https://www.geeksforgeeks.org/implementation-of-locking-in-dbms/)

##### Deadlocks

Learn about deadlocks and why they should be avoided.

* [ ] [Logo Deadlock in DBMS](https://www.geeksforgeeks.org/deadlock-in-dbms/)
* [ ] [Logo Wikipedia - Deadlock](https://en.wikipedia.org/wiki/Deadlock)
* [ ] [Logo What is a Deadlock?](https://www.studytonight.com/operating-system/deadlocks)
* [ ] [Logo Oracle - Deadlocks](https://docs.oracle.com/javadb/10.8.3.0/devguide/cdevconcepts28436.html)
* [ ] [Logo Deadlock Definition](https://whatis.techtarget.com/definition/deadlock)
* [ ] [Logo Introduction to Deadlock](https://www.javatpoint.com/os-deadlocks-introduction)
* [ ] [Logo dev.to - Understanding SQL Server Deadlocks](https://dev.to/integerman/understanding-sql-server-deadlocks-2ej6)

#### Precedence graph

Learn how to create a precedence graph to test for conflict serializability of a schedule.

* [ ] [Logo Wikipedia - Precedence graph](https://en.wikipedia.org/wiki/Precedence_graph)
* [ ] [Logo Youtube - How to draw a precedence graph](https://www.youtube.com/watch?v=U3SHusK80q0)
* [ ] [Logo Precedence Graph to check Conflict Serializable Schedule](https://ashutoshtripathi.com/2017/04/15/how-to-check-conflict-serializability-using-precedence-graph-algorithm/)
* [ ] [Logo Testing for conflict serializablity](http://www.exploredatabase.com/2017/11/testing-for-conflict-serializablity-using-precedence-graph.html)
* [ ] [Logo Precedence Graph, DBMS](https://www.includehelp.com/dbms/precedence-graph.aspx)

### Servers

### Architectural Models

Learn about the fundamental architectural server models.

* [ ] [Logo Server Architecture](https://www.techopedia.com/definition/30262/server-architecture)
* [ ] [Logo Youtube - Architectural model](https://www.youtube.com/watch?v=SKtR7NVxYFA)
* [ ] [Logo Architectural Model](https://www.sciencedirect.com/topics/computer-science/architectural-model)
* [ ] [Logo Distributed Systems: Models and Design](http://www2.imm.dtu.dk/courses/02220/2018/L3/Models.pdf)

#### Client-Server

Learn about the client-server model.

* [ ] [Logo Wikipedia - Client-server model](https://en.wikipedia.org/wiki/Client%E2%80%93server_model)
* [ ] [Logo Client Server Architecture](https://cio-wiki.org/wiki/Client_Server_Architecture)
* [ ] [Logo Understanding What Client Server Architecture Is All About](https://freefeast.info/general-it-articles/client-server-architecture/)
* [ ] [Logo Wikipedia - Client-server](https://simple.wikipedia.org/wiki/Client-server)
* [ ] [Logo Client-server model (client-server architecture)](https://searchnetworking.techtarget.com/definition/client-server)
* [ ] [Logo Client-Server Model](https://www.techopedia.com/definition/18321/client-server-model)
* [ ] [Logo Learn more about Client-Server Model](https://www.sciencedirect.com/topics/computer-science/client-server-model)

#### Proxy Server

Learn about the proxy-server model.

* [ ] [Logo Wikipedia - Proxy Server](https://en.wikipedia.org/wiki/Proxy_server)
* [ ] [Logo Youtube - What is a Proxy Server?](https://www.youtube.com/watch?v=5cPIukqXe5w)
* [ ] [Logo What is a Proxy Server and How Does it Work?](https://www.varonis.com/blog/what-is-a-proxy-server/)
* [ ] [Logo Proxy Server Definition](https://whatis.techtarget.com/definition/proxy-server)
* [ ] [Logo What is a proxy server?](https://www.itpro.co.uk/server-storage/30246/what-is-a-proxy-server)

#### Peer-To-Peer

Learn about the peer-to-peer model.

* [ ] [Logo Wikipedia - Peer-to-peer](https://en.wikipedia.org/wiki/Peer-to-peer)
* [ ] [Logo Youtube - What is a Peer to Peer Network? ](https://www.youtube.com/watch?v=ie-qRQIQT4I)
* [ ] [Logo What's a Peer-to-Peer (P2P) Network?](https://www.computerworld.com/article/2588287/networking-peer-to-peer-network.html)
* [ ] [Logo Peer-to-peer (P2P)](https://searchnetworking.techtarget.com/definition/peer-to-peer)
* [ ] [Logo Make a P2P connection in 10 minutes](https://dev.to/carloslfu/make-a-p2p-connection-in-10-minutes-4b32)

### Middleware

Learn about middleware.

* [ ] [Logo Wikipedia - Middleware](https://en.wikipedia.org/wiki/Middleware)
* [ ] [Logo Middleware Definition](https://searchapparchitecture.techtarget.com/definition/middleware)
* [ ] [Logo Quora - Why is Middleware important?](https://www.quora.com/Why-is-Middleware-important)
* [ ] [Logo What is middleware?](https://www.redhat.com/en/topics/middleware/what-is-middleware)
* [ ] [Logo What is Middleware? Technology’s Go-to Middleman](https://www.talend.com/resources/what-is-middleware/)

### Request-Reply Protocol

Learn how computers communicate with eachother using the request-reply protocol.

* [ ] [Logo Wikipedia - Request Response](https://en.wikipedia.org/wiki/Request%E2%80%93response)
* [ ] [Logo Youtube - Event-Driven Architecture](https://www.youtube.com/watch?v=3bxAm3XIFmk)
* [ ] [Logo Request/Reply](https://solace.com/samples/solace-samples-jms/request-reply/)
* [ ] [Logo Enterprise Integration - Request-Reply](http://www.informit.com/articles/article.aspx?p=1398616&seqNum=4)

#### UDP

Learn about the UDP transport layer protocol.

* [ ] [Logo UDP (User Datagram Protocol)](https://searchnetworking.techtarget.com/definition/UDP-User-Datagram-Protocol)
* [ ] [Logo Wikipedia - User Datagram Protocol](https://en.wikipedia.org/wiki/User_Datagram_Protocol)
* [ ] [Logo User Datagram Protocol (UDP)](https://www.techopedia.com/definition/13460/user-datagram-protocol-udp)
* [ ] [Logo Youtube - Explained! UDP and TCP](https://www.youtube.com/watch?v=1LYqtkgtSPU)
* [ ] [Logo User Datagram Protocol](https://www.geeksforgeeks.org/user-datagram-protocol-udp/)

#### TCP

Learn about the TCP transport layer protocol.

* [ ] [Logo TCP (Transmission Control Protocol)](https://searchnetworking.techtarget.com/definition/TCP)
* [ ] [Logo Wikipedia - Transmission Control Protocol](https://en.wikipedia.org/wiki/Transmission_Control_Protocol)
* [ ] [Logo TCP/IP (Transmission Control Protocol/Internet Protocol)](https://searchnetworking.techtarget.com/definition/TCP-IP)
* [ ] [Logo Services and Segment structure in TCP](https://www.geeksforgeeks.org/services-and-segment-structure-in-tcp/)
* [ ] [Logo TCP and UDP in Transport Layer](https://www.geeksforgeeks.org/tcp-and-udp-in-transport-layer/)

### REST API

Learn how an API can be designed to be RESTful.

* [ ] [Logo Wikipeia - Representational state transfer](https://en.wikipedia.org/wiki/Representational_state_transfer)
* [ ] [Logo Learn REST: A RESTful Tutorial](https://www.restapitutorial.com/)
* [ ] [Logo Youtube - REST API concepts and examples](https://www.youtube.com/watch?v=7YcW25PHnAA)
* [ ] [Logo REST API Tutorial](https://restfulapi.net/)
* [ ] [Logo What is a REST API?](https://www.mulesoft.com/resources/api/what-is-rest-api-design)

#### CRUD

Learn about the CRUD operations.

* [ ] [Logo Wikipedia - Create, read, update and delete](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete)
* [ ] [Logo Codecademy - What is CRUD?](https://www.codecademy.com/articles/what-is-crud)
* [ ] [Logo What is the Difference between REST and CRUD?](https://www.bmc.com/blogs/rest-vs-crud-whats-the-difference/)
* [ ] [Logo Youtube - Introduction to CRUD Operations](https://www.youtube.com/watch?v=Lyi8SoVdkhM)
* [ ] [Logo REST was NEVER about CRUD](https://tyk.io/rest-never-crud/)

### Express

Learn about the Node.js web application framework called Express.

* [ ] [Logo Express](https://expressjs.com/)
* [ ] [Logo Tutorialspoint - Express Framework](https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm)
* [ ] [Logo Youtube - Express.js & Node.js Course for Beginners](https://www.youtube.com/watch?v=G8uL0lFFoN0)
* [ ] [Logo Understanding Node.js & Express.js fundamentals](https://medium.com/@LindaVivah/the-beginners-guide-understanding-node-js-express-js-fundamentals-e15493462be1)
* [ ] [Logo Wikipedia - Express.js](https://en.wikipedia.org/wiki/Express.js)

### GraphQL

Learn how to use the GraphQL query language.

* [ ] [Logo GraphQL](https://graphql.org/)
* [ ] [Logo Youtube - Introduction to GraphQL](https://www.youtube.com/watch?v=Y0lDGjwRYKw)
* [ ] [Logo Github - GraphQL Specification](https://github.com/graphql/graphql-spec)
* [ ] [Logo The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)

### GNU/Linux

Learn about the GNU/Linux operating system

* [ ] [Logo Linux and the GNU System](https://www.gnu.org/gnu/linux-and-gnu.en.html)
* [ ] [Logo Wikipedia - GNU/Linux naming controversy](https://en.wikipedia.org/wiki/GNU/Linux_naming_controversy)
* [ ] [Logo What is GNU/Linux?](https://www.debian.org/releases/stable/amd64/ch01s02.en.html)
* [ ] [Logo GNU Linux](https://searchdatacenter.techtarget.com/definition/GNU-Linux)

### Docker

Learn how to use Docker.

* [ ] [Logo Docker](https://www.docker.com/)
* [ ] [Logo Wikipedia - Docker (software)](https://en.wikipedia.org/wiki/Docker_(software))
* [ ] [Logo Docker for beginners](https://docker-curriculum.com/)
* [ ] [Logo What is Docker?](https://opensource.com/resources/what-docker)
* [ ] [Logo Get Started, Part 1: Orientation and setup](https://docs.docker.com/get-started/)

### SSH

Learn how to use SSH and learn how to connect to a device using an SSH client.

* [ ] [Logo Wikipedia - Secure Shell](https://en.wikipedia.org/wiki/Secure_Shell)
* [ ] [Logo Secure Shell (SSH)](https://searchsecurity.techtarget.com/definition/Secure-Shell)
* [ ] [Logo SSH command in Linux with Examples](https://www.geeksforgeeks.org/ssh-command-in-linux-with-examples/)
* [ ] [Logo 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)

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)

## ➤ Contributors

| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |
|:--------------------------------------------------:|:--------------------------------------------------:|
| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/readme/blob/master/CONTRIBUTING.md) |
| 🔥 | |

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)

## ➤ License

Licensed under [MIT](https://opensource.org/licenses/MIT).