20 min read
Setting Up Your Tools
A tidy folder structure, the VS Code editor (and a note on Dreamweaver), and opening your pages in a browser.
A Folder Structure
Create one main folder for the website. Everything the site needs goes inside it. Kasun makes this structure:
The tea room website folderText
ceylonleaf/├── index.html├── menu.html├── gallery.html├── order.html├── about.html├── css/│ └── style.css└── images/ ├── logo.png ├── teas/ ├── cakes/ └── room/- HTML pages sit at the top level.
- css/ holds the style sheet (the CSS course).
- images/ holds pictures, in sub-folders by category — the same categories as the gallery.
A Code Editor: Visual Studio Code
You can write HTML in Notepad, but a code editor makes it much easier. Visual Studio Code (VS Code) is free from Microsoft and runs on Windows, macOS and Linux.
- Download it from code.visualstudio.com and install it.
- Choose File → Open Folder… and open your ceylonleaf folder.
- Create files with the New File button in the Explorer panel.
- Useful features: colour-coded code, auto-complete, and Emmet — type
!then press Tab in an empty HTML file to get a complete page template. - The optional Live Server extension reloads the browser every time you save.
Viewing Your Page
Double-click index.html in File Explorer (or right-click → Open with → a browser). After each change, save in the editor (Ctrl + S) and refresh the browser (F5). Check your pages in at least two browsers (for example Chrome and Firefox or Edge).
Every browser has developer tools (press F12). They show the HTML, the CSS applied to each element, and error messages — very useful when something does not look right.
Practice
More lessons in Planning a Website · Next: File Names and Relative Paths · Previous: Choosing and Optimising Images