Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Javascript - From Beginner to Pro-Build real world JS apps

Name: Javascript - From Beginner to Pro-Build real world JS apps
Rating: 4.3 (2070 reviews)

Master JavaScript with the most complete JavaScript course on market! 1st step to learn JS - React, Angular or Vue JS

Created byAbhay Talreja

Last updated 12/2019

English

What you'll learn

You will go all the way from JavaScript beginner to advanced JavaScript developer.
You will gain a deep and true understanding of how JavaScript works behind the scenes.
You will be able to debug your code and understand other developer's code.
You will understand and use complex features like the 'this' keyword, function constructors, prototype, inheritance, first-class functions, closures, and more.
You will learn how to organize and structure your code using modules and functions. Because coding is not just writing code, it's also thinking about your code!
Take the w3 Schools, Upwork or Freelancer Javascript certification

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

18 sections • 85 lectures • 12h 32m total length

Welcome3:30
Welcome to learning Javascript!
Let's understand our IDE (Development Tool) - Sublime Text7:08
Let's understand our IDE (Development Tool) - JSBIN4:05
Introduction to JS BIN.
What can Javascript do? - a preview to the super powers!14:25
In This lecture we will see what can be achieved using Javascript with some basic examples. You can see the examples in action using the below links.
https://jsbin.com/fejeyij/edit?html,output
Where to put Javascript?7:52
In this lecture, we will see on where to put your javascript file in an HTML page. We will also go over the reasoning on how to organize your javascript and HTML.

How to see the output?4:32
In this session, we will see on different ways to see the javascript output on the screen.
window.alert() - https://jsbin.com/rodojup/edit
document.write() - https://jsbin.com/ropefuw/edit https://jsbin.com/qenuya/edit
innerHTML - https://jsbin.com/toyoso/edit
console.log() - https://jsbin.com/keleza/edit
Syntax11:29
In this session, we are going to go over the syntax of javascript - Get to know the language better.
Comments3:12
In this lecture, we will see the comments in action. Here is your practice file. https://jsbin.com/jusuhan/edit?html,output
Statements10:56
In this session, we will go over the statements and do some hands on in our JSBIN.Here is the final result of the lecture - https://jsbin.com/buxehaf/3/edit?html,console
Variables10:25
In this lecture, we will go over the variables in detail with some real examples. Here is the final version of the example. https://jsbin.com/geberag/edit?html,console
Declaring (Creating) JavaScript Variables
Use a single var keyword to create three variables with the following values
Display the sum of 5 + 10, using two variables x and y.
Operators13:15
In this lecture, we will go through the various operators in Javascript! Here is the practice JSBIN - https://jsbin.com/toduma/edit?html,console
Display the difference of 10 - 5, using two variables x and y.
Use the Multiplication (*) operator to display multiplication of 2 numbers
Display the result of 10 / 5, using two variables x and y.
Find the remainder when 15 is divided by 9, using two variables x and y.
Use the += operator to add a value of 5 to the variable x.
Use the -= operator to subtract a value of 5 from the variable x.
Use the *= operator to multiply the variable x with 5.
Use the /= operator to divide the variable x with 5.
Use the %= operator to assign a remainder of 10 / 3 to the variable x.
Using += operator to concatenate String
Data Types9:59
In this lecture, we will go over the data types in javascript. Here is the working JSBIN for the same. https://jsbin.com/zuzamo/edit?html,console
Functions7:46
In this lecture, we will see functions in greater detail. You can see the practice material in JSBIN. https://jsbin.com/buvabu/edit?html,console
Call the function.
Figure out what is wrong with the function - fix it and run it as it should!
Use the function to display the product of 5 * 5.
Use the function to display "Hello John".
Define a function named "myFunction", and make it display "Hello World!" in the element.
Objects8:57
In this lecture, we will be understand objects in a little detail and go over some examples. Here is the working file. https://jsbin.com/verusup/edit?html,console
Display "John" by extracting information from the person object.
Add the following property and value to the person object: country: USA
Create an object called person with name = John, age = 50. Then, access the object to display "John
Scope9:14
In this lecture, we will go over the local/global scope within a method and outside the method. Here is the practice file - https://jsbin.com/qezicu/edit?html,output
Events7:53
In this lecture, we will cover the EVENTS. Here are the class notes - https://jsbin.com/wizemi/edit?html,output
The element should do something when someone clicks on it. Try to fix it!
When the button is clicked, trigger myFunction() with an event.

