Awesome

<h1 align="center">Web Skills</h1> <p align="center"> Web Skills is a visual overview of useful skills to learn as a web developer. Go to <a href="https://andreasbm.github.io/web-skills" target="_blank" aria-label="Link to Web Skills">https://andreasbm.github.io/web-skills</a> to check out the visual overview or scroll through this readme to get the overview <a href="#-fundamentals" target="_blank" aria-label="Link to list of skills">as a list</a>. If you like the project you are very welcome to <a href="https://github.com/andreasbm/web-skills/stargazers" aria-label="Become stargazer link">become a stargazer 🤩</a> </p> <p align="center"> <a href="http://andreasbm.github.io/web-skills" target="_blank"> <img src="https://raw.githubusercontent.com/andreasbm/web-skills/master/demo.gif" alt="Web Skills Demo" width="800" /> </a> </p> <br /> <details> <summary>📖 Table of Contents</summary> <br />

➤ Table of Contents

➤ FAQ
➤ Fundamentals
- HTML
- Syntax
  - Basic Tags
- Forms
- SEO
  - Discoverable Content
- Svg
- Best Practices
- CSS
- Syntax
- Selectors
  - Specificity
  - Pseudo Selectors
- Box Model
  - Margin Collapsing
- Colors
- Calc
- Layout
  - Flex
  - Grid
- Transforms
  - Animations
- Responsive Design
  - Media Queries
  - Relative Units
  - Images
- CSS Variables
- Best Practices
- Javascript
- Syntax
  - Spread
  - Destructuring
- DOM
  - DOM Manipulation
- Events
- Objects
  - Prototype
    - Classes
- Regex
- Template Literals
- Promises
  - Callbacks
  - Async/await
  - Fetch
- Web Animations
- Modules
- Intl
- Canvas
- Documentation
- Best Practices
- The Browser
- Standardization
  - W3C
  - TC39
  - WHATWG
  - Specifications
- Browser Engines
  - Webkit
  - Blink
  - Gecko
- HTTP
- The Internet
- Polyfills
- Debugging
  - Developer console
➤ Accessibility
➤ Web Components
➤ Progressive Webapps
➤ Build tools
- Package Managers
  - NPM
  - Yarn
- Module Bundlers
  - Rollup
  - Webpack
  - Parcel
  - Snowpack
- Linters and formatters
  - Prettier
  - ESLint
- Task Runners
  - NPM Scripts
- Transpilers
  - Babel
  - Typescript
- CSS Pre-processors
  - SASS
  - PostCSS
- Node.js
➤ Frameworks & Libraries
- lit-element
- Vue
- React
- Angular
- Svelte
- Stencil
➤ Testing
➤ Architecture & paradigms
➤ Team Collaboration
➤ Design & UX
➤ The Modern Web
➤ Algorithms & Data structures
➤ Databases & Servers
- Databases
- Relational Databases
  - SQL
  - MySQL
  - PostgreSQL
- Non-relational Databases
  - Redis
  - MongoDB
- Data Modelling
  - ER Diagram
  - Keys
- Indexing
- Data Integrity
- Normalization
  - Functional Dependencies
  - Normal Forms
- Transactions
- Servers
- Architectural Models
- Middleware
- Request-Reply Protocol
  - UDP
  - TCP
- REST API
  - CRUD
- Express
- GraphQL
- GNU/Linux
- Docker
- SSH
➤ Contributors
➤ License

</details>

➤ 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, 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! <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 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.

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. 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 or take a look at my website if you want to learn more about what other projects I'm working on.

➤ Fundamentals

HTML

Syntax

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

Basic Tags

Get familiar with the basic HTML tags

Forms

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

SEO

Learn how to make your content search-friendly.

Discoverable Content

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

Svg

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

Best Practices

Learn the best practices of writing HTML.

CSS

Syntax

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

Selectors

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

Specificity

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

Pseudo Selectors

Learn how to use pseudo selectors.

Box Model

Learn what the CSS box model means.

Margin Collapsing

