Writing and Running Your First Program

Writing and running your very first program is one of the most important milestones in learning any programming language. It establishes a working relationship between you, your tools, and the code you write. Before worrying about variables, logic, or complex algorithms, the single most valuable skill you can build right now is the habit of writing a small piece of code, running it immediately, and carefully observing what happens. This topic walks you through every step of that process using JSFiddle, a free, browser-based coding environment that requires no installation and no configuration — just open it and start writing.

Opening JSFiddle and Locating the JavaScript Panel

To get started, open any modern web browser — Chrome, Firefox, Edge, or Safari will all work — and navigate to jsfiddle.net. You will land on the main editor interface immediately. JSFiddle divides the screen into several distinct panels, each serving a specific purpose:

• HTML panel — typically in the upper-left area, used for writing HTML markup.
• CSS panel — typically in the upper-right area, used for styling.
• JavaScript panel — typically in the lower-left area, and this is where all of your JavaScript code will be written.
• Result panel — typically in the lower-right area, where the visual output of your code appears after you run it.

For this exercise, your focus is entirely on the JavaScript panel. Click anywhere inside it to place your cursor there and confirm it is active. You should also confirm that the Result panel is visible on screen, because this is where any output rendered to the page will appear. However, it is equally important to know about the browser's built-in developer console, because console.log() — the command you are about to use — sends its output there, not to the Result panel itself. To open the developer console, press F12 (or Cmd + Option + J on a Mac) and click the "Console" tab. Keep this open alongside JSFiddle so you can see your output clearly.

Writing Your First Line of JavaScript

With your cursor in the JavaScript panel, type the following exactly as shown:

console.log('Hello, World!');

This single line is a complete JavaScript statement — a full instruction that the JavaScript engine can read, understand, and execute. Let's break down every part of it so nothing feels mysterious:

• console — This refers to a built-in JavaScript object that provides access to the browser's debugging console. Think of it as a direct communication channel to the browser's internal logging system.
• .log() — This is a method that belongs to the console object. A method is simply a named action that an object can perform. The log method's job is to print whatever you give it to the console output.
• 'Hello, World!' — This is a string, which is the programming term for a sequence of text characters. Strings must always be wrapped in either single quotation marks ('...') or double quotation marks ("..."). Both are valid in JavaScript; what matters is that the opening and closing marks match each other. The text inside the quotes is what will actually be printed.
• ; — The semicolon at the end signals to the JavaScript engine that this statement is complete. While JavaScript has a feature called Automatic Semicolon Insertion (ASI) that can sometimes add semicolons for you behind the scenes, it is considered a strong best practice to include them yourself. Omitting semicolons in certain situations can cause subtle, hard-to-debug errors, so developing the habit of ending every statement with a semicolon from the very beginning will serve you well.

A string can contain letters, numbers, spaces, punctuation — almost any character you can type. The following are all valid strings:

console.log('Hello, World!');
console.log("JavaScript is fun.");
console.log('My name is Alex and I am learning to code!');

Notice that in the second example, double quotes are used instead of single quotes — both produce identical results. The key rule is simply: start and end with the same type of quote mark.

Running the Program and Observing Output

Once you have typed your statement into the JavaScript panel, it is time to execute it. At the top of the JSFiddle interface, you will find a Run button — click it. JSFiddle will process all the code in each panel and refresh the Result area.

Now look at your browser's developer console (the one you opened with F12). You should see the text Hello, World! printed there. That output confirms that your program ran successfully and that JavaScript executed your instruction exactly as written.

If you do not see any output, there are a few things to check:

• Make sure you are looking in the Console tab of the developer tools, not just the Result panel in JSFiddle.
• Double-check the spelling of console.log — it is case-sensitive. Writing Console.log or console.Log will cause an error.
• Confirm that both the opening and closing parentheses are present: ( and ).
• Confirm that the string has matching quotation marks on both sides.
• Confirm that the semicolon is present at the end of the line.

If there is a typo or syntax mistake, the console will typically display a red error message describing what went wrong and on which line. These error messages are not failures — they are informative feedback. Learning to read error messages is one of the core skills of programming.

Understanding the Code-Run-Observe Workflow

One of the most important habits you can establish as a beginner — and frankly, one that experienced developers maintain throughout their careers — is the code-run-observe workflow. The idea is straightforward but powerfully effective:

• Write a small, specific piece of code — Do not try to write an entire program all at once. Write one statement, or a handful of closely related statements, before moving forward.
• Run the code immediately — Execute it right away, before adding anything else. This way, if something is wrong, you know exactly which line caused the problem because it was the last thing you added.
• Observe the output carefully — Does the result match what you expected? If yes, you have confirmed your understanding and can move forward confidently. If no, that unexpected result is a valuable signal — it tells you that your mental model of how something works needs to be revised.

Consider the contrast between two approaches. In one approach, a student writes twenty lines of code, then runs it and finds an error. They now have to search through all twenty lines to find the problem. In the other approach, a student writes one or two lines, runs them, confirms they work, then adds one or two more. When an error appears, they know immediately that it lives in the most recent addition. The second approach is almost always faster and less frustrating, even though it feels slower moment to moment. Trust the workflow.

Making Small Modifications to Reinforce Learning

Now that your first program is working, the best way to solidify your understanding is to change things and observe what happens. This is not busy work — it is how the brain builds genuine understanding rather than surface-level familiarity.

Start by modifying the string inside console.log() to display your own name:

console.log('Hello, my name is Jordan!');

Run the code. Confirm your name appears in the console. Notice that the only thing that changed was the text inside the quotation marks — the structure of the statement is identical. This reinforces the idea that the string value is the part you control, while console.log() is the consistent mechanism for displaying it.

Next, add a second statement on a new line below the first:

console.log('Hello, my name is Jordan!');
console.log('I am learning JavaScript.');

Run the code again. You should now see two lines of output in the console, one after the other. This demonstrates a fundamental principle of how programs execute: JavaScript reads and runs your code from top to bottom, one line at a time, in the order you wrote it. The first console.log runs first, then the second. This top-to-bottom, sequential execution is the default behavior of JavaScript (and most programming languages), and it will underpin everything you learn going forward.

Try one more experiment — swap the order of the two lines and run the code again:

console.log('I am learning JavaScript.');
console.log('Hello, my name is Jordan!');

Observe that the output order changes to match the new order of your statements. The program does exactly what you wrote, in the sequence you wrote it. This predictability is one of the things that makes programming powerful — the computer does precisely what you instruct, every time.

Saving Your Work in JSFiddle

Before you close your browser or move on, it is important to save your work. JSFiddle makes this straightforward. Click the Save button in the toolbar at the top of the interface. After saving, look at the address bar in your browser — it will have updated to include a unique URL that looks something like https://jsfiddle.net/abc12xyz/. This URL is a permanent link directly to your saved fiddle.

• Bookmark the URL in your browser so you can return to this exact program at any point during the course.
• Copy the URL and paste it somewhere safe — a notes document, a course notebook, or an email to yourself — as a backup reference.
• Each time you make further edits and click Save, JSFiddle will generate a new versioned URL (or update the existing one depending on the workflow), so your history is preserved.

This first saved fiddle will serve as a personal reference point throughout the course. When new concepts feel abstract or confusing, you can return to this simple, working program and trace the logic back to its roots. Every complex JavaScript application you will ever encounter is, at its heart, built from statements just like console.log('Hello, World!'); — individual instructions that do one clear thing, assembled together into something larger.