Setting up your workspace: editor, folders and developer tools — Build Your First Website with HTML and CSS

A carpenter sets up the workshop before cutting the first board. In this lesson you will prepare yours: a good code editor, a tidy project folder, sensible file names and the browser’s built-in developer tools, which will become your best learning companion.

Choosing a code editor

HTML and CSS files are plain text. You can technically write them in the simplest notepad, but a code editor makes life much easier: it colors the code, indents it, suggests completions and warns you about mistakes.

Several free editors are popular and perfectly suitable for beginners. Choose one, install it and stay with it for the whole course. Look for these features, which almost all code editors have:

Syntax highlighting: tags, attributes and values appear in different colors.
Auto-indentation and visible line numbers.
Multiple files and a folder sidebar, so you can see your whole project.
Extensions or plug-ins, for example to preview a page or to format code.

Avoid word processors. They add hidden formatting and may save in formats a browser cannot understand. Basic text editors that come with the system also work, provided you save in plain-text mode and with UTF-8 encoding.

Useful editor settings

A few small settings save you a lot of trouble:

Turn on auto-save or get into the habit of saving with Ctrl + S (Cmd + S on a Mac) after every change.
Choose an indentation of two spaces. Consistent indentation makes the nesting of your HTML visible at a glance.
Enable word wrap if long lines run off the screen.
Make sure the file encoding is UTF-8, the standard for the web.

Organizing your project folder

A website is a folder of files. Good organization from day one prevents broken links later. Create a folder named portfolio somewhere easy to find, such as your Documents. Inside it, create this structure:

portfolio/
  index.html
  css/
    style.css
  images/
  contact.html

The main page is index.html at the root. Styles live in a css folder, pictures in an images folder. You will add pages and subfolders as the project grows. When you open the portfolio folder itself in your editor (not individual files), the sidebar shows the whole project.

File naming rules

File names look trivial, but they are one of the top causes of “my image does not show”. Follow these rules from the start:

Use lowercase letters only. Some servers treat Photo.jpg and photo.jpg as two different files.
Use hyphens instead of spaces: my-first-project.jpg, not My first project.jpg.
Avoid accents and special characters. Stick to letters, digits, hyphens and underscores.
Always include the extension: .html, .css, .jpg, .png.
Choose short, descriptive names: about.html beats page2-final-new.html.

Warning. By default, some operating systems hide file extensions. You might believe you created index.html when the file is really index.html.txt. Enable the display of file extensions in your file manager’s settings and check.

Opening your page in the browser

You can open a local HTML file in your browser by double-clicking it, or by dragging it into a browser window. The address bar then starts with file://, which means the page is read from your own disk, not from a server. For the pages in this course, that is enough. Keep two windows side by side: the editor on one side, the browser on the other. Edit, save, refresh. That is the everyday loop of web development.

Meet the developer tools

Every modern browser includes a set of tools for people who build websites. You can open them with the F12 key, by right-clicking a page and choosing “Inspect”, or from the browser’s menu (usually under “More tools”). The exact shortcut varies by browser and system, so explore your menus. The tools open in a panel with several tabs. Three matter for now.

The Elements (or Inspector) panel

This shows the page’s HTML as a tree, and next to it the CSS rules applied to the selected element. If you hover over a line of HTML, the matching area of the page is highlighted. If you click an element, you see its styles. You can even edit text or CSS values directly in the panel to experiment. These edits are temporary: they disappear when you reload the page and never change the real file. That makes the inspector a perfect sandbox.

The Console

The console displays messages and errors, mostly from JavaScript. For HTML and CSS work it is useful to check that nothing is reported as failing, for example a file that could not be loaded. You can ignore the rest for now.

The Network panel

Remember the requests from the previous lesson? The Network panel lists every file the page downloaded, with its status code, type and size. Reload the page with the panel open and you will see HTML, CSS and images appear one by one. If an image is missing, you will see a red 404 entry for it. This is the quickest way to debug a wrong path.

Tip. A good way to learn is to inspect sites you admire. Right-click, inspect, and ask: which element is this? Which CSS makes it look like that? You are only looking at what the browser already received, which is how generations of web developers learned.

Your first experiment

Before writing any file, try a harmless experiment on a real page. Open a news site or any simple page, open the Elements panel, double-click a headline in the HTML and type a different text. The page updates instantly. Reload and everything returns to normal. You have just changed a page you do not own, but only in your own browser.

Warning. Never paste code into the console because a stranger told you to. The console runs JavaScript with the same powers as the page. Scam messages sometimes trick people into running harmful code there. In this course, you will never need to do it.

Your turn

Install a code editor (if you do not already have one) and open it.
Create the portfolio folder with an empty index.html, a css folder containing an empty style.css, and an empty images folder.
Open any web page, open the developer tools, go to the Network tab, reload, and find the HTML document. What is its status code? How many image requests do you see?
In the Elements panel, change the text of a heading, then reload.

See a solution

Your folder should look like the tree shown earlier. In your editor’s sidebar you should see index.html, css/style.css and images/. Empty folders may not appear in a file synchronization tool, so adding a placeholder image later will fix that.

In the Network tab, the main document usually has status 200. The number of image requests depends on the page: it can range from none to dozens. After you change a heading in the Elements panel and reload, the original text returns, which confirms that your edit was only local and temporary.

If your file manager shows index.html.txt, rename it and remove the extra extension.

Key takeaways

Use a code editor, not a word processor. HTML and CSS files are plain text saved in UTF-8.
Keep one project folder with index.html at the root, plus css and images subfolders.
Name files in lowercase, with hyphens, no spaces or accents, and always with their extension.
The developer tools (Elements, Console, Network) let you inspect and experiment safely on any page.
Your work loop: edit, save, refresh.