DEV Community

Cover image for Roadmap - Zero to Hero in JavaScript
Hidayt Rahman
Hidayt Rahman

Posted on

Roadmap - Zero to Hero in JavaScript

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

  • Fundamentals
  • Advance Level
  • Web Platform
  • Tools
  • Frameworks and Libraries
  • Testing
  • 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 individually.

6. Testing (Anyone)

  • Jest
  • Mocha
  • Jasmine

Assignment
Perform test cases for Todo App

7. Security

  • OWASP
  • Synk

Assignment
Security fixes for all the existing apps

Platform to learn

The Modern JavaScript Tutorial
JavaScript Tutorial
JavaScript
Learn JavaScript

Discussion (0)