DEV Community

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

Posted on

11

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay