APRIL SPRING SALE | 20% off ALL ACCESS to One Month ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

Hide

Party Tips! Learn more HTML!

Day 3 ยท Lesson 1 ยท


Whats the difference between h1 and h2 tags? When do we use p tags? In this lesson you will learn some of the most important HTML elements.

- For this we have the title h1
and we want to add the sub-titles
which is gonna be the h2 tag.
Oop, like that.
So what are the h2s here.
Well they're our party tips.
So we have party tip number one.
Just follow along.
Party tip: crash parties.
I forgot my number.
H2 close, h2.
Let me bring that out a little so you can see what I did.
Yep, so we have that and I'll just keep typing
and you're gonna follow along.
H2, right.
Party tip number two.
Party tip was party hard of course.
Close that and party tip number three,
let me just do h2 tab to make that one a little easier.
And party tip number three which was, aha,
kiss your own arm or leg do it now.
You will feel good about yourselves.
As well as at the bottom
we'll give the credit to party tips
by Andrew W.K. close.
Take a second to get caught up.
I know I type fast that just gives you a second to pause
and get caught up.
And like I said we code and then we talk about it.
All right, now that you're here hopefully you saved
your code and refreshed it and you should see this here.
Let's talk a little bit about what we did.
Now we started with this h1 tag.
On every site on the Internet,
the ones that are coded well,
the h1 is gonna be the title tag.
Number one meaning it's the most important header
of the site.
Usually it is the title of what it is.
You can go look at Huffington Post or Zappos
or whatever site and the h1 should be that.
It's really good for search engine optimization.
SEO meaning rankings in Google have a really clear h1 tag.
As is the title tag, the title tag also describes
what the whole page is and what's the difference?
The h1 is what's in the body
so it's what you see on the site.
That title tag is what shows up here
which you've probably seen this before right?
What's up here if you minimize the site
sometimes it shows up at the bottom.
That's the title.
These are both really important
for getting your rankings improved.
You might want to look at your company's site right now
and see what's in there.
Having things like if it's a New York company,
New York based in there or any kind of really specific
keywords helps with the h1 and the title.
And that's what we're learning here.
Now beyond that the number two is basically
all of these things are second most important.
Now there's no super duper science to how this works
but h2s tend to be things like blog post titles.
If you go to a blog h1 is usually the title
and then every h2 is gonna be the
header of the blog post title or something like that.
They go h1 through h6 in importance.
And just try your best and start to get familiar with these.
Don't over think it.
So far for here we have the h1 and then a bunch of h2s.
They're the similar weight of importance.
We also have this P tag which you might have guessed
is just paragraph text.
Just general paragraph text that's on a page.
And we put that down below where
we're giving the credit for the party tips.
Now one thing that's a little bit weird about this
that you might have noticed is that the white
is on the header, the h1 but not on the rest of the page.
There's a way that we can write our CSS
a little more effectively to have this here affect
everything with the same amount of code.
Can you take a guess of what that is?
If you look at this here.
What it would be, I'll give you the hint
or I'll tell you the answer.
Right now we're only targeting the h1.
See how when I click on this these two even highlight.
But if I want everything in the body to be white,
what would I do?
Well I'd put the same thing here on the body.
Cool, so actually I could just remove this one here
on the h1, just remove that.
Get rid of this line and put that here instead
and boom everything becomes colored.
I don't need to have it twice
because the h1 is part of that body.
And this is why CSS is called cascading style sheets,
that's what it stands for.
Because it's like a cascade, it reads from top to bottom.
So we have the body, we're saying the body color is white.
Now from top to bottom if I wanted the h1
to be a different color than all the other things
in the site this is where the cool magic comes in
where you can override things.
I can say color equals, I don't know green or something.
And now what do you think is gonna happen?
What do you think is gonna happen when I refresh?
Boom, just like that.
Cause we're saying here everything in the body is white.
Everything except the h1 is green.
Let that sink in for a second or play with it a bit
if you want to get familiar.
But that's what the CSS,
cascading style sheet part stands for.
And it's a really powerful language for coloring
and shaping the way our html looks.
All right, hopefully this has been great for you.
Let's go to the next video where we finish off our project
using the images that I'm gonna give you
and we'll put them on the site
and clean it up.
I'm also gonna get rid of this green
cause it's gnarly.
Blue and green together, not looking good.
Not looking good.
Ah, much better.