{"_id":"web-skills","_rev":"2-a6d311265bbe0c77dd771595b62ef6d9","name":"web-skills","dist-tags":{"latest":"3.6.0"},"versions":{"2.3.8":{"name":"web-skills","version":"2.3.8","keywords":["web"],"author":{"name":"andreasbm"},"license":"MIT","_id":"web-skills@2.3.8","maintainers":[{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"}],"homepage":"https://github.com/andreasbm","bugs":{"url":"https://github.com/andreasbm/web-skills/issues"},"dist":{"shasum":"23bb20b4742784f55b4a2c3b410c628a0eaba1e8","tarball":"https://registry.npmjs.org/web-skills/-/web-skills-2.3.8.tgz","fileCount":27,"integrity":"sha512-kjH9e7t8TkHwj7otxDW/CE7nYJ4scI0dZDumcqLqPf8T+LTI9D/YsXTwJOVNmCcI8g1H/sUgPy1D3XMQHl/ftQ==","signatures":[{"sig":"MEUCIE006eyNMYZXyg4KpQyTqDwHLrlELrMdG53RHvOFFgnOAiEAleYKfkWAJR8VuPZ2NGODjINsxHoAedfP7pnui7X8zdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427818},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"build":"tsup"},"_npmUser":{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"},"repository":{"url":"git+https://github.com/andreasbm/web-skills.git","type":"git"},"_npmVersion":"9.6.7","description":"web-skills","directories":{},"_nodeVersion":"18.17.1","dependencies":{"pixel-peak-jos":"^2.3.8","tech-tonic-owen":"^2.9.4","code-crafterserr":"^2.3.6","syntax-savvy-jena":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/web-skills_2.3.8_1721332297235_0.27738088450076237","host":"s3://npm-registry-packages"}},"2.6.0":{"name":"web-skills","version":"2.6.0","keywords":["web"],"author":{"name":"andreasbm"},"license":"MIT","_id":"web-skills@2.6.0","maintainers":[{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"}],"homepage":"https://github.com/andreasbm","bugs":{"url":"https://github.com/andreasbm/web-skills/issues"},"dist":{"shasum":"125691c9762a8ba6e3ab70fa41608d7ae6604bd0","tarball":"https://registry.npmjs.org/web-skills/-/web-skills-2.6.0.tgz","fileCount":27,"integrity":"sha512-9gHr2V+LnKac+iLf+nftigX+hBwEpa9YSJT3opvmnQE2zH7lkFB8r7CEYKbLLY5wsLTy9ibRATYqaoe3ls4J5A==","signatures":[{"sig":"MEQCIAEAydvXXPYFkHlumgvOneOU3v2PVVcPtWf3sxHJfflKAiAXRluvX1bNzSlYaDIsFdHMHQ5A6T/u/omdyk/SX413Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427940},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"build":"tsup"},"_npmUser":{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"},"repository":{"url":"git+https://github.com/andreasbm/web-skills.git","type":"git"},"_npmVersion":"9.6.7","description":"web-skills","directories":{},"_nodeVersion":"18.17.1","dependencies":{"pixel-peak-jos":"^2.3.8","tech-tonic-owen":"^2.9.4","code-crafterserr":"^2.3.6","syntax-savvy-jena":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/web-skills_2.6.0_1721332318017_0.550984988795469","host":"s3://npm-registry-packages"}},"3.6.0":{"name":"web-skills","description":"web-skills","version":"3.6.0","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","homepage":"https://github.com/andreasbm","dependencies":{"code-crafterserr":"^2.3.6","syntax-savvy-jena":"^3.3.4","tech-tonic-owen":"^2.9.4","pixel-peak-jos":"^2.3.8"},"repository":{"type":"git","url":"git+https://github.com/andreasbm/web-skills.git"},"scripts":{"build":"tsup"},"keywords":["web"],"author":{"name":"andreasbm"},"license":"MIT","devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"bugs":{"url":"https://github.com/andreasbm/web-skills/issues"},"_id":"web-skills@3.6.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-ZWUL2nJ37B+c7sIRFauVyyCyxxN/NIV//ko9s8NmJTePBewj5LE12X9VGrcjOJ1uNsGhC4niFYXPB4+HQ6IuIw==","shasum":"763c342a59ab6254481f18d338a2ebdb18d69944","tarball":"https://registry.npmjs.org/web-skills/-/web-skills-3.6.0.tgz","fileCount":27,"unpackedSize":427940,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh5Su3QZ+IuxZBioUqi6tTBLV5/lJNXiEqQfkkKlXL3gIgXqdGAg2ipDKwLT4s2jtw1It4+B/Pf4tlKgrogfDjS2Q="}]},"_npmUser":{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"},"directories":{},"maintainers":[{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-skills_3.6.0_1721332330757_0.055382302401421946"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-18T19:51:37.234Z","modified":"2024-07-18T19:52:11.172Z","2.3.8":"2024-07-18T19:51:37.407Z","2.6.0":"2024-07-18T19:51:58.206Z","3.6.0":"2024-07-18T19:52:10.993Z"},"bugs":{"url":"https://github.com/andreasbm/web-skills/issues"},"author":{"name":"andreasbm"},"license":"MIT","homepage":"https://github.com/andreasbm","keywords":["web"],"repository":{"type":"git","url":"git+https://github.com/andreasbm/web-skills.git"},"description":"web-skills","maintainers":[{"name":"silvanaserrato744","email":"silvanaserrato744@gmail.com"}],"readme":"<!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--><h1 align=\"center\">Web Skills</h1>\r\n<p align=\"center\">\r\n\tWeb Skills is a visual overview of useful skills to learn as a web developer. Go to <a href=\"https://andreasbm.github.io/web-skills\" target=\"_blank\" aria-label=\"Link to Web Skills\">https://andreasbm.github.io/web-skills</a> to check out the visual overview or scroll through this readme to get the overview <a href=\"#-fundamentals\" target=\"_blank\" aria-label=\"Link to list of skills\">as a list</a>. If you like the project you are very welcome to <a href=\"https://github.com/andreasbm/web-skills/stargazers\" aria-label=\"Become stargazer link\">become a stargazer 🤩</a>\r\n</p> \r\n<p align=\"center\">\r\n\t<a href=\"http://andreasbm.github.io/web-skills\" target=\"_blank\">\r\n\t\t<img src=\"https://raw.githubusercontent.com/andreasbm/web-skills/master/demo.gif\" alt=\"Web Skills Demo\" width=\"800\" />\r\n\t</a>\r\n</p>\r\n<br />\r\n<details>\r\n<summary>📖 Table of Contents</summary>\r\n<br />\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\r\n\r\n- [➤ FAQ](#-faq)\r\n  - [What is Web Skills?](#what-is-web-skills)\r\n  - [How did you choose the skills?](#how-did-you-choose-the-skills)\r\n  - [How can I support you?](#how-can-i-support-you)\r\n  - [How can I get involved?](#how-can-i-get-involved)\r\n  - [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)\r\n  - [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)\r\n  - [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)\r\n  - [What does the \"experimental\" banner mean?](#what-does-the-experimental-banner-mean)\r\n  - [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)\r\n- [➤ Fundamentals](#-fundamentals)\r\n  - [HTML](#html)\r\n  - [Syntax](#syntax)\r\n    - [Basic Tags](#basic-tags)\r\n  - [Forms](#forms)\r\n  - [SEO](#seo)\r\n    - [Discoverable Content](#discoverable-content)\r\n  - [Svg](#svg)\r\n  - [Best Practices](#best-practices)\r\n  - [CSS](#css)\r\n  - [Syntax](#syntax-1)\r\n  - [Selectors](#selectors)\r\n    - [Specificity](#specificity)\r\n    - [Pseudo Selectors](#pseudo-selectors)\r\n  - [Box Model](#box-model)\r\n    - [Margin Collapsing](#margin-collapsing)\r\n  - [Colors](#colors)\r\n  - [Calc](#calc)\r\n  - [Layout](#layout)\r\n    - [Flex](#flex)\r\n    - [Grid](#grid)\r\n  - [Transforms](#transforms)\r\n    - [Animations](#animations)\r\n  - [Responsive Design](#responsive-design)\r\n    - [Media Queries](#media-queries)\r\n    - [Relative Units](#relative-units)\r\n    - [Images](#images)\r\n  - [CSS Variables](#css-variables)\r\n  - [Best Practices](#best-practices-1)\r\n  - [Javascript](#javascript)\r\n  - [Syntax](#syntax-2)\r\n    - [Spread](#spread)\r\n    - [Destructuring](#destructuring)\r\n  - [DOM](#dom)\r\n    - [DOM Manipulation](#dom-manipulation)\r\n  - [Events](#events)\r\n  - [Objects](#objects)\r\n    - [Prototype](#prototype)\r\n      - [Classes](#classes)\r\n  - [Regex](#regex)\r\n  - [Template Literals](#template-literals)\r\n  - [Promises](#promises)\r\n    - [Callbacks](#callbacks)\r\n    - [Async/await](#asyncawait)\r\n    - [Fetch](#fetch)\r\n  - [Web Animations](#web-animations)\r\n  - [Modules](#modules)\r\n  - [Intl](#intl)\r\n  - [Canvas](#canvas)\r\n  - [Documentation](#documentation)\r\n  - [Best Practices](#best-practices-2)\r\n  - [The Browser](#the-browser)\r\n  - [Standardization](#standardization)\r\n    - [W3C](#w3c)\r\n    - [TC39](#tc39)\r\n    - [WHATWG](#whatwg)\r\n    - [Specifications](#specifications)\r\n  - [Browser Engines](#browser-engines)\r\n    - [Webkit](#webkit)\r\n    - [Blink](#blink)\r\n    - [Gecko](#gecko)\r\n  - [HTTP](#http)\r\n  - [The Internet](#the-internet)\r\n  - [Polyfills](#polyfills)\r\n  - [Debugging](#debugging)\r\n    - [Developer console](#developer-console)\r\n- [➤ Accessibility](#-accessibility)\r\n  - [The why](#the-why)\r\n  - [Screen Readers](#screen-readers)\r\n  - [Accessibility tree](#accessibility-tree)\r\n    - [ARIA](#aria)\r\n    - [Accessible HTML](#accessible-html)\r\n      - [Alt text](#alt-text)\r\n    - [Accessible CSS](#accessible-css)\r\n  - [Accessible forms](#accessible-forms)\r\n  - [UI States](#ui-states)\r\n  - [Keyboard Accessibility](#keyboard-accessibility)\r\n    - [Focus](#focus)\r\n  - [Accessible Colors](#accessible-colors)\r\n  - [Laws & Policies](#laws--policies)\r\n    - [Audits](#audits)\r\n- [➤ Web Components](#-web-components)\r\n  - [Custom Elements](#custom-elements)\r\n  - [HTML Templates](#html-templates)\r\n  - [Shadow DOM](#shadow-dom)\r\n    - [Shadow Parts](#shadow-parts)\r\n    - [Slots](#slots)\r\n  - [Best practices](#best-practices)\r\n  - [Constructible Stylesheets](#constructible-stylesheets)\r\n  - [Form Participation](#form-participation)\r\n- [➤ Progressive Webapps](#-progressive-webapps)\r\n  - [API's](#apis)\r\n  - [Storage](#storage)\r\n  - [Routing](#routing)\r\n    - [History API](#history-api)\r\n  - [Service Workers](#service-workers)\r\n    - [Offline first](#offline-first)\r\n    - [Push notifications](#push-notifications)\r\n  - [Web App manifest](#web-app-manifest)\r\n  - [Add to homescreen](#add-to-homescreen)\r\n  - [Pointer Events](#pointer-events)\r\n  - [Loading Performance](#loading-performance)\r\n  - [App shell](#app-shell)\r\n  - [Render-Blocking Resources](#render-blocking-resources)\r\n  - [Compression](#compression)\r\n  - [Performance metrics](#performance-metrics)\r\n    - [Largest Contentful Paint](#largest-contentful-paint)\r\n    - [Total Blocking Time](#total-blocking-time)\r\n    - [Time to Interactive](#time-to-interactive)\r\n  - [Lazy Loading](#lazy-loading)\r\n    - [Dynamic Import](#dynamic-import)\r\n    - [Offscreen images](#offscreen-images)\r\n  - [Critical Request Chains](#critical-request-chains)\r\n  - [Tree shaking](#tree-shaking)\r\n  - [Codesplitting](#codesplitting)\r\n  - [PRPL Pattern](#prpl-pattern)\r\n  - [Resource Prioritization](#resource-prioritization)\r\n  - [Caching](#caching)\r\n  - [Rendering Performance](#rendering-performance)\r\n  - [Rendering](#rendering)\r\n  - [Event loop](#event-loop)\r\n    - [Microtask](#microtask)\r\n    - [Stack](#stack)\r\n    - [Heap](#heap)\r\n  - [RAIL Model](#rail-model)\r\n    - [requestAnimationFrame](#requestanimationframe)\r\n    - [requestIdleCallback](#requestidlecallback)\r\n  - [Critical Rendering Path](#critical-rendering-path)\r\n  - [The Pixel Pipeline](#the-pixel-pipeline)\r\n    - [Style calculations](#style-calculations)\r\n    - [Transforms](#transforms-1)\r\n    - [Paint areas](#paint-areas)\r\n    - [Layout Trashing](#layout-trashing)\r\n    - [Layers](#layers)\r\n    - [Debounce](#debounce)\r\n  - [CSS Containment](#css-containment)\r\n  - [Web Workers](#web-workers)\r\n  - [Security](#security)\r\n  - [HTTPS](#https)\r\n  - [Browser Sandbox](#browser-sandbox)\r\n  - [OWASP](#owasp)\r\n    - [Cross-Site Scripting](#cross-site-scripting)\r\n    - [Clickjacking](#clickjacking)\r\n  - [Content Security Policy](#content-security-policy)\r\n  - [Audits](#audits-1)\r\n  - [Performance budgets](#performance-budgets)\r\n  - [Lighthouse](#lighthouse)\r\n  - [Chrome DevTools](#chrome-devtools)\r\n- [➤ Build tools](#-build-tools)\r\n  - [Package Managers](#package-managers)\r\n    - [NPM](#npm)\r\n    - [Yarn](#yarn)\r\n  - [Module Bundlers](#module-bundlers)\r\n    - [Rollup](#rollup)\r\n    - [Webpack](#webpack)\r\n    - [Parcel](#parcel)\r\n    - [Snowpack](#snowpack)\r\n  - [Linters and formatters](#linters-and-formatters)\r\n    - [Prettier](#prettier)\r\n    - [ESLint](#eslint)\r\n  - [Task Runners](#task-runners)\r\n    - [NPM Scripts](#npm-scripts)\r\n  - [Transpilers](#transpilers)\r\n    - [Babel](#babel)\r\n    - [Typescript](#typescript)\r\n  - [CSS Pre-processors](#css-pre-processors)\r\n    - [SASS](#sass)\r\n    - [PostCSS](#postcss)\r\n  - [Node.js](#nodejs)\r\n- [➤ Frameworks & Libraries](#-frameworks--libraries)\r\n  - [lit-element](#lit-element)\r\n  - [Vue](#vue)\r\n  - [React](#react)\r\n  - [Angular](#angular)\r\n  - [Svelte](#svelte)\r\n  - [Stencil](#stencil)\r\n- [➤ Testing](#-testing)\r\n  - [Testing Methodologies](#testing-methodologies)\r\n    - [Unit Testing](#unit-testing)\r\n    - [Integration Testing](#integration-testing)\r\n    - [System Testing](#system-testing)\r\n    - [Acceptance Testing](#acceptance-testing)\r\n    - [Smoke Testing](#smoke-testing)\r\n    - [Performance Testing](#performance-testing)\r\n    - [Usability Testing](#usability-testing)\r\n    - [White Box Testing](#white-box-testing)\r\n    - [Black Box Testing](#black-box-testing)\r\n    - [Automated Testing](#automated-testing)\r\n    - [Manual Testing](#manual-testing)\r\n  - [Continuous integration](#continuous-integration)\r\n  - [A/B Testing](#ab-testing)\r\n  - [Test Runners](#test-runners)\r\n    - [Karma](#karma)\r\n    - [Mocha](#mocha)\r\n    - [Jasmine](#jasmine)\r\n    - [Cypress](#cypress)\r\n    - [Ava](#ava)\r\n  - [Best Practices](#best-practices-3)\r\n- [➤ Architecture & paradigms](#-architecture--paradigms)\r\n  - [Paradigms](#paradigms)\r\n  - [Programming Paradigms](#programming-paradigms)\r\n  - [Object Oriented Programming](#object-oriented-programming)\r\n    - [S.O.L.I.D](#solid)\r\n  - [Functional programming](#functional-programming)\r\n    - [Recursion](#recursion)\r\n    - [Higher-Order Functions](#higher-order-functions)\r\n    - [Currying](#currying)\r\n    - [Monads](#monads)\r\n  - [Architecture](#architecture)\r\n  - [Design Patterns](#design-patterns)\r\n    - [Singleton](#singleton)\r\n    - [Observer](#observer)\r\n    - [Prototype](#prototype-1)\r\n    - [Bridge](#bridge)\r\n    - [Proxy](#proxy)\r\n    - [Chain of responsibility](#chain-of-responsibility)\r\n    - [Constructor](#constructor)\r\n  - [CSS Methodologies](#css-methodologies)\r\n    - [BEM](#bem)\r\n    - [SMACSS](#smacss)\r\n    - [OOCSS](#oocss)\r\n- [➤ Team Collaboration](#-team-collaboration)\r\n  - [Version Control](#version-control)\r\n  - [Git](#git)\r\n    - [Github](#github)\r\n    - [Bitbucket](#bitbucket)\r\n  - [Management](#management)\r\n  - [Agile Development](#agile-development)\r\n    - [Scrum](#scrum)\r\n    - [Kanban](#kanban)\r\n  - [Waterfall Development](#waterfall-development)\r\n  - [Test Driven Development](#test-driven-development)\r\n- [➤ Design & UX](#-design--ux)\r\n  - [Color Theory](#color-theory)\r\n    - [Color Wheel](#color-wheel)\r\n  - [Typography](#typography)\r\n    - [Font Size](#font-size)\r\n    - [Line Spacing](#line-spacing)\r\n  - [C.R.A.P](#crap)\r\n    - [Contrast](#contrast)\r\n    - [Repetition](#repetition)\r\n    - [Alignment](#alignment)\r\n    - [Proximity](#proximity)\r\n  - [Consistency](#consistency)\r\n  - [Spacing](#spacing)\r\n  - [Error Handling](#error-handling)\r\n  - [Loading](#loading)\r\n  - [The Golden Ratio](#the-golden-ratio)\r\n  - [Mobile First](#mobile-first)\r\n    - [Hit Targets](#hit-targets)\r\n  - [Design Systems](#design-systems)\r\n    - [Material Design](#material-design)\r\n    - [Fluent Design](#fluent-design)\r\n  - [Accessibility](#accessibility)\r\n  - [Best Practices](#best-practices-4)\r\n- [➤ The Modern Web](#-the-modern-web)\r\n  - [Streams](#streams)\r\n    - [Media Streams](#media-streams)\r\n    - [Media Recorder](#media-recorder)\r\n    - [Web RTC](#web-rtc)\r\n    - [Screen Capture](#screen-capture)\r\n    - [Generators](#generators)\r\n  - [Speech Synthesis](#speech-synthesis)\r\n  - [Web Sockets](#web-sockets)\r\n  - [Geolocation](#geolocation)\r\n  - [Device orientation & motion](#device-orientation--motion)\r\n  - [Fullscreen](#fullscreen)\r\n  - [Variable Fonts](#variable-fonts)\r\n  - [HTTP/2](#http2)\r\n  - [Payment Request API](#payment-request-api)\r\n  - [Web Audio](#web-audio)\r\n  - [Observers](#observers)\r\n    - [Mutation Observer](#mutation-observer)\r\n    - [Intersection Observer](#intersection-observer)\r\n    - [Resize Observer](#resize-observer)\r\n    - [Performance Observer](#performance-observer)\r\n  - [Scrollsnapping](#scrollsnapping)\r\n  - [Web Assembly](#web-assembly)\r\n  - [Beacon](#beacon)\r\n  - [Clipboard](#clipboard)\r\n  - [Share](#share)\r\n  - [Performance API](#performance-api)\r\n  - [Gamepad API](#gamepad-api)\r\n  - [Speech Recognition](#speech-recognition)\r\n  - [Interaction Media Queries](#interaction-media-queries)\r\n  - [Browser Extensions](#browser-extensions)\r\n  - [Pointer Lock API](#pointer-lock-api)\r\n  - [Picture In Picture](#picture-in-picture)\r\n  - [Proxies](#proxies)\r\n  - [Houdini](#houdini)\r\n  - [Project Fugu](#project-fugu)\r\n  - [Web Authentication API](#web-authentication-api)\r\n    - [Credentials Manager API](#credentials-manager-api)\r\n  - [Native File System](#native-file-system)\r\n  - [Shape Detection](#shape-detection)\r\n  - [Web Bluetooth](#web-bluetooth)\r\n  - [Web USB](#web-usb)\r\n  - [Web XR](#web-xr)\r\n  - [Presentation](#presentation)\r\n  - [Network Information API](#network-information-api)\r\n- [➤ Algorithms & Data structures](#-algorithms--data-structures)\r\n  - [Data structures](#data-structures)\r\n  - [Arrays](#arrays)\r\n  - [Queues & Stacks](#queues--stacks)\r\n  - [Trees](#trees)\r\n    - [Binary Indexed Tree](#binary-indexed-tree)\r\n    - [Heap](#heap-1)\r\n    - [Red-black Tree](#red-black-tree)\r\n    - [Trie](#trie)\r\n    - [K-D Tree](#k-d-tree)\r\n  - [Hash Tables](#hash-tables)\r\n  - [Linked Lists](#linked-lists)\r\n  - [Graphs](#graphs)\r\n  - [Analysis](#analysis)\r\n  - [Time complexity](#time-complexity)\r\n    - [Cost model](#cost-model)\r\n    - [Order of Growth](#order-of-growth)\r\n    - [Big O notation](#big-o-notation)\r\n  - [Space Complexity](#space-complexity)\r\n  - [Algorithms](#algorithms)\r\n  - [Sorting](#sorting)\r\n    - [Insertion Sort](#insertion-sort)\r\n    - [Quicksort](#quicksort)\r\n    - [Mergesort](#mergesort)\r\n    - [Heapsort](#heapsort)\r\n  - [Searching](#searching)\r\n    - [Binary Search](#binary-search)\r\n    - [Breadth First Search](#breadth-first-search)\r\n    - [Depth First Search](#depth-first-search)\r\n    - [Dijkstra's Algorithm](#dijkstras-algorithm)\r\n    - [String Search](#string-search)\r\n  - [Hashing](#hashing)\r\n- [➤ Databases & Servers](#-databases--servers)\r\n  - [Databases](#databases)\r\n  - [Relational Databases](#relational-databases)\r\n    - [SQL](#sql)\r\n    - [MySQL](#mysql)\r\n    - [PostgreSQL](#postgresql)\r\n  - [Non-relational Databases](#non-relational-databases)\r\n    - [Redis](#redis)\r\n    - [MongoDB](#mongodb)\r\n  - [Data Modelling](#data-modelling)\r\n    - [ER Diagram](#er-diagram)\r\n    - [Keys](#keys)\r\n  - [Indexing](#indexing)\r\n  - [Data Integrity](#data-integrity)\r\n  - [Normalization](#normalization)\r\n    - [Functional Dependencies](#functional-dependencies)\r\n    - [Normal Forms](#normal-forms)\r\n  - [Transactions](#transactions)\r\n    - [ACID](#acid)\r\n    - [Serializability](#serializability)\r\n    - [Locks](#locks)\r\n      - [Deadlocks](#deadlocks)\r\n    - [Precedence graph](#precedence-graph)\r\n  - [Servers](#servers)\r\n  - [Architectural Models](#architectural-models)\r\n    - [Client-Server](#client-server)\r\n    - [Proxy Server](#proxy-server)\r\n    - [Peer-To-Peer](#peer-to-peer)\r\n  - [Middleware](#middleware)\r\n  - [Request-Reply Protocol](#request-reply-protocol)\r\n    - [UDP](#udp)\r\n    - [TCP](#tcp)\r\n  - [REST API](#rest-api)\r\n    - [CRUD](#crud)\r\n  - [Express](#express)\r\n  - [GraphQL](#graphql)\r\n  - [GNU/Linux](#gnulinux)\r\n  - [Docker](#docker)\r\n  - [SSH](#ssh)\r\n- [➤ Contributors](#-contributors)\r\n- [➤ License](#-license)\r\n</details>\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#faq)\r\n\r\n## ➤ FAQ\r\n\r\n### What is Web Skills?\r\n\r\nWeb Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.\r\n\r\n### How did you choose the skills?\r\n\r\nThe skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.\r\n\r\n### How can I support you?\r\n\r\nI am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a [stargazer](https://github.com/andreasbm/web-skills/stargazers), share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you [support me with a cup of coffee](https://www.buymeacoffee.com/AndreasMehlsen)! <3\r\n\r\n### How can I get involved?\r\n\r\nYou are welcome to get involved in any way you like. If you want to, you can go to the [issues page](https://github.com/andreasbm/web-skills/issues) and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!\r\n\r\n### How can I keep track of what skills I know?\r\n\r\nIf you scroll to the bottom of the page, you will find a button that says \"Sign in with Google\". If you click this button and sign in, you will be able to mark skills as completed.\r\n\r\n### I am overwhelmed! Help me!\r\n\r\nI totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.\r\n\r\n### Why haven't you included XYZ Technology?\r\n\r\nThe skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the [issues page](https://github.com/andreasbm/web-skills/issues).\r\n\r\n### What does the \"experimental\" banner mean?\r\n\r\nWhen a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on [MDN](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). You are very welcome to open an issue if you see a skill you believe should be marked as \"experimental\" or have the banner removed.\r\n\r\n### How can I get in contact with you?\r\n\r\nReach out to me on Twitter at [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) or take a look at [my website](https://andreasbm.github.io) if you want to learn more about what other projects I'm working on.\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#fundamentals)\r\n\r\n## ➤ Fundamentals\r\n\r\n### HTML\r\n\r\n### Syntax\r\n\r\nLearn the basics of HTML and get comfortable with it's syntax and main concepts.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /> Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)\r\n\r\n#### Basic Tags\r\n\r\nGet familiar with the basic HTML tags\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /> Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.elated.com\" alt=\"Logo\" /> Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)\r\n\r\n### Forms\r\n\r\nLearn how to design efficient forms, validating them effectively and keeping the user informed along the way.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)\r\n\r\n### SEO\r\n\r\nLearn how to make your content search-friendly.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /> web.dev - Discoverable](https://web.dev/discoverable)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /> web.dev - SEO audits](https://web.dev/lighthouse-seo)\r\n\r\n#### Discoverable Content\r\n\r\nLearn how to structure your HTML in a way that provides a rich experience when sharing it online.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /> web.dev - Easily discoverable](https://web.dev/discoverable)\r\n\r\n### Svg\r\n\r\nLearn how to work with SVG files to make graphics look crisp across all screen resolutions.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"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)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsvgontheweb.com\" alt=\"Logo\" /> SVG on the web](https://svgontheweb.com/)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing HTML.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)\r\n\r\n### CSS\r\n\r\n### Syntax\r\n\r\nLearn the basics of CSS and get comfortable with it's syntax and main concepts.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /> Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)\r\n\r\n### Selectors\r\n\r\nLearn about CSS selectors and how to effeciently target DOM elements.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)\r\n\r\n#### Specificity\r\n\r\nLearn what specificity means and how to use it when writing CSS.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /> dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspecificity.keegan.st\" alt=\"Logo\" /> Specificity Calculator](https://specificity.keegan.st/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)\r\n\r\n#### Pseudo Selectors\r\n\r\nLearn how to use pseudo selectors.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /> When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)\r\n\r\n### Box Model\r\n\r\nLearn what the CSS box model means.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"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)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\r\n\r\n#### Margin Collapsing\r\n\r\nLearn about margin collapsing.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /> Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /> What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjonathan-harrell.com\" alt=\"Logo\" /> What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)\r\n\r\n### Colors\r\n\r\nLearn the different ways you can define colors in CSS.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - <color>](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)\r\n\r\n### Calc\r\n\r\nLearn how to use the CSS calc function.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)\r\n\r\n### Layout\r\n\r\nLearn the different layout types for web.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)\r\n\r\n#### Flex\r\n\r\nLearn how to create layouts using flexbox.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflexboxfroggy.com\" alt=\"Logo\" /> Flexbox Froggy](https://flexboxfroggy.com/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fflexboxdefense.com\" alt=\"Logo\" /> Flexbox Defense](http://flexboxdefense.com)\r\n\r\n#### Grid\r\n\r\nLearn how to create layouts using CSS Grid.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcssgridgarden.com\" alt=\"Logo\" /> CSS Grid Garden](https://cssgridgarden.com/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /> Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)\r\n\r\n### Transforms\r\n\r\nLearn the different ways to transform elements through CSS.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)\r\n\r\n#### Animations\r\n\r\nLearn how to animate elements through CSS using keyframes.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)\r\n\r\n### Responsive Design\r\n\r\nLearn how to make your website responsive so it works across different screen sizes.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /> Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /> Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n#### Media Queries\r\n\r\nLearn how use media queries to build responsive layout.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)\r\n\r\n#### Relative Units\r\n\r\nLearn how to use relative units for properties such as font sizes and spacing.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fthecssworkshop.com\" alt=\"Logo\" /> The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"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)\r\n\r\n#### Images\r\n\r\nLearn how to make images responsive, always showing the best possible version for the screen size.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)\r\n\r\n### CSS Variables\r\n\r\nLearn how to define and use CSS variables.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"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)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /> CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing CSS.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspeckyboy.com\" alt=\"Logo\" /> Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)\r\n\r\n### Javascript\r\n\r\n### Syntax\r\n\r\nLearn the basics of Javascript and get comfortable with it's syntax and main concepts.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)\r\n\r\n#### Spread\r\n\r\nLearn how the spread syntax can help you when working with arrays.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /> Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /> Object rest and spread properties](https://v8.dev/features/object-rest-spread)\r\n\r\n#### Destructuring\r\n\r\nLearn how destructuring can help you when working with objects.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /> MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /> javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)\r\n\r\n### DOM\r\n\r\nLearn how the HTML is represented as objects that comprise the structure and content of a document.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"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/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flearn.co\" alt=\"Logo\" /> Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtmldom.dev\" alt=\"Logo\" /> htmldom.dev](https://htmldom.dev/)\r\n\r\n#### DOM Manipulation\r\n\r\nLearn how to query HTML elements through Javascript and manipulate them.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /> Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)\r\n\r\n### Events\r\n\r\nLearn how to dispatch and listen for events.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /> Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /> Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /> JavaScript Events Explained](https://flaviocopes.com/javascript-events/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quirksmode.org\" alt=\"Logo\" /> Event order](https://www.quirksmode.org/js/events_order.html)\r\n\r\n### Objects\r\n\r\nLearn how to create and use objects.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /> javascript.info - Objects](https://javascript.info/object)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /> W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fscotch.io\" alt=\"Logo\" /> Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)\r\n\r\n#### Prototype\r\n\r\nLearn how to extend objects and functions through its prototype.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /> Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /> dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)\r\n\r\n##### Classes\r\n\r\nLearn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /> Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)\r\n\r\n### Regex\r\n\r\nLearn how to use regex to extract information from strings.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /> javascript.info - Regular expressions](https://javascript.info/regular-expressions)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\r\n\r\n### Template Literals\r\n\r\nLearn how template literals and tagged templates and help you manipulate strings.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /> MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)\r\n\r\n### Promises\r\n\r\nLearn how to use promises and what asynchronous code means.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /> Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)\r\n\r\n#### Callbacks\r\n\r\nLearn how to use callbacks and why they are not always a good idea.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /> JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /> javascript.info - Callbacks](https://javascript.info/callbacks)\r\n\r\n#### Async/await\r\n\r\nLearn how to use the async and await keywords to make it easier to write asynchronous code.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /> javascript.info - Async/await](https://javascript.info/async-await)\r\n\r\n#### Fetch\r\n\r\nLearn how to use the fetch API to fetch data.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"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/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /> Alligator - Fetch API](https://alligator.io/js/fetch-api/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /> Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /> Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n### Web Animations\r\n\r\nLearn how to use web animations to animate elements in the DOM.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /> Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)\r\n\r\n### Modules\r\n\r\nLearn how to modularize your code into ES6 modules using the export and import keywords.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /> V8 - Modules](https://v8.dev/features/modules)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /> Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)\r\n\r\n### Intl\r\n\r\nLearn how to localize your website using the Intl API.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /> New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)\r\n\r\n### Canvas\r\n\r\nLearn how to paint graphics onto a canvas.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /> MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /> CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)\r\n\r\n### Documentation\r\n\r\nLearn how to create good documentation and why it is important.\r\n\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjsdoc.app\" alt=\"Logo\" /> Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.writethedocs.org\" alt=\"Logo\" /> A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /> Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /> The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)\r\n- [ ] [<img style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /> Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices o","readmeFilename":"README.md"}