Below is an ever-evolving tree of all aspects of web development. For brevity, many technology lists are limited to the most popular and highly regarded.
The links are safe to click and lead to official resources where possible.
Why?
There are many disparate sources to help developers navigate through web development. This aims to centralise a useful and comprehensive structure. Below is only an example before it is converted into other formats such as JSON, YAML and XML. Note, the structure may also change. I think a nested structure works well for now but it could be useful to develop a more graph-like structure which could be navigated through a custom interface.
Internally, it is being built and integrated into an educational platform for full-stack development called Stackweaver. It is ever-evolving because it will be used and developed as the platform is built and grown. It can also evolve through PRs :) It will come to inform the structure of many features including the full-stack curriculum, web docs (like MDN) and community structure.
If you want to get involved feel free to leave feedback here or: Discord Server, Subreddit, Twitter, Facebook.
The hope is that others also find this useful!
Thanks!
Damien.
-
Development Environment
- Local, staging, production
-
Development Tools
- Editors
- IDEs
-
Testing
-
Debugging
- Skills
-
Security
- Encryption
-
Workflow
- Productivity
- Estimation
-
Package management
-
Virtualisation
- VPS
- VirtualBox / Vagrant / VMWare
- Containers (see infrastructure section below)
-
Programming
- Principles
- Design Patterns
- Profiling
- Refactoring
- Benchmarking
- Paradigms
- Object-Oriented Programming (OOP)
- Functional Programming (FP)
- Procedural Programming
- Languages
- Java
- JavaScript
- Python
- C#
- Ruby
- Go
-
Design & Architecture
-
Collaboration
- Code Reviews
-
- gettext
- Geolocation
-
Data
- Formats
- JSON
- XML
- YAML
- Formats
-
Legal
- Software Licensing
- Copyright
-
Development Tools
-
UX
- Navigation
- Information Architecture
-
HTML
- Syntax
- Elements and attributes
- DOM
- Semantic HTML
- Template engines
- SEO
- Accessibility
-
CSS
- Syntax
- Attributes and values
- Layout
- Box model
- Float
- Positioning
- Display
- CSS Grid
- Flexbox
- Decoration
- Animation
- Preprocessors
- SCSS
- LESS
- Frameworks
- Bootstrap
- Bulma
- Materialize
- Semantic UI
- Architecture
- BEM
- OOCSS
- SMACSS
- CSS in JS
- Styled Components
- CSS Modules
-
JavaScript
- Syntax
- Control Structures
- DOM
- Manipulation
- Query
- Shadow DOM
- Object-oriented programming
- Prototypal inheritance
- Scope
- Mode (strict)
- XHR
- Modules
- Linters
- Package managers
- NPM
- Yarn
- Universal Applications (React Native)
- Frameworks
- Testing
- Jest
- Cyrpress
- Enzyme
- Selenium
- Type Checkers
- TypeScript
- Flow
-
Client
- Compatibility
- Progressive Web Apps
- PRPL Pattern
- RAIL Model
- Browser
- Web Assembly
- Storage
- Web Sockets
- Service Workers
- Location
- Caching
- Security
- CSRF
- Mobile Device
- React Native
- NativeScript
- Desktop
- Electron
- Operating Systems
- Android
-
JavaScript
- Server-side rendering
- Node
- APIs
- Static site generators
-
Frameworks
-
Web Servers
-
Security
- Authentication
- Authorisation
- Framework
-
Devops
- Continuous Integration (and Continuous Delivery)
-
Systems
- Windows
- Command Line
- Linux
- Terminal
- Scripting
- Bash
- Windows
-
Performance
- Caching
-
Databases
- Relational Database (RDBMS)
- NoSQL/Schemaless
- Indexing
- Data Warehousing
- Tools
- PHPMyAdmin, DBeaver
-
Architecture
- Service-Oriented
- Microservices
- Monolith
- Scalability
-
Infrastructure
- Automation
- Jobs/Workers
- Job Scheduling
- Job Queues
- Monitoring
- Containers
- Engines
- Orchestrators
- Communication
- Extract, Transform, Load (ETL)
- Logging
- Performance
- Load Testing
- Security
- Virtual Private Networks
- TLS
- Penetration Testing
- Authentication
- Devices
- YubiKey
- Devices
- Serverless
- Cloud
- Platforms
- Dedicated Hosting
- Resiliency
- Networking
- Load Balancers
- DNS