HTML and CSS: Build and Launch Your First Website

A web page is only a text file. Once you know that, a website stops feeling like magic. You can build one with free tools, and you can fix it when something breaks. This lesson sets up the workspace you will use for the whole course.

A web page is a plain text file. It holds your words plus short instructions that tell a browser how to show them. The instructions are written in HTML, which stands for HyperText Markup Language. A browser (Chrome, Edge, Firefox or Safari) reads the file and draws the page on screen.

A website is a folder of these files, plus images and a style file, linked together. CSS is the second language you will learn. HTML says what things are. CSS says how they look.

Over six modules you will build one small three-page site: Home, Services and Contact. It will work on phones and desktops, follow basic accessibility rules, and go live for free. Every module ends with a module project that adds one piece. You also get the complete, tested code for that stage, so you can compare it with yours.

The example site is a made-up bike repair shop called Cedar Street Bikes. Use your own subject instead: a business, a hobby or a personal portfolio. Type the code yourself and swap in your own words. Typing teaches more than pasting.

Every lesson has the same shape. You read, watch a worked example, repeat the skill on your own material, and check the "You are done when" line before moving on.

Set up your workspace:

1. Make a folder called something like my-site. Use lowercase letters and hyphens. Avoid spaces and capital letters.
2. Install a code editor. Visual Studio Code is free (check its website for the current version). Any plain text editor works. A word processor does not, because it adds hidden formatting.
3. Make your computer show file extensions such as .html. Look in your file manager's View or Settings menu for the option about file name extensions.
4. Create a file named index.html inside the folder. Browsers and web hosts treat index.html as the front door of a folder.
5. Type <p>Hello, web.</p>, save the file, then double-click it. It opens in your browser.

You need nothing else yet: no account, no paid tool. Use Chrome or Edge while you build, because their built-in developer tools are strong. You will test in a second browser later.

Example: a folder named cedar-street-bikes holds one file, index.html. The file contains one line:

Double-clicking the file opens the browser. The page shows the sentence in plain black text. The address bar starts with file:///. That means the page comes from your own computer, not from the internet.

Now change Hello to Welcome. Save the file in the editor. Switch to the browser tab and refresh the page. The new word appears. That loop is edit, save, refresh. You will use it for everything in this course.

If this is not working:

• The browser shows raw code instead of a page: the file is really named index.html.txt. Show file extensions and rename it.
• Nothing changed after your edit: you did not save (look for a dot on the editor tab) or you did not refresh.
• Double-clicking opens the editor instead of the browser: right-click the file, choose Open with, and pick your browser.

• Using a word processor. It feels friendly. It adds hidden formatting that browsers cannot read. Fix: use a plain text editor.
• Spaces and capitals in file names. My Page.HTML works on your computer but often breaks online. Fix: use lowercase words joined by hyphens.
• Hidden extensions. Your computer may hide .html and .txt. Fix: turn extensions on before you name files.

Your folder exists, and index.html opens in a browser with your line of text. You changed the text, saved, refreshed and saw the change.