[MUSIC]

Fantastic job so far.

You're almost ready to start building your own websites.

A website is just a collection of webpages that are linked together.

So if you know how to create one webpage and

link it to another webpage, you know how to create a whole website.

That's what we'll cover in the final part of this course.

You'll learn how to create a simple resume page from scratch,

give it a little structure and style and

link it up to the profile page we've been working with throughout this course.

Many web developers write their code with a text editor made especially for

web development.

Text editors work in a very similar way to workspaces.

They make your life easier by color coding your code, automatically closing and

highlighting your opening and

closing tags, and auto-completing bits of code that you type frequently.

There are a few editors out there to choose from, but

one popular text editor is called Atom.

And best of all, it's completely free.

I've included links to Atom and some other commonly used text editors in

the teacher's notes, but for this course we're going to stick with Workspaces.

First, let's make a new document.

Go to File > New File, and in the sidebar here,

you'll see that it's created a new HTML file for us.

Since we're building a resume page,

name the document resume.html.

To set up a new html document we need to start with two things, a doc type and

a set of html tags.

And inside the html tags we'll need head tags and body tags.

Keep in mind that this structure is not something we need to memorize right away.

Some text editors will provide this basic code for you.

Or you can always look it up.

In fact, open a new tab or browser window and

do a quick search for the phrase, basic webpage.

And the first hit is from an excellent resource called Mozilla Developer Network.

Click the link and scroll down a little bit, and here's an example of the code you

need for a basic webpage, always there for your reference.

Okay, let's go back to Workspaces, and start setting up the page.

First, the doc type.

The Doctype lets the browser know that you're giving it an HTML page.

Next the html tags.

Everything, all of the visible and under the hood parts of our webpage except for

the Doctype, are nested within the html tags.

Now we need head tags to hold important information about our webpage

that doesn't display in the browser, like a link to our CSS style sheets, and

the title of our webpage.

We'll worry about linking to a CSS page in a minute.

Right now, just type out the title tag.

And inside the title tag,

type the title you want to display in search engine results and in browser tabs.

I'm going to type Treasure Porth's Resume.

Below the head we need body tags.

Remember that everything you actually see in the browser such as a header,

a navigation, a footer is nested inside the body tags.

And that's it.

Everything we need to start building a basic webpage.

Let's make sure this works.

Inside the body tags I'll make an h1.

And inside the h1 tags, I'll type resume.

Click the preview button.

And we haven't linked to our resume from the homepage yet.

But up here in the address bar,

we can get to the page we just created by typing /resume.html.

And there you go.

It works.

Now we're ready to lay down the structure of our resume page.

We'll do it in the next video.