Learn about margin collapsing.

Colors

Learn the different ways you can define colors in CSS.

Calc

Learn how to use the CSS calc function.

Layout

Learn the different layout types for web.

Flex

Learn how to create layouts using flexbox.

Grid

Learn how to create layouts using CSS Grid.

Transforms

Learn the different ways to transform elements through CSS.

Animations

Learn how to animate elements through CSS using keyframes.

Responsive Design

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

Media Queries

Learn how use media queries to build responsive layout.

Relative Units

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

Images

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

CSS Variables

Learn how to define and use CSS variables.

Best Practices

Learn the best practices of writing CSS.

Javascript

Syntax

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

Spread

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

Destructuring

Learn how destructuring can help you when working with objects.

DOM

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

DOM Manipulation

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

Events

Learn how to dispatch and listen for events.

Objects

Learn how to create and use objects.

Prototype

Learn how to extend objects and functions through its prototype.

Classes

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

Regex

Learn how to use regex to extract information from strings.

Template Literals

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

Promises

Learn how to use promises and what asynchronous code means.

Callbacks

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

Async/await

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

Fetch

Learn how to use the fetch API to fetch data.

Web Animations

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

Modules

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

Intl

Learn how to localize your website using the Intl API.

Canvas

Learn how to paint graphics onto a canvas.

Documentation

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

Best Practices

Learn the best practices of writing Javascript.

The Browser

Standardization

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

W3C

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

TC39

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

WHATWG

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

Specifications

Learn how to read specifications developed by the standards committees.

Browser Engines

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

Webkit

Learn about the Webkit browser engine.

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebkit.org" alt="Logo" /> Webkit

Blink

Learn about the Blink browser engine.

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org" alt="Logo" /> Blink

Gecko

Learn about the Gecko browser engine.

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fen.wikipedia.org" alt="Logo" /> Gecko

HTTP

Learn how data is distributed through the HTTP protocol.

The Internet

Learn the basics of how the internet works.

Polyfills

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

Debugging

Learn about the basics concepts of debugging.

Developer console

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

➤ Accessibility

The why

Learn what accessibility is and why it is important.

Screen Readers

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

Accessibility tree

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

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com" alt="Logo" /> Google Devs - The Accessibility Tree

ARIA

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

Accessible HTML

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

Alt text

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

Accessible CSS

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

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fwebaim.org" alt="Logo" /> Webaim - CSS

Accessible forms

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

UI States

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

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com" alt="Logo" /> Google Devs - Accessible Styles

Keyboard Accessibility

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

Focus

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

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.

Laws & Policies

Learn about the governmental policies related to web accessibility.

Audits

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

➤ Web Components

Custom Elements

Learn how to create new HTML tags with Custom Elements.

HTML Templates

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

Shadow DOM

Learn how to encapsulate your CSS using Shadow DOM.

Shadow Parts

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

Slots

Learn how to compose Custom Elements by using slots.

Best practices

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

Constructible Stylesheets

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

Form Participation

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

➤ Progressive Webapps

API's

Storage

Learn how to store data for your web app.

Routing

Learn what routing means in single page applications.

History API

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

Service Workers

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

Offline first

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

Push notifications

Learn how to add push notifications to your web app.

Web App manifest

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

Add to homescreen

Learn how to make your web app installable.

Pointer Events

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

Loading Performance

App shell

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

Render-Blocking Resources

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

Compression

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

Performance metrics

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

Largest Contentful Paint

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

Total Blocking Time

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

Time to Interactive

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

Lazy Loading

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

Dynamic Import

Learn how to use dynamic import to lazy load javascript.

Offscreen images

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

Critical Request Chains

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

Tree shaking

Learn how to use tree shaking to eliminate dead code.

Codesplitting

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

PRPL Pattern

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

Resource Prioritization

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

Caching

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

Rendering Performance

Rendering

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

Event loop

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

Microtask

Learn about microtasks and the microtask queue.

Stack

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

Heap

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

RAIL Model

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