Strings10:36
In this section, we will cover Strings in Javascript - https://jsbin.com/vizajo/edit?html,console
Assign the string "Hello World!" to the variable txt.
Use the length property to display the length of the txt variable's value.
The string below is broken - use escape characters to display the text correctly.
String Methods - Part 19:38
In this lecture we will be covering String Methods. This is just the part 1 of the concept. Make sure to see the String Methods 2 for continuation on this topic. Here is the working file for part 1 and part 2 - https://jsbin.com/mamonu/edit?html,console
String Methods - Part 29:47
In this lecture we will be covering String Methods. This is just the part 2 of the concept. Make sure to see the String Methods 1 for continuation on this topic. Here is the working file for part 1 and part 2 - https://jsbin.com/mamonu/edit?html,console
Display the position of the first occurrence of "World" in the variable txt.
Use the slice() method to display only "Banana,Kiwi".
Use the replace() method to replace "World" with "Universe".
Convert the value of txt to lower case.
Convert the value of txt to upper case.
Use the concat() method to join the two strings: str1 and str2.
Numbers16:53
In this lecture, we will be working with Numbers in Javascript. Here is the working document - https://jsbin.com/zakezas/edit?html,console
Create a variable called myNumber, assign the value 50 to it, and display it.
The value of z should be 11. Find out what's wrong and fix it.
Number Methods17:26
In this lecture, we will cover the Number methods in detail. Here is the practice file - https://jsbin.com/kibemoz/edit?html,console
Math Object14:53
In this lecture, we will see the Math object in detail. Here is the working document. https://jsbin.com/cohabi/1/edit?html,console
Use the random() method to display a random number.
Fix the code to display the number with the highest value.
Round "7.3" to the nearest integer, and display it.
Display the square root of "9".
Math.random()7:32
In this lecture, we will see the Math.random() in detail. Here is the practice file. https://jsbin.com/havoxax/1/edit?html,output
Dates6:59
In this lecture, we will cover the Date object. Here is the working document. https://jsbin.com/sasupo/1/edit?html,output
Create a Date object to display the date and time for 1st January, 2017.
Date Formats8:16
In this lecture, we will cover Date Formats in detail. Here is the practice file - https://jsbin.com/josalus/3/edit?html,output
Date Methods9:42
In this lecture we will cover the Date methods. Here is the working file https://jsbin.com/jumadok/2/edit?html,console
Arrays11:37
In this lecture, we will cover Arrays. Here is the working file - https://jsbin.com/kifiyic/edit?html,console
Create an array named cars, assign the values "Saab", "Volvo" and "BMW" to it, and display it.
Display the "Volvo" item of the cars array.
Change the first item of cars to "Opel" by referring to the index number,and display the whole array
Use the length property to display the number of array items in cars.
Use the length property to add a new item to cars: Mercedes.
Array Methods12:47
In this lecture, we will cover Array methods. Here is the working file - https://jsbin.com/xarixo/edit?html,console
Use the pop() method to remove the last item from the fruits array.
Use the push() method to add a new item to fruits: Kiwi.
Use the splice() method to remove "Orange" and "Apple" from fruits.
Use the concat() method to concatenate girls and boys.
Sorting Arrays11:31
In this lecture, we will cover sorting an Array. Here is the working document - https://jsbin.com/xozela/edit?html,console
Use the sort() method to sort the array alphabetically.
Booleans7:01
In this lecture, we will cover Boolean values. Here is the working document - https://jsbin.com/boguvab/1/edit?html,output

Objects and the 'this' keyword11:33
In this lecture, we will cover the Objects (in Detail). Here is the working file for this lecture - https://jsbin.com/lozejim/2/edit?html,output
Object Property9:30
In this lecture, we will cover the Object Property. Here is the file for the lecture - https://jsbin.com/yiwebeb/7/edit?html,output
Object Methods4:16
In this lecture, we will cover the Object Methods. Here is the file for the lecture - https://jsbin.com/miqebu/2/edit?html,output
Object Prototype8:10
In this lecture, we will cover the Object Prototypes. Here is the file from the lecture - https://jsbin.com/gatapi/5/edit?html,output
Response to Question: Pass by Value v/s Pass by Reference6:26
This video was added to address the question on Pass by Value v/s Pass by Reference for variables and objects in Javascript.

