Back To Course Home

Complete JavaScript Course: Build a Real World App from Scratch

0% completed

Introduction

About this Course Welcome to Programming How to Create Programs?Introduction to Algorithms Introducing JavaScript Summary

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

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

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

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

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

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

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

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

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

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

Project 1: A Social News Program

Functional & Technical Requirements Implementing Social News Program

Create Interactive Web Pages

What's a Web Page?The Languages of the Web Quiz

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

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

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: Mini-Dictionary Solution: Mini-Dictionary Coding Challenge: Updating Colors Solution: Updating Colors Coding Challenge: Information about an Element Solution: Information about an Element Quiz

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

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

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

Project 2: A Social News Web Page

Functional & Technical Requirements Implementing Social News Web Page

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

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

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

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

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

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

Project 3: A Social News Web App

Functional and Technical Requirements Implementing Social News Web App

Conclusion

Summary and Perspectives

Appendices

Animate Page Elements

Let's learn how to add animation to elements present in the HTML.

Here, we see how to add real-time animation. Let’s look at a better-performing solution.

Take, for example, the movement of a <div> type element from left to right on the page. We start with the following HTML and CSS code that display a red block on the page and the JavaScript code that lets you move the red block.

Upon page load, the red block moves (indefinitely) from left to right. Try it!

Get hands-on with 1200+ tech skills courses.