PHASE 0Beginner ~15 min· topic 3 of 4

Topic 0.3

Your Tools: Browser, Editor and DevTools

In one line

All you need is a browser and a text editor; the browser's DevTools let you inspect any page, see errors and try changes live.

Think of it like this

A mechanic's garage. The editor is the workbench where you build parts. The browser is the test track where you drive the car. DevTools is the diagnostic computer you plug in to see what's happening inside the engine.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Code editor: A text editor for writing code, with colours and helpers. VS Code is a popular free one.
File extension: The ending of a file name, like .html or .css, that says what kind of file it is.
index.html: The usual name for the main page in a folder.
DevTools: Developer tools built into the browser for inspecting and debugging pages.
Inspect: Right-click → Inspect: opens DevTools on the element you clicked.
Console: The DevTools panel that shows messages and errors from JavaScript.

Step by step

01Make a project folder

Create a folder called my-site anywhere on your computer. Keep each project in its own folder, so its pages, styles and images stay together.

02Create index.html

Open the folder in your editor, create a file named index.html and type a heading. Save it.

my-site/index.htmlwhole filehtml

<h1>It works!</h1>

03Open it in the browser

Double-click index.html. The address bar shows something like file:///C:/Users/you/my-site/index.html: the file:// protocol means it was read from your disk, not a server.

Edit the file, save, then reload the browser (F5 or Ctrl+R) to see changes.

04Inspect the page

Right-click your heading → Inspect. DevTools opens with the <h1> highlighted in the Elements panel. Double-click the text inside it and type something new: the page changes instantly, but your file doesn't.

05Read the console

Open the Console panel. Type 1 + 1 and press Enter: the console runs JavaScript and prints 2. Errors from a page's scripts also appear here in red.

terminal

$ 1 + 1

── expected output ──

Try it yourself

1
Print your own message
In the first example, add console.log("My name is ...") with your name and press Run.
2
Inspect the preview
Right-click the blue text in the second example's preview and choose Inspect. Find the color: steelblue rule in the Styles pane and change it to green.
3
Set up locally
Install VS Code, make the my-site folder and open your own index.html in the browser, following the walkthrough.

Code & diagrams

Messages in the console New tab

Each console call prints one line. Warnings and errors are coloured, like in DevTools.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Hello from JavaScript!
2 + 3 = 5
This is a warning
This is an error message

A page to inspect New tab

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Save the page with the wrong extension

Save your page as index.txt instead of index.html and open it.

terminal

$ open index.txt

── what you'll see ──

<h1>It works!</h1> (shown as plain text, tags and all)

Myth vs fact

Myth

You need expensive software to build websites.

Fact

A free editor and a free browser are all professionals use for HTML, CSS and JavaScript.

Myth

Editing in DevTools changes the website.

Fact

DevTools edits only your copy in your browser. Reload and they're gone; the real site is untouched.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
VS Code's Live Server extension (or npx serve) serves your folder over http://localhost, which some features (like JavaScript modules and fetch) need, because file:// pages are more restricted.
▸
In the Elements panel, $0 in the console refers to the element you last selected: $0.textContent reads its text. Handy for quick experiments.
▸
Turn on DevTools → Network → Disable cache while developing, so a reload always fetches your latest CSS and JavaScript.

Remember this

1
A code editor is a text editor made for code: it colours the syntax, auto-closes tags and indents for you. Visual Studio Code (VS Code) is free and the most popular. Any plain-text editor works, but never a word processor like Word, which adds hidden formatting.
2
Save your page as a file ending in .html, for example index.html. Double-click it and it opens in your browser. index.html is the conventional name for the main page of a folder: servers send it when you ask for the folder itself.
3
DevTools are built into every modern browser. Open them with F12, or Ctrl+Shift+I (Cmd+Option+I on a Mac), or right-click an element and choose Inspect. The main panels are Elements (the live HTML and its CSS), Console (messages and errors from JavaScript) and Network (every file the page downloaded).
4
In the Elements panel you can edit text, attributes and CSS directly and see the result instantly. Those edits are temporary: reload and they're gone. It's a safe place to experiment, even on other people's websites.
5
On Hectal you can skip the setup for now: every example and exercise runs in the editor on the page, with a live preview and a console, just like the real tools.

Explain it without notes

What are the Elements, Console and Network panels of DevTools for?

Why do changes you make in DevTools disappear when you reload?

Practice

In the console example, print the result of 10 * 12 with a label, so the console shows 10 * 12 = 120.

Add a line that prints how many characters are in your name, using "YourName".length.

Trade-offs

↔
Online editors (like this one) need no setup but can't save files to your disk; a local editor takes a few minutes to set up and is what you'll use for real projects.

Done when you can

I can create an .html file and open it in a browser.
I can open DevTools and find the Elements and Console panels.
I can inspect an element and change its text or CSS temporarily.
I can print a message with console.log.

Command Palette