Comparison Operators8:57
In this lecture we will be covering the Comparison Operators. Here is the working copy of the file https://jsbin.com/sonowo/1/edit?html,output
P.S. - Comparison and Logical Operators are a continuation of each other. So, Logical Operators will pick up from where Comparison operators video ends.
Choose the correct comparison operator to display "true", when: 5 is less than 7.
Choose the correct comparison operator to display "true", when: 10 is greater than 7.
Choose the correct comparison operator to display "true", when: 10 is equal to 10.
Choose the correct comparison operator to display "true", when: 10 is NOT equal to 8.
Logical Operators12:16
In this lecture we will be covering the Logical Operators. Here is the working copy of the file https://jsbin.com/sonowo/1/edit?html,output

P.S. - Comparison and Logical Operators are a continuation of each other. So, Logical Operators will pick up from where Comparison operators video ends.

If...Else Statements6:57
In this lecture, we will cover the conditional If..Else statements - Here is the working file on JS Bin - https://jsbin.com/wotixoj/1/edit?html,output
Use the if statement to output some text if 5 is greater than 2.
1. Write an if statement with the following condition: 10 is greater than 5. 2.
Change the value of the variable firstName to make the if statement run.
Add an else statement to display "You're not John!".
Write an if/else statement with the following condition
The if/else statement does not work. Try to fix it.
Switch Statement13:11
In this lecture, we will cover the Switch statements. Here is the working copy of the JS Bin - https://jsbin.com/teqatet/4/edit?html,output
Switch - The switch statement is missing a case for "Apple".
Switch - The switch statement is missing a default case.
Switch - The switch statement does not work. Try to fix it.

For Loop10:36
In this lecture, we will cover 2 types of loops. For loop and the For/in Loop. Here is the working file - https://jsbin.com/xibofom/2/edit?html,output
For Loop - In the for loop, change num1 to 0 and num2 to 10 and run the code.
For Loop - Make the loop start counting from 5 instead of 0:
Make the loop start counting from 5. Count up to (including) 50, and count only every fifth number.
For loop - Make the loop start counting downwards from 10 and stop at 1.
For Loop - Inside the for loop!
For Loop - In this exercise, you are going to create a for loop from scratch
While Loop3:42
In this lecture, we will cover the other 2 types of loops, while and do...while. Here is the working document - https://jsbin.com/zipami/1/edit?html,output
While Loop - Inside the <script> element; change num1 to 0 and num2 to 10 and run the code.
While Loop - Make the loop start counting from 5 instead of 0:
Make the loop start counting from 5. Count up to (including) 50, and count only every fifth number.
While Loop - Make the loop start counting downwards from 10 and stop at 1.
Do/While - The do/while loop should output 0 1 2 3 4. Try to fix it!
Break and Continue6:14
In this lecture, we will be seeing the 'break' and 'continue' keywords. Here is the working copy of the lecture - https://jsbin.com/kuwecet/1/edit?html,output

DOM - Overview4:09
In this lecture, we will go over the DOM.
DOM - Properties and Methods2:31
In this lecture we will go over DOM Properties and Methods. Here is the file for the lecture - https://jsbin.com/fuqajo/1/edit?html,output
DOM Elements9:31
In this lecture, we will see the DOM Elements in detail. Here is the file for the lecture - https://jsbin.com/qizufol/6/edit?html,output
DOM - CSS and Animation12:20
In this lecture, we will see CSS and Animations with the DOM. Here are the files for the lecture.
CSS - https://jsbin.com/remoce/3/edit?html,output
Animation - https://jsbin.com/getewuc/3/edit?html,output
Use the innerHTML property to change the content of the element to "New text!".
Use the HTML DOM to set the text color of to "red".
Use the HTML DOM to add a yellow background color to .
Use the HTML DOM to center-align the text of .
Use the HTML DOM to change the text size of to 40 pixels.
Use the HTML DOM to hide the element.
DOM Events8:11
In this lecture, we will cover the DOM events. Here is the file for the lecture - https://jsbin.com/dihezi/2/edit?html,output
DOM - Event Listeners14:48
In this lecture we will see the Event Handlers. Here is the JS Bin file for the lecture.https://jsbin.com/zujejis/7/edit?html,output

Type Conversion - Part 19:56
In this lecture, we will cover type conversion. Here is our working document - https://jsbin.com/furimo/edit?html,output
Type Conversion - Part 213:43
In this lecture, we will cover the Type Conversion. Here is the working document - https://jsbin.com/xikore/2/edit?html,output
Regular Expressions8:45
In this lecture, we will cover the Regular Expressions. Here is the working file - https://jsbin.com/basopu/1/edit?html,output

