Home>Courses>Complete JavaScript Course: Build a Real World App from Scratch

Complete JavaScript Course: Build a Real World App from Scratch

Gain insights into JavaScript with ES6, DOM traversal, event handling, and animation. Learn about building a Social News web app from scratch using HTML, CSS, and JavaScript.

Beginner

277 Lessons

20h

Certificate of Completion

Gain insights into JavaScript with ES6, DOM traversal, event handling, and animation. Learn about building a Social News web app from scratch using HTML, CSS, and JavaScript.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

309 Playgrounds

77 Challenges

23 Quizzes

Course Overview

Course Content

Apply Your Skills

Recommendations

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 Javascript including: - Basics of JavaScript with ES6 - How to traverse the DOM? - Modify Pages and handle events - Animate elements You will also learn how to build a Social News web application from scratch using the three web tech...Show More

Course Content

Introduction

6 Lessons

Get familiar with JavaScript's fundamentals, from programming basics to dynamic web development.

About this Course

Welcome to Programming

How to Create Programs?

Introduction to Algorithms

Introducing JavaScript

Summary

Basics of JavaScript

9 Lessons

Look at the basics of JavaScript: values, types, program structure, and simple coding challenges.

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

14 Lessons

Break apart variables, expressions, type conversions, user interactions, and 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

13 Lessons

Break down complex ideas behind implementing and managing conditions using JavaScript.

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

17 Lessons

Map out the steps for using while and for loops proficiently, avoiding common mistakes.

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

15 Lessons

Tackle JavaScript functions to organize code, create reusable components, and solve problems efficiently.

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

11 Lessons

Piece together the parts of JavaScript objects, methods, and practical coding challenges.

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

15 Lessons

Learn how to use arrays for efficient data storage, manipulation, and iteration in JavaScript.

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

13 Lessons

Unpack the core of working with strings, including manipulation, searching, and solving coding challenges.

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

11 Lessons

Examine object-oriented principles, classes, prototypes, and combat mechanics in JavaScript.

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

15 Lessons

Enhance your skills in functional programming, JavaScript's multi-paradigm nature, and refactoring techniques.

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

2 Lessons

Solve problems in creating a basic social news app with add and remove features.

Functional & Technical Requirements

Implementing Social News Program

13.

Create Interactive Web Pages

3 Lessons

Tackle creating and understanding interactive, web-based applications using HTML, CSS, and JavaScript.

What's a Web Page?

The Languages of the Web

Quiz

14.

Discover the DOM

5 Lessons

Master the steps to interact with the DOM, navigate nodes, and handle child elements.

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

11 Lessons

Step through methods to traverse the DOM, select elements, handle attributes and classes.

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

17 Lessons

Walk through dynamically adjusting web pages using JavaScript's DOM manipulation methods and properties.

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

17.

React to Events

15 Lessons

Work your way through event-driven programming, handling various events, and completing coding challenges.

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

14 Lessons

Apply your skills to creating interactive, dynamic, and user-friendly web forms using JavaScript.

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

10 Lessons

Take a closer look at animating elements using JavaScript and CSS, covering techniques and practical applications.

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

2 Lessons

Tackle developing a dynamic social news page with enhanced features and responsive design.

Functional & Technical Requirements

Implementing Social News Web Page

21.

Building Web Applications

6 Lessons

Practice using web protocols, dynamic development techniques, and JSON for data exchange.

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

7 Lessons

Learn how to use fetch() for asynchronous HTTP requests and handle JSON data in JavaScript.

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

12 Lessons

Look at the fundamental concepts of Web APIs, key-based authentication, and JavaScript integration.

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

8 Lessons

Work your way through sending data to servers using POST requests, FormData, and JSON.

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

13 Lessons

Grasp the fundamentals of Node.js, modules, packages, NPM, and practical coding challenges.

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

9 Lessons

Dig deeper into creating and managing web servers using JavaScript with Express framework.

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

2 Lessons

Tackle developing a social news web app with Node.js, focusing on coding best practices.

Functional and Technical Requirements

Implementing Social News Web App

28.

Conclusion

1 Lessons

Approach the ongoing journey of mastering JavaScript's versatile, dynamic, and impactful nature.

Summary and Perspectives

29.

Appendices

1 Lessons

Get familiar with JavaScript naming conventions, code formatting practices, and linters for quality.

Style Guide

Course Author

Baptiste Pesquet

Show License and Attributions

Project

Build a Telegram Bot in Node.js for Web Page Change Detection

beginner

40 min

Project

Build a Telegram Bot in Node.js for Web Page Change Detection

Learn how to check website updates using Node.js and periodically look for changes on the web page. We’ll use Telegram to send alerts if anything changes.

beginner

40 mins

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

Angular: Designing and Architecting Web Applications

Learn how to develop Angular applications with TypeScript. Understand concepts such as components, pipes, directives, observables.

beginner

20 hours

Course

Beginning Flutter: Android Mobile App Development

beginner

10 hours

Course

Web Development: Unraveling HTML, CSS, and JavaScript