Voiceover: Welcome back, time to go back to Brackets
and get our hands dirty again.
I'm really excited to start building this website.
In this lecture we will start
by setting everything up.
So let's go.
Now the first step is to actually
create a nice folder structure
where we keep all our files very organized.
And that you can later use for much, much bigger projects.
So I'll start by creating here a new folder.
And I will call this omnifood.
Omnifood.
Alright, so now inside of this
I will create the first folder called resources.
And inside of that folder, show you, like this,
okay, inside of the resources folder
we'll put a folder for our CSS files,
another folder for JavaScript where we will
put all our jQuery files,
then another folder for the images that
we are going to use in the project,
and also a folder for some data.
We'll probably not need this folder,
but I will include it here, so, you know
where to put it in case you need it
for some projects of your own later.
And inside of this CSS folder I will put another
folder for images, and the difference
between this one and the other one
is that these images are going
to be used by CSS, such as background images.
Okay, so in the resource folders
go the files that are created by us, basically.
Then we have another folder here
which is called vendors.
And in here we have some similar folders,
again, CSS, but the difference is
that this folder is for CSS that was not created by us.
So that we download it from the internet
and use for our project.
And another one for JavaScript files,
and one for fonts, that's probably
where our icon fonts will go.
So this is a structure that is very flexible
and allows us to separate the files
that were created by us and files
that we download from the internet
like JavaScript plugins or CSS files,
such we are going to use later.
Alright, so this is our folder structure.
So now let's go to Brackets, and back here,
this is our old project, you probably remember
how to open a project, or create a new one,
it's here, this button, and hit open folder,
and it's on the desktop omnifood.
Okay, so that is our working folder.
Now let's start by creating a new HTML file,
and I will save it and call it again, index.html,
and also a new CSS file which I will leave empty for now.
This one is again, style.css.
So let's create our HTML structure here starting
with the doc type, I hope you remember this.
DOCTYPE html, alright, you remember what comes next?
Now is the HTML element.
Give it some space, and one thing we didn't do
in the first project, but I'm going to do it now,
is specify the lang attribute.
And we will say that this page is in English.
Alright, inside of the HTML we have again,
the head, and then the body
where all our main content will go.
Okay, I will now include the CSS file
which is, as you probably remember,
link then rel, say stylesheet,
then I say it's type, CSS, and now I actually
realize that I did a mistake here
because I want this file, you see,
I put this file right here, but that's not
where I want it, I want it right in our CSS folder.
Right here, right.
So let me see, so as I have told you before
we have this file tree here where we can see
all of our files, okay, here it is.
So I can just delete this one.
So Brackets allows you to use this
as a file explorer, you can delete
and manipulate files in here as well.
So now let me establish the link
between these two documents.
Alright, href, and it's inside resources,
inside the CSS folder, and it's style.css, and that's it.
Now we'll just give it a nice title, just Omnifood for now,
you can just change this later.
And we will also put much more stuff here
in the head section later on.
Now in our CSS file I want to include
right now is a CSS file which is called normalize.css.
And as you can see here, normalize.css makes browsers
render all elements more consistently
and in line with modern standards.
It precisely targets only the styles that needs normalizing.
So it's like a CSS reset which makes CSS
looks the same in all browsers.
I'll hit this, now I will save this
inside our project folder, omnifood,
and as I explained before, this is a file
we got from the internet, it's not our file,
so I'll put this inside the CSS folder
in the vendors folder, alright.
So let's include it here.
And it actually has to go before this file.
So link, again, all of this stuff, stylesheet,
type, CSS, href, now it's in the resources, CSS, normalize.
Right, now the next step we do in this kind of setup
process is to include the web font we chose.
Do you remember, it was Lato.
So I will go to Google Fonts, and it's actually right here.
So this is the Lato font.
See here, there are some others here,
this is Lato.
So these are the different styles which are available
for this typeface, with the different font weights,
and down here some italics.
So we want to use this one.
And here we gotta select all the styles we want.
And I want the light one, and the normal,
which is already selected, I don't know
about the very thin, but for now I will just use this,
and also the italics, this one, we don't
want to use all of them because that would
effect the page speed of our webpage.
So we will just use these four one for now,
and we can always select more if we need them later.
So it's very, very easy.
All we have to do now is to come down here
and copy this link and go back to our HTML file,
and paste it here, and that's it.
And that's because this Google Font
is actually just a CSS file.
Which we use here in our project,
but it's not a file that we download,
it's a file that's in the internet
here on the Google Font server.
Alright, so let's make the first CSS definitions here.
As you remember maybe, from our first project,
we should target R elements and put their margin
and padding to zero, that's always
the first thing that I do.
And I also set the box sizing property,
which we talked about before, which is border box.
Alright, so now all margins and paddings are gone.
And now for the HTML we also make
this basic setup so that we can get started.
So the first thing I will set the background color,
now the background color is not necessary
'cause I want it to be white and that's the default,
so it's not necessary, but just to
show you I'll do it anyway.
And we know that white is FFF, okay now we can
set the text color for the entire project,
and what I like to do is to start with black,
'cause I know it's 000, then I use
the color picker as we did before,
with command, E, and choose a nice gray from here.
Now we'll use this one, 555, which is not
too dark and not too light,
but if we want we can change this later as well.
And we can also set the font family.
So we will use, as we said, Lato.
So all we need to do to set this family
is to include the CSS file such as we did before,
and then use that font name right here.
Now as a second choice, as I did before,
I will say just Ariel, and this is what
happens, for example, if the user has
no internet connection for, I don't know
which reason, so if Lato can't be displayed,
Ariel will be displayed instead.
And now, if Ariel is not available as well,
then we have this CSS keyword which is sans-serif,
so if Lato and Ariel are both not available,
then any sans-serif font will be used.
And I will also set a font size.
A overall font size for the project to 20 pixels.
If that's too much, we can always put it back later.
Another thing about the font is to set the font weight.
I'll say font weight, and if you remember,
I will go back here, we selected 100, 300 and 400,
and the default that I will choose here is 300.
And the last thing that I should do here
is text rendering, and then optimize legibility.
This will make our fonts rendering in a perfect way.
Okay, I think that now we're ready to start.
All the setup is done, let me just see
if everything works, we'll just put in some h1 element here,
put Omnifood, and test the whole thing.
Open the live connection as we did before, takes some time.
Alright, this is Omnifood, with the font we just selected
and with the font size we selected
and with the font color.
So that was the basic setup of our project.
Next we can start to actually build the site.