Party Tips! HTML is the Structure of your Page

Week 1: Code Week · Lesson 4 · 8 minutes

- The first thing that you and I are gonna code
is this Party Tips site.
This will be a little warm up
and it shouldn't take too long.
Just a few little lessons.
So the Party Tips site is basically just some HTML and CSS.
Some images, some texts.
We're gonna do it from scratch.
Does this look familiar to you at all?
Do you know Andrew WK?
He's this guy with a pizza shaped guitar
and I he came up with some party tips
that I thought were especially useful for animals.
I don't know.
There is a bunch of animals.
Crash parties is a good tip.
Yeah if you wanna be a good partier, you can crash parties
like this little guy here.
Party Tip number two, party hard.
That's what we do when we party hard.
We get cake on our face.
Party Tip number three, kiss your own arm or leg.
Like this little guy here.
So this is in credit down there.
I think he tweeted these out, without the animals.
The animals are my addition.
So this is what we're gonna make from scratch.
So let's get into it.
Alright so to start coding,
you are gonna be in sublime text.
You have it open, just like this, this black box here.
And I'm gonna take you step by step
through what we need to do.
Now, right before we code,
I just want you to make sure that your desktop
is not an abominable mess.
You know who you are.
You know if you have all your documents and MP3s
and whatever you got splayed all over the place.
Clean those up a little bit if you can
because we'll be putting documents on our desktop.
And if you can't find them,
look, a part of being a good developer
is being organized with your computer.
The computer is the tool you are going to use
and so, trust me on this,
you're gonna fall behind if you don't
have a good organization.
So take a second to do that if you need.
Assuming you are in crystal clear shape,
we are gonna start coding.
So the first step to making an HTML project is
to have this here and to just save it as an HTML file.
So I'm gonna save it,
I did command S there for the Mac
or you can just go to save up here.
And it will prompt you with,
hey, where do you wanna save this?
And quite simply we're gonna put it on the desktop,
like I said.
If you put it on the desktop
it's gonna be easier to find it as we continue to work
so please do that.
What're we gonna call it?
Just like this, you're gonna call this index.html.
The dot html part makes sure that this
is an HTML page, that's the first step
in making an HTML page.
Hey, it's that easy right?
The index part, index is just kind of like a jargony word
that means homepage.
The index is always the first page
of any website on the internet.
So the index, it's just a way to say homepage.
So we're making the index of html.
And no, no, no, no, before you press save,
before you press save,
also make sure that there are no weird spaces.
Make sure it's lower case,
upper case ain't gonna work.
These things tend to be case sensitive.
So you wanna do index.html like that
no like weird characters,
I know you're excited but just leave it super simple.
Index and html all lower case, no weird spaces
and throw that on your desktop.
If you do,
you will have saved it, boom.
And that's your little gift,
you got a happy little HTML file on your desktop.
Cool so now you're ready to code HTML
So the way I like to teach coding
is for me to type it out, I'm gonna code.
You are gonna follow and then
da, da, da, da, da, we will talk about it
as we go along.
So let's start doing the work, follow along
and then we will say, what did we do?
Alright so I'm just gonna speak aloud as I'm developing.
The first thing I do when I code an HTML page
is I put this doctype up here
and it goes a little something like html doctype,
just like this.
I noticed that my text is a little small
so I'm gonna make it bigger so I can read it.
I suggest you to do the same if you like.
All you have to do is do command plus on your Mac
or control plus.
You might actually even be able to
to do the font up here by making this a little bit bigger,
I'm not actually sure, let me search.
Ah, font larger, you can do it that way too.
You see I just used the help here
to search for some functionality,
it's a quick little nice search.
Okay, so our text is a little bit more readable.
We're not gonna go blind making this website.
And we do that first line and it just says,
hey, some html's coming our way.
And then we make these opening and closing HTML tags.
Now let's just code a little bit more.
I'm gonna make a head tag, oops,
oh it closed it for me, how nice.
Yeah, sometimes if you make the tag,
it will close it for you.
Oh, there it goes.
So we have an opening tag and a closing tag,
just follow along for now.
That looks pretty good.
And I'm gonna make a title tag.
You can even sometimes just type the word
and then do tab and it'll make that opening and closing
tag for you so that's a little trick
if it works for your computer.
Sometimes it works,
some older versions of computers it might not work as easy.
Don't sweat the small stuff.
And I'll just put, put this in here
and you're just following along.
If it's taking a little bit more time,
if I'm going a little quicker than you,
that's normal, I've been doing this for about 10 years
so it speeds up but
take a second to do that.
Pause if you need to and get caught up with this here.
Do that right now, pause if you need to.
When you have this,
you will know you were successful if
when we open this, we can see this in the browser.
So, assuming you have all this coded out,
you're gonna wanna open this in the browser.
How do you do that?
Go to your desktop,
I have this little shortcut here on the Mac
so I can go to my desktop fairly quickly.
And the way to open this up
is to either double click on it
or drag it into the browser.
I'm gonna play some window voodoo here, boom,
drag it like that.
So that should be what you see if you did it correctly.
So or you can just double click it
and it'll open it up.
There's two different ways to do that.
Again, drag it or double click it.
And it may be a little bit different
based on the computer you're on.
You can also probably bring it to the doc,
there's a few different ways.
But find one that works for your computer
and is comfortable and let that go.
Now if you come here and you don't see this,
it likely means that you're missing a piece of code here.
If you're missing, one of these missing,
can sometimes break your site
and that didn't do it.
But if you're missing something, let's see.
The internet's fairly forgiving
but if you don't see this here,
likely your code is just not exactly what it needs to be.
So double check that.
Sometimes you'll see the code gets kind of off color.
Look for patterns,
see everything starts with this kind of purple here.
Sublime's trying to help you.
But if this one starts with white I might go,
oh you know what, something's wrong here.
Of if it's green, I go, ah, that looks correct.
So take a second to get this going on like this
and if you're here, things are really good.
Now let me explain what we did.
So we just coded our first basic HTML page.
Now what we have here is
we have an opening and closing HTML tag.
And this basically says, hey,
hey browser, it talks to your browser.
It says hey browser, everything between these HTML tags
is the language HTML.
Now every single website has a head, just like I do
and a body.
The head, the opening head part,
is what goes up here above this line.
Sometimes called the chrome of a browser.
And what's in the body is gonna be
everything that's displayed on the page.
So most things are in the body.
As you'll see, we'll use the head for certain things
and the body for certain things
but just take that for what it's worth.
Also, I'd suggest that you use Chrome.
You notice how I'm using Google Chrome.
Chrome is I think the best for developers to use
and if you wanna have the exact same results
throughout this course that I do,
please use Google Chrome.
Alright, things are looking pretty good.
In the next video, we're gonna finish out out HTML
and add some CSS to the project.
So jump along to the next video.