requestAnimationFrame

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

requestIdleCallback

Learn how to use the requestIdleCallback to defer heavy tasks.

Critical Rendering Path

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

The Pixel Pipeline

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

Style calculations

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

<img style="margin-bottom: 0;" src="https://plus.google.com/_/favicon?domain_url=https%3A%2F%2Fdevelopers.google.com" alt="Logo" /> Google Devs - Style Calculations

Transforms

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

Paint areas

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

Layout Trashing

Learn about layout trashing and how to avoid it.

Layers

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

Debounce

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

CSS Containment

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

Web Workers

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

Security

HTTPS

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

Browser Sandbox

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

OWASP

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

Cross-Site Scripting

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

Clickjacking

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

Content Security Policy

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

Audits

Performance budgets

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

Lighthouse

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

Chrome DevTools

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

➤ Build tools

Package Managers

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

NPM

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

Yarn

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

Module Bundlers

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

Rollup

Learn how you can use Rollup to bundle your code.

Webpack

Learn how you can use Webpack to bundle your code.

Parcel

Learn how you can use Parcel to bundle your code.

Snowpack

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

Linters and formatters

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

Prettier

Learn how you can use Prettier to format your code.

ESLint

Learn how you can use ESLint to lint your code.

Task Runners

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

NPM Scripts

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

Transpilers

Learn what transpilers are and why we need them.

Babel

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

Typescript

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

CSS Pre-processors

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

SASS

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

PostCSS

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

Node.js

Learn how to use Node.js.

➤ Frameworks & Libraries

lit-element

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

Vue

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

React

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

Angular

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

Svelte

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

Stencil

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

➤ Testing

Testing Methodologies

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

Unit Testing

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

Integration Testing

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

System Testing

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

Acceptance Testing

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

Smoke Testing

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

Performance Testing

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

Usability Testing

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

White Box Testing

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

Black Box Testing

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

Automated Testing

Learn about automated testing and when it should be applied.

Manual Testing

Learn about manual testing and when it should be applied.

Continuous integration

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

A/B Testing

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

Test Runners

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

Karma

Learn about the Karma test runner.

Mocha

Learn about the Mocha testing framework.

Jasmine

Learn about the Jasmine testing frameworks.

Cypress

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

Ava

Learn about the Ava test runner.

Best Practices

Learn about the best practices when it comes to testing.

➤ Architecture & paradigms

Paradigms

Programming Paradigms

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

Object Oriented Programming

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

S.O.L.I.D

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

Functional programming

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

Recursion

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

Higher-Order Functions

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

Currying

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

Monads

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

Architecture

Design Patterns

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

Singleton

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

Observer

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

Prototype

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

Bridge

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

Proxy

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

Chain of responsibility

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

Constructor

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

CSS Methodologies

Learn how CSS can be structured using CSS methodologies.

BEM

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

SMACSS

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

OOCSS

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

➤ Team Collaboration

Version Control

Git

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

Github

Learn how to use Github.

Bitbucket

Learn how to use Bitbucket.

Management

Agile Development

Learn about agile development and when to use it.

Scrum

Learn about scrum and when to use it.

Kanban

Learn about kanban and when to use it.

Waterfall Development

Learn about waterfall development and when to use it.

Test Driven Development

Learn about test driven development and when to use it.

➤ Design & UX

Color Theory

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

Color Wheel

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

Typography

Learn about typography and how to describe fonts.

Line Spacing

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

C.R.A.P

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

Contrast

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

Repetition

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

Alignment

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

Proximity

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

Consistency

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

Spacing

Learn how to use space in your design.

Error Handling

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

Loading

Learn how a loading state can improve the user experience.

The Golden Ratio

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

Mobile First

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

Hit Targets

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

Design Systems

Learn what design systems are and get familiar with some.

Material Design

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

Fluent Design

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

Accessibility

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

Best Practices

Learn about some of the best practices when designing.

➤ The Modern Web

Streams

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

Media Streams

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

Media Recorder

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

Web RTC

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

Screen Capture

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

