https://github.com/andreasbm/web-skills

A visual overview of useful skills to learn as a web developer
https://github.com/andreasbm/web-skills
accessibility algorithms architecture backend build-tools css design frameworks html javascript pwa testing web-components
Last synced: about 1 year ago
JSON representation
A visual overview of useful skills to learn as a web developer
Host: GitHub
URL: https://github.com/andreasbm/web-skills
Owner: andreasbm
License: other
Created: 2019-09-29T13:11:44.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-04-19T03:22:28.000Z (about 2 years ago)
Last Synced: 2025-05-02T15:38:02.940Z (about 1 year ago)
Topics: accessibility, algorithms, architecture, backend, build-tools, css, design, frameworks, html, javascript, pwa, testing, web-components
Language: JavaScript
Homepage: https://andreasbm.github.io/web-skills/
Size: 117 MB
Stars: 7,154
Watchers: 152
Forks: 676
Open Issues: 54
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

awesome-tech-resources - Web Skills
awesome-starred-test - andreasbm/web-skills - A visual overview of useful skills to learn as a web developer (JavaScript)
awesome-starred - andreasbm/web-skills - A visual overview of useful skills to learn as a web developer (frameworks)
jimsghstars - andreasbm/web-skills - A visual overview of useful skills to learn as a web developer (JavaScript)
README

          
Web Skills



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

 



	

		

	






📖 Table of Contents




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

## ➤ Table of Contents

