🚀  We just launched hackr for designers. Visit it here

Hackr.io is a programming community to find and share the best online programming courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

The Complete JavaScript Course: Build a Real-World Project (udemy.com)

Visit Tutorial
Paid Video Exercises/Practice-programs Beginner Trending
#8 out of total 48 JavaScript tutorials & courses

Why developers like this tutorial (one-liner reviews):

Qualified Instructor

Content quality

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Session:
Self Paced
Video:
17.5 hours on-demand video
Certificate:
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • Go from a total JavaScript beginner to an advanced JavaScript developer.
  • Gain a deep and true understanding of how JavaScript works behind the scenes.
  • Understand and use complex features like the 'this' keyword, function constructors, prototypal inheritance, first-class functions, closures, and more.
  • Code two beautiful real-world apps (starter code included) and not just boring toy apps.
  • Learn how to debug your code and understand other developer's code.
  • 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!
  • Become familiar with the new features of ES6 / ES2015.
  • Get helpful support in the Q&A.
  • Practice your new skills with coding challenges (solutions included).
  • Test your JavaScript knowledge with a final course exam containing 30 questions
  • Get lifetime access to my HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

Requirements

  • No coding experience is necessary to take this course! I take you from beginner to expert!
  • All you need to get started with JavaScript is a computer, a browser 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! The course includes a 5-minutes HTML and CSS crash course.

About

Description

*** The #1 JavaScript course in the official Udemy rankings! ***

"Excellent course. Jonas explains the core concepts in javascript that are usually glossed over in other courses. And he does it in a manner that is clear and concise." — John Collins

...

Do you want to learn the number #1 programming language that powers the internet?

Are you tired of wasting your time and money on random youtube videos or JavaScript courses that are either too simple, or too difficult to follow?

Or do you struggle to deeply understand and use JavaScript in real projects?

If your answer is a big YES... Then this is exactly the course you are looking for!

...

So what is the course about?

This is a truly complete JavaScript course, that goes beyond what other JavaScript courses out there teach you. 

I will take you from a complete JavaScript beginner to an advanced developer. You will not just learn the JavaScript language itself, you will also learn how to program. How to solve problems. How to structure and organize code using common JavaScript patterns.

Come with me on a journey with the goal of truly understanding the JavaScript language. And I explain everything on the way with great detail!

You will learn "why" something works in JavaScript, not just "how". Because in the modern JavaScript world of today, you need more than just knowing how something works. You need to debug code, you need to understand code, you need to be able to think about code.

To achieve our goal together, the course contains coding sessions, coding challenges, theory lectures, real-world projects and a final course exam.

This course is different because it's not just about writing code, it's also about how and why code works the way it does. Because it's the perfect mix between theory and practice. Because it focuses not only on small coding examples, but also on real-world projects and use cases. 

So, by the end of the course, you will be a capable JavaScript developer, able to write, understand and debug JavaScript code using all the powerful features the language offers to us.

...

Here is exactly what we cover in this course:

• All the JavaScript and programming fundamentals: things like variables, data types, boolean logic, if/else statements, loops, functions, objects, arrays, and more.

• Everything you need to know in order to gain a deep understanding of how JavaScript works behind the scenes: execution contexts, hoisting, scoping, the 'this' keyword, and more.

• How to make JavaScript code interact with webpages: DOM manipulation. Learn how to select and change webpage elements, create new elements and handle DOM events.

• Complex JavaScript features such as function constructors, prototypal inheritance, first-class functions, closures, the bind and apply methods, and more.

• We are going to code two beautiful real-world apps to apply our knowledge and learn new concepts (I provide the starter HTML and CSS code for these projects).

• Learn how to organize and structure your code using modules and functions, how to create data privacy and encapsulation, and why that's so important.

• What's new in the most modern version of JavaScript: new features of ES6 / ES2015.

...

Let's now find out if this course is for you. It's a perfect fit if...

Student #1: You want to gain a deep understanding of the most popular programming language in the world: JavaScript.

Student #2: 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!

Student #3: You are interested in using popular libraries/frameworks like React, Angular or Node.js.

Student #4: You want to get started with programming in general: JavaScript is a great language to learn how to code.

...

Now it's your turn to decide. This is what you get:

• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• English closed captions (not the auto-generated ones provided by Udemy).

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable starter code and final code for each section.

• Free helpful support in the course Q&A when you have questions or get stuck.

• Multiple coding challenges to practice your new skills (solutions included).

• A final course exam with 30 questions to test your JavaScript knowledge.

Sounds great? Then start this adventure today by clicking the “Take this course" button, and join me in the only JavaScript course that you will need!