Errors - Part 115:41
In this lecture, we will cover the Javascript Errors. Here is the working document - https://jsbin.com/socime/1/edit?html,output
Errors - Part 28:56
In this lecture, we will continue our discussion on Errors. Here is the document for the lecture - https://jsbin.com/gupamiw/1/edit?html,output
Debugging6:02
In this lecture, we will cover the Debugging. Here is the link to the working file - https://jsbin.com/luvowaq/1/edit?html,output

Requirements

No coding experience is needed to take this course! We will start from the basics
All you need to get started with JavaScript is a computer, a browser (most of the exercises are on JSBIN) and a text editor. We will set these up in the course.
A basic understanding of HTML and CSS is a plus, but it's not a must!
Also, wherever there is anything related to HTML/CSS, We will cover needed details in those sections. If you still have a question,you can ask it in the Q&A section.

Description

*** Brand New Course Updated in Septemper 2017 ***

*** More than 38,000 students. Students from over 167 countries. 5 star ratings and you can see what other students have to say in the review section. Stop Thinking! Take the course Now! ***

⭐⭐⭐⭐⭐
Very thorough lectures on the basics of Javascript. The instructor is very knowledgable on this subject and is quick to respond to any questions asked. A great place to start if you are new to the world of Javascript.

-- Jason Arnold

⭐⭐⭐⭐⭐
Enjoyed the course very much. The coding exercises were great. Having exercises to work on and figure out makes learning so much more interesting. The lectures were excellent and the lecture materials were very helpful. The instructor was responsive in the Q&A and all the course material worked like a charm. I would definitely take another course by this instructor. Thanks for a great experience.

-- Leann Ukena

Ace JavaScript with the most entire JavaScript course available!

Would you like to learn the number #1 programming dialect that powers the web?

Is it accurate to say that you are sick of squandering your time and cash on irregular youtube videos or JavaScript courses that are either excessively basic, or excessively troublesome, making it impossible, making it impossible to take after?

On the other hand do you battle to profoundly comprehend and utilize JavaScript in genuine projects?

In the event that your answer is a major YES... At that point this is precisely the course you are searching for!

Keep in mind -

There is no development without reiteration!

So what is the Javascript - From Beginner to Pro course about?

This is a really total JavaScript course, that goes route past what other JavaScript courses out there show you.

I will take you from an entire JavaScript amateur to a propelled developer. You won't simply learn the JavaScript dialect itself, you will likewise learn how to program. The most effective method to take care of issues. Step by step instructions to structure and sort out code utilizing basic JavaScript designs.

Accompanied me on a trip with the objective of genuinely comprehension the JavaScript dialect. What's more, I clarify everything in transit with awesome detail!

You will learn "why" something works in JavaScript, not simply "how". Since in the present day JavaScript universe of today, you require more than simply knowing how something functions. You have to troubleshoot code, you have to comprehend code, you should have the capacity to consider code.

Thus, before the end of the course, you will be a fit JavaScript developer, ready to compose, comprehend and investigate JavaScript code utilizing all the capable components the dialect offers to us.

...

Here is precisely what we cover in this Javascript - From Beginner to Pro course:

• All the JavaScript and programming basics: things like factors, information sorts, boolean rationale, if/else proclamations, circles, capacities, objects, exhibits, and that's just the beginning.

• Everything you have to know keeping in mind the end goal to pick up a profound comprehension of how JavaScript functions off camera: execution settings, lifting, checking, the "this" catchphrase, and then some.

• How to make JavaScript code associate with webpages: DOM control. Learn how to choose and change webpage components, make new components and handle DOM occasions.

• Complex JavaScript components, for example, work constructors, prototypal legacy, top notch capacities, terminations, the predicament and apply strategies, and then some.

• Learn how to sort out and structure your code utilizing modules and capacities, how to make information security and epitome, and why that is so critical.

• What's new in the most cutting edge variant of JavaScript: new components of ES6/ES2015.

...

We should now see whether this course is for you. It's a flawless fit if...

Understudy #1: You need to pick up a profound comprehension of the most well known programming dialect on the planet: JavaScript.

Understudy #2: You have taken other JavaScript courses yet: 1) still don't generally comprehend JavaScript, or 2) still don't feel certain to code genuine applications. This course is ideal for you!

Understudy #3: You are keen on utilizing famous libraries/systems like React/React-Native, Angular or Node.js.

Understudy #4: You need to begin with programming by and large: JavaScript is an incredible dialect to learn how to code.

...

Presently it's your swing to choose. This is the thing that you get:

• Lifetime access to my HD quality videos. No month to month membership. Learn at your own particular pace, at whatever point you need.

