- Question to you, which page
do you think we're gonna start
with here on the left?
We're gonna wanna work on the home page
of the project; it's the index.html.
Remember?
You remember that, right?
All right, cool, so
you're gonna wanna click
on the index.html and you should be able
to see some code that
I already put in there.
This is the template.
When we're coding, we
usually use templates.
Web developers use templates cause
it gets us ahead a few steps.
We don't always have
to start from scratch.
You and I started from scratch last time
because I wanted you to see
building it from nothing,
but now that we did
that, you should be able
to see some things in here
that are familiar to you,
and we're gonna talk through a few
of these things in just a second.
But the other part I want you to do
is now open this in Chrome
because we're always working
with our code here, in Sublime,
and in Chrome so that we can see
in the browser what we're doing.
So I'm gonna open that up as well,
you can follow along if you
remember how to do that.
All you need to do is take your index
and double click it, or
drag it into the browser.
All right, great, so we have
our work flow set up here.
We have our code here on the left,
and I can see what I'm
coding here on the right,
and that works.
Let's talk through what this
is, which code I'm giving you,
so that we can get clear.
Most of it will be a refresher,
and there'll be some new
things in there as well,
so I want you to pay attention.
What we see here is just some basic HTML
in our index.html.
This says it's an HTML file.
We have everything between the opening
and closing HTML tags,
and then of course we have
the head and the body, right?
What's the head?
The head is everything that's gonna be,
like Cookie Monster, the title up here,
it's gonna be the CSS,
it's gonna be the things
that are loaded into the project,
all the meta kind of
stuff about your site,
not the site, but about the
site, are up in the head,
and the body is everything
we are gonna see
on the page, for example if you just want
to type like 'Hello', just
watch along, you don't have
to do that, but you'll
see 'hello' should appear
on the page.
So if that's working,
you're doing things correct.
Yeah?
Okay.
So that's what we have
here with this template,
save and refresh, making our life easier.
Okay, a few other things
that you may see in here.
We have these meta tags;
meta tags are descriptions
and keywords for Google,
for search engines,
to help describe your
content a little bit better.
It's like one of a hundred things,
a hundred possible
things, that you could do
to make your site be
found in search engines,
so meta tags.
The title we know about, that's
whatever ends up up there,
and the links, that's
gonna be a better way,
we're learning a more advanced way
in this lesson, of how to use CSS
and we'll get to the CSS in a second.
But we'll see more of that.
Okay, so that's the setup.
First in our process,
we are gonna do the HTML
and then we are gonna do the CSS.
That's generally how I work.
We're gonna make our HTML,
then we're gonna make our CSS,
and then we're gonna
finish up the project.
So, let's do that.
For the final project,
sometimes I'll look forward
in the future.
Let's see, what are we making again?
Let's take a look.
This is what we're making.
So what do we need to do?
We need to get some text here, right,
we need to get these images,
we need to think about
all the HTML elements
that we wanna include
first in our project.
Lucky for you, I gave you a lot of them.
I gave you all of them.
If you click this README, right,
this README here is just all
the text for the project.
Usually, you know, a
designer or a copy editor
will send this to me in an
email or a Word document.
Likely something better like Google Docs
would probably be best,
but somehow this arrives
at me and for you I just
put it here in this folder,
a README folder.
Read me, read me now, do it!
Yeah, um, so we can take this text
and then just drag it on to our project,
cause remember, HTML is the text element
that we are going to describe.
So where I'm gonna put that is
in the start here and end here, right.
Plop!
All that in there, just all that,
put all that in there, okay.
And actually, let's see,
actually we'll come back
to the links, so we'll get rid of that,
we'll come back to
that, we still have that
in the other folder.
Let's just work on the text first.
Here's the thing about HTML.
If I refresh that, what've we got there?
We just have this big mess of text, right?
I mean this isn't helpful to anybody.
If this was your website, I
would not hire you, right?
It's just a slosh of sloppy sloop.
Blech!
So, the thing that HTML
does, which is really cool,
and what you've seen a
little bit of already,
is, when we add HTML, we
are telling the browser how
to parse and what to do, really just what
to do, that means, what to do with text.
Otherwise, it's like here's all your text.
But, what we can do is describe this text.
We can say, hey, this
Cookie Monster thing here,
it's not just any text,
it's a heading one.
And if I refresh, you'll
see that the HTML is
separating all this other jargon
and saying that this
is the heading, right?
And that's kind of the magic of HTML.
We are describing the content.
Such that this second part here,
our Chocolate Chip Evangelist,
is a sub-header, right,
it's a little bit lower
on the totem pole of, H1
is the most important,
it's the title, and then
the sub-title, H2 there.
And so that's the first
step in making a site.
It's finding the elements you wanna bring
into your site and describing them.
So for the paragraphs, we'll do each one
of those like this, boom.
And we'll just repeat that
and I'll just copy and
paste it, cause I can,
and pull those into sight like this.
Go ahead and do that right now, yeah?
Save that, refresh it,
and already we're making
some nice progress.
If at any point you wanna just pause
and catch up, that's also fine,
but I'm gonna keep moving along.
Okay, so you may have noticed
in the last project that things
are kinda indented a bit.
The reason I'm doing that is really just
for your sake.
It makes it stylistically easier to read,
and if you share this, let's
say you write thousands
of lines of code, you're
a Facebook developer,
and you're writing lots of code
and then you have to share
it with somebody else
in your team or you get fired
or you move on, let's be positive,
you move on to a better job,
people need to read your code.
And so there's certain standards or styles
that are just better, and one
of them is keeping it indented.
So if you see me do that, I encourage
that you follow along.
It's the best practice
and your code is gonna,
your life depends on it.
No, your code will just be better for it.
All right, we're having fun, right?
Okay.
So that's all it is,
and if I save and refresh
it doesn't change the output
on the page but things are looking good.
So that's our first step there.
In the next video we are
going to add the links
and then, soon after, the
images, so come along for that.