JavaScript Tutorial for Beginners - Full Course in 8 Hours [2020]

Here is the best free javascript programming course on the planet. Made with lots of ❤️. Take your web development skills to the next level with this Clever Programmer Learn Javascript course for beginners.

This course will help you learn web development in 2020 and beyond. Mastering these technical skills is vital to your career as a software developer. Whether you want to get a full-time job or become a freelance developer. Or whether you want to become a full-stack or front-end developer... You HAVE to master Javascript.

🔥 TABLE OF CONTENTS... ENJOY 👇

3:57 - How to run your first Program with Javascript
7:17 - Manipulate the DOM
15:49 - Numbers in Javascript
22:18 - Functions in Javascript
33:31 - While vs. For Loops in Javascript
39:10 - Data Types in Javascript
43:26 - Strings (Common Methods)
52:07 - Javascript in Arrays
1:11:07 - Objects in Javascript
1:18:18 - If else conditionals and switch statements
1:31:07 - Learn JSON in 5 minutes
1:36:41 - Challenge: Your age in days
2:10:07 - Challenge: Cat Generator
2:42:19 - Challenge: Rock Paper Scissors
2:58:28 - Challenge: Rock Paper Scissors PT. 2
3:57:46 - Challenge: Change Button Colors
4:39:48 - How Blackjack Works
4:45:23 - Blackjack HTML
5:05:14 - CSS Blackjack
5:28:47 - Challenge: Build a Blackjack Game with Javascript
6:06:58 - Blackjack PT. 2
6:35:42 - Blackjack PT. 3
7:03:29 - Blackjack PT. 4
7:22:08 - Blackjack PT. 5
7:39:19 - Blackjack PT. 6
7:47:56 - Blackjack PT 7

Blackjack Project Assets:

Enroll for exercises, tutorials, courses, and projects...

Enroll in Learn Python™ course

==================================================
Connect With Me!

Snapchat ► Rafeh1

[danishsultan]

I am the only one 😂 who is just first checking positive comments to start the course .

[jasonmai]

I'm back after 2 years, I saw this video when I knew nothing about programming, and this video was an introduction to web developing, and after 6 months, I got my first job without a degree and worked for 2 more foreign companies. If you guys have that fire and want to learn from nothing, this is a real kickstart

[mcanduiken]

This is amazing, this demonstrates how valuable of a resource Youtube is. So much knowledge available for free, this should never be taken for granted. Throughout history witholding knowledge is how people were subjugated, there has never been another time when there was more access to information.

[JoeyCrackization]

You are the only guy so far that has been able to teach this in a way where it makes total sense. Thank you so much!

[atharvparlikar]

this is my cheat sheet for strings and arrays
feel free to use it or just copy into a text file :)

string methods
1.charAt(index) // Returns the character at the specified index (position)
2.charCodeAt(index) // Returns the Unicode of the character at the specified index
3.concat(str1, [...]) // Joins two or more strings, and returns a new joined strings
4.endsWith(searchVal, [length]) // Checks whether a string ends with specified string/characters
5.fromCharCode(n1, [...]) // Converts Unicode values to characters
6.includes(searchVal, [start]) // Checks whether a string contains the specified string/characters
7.indexOf(searchVal, [start]) // Returns the position of the first found occurrence of a specified value in a string
8.lastIndexOf(searchVal, [start]) // Returns the position of the last found occurrence of a specified value in a string
9.localeCompare(str) // Compares two strings in the current locale
10.match(regex) // Searches a string for a match against a regular expression, and returns the matches
11.repeat(count) // Returns a new string with a specified number of copies of an existing string
12.replace(searchVal, newVal) // Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced
13.search(searchVal) // Searches a string for a specified value, or regular expression, and returns the position of the match
14.slice(start, [end]) // Extracts a part of a string and returns a new string
15.split([separator], [limit]) // Splits a string into an array of substrings
16.startsWith(searchVal, [start]) // Checks whether a string begins with specified characters
17.substr(start, [length]) // Extracts the characters from a string, beginning at a specified start position, and through the specified number of character
18.substring(start, [end]) // Extracts the characters from a string, between two specified indices
19.toLocaleLowerCase() // Converts a string to lowercase letters, according to the host's locale
20.toLocaleUpperCase() // Converts a string to uppercase letters, according to the host's locale
21.toLowerCase() // Converts a string to lowercase letters
22.toString() // Returns the value of a String object
23.toUpperCase() // Converts a string to uppercase letters
24.trim() // Removes whitespace from both ends of a string
25.valueOf() // Returns the primitive value of a String object
end of string methods