• All videos are downloadable. Learn wherever you need, even without a web association!

• Downloadable starter code and last code for every segment.

• My own support in the course Q&A.

Sounds extraordinary? At that point begin learning today by tapping the "Take this course" catch at this moment, and go along with me in the main JavaScript course that you will ever require!

...

What are the prerequisites?

No coding knowledge is important to take this course! I take you from novice to master!

All you have to begin with JavaScript is a PC, a program (the vast majority of the illustrations are on JSBIN) and a content tool. We will set these up in the course.

An essential comprehension of HTML and CSS is an or more, yet it's not an unquestionable requirement!

What am I going to get from this Javascript - From Beginner to Pro course?

Lifetime access to my HD quality videos. No month to month membership. Learn at your own particular pace, at whatever point you need.

You will go the distance from JavaScript learner to cutting edge JavaScript developer.

You will pick up a profound and genuine comprehension of how JavaScript functions in the background.

You will have the capacity to investigate your code and comprehend other developer's code.

You will comprehend and utilize complex components like the "this" catchphrase, work constructors, prototypal legacy, top of the line capacities, terminations, and the sky is the limit from there.

You will learn how to arrange and structure your code utilizing modules and capacities. Since coding is not simply composing code, it's additionally contemplating your code!

You will get comfortable with the new components of ES6/ES2015.

You will get my own support in the Q&A.

What is the intended interest group?

You ought to take this course now on the off chance that you need to pick up a profound comprehension of the most prominent programming dialect on the planet: JavaScript.

You ought to take this course now in the event that you have taken other JavaScript courses however: 1) still don't generally comprehend JavaScript, or 2) still don't feel certain to code true applications. This course is ideal for you!

You ought to take this course now in case you're keen on utilizing mainstream libraries/structures like React, Angular or Node.js.

You ought to take this course now in the event that you need to begin with programming as a rule: JavaScript is an incredible dialect to learn how to code.

You ought to take this course now in the event that you need to plan for a meeting on Javascript. This course will help you get up to speed quicker than most different articles/videos you will discover on the web.

Try not to take this course in the event that you simply need to utilize JavaScript yet would prefer not to know how it really functions. Believe me, I have been there!

What are the necessities?

No coding knowledge is expected to take this course! We will begin from the nuts and bolts

All you have to begin with JavaScript is a PC, a program (the vast majority of the activities are on JSBIN) and a content tool. We will set these up in the course.

An essential comprehension of HTML and CSS is an or more, yet it's not an unquestionable requirement!

Additionally, wherever there is anything identified with HTML/CSS, We will cover required subtle elements in those areas. On the off chance that regardless you have a question,you can ask it in the Q&A segment.

What am I going to get from this Javascript - From Beginner to Pro course?

You will go the distance from JavaScript learner to cutting edge JavaScript developer.

You will pick up a profound and genuine comprehension of how JavaScript functions in the background.

You will have the capacity to investigate your code and comprehend other developer's code.

You will comprehend and utilize complex elements like the "this" watchword, work constructors, model, legacy, top of the line capacities, terminations, and that's only the tip of the iceberg.

You will learn how to arrange and structure your code utilizing modules and capacities. Since coding is not simply composing code, it's likewise considering your code!

You will get comfortable with the new components of ES6/ES2015.

Take the w3 Schools, Upwork or Freelancer Javascript affirmation

Who this course is for:

You should take this course now if you want to gain a deep understanding of the most popular programming language in the world: JavaScript.
You should take this course now if you have taken other JavaScript courses but: 1) still don't really understand JavaScript, or 2) still don't feel confident to code real-world apps. This course is perfect for you!
You should take this course now if you're interested in using popular libraries/frameworks like React, Angular or Node.js.
You should take this course now if you want to get started with programming in general: JavaScript is a great language to learn how to code.
You should take this course now if you have to prepare for an interview on Javascript. This course will help you get up to speed faster than most other articles/videos you will find on the internet.

Javascript - From Beginner to Pro-Build real world JS apps

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction to Javascript5 lectures • 37min

Javascript Language Basics11 lectures • 1hr 38min

Data Types14 lectures • 2hr 35min

Objects5 lectures • 40min

Comparison & Logical Operators2 lectures • 21min

Conditional Statements2 lectures • 20min

Loops3 lectures • 21min

Understanding the DOM - Document Object Model6 lectures • 52min

Type Conversion & Regular Expressions3 lectures • 32min

Errors and Debugging3 lectures • 31min

Requirements

Description

Who this course is for: