Modern Web Developer

• Modern Web Developer
  • Prerequire
  • DevTools
  • Version Control
  • Environment
  • Basic Background
  • Back-end
  • Front-end
  • DevOps

Prerequire

• HTML
• CSS
• Javascript

DevTools

• Visual Studio Code
• Chrome DevTools

Version Control

• Git
• Version control host (eg. Github, Bitbucket, GitLab)

Environment

• Virtual Machine (eg. VirtualBox)
• Container (eg. Docker)

Basic Background

• Data Format (eg. CSV, JSON, XML)

Back-end

• Node.js
  • Foundation
    • The Node.js
      • RAM vs. I/O latency
      • Blocking vs. Non-Blocking
      • Event-driven Programming
      • Event Loop
      • Blocking The Event Loop
      • Installing Node.js
    • Using Node.js to execute scripts
  • Node Projects
    • The Node Package Manager (eg. Npm, Yarn)
      • node_module
    • The package.json configuration file
    • Global vs. local package installation
    • Version Manager (eg. Nvm)
  • Framework (eg. Express, Hapi, Sails.js)
    • The model-view-controller pattern
    • Defining Pug templates
    • Building a front-end controller
    • Defining routes
    • Using REST
    • Reading POST data
    • Building Handlebars helpers
    • Adding middleware
  • File System
    • Synchronous vs. asynchronous I/O
    • Path and directory operations
    • __dirname and __filename
    • Asynchronous file reads and writes
  • Data Sources
    • How Node.js connects to databases
    • RDBMS databases (eg. MySQL)
    • NoSQL Database (eg. MongoDB, Redis)
    • Performing CRUD operations
  • RESTful APIs
  • Web Server (eg. Nginx)
  • Environment
  • Authentication (eg. JWT, OAuth 2.0)
  • Testing (eg. Mocha, Jest)

Front-end

• HTML & Pre-Processor (eg. Pug)
• CSS & Pre-Processor (eg. Sass, Less, Stylus)
• CSS Architecture (eg. BEM)
• CSS Framework (eg. Bootstrap, Ant Design)
• Javascript
  • Fundamentals
    • Using The Console
    • Variables (eg. var, let, const)
    • Data Types in JavaScript
    • Type Conversion
    • Numbers & The Math Object
    • String Methods & Concatenation
    • Arrays & Array Methods
    • Object Literals
    • Dates & Times
    • If Statements & Comparison Operators
    • Switches
    • Function Declarations & Expressions
    • A Look At The Window Object
    • Block Scope With let & const
    • Regular Expressions
  • DOM Manipulation & Events
    • What Is The DOM?
    • Examining The Document Object
    • DOM Selectors For Single Elements
    • DOM Selectors For Multiple Elements
    • Traversing The DOM
    • Creating Elements
    • Removing & Replacing Elements
    • Event Listeners & The Event Object
    • Mouse Events
    • Keyboard & Input Events
    • Local & Session Storage
  • JavaScript Patterns
    • What Are Patterns?
    • Module & Revealing Module Pattern
    • Singleton Pattern
    • Factory Pattern
    • Observer Pattern
    • Mediator Pattern
  • ES5
    • Constructors & the 'this' Keyword
    • Built In Constructors
    • Prototypes
  • Babel ES6/ES7
    • Iterators & Generators
    • Symbols
    • Destructuring
    • ES6 Maps
    • ES6 Sets
    • Promises, async/await
• Framework (eg. React, Vue.js, Angular)
  • React
  • React Framework (eg. Next.js, create-react-app)
• State Management
  • Redux
• Build tools
  • Webpack
  • Gulp
  • ESLint
• Testing
  • Jest
• Visualizing Data
  • D3.js
  • Recharts
• Progressive WebApps
• Static Type Checkers
  • TypeScript

DevOps

• Editor (eg. Vim, Nano)
• OS (eg. Ubuntu, CentOS)
• Bash Scripts
• Containers (eg. Docker)
• Web Servers (eg. Nginx, Apache)
• Cloud (eg. Digital Ocean, AWS, GCP)
• Automation (eg. Terraform, SaltStack, Ansible)
• CI/CD (eg. Jenkins, Travis CI, CircleCI)
• Log Management & Analysis (eg. ELK)
• Cluster Managers (eg. Kubernetes)
• Automating tasks (eg. Gulp)