Last updated 7/2022Course Language EnglishCourse Caption English [Auto]Course Length 46:14:56 to be exact 166496 seconds!Number of Lectures 448
This course includes:
46 hours hours of on-demand video
8 article
Certificate of completion
196 additional resources
students will know what is Javascript
students will know how to add Javascript to their projects
students will know the basics of working with Javascript
students will build projects using Javascript
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.Three fundamental languages of the web are HTML, CSS and Javascript.Html is used for structure, CSS is used for styling and Javascript is used for functionality.Reasons to learn JavascriptNumber One - Javascript is the most popular programming language in the world.Number Two - Javascript is de facto language of the webNumber Three - Javascript is Easy to learnNumber Four - Knowing Javascript provides great opportunity to get a jobNumber Five - Javascript is Everywhere.Javascript is not web-exclusive anymore. Its on the servers (NODE.JS), cross-platform desktop-apps etc...This step by step course is intended for everyone who wants to start working with Javascript.We will cover what is Javascript, how to add Javascript to our projects, how to start working with Javascript and at the end we will make quite a few projects. A basic knowledge of HTML, CSS would be preferred.Here is the list of projects we are going to build in this course1. Color Flipper2. Counter3. Reviews4. Navbar5. Sidebar6. Modal7. Questions8. Menu9. Video10. Scroll11. Tabs12. Countdown Timer13. Lorem Ipsum14. Grocery Bud15. Slider16. Counters (OOP)17. Gallery (OOP)18. Numbers19. Dark Mode20. Filters21. Dad Jokes22. Products23. Random User24. Cocktails25. Slider26. Stripe Submenus27. Pagination28. Wikipedia29. Comfy Sloth30. Comfy SlothWho this course is for:Anyone who wants to start working with Javascript
Course Content:
Sections are minimized for better readability, click the section title to view the course content
5 Lectures | 08:38
Intro
02:34
Goals
01:43
Structure
02:16
Video Blur Fix
01:35
Course Review
00:30
8 Lectures | 21:11
Intro
01:00
Install Google Chrome
03:10
Install VS-CODE
01:49
VS-CODE Overview
03:55
Install Live-Preview
03:38
Install Prettier
02:58
Emmet
03:37
My Setup
01:04
41 Lectures | 04:16:55
Basics Intro
00:17
Basic Project
03:00
Inline Javascript
03:15
Internal Javascript
07:51
External Javascript
10:01
Cleanup Workspace
01:08
Helper Methods
10:06
Statements and Comments
09:31
Variables
08:47
Assign Variable Value Later
04:22
Variable Naming Rules
06:04
const, let, var
05:14
Challenges Intro
01:13
Variables Challange
03:59
Prettier Settings
03:21
Quotation Marks
05:46
String Concatenation
05:25
String Concat Challenge
02:53
Numbers Basics
08:21
Numbers - Additional Features
08:24
Numbers Challenge
07:10
Implicit Type Conversion
12:00
Data Types
08:13
Arrays
11:14
Array Challenge
02:58
Functions - Declare, Invoke
06:26
Functions - Parameters, Arguments
12:56
Functions - Return
13:21
Function Expressions
07:43
Function Challenge
06:31
Objects
08:23
Object Challenge
04:20
Conditional Statements - Basics
05:57
Conditional Statements Continued
07:02
Equality
04:24
Logical Operators
04:24
Switch Statement
07:27
Conditionals Challenge
04:33
while Loops
05:55
do while loops
02:57
for loop
04:03
33 Lectures | 03:46:01
Connecting The Dots
00:24
String Properties and Methods
16:34
Template Literals
06:10
Strings Challenge
07:14
Array Properties and Methods
11:50
Exercise - Full Name
10:13
Exercise - Calculate Total
14:40
Value vs Reference
05:51
Null and Undefined
02:15
Truthy and Falsy
04:34
Ternary Operator
04:16
Global Scope
07:25
Local Scope
07:02
Variable Lookup
06:52
Callback Functions, Higher Order Functions
15:07
Array Iterators
02:22
forEach
09:44
map
10:43
filter
03:55
find
08:30
reduce
09:48
Array Challenge - Intro
01:00
Array Challenge - Setup Data
03:43
Array Challenge - Multiple Files
06:15
Array Challenge - Map
04:49
Array Challenge - Filter
03:30
Array Challenge - Filter Alternative Syntax
04:08
Array Challenge - Find
03:59
Array Challenge - Reduce #1
05:51
Square Bracket Notation
03:22
Array Challenge - Reduce #2
06:04
Math Object
08:33
Date Object
09:18
40 Lectures | 03:50:59
DOM - Intro
02:39
DOM - General Concepts
08:40
Window and Document Overview
04:15
Get Element By ID
06:51
Get Elements By Tag Name
08:21
Get Element By Class Name
01:57
Query Selector and Query Selector ALL
07:29
Navigate the DOM - Children
04:54
Navigate the DOM - parentElement
03:06
Navigate the DOM - nextSibling, previousSibling
04:28
Navigate the DOM - nextElementSibling, previousElementSibling
01:15
textContent nodeValue
02:57
getAttribute() setAttribute()
08:09
classList and className
09:28
createElement - createTextNode - appendChild
08:09
insertBefore
03:43
replaceChild
02:23
prepend innerText
03:10
remove removeChild
04:52
innerHTML and textContent
08:24
Change CSS with style property
05:07
Events Overview
01:53
Click Event
07:23
Function Reference
04:51
Mouse Events
05:17
Key Events
04:13
Event Object
10:48
CurrentTarget vs Target
07:33
Event Propagation - Bubbling- Capturing
10:39
Event Propagation Example
07:31
Forms
05:48
Local Storage
09:22
Local Storage With Multiple Values
09:05
setTimeout
09:36
setInterval
03:22
Events - "DOMContentLoaded"
06:07
Events - "load"
06:10
Events - "scroll"
02:48
Width, Height, GetBoundingClientRect
07:09
Events - "resize"
01:07
75 Lectures | 08:21:52
Intro
01:17
Starter Project
00:06
Setup
04:11
Color Flipper - Simple HTML
04:10
Color Flipper - Simple Javascript
08:58
Color Flipper - Hex
10:16
Counter HTML
02:25
Counter JS
11:14
Reviews HTML
04:45
Reviews JS
22:40
Navbar HTML
02:48
Navbar General Concepts
04:08
Navbar JS
07:56
Sidebar HTML
03:44
Sidebar Manual Setup
03:07
Sidebar JS
05:51
Modal HTML
03:39
Modal Challange
02:42
Modal JS
03:02
Questions HTML
07:14
Questions General Concept
02:54
Questions JS - Traversing the DOM
07:32
Questions JS - Using Selectors Inside the Element
10:19
Menu HTML
06:56
Display Items When Page Loads
14:39
Refactor
03:12
Filter Buttons HTML
01:57
Filter Buttons JS
11:42
Dynamic Filter Buttons
04:01
Unique Categories
07:29
Dynamic Filter Buttons Complete
09:40
Video Intro
01:12
Video HTML
02:44
Video Overlay Setup
02:42
Video JS
04:59
Video Preloader
04:51
Scroll Intro
03:31
Scroll HTML
10:37
Scroll - Setup Date
02:11
Scroll - Toggle Simple Setup
06:16
Scroll - Toggle Dynamic
10:44
Scroll - Fixed Navbar
08:50
Smooth Scroll Setup
10:23
Smooth Scroll Complete
10:53
Tabs HTML
11:42
Tabs JS
10:56
Countdown HTML
05:53
Set Date
19:51
Calculate Remaining Time
27:47
Time From Now
04:10
Lorem Ipsum HTML
04:26
Lorem Ipsum JS
17:20
GroceryBud - Intro
03:22
GroceryBud - HTML
05:09
GroceryBud - Select Elements
03:13
GroceryBud - addItem Setup
07:26
GroceryBud - truthy shortcut
03:32
GroceryBud - display alert
05:29
GroceryBud - addItem
08:49
GroceryBud - setBackToDefault
02:34
GroceryBud - clear items
06:54
GroceryBud - select edit and delete buttons
07:23
GroceryBud - delete item
07:18
GroceryBud - edit item
11:16
GroceryBud - localStorage info
04:25
GroceryBud - addToLocalStorage
08:38
GroceryBud - removeFromLocalStorage
05:39
GroceryBud - editLocalStorage
04:46
GroceryBud - load items from localStorage
06:49
Slider Intro
01:29
Slider HTML
03:34
Slider General Concepts
05:14
Slider JS Setup
03:27
Slider JS - Slides Approach
06:06
Slider JS - Button Approach
02:48
3 Lectures | 12:42
Netlify Intro
01:08
Drag and Drop Option
03:32
Continuous Deployment
08:02
15 Lectures | 01:49:37
Intro
02:10
Object Basics
06:13
Nested Objects, Bracket Notation
11:59
'this' - Keyword Basics
08:20
"this" - Keyword Advanced
07:10
Factory Functions
06:42
Constructor Functions
07:48
Constructor Property
04:51
Prototype Property
09:58
Property Lookup
05:45
ES6 Class Syntax
12:14
Call
09:42
Apply, Arguments
05:42
Bind
02:15
Button Example
08:48
17 Lectures | 01:33:13
Intro
02:09
Setup
01:47
Counter - HTML
03:10
Counter Setup
07:56
Counter - Select Elements
05:13
Counter - Functions
04:05
Counter - Complete
05:43
Counter - Class Refactor
03:43
Gallery Intro
01:08
Gallery - HTML
09:24
Gallery - Select Elements
06:37
Gallery - Open Modal Setup
12:10
Gallery - Open Modal Complete
12:06
Gallery - Close Modal
06:31
Gallery - Prev and Next
05:22
Gallery - Select Images
05:30
Gallery - Class Refactor
00:39
6 Lectures | 36:56
Intro
00:18
IIFE
08:59
Hoisting
06:26
Closure
08:28
Closure - Basic Example
03:53
Closure - Complete Example
08:52
34 Lectures | 02:53:43
ES6 Module Intro
02:20
VAR, LET, CONST
06:07
Function Scope and Block Scope
10:18
Template Strings
03:43
Template Strings - HTML
05:25
Tagged Template Literals
11:08
Arrow Functions - Basics
14:16
Arrow Functions - Objects and "this"
06:55
Arrow Functions - Select Elements and "this"
04:47
Default Parameters and Hoisting Gotchas
03:50
Array Destructuring
05:24
Swap Variables
02:39
Object Destructuring
05:03
Destructuring Function Parameters
03:01
New String Methods
07:32
"for of" - Loop
03:59
Spread Operator - Basics
05:26
Spread Operator - Objects
03:01
Spread Operator - DOM Elements
03:27
Spread Operator - Functions Arguments
03:38
Rest Operator
10:36
Array.of
02:06
Array.from - Strings and Arguments Object
04:34
Array.from - DOM Elements(NodeList)
07:00
find, findIndex,every,some
08:59
"for in" - Loop
01:44
Object.keys()
01:15
Object.values()
00:26
Object.entries()
04:40
new Set() - General Overview
04:21
new Set() - Use Case
06:02
String includes()
05:31
Array includes()
03:08
Important Info
01:22
23 Lectures | 01:32:50
Projects - Intro
00:40
Numbers - Intro
00:23
Numbers - Setup
00:36
Readme
00:50
Numbers - HTML Structure
03:09
Numbers - Select Elements
04:25
Numbers - Initial Variables
03:20
Numbers - Complete
06:54
Dark Mode - Intro
00:59
Dark Mode - Setup
00:27
Dark Mode - HTML Structure
03:41
Dark Mode - Toggle CSS
07:09
Dark Mode - Import Data
03:26
Dark Mode - Render Items
04:21
Dark Mode - Moment.js
06:21
Filters - Intro
01:48
Filters - HTML Structure
06:47
Filters - Display Products
07:59
Filters - Text Filter
09:40
Filters - Let and Original Array
04:40
Filters - Empty Array
03:27
Filters - Display Buttons
06:12
Filters - Buttons Filter
05:36
5 Lectures | 32:54
Intro
02:31
Setup
06:47
Named Export
05:54
Default Export
08:48
Get Element
08:54
11 Lectures | 01:40:24
Intro
00:54
Synchronous
03:33
Recipe Example
04:54
Asynchronous
12:21
Callback Hell
10:44
Callback Hell - DOM Example
10:24
Promises
10:45
Important Unsplash API update !!!!
00:14
Reject Example
20:05
Promises - DOM Example
13:32
Async/Await
12:58
11 Lectures | 01:24:26
Intro
01:06
AJAX, HTTP, API
04:32
Simple Text
26:33
Add Button
05:15
JSON
16:55
Fetch
09:59
Fetch - Errors "gotcha"
02:02
Fetch - Big Picture
01:55
Fetch with Function
06:35
Fetch - with async/await
04:34
Try / Catch
05:00
43 Lectures | 04:40:23
AJAX Projects - Intro
01:03
Dad Jokes - Intro
00:10
Dad Jokes - HTML Structure
01:37
API Fundamentals
03:29
Dad Jokes - Docs
04:50
Dad Jokes - Select Elements
01:40
Dad Jokes - Fetch Random Joke
08:39
Dad Jokes - Loading
01:58
Dad Jokes - Try / Catch
01:48
Dad Jokes - Throw New Error
06:28
Products - Intro
00:33
Products - HTML Structure
07:39
Products -Possible AJAX States
04:01
Products - API Docs
03:28
Products - Fetch Products
03:34
Products - Loading and Error
03:50
Products - Start Function
05:02
Products - Display Products
11:57
Products - Query Params
05:47
Products - Single Product HTML
05:25
Products - Initial Logic
04:31
Products - Fetch Product
08:04
Products - Display Single Product
05:38
Products - Display Colors
03:06
Random User - Intro
01:18
Random User - HTML
10:06
Random User - API
04:44
Random User - Select Elements
14:37
Random User - Fetch User
20:46
Random User - Display User
18:28
Cocktails - Intro
01:14
Cocktails - Setup
02:51
Cocktails - HTML
09:49
Cocktails - API
07:36
Cocktails - Present Drinks
05:35
Cocktails - Fetch Drinks
05:07
Cocktails - Display Drinks
16:08
Cocktails - Search Form
10:26
Cocktails - Loading
06:56
Cocktails - Set Drink
14:43
Cocktails - Single Drink HTML
03:34
Cocktails - Single Drink
10:40
Cocktails - Display Single Drink
11:28
1 Lectures | 01:03
More Projects - Intro
01:03
8 Lectures | 43:28
Intro
00:23
Starter Project
00:11
HTML Setup
06:47
Display People
12:53
Apply CSS
07:11
Next Slide
07:35
Next Slide - End of Array
02:27
Prev Slide
06:01
8 Lectures | 58:44
Intro
01:39
Starter Project
00:11
HTML
09:10
Sidebar Toggle
09:50
Sidebar Complete
11:47
Submenu Setup
12:36
Submenu Links
06:38
Submenu - Hide and Column Layout
06:53
8 Lectures | 57:13
Intro
01:04
Starter Project
00:10
Setup
03:35
Fetch Followers
05:10
Display Followers
10:21
Paginate - Create Pages
12:54
Display Buttons
14:44
Button Functionality
09:15
6 Lectures | 23:50
Intro
01:16
HTML Structure
04:01
API Docs
04:33
Initial Setup
04:55
Fetch Pages
05:38
Render Results
03:27
46 Lectures | 05:27:32
Intro
03:59
About
03:29
Starter Project
00:21
Setup
01:56
Starter Overview
03:35
Navbar, Hero - HTML
07:50
Sidebar HTML
06:13
Sidebar Toggle
08:59
Cart HTML
10:31
Cart Toggle
08:18
About Page
06:51
API Overview
07:33
Featured Products - HTML
09:26
Fetch Products
08:20
Setup Store
11:11
Exports - Alternative Syntax
02:50
LocalStorage
09:09
Featured Products
01:42
Display Products
08:30
Format Price
10:19
AddToCart Setup
06:16
Product HTML
04:12
Display All Products
02:36
Page Loading
03:30
Filters HTML
04:07
Search Filter
15:08
Companies Filter
15:13
Price Filter
13:04
Single Product - Overview
03:29
Single Product - HTML
08:11
Single Product - Initial JS
05:41
Single Product - Fetch Product
04:21
Single Product - Fetch Error
09:25
Single Product - Complete
13:07
setupCart - Initial Setup
09:43
addToCart - Setup
11:22
addToCartDOM
08:32
addToCart - Totals
09:33
setupCart - init
07:42
Cart - Update Items
10:28
Cart - Remove Item
09:45
Cart - Increase Amount
03:25
Cart - Decrease Amount
05:40
Products Page Fix
06:09
Bug Fix 2
05:47
Finished Project
00:04
1 Lectures | 00:19
Bonus
00:19
4.72
(3677 course ratings)
1
27/3677
2
24/3677
3
171/3677
4
841/3677
5
2614/3677
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.
Free Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
FAQ: Udemy Free course Most frequent questions and answers
Does Udemy offer Free Udemy coupons?
Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At theprogrammingbuddy.club we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.
How to get free Udemy courses?
There are two ways to get free Udemy courses:
Go to udemy.com and search for your desired course category. Then select free from the filter options.
You can also get paid courses for free if you have a coupon. You can head to theprogrammingbuddy.club, where you can get a daily udemy paid course for free.
How to get Udemy Certificates for free?
Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.
To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.
Do Udemy courses expire?
No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.
Why are the Udemy instructors giving away free Udemy Coupons?
Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We attheprogrammingbuddy.club work with these instructors to get their courses available to our buddies.
Is Udemy safe to use?
Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.
Can Udemy courses get you a job?
Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.
