Complete JavaScript Course: Build a Real World App from Scratch

This is a course on JavaScript for beginners who want to learn Javascript programming by creating a real web application, such as a Social News app.

Beginner

277 Lessons

20h

Certificate of Completion

This is a course on JavaScript for beginners who want to learn Javascript programming by creating a real web application, such as a Social News app.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

309 Playgrounds

77 Challenges

23 Quizzes

This course includes

309 Playgrounds

77 Challenges

23 Quizzes

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

TAKEAWAY SKILLS

Javascript

Programming Language

Learn To Code

Course Content

Introduction

The chapter overviews programming and the role of algorithms in finishing a coding task. It enlists famous programming languages and introduces JavaScript.

About this Course

Welcome to Programming

How to Create Programs?

Introduction to Algorithms

Introducing JavaScript

Summary

Basics of JavaScript

The chapter explains the basic structure of a JS program, covering basic constructs, e.g., printing on the console, data types, and the execution flow.

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

The chapter focuses on essential JavaScript concepts like variables, expressions, type conversions, and user interactions, enhanced through practical coding challenges and solutions.

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

The chapter explores conditional logic in JavaScript, covering if/else statements, logical operators, and the switch statement.

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 chapter explores loop structures in JavaScript, including while and for loops, their usage, and 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

The chapter explores functions in JS, covering definitions, parameters, return values, anonymous functions, and best coding practices.

Create your First Object

11 Lessons

The chapter describes OOP in JavaScript, guiding the creation of objects, how to add and call methods on objects, and the use of ‘this’ object.

Store Data in Arrays

15 Lessons

This chapter focuses on arrays in JavaScript, explaining their structure, manipulation techniques, and data retrieval techniques.

Work with Strings

13 Lessons

The chapter focuses on strings in JavaScript, covering definitions, operations, indexing, slicing, and other manipulation techniques.

10.

Understand Object Oriented Programming

11 Lessons

The chapter explains OOP in detail, focusing on class structures and prototypes inspired by real-world instances.

11.

Discover Functional Programming

15 Lessons

The chapter explains program state and functional programming, covering pure functions, higher-order functions, and array methods that support this paradigm.

12.

Project 1: A Social News Program

2 Lessons

The chapter details the functional requirements for creating a project on a social news program and implementing interactive user management features.

13.

Create Interactive Web Pages

3 Lessons

The chapter introduces WWW and web pages, enlisting popular web languages used for user engagement and dynamic content presentation.

14.

Discover the DOM

5 Lessons

The chapter focuses on understanding the Document Object Model (DOM), its structure, and JavaScript interactions.

15.

Traverse the DOM

11 Lessons

The chapter explains how to traverse DOM with JS and different techniques to select elements and properties to retrieve information.

16.

Modify Page Structure

17 Lessons

The chapter focuses on DOM manipulation techniques, covering element modification, addition, removal, styling, and manipulation drawbacks.

17.

React to Events

15 Lessons

The chapter focuses on event-driven programming in JavaScript, covering event types, handling user interactions, and even propagation.

18.

Manipulate Forms

14 Lessons

The chapter focuses on enhancing form interactions in web development through JavaScript, covering user input management, validation, and dynamic elements.

19.

Animate Elements

10 Lessons

The chapter explores various JavaScript techniques for animating elements, including timers, real-time movements, and CSS alternatives.

20.

Project 2: A Social News Web Page

2 Lessons

The chapter focuses on building a social news webpage built on the previous project, setting its functional requirements, and implementing interactive features.

21.

Building Web Applications

6 Lessons

The chapter covers core concepts of web architecture, e.g., HTTP protocols, requests, status codes, dynamic applications, and JSON data format.

22.

Query a Web Server

7 Lessons

The chapter focuses on making asynchronous HTTP requests, handling JSON data, and integrating external data into web applications.

23.

Use Web APIs

12 Lessons

The chapter introduces APIs explaining how to leverage web services in applications and covering open-source APIs and APIs requiring authentication.

24.

Send Data to a Web Server

8 Lessons

The chapter emphasizes methods for sending data to web servers using POST requests, utilizing FormData and JSON for efficient data transmission.

25.

Discover Node.js

13 Lessons

The chapter introduces Node.js and how it enables efficient execution outside the browser, emphasizing modules, packages, and npm for effective development.

26.

Create a Web Server

9 Lessons

The chapter focuses on creating a web server using Node.js and Express, covering request handling, API creation, data management, and serving web pages.

27.

Project 3: A Social News Web App

2 Lessons

The chapter focuses on building a social news web app with Node.js, setting its functional and technical requirements for its development.

28.

Conclusion

1 Lesson

The chapter provides a quick rundown of the complete course and the road ahead.

29.

Appendices

1 Lesson

The chapter highlights best practices in JavaScript naming conventions and code formatting to enhance readability and maintainability.

Course Author

Show License and Attributions

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

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!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath