JavaScript for Beginners: Learn the Basics and Build Your First Script

If HTML is the structure of a web page and CSS is its style, JavaScript is what makes it do things: open a menu, check a form, show a pop-up, load new content without refreshing. W3Techs reports that JavaScript is used on about 98.9% of all websites, and it was the most used language in the 2025 Stack Overflow Developer Survey (66% of respondents).

In this guide I’ll explain what JavaScript is, show you how to run it with nothing more than a browser, cover the core ideas every beginner needs, and finish with a small project you can build in about half an hour. I’ve followed the same order as MDN’s free JavaScript course, which I recommend as your next step.

If you haven’t written any HTML yet, start with my HTML and CSS for beginners guide first. This guide builds on it.

What is JavaScript?

JavaScript is a programming language that runs in every web browser. MDN describes it as a language used mainly for dynamic scripts on web pages, and also on servers through runtimes like Node.js, Deno and Bun.

A few quick facts:

• It’s not Java. The names are similar for historical reasons, but they’re different languages. (If you’re curious about Java, see my Java vs Python comparison.)
• Its official standard is called ECMAScript, which is updated every year.
• In the browser it can change the page through the DOM (Document Object Model), fetch data from servers, store data and react to clicks and typing.

How to run JavaScript (no installation needed)

Option 1: the browser console. Open any page in Chrome, Edge or Firefox, press F12 (or right-click › Inspect) and open the Console tab. Type this and press Enter:

console.log("Hello, world!");

You’ll see Hello, world! printed. The console is perfect for trying small things.

Option 2: a file linked to your HTML page. Create a file called script.js next to your index.html, and add this line just before </body>:

<script src="script.js"></script>

Putting the script at the end of the body means the page’s HTML has loaded before your code runs. (You can also put it in the <head> with the defer attribute.)

Use a free code editor such as Visual Studio Code, which highlights mistakes as you type.

The basics you need to know

Variables: storing values

A variable is a named box that holds a value.

let score = 0;
const siteName = "WebTechHelp";
score = score + 10;

• Use const for values that won’t be reassigned (most of the time).
• Use let for values that will change.
• You’ll see var in older tutorials. Modern code avoids it because it behaves in confusing ways.

Data types

Operators and comparisons

let total = 5 + 3;        // 8
let message = "Hi " + "there"; // "Hi there"
5 === 5;   // true
5 === "5"; // false

Always use === (strict equality) to compare. The older == converts types first, which leads to surprising results.

Conditions: making decisions

let hour = new Date().getHours();

if (hour < 12) {
  console.log("Good morning");
} else if (hour < 18) {
  console.log("Good afternoon");
} else {
  console.log("Good evening");
}

Loops: repeating things

const colours = ["red", "green", "blue"];

for (const colour of colours) {
  console.log(colour);
}

Functions: reusable blocks of code

A function is a set of instructions you can run whenever you need it.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Safikul")); // "Hello, Safikul!"

You’ll also see the shorter arrow function style:

const double = (n) => n * 2;

The DOM: changing the page

This is where JavaScript gets fun. You can find elements on your page and change them.

const heading = document.querySelector("h1");
heading.textContent = "Welcome to my site";
heading.style.color = "teal";

document.querySelector() takes a CSS selector, the same ones you learned for CSS, such as "h1", ".button" or "#menu".

Events: reacting to the user

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("You clicked the button!");
});

Your first project: a dark mode toggle and greeting

Let’s put it together. Add this inside the <body> of your HTML page:

<button id="themeToggle">Switch to dark mode</button>

<form id="greetForm">
  <label for="nameInput">Your name</label>
  <input id="nameInput" type="text" required>
  <button type="submit">Say hello</button>
</form>

<p id="greeting"></p>

<script src="script.js"></script>

Add this to your CSS file:

body.dark {
  background: #1e1e1e;
  color: #f2f2f2;
}

Now put this in script.js:

// 1. Dark mode toggle
const toggle = document.querySelector("#themeToggle");

toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    toggle.textContent = "Switch to light mode";
  } else {
    toggle.textContent = "Switch to dark mode";
  }
});

// 2. Greeting form
const form = document.querySelector("#greetForm");
const nameInput = document.querySelector("#nameInput");
const greeting = document.querySelector("#greeting");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // stop the page reloading
  const name = nameInput.value.trim();
  greeting.textContent = "Hello, " + name + "! Thanks for visiting.";
});

Open the page in your browser. Click the first button to switch themes, then type your name and press Say hello.

What you just used: variables (const), the DOM (querySelector, textContent, classList), events (addEventListener), a condition (if) and the form’s submit event. That’s the core of most everyday JavaScript on websites.

When something doesn’t work

Every beginner (and every professional) writes code that breaks. Here’s how to find the problem:

1. Open the console (F12). Errors appear in red with a file name and line number.
2. Check spelling and capitals. JavaScript is case-sensitive: querySelector works, queryselector doesn’t.
3. Check brackets and quotes. Every (, { and " needs a matching closing one. A good editor highlights pairs.
4. Use console.log() to print values and see what your code is actually doing.
5. Check the selector. If querySelector returns null, the element’s ID or class doesn’t match your HTML, or the script ran before the HTML loaded.

What to learn next

Once you’re comfortable with the basics, these are the natural next steps:

• Arrays and objects in depth: methods like map, filter and find.
• Fetching data: using fetch() to load data from an API, and working with JSON.
• Async code: promises and async/await.
• Modules: splitting code into files with import and export.
• A framework such as React, once you can build small things without one. My comparison of React vs Angular explains the main options.
• Performance: heavy JavaScript is a common cause of slow, unresponsive pages. See my guide to improving Core Web Vitals, especially the INP section.

Good free resources:

• MDN’s “Dynamic scripting with JavaScript” course: structured lessons with exercises and challenges.
• javascript.info (The Modern JavaScript Tutorial): a thorough, free tutorial from basics to advanced topics.

Can AI help you learn JavaScript?

Yes, if you use it as a tutor rather than a shortcut. Tools like ChatGPT are good at explaining an error message or a confusing line of code. But if you paste in AI-written code you don’t understand, you won’t learn and you won’t be able to fix it when it breaks. I’d write the code yourself first, then ask AI to explain or review it.

Frequently asked questions

How long does it take to learn JavaScript? You can learn the basics in this guide in a few weeks of regular practice. Becoming job-ready usually takes several months of building real projects.

Do I need to learn HTML and CSS first? For web development, yes. JavaScript mostly works with HTML elements and CSS classes, so you need to know them to do anything useful in the browser.

Is JavaScript hard for beginners? The basics are approachable, and you can see results instantly in the browser, which keeps it motivating. Some later topics, like asynchronous code, take more practice.

Is TypeScript the same as JavaScript? TypeScript is JavaScript with added type checking. It’s popular for larger projects. Learn plain JavaScript first; TypeScript will make more sense afterwards.

Related guides on WebTechHelp

• HTML and CSS for beginners
• Angular or React: which JS framework to choose?
• Why data types are crucial in programming
• The benefits of using JavaScript for file uploads

Sources

• MDN Web Docs: JavaScript (glossary)
• MDN Web Docs: Dynamic scripting with JavaScript
• MDN Web Docs: JavaScript Guide
• W3Techs: Usage statistics of JavaScript as client-side programming language
• Stack Overflow: 2025 Developer Survey, Technology
• The Modern JavaScript Tutorial (javascript.info)