Instructor: All right, so now it's time
for our final project of the section.
And in this project, we're gonna be building a website
to help you learn Spanish.
Now, you might already know Spanish,
but I'm currently learning Spanish
and there's so much vocab to get through,
I thought why don't we build a vocabulary flashcard website
but a really, really simple one
using everything we know so far.
In this project, we're going to be creating a website
where we list the words in, well, in this case, in Spanish,
it could be any other language you choose
and we're going to match it
with an image of a particular color
so that we learn all the colors in our foreign language.
This is what the final website should look like.
We've got our word, which is foreign,
in the color that matches the image
and we've got our images all lined up as nice little squares
so that we can scroll through this website
and learn the words for the colors in Spanish.
Once you're ready, go ahead and download
the Color Vocab Project starting files,
extract it and open it up inside VS Code.
In the index.html, you'll see
that I've already set you up with some starting code.
If you go ahead and show it as a preview,
you'll see some words for the colors in Spanish
and the different images for the different colors.
Now, don't worry about the fact
that images are all different sizes.
We're gonna fix that with CSS very soon in the project.
First thing to note is we've already set you up with a link
to an external style sheet, which is inside style.css,
but notice that we haven't created that file for you.
So I want you to create a new file
inside the correct location by using this button in VS Code
and then name it once you've created it
so that it actually works.
And one of the things that I often check
to make sure that my external CSS is linked up
is to target everything on the page
and to set the background color to red.
That way you know that if it actually does work,
then it's linked up correctly
and it's really obvious when it doesn't, like right now.
And the reason here is because my style.css
is actually outside this folder.
It's just floating about somewhere, and I have to get it
so that it's at the location that I specified
in the external style sheet link.
So I don't want you to change anything
inside the index.html.
Instead, all of your work is gonna happen
inside the CSS file which you'll create
and you will incorporate into your project
using this file path
to make sure that you understand how file paths work
and how you can create this for yourself in the future.
Now, if we scroll down,
you can see there's five different colors,
five different images, and there are some h2s and h1s.
In order to complete this project,
I've created some steps for you in the to-do's,
which you can follow.
Alternatively, you can simply look at the goal image
and try to figure it out yourself.
You can either use a stepwise approach in the to-do's
or you can use the goal and do everything yourself.
It totally is up to you.
But what you're aiming for
in the final version of the website,
wich you can view by right clicking on solution.html,
opening it up in the preview.
And the most important things I want to point out
is that the images are squares.
They are 200 pixel by 200 pixels,
so 200 pixel high, 200 pixel wide.
Secondly, the font weight of these h2s
are different from normal h2s.
They're actually a lot lighter,
so we've set the font weight to be normal
rather than the default, which is h2s get bolded.
The next thing is that the color of the text
should match the meaning.
So rojo means red, azul means blue.
And because in our index.html,
I've matched each of them up together.
But also you can look at the IDs
if you don't know Spanish words
because we're learning them after all, right?
So yellow is amarillo, green is verde
and so on and so forth.
So I want you to make sure that these h2s have a text color
that matches whatever it is supposed to be,
so blue or orange or green or whichever.
So if you get confused, look at the goal.png.
If you wanna go step by step,
then look at the to-do's at the bottom.
But importantly, don't write anything or change anything
in the index.html.
All your work goes into the CSS file.
Pause the video and give this a go now.
All right, so let's run through the solution together.
So the first thing we're gonna do
is we're going to make sure
that the solution folders collapse so it's not confusing.
And then we're going to select this folder
and then add a new file, which I'll call style.css.
Remember, the file name has to match
what it's referred to here exactly.
Sometimes you'll see people have styles.css,
sometimes you'll see main.css,
but as long as the file name matches,
it doesn't really matter.
It's up to you how you want to name it.
Once I've created that, let's just make sure
that my CSS file is properly linked up
by doing that background color change.
So let's change it to red
and then let's go ahead and preview this.
And if the background is red, then it means that it works.
So I can now delete this
and get rid of that horrible background.
The next step is to go ahead and use CSS
to style each of the color titles
so that the color matches the meaning.
The first one that we wanna select is this h2,
which displays rojo, and it has the ID of red.
So remember, IDs are unique so we can simply select that.
So let's select the element with an ID of red
and set its color to red.
And so we can do the same thing for the rest of the colors,
so now they're all matching with their meaning.
The next step is to use CSS to change all the color titles
to have a different font weight.
And this is what we want, the font weight of normal.
If we wanna select all the h2s,
then we're gonna have a problem
because this one is also an h2
and we don't want that one to have a normal font weight.
We still want that to be bold.
We want these to have the lower font weight.
So what is unique to all of these?
Well, we've applied a class of color title to each of them
which this h2 does not have.
Then, that means that we can simply select color-title
and then apply the font weight
to all of those with that same class.
And you can see that differentiates
between this h2 and this h2.
And instead, all of these, which are grouped together,
have that style applied.
Now, the final thing we need to do is to use CSS,
note not HTML, to make all the images
200 pixels high and 200 pixels wide.
How can we do that?
Well, we can simply select the image element.
So this is using an element selector
and we can set the height to 200 pixels
and the width to 200 pixels.
And there you have it.
All of our images are now squares
matching the height and width that we've specified.
You can, of course, change this
and personalize it as much as you like, change up the colors
or change up the words,
learn the colors in a different language,
make things even more beautiful
using the styling that you've learned.
But in the next section, we're gonna be covering more
about different CSS rules, and you'll have more tools
at your disposal in order to style your websites.
So I hope you have fun in this section
where we introduce you to CSS.
Once you're ready, maybe tomorrow, maybe the next day,
head over to the next section
and continue learning about intermediate aspects of CSS.
For all of that and more, I'll see you there.