Complete JavaScript Course: Build a Real World App from Scratch

Course Overview

Javascript is one of the most prominent web programming languages that really made a difference. This course aims to be a useful companion for anyone wishing to (re)discover the many facets of JavaScript. Walk with us as we take you on a journey filled with all the wonders of Javascrip... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

About this Course

Welcome to Programming

How to Create Programs?

Introduction to Algorithms

Introducing JavaScript

Summary

2. Basics of JavaScript

Your First Program

Values and Types

Program Structure

Coding Challenge: Presentation

Solution: Presentation

Coding Challenge: Minimalistic Calculator

Solution: Minimalistic Calculator

Coding Challenge: Predict the Displayed Values

Quiz

3. Play with Variables

Variables

Expressions

Type Conversions

User Interactions

Variable Naming

Coding Challenge: Improved Hello

Solution: Improved Hello

Coding Challenge: VAT Calculation

Solution: VAT Calculation

Coding Challenge: Celsius to Fahrenheit Conversion

Solution: Celsius to Fahrenheit Conversion

Coding Challenge: Variable Swapping

Solution: Variable Swapping

Quiz

4. Add Conditions

What's a Condition?

Alternative Conditions

Add Additional Logic

Multiple Choices

Coding Challenge: Following Day

Solution: Following Day

Coding Challenge: Number Comparison

Solution: Number Comparison

Coding Challenge: Number of Days in a Month

Solution: Number of Days in a Month

Coding Challenge: Adding seconds to time

Solution: Adding Seconds to Time

Quiz

5. Repeat Statements

The While Loop

The For Loop

Common Mistakes

Which Loop to Use?

Coding Challenge: Carousel

Solution: Carousel

Coding Challenge: Use of Modulo Operator

Solution: Use of Modulo Operator

Coding Challenge: Input Validation

Solution: Input Validation

Coding Challenge: Multiplication Table

Solution: Multiplication Table

Coding Challenge: Neither Yes nor No

Solution: Neither Yes nor No

Coding Challenge: FizzBuzz

Solution: FizzBuzz

Quiz

6. Write Functions

Discovering Functions

Function Contents

Anonymous Functions

Guidelines for Programming with Functions

Coding Challenge: Improved Hello

Solution: Improved Hello

Coding Challenge: Number Squaring

Solution: Number Squaring

Coding Challenge: Minimum of Two Numbers

Solution: Minimum of Two Numbers

Coding Challenge: Calculator

Solution: Calculator

Coding Challenge: Circumference and Area of a Circle

Solution: Circumference and Area of a Circle

Quiz

7. Create your First Object

JavaScript and Objects

Programming with Objects

Coding Challenge: Adding a New Property to a Character

Solution: Adding a New Property to a Character

Coding Challenge: Modeling a Dog

Solution: Modeling a Dog

Coding Challenge: Modeling a Circle

Solution: Modeling a Circle

Coding Challenge: Modeling a Bank Account

Solution: Modeling a Bank Account

Quiz

8. Store Data in Arrays

Introduction to Arrays

Manipulating Arrays in JavaScript

Iterating over an Array

Updating an Array's Content

Coding Challenge: Musketeers

Solution: Musketeers

Coding Challenge: Sum of Values

Solution: Sum of Values

Coding Challenge: Array Maximum

Solution: Array Maximum

Coding Challenge: Array Second Minimum

Solution: Second Minimum

Coding Challenge: List of Words

Solution: List of Words

Quiz

9. Work with Strings

Introduction

Strings as Set of Characters

Manipulating Strings

Searching Inside a String

Coding Challenge: Word Information

Solution: Word Information

Coding Challenge: Vowel Count

Solution: Vowel Count

Coding Challenge: Reverse a Word

Solution: Reverse a Word

Coding Challenge: Palindrome Finder

Solution: Palindrome Finder

Quiz

10. Understand Object Oriented Programming

Context: A Multiplayer RPG

JavaScript Classes

Under the Hood: Objects and Prototypes

Object-Oriented

Coding Challenge: Create a Dog Class

Solution: Create a Dog Class

Coding Challenge: Create a Character Inventory Class

Solution: Create a Character Inventory Class

Coding Challenge: Create an Account Class

Solution: Create an Account Class

Quiz

11. Discover Functional Programming

Context: A Movie List

Program State

Pure Functions

Array Operations

Higher Order Functions

JavaScript: A Multi Paradigm Language

Coding Challenge: Older Movies

Solution: Older Movies

Coding Challenge: Government Forms

Solution: Government Forms

