Hi, I'm Nick Pettit, and you're probably watching this because you wanna

make a web site.a Maybe it's because you want to start a new career, or

maybe you just wanna get a site going for your business, or an organization.

Whatever the case may be, it would be hard to know where to begin?

I'm going to show you how to write some basic website code,

that will help you get started on your first website.

Even if you've never programmed before,

you'll be able to follow along step by step.

After we write some code together, I'll show you how to take things further, and

what kinds of jobs are available to people that have programming skills.

Coding might seem a little bit boring if you've never tried it before,

but, I think you'll actually find that it's a lot of fun.

You get to create whatever's in your head, and then share it with other people.

To make a website, you'll need to be using a computer running either Windows,

Mac OX 10, or Linux.

What I'm about to show you won't really work on a tablet or a phone.

We're going to type our code, in a type of computer program known as a text editor.

And your computer should already have a text editor installed.

When we're all done typing, we'll save our file and

open it up in a web browser ,like the one you're using right now.

That might be Google Chrome, Firefox, Safari, Internet Explorer, or

any other browser that you prefer to use.

If you're on Windows, you'll want to start by opening a program called Notepad.

If you're on Mac, you'll want to open an application called TextEdit.

Notepad on Windows will work fine as is, but TextEdit has one extra step.

When you start a new document, go to the Format menu, and choose Make Plain Text.

And then you might see a dialogue box, but just click Ok.

Again, this step is not necessary on Windows.

I'm going to be using a Mac for this tutorial, but

when we come to important steps, I'll show you what it looks like on Windows.

Once you have your text editor open type in one paragraph along with a header,

just like in a newspaper or a school report.

This can be about anything you want.

I have some text here, that I have already prepared and

you can caulk it if you like or write your own.

Now, by itself this text isn't a website, we have to mark it up with special tags.

Kind of like when a teacher or a coworker, gives you notes on your writing.

Let's start at the top with our header.

Right before my header, I'm going to type an opening angle bracket,

sometimes called a less than sign.

Then I'm going to write the letter H, for header.

And then, the number one, because this is the first and

most important header on our page.

Finally I'm going to write a closing angle bracket,

otherwise known as a greater than sign.

What we just typed is called an opening tag.

And this will tell the web browser where our header begins, but we need to

add a matching closing tag, so that the web browser knows, where our header ends.

So, at the end of our header, we're going to type something very similar.

Start with that same opening angle bracket, but then, type a forward slash,

which is usually found on the question mark key on your keyboard.

Make sure that you're not typing a back slash,

which might be facing the other direction.

Then the rest is the same, the letter h a number one and a closing angle bracket.

When an opening and a closing tag are together it's known as an element,

in a language called html or hyper text markup language.

It's called hyper text, because unlike regular text documents or books.

These ones can be linked together in any way that we want.

And I already mentioned why it's called a markup language.

It's because we're marking up the document, with additional information,

beyond just our content.

HTML is the foundation of any site on the entire web.

So, no matter what kind of site you wanna make,

you'll have to make your webpages out of HTML elements, just like the one we made.

Now, you might be wondering why the h for header is accompanied by that number one.

On a web page there can be headers levels one through six.

This is just like a headline, in a newspaper or a magazine.

Where there might be the name of the publication, then, a section header, then,

a name of an article, and then, different sections within the article, and so on.

This is the only header we have on our page,

so it's natural to make it an H1 element.

Now we need to tell the web browser where our paragraph, begins and ends.

Headers are the only elements that have the concept of levels so,

this one is actually a little bit easier.

We're just going to use the p element, or paragraph element.

So, let's add an opening p tag at the beginning of our paragraph, and

then a closing p tag at the end.

This is a pretty good start, but

we need to add a few more tags before we can call this a real web page.

Now that you understand how to type out HTML elements.

I'm going to introduce you to a few other elements.

This is a lot of information to take in when you're first learning but,

don't worry about memorizing everything.

Most professionals have to find references and look things up over and over again.

It's natural to feel a little bit overwhelmed at first,

but when we're all done going through these few elements,

I'll show how you can look things up on your own and continue your practice.

As you might of guesses already,

it's possible to nest HTML elements inside of one another.

So let's wrap everything we've created so far,

in a body element because our content is known as the body of the webpage.

When we do this,

we should indent everything inside of the body by two spaces.

So we'll say one two.

And then, one, two.

This doesn't have any technical impact, but it makes our code easier to read so

that we know which elements are nested.

So now I'm going to hit Enter, so you drop that down by a line.

And I'll put in my opening body tag, and then my closing body tag.

We also need to add a head element just above our body.

This head is a place to put meta information about the web page, but

not necessarily any real content.

So just above our body, we'll hit Enter again and

we'll type an opening head and a closing head.

Nested inside the head element, we need to add two more elements.

First is what's called the meta element and, in this case,

our meta element will tell the web browser our character set.

This is just some technical information that tells the browser,

what types of letters and numbers should be on our webpage.

Be sure to watch closely because, this element is a little bit different than

the others we've learned about so far.

It doesn't have a closing tag, and

it also has a special extra bit inside of the tag that's called an attribute.

In this case, the attribute is charset or character set so, let's type that out now.

I'll put in two spaced because this is nested inside the head.

And then I'll type out" meta

charset" after that we will add an equal sign and a set of quotes.

