How to Create a Simple JavaScript Code (Step-by-Step Guide)

Last updated on November 12, 2025

If you’ve ever looked at a website and wondered how buttons pop up, forms validate themselves, or pages update without reloading — that’s JavaScript doing its magic. And guess what? You don’t need to be a pro to start learning it. JavaScript is surprisingly friendly once you get hands-on.In this step-by-step guide, I’ll show you how to create your first simple JavaScript code, understand what it’s doing, and see your work come alive right in your browser. Let’s dive in together — no stress, no confusion.

What You’ll Need

A web browser (Chrome, Firefox, Edge, or Safari).
A text editor — Notepad, TextEdit, or Visual Studio Code (which I personally recommend).
Basic curiosity and a little patience — that’s all you really need.

Step 1 — Create Your Project Folder

Let’s start fresh. Create a new folder on your desktop and name it something like my-first-js. Inside this folder, you’ll save all your files.

Step 2 — Create an HTML File

Since JavaScript runs inside a web page, we’ll need an HTML file to hold our code. Open your text editor, and type the following:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First JavaScript</title>
  </head>
  <body>
    <h1>My First JavaScript Code</h1>
    <p id="message">Click the button below to see what happens!</p>
    <button onclick="showMessage()">Click Me</button>

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

Save this file as index.html in your my-first-js folder. This HTML file includes a button and a paragraph, and we’ve linked to a JavaScript file called script.js that we’ll create next.

Step 3 — Create the JavaScript File

Now, create a new file in the same folder and name it script.js. This is where the fun begins.

function showMessage() {
  const message = document.getElementById("message");
  message.innerHTML = "You just ran your first JavaScript function!";
  message.style.color = "green";
}

Save it and go back to your HTML file. Open it in your browser (just double-click it). Click the button — and there it is! Your page instantly updates with a new message. That’s your first working JavaScript code.

Step 4 — Understanding What Just Happened

Let’s break it down a bit:

function showMessage() — defines a reusable block of code called a “function.”
document.getElementById(“message”) — finds the paragraph element with the ID “message.”
innerHTML — changes the text inside that paragraph.
style.color = “green” — changes the color of the text.

It’s basically like telling the browser: “Hey, when someone clicks that button, grab that text, change it, and make it green.” That’s what JavaScript does — it makes your web pages respond to people’s actions.

Step 5 — Add a Little Interaction

Let’s make it more interesting. You can ask the user for their name and display it back to them. Replace your showMessage function with this:

function showMessage() {
  const name = prompt("What's your name?");
  if (name) {
    document.getElementById("message").innerHTML = "Nice to meet you, " + name + "!";
  } else {
    document.getElementById("message").innerHTML = "You didn’t enter a name.";
  }
}

Now reload your page and click the button again. You’ll see a small popup asking for your name. Enter it, and JavaScript will greet you personally. Feels cool, right?

Step 6 — Write JavaScript Directly in HTML (Optional)

You can also write small scripts directly inside your HTML file. For instance:

<script>
  alert("Hello from inside HTML!");
</script>

This code shows a popup when the page loads. However, it’s a good habit to keep your JavaScript in a separate file for organization, especially when your code gets longer.

Step 7 — Use Console Logs to Debug

As you start experimenting, you might make mistakes — and that’s totally normal. JavaScript has a built-in helper called console.log() that lets you print messages for testing.

console.log("JavaScript is working!");

To see these messages, right-click anywhere on your page, click “Inspect,” and open the “Console” tab. It’s like your personal chat with the browser — super helpful for debugging.

Step 8 — Add Simple Math or Logic

JavaScript can also do calculations. Try this inside your script.js:

const a = 5;
const b = 3;
const sum = a + b;
console.log("The sum is: " + sum);

Refresh your page and check the console again. You’ll see: “The sum is: 8.” Congratulations, you just made your browser do math.

Step 9 — Common Mistakes Beginners Make

Forgetting to save files — always save before refreshing the browser.
Wrong file paths — make sure your script.js is in the same folder as your HTML file if you linked it like src="script.js".
Typos in function names — JavaScript is case-sensitive, so showMessage isn’t the same as Showmessage.
Missing closing brackets or quotes — these tiny mistakes can break your code. Don’t worry; every coder faces them daily.

Step 10 — Where to Go Next

Once you’ve played with this little example, you’re ready to explore more. Try adding interactivity like:

Changing background colors with a click.
Showing or hiding text.
Creating a small calculator or a digital clock.

And when you’re ready to dive deeper, learn CSS, HTML and explore MDN Web Docs. It’s the most trusted, beginner-friendly source for JavaScript documentation.

Final Thoughts

The best way to learn JavaScript is by experimenting. Don’t worry about making mistakes — they’re actually the quickest way to understand what works and what doesn’t. Keep your first code files. Tweak them. Break them. Fix them again. You’ll be amazed how quickly things start to make sense.

Personally, I still remember the first time my little script worked — I stared at the screen with a silly grin for five minutes straight. So go ahead, try it out. Make the browser talk back. That’s where the fun begins.

How to Create a Simple JavaScript Code (Step-by-Step Guide)

Share this⬇️