{"id":13402366,"url":"https://github.com/andreasbm/web-skills","last_synced_at":"2025-05-14T04:04:36.196Z","repository":{"id":37750459,"uuid":"211665033","full_name":"andreasbm/web-skills","owner":"andreasbm","description":"A visual overview of useful skills to learn as a web developer","archived":false,"fork":false,"pushed_at":"2024-04-19T03:22:28.000Z","size":122455,"stargazers_count":7154,"open_issues_count":54,"forks_count":676,"subscribers_count":152,"default_branch":"master","last_synced_at":"2025-05-02T15:38:02.940Z","etag":null,"topics":["accessibility","algorithms","architecture","backend","build-tools","css","design","frameworks","html","javascript","pwa","testing","web-components"],"latest_commit_sha":null,"homepage":"https://andreasbm.github.io/web-skills/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-29T13:11:44.000Z","updated_at":"2025-05-02T04:23:03.000Z","dependencies_parsed_at":"2024-01-10T23:02:07.694Z","dependency_job_id":"e43a9837-c9f1-4936-bd13-4d8a4caea55a","html_url":"https://github.com/andreasbm/web-skills","commit_stats":{"total_commits":166,"total_committers":4,"mean_commits":41.5,"dds":0.02409638554216864,"last_synced_commit":"51e7900697911bac3a7832aa22066fe3c215b40a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/web-skills/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254067284,"owners_count":22009131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","algorithms","architecture","backend","build-tools","css","design","frameworks","html","javascript","pwa","testing","web-components"],"created_at":"2024-07-30T19:01:15.116Z","updated_at":"2025-05-14T04:04:36.126Z","avatar_url":"https://github.com/andreasbm.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/AndreasMehlsen)!"],"categories":["JavaScript","Awesome Github Repositorys","algorithms","web-components","frameworks"],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003eWeb Skills\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\tWeb Skills is a visual overview of useful skills to learn as a web developer. Go to \u003ca href=\"https://andreasbm.github.io/web-skills\" target=\"_blank\" aria-label=\"Link to Web Skills\"\u003ehttps://andreasbm.github.io/web-skills\u003c/a\u003e to check out the visual overview or scroll through this readme to get the overview \u003ca href=\"#-fundamentals\" target=\"_blank\" aria-label=\"Link to list of skills\"\u003eas a list\u003c/a\u003e. If you like the project you are very welcome to \u003ca href=\"https://github.com/andreasbm/web-skills/stargazers\" aria-label=\"Become stargazer link\"\u003ebecome a stargazer 🤩\u003c/a\u003e\n\u003c/p\u003e \n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"http://andreasbm.github.io/web-skills\" target=\"_blank\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-skills/master/demo.gif\" alt=\"Web Skills Demo\" width=\"800\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\u003cdetails\u003e\n\u003csummary\u003e📖 Table of Contents\u003c/summary\u003e\n\u003cbr /\u003e\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\n\n* [➤ FAQ](#-faq)\r\n\t* [What is Web Skills?](#what-is-web-skills)\r\n\t* [How did you choose the skills?](#how-did-you-choose-the-skills)\r\n\t* [How can I support you?](#how-can-i-support-you)\r\n\t* [How can I get involved?](#how-can-i-get-involved)\r\n\t* [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)\r\n\t* [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)\r\n\t* [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)\r\n\t* [What does the \"experimental\" banner mean?](#what-does-the-experimental-banner-mean)\r\n\t* [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)\r\n* [➤ Fundamentals](#-fundamentals)\r\n\t* [HTML](#html)\r\n\t* [Syntax](#syntax)\r\n\t\t* [Basic Tags](#basic-tags)\r\n\t* [Forms](#forms)\r\n\t* [SEO](#seo)\r\n\t\t* [Discoverable Content](#discoverable-content)\r\n\t* [Svg](#svg)\r\n\t* [Best Practices](#best-practices)\r\n\t* [CSS](#css)\r\n\t* [Syntax](#syntax-1)\r\n\t* [Selectors](#selectors)\r\n\t\t* [Specificity](#specificity)\r\n\t\t* [Pseudo Selectors](#pseudo-selectors)\r\n\t* [Box Model](#box-model)\r\n\t\t* [Margin Collapsing](#margin-collapsing)\r\n\t* [Colors](#colors)\r\n\t* [Calc](#calc)\r\n\t* [Layout](#layout)\r\n\t\t* [Flex](#flex)\r\n\t\t* [Grid](#grid)\r\n\t* [Transforms](#transforms)\r\n\t\t* [Animations](#animations)\r\n\t* [Responsive Design](#responsive-design)\r\n\t\t* [Media Queries](#media-queries)\r\n\t\t* [Relative Units](#relative-units)\r\n\t\t* [Images](#images)\r\n\t* [CSS Variables](#css-variables)\r\n\t* [Best Practices](#best-practices-1)\r\n\t* [Javascript](#javascript)\r\n\t* [Syntax](#syntax-2)\r\n\t\t* [Spread](#spread)\r\n\t\t* [Destructuring](#destructuring)\r\n\t* [DOM](#dom)\r\n\t\t* [DOM Manipulation](#dom-manipulation)\r\n\t* [Events](#events)\r\n\t* [Objects](#objects)\r\n\t\t* [Prototype](#prototype)\r\n\t\t\t* [Classes](#classes)\r\n\t* [Regex](#regex)\r\n\t* [Template Literals](#template-literals)\r\n\t* [Promises](#promises)\r\n\t\t* [Callbacks](#callbacks)\r\n\t\t* [Async/await](#asyncawait)\r\n\t\t* [Fetch](#fetch)\r\n\t* [Web Animations](#web-animations)\r\n\t* [Modules](#modules)\r\n\t* [Intl](#intl)\r\n\t* [Canvas](#canvas)\r\n\t* [Documentation](#documentation)\r\n\t* [Best Practices](#best-practices-2)\r\n\t* [The Browser](#the-browser)\r\n\t* [Standardization](#standardization)\r\n\t\t* [W3C](#w3c)\r\n\t\t* [TC39](#tc39)\r\n\t\t* [WHATWG](#whatwg)\r\n\t\t* [Specifications](#specifications)\r\n\t* [Browser Engines](#browser-engines)\r\n\t\t* [Webkit](#webkit)\r\n\t\t* [Blink](#blink)\r\n\t\t* [Gecko](#gecko)\r\n\t* [HTTP](#http)\r\n\t* [The Internet](#the-internet)\r\n\t* [Polyfills](#polyfills)\r\n\t* [Debugging](#debugging)\r\n\t\t* [Developer console](#developer-console)\r\n* [➤ Accessibility](#-accessibility)\r\n\t* [The why](#the-why)\r\n\t* [Screen Readers](#screen-readers)\r\n\t* [Accessibility tree](#accessibility-tree)\r\n\t\t* [ARIA](#aria)\r\n\t\t* [Accessible HTML](#accessible-html)\r\n\t\t\t* [Alt text](#alt-text)\r\n\t\t* [Accessible CSS](#accessible-css)\r\n\t* [Accessible forms](#accessible-forms)\r\n\t* [UI States](#ui-states)\r\n\t* [Keyboard Accessibility](#keyboard-accessibility)\r\n\t\t* [Focus](#focus)\r\n\t* [Accessible Colors](#accessible-colors)\r\n\t* [Laws \u0026 Policies](#laws--policies)\r\n\t\t* [Audits](#audits)\r\n* [➤ Web Components](#-web-components)\r\n\t* [Custom Elements](#custom-elements)\r\n\t* [HTML Templates](#html-templates)\r\n\t* [Shadow DOM](#shadow-dom)\r\n\t\t* [Shadow Parts](#shadow-parts)\r\n\t\t* [Slots](#slots)\r\n\t* [Best practices](#best-practices)\r\n\t* [Constructible Stylesheets](#constructible-stylesheets)\r\n\t* [Form Participation](#form-participation)\r\n* [➤ Progressive Webapps](#-progressive-webapps)\r\n\t* [API's](#apis)\r\n\t* [Storage](#storage)\r\n\t* [Routing](#routing)\r\n\t\t* [History API](#history-api)\r\n\t* [Service Workers](#service-workers)\r\n\t\t* [Offline first](#offline-first)\r\n\t\t* [Push notifications](#push-notifications)\r\n\t* [Web App manifest](#web-app-manifest)\r\n\t* [Add to homescreen](#add-to-homescreen)\r\n\t* [Pointer Events](#pointer-events)\r\n\t* [Loading Performance](#loading-performance)\r\n\t* [App shell](#app-shell)\r\n\t* [Render-Blocking Resources](#render-blocking-resources)\r\n\t* [Compression](#compression)\r\n\t* [Performance metrics](#performance-metrics)\r\n\t\t* [Largest Contentful Paint](#largest-contentful-paint)\r\n\t\t* [Total Blocking Time](#total-blocking-time)\r\n\t\t* [Time to Interactive](#time-to-interactive)\r\n\t* [Lazy Loading](#lazy-loading)\r\n\t\t* [Dynamic Import](#dynamic-import)\r\n\t\t* [Offscreen images](#offscreen-images)\r\n\t* [Critical Request Chains](#critical-request-chains)\r\n\t* [Tree shaking](#tree-shaking)\r\n\t* [Codesplitting](#codesplitting)\r\n\t* [PRPL Pattern](#prpl-pattern)\r\n\t* [Resource Prioritization](#resource-prioritization)\r\n\t* [Caching](#caching)\r\n\t* [Rendering Performance](#rendering-performance)\r\n\t* [Rendering](#rendering)\r\n\t* [Event loop](#event-loop)\r\n\t\t* [Microtask](#microtask)\r\n\t\t* [Stack](#stack)\r\n\t\t* [Heap](#heap)\r\n\t* [RAIL Model](#rail-model)\r\n\t\t* [requestAnimationFrame](#requestanimationframe)\r\n\t\t* [requestIdleCallback](#requestidlecallback)\r\n\t* [Critical Rendering Path](#critical-rendering-path)\r\n\t* [The Pixel Pipeline](#the-pixel-pipeline)\r\n\t\t* [Style calculations](#style-calculations)\r\n\t\t* [Transforms](#transforms-1)\r\n\t\t* [Paint areas](#paint-areas)\r\n\t\t* [Layout Trashing](#layout-trashing)\r\n\t\t* [Layers](#layers)\r\n\t\t* [Debounce](#debounce)\r\n\t* [CSS Containment](#css-containment)\r\n\t* [Web Workers](#web-workers)\r\n\t* [Security](#security)\r\n\t* [HTTPS](#https)\r\n\t* [Browser Sandbox](#browser-sandbox)\r\n\t* [OWASP](#owasp)\r\n\t\t* [Cross-Site Scripting](#cross-site-scripting)\r\n\t\t* [Clickjacking](#clickjacking)\r\n\t* [Content Security Policy](#content-security-policy)\r\n\t* [Audits](#audits-1)\r\n\t* [Performance budgets](#performance-budgets)\r\n\t* [Lighthouse](#lighthouse)\r\n\t* [Chrome DevTools](#chrome-devtools)\r\n* [➤ Build tools](#-build-tools)\r\n\t* [Package Managers](#package-managers)\r\n\t\t* [NPM](#npm)\r\n\t\t* [Yarn](#yarn)\r\n\t* [Module Bundlers](#module-bundlers)\r\n\t\t* [Rollup](#rollup)\r\n\t\t* [Webpack](#webpack)\r\n\t\t* [Parcel](#parcel)\r\n\t\t* [Snowpack](#snowpack)\r\n\t* [Linters and formatters](#linters-and-formatters)\r\n\t\t* [Prettier](#prettier)\r\n\t\t* [ESLint](#eslint)\r\n\t* [Task Runners](#task-runners)\r\n\t\t* [NPM Scripts](#npm-scripts)\r\n\t* [Transpilers](#transpilers)\r\n\t\t* [Babel](#babel)\r\n\t\t* [Typescript](#typescript)\r\n\t* [CSS Pre-processors](#css-pre-processors)\r\n\t\t* [SASS](#sass)\r\n\t\t* [PostCSS](#postcss)\r\n\t* [Node.js](#nodejs)\r\n* [➤ Frameworks \u0026 Libraries](#-frameworks--libraries)\r\n\t* [lit-element](#lit-element)\r\n\t* [Vue](#vue)\r\n\t* [React](#react)\r\n\t* [Angular](#angular)\r\n\t* [Svelte](#svelte)\r\n\t* [Stencil](#stencil)\r\n* [➤ Testing](#-testing)\r\n\t* [Testing Methodologies](#testing-methodologies)\r\n\t\t* [Unit Testing](#unit-testing)\r\n\t\t* [Integration Testing](#integration-testing)\r\n\t\t* [System Testing](#system-testing)\r\n\t\t* [Acceptance Testing](#acceptance-testing)\r\n\t\t* [Smoke Testing](#smoke-testing)\r\n\t\t* [Performance Testing](#performance-testing)\r\n\t\t* [Usability Testing](#usability-testing)\r\n\t\t* [White Box Testing](#white-box-testing)\r\n\t\t* [Black Box Testing](#black-box-testing)\r\n\t\t* [Automated Testing](#automated-testing)\r\n\t\t* [Manual Testing](#manual-testing)\r\n\t* [Continuous integration](#continuous-integration)\r\n\t* [A/B Testing](#ab-testing)\r\n\t* [Test Runners](#test-runners)\r\n\t\t* [Karma](#karma)\r\n\t\t* [Mocha](#mocha)\r\n\t\t* [Jasmine](#jasmine)\r\n\t\t* [Cypress](#cypress)\r\n\t\t* [Ava](#ava)\r\n\t* [Best Practices](#best-practices-3)\r\n* [➤ Architecture \u0026 paradigms](#-architecture--paradigms)\r\n\t* [Paradigms](#paradigms)\r\n\t* [Programming Paradigms](#programming-paradigms)\r\n\t* [Object Oriented Programming](#object-oriented-programming)\r\n\t\t* [S.O.L.I.D](#solid)\r\n\t* [Functional programming](#functional-programming)\r\n\t\t* [Recursion](#recursion)\r\n\t\t* [Higher-Order Functions](#higher-order-functions)\r\n\t\t* [Currying](#currying)\r\n\t\t* [Monads](#monads)\r\n\t* [Architecture](#architecture)\r\n\t* [Design Patterns](#design-patterns)\r\n\t\t* [Singleton](#singleton)\r\n\t\t* [Observer](#observer)\r\n\t\t* [Prototype](#prototype-1)\r\n\t\t* [Bridge](#bridge)\r\n\t\t* [Proxy](#proxy)\r\n\t\t* [Chain of responsibility](#chain-of-responsibility)\r\n\t\t* [Constructor](#constructor)\r\n\t* [CSS Methodologies](#css-methodologies)\r\n\t\t* [BEM](#bem)\r\n\t\t* [SMACSS](#smacss)\r\n\t\t* [OOCSS](#oocss)\r\n* [➤ Team Collaboration](#-team-collaboration)\r\n\t* [Version Control](#version-control)\r\n\t* [Git](#git)\r\n\t\t* [Github](#github)\r\n\t\t* [Bitbucket](#bitbucket)\r\n\t* [Management](#management)\r\n\t* [Agile Development](#agile-development)\r\n\t\t* [Scrum](#scrum)\r\n\t\t* [Kanban](#kanban)\r\n\t* [Waterfall Development](#waterfall-development)\r\n\t* [Test Driven Development](#test-driven-development)\r\n* [➤ Design \u0026 UX](#-design--ux)\r\n\t* [Color Theory](#color-theory)\r\n\t\t* [Color Wheel](#color-wheel)\r\n\t* [Typography](#typography)\r\n\t\t* [Font Size](#font-size)\r\n\t\t* [Line Spacing](#line-spacing)\r\n\t* [C.R.A.P](#crap)\r\n\t\t* [Contrast](#contrast)\r\n\t\t* [Repetition](#repetition)\r\n\t\t* [Alignment](#alignment)\r\n\t\t* [Proximity](#proximity)\r\n\t* [Consistency](#consistency)\r\n\t* [Spacing](#spacing)\r\n\t* [Error Handling](#error-handling)\r\n\t* [Loading](#loading)\r\n\t* [The Golden Ratio](#the-golden-ratio)\r\n\t* [Mobile First](#mobile-first)\r\n\t\t* [Hit Targets](#hit-targets)\r\n\t* [Design Systems](#design-systems)\r\n\t\t* [Material Design](#material-design)\r\n\t\t* [Fluent Design](#fluent-design)\r\n\t* [Accessibility](#accessibility)\r\n\t* [Best Practices](#best-practices-4)\r\n* [➤ The Modern Web](#-the-modern-web)\r\n\t* [Streams](#streams)\r\n\t\t* [Media Streams](#media-streams)\r\n\t\t* [Media Recorder](#media-recorder)\r\n\t\t* [Web RTC](#web-rtc)\r\n\t\t* [Screen Capture](#screen-capture)\r\n\t\t* [Generators](#generators)\r\n\t* [Speech Synthesis](#speech-synthesis)\r\n\t* [Web Sockets](#web-sockets)\r\n\t* [Geolocation](#geolocation)\r\n\t* [Device orientation \u0026 motion](#device-orientation--motion)\r\n\t* [Fullscreen](#fullscreen)\r\n\t* [Variable Fonts](#variable-fonts)\r\n\t* [HTTP/2](#http2)\r\n\t* [Payment Request API](#payment-request-api)\r\n\t* [Web Audio](#web-audio)\r\n\t* [Observers](#observers)\r\n\t\t* [Mutation Observer](#mutation-observer)\r\n\t\t* [Intersection Observer](#intersection-observer)\r\n\t\t* [Resize Observer](#resize-observer)\r\n\t\t* [Performance Observer](#performance-observer)\r\n\t* [Scrollsnapping](#scrollsnapping)\r\n\t* [Web Assembly](#web-assembly)\r\n\t* [Beacon](#beacon)\r\n\t* [Clipboard](#clipboard)\r\n\t* [Share](#share)\r\n\t* [Performance API](#performance-api)\r\n\t* [Gamepad API](#gamepad-api)\r\n\t* [Speech Recognition](#speech-recognition)\r\n\t* [Interaction Media Queries](#interaction-media-queries)\r\n\t* [Browser Extensions](#browser-extensions)\r\n\t* [Pointer Lock API](#pointer-lock-api)\r\n\t* [Picture In Picture](#picture-in-picture)\r\n\t* [Proxies](#proxies)\r\n\t* [Houdini](#houdini)\r\n\t* [Project Fugu](#project-fugu)\r\n\t* [Web Authentication API](#web-authentication-api)\r\n\t\t* [Credentials Manager API](#credentials-manager-api)\r\n\t* [Native File System](#native-file-system)\r\n\t* [Shape Detection](#shape-detection)\r\n\t* [Web Bluetooth](#web-bluetooth)\r\n\t* [Web USB](#web-usb)\r\n\t* [Web XR](#web-xr)\r\n\t* [Presentation](#presentation)\r\n\t* [Network Information API](#network-information-api)\r\n* [➤ Algorithms \u0026 Data structures](#-algorithms--data-structures)\r\n\t* [Data structures](#data-structures)\r\n\t* [Arrays](#arrays)\r\n\t* [Queues \u0026 Stacks](#queues--stacks)\r\n\t* [Trees](#trees)\r\n\t\t* [Binary Indexed Tree](#binary-indexed-tree)\r\n\t\t* [Heap](#heap-1)\r\n\t\t* [Red-black Tree](#red-black-tree)\r\n\t\t* [Trie](#trie)\r\n\t\t* [K-D Tree](#k-d-tree)\r\n\t* [Hash Tables](#hash-tables)\r\n\t* [Linked Lists](#linked-lists)\r\n\t* [Graphs](#graphs)\r\n\t* [Analysis](#analysis)\r\n\t* [Time complexity](#time-complexity)\r\n\t\t* [Cost model](#cost-model)\r\n\t\t* [Order of Growth](#order-of-growth)\r\n\t\t* [Big O notation](#big-o-notation)\r\n\t* [Space Complexity](#space-complexity)\r\n\t* [Algorithms](#algorithms)\r\n\t* [Sorting](#sorting)\r\n\t\t* [Insertion Sort](#insertion-sort)\r\n\t\t* [Quicksort](#quicksort)\r\n\t\t* [Mergesort](#mergesort)\r\n\t\t* [Heapsort](#heapsort)\r\n\t* [Searching](#searching)\r\n\t\t* [Binary Search](#binary-search)\r\n\t\t* [Breadth First Search](#breadth-first-search)\r\n\t\t* [Depth First Search](#depth-first-search)\r\n\t\t* [Dijkstra's Algorithm](#dijkstras-algorithm)\r\n\t\t* [String Search](#string-search)\r\n\t* [Hashing](#hashing)\r\n* [➤ Databases \u0026 Servers](#-databases--servers)\r\n\t* [Databases](#databases)\r\n\t* [Relational Databases](#relational-databases)\r\n\t\t* [SQL](#sql)\r\n\t\t* [MySQL](#mysql)\r\n\t\t* [PostgreSQL](#postgresql)\r\n\t* [Non-relational Databases](#non-relational-databases)\r\n\t\t* [Redis](#redis)\r\n\t\t* [MongoDB](#mongodb)\r\n\t* [Data Modelling](#data-modelling)\r\n\t\t* [ER Diagram](#er-diagram)\r\n\t\t* [Keys](#keys)\r\n\t* [Indexing](#indexing)\r\n\t* [Data Integrity](#data-integrity)\r\n\t* [Normalization](#normalization)\r\n\t\t* [Functional Dependencies](#functional-dependencies)\r\n\t\t* [Normal Forms](#normal-forms)\r\n\t* [Transactions](#transactions)\r\n\t\t* [ACID](#acid)\r\n\t\t* [Serializability](#serializability)\r\n\t\t* [Locks](#locks)\r\n\t\t\t* [Deadlocks](#deadlocks)\r\n\t\t* [Precedence graph](#precedence-graph)\r\n\t* [Servers](#servers)\r\n\t* [Architectural Models](#architectural-models)\r\n\t\t* [Client-Server](#client-server)\r\n\t\t* [Proxy Server](#proxy-server)\r\n\t\t* [Peer-To-Peer](#peer-to-peer)\r\n\t* [Middleware](#middleware)\r\n\t* [Request-Reply Protocol](#request-reply-protocol)\r\n\t\t* [UDP](#udp)\r\n\t\t* [TCP](#tcp)\r\n\t* [REST API](#rest-api)\r\n\t\t* [CRUD](#crud)\r\n\t* [Express](#express)\r\n\t* [GraphQL](#graphql)\r\n\t* [GNU/Linux](#gnulinux)\r\n\t* [Docker](#docker)\r\n\t* [SSH](#ssh)\r\n* [➤ Contributors](#-contributors)\r\n* [➤ License](#-license)\n\u003c/details\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#faq)\r\n\r\n## ➤ FAQ\n\n### What is Web Skills?\n\nWeb Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.\n\n### How did you choose the skills?\n\t\t\nThe skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.\n\n### How can I support you?\n\nI am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a [stargazer](https://github.com/andreasbm/web-skills/stargazers), share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you [support me with a cup of coffee](https://www.buymeacoffee.com/AndreasMehlsen)! \u003c3\n\n### How can I get involved?\n\nYou are welcome to get involved in any way you like. If you want to, you can go to the [issues page](https://github.com/andreasbm/web-skills/issues) and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!\n\n### How can I keep track of what skills I know?\n\nIf you scroll to the bottom of the page, you will find a button that says \"Sign in with Google\". If you click this button and sign in, you will be able to mark skills as completed.\n\n### I am overwhelmed! Help me!\n\nI totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.\n\n### Why haven't you included XYZ Technology?\n\nThe skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the [issues page](https://github.com/andreasbm/web-skills/issues).\n\n### What does the \"experimental\" banner mean?\n\nWhen a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on [MDN](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). You are very welcome to open an issue if you see a skill you believe should be marked as \"experimental\" or have the banner removed.\n\n### How can I get in contact with you?\n\nReach out to me on Twitter at [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) or take a look at [my website](https://andreasbm.github.io) if you want to learn more about what other projects I'm working on.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#fundamentals)\r\n\r\n## ➤ Fundamentals\r\n\r\n### HTML\r\n\r\n### Syntax\r\n\r\nLearn the basics of HTML and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.codecademy.com\" alt=\"Logo\" /\u003e Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)\r\n\r\n#### Basic Tags\r\n\r\nGet familiar with the basic HTML tags\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.tutorialspoint.com\" alt=\"Logo\" /\u003e Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.elated.com\" alt=\"Logo\" /\u003e Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)\r\n\r\n### Forms\r\n\r\nLearn how to design efficient forms, validating them effectively and keeping the user informed along the way.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)\r\n\r\n### SEO\r\n\r\nLearn how to make your content search-friendly.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Discoverable](https://web.dev/discoverable)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - SEO audits](https://web.dev/lighthouse-seo)\r\n\r\n#### Discoverable Content\r\n\r\nLearn how to structure your HTML in a way that provides a rich experience when sharing it online.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Easily discoverable](https://web.dev/discoverable)\r\n\r\n### Svg\r\n\r\nLearn how to work with SVG files to make graphics look crisp across all screen resolutions.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Adding vector graphics to the Web](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fsvgontheweb.com\" alt=\"Logo\" /\u003e SVG on the web](https://svgontheweb.com/)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing HTML.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)\r\n\r\n\r\n### CSS\r\n\r\n### Syntax\r\n\r\nLearn the basics of CSS and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)\r\n\r\n### Selectors\r\n\r\nLearn about CSS selectors and how to effeciently target DOM elements.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)\r\n\r\n#### Specificity\r\n\r\nLearn what specificity means and how to use it when writing CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspecificity.keegan.st\" alt=\"Logo\" /\u003e Specificity Calculator](https://specificity.keegan.st/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)\r\n\r\n#### Pseudo Selectors\r\n\r\nLearn how to use pseudo selectors.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /\u003e When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)\r\n\r\n### Box Model\r\n\r\nLearn what the CSS box model means.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to the CSS basic box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\r\n\r\n#### Margin Collapsing\r\n\r\nLearn about margin collapsing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fbitsofco.de\" alt=\"Logo\" /\u003e What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjonathan-harrell.com\" alt=\"Logo\" /\u003e What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)\r\n\r\n### Colors\r\n\r\nLearn the different ways you can define colors in CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - \u003ccolor\u003e](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)\r\n\r\n### Calc\r\n\r\nLearn how to use the CSS calc function.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)\r\n\r\n### Layout\r\n\r\nLearn the different layout types for web.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)\r\n\r\n#### Flex\r\n\r\nLearn how to create layouts using flexbox.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflexboxfroggy.com\" alt=\"Logo\" /\u003e Flexbox Froggy](https://flexboxfroggy.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fflexboxdefense.com\" alt=\"Logo\" /\u003e Flexbox Defense](http://flexboxdefense.com)\r\n\r\n#### Grid\r\n\r\nLearn how to create layouts using CSS Grid.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcssgridgarden.com\" alt=\"Logo\" /\u003e CSS Grid Garden](https://cssgridgarden.com/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)\r\n\r\n### Transforms\r\n\r\nLearn the different ways to transform elements through CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)\r\n\r\n#### Animations\r\n\r\nLearn how to animate elements through CSS using keyframes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)\r\n\r\n### Responsive Design\r\n\r\nLearn how to make your website responsive so it works across different screen sizes.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n#### Media Queries\r\n\r\nLearn how use media queries to build responsive layout.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - CSS Media Queries \u0026 Using Available Space](https://css-tricks.com/css-media-queries/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)\r\n\r\n#### Relative Units\r\n\r\nLearn how to use relative units for properties such as font sizes and spacing.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fthecssworkshop.com\" alt=\"Logo\" /\u003e The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - 15 CSS Relative units](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m)\r\n\r\n#### Images\r\n\r\nLearn how to make images responsive, always showing the best possible version for the screen size.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)\r\n\r\n### CSS Variables\r\n\r\nLearn how to define and use CSS variables.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing CSS.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspeckyboy.com\" alt=\"Logo\" /\u003e Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)\r\n\r\n\r\n### Javascript\r\n\r\n### Syntax\r\n\r\nLearn the basics of Javascript and get comfortable with it's syntax and main concepts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)\r\n\r\n#### Spread\r\n\r\nLearn how the spread syntax can help you when working with arrays.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e Object rest and spread properties](https://v8.dev/features/object-rest-spread)\r\n\r\n#### Destructuring\r\n\r\nLearn how destructuring can help you when working with objects.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /\u003e MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)\r\n\r\n### DOM\r\n\r\nLearn how the HTML is represented as objects that comprise the structure and content of a document.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - What's the DOM](https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Flearn.co\" alt=\"Logo\" /\u003e Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtmldom.dev\" alt=\"Logo\" /\u003e htmldom.dev](https://htmldom.dev/)\r\n\r\n#### DOM Manipulation\r\n\r\nLearn how to query HTML elements through Javascript and manipulate them.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)\r\n\r\n### Events\r\n\r\nLearn how to dispatch and listen for events.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e JavaScript Events Explained](https://flaviocopes.com/javascript-events/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.quirksmode.org\" alt=\"Logo\" /\u003e Event order](https://www.quirksmode.org/js/events_order.html)\r\n\r\n### Objects\r\n\r\nLearn how to create and use objects.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Objects](https://javascript.info/object)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fscotch.io\" alt=\"Logo\" /\u003e Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)\r\n\r\n#### Prototype\r\n\r\nLearn how to extend objects and functions through its prototype.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)\r\n\r\n##### Classes\r\n\r\nLearn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)\r\n\r\n### Regex\r\n\r\nLearn how to use regex to extract information from strings.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Regular expressions](https://javascript.info/regular-expressions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\r\n\r\n### Template Literals\r\n\r\nLearn how template literals and tagged templates and help you manipulate strings.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhacks.mozilla.org\" alt=\"Logo\" /\u003e MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)\r\n\r\n### Promises\r\n\r\nLearn how to use promises and what asynchronous code means.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)\r\n\r\n#### Callbacks\r\n\r\nLearn how to use callbacks and why they are not always a good idea.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Callbacks](https://javascript.info/callbacks)\r\n\r\n#### Async/await\r\n\r\nLearn how to use the async and await keywords to make it easier to write asynchronous code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Async/await](https://javascript.info/async-await)\r\n\r\n#### Fetch\r\n\r\nLearn how to use the fetch API to fetch data.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Fetch practical guide](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falligator.io\" alt=\"Logo\" /\u003e Alligator - Fetch API](https://alligator.io/js/fetch-api/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodelabs.developers.google.com\" alt=\"Logo\" /\u003e Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)\r\n\r\n### Web Animations\r\n\r\nLearn how to use web animations to animate elements in the DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)\r\n\r\n### Modules\r\n\r\nLearn how to modularize your code into ES6 modules using the export and import keywords.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fv8.dev\" alt=\"Logo\" /\u003e V8 - Modules](https://v8.dev/features/modules)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)\r\n\r\n### Intl\r\n\r\nLearn how to localize your website using the Intl API.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.bitsrc.io\" alt=\"Logo\" /\u003e New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)\r\n\r\n### Canvas\r\n\r\nLearn how to paint graphics onto a canvas.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)\r\n\r\n### Documentation\r\n\r\nLearn how to create good documentation and why it is important.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjsdoc.app\" alt=\"Logo\" /\u003e Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.writethedocs.org\" alt=\"Logo\" /\u003e A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhackernoon.com\" alt=\"Logo\" /\u003e Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)\r\n\r\n### Best Practices\r\n\r\nLearn the best practices of writing Javascript.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - JavaScript guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Airbnb - JavaScript Style Guide](https://github.com/airbnb/javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcodeburst.io\" alt=\"Logo\" /\u003e 5 JavaScript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3schools.com\" alt=\"Logo\" /\u003e JavaScript Style Guide and Coding Conventions](https://www.w3schools.com/js/js_conventions.asp)\r\n\r\n\r\n### The Browser\r\n\r\n### Standardization\r\n\r\nLearn why web standards are important and how new specifications are standardised.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Web Standards](https://en.wikipedia.org/wiki/Web_standards)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.elcom.com.au\" alt=\"Logo\" /\u003e What Are Web Standards?](https://www.elcom.com.au/resources/blog/web-standards)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Frobertnyman.com\" alt=\"Logo\" /\u003e A Comprehensive Explanation of Web Standards](https://robertnyman.com/2007/05/21/what-are-web-standards-a-comprehensive-explanation-of-what-is-comprised-in-the-term/)\r\n\r\n#### W3C\r\n\r\nLearn what W3C are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - About](https://www.w3.org/standards/about.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Standards](https://www.w3.org/standards/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwebdiy.org\" alt=\"Logo\" /\u003e W3C - Process](http://webdiy.org/w3c/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Web Standards Guide](https://www.smashingmagazine.com/2019/01/web-standards-guide/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Groups](https://www.w3.org/community/groups/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e The W3C At Twenty-Five](https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/)\r\n\r\n#### TC39\r\n\r\nLearn what TC39 are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2F2ality.com\" alt=\"Logo\" /\u003e The TC39 process for ECMAScript features](https://2ality.com/2015/11/tc39-process.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Github - TC39](https://github.com/tc39)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.ecma-international.org\" alt=\"Logo\" /\u003e Ecma International - Programme of work](https://www.ecma-international.org/memento/tc39.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Ecma International](https://en.wikipedia.org/wiki/Ecma_International)\r\n\r\n#### WHATWG\r\n\r\nLearn what WHATWG are doing and how they are moving the web forward.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwhatwg.org\" alt=\"Logo\" /\u003e WHATWG - FAQ](https://whatwg.org/faq)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fspec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - Standards](https://spec.whatwg.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdzone.com\" alt=\"Logo\" /\u003e W3C vs. WHATWG HTML5 Specs](https://dzone.com/articles/w3c-vs-whatwg-html5-specs)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fhtml.spec.whatwg.org\" alt=\"Logo\" /\u003e WHATWG - HTML](https://html.spec.whatwg.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - WHATWG](https://en.wikipedia.org/wiki/WHATWG)\r\n\r\n#### Specifications\r\n\r\nLearn how to read specifications developed by the standards committees.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftimothygu.me\" alt=\"Logo\" /\u003e How to Read the ECMAScript Specification](https://timothygu.me/es-howto/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Falistapart.com\" alt=\"Logo\" /\u003e How to Read W3C Specs](https://alistapart.com/article/readspec/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.chenhuijing.com\" alt=\"Logo\" /\u003e Learning CSS by reading specs](https://www.chenhuijing.com/blog/learning-css-by-reading-specifications/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e Understanding the CSS Specifications](https://www.w3.org/Style/CSS/read.en.html)\r\n\r\n### Browser Engines\r\n\r\nLearn what a browser engine is and get an overview of the browser landscape and market share.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Medium - Browser Engines](https://medium.com/@jonbiro/browser-engines-chromium-v8-blink-gecko-webkit-98d6b0490968)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Comparison](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.html5rocks.com\" alt=\"Logo\" /\u003e HTML5 Rocks - How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Ftextslashplain.com\" alt=\"Logo\" /\u003e Demystifying Browsers](https://textslashplain.com/2020/02/09/demystifying-browsers/)\r\n\r\n#### Webkit\r\n\r\nLearn about the Webkit browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebkit.org\" alt=\"Logo\" /\u003e Webkit](https://webkit.org/)\r\n\r\n#### Blink\r\n\r\nLearn about the Blink browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine))\r\n\r\n#### Gecko\r\n\r\nLearn about the Gecko browser engine.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Gecko](https://en.wikipedia.org/wiki/Gecko_(software))\r\n\r\n### HTTP\r\n\r\nLearn how data is distributed through the HTTP protocol.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - HTTP Glossary](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org\" alt=\"Logo\" /\u003e Wikipedia - Hypertext Transfer Protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)\r\n\r\n### The Internet\r\n\r\nLearn the basics of how the internet works.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.explainthatstuff.com\" alt=\"Logo\" /\u003e Explain That Stuff - Internet](https://www.explainthatstuff.com/internet.html)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.stanford.edu\" alt=\"Logo\" /\u003e Stanford - How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fblog.hubspot.com\" alt=\"Logo\" /\u003e How the Internet Works](https://blog.hubspot.com/marketing/how-the-internet-works)\r\n\r\n### Polyfills\r\n\r\nLearn how it is possible to use polyfills to increase the browser support for your website.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e Introduction To Polyfills \u0026 Their Usage](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-polyfills-their-usage-9cd6db4b1923)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Polyfills and the evolution of the Web](https://www.w3.org/2001/tag/doc/polyfills/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fcaniuse.com\" alt=\"Logo\" /\u003e Can I use](http://caniuse.com/)\r\n\r\n### Debugging\r\n\r\nLearn about the basics concepts of debugging.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Cross browser testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmedium.com\" alt=\"Logo\" /\u003e 5 things to remember for better debugging of your code](https://medium.com/dev-bits/5-things-to-remember-for-better-debugging-of-your-code-94b9bc3fb3df)\r\n\r\n#### Developer console\r\n\r\nLearn how to use the developer console to debug your code.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/api)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Get Started with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Debugging HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e javascript.info - Debugging in Chrome](https://javascript.info/debugging-chrome)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fraygun.com\" alt=\"Logo\" /\u003e 14 JavaScript debugging tips](https://raygun.com/javascript-debugging-tips)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fflaviocopes.com\" alt=\"Logo\" /\u003e The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Chrome DevTools 101](https://www.youtube.com/watch?v=H0XScE08hy8)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Chrome Devs - Quickly monitor events](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - 14 Must Know Chrome Dev Tools Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#accessibility)\r\n\r\n## ➤ Accessibility\r\n\r\n### The why\r\n\r\nLearn what accessibility is and why it is important.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility Fundamentals](https://developers.google.com/web/fundamentals/accessibility/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fudacity.github.io\" alt=\"Logo\" /\u003e Udacity - Chromevox Lite](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e Dev.to - Why Accessibility Matters](https://dev.to/lhoffmanwg1/why-accessibility-matters-39nl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.abilitynet.org.uk\" alt=\"Logo\" /\u003e Abilitynet - Why Accessibility Matters](https://www.abilitynet.org.uk/why-accessibility-matters)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.udacity.com\" alt=\"Logo\" /\u003e Udacity - Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.youtube.com\" alt=\"Logo\" /\u003e Youtube - Headings, Landmarks, and Tabs](https://www.youtube.com/watch?v=HE2R86EZPMA)\r\n\r\n### Screen Readers\r\n\r\nLearn about assistive technology such as screen readers that reads sections of the page aloud based on the current focus.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - Screen Reader Myths](https://a11yproject.com/posts/people-who-use-screen-readers-dont-use-javascript/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - NVDA Screen Reader](https://a11yproject.com/posts/getting-started-with-nvda/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - OS X Voiceover](https://a11yproject.com/posts/getting-started-with-voiceover/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Screen Reader Survey](https://webaim.org/projects/screenreadersurvey7/)\r\n\r\n### Accessibility tree\r\n\r\nLearn about the accessibility tree and how assistive technology uses it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - The Accessibility Tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree)\r\n\r\n#### ARIA\r\n\r\nLearn how to use ARIA descriptions an labels to help assistive technology understanding your website.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - ARIA Labels](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Hiding and updating content](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - ARIA States](https://a11yproject.com/posts/ARIA-states/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - ARIA Properties](https://a11yproject.com/posts/ARIA-properties/)\r\n\r\n#### Accessible HTML\r\n\r\nLearn how to write HTML in such as way that assistive technology better understands it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Accessibility HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Skip navigation](https://webaim.org/techniques/skipnav/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e w3c - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fguide.freecodecamp.org\" alt=\"Logo\" /\u003e Freecodecamp - Semantic Elements](https://guide.freecodecamp.org/html/html5-semantic-elements/)\r\n\r\n##### Alt text\r\n\r\nLearn how to use the alt attribute to provide a useful text alternative to this image.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Text Alternatives for Images](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/text-alternatives-for-images)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Accessible Images](https://webaim.org/techniques/images/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Alternative text](https://webaim.org/techniques/alttext/)\r\n\r\n#### Accessible CSS\r\n\r\nLearn how to write CSS in such as way that assistive technology better understands it.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - CSS](https://webaim.org/techniques/css/)\r\n\r\n### Accessible forms\r\n\r\nLearn how to build accessible forms that makes it usable to as many people as possible.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Forms](https://webaim.org/techniques/forms/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e Itnext - Form Accessibility Gudie](https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14)\r\n\r\n### UI States\r\n\r\nLearn how to make the state of each UI element clear.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessible Styles](https://developers.google.com/web/fundamentals/accessibility/accessible-styles)\r\n\r\n### Keyboard Accessibility\r\n\r\nLearn how to make it easy for keyboard users to navigate your site.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Keyboard](https://webaim.org/techniques/keyboard/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.smashingmagazine.com\" alt=\"Logo\" /\u003e Smashing Magazine - Web with just a keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/)\r\n\r\n#### Focus\r\n\r\nLearn how to create a sensible tab order and how to make it easy for the users to locate the currently focused element.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Control focus with tabindex](https://web.dev/control-focus-with-tabindex/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Focus](https://developers.google.com/web/fundamentals/accessibility/focus/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Dom Order Matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Using Tabindex](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Track Focus](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - :focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)\r\n\r\n### Accessible Colors\r\n\r\nLearn how to select colors in such a way that users, including those with visual disabilities, can perceive the content on the page.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Contrast and Color](https://webaim.org/articles/contrast/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - Check contrast](https://a11yproject.com/posts/check-contrast-with-mobile-device/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11yproject.com\" alt=\"Logo\" /\u003e The A11Y Project - What is color contrast?](https://a11yproject.com/posts/what-is-color-contrast/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fstripe.com\" alt=\"Logo\" /\u003e Designing accessible color systems](https://stripe.com/en-dk/blog/accessible-color-systems)\r\n\r\n### Laws \u0026 Policies\r\n\r\nLearn about the governmental policies related to web accessibility.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - Laws \u0026 Policies](https://www.w3.org/WAI/policies/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Laws around the world](https://webaim.org/articles/laws/world/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Section 508](https://webaim.org/standards/508/checklist)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - WCAG 2 Checklist](https://webaim.org/standards/wcag/checklist)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fa11y.dev\" alt=\"Logo\" /\u003e A11Y.dev - Lawsuits](https://a11y.dev/470-digital-accessibility-cases-were-filed-in-q3-2018/)\r\n\r\n#### Audits\r\n\r\nLearn how to conduct an accessibility review to improve the overall experience of using your site. Remember, good accessibility equals good UX!\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Accessibility audits](https://web.dev/lighthouse-accessibility)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - How to review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org\" alt=\"Logo\" /\u003e Webaim - Accessibility Tools](https://webaim.org/articles/tools/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=http%3A%2F%2Fwave.webaim.org\" alt=\"Logo\" /\u003e Webaim - Wave](http://wave.webaim.org/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fchrome.google.com\" alt=\"Logo\" /\u003e Google Chrome - NoCoffee Extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.digitala11y.com\" alt=\"Logo\" /\u003e Digital A11Y - Accessibility Plugins](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Accessibility for teams](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.wuhcag.com\" alt=\"Logo\" /\u003e WCAG 2.0 checklists](https://www.wuhcag.com/wcag-checklist/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)\r\n\r\n\r\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#web-components)\r\n\r\n## ➤ Web Components\r\n\r\n### Custom Elements\r\n\r\nLearn how to create new HTML tags with Custom Elements.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e Javascript.info - Custom Elements](https://javascript.info/custom-elements)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdev.to\" alt=\"Logo\" /\u003e dev.to - An introduction to Custom Elements](https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fweb.dev\" alt=\"Logo\" /\u003e web.dev - Web Components](https://web.dev/web-components-io-2019/)\r\n\r\n### HTML Templates\r\n\r\nLearn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Templates \u0026 Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fjavascript.info\" alt=\"Logo\" /\u003e Javascript.info - Template Element](https://javascript.info/template-element)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\r\n\r\n### Shadow DOM\r\n\r\nLearn how to encapsulate your CSS using Shadow DOM.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com\" alt=\"Logo\" /\u003e Google Devs - Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - Shadow Tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fcss-tricks.com\" alt=\"Logo\" /\u003e CSS Tricks - Encapsulating Style and Structure](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fitnext.io\" alt=\"Logo\" /\u003e itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmeowni.ca\" alt=\"Logo\" /\u003e Monica - Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)\r\n\r\n#### Shadow Parts\r\n\r\nLearn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.\r\n\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fgithub.com\" alt=\"Logo\" /\u003e Fergald - CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdeveloper.mozilla.org\" alt=\"Logo\" /\u003e MDN - ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwww.w3.org\" alt=\"Logo\" /\u003e W3C - CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/)\r\n* [ ] [\u003cimg style=\"margin-bottom: 0;\" src=\"https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fmeowni.ca\" alt=\"Logo\" /\u003e Monica - ::part and ::theme, an explainer](https://meowni.ca/posts/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fweb-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-skills/lists"}