Coding Challenge: Arrays Sum

Solution: Arrays Sum

Coding Challenge: Students Results

Solution: Students' Results

Quiz

12. Project 1: A Social News Program

Functional & Technical Requirements

Implementing Social News Program

13. Create Interactive Web Pages

What's a Web Page?

The Languages of the Web

Quiz

14. Discover the DOM

Introduction to the DOM

Get Started with the DOM in JavaScript

Coding Challenge: Showing a Node's Child

Solution: Showing a Node's Child

Quiz

15. Traverse the DOM

Sample Web Page

Selecting Elements

Selecting Elements via CSS Selectors

Obtaining Information about Elements

Coding Challenge: Counting Elements

Solution: Counting Elements

Coding Challenge: Handling Attributes

Solution: Handling Attributes

Coding Challenge: Handling Classes

Solution: Handling Classes

Quiz

16. Modify page structure

Modify an Existing Element

Adding a New Element

Variations on Adding elements

Replacing or Removing nodes

Styling Elements

DOM Manipulations & Performance

Coding Challenge: Adding a Paragraph

Solution: Adding a Paragraph

Coding Challenge: Newspaper List

Solution: Newspaper List

Coding Challenge #3: Mini-Dictionary

Solution: Mini-Dictionary

Coding Challenge #4: Updating Colors

Solution: Updating Colors

Coding Challenge #5: Information about an Element

Solution: Information about an Element

Quiz

17. React to Events

Introduction to Events

The Event Family

Reacting to Keyboard Events

Reacting to Mouse Events

Reacting to Page Events

Go farther with Events

Coding Challenge #1: Counting Clicks

Solution: Counting Clicks

Coding Challenge: Changing Colors

Solution: Changing Colors

Coding Challenge: A Dessert List

Solution: A Dessert List

Coding Challenge: Interactive Quiz

Solution: Interactive Quiz

Quiz

18. Manipulate forms

JavaScript & Forms

Form fields: Sign Up Form

Form Fields: Text Zones

Form Fields: Choice Elements

Forms as DOM Elements

Form Validation

Regular Expressions

Coding Challenge: Password Checker

Solution: Password Checker

Coding Challenge: Character List

Solution: Character List

Coding Challenge: Auto Complete

Solution: Auto Complete

Quiz

19. Animate elements

Repeat an Action at Regular Intervals

Animate Page Elements

Start/Stop an Animation

Alternative: CSS Animations

Choosing the Right Animation Technique

Coding Challenge: Chronometer

Solution: Chronometer

Coding Challenge: Bouncing Ball

Solution: Bouncing Ball

Quiz

20. Project 2: A Social News Web Page

Functional & Technical Requirements

Implementing Social News Web Page

21. Building Web Applications

How the Web Works?

HTTP, the Web Protocol

HTTP Status Codes & URL

From Web Sites to Web Apps

JSON, a Data Format for the Web

Quiz

22. Query a Web Server

Creating Asynchronous HTTP Requests in JavaScript

Handling JSON Data

Coding Challenge: Language List

Solution: Language List

Coding Challenge: Famous Paintings

Solution: Famous Paintings

Quiz

23. Use Web APIs

Introducing Web APIs

Consuming a Web API

Calling an API with JavaScript

Web APIs and Authentication

Key-Based Authentication

Coding Challenge: More Beer Please

Solution: More Beer Please

Coding Challenge: Star Wars Universe

Solution: Star Wars Universe

Coding Challenge: Github Profile

Solution: Github Profile

Quiz

24. Send Data to a Web Server

Sending Data: The Basics

Sending Form Data

Sending JSON Data

Coding Challenge: New Article

Solution: New Article

Coding Challenge: Visited Countries

Solution: Visited Countries

Quiz

25. Discover Node.js

Introducing Node.js

Node.js Modules

Exporting a Class or Object

Node.js Packages

Package Management with NPM

Relationship between Packages and Modules

Coding Challenge: Circles Again

Solution: Circles Again

Coding Challenge: Accounting Module

Solution: Accounting Module

Coding Challenge: Playing with Dates

Solution: Playing with Dates

Quiz

26. Create a Web Server

Using a Framework

Responding to Requests

Creating an API

Exposing Data

Accepting Data: Handling Form Data

Accepting data: Handling JSON Data

Publishing Web Pages

Practice Exercises

Quiz

27. Project 3: A Social News Web App

Functional and Technical Requirements

Implementing Social News Web App

28. Conclusion

Summary and Perspectives

29. Appendices

Style Guide