Write your first
JavaScript script.
One HTML file. A few lines of JavaScript. Real output in the browser console. By the end of this page you'll have run code, saved it to a file, loaded it from HTML, and understood every character you typed. No install. No Node. No configuration.
Your first JavaScript script is one line: console.log("Hello, world"). Open DevTools with F12, paste it into the Console tab, press Enter. That's it — you're programming. Everything else in JavaScript is built on this same pattern: write code, run it, see output. The browser is your runtime.
Before this lesson: you need a modern browser (Chrome, Firefox, Safari, Edge) and a text editor. That's it. Nothing to install.
▶️ Step 1: Run one line of JavaScript
No file yet. Just the browser. This proves JavaScript works.
Open DevTools
Press F12 on Windows/Linux, or Cmd + Option + I on Mac. Or right-click any page and select "Inspect". A panel appears — usually at the bottom or right of the window.
Click the Console tab
DevTools has multiple tabs: Elements, Console, Network, Sources. Click Console. You'll see a blank area with a > prompt at the bottom. That's where JavaScript runs.
Type and run
Type this at the > prompt and press Enter:
console.log("Hello, world")
The console prints Hello, world on the next line. That's your first line of JavaScript. console.log is a function — it takes a value and displays it.
Try more
Type these one at a time and press Enter after each:
2 + 2 "Hello" + " " + "world" [1, 2, 3].length Math.random()
Each line prints its result. You can run any JavaScript in the console — it's a full interpreter, like a command line for the browser.
The Console is your best debugging tool. When you're writing real code and something isn't working, the first thing you should do is open the Console. JavaScript errors appear there in red with a file name and line number. No error message should ever be ignored.
📄 Step 2: Save it to a file and run it
This is how real JavaScript works — in a file, loaded from HTML.
Create a project folder
Anywhere on your machine — Desktop, Documents, anywhere. Create a folder called js-practice.
Create two files
In that folder, create two files using any text editor (VS Code, Notepad, TextEdit — anything):
index.html
My first JS Open the console!
script.js
console.log("Hello from script.js");
console.log("The HTML loaded me automatically.");
Open index.html in your browser
Double-click index.html — it opens in your default browser. You'll see the heading "Open the console!" on the page. Now press F12 and click Console. You'll see:
Hello from script.js The HTML loaded me automatically.
That's it. The HTML file loaded the JavaScript file, the browser ran it, and the console shows the output. This is how every website in the world works.
Why "script.js" and not inline? You could have put the JavaScript directly inside a tag in the HTML. That works for a few lines. External files are better for anything real: they're cacheable by the browser, reusable across pages, and keep HTML and logic separate. The src attribute tells the browser which file to load.
🏷️ Step 3: Variables and template literals
The next five lines you'll write. Variables store values so you can reuse them.
JavaScript has three ways to declare a variable: const, let, and var. Use const for values that never change, let for values that do. Never use var — it's the old way from before 2015 and has confusing scoping rules.
// const for values that don't change
const name = "Alice";
const age = 25;
// let for values that change later
let score = 0;
score = score + 10;
// Template literals (backticks) for string interpolation
console.log(Hello, ${name}!); console.log(You are ${age} years old.);
console.log(In 10 years you will be ${age + 10}.`);
// Strings with single or double quotes both work
const greeting = 'Hi';
const otherGreeting = "Hello";
// Escape sequences work the same as other languages
console.log("Line 1\nLine 2");
console.log("Tab\there");
Save the file, refresh the browser tab, check the Console. You'll see:
Hello, Alice! You are 25 years old. In 10 years you will be 35. Line 1 Line 2 Tab here
const
The default. A value that can't be reassigned. Trying to change it throws an error. Use it unless you have a reason not to.
let
For values that change. Loop counters, accumulators, state. Reassignable. Block-scoped (visible only in the block it's declared in).
Template literals
Strings wrapped in backticks that can embed expressions with `${}. Multi-line strings work without escape sequences. The modern way to build strings.
Comments
Two styles. // single line to end of line. /* multi-line */ for blocks. Both are ignored by the browser.
🔍 What just happened
Why the code did what it did — no magic.
The browser parsed HTML first, then ran JavaScript
Browsers read HTML top-to-bottom. When they hit a tag, they pause HTML parsing, fetch the JavaScript file, run it, then continue. Because our script tag is at the end of , the HTML is fully parsed by the time JavaScript runs. That's why it works — if the script were in , it would run before any HTML existed.
console.log writes to the console, not the page
console.log is a debugging function. It writes to the DevTools Console, not the visible page. Users never see it. You see it because you opened DevTools. If you want the user to see text, use document.body.textContent = "Hello" or alert("Hello") — but for development, console.log is what you want.
const and let create bindings in the current scope
When you write const name = "Alice", JavaScript creates a binding called name in the current block scope, pointing to the string "Alice". The value can't be reassigned. let works the same way but allows reassignment. Both disappear when the block ends.
Template literals evaluate expressions before building the string
When JavaScript sees Hello, ${name}!`, it evaluates name, converts it to a string, and produces a new string. This happens before console.log receives it. The result is identical to "Hello, " + name + "!" — but cleaner and easier to read, especially with multiple variables.
🏆 Challenge
One small task. Do it in your own file, not the console.
Your turn — 2 minutes
Modify your script.js to do this:
1. Create const variables for your firstName, favoriteLanguage, and yearsCoding (a number).
2. Print three sentences using template literals — "My name is...", "I love coding in...", "I've been coding for... years."
3. Add a comment above each console.log explaining what it does.
Save the file, refresh the browser, open DevTools Console. Fix any errors that appear — that's the point. If you want to break something on purpose, try console.log(I have${yearsCoding + "many"} years`). Read the error. It tells you exactly what went wrong.
⚠️ Common mistakes (right now)
The errors you'll hit in the next 24 hours, and how to fix them.
You used a variable before defining it, or spelled it differently. JavaScript is case-sensitive: name and Name are different. Check spelling.
The HTML loaded but the .js file didn't. Check the Network tab in DevTools — if script.js shows red or 404, the src path is wrong. Make sure the file exists next to index.html.
A typo broke parsing. Usually a missing bracket, paren, or quote. The error tells you the line number — start there.
You tried to access a property on a value that doesn't exist. Common when using document.querySelector(".missing"). Check that the element exists before using it.
You saved the file but forgot to refresh the browser. Press F5 or Ctrl+R. If it still doesn't update, check that you saved the right file (not an editor tab you haven't saved yet).
You wrote const x = 5 then x = 10. const can't be reassigned. Fix: use let if the value needs to change.
You're looking at the wrong tab or the wrong console. DevTools has to be open before the page loads for all logs to appear. Or the browser console is filtered — check that "All levels" or "Info" is selected.
➡️ What's next
You've written your first script. Here's the natural next step.
❓ Frequently asked questions
How do I run JavaScript in the browser?
Open DevTools with F12 (or Cmd+Opt+I on Mac), go to the Console tab, and type JavaScript directly. Press Enter to run it. For real code, save it to a .js file and link it to an HTML page with a script tag. The browser runs it automatically when the page loads.
What is console.log()?
console.log() prints a value to the browser's developer console. It's the JavaScript equivalent of Python's print(). You use it to debug, inspect variables, and confirm code ran. Open DevTools with F12 and see the Console tab to see the output.
Do I need Node.js to run JavaScript?
No. Every browser has a JavaScript engine built in. You can write and run JavaScript with just a text editor and a browser. Node.js is only needed for running JavaScript outside the browser — servers, build tools, command-line scripts.
What is the difference between console.log and alert?
console.log() prints to the developer console — quiet, invisible to users, perfect for debugging. alert() shows a blocking popup dialog — visible to users, annoying, rarely used in modern code.
Where do I put JavaScript in an HTML file?
Two options: inline in a script tag anywhere in the HTML, or in an external .js file linked with a src attribute. External files are better for anything beyond a few lines. Place the script tag just before the closing body tag so the HTML is parsed first.
Why does my JavaScript do nothing?
Three common causes: (1) syntax error that silently fails — check DevTools Console for red errors, (2) script runs before HTML exists — move it to the end of body, (3) file path in the script src is wrong — check the Network tab.
What is a semicolon in JavaScript?
A semicolon ends a statement. JavaScript has automatic semicolon insertion, but the safe rule is: use semicolons after every statement. It prevents rare bugs and matches production code style.
What is the difference between let and const?
const creates a binding you can't reassign. let creates one you can. Both are block-scoped. Use const by default — it makes intent clear. Switch to let only when you need to reassign.