Getting Started

In this course you will build a small personal web page, and this chapter gets you ready.

HTML and CSS in One Minute

Think of a web page like a house:

In this course we focus on the first two. You will write HTML to put content on the page, and CSS to make it look nice.

What You Need

1. A web browser, such as Chrome, Edge or Firefox. You already have one.
2. A text editor to write code. Notepad works. Visual Studio Code (free) is better.
3. A folder for your project. Make a new folder on your Desktop called my-page.

Your Very First File

Open your editor, create a new file and type this:

<!DOCTYPE html>
<html>
<body>

<h1>Hello, world!</h1>
<p>This is my first web page.</p>

</body>
</html>

Save it in your my-page folder with the name index.html. In Notepad, choose All Files as the type so it is not saved as a .txt file.

Open It in the Browser

Double-click index.html. Your browser opens and shows:

Hello, world!
This is my first web page.

The words between the tags appear, but the tags themselves are hidden. The browser uses tags as instructions.

Tags in a Nutshell

Most HTML is written with a start tag and an end tag around some content:

<h1>Hello, world!</h1>

• <h1> is the start tag. It means "a main heading starts here".
• </h1> is the end tag. Notice the slash /.
• Hello, world! is the content.

The Work Loop

Every web developer works like this:

1. Change the code in the editor.
2. Save the file (Ctrl + S).
3. Refresh the browser (F5).

Try it now: change "Hello, world!" to "Hello, I am Ayesha!" (or your own name), save, and refresh.

<h1>Hello, I am Ayesha!</h1>
<p>This is my first web page.</p>

Exercise