Who is the target audience?
  • Take this course now if you want to gain a deep understanding of the most popular programming language in the world: JavaScript.
  • 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!
  • Take this course now if you're interested in using popular libraries/frameworks like React, Angular or Node.js.
  • Take this course now if you want to get started with programming in general: JavaScript is a great language to learn how to code.
  • Do NOT take this course if you just want to use JavaScript but don't want to know how it actually works.

Syllabus

Course Introduction

Welcome to This Course

READ BEFORE YOU START!

Get My Best Design and Coding Resources

Setting up Our Tools: Brackets and Google Chrome

JavaScript Language Basics

Section Intro

Download the Code

Introduction to JavaScript

Getting Started with JavaScript

Variables and Data Types

Variable Mutation and Type Coercion

Operators

If / else Statements

Boolean Logic and Switch Statements

Coding Challenge 1

Coding Challenge 1: Solution

Functions

Statements and Expressions

Arrays

Objects and Properties

Objects and Methods

Loops and Iteration

Coding Challenge 2

Coding Challenge 2: Solution

Important Note: ES5, ES6 / ES2015 and ES2016

How JavaScript Works Behind the Scenes

Section Intro

Download the Code

How Our Code Is Executed: JavaScript Parsers and Engines

Execution Contexts and the Execution Stack

Execution Contexts in Detail: Creation and Execution Phases and Hoisting

Hoisting in Practice

Scoping and the Scope Chain

The 'this' Keyword

The 'this' Keyword in Practice

JavaScript in the Browser: DOM Manipulation and Events

Section Intro

Download the Code

The DOM and DOM Manipulation

5-Minute HTML and CSS Crash Course

Project Setup and Details

First DOM Access and Manipulation

Events and Event Handling: Rolling the Dice

Updating Scores and Changing the Active Player

Implementing Our 'Hold' Function and the DRY Principle

Creating a Game Initialization Function

Finishing Touches: State Variables

Coding Challenge 3

Coding Challenge 3: Solution, Part 1

Coding Challenge 3: Solution, Part 2

Coding Challenge 3: Solution, Part 3

Advanced JavaScript: Objects and Functions

Section Intro

Download the Code

Everything Is an Object: Inheritance and the Prototype Chain

Creating Objects: Function Constructors

The Prototype Chain in the Console

Creating Objects: Object.create

Primitives vs. Objects

First Class Functions: Passing Functions as Arguments

First Class Functions: Functions Returning Functions

Immediately Invoked Function Expressions (IIFE)

Closures

Bind, Call and Apply

Coding Challenge 4

Coding Challenge 4: Solution, Part 1

Coding Challenge 4: Solution, Part 2

Putting It All Together: The Budget App Project

Section Intro

Download the Code

Project Setup and Details

Project Planning and Architecture: Step 1

Implementing the Module Pattern

Setting up the First Event Listeners

Reading Input Data

Creating an Initialization Function

Creating Income and Expense Function Constructors

Adding a New Item to Our Budget Controller

Adding a New Item to the UI

Clearing Our Input Fields

Updating the Budget: Controller

Updating the Budget: Budget Controller

Updating the Budget: UI Controller

Project Planning and Architecture: Step 2

Event Delegation

Setting up the Delete Event Listener Using Event Delegation

Deleting an Item from Our Budget Controller

Deleting an Item from the UI

Project Planning and Architecture: Step 3

Updating the Percentages: Controller

Updating the Percentages: Budget Controller

Updating the Percentages: UI Controller

Formatting Our Budget Numbers: String Manipulation

Displaying the Current Month and Year

Finishing Touches: Improving the UX

We’ve Made It! Final Considerations

Get Ready for the Future: ES6 / ES2015

Section Intro

Download the Code

What's new in ES6 / ES2015

Variable Declarations with let and const

Blocks and IIFEs

Strings in ES6 / ES2015

Arrow Functions: Basics

Arrow Functions: Lexical 'this' Keyword

Destructuring

Arrays in ES6 / ES2015

The Spread Operator

Rest Parameters

Default Parameters

Maps

Classes

Classes with Subclasses

Coding Challenge 5

Coding Challenge 5: Solution

How to use ES2015 / ES6 Today!

Final Course Exam: 30 Questions to Test Your JavaScript Knowledge

Some Considerations Before You Start

30 Questions to Test Your JavaScript Knowledge

Conclusion

Where to Go from Here

Be the First to Know About New Course Launches!

Wanna find a programming buddy?

Learning a new programming language can be tough especially if you are a beginner in programming. Find a programming buddy and learn this tutorial in a more engaged & fun way.

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Kirti Dewan
1 week ago

what is the fees and do we get a certificate after the course completion?

Saurabh Hooda
1 week ago

@kirti-dewan yes, a certificate is awarded by the Udemy for this course. You can find the pricing by clicking on the Visit Tutorial button above.

Dharani
6 days ago

will your tutorial provide any certification for us?..

Swapnil Banga
6 days ago

@dharani you will receive a certificate post completion from Udemy (course provider).