Arrays
1.concat(arr1, [...]) // Joins two or more arrays, and returns a copy of the joined arrays
2.copyWithin(target, [start], [end]) // Copies array elements within the array, to and from specified positions
3.entries() // Returns a key/value pair Array Iteration Object
4.every(function(currentval, [index], [arr]), [thisVal]) // Checks if every element in an array pass a test
5.fill(val, [start], [end]) // Fill the elements in an array with a static value
6.filter(function(currentval, [index], [arr]), [thisVal]) // Creates a new array with every element in an array that pass a test
7.find(function(currentval, [index], [arr]), [thisVal]) // Returns the value of the first element in an array that pass a test
8.findIndex(function(currentval, [index], [arr]), [thisVal]) // Returns the index of the first element in an array that pass a test
9.forEach(function(currentval, [index], [arr]), [thisVal]) // Calls a function for each array element
10.from(obj, [mapFunc], [thisVal]) // Creates an array from an object
11.includes(element, [start]) // Check if an array contains the specified element
12.indexOf(element, [start]) // Search the array for an element and returns its position
13.isArray(obj) // Checks whether an object is an array
14.join([seperator]) // Joins all elements of an array into a string
15.keys() // Returns a Array Iteration Object, containing the keys of the original array
16.lastIndexOf(element, [start]) // Search the array for an element, starting at the end, and returns its position
17.map(function(currentval, [index], [arr]), [thisVal]) // Creates a new array with the result of calling a function for each array element
18.pop() // Removes the last element of an array, and returns that element
19.push(item1, [...]) // Adds new elements to the end of an array, and returns the new length
20.reduce(function(total, currentval, [index], [arr]), [initVal]) // Reduce the values of an array to a single value (going left-to-right)
21.reduceRight(function(total, currentval, [index], [arr]), [initVal]) // Reduce the values of an array to a single value (going right-to-left)
22.reverse() // Reverses the order of the elements in an array
23.shift() // Removes the first element of an array, and returns that element
24.slice([start], [end]) // Selects a part of an array, and returns the new array
25.some(function(currentval, [index], [arr]), [thisVal]) // Checks if any of the elements in an array pass a test
26.sort([compareFunc]) // Sorts the elements of an array
27.splice(index, [quantity], [item1, ...]) // Adds/Removes elements from an array
28.toString() // Converts an array to a string, and returns the result
29.unshift(item1, ...) // Adds new elements to the beginning of an array, and returns the new length
30.valueOf() // Returns the primitive value of an array
end of Arrays

[CleverProgrammer]

🔥 TABLE OF CONTENTS... ENJOY 👇

3:57 - How to run your first Program with Javascript
7:17 - Manipulate the DOM
15:49 - Numbers in Javascript
22:18 - Functions in Javascript
33:31 - While vs. For Loops in Javascript
39:10 - Data Types in Javascript
43:26 - Strings (Common Methods)
52:07 - Javascript in Arrays
1:11:07 - Objects in Javascript
1:18:18 - If else conditionals and switch statements
1:31:07 - Learn JSON in 5 minutes
1:36:41 - Challenge: Your age in days
2:10:07 - Challenge: Cat Generator
2:42:19 - Challenge: Rock Paper Scissors
2:58:28 - Challenge: Rock Paper Scissors PT. 2
3:57:46 - Challenge: Change Button Colors
4:39:48 - How Blackjack Works
4:45:23 - Blackjack HTML
5:05:14 - CSS Blackjack
5:28:47 - Challenge: Build a Blackjack Game with Javascript
6:06:58 - Blackjack PT. 2
6:35:42 - Blackjack PT. 3
7:03:29 - Blackjack PT. 4
7:22:08 - Blackjack PT. 5
7:39:19 - Blackjack PT. 6
7:47:56 - Blackjack PT 7

[piyushdhawan]

I got so involved with you during this course that now it will be hard for me to learn anything from anywhere else.

[davs]

@CleverProgrammer I like the approach you have taken in your projects. You have taken the learner from "easy projects" to intermediate to difficult level. Its easy to understand that way, digest, build proper logic and cement your understanding in a graded manner. Thanks a ton

[wewonbro]

I like how the editor never edited anything out

[georgeclfr]

no comments for what u practically did to us man.all the people here really appreciate u .just a big thanks dude and congrats for u!

[satwikchauhan]

It's a amazing series that i ever seen.::
3:57 - How to run your first Program with Javascript
7:17 - Manipulate the DOM
15:49 - Numbers in Javascript
22:18 - Functions in Javascript
33:31 - While vs. For Loops in Javascript
39:10 - Data Types in Javascript
43:26 - Strings (Common Methods)
52:07 - Javascript in Arrays
1:11:07 - Objects in Javascript
1:18:18 - If else conditionals and switch statements
1:31:07 - Learn JSON in 5 minutes
1:36:41 - Challenge: Your age in days
2:10:07 - Challenge: Cat Generator
2:42:19 - Challenge: Rock Paper Scissors
2:58:28 - Challenge: Rock Paper Scissors PT. 2
3:57:46 - Challenge: Change Button Colors
4:39:48 - How Blackjack Works
4:45:23 - Blackjack HTML
5:05:14 - CSS Blackjack
5:28:47 - Challenge: Build a Blackjack Game with Javascript
6:06:58 - Blackjack PT. 2
6:35:42 - Blackjack PT. 3
7:03:29 - Blackjack PT. 4
7:22:08 - Blackjack PT. 5
7:39:19 - Blackjack PT. 6
7:47:56 - Blackjack PT

