Your toolkit: editor, browser and folders

What you need

• A code editor: Visual Studio Code (VS Code) is free and works on Windows, Mac and Linux.
• A modern browser: Chrome, Edge or Firefox, all with built-in developer tools.
• A folder for each project, with clear file names.

A code editor is a program for writing code. It is like a notepad, but it colours your code, completes words for you and points out mistakes.

A tidy project folder

my-site/
  index.html      the home page (servers open this first)
  about.html
  css/
    styles.css
  js/
    app.js
  images/
    logo.png

• Name the home page index.html: web servers open it by default.
• Use lowercase names with hyphens, not spaces: contact-us.html, not Contact Us.html.
• Keep CSS, JavaScript and images in their own folders.

Useful VS Code features

• Emmet: type ! and press Tab in an empty .html file to get a full page skeleton.
• Format Document (Shift+Alt+F on Windows) tidies your indentation.
• Extensions: a live preview extension reloads the page every time you save.
• The integrated terminal (Ctrl+`) lets you run commands without leaving the editor.

Opening your page

Double-clicking index.html opens it in the browser with a file:// address. That is fine for plain HTML and CSS. Some JavaScript features (such as fetch and modules) need a small local server, which a live preview extension or "npx serve" gives you; we meet these later.

function extension(fileName) {
  return fileName.split('.').pop().toLowerCase();
}
console.log(extension('index.html')); // 'html'
console.log(extension('Logo.PNG'));   // 'png'