Roadmap | Zero to Hero in JavaScript

Hidayt Rahman
2 min readJul 25, 2021

--

JavaScript is a programming language used both on the client-side and server-side that allows you to make web pages interactive.

Pros

  • Popularity. JavaScript is used everywhere on the web.
  • Gives the ability to create rich interfaces.
  • Easy to learn and implement.

Cons

  • Browser Support. JavaScript is sometimes interpreted differently by different browsers. Difficult to write cross-browser code.
  • Code is always visible to everyone on the client side.

Advise before start

Learn how the web works and the Basic HTML and CSS.

Pillars of JavaScript

I split into seven sections

  1. Fundamentals
  2. Advance Level
  3. Web Platform
  4. Tools
  5. Frameworks and Libraries
  6. Testing
  7. Security

1. Fundamentals

This is the most important section, It might take time but it's worth learning to go for advance level smoothly.

  • Variables, Types, and Expressions
  • Functions
  • Array
  • Objects
  • Loops
  • IF, Switch Statements
  • Lexical structures
  • Data Structures
  • Control Flow
  • Operators
  • Type Conversation
  • Scope
  • Events

Assignment

  • Counter App
  • Todo App (CRUD)

2. Advanced Level

  • Try Catch
  • Callbacks
  • Promises
  • Async Await
  • Error handling
  • Modules
  • Closure
  • Timers
  • Prototyping
  • Inheritance
  • Binding
  • Regular Expressions
  • Unicode
  • Event Loops
  • Generators

Assignment

  • Ludo Dice (with Score)
  • Quiz Game

3. Web Platform

  • Cookies
  • Web Storage
  • Fetch
  • APIs
  • DOM Manipulation
  • Service Workers

Assignment

  • Messenger
  • eCommerce Prototype (API Integration)
  • Todo App (Store Data on Browser)

4. Tools

  • TypeScript
  • Node, NPM / Yarn
  • Webpack or Grunt / Gulp
  • Babel
  • ESLint

Assignment

  • Setup ES6 project using webpack and babel

5. Frameworks / Libraries

  • React
  • Vue
  • Angular
  • ExpressJS

Assignment

  • Migrate all the existing apps (eCommerce Prototype, Todo App) in all the above techs individiually.

6. Testing (Anyone)

  • Jest
  • Mocha
  • Jasmine

Assignment

  • Perform test cases for TodoApp

7. Security

  • OWASP
  • Synk

Assignment

  • Security fixes for all the existing apps

--

--

Hidayt Rahman

A passionate UI Engineer, Love Travelling and Photography