andreasbm/web-skills
andreasbm/web-skills sits at 7.7k stars on GitHub, written primarily in JavaScript. A visual overview of useful skills to learn as a web developer
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Snapshot
Top contributors
Show top contributors
Web Skills
Web Skills is a visual overview of useful skills to learn as a web developer. Go to https://andreasbm.github.io/web-skills to check out the visual overview or scroll through this readme to get the overview as a list. If you like the project you are very welcome to become a stargazer 🤩
📖 Table of Contents
➤ Table of Contents
- ➤ FAQ
- What is Web Skills?
- How did you choose the skills?
- How can I support you?
- How can I get involved?
- How can I keep track of what skills I know?
- I am overwhelmed! Help me!
- Why haven't you included XYZ Technology?
- What does the "experimental" banner mean?
- How can I get in contact with you?
- ➤ 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
- Prototype
- 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
- The why
- Screen Readers
- Accessibility tree
- ARIA
- Accessible HTML
- Alt text
- Accessible CSS
- Accessible forms
- UI States
- Keyboard Accessibility
- Focus
- Accessible Colors
- Laws & Policies
- Audits
- ➤ Web Components
- Custom Elements
- HTML Templates
- Shadow DOM
- Shadow Parts
- Slots
- Best practices
- Constructible Stylesheets
- Form Participation
- ➤ Progressive Webapps
- API's
- Storage
- Routing
- History API
- Service Workers
- Offline first
- Push notifications
- Web App manifest
- Add to homescreen
- Pointer Events
- Loading Performance
- App shell
- Render-Blocking Resources
- Compression
- Performance metrics
- Largest Contentful Paint
- Total Blocking Time
- Time to Interactive
- Lazy Loading
- Dynamic Import
- Offscreen images
- Critical Request Chains
- Tree shaking
- Codesplitting
- PRPL Pattern
- Resource Prioritization
- Caching
- Rendering Performance
- Rendering
- Event loop
- Microtask
- Stack
- Heap
- RAIL Model
- requestAnimationFrame
- requestIdleCallback
- Critical Rendering Path
- The Pixel Pipeline
- Style calculations
- Transforms
- Paint areas
- Layout Trashing
- Layers
- Debounce
- CSS Containment
- Web Workers
- Security
- HTTPS
- Browser Sandbox
- OWASP
- Cross-Site Scripting
- Clickjacking
- Content Security Policy
- Audits
- Performance budgets
- Lighthouse
- Chrome DevTools
- ➤ 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
- Package Managers
- ➤ Frameworks & Libraries
- lit-element
- Vue
- React
- Angular
- Svelte
- Stencil
- ➤ Testing
- Testing Methodologies
- Unit Testing
- Integration Testing
- System Testing
- Acceptance Testing
- Smoke Testing
- Performance Testing
- Usability Testing
- White Box Testing
- Black Box Testing
- Automated Testing
- Manual Testing
- Continuous integration
- A/B Testing
- Test Runners
- Karma
- Mocha
- Jasmine
- Cypress
- Ava
- Best Practices
- Testing Methodologies
- ➤ Architecture & paradigms
- Paradigms
- Programming Paradigms
- Object Oriented Programming
- S.O.L.I.D
- Functional programming
- Recursion
- Higher-Order Functions
- Currying
- Monads
- Architecture
- Design Patterns
- Singleton
- Observer
- Prototype
- Bridge
- Proxy
- Chain of responsibility
- Constructor
- CSS Methodologies
- BEM
- SMACSS
- OOCSS
- ➤ Team Collaboration
- Version Control
- Git
- Github
- Bitbucket
- Management
- Agile Development
- Scrum
- Kanban
- Waterfall Development
- Test Driven Development
- ➤ Design & UX
- Color Theory
- Color Wheel
- Typography
- Font Size
- Line Spacing
- C.R.A.P
- Contrast
- Repetition
- Alignment
- Proximity
- Consistency
- Spacing
- Error Handling
- Loading
- The Golden Ratio
- Mobile First
- Hit Targets
- Design Systems
- Material Design
- Fluent Design
- Accessibility
- Best Practices
- Color Theory
- ➤ The Modern Web
- Streams
- Media Streams
- Media Recorder
- Web RTC
- Screen Capture
- Generators
- Speech Synthesis
- Web Sockets
- Geolocation
- Device orientation & motion
- Fullscreen
- Variable Fonts
- HTTP/2
- Payment Request API
- Web Audio
- Observers
- Mutation Observer
- Intersection Observer
- Resize Observer
- Performance Observer
- Scrollsnapping
- Web Assembly
- Beacon
- Clipboard
- Share
- Performance API
- Gamepad API
- Speech Recognition
- Interaction Media Queries
- Browser Extensions
- Pointer Lock API
- Picture In Picture
- Proxies
- Houdini
- Project Fugu
- Web Authentication API
- Credentials Manager API
- Native File System
- Shape Detection
- Web Bluetooth
- Web USB
- Web XR
- Presentation
- Network Information API
- Streams
- ➤ Algorithms & Data structures
- Data structures
- Arrays
- Queues & Stacks
- Trees
- Binary Indexed Tree
- Heap
- Red-black Tree
- Trie
- K-D Tree
- Hash Tables
- Linked Lists
- Graphs
- Analysis
- Time complexity
- Cost model
- Order of Growth
- Big O notation
- Space Complexity
- Algorithms
- Sorting
- Insertion Sort
- Quicksort
- Mergesort
- Heapsort
- Searching
- Binary Search
- Breadth First Search
- Depth First Search
- Dijkstra's Algorithm
- String Search
- Hashing
- ➤ 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
- ACID
- Serializability
- Locks
- Deadlocks
- Precedence graph
- Servers
- Architectural Models
- Client-Server
- Proxy Server
- Peer-To-Peer
- Middleware
- Request-Reply Protocol
- UDP
- TCP
- REST API
- CRUD
- Express
- GraphQL
- GNU/Linux
- Docker
- SSH
- ➤ Contributors
- ➤ License
➤ 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.
-
MDN - HTML Basics
-
-
Codecademy - Learn HTML
Basic Tags
Get familiar with the basic HTML tags
-
-
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.
-
-
Google Web - Forms
-
SEO
Learn how to make your content search-friendly.
-
web.dev - Discoverable
-
-
-
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.
-
-
SVG on the web
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.
-
-
-
Supercharged - CSS Selectors
-
-
-
-
Selectors
Learn about CSS selectors and how to effeciently target DOM elements.
-
-
-
CSS Tricks - Child and Sibling Selectors
-
-
Specificity
Learn what specificity means and how to use it when writing CSS.
-
-
-
dev.to - CSS Specificity
-
Specificity Calculator
-
Pseudo Selectors
Learn how to use pseudo selectors.
-
-
-
When do the :hover, :focus, and :active pseudo-classes apply?
-
-
Box Model
Learn what the CSS box model means.
-
-
-
Margin Collapsing
Learn about margin collapsing.
-
-
Margin Collapse in CSS: What, Why, and How
-
-
-
What’s the Deal with Margin Collapse?
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.
-
-
-
-
Flexbox Froggy
-
Flexbox Defense
Grid
Learn how to create layouts using CSS Grid.
-
-
-
-
CSS Grid Garden
-
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.
-
-
Responsive Web Design Fundamentals by Google
-
-
-
-
Codelabs - Responsive Design
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.
-
-
-
The CSS Workshop - 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.
-
-
-
-
CSS Variables explained with 5 examples
Best Practices
Learn the best practices of writing CSS.
-
-
-
Speckyboy - Good and bad CSS practices
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.
-
-
Freecodecamp - An introduction to Spread syntax
-
Object rest and spread properties
Destructuring
Learn how destructuring can help you when working with objects.
-
-
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.
-
-
-
Introduction to the DOM
-
htmldom.dev
DOM Manipulation
Learn how to query HTML elements through Javascript and manipulate them.
-
-
Events
Learn how to dispatch and listen for events.
-
-
-
-
-
JavaScript Events Explained
-
-
-
Event order
Objects
Learn how to create and use objects.
-
-
-
-
-
-
-
-
-
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.
-
-
-
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.
-
-
-
-
-
Alligator - Fetch API
-
-
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.
-
-
-
New Intl APIs in JavaScript
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
-
-
Best Practices
Learn the best practices of writing Javascript.
-
-
Airbnb - JavaScript Style Guide
-
-
-
The Browser
Standardization
Learn why web standards are important and how new specifications are standardised.
-
Wikipedia - Web Standards
-
What Are Web Standards?
-
A Comprehensive Explanation of Web Standards
W3C
Learn what W3C are doing and how they are moving the web forward.
-
W3C - About
-
-
W3C - Process
-
Web Standards Guide
-
-
TC39
Learn what TC39 are doing and how they are moving the web forward.
-
The TC39 process for ECMAScript features
-
-
Ecma International - Programme of work
-
WHATWG
Learn what WHATWG are doing and how they are moving the web forward.
-
WHATWG - FAQ
-
WHATWG - Standards
-
-
W3C vs. WHATWG HTML5 Specs
-
WHATWG - HTML
-
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
-
Browser Engines
Learn what a browser engine is and get an overview of the browser landscape and market share.
-
-
-
HTML5 Rocks - How Browsers Work
-
Demystifying Browsers
Webkit
Learn about the Webkit browser engine.
-
Webkit
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.
-
-
-
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.
-
-
-
-
Can I use
Debugging
Learn about the basics concepts of debugging.
-
-
-
Developer console
Learn how to use the developer console to debug your code.
-
-
-
-
-
-
-
-
14 JavaScript debugging tips
-
-
-
-
➤ Accessibility
The why
Learn what accessibility is and why it is important.
-
-
-
Udacity - Chromevox Lite
-
-
Abilitynet - Why Accessibility Matters
-
-
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
-
-
-
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.
-
-
-
-
Accessible HTML
Learn how to write HTML in such as way that assistive technology better understands it.
-
-
-
-
-
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.
-
-
Itnext - Form Accessibility Gudie
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.
-
-
-
-
-
-
-
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.
-
-
-
-
Designing accessible color systems
Laws & Policies
Learn about the governmental policies related to web accessibility.
-
-
-
-
-
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!
-
-
-
-
-
Webaim - Wave
-
Google Chrome - NoCoffee Extension
-
Digital A11Y - Accessibility Plugins
-
-
WCAG 2.0 checklists
-
➤ 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.
-
-
-
-
-
-
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.
-
-
-
-
-
-
Chrome Status - ::part and ::theme
Slots
Learn how to compose Custom Elements by using slots.
-
-
-
-
Component.kitchen - A history of the HTML slot element
Best practices
Get familiar with best practices when it comes to building Web Components.
-
-
Webcomponents.org - Web Components Best Practices
-
-
Constructible Stylesheets
Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.
-
-
W3C - Constructable Stylesheet Objects
-
-
-
-
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
-
-
-
-
-
➤ Progressive Webapps
API's
Storage
Learn how to store data for your web app.
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
Service Workers
Learn how to register a service worker to provide a rich native-like experience.
-
-
-
-
-
-
-
-
-
-
Caching best practices
Offline first
Learn how to make your web app working offline with an offline first approach.
-
-
-
Offline First
-
-
-
-
-
-
-
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.
-
-
-
Squoosh
-
-
-
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.
-
-
Addy Osmani - Lazy Loading Images
-
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.
-
-
How to Clean Up Your JavaScript
Codesplitting
Learn about codesplitting an how dividing your code into multiple chunks makes your web app faster.
-
-
All you need to know about JavaScript code splitting
PRPL Pattern
Learn how to use the PRPL pattern to make web apps more performant.
-
-
-
Ben Schwarz - Real world performance
-
Resource Prioritization
Learn about resource prioritization and how to inform the browser about the importance of a resource.
-
-
Eliminating Roundtrips with Preconnect
-
-
-
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.
-
-
-
-
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
-
-
-
-
-
Microtask
Learn about microtasks and the microtask queue.
-
-
-
-
Stack
Learn about the stack and how to investigate the staack trace when debugging.
-
Javascript Stack Trade - Using it to debug
-
-
-
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.
-
-
Pixels are expensive
-
-
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.
-
-
-
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.
-
-
Beware JavaScript Layout Thrashing!
-
Layout thrashing cheatsheet
Layers
Learn about layers and how to promote an element to another layer.
-
-
-
Layers and how to force them
Debounce
Learn how to debounce computationally expensive code to avoid blocking the UI.
-
-
-
Level Up - Debounce in JavaScript
CSS Containment
Learn how to use CSS containment to improve the performance of your web app.
-
-
-
An introduction to 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.
-
-
-
-
Browser Sandbox
Learn about the sandbox security mechanism and how it restricts the execution environment.
-
-
-
Howtogeek - Sandboxes Explained
OWASP
Learn about the OWASP organization and how they help with web application security.
-
-
OWASP - About
-
-
OWASP - Cheatsheets
-
-
OWASP Top 10 Security Risks
-
Cross-Site Scripting
Learn about cross-site scripting and how it is possible mitigate these kind of attacks.
-
-
-
-
Excess XSS
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.
-
-
-
Investigate animation performance with DevTools
➤ Build tools
Package Managers
Learn about package managers and how they make managing dependencies easier.
-
-
Guide to JavaScript frontend package managers
NPM
Learn about NPM and how it can be used to manage dependencies.
-
npmjs - About npm
-
-
-
An Absolute Beginner's Guide to Using npm
Yarn
Learn about Yarn and how it can be used to manage dependencies.
-
Yarnpkg - Getting Started
-
Facebook Engineering - Yarn
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.
-
Rollup - Introduction
-
How to Bundle JavaScript With Rollup
Webpack
Learn how you can use Webpack to bundle your code.
-
Webpack - Getting Started
-
Webpack: A Gentle Introduction to the Module Bundler
Parcel
Learn how you can use Parcel to bundle your code.
-
Parcel - Getting Started
-
Snowpack
Learn how Snowpack can replace the traditional app bundler during development.
-
Snowpack
-
-
-
Pika - About
-
Linters and formatters
Learn how you can improve your code quality with linters and formatters.
-
Improve Your JavaScript Code Quality With Linters
-
Prettier
Learn how you can use Prettier to format your code.
-
Prettier - What is Prettier?
-
-
-
ESLint
Learn how you can use ESLint to lint your code.
-
Eslint - Getting Started
-
-
Prettier vs ESLint: What’s The Difference?
Task Runners
Learn about task runners and how you can automate code execution.
-
The Advantages of Using Task Runners
-
NPM Scripts
Learn about NPM scripts and how you can run your own.
-
-
Helpers and tips for npm run scripts
Transpilers
Learn what transpilers are and why we need them.
-
-
What JavaScript Programmers Need to Know about Transpilers
-
Babel
Learn about Babel and how you can use it to transpile your code.
-
-
Babel - What is Babel?
-
-
A Beginner’s Guide to Babel
-
Typescript
Learn how to use Typescript and how it can help making your code typesafe.
-
Typescript - Documentation
-
-
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.
-
SASS - Guide
-
PostCSS
Learn about PostCSS and how you can use its ecosystem of plugins to extend your CSS build pipeline.
-
PostCSS
-
-
-
Getting started with PostCSS in 2019
Node.js
Learn how to use Node.js.
-
Node.js
-
Introduction to Node.js
-
-
➤ Frameworks & Libraries
lit-element
Learn how to use lit-element for creating fast, lightweight web components.
-
lit-element
-
-
Vaadin - Creating a LitElement project
-
Vue
Learn about Vue and how you can use it for building web apps.
-
Vue
-
Vue - CLI
-
Getting Started with Vue
React
Learn about React and how you can use it for building web apps.
-
React
-
-
Angular
Learn about Angular and how you can use it for building web apps.
-
Angular
-
-
Angular - CLI
Svelte
Learn about Svelte and how it can convert your component into highly efficient imperative code.
-
Svelte
-
-
Stencil
Learn how Stencil can be used for generating small, fast web components.
-
Stencil
-
-
➤ Testing
Testing Methodologies
Learn about various software testing methodologies and why it is important to test your code.
-
-
Software Testing Methodologies
-
Learn The Methods & Tools
Unit Testing
Learn about unit testing and how it can be used to test individual units of code.
-
Unit Testing Tutorial
-
-
-
Integration Testing
Learn about integration testing and how it can be used to test modules as a group.
-
-
-
Integration Testing
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.
-
-
-
A/B Testing
-
Test Runners
Learn about test runners and how they can help running tests.
-
Classifications of Testing Software
-
-
Karma
Learn about the Karma test runner.
-
Karma
-
Mocha
Learn about the Mocha testing framework.
-
Mocha
-
-
Jasmine
Learn about the Jasmine testing frameworks.
-
Jasmine
-
Cypress
Learn how to use Cypress for end-to-end-testing.
-
Cypress
-
End-to-End Testing with Cypress
Ava
Learn about the Ava test runner.
-
-
A Fresh Take On JavaScript Testing
-
Best Practices
Learn about the best practices when it comes to testing.
-
-
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.
-
-
Introduction of Programming Paradigms
-
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.
-
An introduction to functional programming in JavaScript
-
-
-
-
-
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.
-
-
JavaScript: Currying and Partial Application
-
-
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.
-
-
-
-
Design Patterns
-
JavaScript 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.
-
The Constructor Pattern
-
-
Difference between Constructor pattern and Prototype pattern
CSS Methodologies
Learn how CSS can be structured using CSS methodologies.
-
A Look at Some CSS Methodologies
-
-
Understanding CSS Writing Methodologies
BEM
Learn about the BEM methodology and when it should be used.
-
Get BEM
-
-
SMACSS
Learn about the SMACSS methodology and when it should be used.
-
SMACSS
-
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
-
-
Git Hint
Github
Learn how to use Github.
-
-
GitHub Learning Lab
-
Bitbucket
Learn how to use 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.
-
-
What is agile methodology?
-
What is Agile Software Development?
Scrum
Learn about scrum and when to use it.
-
Scrum Tutorial
-
Kanban
Learn about kanban and when to use it.
-
-
What is kanban?
-
Kanban Fundamentals
Waterfall Development
Learn about waterfall development and when to use it.
-
-
Waterfall vs. Agile
-
Waterfall Model: What and when
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.
-
All you need to know about colors in UI Design
-
The Role of Color in UX
-
10 Questions of Color Theory
-
-
-
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
-
-
-
-
-
-
A Crash Course in Typography
-
Type Classifications
-
Google Fonts
-
-
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
-
-
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
-
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
-
-
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.
-
-
-
Contrast In Design
-
Fully understanding contrast in design
Repetition
Learn how the principles of repetition can help you when designing.
-
-
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.
-
-
-
The Art Of Alignment In Graphic Design
-
Introduction to Alignment
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.
-
-
Consistency, A Key Design Principle
-
-
-
Spacing
Learn how to use space in your design.
-
-
-
How To Use 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.
-
-
UI Error Handling
-
Loading
Learn how a loading state can improve the user experience.
-
-
-
Design and code responsive Skeleton Screens
-
-
A Bone to Pick with Skeleton Screens
-
-
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
-
-
-
-
-
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.
-
-
-
A Hands-On Guide to Mobile-First Responsive Design
-
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.
-
Microsoft - Fluent Design System
-
-
-
-
-
Accessibility
Learn how and why it is important to design for accessibility.
-
-
-
Designing Accessible Experiences at Scale
-
-
-
Accessibility in government
-
Best Practices
Learn about some of the best practices when designing.
-
13 Website Design Best Practices For 2019
-
-
Refactoring UI
-
-
Dieter Ram' 10 principles for good design
➤ The Modern Web
Streams
Learn about streams and how they can help you effeciently transporting data.
-
-
-
Experimenting with the Streams API
-
WHATWG - Streams
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.
-
-
-
-
W3C - Media Capture and Streams
Media Recorder
Learn how to use the media recorder API to record media streams.
-
-
Media Recorder API Demo
-
-
What Web Can Do Today - Recording Media
Web RTC
Learn how to use Web RTC for establishing real-time communication.
-
-
WebRTC - Getting Started
-
WebRTC samples
-
-
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.
-
-
Functional JavaScript - Streams
-
-
-
-
-
-
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.
-
-
-
David Walsh - Fullscreen API
Variable Fonts
Learn how to use variable fonts and how it is possible to customize fonts without the need for loading more.
-
v-fonts
-
-
-
HTTP/2
Learn about the faster and more convenient HTTP/2 protocol.
-
-
-
-
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.
-
-
-
-
-
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.
-
Javascript Observers and You
-
-
-
Mutation Observer
Learn how to use the Mutation Observer API to get informed about changes to the DOM.
-
-
-
-
-
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.
-
-
-
-
-
-
-
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.
-
-
-
Share
Learn how the Web Share API can help users sharing your web app.
-
-
-
-
-
The Web Share API
-
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
-
-
-
luser - Gamepad Test
-
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.
-
-
-
-
Interaction Media Features and their potential
-
-
Browser Extensions
Learn how to build browser extensions to enhance the functionality of your browser.
-
-
Chrome - What are 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).
-
-
Picture-in-Picture Sample
-
-
-
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.
-
-
-
CSS Houdini Experiments
-
Interactive Introduction to CSS Houdini
-
-
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
-
-
-
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.
-
-
-
-
-
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.
-
-
-
-
-
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.
-
-
-
-
-
Face detection using Shape Detection API
Web Bluetooth
Learn how the Web Bluetooth API proposal can be used to connect with nearby devices.
-
-
-
-
W3C - Web Bluetooth
-
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.
-
-
-
-
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.
-
-
-
-
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.
-
Stacks and Queues
-
-
-
Trees
Learn how and when trees should be used.
-
-
-
Binary Indexed Tree
Learn how and when binary indexed trees should be used.
-
-
What is the intuition behind a binary indexed tree?
-
-
-
-
Heap
Learn how and when heaps should be used.
-
-
-
-
How to implement Heap Data structure in JavaScript
-
Red-black Tree
Learn how and when red-black trees should be used.
-
-
-
-
-
Trie
Learn how and when tries should be used.
-
-
-
-
Trie, Datastructure
-
-
-
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.
-
-
Hash tables explained
-
Basics of Hash Tables
-
-
Linked Lists
Learn how and when linked lists should be used.
-
-
Introduction to Linked Lists
-
-
Graphs
Learn how and when graphs should be used.
-
-
-
Graphs and Graph Algorithms
-
Analysis
Time complexity
Learn about time complexity and how it can be used to analyze an algorithm.
-
-
-
-
8 time complexities that every programmer should know
-
Time Complexity Analysis in JavaScript
-
Cost model
Learn how to setup a cost model for an algorithm.
-
-
Analysis of Algorithms
-
Order of Growth
Learn how to make an order-of-growth classification to classify the cost model.
-
-
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.
-
-
-
-
-
-
-
Space Complexity
Learn about space complexity and how it can be used to analyze an algorithm.
-
-
-
-
-
-
-
Space Complexity
Algorithms
Sorting
Learn about the most important sorting algorithms and figure out what challenges there are involved with implementing one.
-
-
-
-
-
Algorithms – Sorting Algorithms in JavaScript
Insertion Sort
Learn about the insertion sort algorithm.
-
-
-
Insertion Sort Algorithm
-
-
Quicksort
Learn about the quicksort algorithm.
-
-
-
-
-
Computer science in JavaScript: Quicksort
Mergesort
Learn about the mergesort algorithm.
-
-
-
-
Overview of merge sort
-
Heapsort
Learn about the heapsort algorithm.
-
-
-
-
-
Heap Sort
Searching
Learn about the most important searching algorithms and figure out what challenges there are involved with implementing one.
-
-
-
-
-
Searching Algorithms In Javascript
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.
-
-
Depth First Search Algorithm
-
-
-
Dijkstra's Algorithm
Learn about dijkstra's algorithm.
-
-
Dijkstra’s algorithm
-
-
String Search
Learn about various algorithms for searching in strings.
-
-
Boyer Moore String Search
-
Hashing
Learn about hashing algorithms.
-
-
How Encryption Works
-
-
Github - hash.js
➤ Databases & Servers
Databases
Relational Databases
Learn about relational databases and how to use them.
-
-
Relational database
-
-
-
SQL
Learn how to write SQL statements to communicate with a database.
-
-
-
A beginners guide to SQL
-
-
SQL Tutorial
MySQL
Learn about the open-source relational database management system called MySQL.
-
MySQL
-
-
-
MySQL Definition
-
Getting Started with MySQL
PostgreSQL
Learn about the open-source relational database management system called PostgreSQL.
-
PostgreSQL
-
-
PostgreSQL Tutorial
-
Postgres Guide
Non-relational Databases
Learn about non-relational databases and how to use them.
-
What Is A Non Relational Database
-
-
-
-
Non-Relational Database
Redis
Learn about the open-source non-relational database management system called Redis.
-
Redis
-
Try Redis
-
-
-
-
-
MongoDB
Learn about the open-source non-relational database management system called MongoDB.
-
-
MongoDB - Documentation
-
MongoDB - University
-
-
Data Modelling
Learn how data modelling can help your database design.
-
Chapter 5 Data Modelling
-
-
-
-
ER Diagram
Learn how to model your data using ER diagrams.
-
-
Entity Relationship Diagram
-
-
-
Entity Relationship Diagram
Keys
Learn how to figure out what types of keys to use and where to use them.
-
-
7 Different Types of Database Keys
-
Database Management: Keys
-
Database Keys
-
Indexing
Learn how to use indexing to speed up your database.
-
-
-
Database Indexes Explained
-
-
What Does Indexing Do?
-
-
Data Integrity
Learn how to assure the accuracy and consistency of data.
-
-
What is Data Integrity and Why Is It Important?
-
hat is Data Integrity?
-
What is Data Integrity?
-
-
Normalization
Learn how data normalization can help you decrease data redundancy and improve data integrity in your database.
-
-
-
-
-
Database normalization
-
Database Normalization Explained
Functional Dependencies
Learn how to find functional dependencies to improve your database design.
-
Full Functional Dependency in Database Normalization
-
-
-
Functional Dependencies and Normalization
-
-
-
Armstrong's Axioms in Functional Dependency
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.
-
-
-
-
Why do you need to know transactions?
-
ACID
Learn about the ACID properties of transactions.
-
A beginner’s guide to ACID
-
-
-
-
ACID properties of transactions
-
A Primer on ACID 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.
-
-
Database Locking: What, why and how?
-
-
-
Deadlocks
Learn about deadlocks and why they should be avoided.
-
-
-
-
Oracle - Deadlocks
-
Deadlock Definition
-
Introduction to Deadlock
-
Precedence graph
Learn how to create a precedence graph to test for conflict serializability of a schedule.
-
-
-
Precedence Graph to check Conflict Serializable Schedule
-
Testing for conflict serializablity
-
Servers
Architectural Models
Learn about the fundamental architectural server models.
-
-
-
Architectural Model
-
Distributed Systems: Models and Design
Client-Server
Learn about the client-server model.
-
-
Client Server Architecture
-
Understanding What Client Server Architecture Is All About
-
Wikipedia - Client-server
-
Client-server model (client-server architecture)
-
-
Proxy Server
Learn about the proxy-server model.
-
-
-
What is a Proxy Server and How Does it Work?
-
-
What is a proxy server?
Peer-To-Peer
Learn about the peer-to-peer model.
-
-
-
What's a Peer-to-Peer (P2P) Network?
-
-
Middleware
Learn about middleware.
-
-
Middleware Definition
-
-
What is middleware?
-
Request-Reply Protocol
Learn how computers communicate with eachother using the request-reply protocol.
-
-
-
Request/Reply
-
Enterprise Integration - Request-Reply
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.
-
-
Learn REST: A RESTful Tutorial
-
-
REST API Tutorial
-
What is a REST API?
CRUD
Learn about the CRUD operations.
-
-
-
What is the Difference between REST and CRUD?
-
-
REST was NEVER about CRUD
Express
Learn about the Node.js web application framework called Express.
-
Express
-
-
-
-
GraphQL
Learn how to use the GraphQL query language.
-
GraphQL
-
-
-
The Fullstack Tutorial for GraphQL
GNU/Linux
Learn about the GNU/Linux operating system
-
Linux and the GNU System
-
-
What is GNU/Linux?
-
GNU Linux
Docker
Learn how to use Docker.
-
Docker
-
-
Docker for beginners
-
-
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.
-
-
Secure Shell (SSH)
-
-
How to Establish a Connection Using SSH
➤ Contributors
 | |
