Problem
Many beginner software programmers although try hard to learn different things from various sources present on internet/YouTube but they feel unsure if their learning path is correct or not.
Solution
Whether you are into a job and are in experience range of (0-3 years) or have just started to learn JavaScript (JS) and want to a make a career out of it this article applies to both.
We will see different topics of JS which you should learn step by step with days required to learn each topic, I will share good (if not the best) resources and videos of these topics, exercises to do for your own assessments.
I have also shared video links on few topics from the Haward University computer science course called CS50, they one of the best but Remember: Go step by step.
After completing these topics and creating 1-2 projects (must be full stack) you will have enough knowledge and confidence that you would be able to clear interviews of decent MNCs
— Few tips —
Tip 1 – If you are reading a blog and not able to understand it in 2-3 attempts then read the same topic from another resource.
Tip 2 – Don’t keep watching YouTube videos tutorials on the basis that it has many likes/views (we are 10 crore YouTube users, getting 10 lakh views is not a sure indication of good content) YouTube tutorials will consume your time and most of the guys I know have not learnt significantly from it.
Instead search for a small topic (piece by piece) on YouTube and watch it. (Example – What is the use of JSON?)
Tip 3 – Search “use of” anything instead of “what is” that thing.
For example: use of Web API instead of what is a Web API
Topics/Steps
0 – If are new to programming (have never seen any code working)
Watch these: (2 days)
CS 50 – week 0 (algo and first program)
&
&
1 – First learn data-types: (3 days)
This is a basic topic and should be covered first, it is necessary to learn it for understanding further concepts and writing programs.
Answer: There are only 4 major basic (primitive) data types
which are:
string – Used for data which have alphabates in it example – ‘Alex’ , ‘A’, ‘Alex123’ . String are also enclosed in quote (‘hello’) or double quotes (“hello”)
integer – Used for data which only numerical values, example – 1, 0.009, 25
boolean – Used for data which may have value as true or false
undefined – Used for data which have no value currently.
for example, when we declare a variable name myVariable
var myVariable
and if we check its value by doing
console.log(myVariable)
we will get undefined.
null – it can be set to a variable; it basically means empty
Symbol – it is used as the key of an Object property
BigInt – used for large integers
Important thing about a primitive type has a fixed size in memory. For example, a boolean value can be represented with only one bit and a number occupies eight bytes of memory
Another type is reference data types are the types which are created using the primitive data types, they are not of a fixed size.
example –
a – object of a student – {name : ‘Alex’}
b – array of numbers – [1,2, 44, 99]
c – functions
Reference type vs value type is itself an import topic which can be covered in Memory section
For more on data types please read these blog posts:
&
JavaScript data types and data structures – JavaScript | MDN (mozilla.org)
&
2- Learn about memory management, how memory works in JavaScript and its importance, also understand reference type vs value type.
Learn here: (2 days)
&
3 – First learn JS by using console(F12) or in VS code. (7 days)
Should be able to declare a variable like
var name = 'Alex'
as shown below:
should be able to change the variable name like
name = 'Bob'
practice these logics:
- if/else condition
- while
- for loop
- foreach loop
- setTimeOut function
Sources:
JavaScript if else else if (w3schools.com) (click on next button on that page for further topics)
4 – Learn differences between var/let/const and other variables, when to use which one. (1 day)
Read -> Var, Let, and Const – What’s the Difference? (freecodecamp.org)
&
5 – Learn to differentiate between array and object and array of objects and branching & JSON. (3 days)
Answer –
Object of a student:
var studentObject = {
name: 'Alex',
age: 22
}Array of colors:
var colors = ['red', 'blue', orange', 'green']
Objects are defined using culry brackets and array is defined using square brackets.
Read –
Objects: Nested Arrays & Objects–The Modern JavaScript Bootcamp – YouTube
&
How to access a nested array of objects in JavaScript | Code (eyehunts.com)
&
6- Learn JS programming. (5 days)
Should be able to write simple programs.
Practice these coding:
For 0-2 years’ experience candidates –
JavaScript Interview Questions and Answers (2022) – InterviewBit
For 1-3 years’ experience candidates
JavaScript coding interview questions (2023) (qwertycod.com)
7 – Understand OOPs principles. (2 days)
Answer: Object in OOP is the thing that we are dealing in our project. For example: if our application is about student management system then Student, Class, etc are the Objects in our project and we have follow OOPs principle taking these as objects.
Read more about it here : OOPs in JavaScript – Scaler Topics
8 – Create a web page using HTML, page should be similar to the login page of Gamil.com (3 days)
Read – Using form tag, here you will understand how to create textboxes, labels, buttons, links and places them in correct position.
How to add buttons to handle events login and reset.
Source – W3Schools Tryit Editor
then this:
then this:
9 – Now let’s learn a cool topic – npm (1 day)
Watch this – What is NPM, and why do we need it?
After completing above topic, by this time you should have fair knowledge of methods, applying logics, array, objects, JSON, dictionary, list, you now know how to create a html page.
Now let’s let next topic which is creating a Web API.
But
before moving forward, try to answer these JavaScript interview questions
If you have doubt in any question/topic, try to clear it first.
10 – Learn to create an API but first what is a Web API ? (7 days)
Answer – In simple terms an API is something like courier which takes data/information from one point to another.
If the data is being passed online (contrary to offline in case of courier) its call Web API.
On internet we use http service to send/receive data, so we have to follow rules of http, these rules are called http protocols.
When/why do we need to send data?
For example, in your application which manage data of students in your university, you want to add an entry of a new student.
So, you will have to send the student’s data in a format which is acceptable to the http or the service you are using.
So, in this case you will make a call/request to the API to take data from your computer to the server where the data is stored, this call will be called a POST call/request .
Similarly, you may need to get some data like you need to get information of a student by his/her role number, so you will make a call/request to the API, the API will return you that data; This call will be called a GET call/request .
Learn to create a simple Web API in Node here.
Create & Deploy a Node API app on Azure (short)
then this:
What is backend and what is frontend?
Frontend is the application which runs on UI/mobile/table/computer, which has a user interface where we actually get to see the information, for example to check emails, we open Gmail app or gmail.com on computer.
So the website which show us information is the frontend and the part of Gmail service from where it gets/stores the information/data/email is called the backend. Gmail must have those information/emails in a database stored, if you have access to that database, you can run a query to get information from there also, but in most of the applications users are given access to only frontend and access to database which is a part of backend are not generally shared with users.
So an application consists of frontend and backend.
API is also a part of backend.
It’s like API is acts as middleman and the access to database is given to API and the API connects with database to get data from it, see below image to understand it.
11 – Now let’s create a web page using the data from the Node API. (4 days)
Here you will learn using html, using JSON data and consuming the data to create a html table
First learn to create a table in html using static data(means data for which we don’t need to make any http call or the data which is already present in the computer)
Read this:
then this:
Create table in html using data from outside an API.
After doing this, try to use our own created Node API and use its data to create a table.
Advanced topics
Learn Advanced topics if you need them in your project or if you are preparing for an interview which expects you to know these topics.
12 – Event loop (2 day)
Source – Event loop
13 – Learn Sorting on CS 50 ( 3 days)
Watch CS50 Algorithms
14 – In next topic, we will see creating an industry standard web application using Node API as the backend service
Source – Coming soon!
15 – We will start learning React JS, its fundamentals, how it works, when to use React JS if we already have our HTML app working.
Source – React How React DOM actually works first
then we will discuss about other things (coming soon)!
comment on which topic you want to get a good resource
&
also share the links/resources of topic you are following or have found helpful
Its like you read my mind! You seem to know so much about this,
like you wrote the book in it or something. I think that you can do with some pics to drive the
message home a little bit, but instead of that, this is
excellent blog. A great read. I’ll certainly be back.
I was able to find good advice from your content.
An intriguing discussion is worth comment. I
think that you need to publish more on this subject, it may not be a taboo subject but usually folks don’t speak about these subjects.
To the next! All the best!!