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

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

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

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

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

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

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.

Create your First Object

11 Lessons

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

Store Data in Arrays

15 Lessons

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

Work with Strings

13 Lessons

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

10.

Understand Object Oriented Programming

11 Lessons

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

11.

Discover Functional Programming

15 Lessons

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

12.

Project 1: A Social News Program

2 Lessons

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

13.

Create Interactive Web Pages

3 Lessons

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

14.

Discover the DOM

5 Lessons

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

15.

Traverse the DOM

11 Lessons

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

16.

Modify Page Structure

17 Lessons

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

17.

React to Events

15 Lessons

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

18.

Manipulate Forms

14 Lessons

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

19.

Animate Elements

10 Lessons

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

20.

Project 2: A Social News Web Page

2 Lessons

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

21.

Building Web Applications

6 Lessons

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

22.

Query a Web Server

7 Lessons

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

23.

Use Web APIs

12 Lessons

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

24.

Send Data to a Web Server

8 Lessons

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

25.

Discover Node.js

13 Lessons

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

26.

Create a Web Server

9 Lessons

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

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.

28.

Conclusion

1 Lesson

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

29.

Appendices

1 Lesson

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

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