رتبها

A detailed roadmap for JavaScript developers in 2021
🧵👇

Hi 👋,
If you are a web developer who already knows HTML & CSS and wants to start learning JavaScript, then you're in the right place.
I'm Hassib, a Software Engineer with 4+ years of experience coding in JavaScript.

I divided the roadmap into three levels;
1. Beginner
2. Intermediate
3. Advance
In this thread, I created the beginner-level roadmap, which covers the fundamental and must-know topics of JavaScript.
Let's dive in!

An Introduction to JavaScript:
• What is JavaScript?
• Why it is called JavaScript?
• What can JavaScript do?
• What JavaScript can't do?
Read this to find answers to all of these questions:
javascript.info
{ 1 }

javascript.info/intro

An Introduction to JavaScript

We want to make this open-source project available for people all around the world. Let’s see what’s...

JavaScript & the ECMAScript specification
• What is ECMAScript?
• What is ECMA international?
Read this to find answers to all of these questions:
#javascript_and_the_ecmascript_specification" target="_blank" rel="noopener" onclick="event.stopPropagation()">developer.mozilla.org
{ 2 }

developer.mozilla.org/en-US/docs/Web…

Introduction - JavaScript | MDN

This chapter introduces JavaScript and discusses some of its fundamental concepts.

Getting started with JavaScript
1. Open your browser
2. Press F12 to open the console
3. Write `console.log('Hello, World!)`
4. Press Enter
Congratulations, you have just written your "Hello World" program in JavaScript.
For more: javascript.info
{ 3 }

javascript.info/hello-world

Hello, world!

We want to make this open-source project available for people all around the world. This part of the...

Grammar
• Basic syntax
• Comments
• Declarations
- var
- let
- const
• Variable hoisting
Read this: #basics" target="_blank" rel="noopener" onclick="event.stopPropagation()">developer.mozilla.org
{ 4 }

developer.mozilla.org/en-US/docs/Web…

Grammar and types - JavaScript | MDN

This chapter discusses JavaScript's basic grammar, variable declarations, data types and literals.

Data types
• Boolean
• null
• undefined
• Number
• String
Note: Symbol and BigInt data types are not included in the beginner-level JavaScript roadmap!
Read this: #data_types" target="_blank" rel="noopener" onclick="event.stopPropagation()">developer.mozilla.org
{ 5 }

developer.mozilla.org/en-US/docs/Web…

Grammar and types - JavaScript | MDN

This chapter discusses JavaScript's basic grammar, variable declarations, data types and literals.

Learn & practice how to make interaction using
• alert
• prompt
• confirm
Read: javascript.info
{ 6 }

javascript.info/alert-prompt-c…

Interaction: alert, prompt, confirm

We want to make this open-source project available for people all around the world. As we’ll be usin...

Expressions and Operators
• Arithmetic
• Comparison
• Logical
• Assignment
• Ternary
• typeof
Read this: #expressions_and_operators" target="_blank" rel="noopener" onclick="event.stopPropagation()">developer.mozilla.org
{ 7 }

developer.mozilla.org/en-US/docs/Web…

JavaScript Guide - JavaScript | MDN

The JavaScript Guide shows you how to use JavaScript and gives an overview of the language. If you n...

Learn & practice control flow structures and their use cases
• if
• if - else
• if - else if - else
• switch
{ 8 }

Learn & practice Loops & Iterations
• for
• while
• do-while
• break
• continue
Note: More iteration structures will be covered in the intermediate-level roadmap to JavaScript!
{ 9 }

Function Basics
• What is a function
• Function declaration
• Function calling/invocation
• Function parameters
• Variable Scopes
Read this: javascript.info
{ 10 }

javascript.info/function-basics

Functions

We want to make this open-source project available for people all around the world. Quite often we n...

Math object functions
• abs
• ceil
• floor
• round
• pow
• sqrt
• random
Read this: hassib.hashnode.dev
{ 11 }

hassib.hashnode.dev/ten-math-funct…

Objects
• What is an Object?
• Object properties
• Accessing Object properties
• Object methods
Read all these topics in: w3schools.com
{ 12 }

w3schools.com/js/js_objects.…

JavaScript Objects

W3Schools offers free online tutorials, references and exercises in all the major languages of the w...

Arrays
• What is an Array?
• Creating an Array
• Accessing Array elements
• Changing Array elements
• The length property of Array
• Looping Array elements
Read all these topics in: w3schools.com
{ 13 }

w3schools.com/js/js_arrays.a…

JavaScript Arrays

W3Schools offers free online tutorials, references and exercises in all the major languages of the w...

Events
• What is an Event
• Examples of Events
• Common HTML Events
Read all these topics in: w3schools.com
{ 14 }

w3schools.com/js/js_events.a…

JavaScript Events

W3Schools offers free online tutorials, references and exercises in all the major languages of the w...

After you have surfed the basics of the topics above, it's time to build some projects:
• Number guess game
• Todo list
• Expense tracker
• Quiz game
Remember, that you'll never learn any technology without building projects.
{ 15 }

Final thoughts
It's the end of the beginner-level roadmap to JavaScript. After learning these topics and building some projects, you're officially a JavaScript developer.
Get your hands dirty with building projects using this awesome language! 🔥
{ 16 }

Make sure to follow me @hassibmoddasser for the incoming threads and more JS topics! 🙂
Retweet the first tweet and share it with your friends! 💛🙏
{ END }