Inside the quotes we'll type utf-eight, otherwise known as utf eight.

And then we'll put a closing angle bracket just like that.

This might seem a little bit weird, but like I said earlier.

Don't worry about memorizing all of this right now.

Just, follow along and make sure that you're typing everything very carefully.

Every angle bracket and slash, means something to the web browser.

So, it's important to type everything correctly.

Next, we should add a title to out web page.

This will go in the title bar, or the tabs of our web browser.

So I'll type, title, and I'm just going to type, Nick Pettit-designer.

And then I'll put a closing title tag.

Finally, we just need two more elements to finish things up.

We need to wrap everything we've done so far, in the HTMLelement.

Like this, I'll hit enter, type html,

jump down to the bottom, and put in a closing HTML.

And we need to nest everything carefully, so we can understand our code.

So let's just put two spaces, on everyone of these

lines, just like that.

And, for the last element,

we need to add what's called a document type or doc type for short.

This tells the web browser what kind of HTMLto expect on our page.

Just like the meta element, this one doesn't have a closing tag, and

the characters we type here will be a, a little bit different.

So follow closely, at the top here, we'll put

in our doc type and that's an opening angle bracket, an exclamation point.

And in all caps we'll say doc type followed by a space.

And then html in lower case, and a closing angle bracket.

Now, we need to save our file.

This is about the same for Windows and Mac, but I'll show you both.

On a Mac, go to File>Save and find

a place on your computer, where you'll be able to find this file easily again.

I'm going to chose my desktop, and then I'm going to type in the file name,

index.html, and click save.

It might ask you, if you want to use the HTML file format and in this case, we do.

If you're on Windows and

using Notepad, go to File> Save As and then choose a place on your computer,

where you'll be able to find this file again, I'm going to choose the desktop.

Then we need to change the file format to All Files, so

that we can save this as an html file, in the file name, type index.html.

Finally, change the text and coding to utf eight, and then click Save.

Now, whether you're on a Mac or

on Windows, the next steps should be almost exactly the same.

I'm using the Google Chrome web browser in this case, but

the next steps should be similar if you're using a different web browser.

In Google Chrome, I'm going to go up to the file menu and

choose open file, then I'm going to navigate to the location,

where I saved my file and I'll choose index and open it.

Congratulations, you've made your first web page of course,

this doesn't look very pretty, and only you can see your web page because

it's not available on the public internet for other people to access, but still,

those are the steps that you can take next now that you know some HTML.

One way to learn about more HTML elements, or review some of

the ones that you've learned here, ls by looking at good documentation.

You can find trustworthy documentation for

these HTML elements, and many others by going to developer.mozilla.org.

With a little bit more step by step learning on treehouse,

you can make something that looks like this, and

use more HTML elements to add images and links to your pages.

You can add color and layout to your web page,

with another language called CSS or cascading style sheets.

Finally you can upload your web page to a server, and

get a custom domain like this one called treehousewebsite.com.

At this point you might be wondering, why not just use a website builder or

a website publishing program to drag and

drop these elements together, in a visual way.

Well, that is one way to build a website, but if you want to create the best and

most customized websites, it's better to learn how to code on your own.

Better yet, if you want to start a career in the web industry.

You'll find that almost every job will expect you to know how to

code on your own.

Speaking of jobs, there's a huge demand right now for

people with the skills to make websites.

Everyone needs a website, whether it's a hugely complex company like Google,

Facebook, Twitter, or Wikipedia, or if it's a small local business, or

an individual, at most companies you would take on the role of either a web designer,

or a web developer, in both type of jobs you'll be expected to write code,

but with a slightly different focus.

As a web designer, you focus mostly on the user experience and

visual aesthetics of web pages, deciding where to place images,

what kind of text to write, how to match colors and

fonts, and how the user should feel while they're navigating your creation.

This involves writing code, like some of the html we started.

You will also be expected to know a few others languages including CSS and

java script.Together these three languages HTML, CSS, and

Javascript form what's called the front end of a website.

It's called the front end, because all of this code runs inside of a web browser.

Web developers are also expected to know HTML, CSS, and Javascript.

But instead of spending time focusing on the visual aesthetics of a web site.

They tend to spend more of their focus, on what's called the backend of a web site.

This is all the code that runs on the server, generates HTML dynamically on

a site like Facebook or Google and then delivers that to the browser.

So, for example, when you go to a web site like Twitter, and

you look at someone's profile page,

what you're actually seeing is kind of like a fill in the blank template.

Everyone's profile page is the same, but the details, like a person's picture,

their name, and other data are filled in by the backin programming.

There are several different backend languages to choose from,

including Ruby, Python, PHP, Java, and even a few other choices like WordPress.

You might decide that you don't wanna make websites at all, and

instead want to build mobile apps for iOS and Android phones and tablets.

At Treehouse we have several different tracks that are specifically designed to

guide you from the very basics of coding, all the way through to designing and

building your own websites and web applications.

When you're ready, we can even help you start a career.

It's a lot to learn, but we've put it all together in a step by

step learning process that's easy for anyone to follow.

We even have a special text editor called Workspace, that helps you follow along and

save your work.

And if you get stuck, you can ask for help in our forum, where other students,

moderators and tree house teachers are always happy to help.

There's never been a better time to start learning how to code, and

you've already taken your first step.

So, thanks for watching, and we hope to see you soon at Treehouse.

[MUSIC]