|---|---|
| Andreas Mehlsen | You? |
| 🔥 |
➤ License
Licensed under MIT.
Related repositories
Storybook is a frontend workshop maintained at storybookjs/storybook. It renders UI components and pages in isolation from your main application. Core renderers include React, Angular, Vue 3, Web Components, HTML, Ember, Svelte, and Preact, plus React Native and community support for Qwik and SolidJS. It's released under the MIT license.
Bootstrap is an open-source front-end framework maintained at twbs/bootstrap. It ships compiled and minified CSS and JavaScript for building responsive, mobile-first sites, is licensed under MIT, and the release referenced throughout the README's install instructions is v5.3.8. The project was created by Mark Otto and Jacob Thornton, and its documentation is built with Astro and hosted at getbootstrap.com.
Electron (electron/electron on GitHub) is an open-source, MIT-licensed framework for building cross-platform desktop apps with JavaScript, HTML, and CSS on top of Node.js and Chromium. The README covers installing it as a dev dependency through npm, lists platform support for macOS, Windows, and Linux, and points to a companion tool, Electron Fiddle, for trying the API before starting a full project.
App Ideas Collection is a GitHub repository maintained by Florin Pop and Jim Medlock that catalogs application ideas developers can build to practice their skills, organized into three difficulty tiers. Each entry defines an objective, user stories, optional bonus features, and resource links rather than a bare project name, and the repository is sponsored by CodeRabbit and licensed under MIT.
Quick answers
How active is development on andreasbm/web-skills?
The most recent commit recorded on andreasbm/web-skills was 2.6 years ago, based on the GitHub push timestamp. The repository has 729 forks — one of the better signals of community interest.
Is andreasbm/web-skills open source?
TopGit's metadata for andreasbm/web-skills does not record a license. Most public repositories on GitHub ARE open source, but the exact terms vary — verify by opening the LICENSE file directly.
What topics is andreasbm/web-skills associated with?
GitHub's repository topics for andreasbm/web-skills: "accessibility", "algorithms", "architecture", "backend", "build-tools", "css", "design", "frameworks", "html", "javascript", "pwa", "testing", "web-components". TopGit's editorial category is Frontend.
Where can I see andreasbm/web-skills in action?
The project maintains a homepage at https://andreasbm.github.io/web-skills/. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about andreasbm/web-skills?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/andreasbm/web-skills is the definitive source.
Read full README in the tab above.
Want a second opinion on web-skills?
Ask an AI that can read this page — one click and you get its take on web-skills.