Generators

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

Speech Synthesis

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

Web Sockets

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

Geolocation

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

Device orientation & motion

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

Fullscreen

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

Variable Fonts

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

HTTP/2

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

Payment Request API

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

Web Audio

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

Observers

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

Mutation Observer

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

Intersection Observer

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

Resize Observer

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

Performance Observer

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

Scrollsnapping

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

Web Assembly

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

Beacon

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

Clipboard

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

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

Performance API

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

Gamepad API

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

Speech Recognition

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

Interaction Media Queries

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

Browser Extensions

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

Pointer Lock API

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

Picture In Picture

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

Proxies

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

Houdini

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

Project Fugu

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

Web Authentication API

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

Credentials Manager API

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

Native File System

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

Shape Detection

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

Web Bluetooth

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

Web USB

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

Web XR

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

Presentation

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

Network Information API

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

➤ Algorithms & Data structures

Data structures

Arrays

Learn how and when arrays should be used.

Queues & Stacks

Learn how and when queues and stacks should be used.

Trees

Learn how and when trees should be used.

Binary Indexed Tree

Learn how and when binary indexed trees should be used.

Heap

Learn how and when heaps should be used.

Red-black Tree

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

Trie

Learn how and when tries should be used.

K-D Tree

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

Hash Tables

Learn how and when hash tables should be used.

Linked Lists

Learn how and when linked lists should be used.

Graphs

Learn how and when graphs should be used.

Analysis

Time complexity

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

Cost model

Learn how to setup a cost model for an algorithm.

Order of Growth

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

Big O notation

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

Space Complexity

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

Algorithms

Sorting

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

Insertion Sort

Learn about the insertion sort algorithm.

Quicksort

Learn about the quicksort algorithm.

Mergesort

Learn about the mergesort algorithm.

Heapsort

Learn about the heapsort algorithm.

Searching

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

Binary Search

Learn about the binary search algorithm.

Breadth First Search

Learn about the breadth first search algorithm.

Depth First Search

Learn about the depth first search algorithm.

Dijkstra's Algorithm

Learn about dijkstra's algorithm.

String Search

Learn about various algorithms for searching in strings.

Hashing

Learn about hashing algorithms.

➤ Databases & Servers

Databases

Relational Databases

Learn about relational databases and how to use them.

SQL

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

MySQL

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

PostgreSQL

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

Non-relational Databases

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

Redis

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

MongoDB

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

Data Modelling

Learn how data modelling can help your database design.

ER Diagram

Learn how to model your data using ER diagrams.

Keys

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

Indexing

Learn how to use indexing to speed up your database.

Data Integrity

Learn how to assure the accuracy and consistency of data.

Normalization

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

Functional Dependencies

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

Normal Forms

Learn how normal forms can help you normalize your database.

Transactions

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

ACID

Learn about the ACID properties of transactions.

Serializability

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

Locks

Learn about locks and when they should be used.

Deadlocks

Learn about deadlocks and why they should be avoided.

Precedence graph

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

Servers

Architectural Models

Learn about the fundamental architectural server models.

Client-Server

Learn about the client-server model.

Proxy Server

Learn about the proxy-server model.

Peer-To-Peer

Learn about the peer-to-peer model.

Middleware

Learn about middleware.

Request-Reply Protocol

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

UDP

Learn about the UDP transport layer protocol.

TCP

Learn about the TCP transport layer protocol.

REST API

Learn how an API can be designed to be RESTful.

CRUD

Learn about the CRUD operations.

Express

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

GraphQL

Learn how to use the GraphQL query language.

GNU/Linux

Learn about the GNU/Linux operating system

Docker

Learn how to use Docker.

SSH

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

➤ Contributors

<img alt="Andreas Mehlsen" src="https://avatars1.githubusercontent.com/u/6267397?s=460&v=4" width="100">	<img alt="You?" src="https://joeschmoe.io/api/v1/random" width="100">
Andreas Mehlsen	You?
🔥

➤ License

Licensed under MIT.