If you’ve ever wondered how buttons become clickable, how animations react to user actions, or how websites feel alive, JavaScript is the answer.

This article is based on Day 01 of the 40 Days of JavaScript journey, where we lay the foundation for learning JavaScript in a structured, confidence-building way, from absolute basics to real-world usage.

What You’ll Learn in This Session

By the end of this lesson, you’ll understand:

• What JavaScript is and why it matters even today

• How the 40 Days of JavaScript learning journey is structured

• How JavaScript works on the browser and the server

• How to set up your JavaScript development environment

• Different ways to run JavaScript (browser, HTML, Node.js)

• How script, async, and defer really work

• Why script loading order matters for performance and correctness

Watch the Video

If you prefer learning visually, this video guides you through every concept step by step, featuring live coding and demos.

Why JavaScript Is(still) the Backbone of the Web

JavaScript is the programming language that brings interactivity to the web.

It enables:

• Button clicks and form interactions

• Animations and dynamic UI updates

• Real-time behaviour on web pages

• Complex applications on boththe browser and server

Today, JavaScript is used to build:

• Websites and web apps

• Backend servers using Node.js

• Mobile applications

• Games and AI-powered products

In short, JavaScript is ubiquitous, and learning it opens up many doors.

How the “40 Days of JavaScript” Journey Works

This is not a daily-video challenge.

Instead:

• You can take the sessions at your own pace

• Each lesson includes tasks and assignments

• Concepts start simple and gradually become advanced

• Learners are encouraged to pause, practice, and reflect

JavaScript cannot be rushed.

You don’t “finish” it, you build confidence over time.

That’s why this journey focuses on:

• Consistency over speed

• Structure over randomness

• Practice over passive watching

Building a Learning Habit With the Progress Tracker

Many developers start strong but drop off midway due to a lack of structure.

To solve this, a free progress tracker is provided that you can add to your Notion workspace. With it, you can:

• Track each day’s lesson

• Add learning dates and video links

• Record key takeaways

• Maintain notes for revision

• Track task completion and GitHub links

This tracker helps you build a habit, not just consume content.

What Exactly Is JavaScript?

JavaScript is a programming language that runs in two major places:

Client-Side (Browser)

• Adds interactivity to web pages

• Works with HTML (structure) and CSS (styling)

• Handles user actions like clicks, scrolls, and inputs

Server-Side (Node.js)

• Handles data, APIs, authentication, and logic

• Runs JavaScript outside the browser

This dual nature makes JavaScript extremely powerful and versatile.

A Quick (But Inspiring) History of JavaScript

JavaScript was created in 1995 in just 10 days, yet it continues to dominate web development.

Some major milestones:

• ES5 standardised JavaScript features

• ES6 (2015) introduced modern syntax like let, const, classes, and modules

• Async/Await simplified asynchronous programming

• JavaScript expanded into servers, frameworks, and AI tooling

JavaScript didn’t stagnate; it evolved continuously, and it’s still evolving today.

Setting Up Your JavaScript Environment

To begin coding, you need just three things:

Code Editor

Visual Studio Code is recommended for its simplicity and power.

Browser

Any modern browser works, but Chrome/Safari is commonly used. You’ll rely heavily on Developer Tools, especially the Console.

Node.js

Node.js allows JavaScript to run outside the browser. You’ll use it more in later sessions.

Running Your First JavaScript Code

Using the Browser Console

You can instantly run JavaScript inside DevTools:

console.log("Hello JavaScript");

This confirms JavaScript is working in your browser.

Using HTML + JavaScript Files

A more realistic setup involves:

• Writing HTML for structure

• Writing JavaScript in a separate .js file

• Linking them using the <script> tag

This introduces the principle of separation of concerns:

• HTML for structure

• CSS for styling

• JavaScript for behaviour

Understanding Script Loading: script, async, and defer

Script loading order matters.

The Problem

If JavaScript runs before HTML elements exist, it can cause errors.

The Solutions

• async: Downloads in parallel and executes immediately

  Best for independent third-party scripts (analytics, chat widgets).

• defer: Downloads in parallel but executes after HTML parsing

  Best for application code that interacts with the DOM.

Rule of thumb:

• Use defer for your scripts.

• Use async for external scripts.

JavaScript on the Server (Preview)

JavaScript can also run outside the browser using Node.js:

node script.js

This allows JavaScript to power backend services and full-stack applications, a topic explored later in the journey.

Code Examples on GitHub

All code demonstrated in this session is available in the GitHub repository linked below.

What’s Next?

In Day 02, we’ll cover:

• Variables (var, let, const)

• Values and data types

• Pass by value vs pass by reference

• Concepts that directly impact React and modern frameworks

Part of the 40 Days of JavaScript Series

• Full Video Playlist

• Daily Tasks & Assignments

• Community Discussions

• Progress Tracker

Let’s build JavaScript confidence. One solid step at a time 🚀

---

Liked it? Please let me know with your comments and likes. ❤️

Let's connect:

• tapaScript on YouTube

• Check out my FREE Courses & Books

• X(Twitter)

• LinkedIn

• GitHub