[rajnadkar]

Editor is so chill... He didn't cut out the parts XD

[dhandayalprasad]

3:57 - How to run your first Program with Javascript
7:17 - Manipulate the DOM
15:49 - Numbers in Javascript
22:18 - Functions in Javascript
33:31 - While vs. For Loops in Javascript
39:10 - Data Types in Javascript
43:26 - Strings (Common Methods)
52:07 - Javascript in Arrays
1:11:07 - Objects in Javascript
1:18:18 - If else conditionals and switch statements
1:31:07 - Learn JSON in 5 minutes
1:36:41 - Challenge: Your age in days
2:10:07 - Challenge: Cat Generator
2:42:19 - Challenge: Rock Paper Scissors
2:58:28 - Challenge: Rock Paper Scissors PT. 2
3:57:46 - Challenge: Change Button Colors
4:39:48 - How Blackjack Works
4:45:23 - Blackjack HTML
5:05:14 - CSS Blackjack
5:28:47 - Challenge: Build a Blackjack Game with Javascript
6:06:58 - Blackjack PT. 2
6:35:42 - Blackjack PT. 3
7:03:29 - Blackjack PT. 4
7:22:08 - Blackjack PT. 5
7:39:19 - Blackjack PT. 6
7:47:56 - Blackjack PT 7

[lleytoninnes]

Currently 1 hour and 29 minutes in. I am loving this hands on experience, especially because I want to pursue a career in computer science in University as I have just graduated high school. Just making a brief comment about your editor. I do not think he has made any cut requests you have stated in the video so far. And by doing this, you are going back and forth and confusing me a bit when you do something and delete it all only the resolve back to what you had. Nothing against you, I am learning very well compared to my other teachers and I think you are a great teacher, the only issue is the editor of this video. Thanks Qazi.

[Father_Of_Sudeera_Muthusinghe]

I Spent Whole Two Months On This Tutorial. And I Should Say It Was Worthy. As A Beginner To Js I Learnt Lot Of Things Practically From This Tutorial. But Before Following This Tutorial I Have Followed A Tutorial Which Covers The Fundamental Theories Of Js. With That Little Knowledge I Started To Follow This Video. Eventually I Was Able To Complete It Few Hours Ago. I Didn't Just Follow The Tutorial. Instead I Tweaked It A Little Bit And Added My Own Styles To Those Functions. However Now I Have An Excellent Self Confidence About Myself Regarding Js Programing. So I Have Decided To Move On To React After Building Several Websites And Applications Using Vanilla Js. The Knowledge I Gain From This Video Will Help Me To Go Through My Journey. Thank You @Clever Programmer..

[eswarkumar]

Just for my own reference

3:57 - How to run your first Program with Javascript
7:17 - Manipulate the DOM
15:49 - Numbers in Javascript
22:18 - Functions in Javascript
33:31 - While vs. For Loops in Javascript
39:10 - Data Types in Javascript
43:26 - Strings (Common Methods)
52:07 - Javascript in Arrays
1:11:07 - Objects in Javascript
1:18:18 - If else conditionals and switch statements
1:31:07 - Learn JSON in 5 minutes
1:36:41 - Challenge: Your age in days
2:10:07 - Challenge: Cat Generator
2:42:19 - Challenge: Rock Paper Scissors
2:58:28 - Challenge: Rock Paper Scissors PT. 2
3:57:46 - Challenge: Change Button Colors
4:39:48 - How Blackjack Works
4:45:23 - Blackjack HTML
5:05:14 - CSS Blackjack
5:28:47 - Challenge: Build a Blackjack Game with Javascript
6:06:58 - Blackjack PT. 2
6:35:42 - Blackjack PT. 3
7:03:29 - Blackjack PT. 4
7:22:08 - Blackjack PT. 5
7:39:19 - Blackjack PT. 6
7:47:56 - Blackjack PT 7

[AlexanderTersakian]

shoutout to the half an hour I spent debugging because I wrote "i" instead of "1" in one place.

[mwaqaskh]

First of all thanks for the tutorial ....
at 1:12:50 you have mentioned that in modern JS, we can not access any element in old way e-g student['first'] because it is depreciated, in fact it is still available. You have made a syntax error as you didn't use quotation marks " " for the key. ur syntax -> student[first] correct syntax -> student['first ']
Thanks

[xishx]

Literally took a break every half an hour. Thank you for your hardwork Qazi! For a beginner, this is really helpful for me. You are definitely my hero in javascript story!

[marvinswag]

I love this project because he covered so much of my grey areas in JS by explaining everything so well. Thanks bro, the world moves forward because of heroes like you.