➤ 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
MDN - HTML elements reference
Tutorialspoint - Basic HTML tags
Elated - First 10 HTML tags
W3Schools - 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.
Google Web - Social Discovery
Google Search - Search Features
Google Search - Structured Data
web.dev - Easily discoverable
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.
MDN - CSS Basics
W3Schools - CSS Tutorial
Supercharged - CSS Selectors
MDN - CSS first steps
MDN - CSS building blocks
MDN - CSS values and units
MDN - CSS Syntax
Selectors
Learn about CSS selectors and how to effeciently target DOM elements.
MDN - CSS selectors
MDN - All selectors
CSS Tricks - Child and Sibling Selectors
CSS Tricks - All Selectors
W3Schools - CSS Combinators
Specificity
Learn what specificity means and how to use it when writing CSS.
MDN - Specificity
MDN - Cascade and inheritance
dev.to - CSS Specificity
Specificity Calculator
W3Schools - CSS Specificity
Pseudo Selectors
Learn how to use pseudo selectors.
MDN - Pseudo-classes
CSS Tricks - Meet the Pseudo Class Selectors
When do the :hover, :focus, and :active pseudo-classes apply?
W3Schools - CSS Pseudo-elements
W3Schools - CSS Pseudo-classes
Box Model
Learn what the CSS box model means.
MDN - Introduction to the CSS basic box model
MDN - The box model
CSS Tricks - Inheriting box-sizing
Margin Collapsing
Learn about margin collapsing.
MDN - Mastering margin collapsing
Margin Collapse in CSS: What, Why, and How
CSS Tricks - What You Should Know About Collapsing Margins
What’s the Deal with Collapsible Margins?
What’s the Deal with Margin Collapse?
Colors
Learn the different ways you can define colors in CSS.
MDN - Color
- [
MDN -
](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) W3Schools - CSS Colors
Calc
Learn how to use the CSS calc function.
Layout
Learn the different layout types for web.
Chrome Dev - Basic Layout
W3Schools - CSS Website Layout
MDN - Document and website structure
MDN - CSS layout
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.
MDN - Responsive design
Responsive Web Design Fundamentals by Google
Google Dev - Responsive Design
Google Dev - UX Patterns
Google Dev - Responsive Content
Codelabs - Responsive Design
Media Queries
Learn how use media queries to build responsive layout.
CSS Tricks - CSS Media Queries & Using Available Space
MDN - Using media queries
MDN - 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
MDN - CSS values and units
The CSS Workshop - Relative Units
CSS Tricks - Fun with Viewport Units
dev.to - 15 CSS Relative units
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.
MDN - Using CSS custom properties
Google Devs - CSS Variables: Why Should You Care?
dev.to - CSS Quickies: CSS Variables
CSS Variables explained with 5 examples
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.
MDN - Spread syntax
Freecodecamp - An introduction to Spread syntax
Object rest and spread properties
Destructuring
Learn how destructuring can help you when working with objects.
MDN - Destructuring assignment
MDN - ES6 In Depth: Destructuring
javascript.info - Destructuring assignment
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.
MDN - Introduction to events
MDN - Creating and triggering events
Event Bubbling and Event Capturing in JavaScript
Freecodecamp - A simplified explanation of event propagation
JavaScript Events Explained
MDN - addEventListener()
MDN - removeEventListener(
Event order
Objects
Learn how to create and use objects.
MDN - Introducing JavaScript objects
MDN - Working with objects
javascript.info - Objects
MDN - this
W3Schools - The JavaScript this Keyword
MDN - bind()
MDN - new operator
MDN - new.target
Data Structures: Objects and Arrays
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.
MDN - Template literals
MDN - ES6 In Depth: Template strings
Google Devs - Getting Literal With ES6 Template Strings
Promises
Learn how to use promises and what asynchronous code means.
Google Devs - JavaScript Promises: an Introduction
MDN - Promise
Master the JavaScript Interview: What is a Promise?
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.
Google Devs - Introduction to fetch
Google Devs - Networking
Freecodecamp - Fetch practical guide
MDN - CORS
Alligator - Fetch API
Supercharged - Fetch
Codelabs - Fetch
Web Animations
Learn how to use web animations to animate elements in the DOM.
Google Devs - Animations
MDN - Using The Web Animations API
CSS Tricks - CSS Animations vs Web Animations API
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.
Getting Started with JSDoc
A beginner’s guide to writing documentation
Write Good Documentation
The power of jsDoc
Document your Javascript code with JSDoc
Best Practices
Learn the best practices of writing Javascript.
MDN - JavaScript guidelines
Airbnb - JavaScript Style Guide
Principles of Writing Consistent, Idiomatic JavaScript
5 JavaScript Style Guides
JavaScript Style Guide and Coding Conventions
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.
The TC39 process for ECMAScript features
Github - TC39
Ecma International - Programme of work
Wikipedia - Ecma International
WHATWG
Learn what WHATWG are doing and how they are moving the web forward.
WHATWG - FAQ
WHATWG - Standards
MDN - WHATWG
W3C vs. WHATWG HTML5 Specs
WHATWG - HTML
Wikipedia - WHATWG
Specifications
Learn how to read specifications developed by the standards committees.
How to Read the ECMAScript Specification
How to Read W3C Specs
Learning CSS by reading specs
Understanding the CSS Specifications
Browser Engines
Learn what a browser engine is and get an overview of the browser landscape and market share.
Medium - Browser Engines
Wikipedia - Comparison
HTML5 Rocks - How Browsers Work
Demystifying Browsers
Webkit
Learn about the Webkit browser engine.
Blink
Learn about the Blink browser engine.
Gecko
Learn about the Gecko browser engine.
HTTP
Learn how data is distributed through the HTTP protocol.
The Internet
Learn the basics of how the internet works.
MDN - How does the Internet work?
Youtube - How the Internet Works in 5 Minutes
Explain That Stuff - Internet
Stanford - How Does the Internet Work?
How the Internet Works
Polyfills
Learn how it is possible to use polyfills to increase the browser support for your website.
MDN - Polyfill
Introduction To Polyfills & Their Usage
W3C - Polyfills and the evolution of the Web
Can I use
Debugging
Learn about the basics concepts of debugging.
Google Devs - Inspect and Edit Pages and Styles
MDN - Cross browser testing
5 things to remember for better debugging of your code
Developer console
Learn how to use the developer console to debug your code.
MDN - Console
Google Devs - Console API Reference
Google Devs - Get Started with Chrome DevTools
Google Devs - Console Utilities API Reference
MDN - Debugging CSS
MDN - Debugging HTML
javascript.info - Debugging in Chrome
14 JavaScript debugging tips
The definitive guide to debugging JavaScript
Youtube - Chrome DevTools 101
Chrome Devs - Quickly monitor events
Youtube - 14 Must Know Chrome Dev Tools Tricks
➤ Accessibility
The why
Learn what accessibility is and why it is important.
Google Devs - Accessibility Fundamentals
A11ycasts with Rob Dodson
Udacity - Chromevox Lite
Dev.to - Why Accessibility Matters
Abilitynet - Why Accessibility Matters
Udacity - Web Accessibility
Youtube - Headings, Landmarks, and Tabs
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
The A11Y Project - NVDA Screen Reader
The A11Y Project - OS X Voiceover
Webaim - Screen Reader Survey
Accessibility tree
Learn about the accessibility tree and how assistive technology uses it.
ARIA
Learn how to use ARIA descriptions an labels to help assistive technology understanding your website.
Google Devs - ARIA Labels
Google Devs - Hiding and updating content
The A11Y Project - ARIA States
The A11Y Project - ARIA Properties
Accessible HTML
Learn how to write HTML in such as way that assistive technology better understands it.
Google Devs - Introduction to Semantics
MDN - Accessibility HTML
Webaim - Skip navigation
w3c - Headings
Freecodecamp - Semantic Elements
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.
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.
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.
web.dev - Control focus with tabindex
Google Devs - Focus
Google Devs - Dom Order Matters
Google Devs - Using Tabindex
Google Devs - Track Focus
MDN - :focus-visible
MDN - :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
The A11Y Project - Check contrast
The A11Y Project - What is color contrast?
Designing accessible color systems
Laws & Policies
Learn about the governmental policies related to web accessibility.
W3C - Laws & Policies
Webaim - Laws around the world
Webaim - Section 508
Webaim - WCAG 2 Checklist
A11Y.dev - Lawsuits
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
Google Devs - How to review
Webaim - Accessibility Tools
Google Devs - Accessibility Reference
Webaim - Wave
Google Chrome - NoCoffee Extension
Digital A11Y - Accessibility Plugins
Google Devs - Accessibility for teams
WCAG 2.0 checklists
How to Meet WCAG (Quick Reference)
➤ Web Components
Custom Elements
Learn how to create new HTML tags with Custom Elements.
Google Devs - Custom Elements
MDN - Using Custom Elements
CSS Tricks - Creating a Custom Element from Scratch
Javascript.info - Custom Elements
dev.to - An introduction to Custom Elements
itnext - Introduction to Web Components
web.dev - Web Components
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.
Google Devs - Shadow DOM
MDN - Using Shadow DOM
MDN - Shadow Tree
CSS Tricks - Encapsulating Style and Structure
itnext - Introduction to Web Components
Monica - Shadow DOM: fast and encapsulated styles
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
MDN - ::part
W3C - CSS Shadow Parts
Monica - ::part and ::theme, an explainer
Youtube - CSS Shadow Parts
Chrome Status - ::part and ::theme
Slots
Learn how to compose Custom Elements by using slots.
Alligator.io - Composing Custom Elements
Javascript.info - Slots Composition
- [
MDN - HTML
element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) Component.kitchen - A history of the HTML slot element
Best practices
Get familiar with best practices when it comes to building Web Components.
Google Devs - Custom Element Best Practices
Webcomponents.org - Web Components Best Practices
mateusortiz - Web Components the Right Way
dev.to - Making Web Components for Different Contexts
Constructible Stylesheets
Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.
Google Devs - Constructable Stylesheets
W3C - Constructable Stylesheet Objects
dev.to - Why Would Anyone Use Constructible Stylesheets
Benjamin Farrel - Adopt a Design System
WICG - Constructable Stylesheet Objects
Chrome Status - Constructible Stylesheets
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.
Form Participation API Explained
Chrome Status - Form-associated custom elements
web-platform-tests - Form Participation
Google Devs - Form-associated custom elements
web.dev - More capable form controls
W3C - Creating a form-associated custom element
➤ Progressive Webapps
API’s
Storage
Learn how to store data for your web app.
MDN - Storage
MDN - Web Storage API
MDN - Cookies
MDN - IndexedDB API
Google Devs - View And Edit Local Storage
MDN - Client-side storage
Routing
Learn what routing means in single page applications.
How Single-Page Applications Work
Static Apps - Routing URLs in Static Web Apps
Routing With Single Page Applications or Client Side Routing
History API
Learn how to use the history API to add single page applicaiton routing to your web app.
MDN - Working with the History API
MDN - History API
Single-page application routing in vanilla JavaScript
CSS Tricks - Using the HTML5 History API
The History API
Google Devs - History API: Scroll Restoration
MDN - The Document Base URL element
Service Workers
Learn how to register a service worker to provide a rich native-like experience.
Google Devs - Service Workers: an Introduction
Google Devs - The Service Worker Lifecycle
Google Devs - Service Worker Registration
MDN - Service Worker API
Google Devs - High-performance service worker loading
Codelabs - Scripting the service worker
Codelabs - Caching files with the service worker
Codelabs - Adding a Service Worker
Google Devs - Debugging Service Workers
Caching best practices
Offline first
Learn how to make your web app working offline with an offline first approach.
Google Devs - The Offline Cookbook
Udacity - Offline Web Applications
Offline First
Google Devs - Offline UX Considerations
Google Devs - Offline Storage for Progressive Web Apps
Codelabs - Offline quickstart
Codelabs - Adding a Service Worker and Offline into your Web App
Supercharged - Offline Links
MDN - Online and offline events
MDN - Making PWAs work offline
Push notifications
Learn how to add push notifications to your web app.
Google Devs - Adding Push Notifications to a Web App
MDN - How to make PWAs re-engageable
MDN - Notifications API
Web App manifest
Learn how to tell the browser about your web app and how it should behave when ‘installed’ by creating a web app manifest.
Google Devs - Web App Manifest
web.dev - Add a web app manifest
W3C - Web App Manifest
MDN - How to make PWAs installable
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.
MDN - Pointer Events
Google Devs - Add Touch to Your Site
Google Devs - Pointing the Way Forward
Google Devs - Touch Action Options
W3C - Pointer Events
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.
Google Devs - Optimizing Encoding and Transfer Size
Google Devs - Replace Animated GIFs with Video
Squoosh
Google Devs - Text Content
Google Devs - Optimize Images
web.dev - Reduce JavaScript execution time
Performance metrics
Learn why it is important to measure performance and which metrics you should prioritize.
Google Devs - User-centric Performance Metrics
Udacity - Website Performance Optimization
Udacity - Browser Rendering Optimization
Largest Contentful Paint
Learn about Largest Contentful Paint and how it impacts the overall performance.
web.dev - Largest Contentful Paint
web.dev - Lighthouse Largest Contentful Paint
Medium - New Performance Metric: What is Largest Contentful Paint?
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.
Google Devs - Lazy Loading Images and Video
Addy Osmani - Lazy Loading Images
web.dev - Native lazy-loading for the web
Dynamic Import
Learn how to use dynamic import to lazy load javascript.
V8 - Dynamic import()
JavaScript dynamic import() & export
MDN - Dynamic Import
TC39 - proposal-dynamic-import
Offscreen images
Learn why offscreen images increase the load time and how to avoid them by lazy loading images.
web.dev - Defer offscreen images
Google Devs - Properly Size Images
web.dev - Native lazy-loading for the web
Addy Osmani - Native image lazy-loading for the web!
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.
Google Devs - The PRPL Pattern
Google Devs - JavaScript Start-up Optimization
Ben Schwarz - Real world performance
The Cost of Javascript
Resource Prioritization
Learn about resource prioritization and how to inform the browser about the importance of a resource.
Google Devs - Resource Prioritization
Eliminating Roundtrips with Preconnect
Addy Osmani - Preload, Prefetch And Priorities in Chrome
web.dev - Preconnect to required origins
Preload, prefetch and other tags
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.
Google Devs - Constructing the Object Model
Google Devs - Rendering Performance
Google Devs - Render-tree Construction
Google Devs - Render Blocking CSS
Event loop
Learn about the event loop and how Javascript simulate like it’s running our commands in a multi-thread environment.
Youtube - Jake Archibald: In The Loop
Understanding JavaScript
JavaScript Event Loop Explained
Youtube - What the heck is the event loop anyway?
The JavaScript Event Loop
dev.to - JavaScript Visualized: Event Loop
Microtask
Learn about microtasks and the microtask queue.
Tasks, microtasks, queues and schedules
MDN - Using microtasks in JavaScript
javascript.info - Microtasks and macrotasks
javascript.info - Microtasks
Stack
Learn about the stack and how to investigate the staack trace when debugging.
Javascript Stack Trade - Using it to debug
MDN - console.trace()
V8 - Stack trace API
Confused about Stack and Heap?
Heap
Learn about the heap and how to investigate the heap snapshots when debugging.
Google Devs - Memory Problems
Google Devs - Memory Terminology
Google Devs - How to Record Heap Snapshots
Confused about Stack and Heap?
Google Devs - How to Use the Allocation Profiler Tool
RAIL Model
Learn how to use the RAIL model to ensure a good user experience.
Google Devs - RAIL
Google Devs - Why Performance Matters
Google Devs - Get Started With Analyzing
Google Devs - Animations and Performance
Google Devs - CSS Versus JavaScript Animations
Google Devs - Choosing the Right Easing
Google Devs - Animating Modal Views
MDN - CSS and JavaScript animation performance
MDN - Performance fundamentals
Youtube - Fast By Default
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.
Google Devs - Critical Rendering Path
MDN - Critical Rendering Path
Understanding the critical rendering path
The Pixel Pipeline
Learn about the five key points in the pixels-to-screen pipeline.
Google Devs - The pixel pipeline
Pixels are expensive
Google Devs - The Applied Science of Runtime Performance
CSS Triggers
Style calculations
Learn how to optimize your CSS to avoid heavy style calculations.
Transforms
Learn about transforms and how it is possible to avoid both layout and paint.
Google Devs - Use transform and opacity for animations
Achieving 60 FPS Animations with CSS3
HTML5 Rocks - High Performance Animations
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.
Google Devs - Manage Layer Count
HTML5 Rocks - Accelerated Rendering in Chrome
Layers and how to force them
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.
Google Devs - CSS Containment
W3C - CSS Containment Module
An introduction to CSS Containment
MDN - Contain
CSS Tricks - CSS containment
Web Workers
Learn how to use web workers to run a script operation in a background thread separate from the main execution thread.
Security
HTTPS
Learn about HTTPS and why a website should always be protected with HTTPS.
Google Devs - Why HTTPS Matters
Google Devs - Enabling HTTPS on Your Servers
Google Devs - Mixed Content
Youtube - Stories from the field
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.
Wikipedia - OWASP
OWASP - About
OWASP - OWASP Top 10
OWASP - Cheatsheets
Youtube - OWASP
OWASP Top 10 Security Risks
Wikipedia - 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.
OWASP - Clickjacking
Wikipedia - Clickjacking
web.dev - Same-origin policy
OWASP - Clickjacking Cheatsheet
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.
web.dev - Performance Budgets
Google Devs - Performance Budget
Addy Osmani - Start Performance Budgeting
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.
Google Devs - Chrome DevTools
Google Devs - Inspect animations
Investigate animation performance with DevTools
➤ 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.
npmjs - About npm
npmjs - Getting started
Introduction to npm and basic npm commands
An Absolute Beginner’s Guide to Using npm
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.
dev.to - What is a module bundler?
Freecodecamp - Let’s learn how module bundlers work
JavaScript Bundlers, a Comparison
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.
Prettier - What is Prettier?
Let the computer do the formatting
Prettier - Playground
Prettier - Integrating with Linters
ESLint
Learn how you can use ESLint to lint your code.
Eslint - Getting Started
Streamline Code Reviews with ESLint + Prettier
Prettier vs ESLint: What’s The Difference?
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.
Scotch - Javascript Transpilers
What JavaScript Programmers Need to Know about Transpilers
Wikipedia - Source-to-source compiler
Babel
Learn about Babel and how you can use it to transpile your code.
Complete Babel 7 Guide for Beginners
Babel - What is Babel?
Babel - Usage Guide
A Beginner’s Guide to Babel
Moving to ES6 — Babel and Transpilers
Typescript
Learn how to use Typescript and how it can help making your code typesafe.
Typescript - Documentation
Typescript: Why should one use i?
Why TypeScript is the best way to write Front-end in 2019
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.
lit-element
Google Devs - Lightning-fast templates
Vaadin - Creating a LitElement project
dev.to - Web Components: from zero to hero, part three
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.
Stencil
Alligator - Getting Started With Stencil
How to Build Reusable Web Components Using Stenciljs
➤ 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.
Unit Testing Tutorial
Wikipedia - Unit testing
What is Unit Testing?
The Arrange, Act and Assert (AAA) Pattern
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.
dev.to - Continuous Integration Explained
Continuous Integration Tutorial
Wikipedia - Continuous integration
A/B Testing
Learn about A/B testing and how it can be used to optimize your web app.
dev.to - A/B testing: introduction
dev.to - When Not To A/B Test
A/B Testing
Wikipedia - A/B testing
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.
Github - Ava
A Fresh Take On JavaScript Testing
Freecodecamp - How you can test your Node.js applications
Best Practices
Learn about the best practices when it comes to testing.
Javascript Testing Best Practices
What are the best practices in software Testing?
7 Software Testing Best Practices
➤ Architecture & paradigms
Paradigms
Programming Paradigms
Learn how programming languages can be categoried into different paraigmes based on their features.
Wikipedia - Programming paradigm
Introduction of Programming Paradigms
What Are JavaScript Programming Paradigms?
Object Oriented Programming
Learn about object oriented programming and how objects can make your code easier to read and debug.
MDN - Object-oriented JavaScript
Freecodecamp - An introduction to Object-Oriented Programming
Introduction to Object Oriented Programming in JavaScript
S.O.L.I.D
Learn about the SOLID design pricinples that can make your code more understandable, flexible and maintainable.
Wikipedia - SOLID
S.O.L.I.D: The First 5 Principles of Object Oriented Design
S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript
Functional programming
Learn about functional programming and how it can make your code easier to read and debug.
An introduction to functional programming in JavaScript
Functional Programming in JavaScript
The power of functional programming in Javascript
An introduction to Functional Programming
dev.to - Basic Functional Programming Patterns in JavaScript
Functional-ish JavaScript
Recursion
Learn about recursion and when it can be used to make your code more readable.
Learn and Understand Recursion in JavaScript
Understanding Recursion in JavaScript
Freecodecamp - Recursion in JavaScript
javascript.info - Recursion and stack
Higher-Order Functions
Learn about higher-order functions and when it can be used to make your code more readable.
Higher-Order Functions
Freecodecamp - A quick intro to Higher-Order Functions
Wikipedia - Higher-Order function
Understanding Higher-Order Functions in JavaScript
Currying
Learn about currying and when it can be used to make your code more readable.
dev.to - All you need to know about currying
JavaScript: Currying and Partial Application
Curry and Function Composition
Wikipedia - Currying
Monads
Learn about monads and when it can be used to make your code more readable.
Youtube - Monad, FunFunFunction
Youtube - Functors, FunFunFunction
Functional JavaScript - Functors, Monads, and Promises
Wikipedia - Monad
JavaScript Monads Made Simple
Implementing JavaScript Functors and Monads
MDN - Array.prototype.flatMap()
Architecture
Design Patterns
Learn how commonly occurring problems can be solved using design patterns.
Wikipedia - Software design pattern
The 7 Most Important Software Design Patterns
Software Design Patterns
Design Patterns
JavaScript Design Patterns
Design Patterns in TypeScript
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.
The Constructor Pattern
Fundamental Object Design Patterns in JavaScript
Difference between Constructor pattern and Prototype pattern
CSS Methodologies
Learn how CSS can be structured using CSS methodologies.
A Look at Some CSS Methodologies
A web designer’s guide to CSS methodologies
Understanding CSS Writing 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.
Learn Git Branching
Git Handbook
Github Cheatsheet
Visualizing Git
Codecademy - Learn Gitthis
Git Hint
Github
Learn how to use Github.
Bitbucket
Learn how to use Bitbucket.
Wikipedia - Bitbucket
Tutorial: Learn Bitbucket with Git
Getting Started with Bitbucket for Version Control
Management
Agile Development
Learn about agile development and when to use it.
Wikipedia - Agile software development
What is agile methodology?
What is Agile Software Development?
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.
Wikipedia - Test-driven development
Red, Green, Refactor
Freecodecamp - Test Driven Development
TDD Changed My Life
dev.to - Test-driven development in JavaScript
➤ Design & UX
Color Theory
Learn about color theory and how you can make your own color schemes.
All you need to know about colors in UI Design
The Role of Color in UX
10 Questions of Color Theory
Wikipedia - Color Theory
The Meaning of Color
50 Gorgeous Color Schemes
Color Wheel
Learn how to use the color wheel when making a color scheme.
Color Theory: Brief Guide For Designers
Color theory and the color wheel
The fundamentals of understanding color theory
Adobe - Color wheel
Typography
Learn about typography and how to describe fonts.
Google - Understanding typography
How to Understand Typography
Typography Elements Everyone Needs to Understand
Youtube - 10 rules to help you rule type
Font Design
Typography Tutorial for Beginners
A Crash Course in Typography
Type Classifications
Google Fonts
7 web typography rules
15 Best Practices To Excellent UI
Font Size
Learn about font sizes and how to choose the right one.
Type scale
The importance of font size
Website font size: Size does matter
CSS Tricks - font-size
CSS Tricks - Fluid Typography
Line Spacing
Learn about line spacing and how to choose the right one.
Best UX practices for line spacing
Line spacing
Why you should go big with line spacing
CSS Tricks - line-height
C.R.A.P
Learn how the C.R.A.P. design principles can help you point out the qualities (or flaws) in a design.
Build Better User Experience
CRAP Principles
The Non-Designer’s Design Book
Youtube - The Non-Designers Design Book
How CRAP Will Make You a Better Designer
The Big Four: Contrast, Repetition, Alignment, Proximity
Contrast
Learn how the principles of contrast can help you when designing.
Designing with contrast: 20 tips from a designer
Contrast Design principle of Graphic Design
Contrast In Design
Fully understanding contrast in design
Repetition
Learn how the principles of repetition can help you when designing.
Repetition Design principle of Graphic Design
Repetition Principle of Design
Repetition, Pattern, and Rhythm
Repetition, principles of design
How to Use Repetition Effectively
Alignment
Learn how the principles of alignment can help you when designing.
Alignment Design principle of Graphic Design
Alignment Principle Of Design
The Art Of Alignment In Graphic Design
Introduction to Alignment
Proximity
Learn how the principles of proximity can help you when designing.
Proximity Design principle of Graphic Design
How to Use Proximity Effectively
Proximity Principle Of Design
Gestalt Theory for UX Design: Principle of Proximity
Principles of Design: Proximity
Consistency
Learn why consistency is one of the most important building-blocks in a design.
Design principle: Consistency
Consistency, A Key Design Principle
Consistency: MORE than what you think
Principle of Consistency in User Interface Design
The value of consistent design
Spacing
Learn how to use space in your design.
Space in Design Systems
How to use spacing margin and spacing in design
How To Use Space In Design
Importance of White Space in Design
Negative Space in Design
How to Change Line Spacing in InDesign
Error Handling
Learn how to improve the user experience by handling errors in an intuitive way.
Design an Error Handling System before you structure your App
UI Error Handling
Creating Error Messages
Loading
Learn how a loading state can improve the user experience.
Everything you need to know about skeleton screens
Engaging users with progressive loading in skeleton screen
Design and code responsive Skeleton Screens
How to Speed Up Your UX with Skeleton Screens
A Bone to Pick with Skeleton Screens
When to use loaders & empty states
Empty/Loading State
When You Need to Show a Button’s Loading State
Stop Using Loading Spinner
The Golden Ratio
Learn how the golden ratio can help you when choose measurements for your design.
The Golden Ratio in Design
A guide to the Golden Ratio for designers
What is the golden ratio
The Golden Ratio: A designer’s guide
Golden Ratio: What It Is And Why Should You Use It In Design
Golden Ratio Typography (GRT) Calculator
How to Use the Golden Ratio
Golden Ratio in Design
How To Use The Golden Ratio In Design
Mobile First
Learn about designing for mobile first and why it is important.
Complete guide to mobile first design
What is Mobile First Design?
A Hands-On Guide to Mobile-First Responsive Design
Mobile First Design
Hit Targets
Learn about hit targets can why they should not be neglected.
Finger-Friendly Design
Size matters! Accessibility and Touch Targets
Optimal Size and Spacing for Mobile Buttons
Design Systems
Learn what design systems are and get familiar with some.
A guide to design systems
What the heck is a design system?
Everything you need to know about Design Systems
What is a Design System?
What’s a Design System
Material Design
Learn about material design and get familiar with the core principles.
Google - Material Design
Google - Material Components
Google - Material Develop
Google - Material Tutorial
Wikipedia - Material Design
Fluent Design
Learn about fluent design and get familiar with the core principles.
Microsoft - Fluent Design System
Microsoft - Fluent UI Toolkit
Wikipedia - Fluent Design System
Fluent: Design Behind the Design
Iconic Icons: Designing the World of Windows
Evolving the Microsoft Fluent Design System
Accessibility
Learn how and why it is important to design for accessibility.
Designing For Accessibility And Inclusion
Designing for accessibility is not that hard
Designing Accessible Experiences at Scale
Material Design - Accessibility
W3C - Designing for Web Accessibility
Accessibility in government
W3C - Visual Presentation
Best Practices
Learn about some of the best practices when designing.
13 Website Design Best Practices For 2019
Design Best Practices
Refactoring UI
-
[ Refactoring UI
CSS Day 2019](https://www.youtube.com/watch?v=7Z9rrryIOC4) Dieter Ram’ 10 principles for good design
➤ 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.
MDN - Media Streams API
MDN - Image Capture API
MDN - mediaDevices.getUserMedia()
W3C - Media Capture and Streams
Media Recorder
Learn how to use the media recorder API to record media streams.
MDN - MediaStream Recording API
Media Recorder API Demo
WTC - MediaStream Recording
What Web Can Do Today - Recording Media
Web RTC
Learn how to use Web RTC for establishing real-time communication.
MDN - WebRTC API
WebRTC - Getting Started
WebRTC samples
Wikipedia - WebRTC
What Web Can Do Today - WebRTC
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.
MDN - Iterators and generators
Functional JavaScript - Streams
Understanding Generators with Examples
- [
MDN - function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
- [
MDN - yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)
dev.to - JavaScript Visualized: Generators and Iterators
javascript.info - Generators
Medium - A Simple Guide to Understanding Javascript Generators
Speech Synthesis
Learn how the speech synthesis API can help you converting text to speech.
Google Devs - Web apps that talk
MDN - window.speechSynthesis
MDN - SpeechSynthesis
W3C - Web Speech API
The Speech Synthesis API
Web Sockets
Learn about web sockets and how you can push data to your web app.
MDN - Websockets API
What are Web Sockets?
HTML5 Rocks - Introducing WebSockets
WHATWG - Web sockets
Geolocation
Learn how to ask the user for permission to the location.
MDN - Geolocation API
Alligrator - Using the Geolocation API
Google Maps Platform - Displaying User Position on Maps
What Web Can Do Today - Geolocation
Device orientation & motion
Learn how to measure the orientation and motion of the device.
MDN - Detecting device orientation
W3C - DeviceOrientation Event Specification
HTML5 Rocks - Introduction
What Web Can Do Today - Device Position
W3C - Generic Sensor API
MDN - Sensor APIs
Google Devs - Sensors For The Web
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.
v-fonts
MDN - Variable fonts guide
Google Devs - Introduction to variable fonts
Supercharged - Variable Fonts
HTTP/2
Learn about the faster and more convenient HTTP/2 protocol.
Google Devs - Introduction to HTTP/2
Wikipedia - HTTP/2
HTTP/2: the difference between HTTP/1.1
HTTP/2 - FAQ
Why turning on HTTP/2 was a mistake
Payment Request API
Learn about the payment request API and how it can help monetize your web app.
MDN - Payment Request API
Codelabs - Payment Request API
What Web Can Do Today - Payments
W3C - Payment Request API
Google Devs - Introduction to the Payment Request API
Web Audio
Learn how to use the Web Audio API to add audio to your web app.
MDN - Using the Web Audio API
MDN - Web Audio API
W3C - Web Audio API
HTML5 Rocks - Getting Started with Web Audio API
All You Need to Know About the Web Audio API
Alligator - Your First Steps with the Web Audio API
Observers
Learn about the observer pattern and get comfortable concepts such as subjects and observers.
Javascript Observers and You
How to Use the Observable Pattern in JavaScript
Wikipedia - Publish–subscribe pattern
The Observer Pattern with Vanilla JavaScript
Mutation Observer
Learn how to use the Mutation Observer API to get informed about changes to the DOM.
MDN - MutationObserver
Listening to the DOM changes with MutationObserver
David Walsh - MutationObserver API
javascript.info - Mutation observer
WHATWG - Mutation observers
Intersection Observer
Learn how to use the Intersection Observer API can help you detect when an element is visible on the screen.
MDN - Intersection Observer API
W3C - Intersection Observer
Google Devs - Trust is Good, Observation is Better
CSS Tricks - An Explanation of Intersection Observers
Understanding the Intersection Observer API in JavaScript
CSS Tricks - A Few Functional Uses for Intersection Observer
google Devs - An event for CSS position:sticky
Resize Observer
Learn how to use the Resize Observer API to get informed when the element resizes.
MDN - Resize Observer API
Google Devs - It’s Like document.onresize for Elements
Alligator - A Look at the Resize Observer JavaScript API
David Walsh - Resize Observer
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.
CSS Tricks - Practical CSS Scroll Snapping
CSS Tricks - Introducing CSS Scroll Snap Points
Google Devs - Well-Controlled Scrolling with CSS Scroll Snap
MDN - CSS Scroll Snap
The scroll-snap-* Properties
Web Assembly
Learn about Web Assembly and how it opens up the playing field for new types of web apps.
MDN - WebAssembly Concepts
MDN - WebAssembly
dev.to - Why the heck is everyone talking about WebAssembly?
Introduction to Web Assembly
Google Codelabs - An Introduction to Web Assembly
How We Used WebAssembly To Speed Up Our Web App By 20X
Google Devs - WebAssembly
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.
MDN - Clipboard
What Web Can Do Today - Clipboard (Copy & Paste)
Google Devs - Image Support for the Async Clipboard API
Share
Learn how the Web Share API can help users sharing your web app.
MDN - Share
Google Devs - Introducing the Web Share API
Google Devs - Registering as a Share Target
CSS Tricks - How to Use the Web Share API
The Web Share API
dev.to - How to implement the Web Share API with a fallback
Performance API
Learn about the Performance API and how it can help you monitor the performance of the device.
MDN - Performance
MDN - performance.measure()
CSS Tricks - Breaking Down the Performance API
Google Devs - Assessing Loading Performance
MDN - Performance Specifications
MDN - Performance Timeline
Gamepad API
Learn how the Gamepad API can help you integrate with various controllers such as an x-box or playstation controller
MDN - Using the Gamepad API
MDN - Gamepad API
luser - Gamepad Test
MDN - Implementing controls using the Gamepad API
Speech Recognition
Learn how to use the Speech Recognition API to analyze speech.
MDN - Using the Web Speech API
David Walsh - JavaScript Speech Recognition
MDN - SpeechRecognition
MDN - Web Speech API
Github - web-speech-api
What Web Can Do Today - Speech Recognition
Interaction Media Queries
Learn how to use Interaction Media Queries to optimize the user experience for the specific type of device.
Introducing CSS Interaction Media Queries
MDN - Media features
Touch Devices Should Not Be Judged By Their Size
Interaction Media Features and their potential
W3C - Interaction Media Features
What Web Can Do Today - Pointing Device Adaptation
Browser Extensions
Learn how to build browser extensions to enhance the functionality of your browser.
MDN - Browser Extensions
Chrome - What are extensions?
Chrome - Getting Started with Extensions
Youtube - Google Chrome Extensions
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).
Google Devs - Watch video using Picture-in-Picture
Picture-in-Picture Sample
CSS Tricks - An Introduction to Picture-in-Picture
dev.to - Implement Picture-in-Picture on the Web
Medium - How to use “picture in picture 📺” in JavaScript.
Proxies
Learn how to use proxies to intercept certain operations and implement custom behaviors.
MDN - Meta programming
MDN - Proxy
A practical guide to Javascript Proxy
Introducing Javascript ES6 Proxies
Medium - How to use JavaScript Proxies for Fun and Profit
Houdini
Learn about the Houdini project and get excited about the future of CSS.
Google Devs - Houdini, Demystifying CSS
web.dev - Smarter custom properties
CSS Houdini Experiments
Interactive Introduction to CSS Houdini
W3C - CSS Houdini Wiki
Google Devs - Houdini’s Animation Worklet
Project Fugu
Learn about Project Fugu project and get excited about the future of the Web.
Our commitment to a more capable web
Web Capabilities (Fugu)
Chromium Bugs - Fugu
Google Devs - Unlocking new capabilities for the web
Youtube - Unlocking New Capabilities for the Web
Controlling Access to Powerful Web Platform Features
Web Authentication API
Learn how to use the Web Authentication API to provide a strong authentication with public key cryptography.
MDN - Web Authentication API
W3C - Web Authentication: An API for accessing Public Key Credentials
Google Devs - Enabling Strong Authentication with WebAuthn
Introduction to Web Authentication: The New W3C Spec
Microsoft - Web Authentication and Windows Hello
Web Authentication: What It Is and What It Means for Passwords
Credentials Manager API
Learn about the Credentials Manager API proposal and how it can help authenticating users.
MDN - Credential Management API
Google Devs - The Credential Management API
Google Devs - Sign in Users
Google Devs - Save Credentials from Forms
What Web Can Do Today - Credentials
Native File System
Learn how the Native File System API proposal enables interacting with files on the user’s local device.
Google Devs - The Native File System API
Github - Native File System
W3C - Native File System
Native File System Web API - Chromium Security Model
Chromestatus - Native File System
W3C - File API
Shape Detection
Learn how the Shape Detection API proposal can be use to detect shapes such as faces or barcodes in pictures.
W3C - Accelerated Shape Detection in Images
web.dev - A Picture is Worth a Thousand Words
Github - Shape Detection API Specification
Introduction to the Shape Detection API
Face detection using Shape Detection API
Web Bluetooth
Learn how the Web Bluetooth API proposal can be used to connect with nearby devices.
MDN - Web Bluetooth API
Google Devs - Interact with Bluetooth devices
What Web Can Do Today - Bluetooth
W3C - Web Bluetooth
Web Bluetooth Samples
Web USB
Learn the Web USB API proposal can be used to connect with hardware through a cable.
MDN - USB
WICG - Web USB
Google Devs - Access USB Devices on the Web
What Web Can Do Today - Web USB
Web XR
Learn how to use Web XR API proposal for virtual- and augmented reality experiences.
MDN - WebXR Device API
Google Devs - Welcome to the immersive web
New API to Bring Augmented Reality to the Web
W3C - WebXR Device API
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.
MDN - Presentation API
What Web Can Do Today - Presentation Features
Google Devs - Present web pages to secondary attached displays
W3C - Presentation API
Network Information API
Learn how the Network Information API proposal can give you information about the state of the network.
MDN - Network Information API
Addy Osmani - Adaptive Serving
W3C - Network Information API
Network Information API Sample
What Web Can Do Today - Network Type & Speed
➤ Algorithms & Data structures
Data structures
Arrays
Learn how and when arrays should be used.
javascript.info - Arrays
Freecodecamp - Arrays, A Visual Introduction for Beginners
Wikipedia - Array data structure
MDN - Array
Queues & Stacks
Learn how and when queues and stacks should be used.
Stacks and Queues
Difference between Stack and Queue Data Structures
Data Structures: Stacks & Queues
Stacks vs. Queues In JavaScript
Trees
Learn how and when trees should be used.
Wikipedia - Tree (data structure)
Freecodecamp - Everything you need to know about tree data structure
Data Structure and Algorithms - Tree
Binary Indexed Tree
Learn how and when binary indexed trees should be used.
Wikipedia - Fenwick tree
What is the intuition behind a binary indexed tree?
Binary Indexed Tree or Fenwick Tree
Fenwick Tree / Binary Indexed Tree
Youtube - Binary Indexed Tree
Github - fast-binary-indexed-tree-js
Heap
Learn how and when heaps should be used.
Wikipedia - Heap (data structure)
Tutorialspoint - Heap Data Structure
Learning to Love Heaps
How to implement Heap Data structure in JavaScript
Youtube - Data Structures: Heaps
Red-black Tree
Learn how and when red-black trees should be used.
Wikipedia - Red–black tree
Painting Nodes Black With Red-Black Trees
Red-Black Tree
Red Black Trees in JavaScript
Github - Red–Black Tree
Trie
Learn how and when tries should be used.
Wikipedia - Trie
Trie (Insert and Search)
Trying to Understand Tries
Trie, Datastructure
Youtube - Data Structures: Tries
Practical Data Structures: Tries
Trie, visualization
K-D Tree
Learn how and when K-D trees should be used.
Hash Tables
Learn how and when hash tables should be used.
Wikipedia - Hash table
Hash tables explained
Basics of Hash Tables
Javascript Hash Table
Objects and Hash Tables in Javascript
Linked Lists
Learn how and when linked lists should be used.
Wikipedia - Linked list
Introduction to Linked Lists
Linked Lists in JavaScript
The Little Guide of Linked List in JavaScript
Graphs
Learn how and when graphs should be used.
Wikipedia - Graph theory
Implementation of Graph in JavaScript
Graphs and Graph Algorithms
The Javascript Developer’s Guide to Graphs
Analysis
Time complexity
Learn about time complexity and how it can be used to analyze an algorithm.
Wikipedia - Time complexity
Time Complexity of Algorithms
Freecodecamp - An Introduction to Time Complexity
8 time complexities that every programmer should know
Time Complexity Analysis in JavaScript
An intro to Algorithms
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.
Quora - What is the meaning of ‘order of growth’
Orders of Growth
Coursera - Order-of-Growth Classifications
Big O notation
Learn how to use Big O notation to classify the time complexity of an algorithm.
Wikipedia - Big O notation
Time Complexity/Big O Notation
Big O Notation in JavaScript
Big O in JS: The basic that you need to know
Big O in JavaScript
dev.to - What is Big O Notation, and Why is it Useful?
dev.to - Big-O Notation Useful guide
Space Complexity
Learn about space complexity and how it can be used to analyze an algorithm.
Space Complexity of Algorithms
Google Devs - Fix Memory Problems
Google Devs - Memory Terminology
Google Devs - How to Record Heap Snapshots
Debugging Memory Leaks in JavaScript
Wikipedia - Space complexity
Space Complexity
Algorithms
Sorting
Learn about the most important sorting algorithms and figure out what challenges there are involved with implementing one.
A Guide To Sorting Algorithms in JavaScript
dev.to - Sorting Algorithms with Javascript
Introduction to Sorting
Implementing Sorting Algorithms in JavaScript
Algorithms – Sorting Algorithms in JavaScript
Insertion Sort
Learn about the insertion sort algorithm.
Wikipedia - Insertion sort
Insertion Sort
Insertion Sort Algorithm
Insertion Sorting for Beginners in JS
Algorithms: Insertion Sort in JavaScript
Quicksort
Learn about the quicksort algorithm.
Wikipedia - Quicksort
A Quick Explanation of Quick Sort
QuickSort
Implementing Quicksort in JavaScript
Computer science in JavaScript: Quicksort
Mergesort
Learn about the mergesort algorithm.
Wikipedia - Merge sort
Merge Sort Algorithm in JavaScript
A Simplified Explanation of Merge Sort
Overview of merge sort
Freecodecamp - The Merge Sort Algorithm Explained
Heapsort
Learn about the heapsort algorithm.
Wikipedia - Heapsort
Heapify All The Things With Heap Sort
Heap Sort Algorithm
Heapsort Algorithm
Heap Sort
Searching
Learn about the most important searching algorithms and figure out what challenges there are involved with implementing one.
Wikipedia - Search algorithm
Search Algorithms with ES6
Introduction to Searching Algorithms
Implement linear and binary search algorithms with Javascript
Searching Algorithms In Javascript
Binary Search
Learn about the binary search algorithm.
Wikipedia - Binary search algorithm
How to implement a Binary search algorithm
Binary Search
What Is Binary Search, A Detailed Step-By-Step
Programming with JS: Binary Search
Binary Search In JavaScript
Breadth First Search
Learn about the breadth first search algorithm.
Wikipedia - Breadth-first search
Breaking Down Breadth-First Search
Breadth First Search in JavaScript
Github - Breadth-First Search (BFS)
The Magician’s Guide to Algorithms
Depth First Search
Learn about the depth first search algorithm.
Wikipedia - Depth-first search
Depth First Search Algorithm
Depth first and breadth first search on trees
Breadth-first vs Depth-first Tree Traversal
Github - Depth-First Search (DFS)
Dijkstra’s Algorithm
Learn about dijkstra’s algorithm.
Wikipedia - Dijkstra’s algorithm
Dijkstra’s algorithm
How to implement Dijkstra’s Algorithm
A Walkthrough of Dijkstra’s Algorithm
String Search
Learn about various algorithms for searching in strings.
Wikipedia - String-searching algorithm
Boyer Moore String Search
Boyer–Moore string-search algorithm
Hashing
Learn about hashing algorithms.
Wikipedia - Hash function
How Encryption Works
Cryptography for JavaScript: Hash Function
Github - hash.js
➤ Databases & Servers
Databases
Relational Databases
Learn about relational databases and how to use them.
Wikipedia - Relational database
Relational database
Everything you need to know about (Relational) Databases
What are relational databases?
What is a Relational Database Management System?
SQL
Learn how to write SQL statements to communicate with a database.
Learn SQL
Wikipedia - SQL
A beginners guide to SQL
The Last SQL Guide for Data Analysis You’ll Ever Need
SQL Tutorial
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.
What Is A Non Relational Database
Wikipedia - NoSQL
dev.to - Relational SQL vs. Non-Relational NoSQL Databases
Non-relational data and NoSQL
Non-Relational Database
Redis
Learn about the open-source non-relational database management system called Redis.
Redis
Try Redis
Wikipedia - Redis
An introduction to Redis data types and abstractions
Redis - Documentation
Redis: What and Why?
Tutorialspoint - Redis Tutorial
MongoDB
Learn about the open-source non-relational database management system called MongoDB.
MongoDB
MongoDB - Documentation
MongoDB - University
Tutorialspoint - MongoDB Tutorial
Youtube - MongoDB In 30 Minutes
Data Modelling
Learn how data modelling can help your database design.
Chapter 5 Data Modelling
Wikipedia - Database Model
Wikipedia - Database Modelling
What is Data Modelling?
Data Modeling Definition
ER Diagram
Learn how to model your data using ER diagrams.
Tutorialspoint - DBMS, Data Models
Entity Relationship Diagram
Youtube - Entity Relationship Diagram Tutorial
Wikipedia - Entity–relationship model
Entity Relationship Diagram
Keys
Learn how to figure out what types of keys to use and where to use them.
Introduction to Database Keys
7 Different Types of Database Keys
Database Management: Keys
Database Keys
Youtube - Database Keys
Indexing
Learn how to use indexing to speed up your database.
Indexing in Databases
Wikipedia - Database index
Database Indexes Explained
Indexing in Databases with EXAMPLES
What Does Indexing Do?
An in-depth look at Database Indexing
Indexing your database data — the easy way
Data Integrity
Learn how to assure the accuracy and consistency of data.
Wikipedia - Data Integrity
What is Data Integrity and Why Is It Important?
hat is Data Integrity?
What is Data Integrity?
Data Integrity
Youtube - Database Design, Data Integrity
Normalization
Learn how data normalization can help you decrease data redundancy and improve data integrity in your database.
Wikipedia - Database normalization
Database Normalization (Explained in Simple English)
What is Normalization?
Normal Forms in DBMS
Database normalization
Database Normalization Explained
Functional Dependencies
Learn how to find functional dependencies to improve your database design.
Full Functional Dependency in Database Normalization
Stackoverflow - Functional dependency and normalization
Tutorialspoint - DBMS, Normalization
Functional Dependencies and Normalization
DBMS Functional Dependency
Wikipedia - Armstrong’s axioms
Armstrong’s Axioms in Functional Dependency
Normal Forms
Learn how normal forms can help you normalize your database.
Wikipedia - Normal forms
1NF, 2NF, 3NF and BCNF in Database
Chapter 12 Normalization
Wikipedia - Boyce–Codd normal form
Boyce-Codd Normal Form (BCNF)
Wikipedia - Third normal form
Transactions
Learn how transactions can group a set of database tasks into a single execution unit.
Wikipedia - Database transaction
Stackoverflow - What is a database transaction?
Tutorialspoint - DBMS, Transaction
Why do you need to know transactions?
SQL Transactions
ACID
Learn about the ACID properties of transactions.
A beginner’s guide to ACID
DBMS Transaction Management: ACID Properties
ACID Properties in DBMS
Wikipedia - ACID
ACID properties of transactions
A Primer on ACID Transactions
Stackoverflow - How do ACID and database transactions work?
Serializability
Learn how to determine whether a schedule is serializable and leaves the database in a consistent state.
Wikipedia - Serializability
Transaction Serializability in DBMS
DBMS Serializability
View Serializability in DBMS Transactions
Conflict Serializability in DBMS
Locks
Learn about locks and when they should be used.
Wikipedia - Record locking
Database Locking: What, why and how?
A beginner’s guide to locking and lost updates
Monitoring SQL Database Locks
Implementation of Locking in DBMS
Deadlocks
Learn about deadlocks and why they should be avoided.
Deadlock in DBMS
Wikipedia - Deadlock
What is a Deadlock?
Oracle - Deadlocks
Deadlock Definition
Introduction to Deadlock
dev.to - Understanding SQL Server Deadlocks
Precedence graph
Learn how to create a precedence graph to test for conflict serializability of a schedule.
Wikipedia - Precedence graph
Youtube - How to draw a precedence graph
Precedence Graph to check Conflict Serializable Schedule
Testing for conflict serializablity
Precedence Graph, DBMS
Servers
Architectural Models
Learn about the fundamental architectural server models.
Server Architecture
Youtube - Architectural model
Architectural Model
Distributed Systems: Models and Design
Client-Server
Learn about the client-server model.
Wikipedia - Client-server model
Client Server Architecture
Understanding What Client Server Architecture Is All About
Wikipedia - Client-server
Client-server model (client-server architecture)
Client-Server Model
Learn more about Client-Server Model
Proxy Server
Learn about the proxy-server model.
Wikipedia - Proxy Server
Youtube - What is a Proxy Server?
What is a Proxy Server and How Does it Work?
Proxy Server Definition
What is a proxy server?
Peer-To-Peer
Learn about the peer-to-peer model.
Wikipedia - Peer-to-peer
Youtube - What is a Peer to Peer Network?
What’s a Peer-to-Peer (P2P) Network?
Peer-to-peer (P2P)
Make a P2P connection in 10 minutes
Middleware
Learn about middleware.
Wikipedia - Middleware
Middleware Definition
Quora - Why is Middleware important?
What is middleware?
What is Middleware? Technology’s Go-to Middleman
Request-Reply Protocol
Learn how computers communicate with eachother using the request-reply protocol.
Wikipedia - Request Response
Youtube - Event-Driven Architecture
Request/Reply
Enterprise Integration - Request-Reply
UDP
Learn about the UDP transport layer protocol.
UDP (User Datagram Protocol)
Wikipedia - User Datagram Protocol
User Datagram Protocol (UDP)
Youtube - Explained! UDP and TCP
User Datagram Protocol
TCP
Learn about the TCP transport layer protocol.
TCP (Transmission Control Protocol)
Wikipedia - Transmission Control Protocol
TCP/IP (Transmission Control Protocol/Internet Protocol)
Services and Segment structure in TCP
TCP and UDP in Transport Layer
REST API
Learn how an API can be designed to be RESTful.
Wikipeia - Representational state transfer
Learn REST: A RESTful Tutorial
Youtube - REST API concepts and examples
REST API Tutorial
What is a REST API?
CRUD
Learn about the CRUD operations.
Wikipedia - Create, read, update and delete
Codecademy - What is CRUD?
What is the Difference between REST and CRUD?
Youtube - Introduction to CRUD Operations
REST was NEVER about CRUD
Express
Learn about the Node.js web application framework called Express.
Express
Tutorialspoint - Express Framework
Youtube - Express.js & Node.js Course for Beginners
Understanding Node.js & Express.js fundamentals
Wikipedia - Express.js
GraphQL
Learn how to use the GraphQL query language.
GraphQL
Youtube - Introduction to GraphQL
Github - GraphQL Specification
The Fullstack Tutorial for GraphQL
GNU/Linux
Learn about the GNU/Linux operating system
Docker
Learn how to use Docker.
Docker
Wikipedia - Docker (software)
Docker for beginners
What is Docker?
Get Started, Part 1: Orientation and setup
SSH
Learn how to use SSH and learn how to connect to a device using an SSH client.
Wikipedia - Secure Shell
Secure Shell (SSH)
SSH command in Linux with Examples
How to Establish a Connection Using SSH
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.
➤ Contributors
Andreas Mehlsen | You? |
🔥 |
➤ License
Licensed under MIT.