* [➤ FAQ](#-faq)

	* [What is Web Skills?](#what-is-web-skills)

	* [How did you choose the skills?](#how-did-you-choose-the-skills)

	* [How can I support you?](#how-can-i-support-you)

	* [How can I get involved?](#how-can-i-get-involved)

	* [How can I keep track of what skills I know?](#how-can-i-keep-track-of-what-skills-i-know)

	* [I am overwhelmed! Help me!](#i-am-overwhelmed-help-me)

	* [Why haven't you included XYZ Technology?](#why-havent-you-included-xyz-technology)

	* [What does the "experimental" banner mean?](#what-does-the-experimental-banner-mean)

	* [How can I get in contact with you?](#how-can-i-get-in-contact-with-you)

* [➤ Fundamentals](#-fundamentals)

	* [HTML](#html)

	* [Syntax](#syntax)

		* [Basic Tags](#basic-tags)

	* [Forms](#forms)

	* [SEO](#seo)

		* [Discoverable Content](#discoverable-content)

	* [Svg](#svg)

	* [Best Practices](#best-practices)

	* [CSS](#css)

	* [Syntax](#syntax-1)

	* [Selectors](#selectors)

		* [Specificity](#specificity)

		* [Pseudo Selectors](#pseudo-selectors)

	* [Box Model](#box-model)

		* [Margin Collapsing](#margin-collapsing)

	* [Colors](#colors)

	* [Calc](#calc)

	* [Layout](#layout)

		* [Flex](#flex)

		* [Grid](#grid)

	* [Transforms](#transforms)

		* [Animations](#animations)

	* [Responsive Design](#responsive-design)

		* [Media Queries](#media-queries)

		* [Relative Units](#relative-units)

		* [Images](#images)

	* [CSS Variables](#css-variables)

	* [Best Practices](#best-practices-1)

	* [Javascript](#javascript)

	* [Syntax](#syntax-2)

		* [Spread](#spread)

		* [Destructuring](#destructuring)

	* [DOM](#dom)

		* [DOM Manipulation](#dom-manipulation)

	* [Events](#events)

	* [Objects](#objects)

		* [Prototype](#prototype)

			* [Classes](#classes)

	* [Regex](#regex)

	* [Template Literals](#template-literals)

	* [Promises](#promises)

		* [Callbacks](#callbacks)

		* [Async/await](#asyncawait)

		* [Fetch](#fetch)

	* [Web Animations](#web-animations)

	* [Modules](#modules)

	* [Intl](#intl)

	* [Canvas](#canvas)

	* [Documentation](#documentation)

	* [Best Practices](#best-practices-2)

	* [The Browser](#the-browser)

	* [Standardization](#standardization)

		* [W3C](#w3c)

		* [TC39](#tc39)

		* [WHATWG](#whatwg)

		* [Specifications](#specifications)

	* [Browser Engines](#browser-engines)

		* [Webkit](#webkit)

		* [Blink](#blink)

		* [Gecko](#gecko)

	* [HTTP](#http)

	* [The Internet](#the-internet)

	* [Polyfills](#polyfills)

	* [Debugging](#debugging)

		* [Developer console](#developer-console)

* [➤ Accessibility](#-accessibility)

	* [The why](#the-why)

	* [Screen Readers](#screen-readers)

	* [Accessibility tree](#accessibility-tree)

		* [ARIA](#aria)

		* [Accessible HTML](#accessible-html)

			* [Alt text](#alt-text)

		* [Accessible CSS](#accessible-css)

	* [Accessible forms](#accessible-forms)

	* [UI States](#ui-states)

	* [Keyboard Accessibility](#keyboard-accessibility)

		* [Focus](#focus)

	* [Accessible Colors](#accessible-colors)

	* [Laws & Policies](#laws--policies)

		* [Audits](#audits)

* [➤ Web Components](#-web-components)

	* [Custom Elements](#custom-elements)

	* [HTML Templates](#html-templates)

	* [Shadow DOM](#shadow-dom)

		* [Shadow Parts](#shadow-parts)

		* [Slots](#slots)

	* [Best practices](#best-practices)

	* [Constructible Stylesheets](#constructible-stylesheets)

	* [Form Participation](#form-participation)

* [➤ Progressive Webapps](#-progressive-webapps)

	* [API's](#apis)

	* [Storage](#storage)

	* [Routing](#routing)

		* [History API](#history-api)

	* [Service Workers](#service-workers)

		* [Offline first](#offline-first)

		* [Push notifications](#push-notifications)

	* [Web App manifest](#web-app-manifest)

	* [Add to homescreen](#add-to-homescreen)

	* [Pointer Events](#pointer-events)

	* [Loading Performance](#loading-performance)

	* [App shell](#app-shell)

	* [Render-Blocking Resources](#render-blocking-resources)

	* [Compression](#compression)

	* [Performance metrics](#performance-metrics)

		* [Largest Contentful Paint](#largest-contentful-paint)

		* [Total Blocking Time](#total-blocking-time)

		* [Time to Interactive](#time-to-interactive)

	* [Lazy Loading](#lazy-loading)

		* [Dynamic Import](#dynamic-import)

		* [Offscreen images](#offscreen-images)

	* [Critical Request Chains](#critical-request-chains)

	* [Tree shaking](#tree-shaking)

	* [Codesplitting](#codesplitting)

	* [PRPL Pattern](#prpl-pattern)

	* [Resource Prioritization](#resource-prioritization)

	* [Caching](#caching)

	* [Rendering Performance](#rendering-performance)

	* [Rendering](#rendering)

	* [Event loop](#event-loop)

		* [Microtask](#microtask)

		* [Stack](#stack)

		* [Heap](#heap)

	* [RAIL Model](#rail-model)

		* [requestAnimationFrame](#requestanimationframe)

		* [requestIdleCallback](#requestidlecallback)

	* [Critical Rendering Path](#critical-rendering-path)

	* [The Pixel Pipeline](#the-pixel-pipeline)

		* [Style calculations](#style-calculations)

		* [Transforms](#transforms-1)

		* [Paint areas](#paint-areas)

		* [Layout Trashing](#layout-trashing)

		* [Layers](#layers)

		* [Debounce](#debounce)

	* [CSS Containment](#css-containment)

	* [Web Workers](#web-workers)

	* [Security](#security)

	* [HTTPS](#https)

	* [Browser Sandbox](#browser-sandbox)

	* [OWASP](#owasp)

		* [Cross-Site Scripting](#cross-site-scripting)

		* [Clickjacking](#clickjacking)

	* [Content Security Policy](#content-security-policy)

	* [Audits](#audits-1)

	* [Performance budgets](#performance-budgets)

	* [Lighthouse](#lighthouse)

	* [Chrome DevTools](#chrome-devtools)

* [➤ Build tools](#-build-tools)

	* [Package Managers](#package-managers)

		* [NPM](#npm)

		* [Yarn](#yarn)

	* [Module Bundlers](#module-bundlers)

		* [Rollup](#rollup)

		* [Webpack](#webpack)

		* [Parcel](#parcel)

		* [Snowpack](#snowpack)

	* [Linters and formatters](#linters-and-formatters)

		* [Prettier](#prettier)

		* [ESLint](#eslint)

	* [Task Runners](#task-runners)

		* [NPM Scripts](#npm-scripts)

	* [Transpilers](#transpilers)

		* [Babel](#babel)

		* [Typescript](#typescript)

	* [CSS Pre-processors](#css-pre-processors)

		* [SASS](#sass)

		* [PostCSS](#postcss)

	* [Node.js](#nodejs)

* [➤ Frameworks & Libraries](#-frameworks--libraries)

	* [lit-element](#lit-element)

	* [Vue](#vue)

	* [React](#react)

	* [Angular](#angular)

	* [Svelte](#svelte)

	* [Stencil](#stencil)

* [➤ Testing](#-testing)

	* [Testing Methodologies](#testing-methodologies)

		* [Unit Testing](#unit-testing)

		* [Integration Testing](#integration-testing)

		* [System Testing](#system-testing)

		* [Acceptance Testing](#acceptance-testing)

		* [Smoke Testing](#smoke-testing)

		* [Performance Testing](#performance-testing)

		* [Usability Testing](#usability-testing)

		* [White Box Testing](#white-box-testing)

		* [Black Box Testing](#black-box-testing)

		* [Automated Testing](#automated-testing)

		* [Manual Testing](#manual-testing)

	* [Continuous integration](#continuous-integration)

	* [A/B Testing](#ab-testing)

	* [Test Runners](#test-runners)

		* [Karma](#karma)

		* [Mocha](#mocha)

		* [Jasmine](#jasmine)

		* [Cypress](#cypress)

		* [Ava](#ava)

	* [Best Practices](#best-practices-3)

* [➤ Architecture & paradigms](#-architecture--paradigms)

	* [Paradigms](#paradigms)

	* [Programming Paradigms](#programming-paradigms)

	* [Object Oriented Programming](#object-oriented-programming)

		* [S.O.L.I.D](#solid)

	* [Functional programming](#functional-programming)

		* [Recursion](#recursion)

		* [Higher-Order Functions](#higher-order-functions)

		* [Currying](#currying)

		* [Monads](#monads)

	* [Architecture](#architecture)

	* [Design Patterns](#design-patterns)

		* [Singleton](#singleton)

		* [Observer](#observer)

		* [Prototype](#prototype-1)

		* [Bridge](#bridge)

		* [Proxy](#proxy)

		* [Chain of responsibility](#chain-of-responsibility)

		* [Constructor](#constructor)

	* [CSS Methodologies](#css-methodologies)

		* [BEM](#bem)

		* [SMACSS](#smacss)

		* [OOCSS](#oocss)

* [➤ Team Collaboration](#-team-collaboration)

	* [Version Control](#version-control)

	* [Git](#git)

		* [Github](#github)

		* [Bitbucket](#bitbucket)

	* [Management](#management)

	* [Agile Development](#agile-development)

		* [Scrum](#scrum)

		* [Kanban](#kanban)

	* [Waterfall Development](#waterfall-development)

	* [Test Driven Development](#test-driven-development)

* [➤ Design & UX](#-design--ux)

	* [Color Theory](#color-theory)

		* [Color Wheel](#color-wheel)

	* [Typography](#typography)

		* [Font Size](#font-size)

		* [Line Spacing](#line-spacing)

	* [C.R.A.P](#crap)

		* [Contrast](#contrast)

		* [Repetition](#repetition)

		* [Alignment](#alignment)

		* [Proximity](#proximity)

	* [Consistency](#consistency)

	* [Spacing](#spacing)

	* [Error Handling](#error-handling)

	* [Loading](#loading)

	* [The Golden Ratio](#the-golden-ratio)

	* [Mobile First](#mobile-first)

		* [Hit Targets](#hit-targets)

	* [Design Systems](#design-systems)

		* [Material Design](#material-design)

		* [Fluent Design](#fluent-design)

	* [Accessibility](#accessibility)

	* [Best Practices](#best-practices-4)

* [➤ The Modern Web](#-the-modern-web)

	* [Streams](#streams)

		* [Media Streams](#media-streams)

		* [Media Recorder](#media-recorder)

		* [Web RTC](#web-rtc)

		* [Screen Capture](#screen-capture)

		* [Generators](#generators)

	* [Speech Synthesis](#speech-synthesis)

	* [Web Sockets](#web-sockets)

	* [Geolocation](#geolocation)

	* [Device orientation & motion](#device-orientation--motion)

	* [Fullscreen](#fullscreen)

	* [Variable Fonts](#variable-fonts)

	* [HTTP/2](#http2)

	* [Payment Request API](#payment-request-api)

	* [Web Audio](#web-audio)

	* [Observers](#observers)

		* [Mutation Observer](#mutation-observer)

		* [Intersection Observer](#intersection-observer)

		* [Resize Observer](#resize-observer)

		* [Performance Observer](#performance-observer)

	* [Scrollsnapping](#scrollsnapping)

	* [Web Assembly](#web-assembly)

	* [Beacon](#beacon)

	* [Clipboard](#clipboard)

	* [Share](#share)

	* [Performance API](#performance-api)

	* [Gamepad API](#gamepad-api)

	* [Speech Recognition](#speech-recognition)

	* [Interaction Media Queries](#interaction-media-queries)

	* [Browser Extensions](#browser-extensions)

	* [Pointer Lock API](#pointer-lock-api)

	* [Picture In Picture](#picture-in-picture)

	* [Proxies](#proxies)

	* [Houdini](#houdini)

	* [Project Fugu](#project-fugu)

	* [Web Authentication API](#web-authentication-api)

		* [Credentials Manager API](#credentials-manager-api)

	* [Native File System](#native-file-system)

	* [Shape Detection](#shape-detection)

	* [Web Bluetooth](#web-bluetooth)

	* [Web USB](#web-usb)

	* [Web XR](#web-xr)

	* [Presentation](#presentation)

	* [Network Information API](#network-information-api)

* [➤ Algorithms & Data structures](#-algorithms--data-structures)

	* [Data structures](#data-structures)

	* [Arrays](#arrays)

	* [Queues & Stacks](#queues--stacks)

	* [Trees](#trees)

		* [Binary Indexed Tree](#binary-indexed-tree)

		* [Heap](#heap-1)

		* [Red-black Tree](#red-black-tree)

		* [Trie](#trie)

		* [K-D Tree](#k-d-tree)

	* [Hash Tables](#hash-tables)

	* [Linked Lists](#linked-lists)

	* [Graphs](#graphs)

	* [Analysis](#analysis)

	* [Time complexity](#time-complexity)

		* [Cost model](#cost-model)

		* [Order of Growth](#order-of-growth)

		* [Big O notation](#big-o-notation)

	* [Space Complexity](#space-complexity)

	* [Algorithms](#algorithms)

	* [Sorting](#sorting)

		* [Insertion Sort](#insertion-sort)

		* [Quicksort](#quicksort)

		* [Mergesort](#mergesort)

		* [Heapsort](#heapsort)

	* [Searching](#searching)

		* [Binary Search](#binary-search)

		* [Breadth First Search](#breadth-first-search)

		* [Depth First Search](#depth-first-search)

		* [Dijkstra's Algorithm](#dijkstras-algorithm)

		* [String Search](#string-search)

	* [Hashing](#hashing)

* [➤ Databases & Servers](#-databases--servers)

	* [Databases](#databases)

	* [Relational Databases](#relational-databases)

		* [SQL](#sql)

		* [MySQL](#mysql)

		* [PostgreSQL](#postgresql)

	* [Non-relational Databases](#non-relational-databases)

		* [Redis](#redis)

		* [MongoDB](#mongodb)

	* [Data Modelling](#data-modelling)

		* [ER Diagram](#er-diagram)

		* [Keys](#keys)

	* [Indexing](#indexing)

	* [Data Integrity](#data-integrity)

	* [Normalization](#normalization)

		* [Functional Dependencies](#functional-dependencies)

		* [Normal Forms](#normal-forms)

	* [Transactions](#transactions)

		* [ACID](#acid)

		* [Serializability](#serializability)

		* [Locks](#locks)

			* [Deadlocks](#deadlocks)

		* [Precedence graph](#precedence-graph)

	* [Servers](#servers)

	* [Architectural Models](#architectural-models)

		* [Client-Server](#client-server)

		* [Proxy Server](#proxy-server)

		* [Peer-To-Peer](#peer-to-peer)

	* [Middleware](#middleware)

	* [Request-Reply Protocol](#request-reply-protocol)

		* [UDP](#udp)

		* [TCP](#tcp)

	* [REST API](#rest-api)

		* [CRUD](#crud)

	* [Express](#express)

	* [GraphQL](#graphql)

	* [GNU/Linux](#gnulinux)

	* [Docker](#docker)

	* [SSH](#ssh)

* [➤ Contributors](#-contributors)

* [➤ License](#-license)

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

## ➤ FAQ

### What is Web Skills?

Web Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.

### How did you choose the skills?

		

The skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.

### How can I support you?

I am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a [stargazer](https://github.com/andreasbm/web-skills/stargazers), share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you [support me with a cup of coffee](https://www.buymeacoffee.com/AndreasMehlsen)! <3

### How can I get involved?

You are welcome to get involved in any way you like. If you want to, you can go to the [issues page](https://github.com/andreasbm/web-skills/issues) and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!

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

If you scroll to the bottom of the page, you will find a button that says "Sign in with Google". If you click this button and sign in, you will be able to mark skills as completed.

### I am overwhelmed! Help me!

I totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.

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

The skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the [issues page](https://github.com/andreasbm/web-skills/issues).

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

When a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on [MDN](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental). You are very welcome to open an issue if you see a skill you believe should be marked as "experimental" or have the banner removed.

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

Reach out to me on Twitter at [@AndreasMehlsen](https://twitter.com/AndreasMehlsen) or take a look at [my website](https://andreasbm.github.io) if you want to learn more about what other projects I'm working on.

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

## ➤ Fundamentals

### HTML

### Syntax

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

* [ ] [ MDN - HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)

* [ ] [ MDN - Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML)

* [ ] [ Codecademy - Learn HTML](https://www.codecademy.com/learn/learn-html)

#### Basic Tags

Get familiar with the basic HTML tags

* [ ] [ MDN - HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

* [ ] [ Tutorialspoint - Basic HTML tags](https://www.tutorialspoint.com/html/html_basic_tags.htm)

* [ ] [ Elated - First 10 HTML tags](https://www.elated.com/first-10-html-tags/)

* [ ] [ W3Schools - HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)

### Forms

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

* [ ] [ MDN - HTML forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)

* [ ] [ Google Web - Forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms/)

* [ ] [ W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)

### SEO

Learn how to make your content search-friendly.

* [ ] [ web.dev - Discoverable](https://web.dev/discoverable)

* [ ] [ Google Search - Get Started](https://developers.google.com/search/docs/guides/get-started)

* [ ] [ Google Search - SEO basics](https://developers.google.com/search/docs/guides/javascript-seo-basics)

* [ ] [ web.dev - SEO audits](https://web.dev/lighthouse-seo)

#### Discoverable Content

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

* [ ] [ Google Web - Social Discovery](https://developers.google.com/web/fundamentals/discovery/social-discovery)

* [ ] [ Google Search - Search Features](https://developers.google.com/search/docs/guides/search-features)

* [ ] [ Google Search - Structured Data](https://developers.google.com/search/docs/guides/intro-structured-data)

* [ ] [ web.dev - Easily discoverable](https://web.dev/discoverable)

### Svg

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

* [ ] [ 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)

* [ ] [ SVG on the web](https://svgontheweb.com/)

### Best Practices

Learn the best practices of writing HTML.

* [ ] [ MDN - HTML guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML)

* [ ] [ W3Schools - HTML Coding Conventions](https://www.w3schools.com/html/html5_syntax.asp)

### CSS

### Syntax

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

* [ ] [ MDN - CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)

* [ ] [ W3Schools - CSS Tutorial](https://www.w3schools.com/css/default.asp)

* [ ] [ Supercharged - CSS Selectors](https://www.youtube.com/watch?v=IKho_xDKaLw)

* [ ] [ MDN - CSS first steps](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)

* [ ] [ MDN - CSS building blocks](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks)

* [ ] [ MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

* [ ] [ MDN - CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax)

### Selectors

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

* [ ] [ MDN - CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)

* [ ] [ MDN - All selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

* [ ] [ CSS Tricks - Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)

* [ ] [ CSS Tricks - All Selectors](https://css-tricks.com/almanac/selectors/)

* [ ] [ W3Schools - CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)

#### Specificity

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

* [ ] [ MDN - Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

* [ ] [ MDN - Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

* [ ] [ dev.to - CSS Specificity](https://dev.to/emmawedekind/css-specificity-1kca)

* [ ] [ Specificity Calculator](https://specificity.keegan.st/)

* [ ] [ W3Schools - CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)

#### Pseudo Selectors

Learn how to use pseudo selectors.

* [ ] [ MDN - Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

* [ ] [ CSS Tricks - Meet the Pseudo Class Selectors](https://css-tricks.com/pseudo-class-selectors/)

* [ ] [ When do the :hover, :focus, and :active pseudo-classes apply?](https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/)

* [ ] [ W3Schools - CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)

* [ ] [ W3Schools - CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)

### Box Model

Learn what the CSS box model means.

* [ ] [ 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)

* [ ] [ MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

* [ ] [ CSS Tricks - Inheriting box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

#### Margin Collapsing

Learn about margin collapsing.

* [ ] [ MDN - Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

* [ ] [ Margin Collapse in CSS: What, Why, and How](https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0)

* [ ] [ CSS Tricks - What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)

* [ ] [ What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)

* [ ] [ What’s the Deal with Margin Collapse?](https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/)

### Colors

Learn the different ways you can define colors in CSS.

* [ ] [ MDN - Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)

* [ ] [ MDN - ](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

* [ ] [ W3Schools - CSS Colors](https://www.w3schools.com/css/css_colors.asp)

### Calc

Learn how to use the CSS calc function.

* [ ] [ MDN - Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)

* [ ] [ CSS Tricks - A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)

### Layout

Learn the different layout types for web.

* [ ] [ Chrome Dev - Basic Layout](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/basic-layout)

* [ ] [ W3Schools - CSS Website Layout](https://www.w3schools.com/css/css_website_layout.asp)

* [ ] [ MDN - Document and website structure](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

* [ ] [ MDN - CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

#### Flex

Learn how to create layouts using flexbox.

* [ ] [ MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

* [ ] [ A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

* [ ] [ MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

* [ ] [ Flexbox Froggy](https://flexboxfroggy.com/)

* [ ] [ Flexbox Defense](http://flexboxdefense.com)

#### Grid

Learn how to create layouts using CSS Grid.

* [ ] [ MDN - Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

* [ ] [ A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

* [ ] [ MDN - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

* [ ] [ CSS Grid Garden](https://cssgridgarden.com/)

* [ ] [ Supercharged - CSS Grids](https://www.youtube.com/watch?v=AqwPrR7hklE)

### Transforms

Learn the different ways to transform elements through CSS.

* [ ] [ MDN - transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)

* [ ] [ CSS Tricks - Transform](https://css-tricks.com/almanac/properties/t/transform/)

#### Animations

Learn how to animate elements through CSS using keyframes.

* [ ] [ MDN - Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

* [ ] [ CSS Tricks - Animation](https://css-tricks.com/almanac/properties/a/animation/)

### Responsive Design

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

* [ ] [ MDN - Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

* [ ] [ Responsive Web Design Fundamentals by Google](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)

* [ ] [ Google Dev - Responsive Design](https://developers.google.com/web/fundamentals/design-and-ux/responsive)

* [ ] [ Google Dev - UX Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)

* [ ] [ Google Dev - Responsive Content](https://developers.google.com/web/fundamentals/design-and-ux/responsive/content)

* [ ] [ Codelabs - Responsive Design](https://codelabs.developers.google.com/codelabs/pwa-responsive-design/index.html?index=..%2F..dev-pwa-training#0)

#### Media Queries

Learn how use media queries to build responsive layout.

* [ ] [ CSS Tricks - CSS Media Queries & Using Available Space](https://css-tricks.com/css-media-queries/)

* [ ] [ MDN - Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

* [ ] [ MDN - Using Media Queries for Accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)

#### Relative Units

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

* [ ] [ MDN - Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)

* [ ] [ MDN - CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

* [ ] [ The CSS Workshop - Relative Units](https://thecssworkshop.com/lessons/relative-units)

* [ ] [ CSS Tricks - Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)

* [ ] [ dev.to - 15 CSS Relative units](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m)

#### Images

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

* [ ] [ Google Devs - Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)

* [ ] [ MDN - Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

### CSS Variables

Learn how to define and use CSS variables.

* [ ] [ MDN - Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

* [ ] [ Google Devs - CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)

* [ ] [ dev.to - CSS Quickies: CSS Variables](https://dev.to/lampewebdev/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily-1i0i)

* [ ] [ CSS Variables explained with 5 examples](https://codeburst.io/css-variables-explained-with-5-examples-84adaffaa5bd)

### Best Practices

Learn the best practices of writing CSS.

* [ ] [ MDN - CSS guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS)

* [ ] [ MDN - Organizing your CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)

* [ ] [ Speckyboy - Good and bad CSS practices](https://speckyboy.com/good-bad-css-practices/)

### Javascript

### Syntax

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

* [ ] [ MDN - Javascript First Steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps)

* [ ] [ MDN - Javascript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

* [ ] [ MDN - Javascript Building Blocks](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks)

#### Spread

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

* [ ] [ MDN - Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

* [ ] [ Freecodecamp - An introduction to Spread syntax](https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-javascript-fba39595922c/)

* [ ] [ Object rest and spread properties](https://v8.dev/features/object-rest-spread)

#### Destructuring

Learn how destructuring can help you when working with objects.

* [ ] [ MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

* [ ] [ MDN - ES6 In Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)

* [ ] [ javascript.info - Destructuring assignment](https://javascript.info/destructuring-assignment)

### DOM

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

* [ ] [ MDN - DOM Introduction](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

* [ ] [ 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/)

* [ ] [ Introduction to the DOM](https://learn.co/lessons/introduction-to-the-dom)

* [ ] [ htmldom.dev](https://htmldom.dev/)

#### DOM Manipulation

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

* [ ] [ MDN - Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

* [ ] [ Supercharged - querySelector](https://www.youtube.com/watch?v=s0vg_H9hBuU)

### Events

Learn how to dispatch and listen for events.

* [ ] [ MDN - Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)

* [ ] [ MDN - Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)

* [ ] [ Event Bubbling and Event Capturing in JavaScript](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e)

* [ ] [ Freecodecamp - A simplified explanation of event propagation](https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/)

* [ ] [ JavaScript Events Explained](https://flaviocopes.com/javascript-events/)

* [ ] [ MDN - addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

* [ ] [ MDN - removeEventListener(](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)

* [ ] [ Event order](https://www.quirksmode.org/js/events_order.html)

### Objects

Learn how to create and use objects.

* [ ] [ MDN - Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)

* [ ] [ MDN - Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

* [ ] [ javascript.info - Objects](https://javascript.info/object)

* [ ] [ MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

* [ ] [ W3Schools - The JavaScript this Keyword](https://www.w3schools.com/js/js_this.asp)

* [ ] [ MDN - bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

* [ ] [ MDN - new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)

* [ ] [ MDN - new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target)

* [ ] [ Data Structures: Objects and Arrays](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)

#### Prototype

Learn how to extend objects and functions through its prototype.

* [ ] [ The prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

* [ ] [ Prototypes in JavaScript](https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b)

* [ ] [ dev.to - JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)

##### Classes

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

* [ ] [ MDN - Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

* [ ] [ Medium - ES6 Classes](https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a)

* [ ] [ MDN - Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance)

* [ ] [ MDN - Object Oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)

* [ ] [ MDN - super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)

### Regex

Learn how to use regex to extract information from strings.

* [ ] [ MDN - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)

* [ ] [ javascript.info - Regular expressions](https://javascript.info/regular-expressions)

* [ ] [ MDN - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

### Template Literals

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

* [ ] [ MDN - Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

* [ ] [ MDN - ES6 In Depth: Template strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)

* [ ] [ Google Devs - Getting Literal With ES6 Template Strings](https://developers.google.com/web/updates/2015/01/ES6-Template-Strings)

### Promises

Learn how to use promises and what asynchronous code means.

* [ ] [ Google Devs - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)

* [ ] [ MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

* [ ] [ Master the JavaScript Interview: What is a Promise?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)

#### Callbacks

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

* [ ] [ MDN - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)

* [ ] [ JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)

* [ ] [ javascript.info - Callbacks](https://javascript.info/callbacks)

#### Async/await

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

* [ ] [ MDN - async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

* [ ] [ Google Devs - Async functions](https://developers.google.com/web/fundamentals/primers/async-functions)

* [ ] [ javascript.info - Async/await](https://javascript.info/async-await)

#### Fetch

Learn how to use the fetch API to fetch data.

* [ ] [ Google Devs - Introduction to fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)

* [ ] [ Google Devs - Networking](https://developers.google.com/training/certification/mobile-web-specialist/study-guide/networking)

* [ ] [ Freecodecamp - Fetch practical guide](https://www.freecodecamp.org/news/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547/)

* [ ] [ MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

* [ ] [ Alligator - Fetch API](https://alligator.io/js/fetch-api/)

* [ ] [ Supercharged - Fetch](https://www.youtube.com/watch?v=GiI77ya60yk)

* [ ] [ Codelabs - Fetch ](https://codelabs.developers.google.com/codelabs/pwa-fetch/index.html?index=..%2F..dev-pwa-training#0)

### Web Animations

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

* [ ] [ Google Devs - Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations)

* [ ] [ MDN - Using The Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)

* [ ] [ CSS Tricks - CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/)

### Modules

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

* [ ] [ MDN - Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)

* [ ] [ MDN - Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)

* [ ] [ V8 - Modules](https://v8.dev/features/modules)

* [ ] [ Freecodecamp - A Practical guide to ES6 modules](https://www.freecodecamp.org/news/how-to-use-es6-modules-and-why-theyre-important-a9b20b480773/)

### Intl

Learn how to localize your website using the Intl API.

* [ ] [ MDN - Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

* [ ] [ MDN - Date Time Format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

* [ ] [ New Intl APIs in JavaScript](https://blog.bitsrc.io/new-intl-apis-in-javascript-c50dc89d2cf3)

### Canvas

Learn how to paint graphics onto a canvas.

* [ ] [ MDN - Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)

* [ ] [ MDN - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

* [ ] [ CSS Tricks - Manipulating Pixels Using Canvas](https://css-tricks.com/manipulating-pixels-using-canvas/)

### Documentation

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

* [ ] [ Getting Started with JSDoc](https://jsdoc.app/about-getting-started.html)

* [ ] [ A beginner’s guide to writing documentation](https://www.writethedocs.org/guide/writing/beginners-guide-to-docs/)

* [ ] [ Write Good Documentation](https://hackernoon.com/write-good-documentation-6caffb9082b4)

* [ ] [ The power of jsDoc](https://dev.to/gmartigny/the-power-of-jsdoc-272d)

* [ ] [ Document your Javascript code with JSDoc](https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf)

### Best Practices

Learn the best practices of writing Javascript.

* [ ] [ MDN - JavaScript guidelines](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript)

* [ ] [ Airbnb - JavaScript Style Guide](https://github.com/airbnb/javascript)

* [ ] [ Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js/)

* [ ] [ 5 JavaScript Style Guides](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa)

* [ ] [ JavaScript Style Guide and Coding Conventions](https://www.w3schools.com/js/js_conventions.asp)

### The Browser

### Standardization

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

* [ ] [ Wikipedia - Web Standards](https://en.wikipedia.org/wiki/Web_standards)

* [ ] [ What Are Web Standards?](https://www.elcom.com.au/resources/blog/web-standards)

* [ ] [ A Comprehensive Explanation of Web Standards](https://robertnyman.com/2007/05/21/what-are-web-standards-a-comprehensive-explanation-of-what-is-comprised-in-the-term/)

#### W3C

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

* [ ] [ W3C - About](https://www.w3.org/standards/about.html)

* [ ] [ W3C - Standards](https://www.w3.org/standards/)

* [ ] [ W3C - Process](http://webdiy.org/w3c/)

* [ ] [ Web Standards Guide](https://www.smashingmagazine.com/2019/01/web-standards-guide/)

* [ ] [ W3C - Groups](https://www.w3.org/community/groups/)

* [ ] [ The W3C At Twenty-Five](https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/)

#### TC39

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

* [ ] [ The TC39 process for ECMAScript features](https://2ality.com/2015/11/tc39-process.html)

* [ ] [ Github - TC39](https://github.com/tc39)

* [ ] [ Ecma International - Programme of work](https://www.ecma-international.org/memento/tc39.htm)

* [ ] [ Wikipedia - Ecma International](https://en.wikipedia.org/wiki/Ecma_International)

#### WHATWG

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

* [ ] [ WHATWG - FAQ](https://whatwg.org/faq)

* [ ] [ WHATWG - Standards](https://spec.whatwg.org/)

* [ ] [ MDN - WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)

* [ ] [ W3C vs. WHATWG HTML5 Specs](https://dzone.com/articles/w3c-vs-whatwg-html5-specs)

* [ ] [ WHATWG - HTML](https://html.spec.whatwg.org/)

* [ ] [ Wikipedia - WHATWG](https://en.wikipedia.org/wiki/WHATWG)

#### Specifications

Learn how to read specifications developed by the standards committees.

* [ ] [ How to Read the ECMAScript Specification](https://timothygu.me/es-howto/)

* [ ] [ How to Read W3C Specs](https://alistapart.com/article/readspec/)

* [ ] [ Learning CSS by reading specs](https://www.chenhuijing.com/blog/learning-css-by-reading-specifications/)

* [ ] [ Understanding the CSS Specifications](https://www.w3.org/Style/CSS/read.en.html)

### Browser Engines

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

* [ ] [ Medium - Browser Engines](https://medium.com/@jonbiro/browser-engines-chromium-v8-blink-gecko-webkit-98d6b0490968)

* [ ] [ Wikipedia - Comparison](https://en.wikipedia.org/wiki/Comparison_of_browser_engines)

* [ ] [ HTML5 Rocks - How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

* [ ] [ Demystifying Browsers](https://textslashplain.com/2020/02/09/demystifying-browsers/)

#### Webkit

Learn about the Webkit browser engine.

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

#### Blink

Learn about the Blink browser engine.

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

#### Gecko

Learn about the Gecko browser engine.

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

### HTTP

Learn how data is distributed through the HTTP protocol.

* [ ] [ MDN - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)

* [ ] [ MDN - HTTP Glossary](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)

* [ ] [ MDN - An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

* [ ] [ Wikipedia - Hypertext Transfer Protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)

### The Internet

Learn the basics of how the internet works.

* [ ] [ MDN - How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)

* [ ] [ Youtube - How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)

* [ ] [ Explain That Stuff - Internet](https://www.explainthatstuff.com/internet.html)

* [ ] [ Stanford - How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)

* [ ] [ How the Internet Works](https://blog.hubspot.com/marketing/how-the-internet-works)

### Polyfills

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

* [ ] [ MDN - Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)

* [ ] [ Introduction To Polyfills & Their Usage](https://medium.com/beginners-guide-to-mobile-web-development/introduction-to-polyfills-their-usage-9cd6db4b1923)

* [ ] [ W3C - Polyfills and the evolution of the Web](https://www.w3.org/2001/tag/doc/polyfills/)

* [ ] [ Can I use](http://caniuse.com/)

### Debugging

Learn about the basics concepts of debugging.

* [ ] [ Google Devs - Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/)

* [ ] [ MDN - Cross browser testing](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)

* [ ] [ 5 things to remember for better debugging of your code](https://medium.com/dev-bits/5-things-to-remember-for-better-debugging-of-your-code-94b9bc3fb3df)

#### Developer console

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

* [ ] [ MDN - Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)

* [ ] [ Google Devs - Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/api)

* [ ] [ Google Devs - Get Started with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript)

* [ ] [ Google Devs - Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities)

* [ ] [ MDN - Debugging CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)

* [ ] [ MDN - Debugging HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)

* [ ] [ javascript.info - Debugging in Chrome](https://javascript.info/debugging-chrome)

* [ ] [ 14 JavaScript debugging tips](https://raygun.com/javascript-debugging-tips)

* [ ] [ The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)

* [ ] [ Youtube - Chrome DevTools 101](https://www.youtube.com/watch?v=H0XScE08hy8)

* [ ] [ Chrome Devs - Quickly monitor events](https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel)

* [ ] [ Youtube - 14 Must Know Chrome Dev Tools Tricks](https://www.youtube.com/watch?v=xkzDaKwinA8)

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

## ➤ Accessibility

### The why

Learn what accessibility is and why it is important.

* [ ] [ Google Devs - Accessibility Fundamentals](https://developers.google.com/web/fundamentals/accessibility/)

* [ ] [ A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)

* [ ] [ Udacity - Chromevox Lite](http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/)

* [ ] [ Dev.to - Why Accessibility Matters](https://dev.to/lhoffmanwg1/why-accessibility-matters-39nl)

* [ ] [ Abilitynet - Why Accessibility Matters](https://www.abilitynet.org.uk/why-accessibility-matters)

* [ ] [ Udacity - Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)

* [ ] [ Youtube - Headings, Landmarks, and Tabs](https://www.youtube.com/watch?v=HE2R86EZPMA)

### Screen Readers

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

* [ ] [ The A11Y Project - Screen Reader Myths](https://a11yproject.com/posts/people-who-use-screen-readers-dont-use-javascript/)

* [ ] [ The A11Y Project - NVDA Screen Reader](https://a11yproject.com/posts/getting-started-with-nvda/)

* [ ] [ The A11Y Project - OS X Voiceover](https://a11yproject.com/posts/getting-started-with-voiceover/)

* [ ] [ Webaim - Screen Reader Survey](https://webaim.org/projects/screenreadersurvey7/)

### Accessibility tree

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

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

#### ARIA

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

* [ ] [ Google Devs - ARIA Labels](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships)

* [ ] [ Google Devs - Hiding and updating content](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content)

* [ ] [ The A11Y Project - ARIA States](https://a11yproject.com/posts/ARIA-states/)

* [ ] [ The A11Y Project - ARIA Properties](https://a11yproject.com/posts/ARIA-properties/)

#### Accessible HTML

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

* [ ] [ Google Devs - Introduction to Semantics](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/)

* [ ] [ MDN - Accessibility HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)

* [ ] [ Webaim - Skip navigation](https://webaim.org/techniques/skipnav/)

* [ ] [ w3c - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)

* [ ] [ Freecodecamp - Semantic Elements](https://guide.freecodecamp.org/html/html5-semantic-elements/)

##### Alt text

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

* [ ] [ Google Devs - Text Alternatives for Images](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/text-alternatives-for-images)

* [ ] [ Webaim - Accessible Images](https://webaim.org/techniques/images/)

* [ ] [ Webaim - Alternative text](https://webaim.org/techniques/alttext/)

#### Accessible CSS

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

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

### Accessible forms

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

* [ ] [ Webaim - Forms](https://webaim.org/techniques/forms/)

* [ ] [ Itnext - Form Accessibility Gudie](https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14)

### UI States

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

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

### Keyboard Accessibility

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

* [ ] [ Webaim - Keyboard](https://webaim.org/techniques/keyboard/)

* [ ] [ Smashing Magazine - Web with just a keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/)

#### Focus

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

* [ ] [ web.dev - Control focus with tabindex](https://web.dev/control-focus-with-tabindex/)

* [ ] [ Google Devs - Focus](https://developers.google.com/web/fundamentals/accessibility/focus/)

* [ ] [ Google Devs - Dom Order Matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters)

* [ ] [ Google Devs - Using Tabindex](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex)

* [ ] [ Google Devs - Track Focus](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus)

* [ ] [ MDN - :focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)

* [ ] [ MDN - :focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)

### Accessible Colors

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

* [ ] [ Webaim - Contrast and Color](https://webaim.org/articles/contrast/)

* [ ] [ The A11Y Project - Check contrast](https://a11yproject.com/posts/check-contrast-with-mobile-device/)

* [ ] [ The A11Y Project - What is color contrast?](https://a11yproject.com/posts/what-is-color-contrast/)

* [ ] [ Designing accessible color systems](https://stripe.com/en-dk/blog/accessible-color-systems)

### Laws & Policies

Learn about the governmental policies related to web accessibility.

* [ ] [ W3C - Laws & Policies](https://www.w3.org/WAI/policies/)

* [ ] [ Webaim - Laws around the world](https://webaim.org/articles/laws/world/)

* [ ] [ Webaim - Section 508](https://webaim.org/standards/508/checklist)

* [ ] [ Webaim - WCAG 2 Checklist](https://webaim.org/standards/wcag/checklist)

* [ ] [ A11Y.dev - Lawsuits](https://a11y.dev/470-digital-accessibility-cases-were-filed-in-q3-2018/)

#### Audits

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

* [ ] [ web.dev - Accessibility audits](https://web.dev/lighthouse-accessibility)

* [ ] [ Google Devs - How to review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)

* [ ] [ Webaim - Accessibility Tools](https://webaim.org/articles/tools/)

* [ ] [ Google Devs - Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference)

* [ ] [ Webaim - Wave](http://wave.webaim.org/)

* [ ] [ Google Chrome - NoCoffee Extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)

* [ ] [ Digital A11Y - Accessibility Plugins](https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/)

* [ ] [ Google Devs - Accessibility for teams](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)

* [ ] [ WCAG 2.0 checklists](https://www.wuhcag.com/wcag-checklist/)

* [ ] [ How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)

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

## ➤ Web Components

### Custom Elements

Learn how to create new HTML tags with Custom Elements.

* [ ] [ Google Devs - Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements)

* [ ] [ MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)

* [ ] [ CSS Tricks - Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)

* [ ] [ Javascript.info - Custom Elements](https://javascript.info/custom-elements)

* [ ] [ dev.to - An introduction to Custom Elements](https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327)

* [ ] [ itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-i-custom-elements-4de6713cef9d)

* [ ] [ web.dev - Web Components](https://web.dev/web-components-io-2019/)

### HTML Templates

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

* [ ] [ MDN - Using Templates & Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)

* [ ] [ Javascript.info - Template Element](https://javascript.info/template-element)

* [ ] [ MDN - The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)

### Shadow DOM

Learn how to encapsulate your CSS using Shadow DOM.

* [ ] [ Google Devs - Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom)

* [ ] [ MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)

* [ ] [ MDN - Shadow Tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)

* [ ] [ CSS Tricks - Encapsulating Style and Structure](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)

* [ ] [ itnext - Introduction to Web Components](https://itnext.io/introduction-to-web-components-part-ii-shadow-dom-8d1d8e126332)

* [ ] [ Monica - Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)

#### Shadow Parts

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

* [ ] [ Fergald - CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)

* [ ] [ MDN - ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)

* [ ] [ W3C - CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/)

* [ ] [ Monica - ::part and ::theme, an explainer](https://meowni.ca/posts/
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/andreasbm/web-skills

Awesome Lists containing this project

README

Web Skills
