Original subtitles

All right.

So now it's time for our final project of the section.

And in this project, we're going to 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 the images are all different sizes.

We're going to 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 stylesheet 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 actually it 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 stylesheet link.

So I don't want you to change anything inside the index.html.

Instead, all of your work is going to happen inside the CSS file, which you will 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 h2's and h1' s.

In order to complete this project, I've created some steps for you in the TODOs which you can follow.

Alternatively, you can simply look at the goal image and try to figure that out yourself.

You can either use a stepwise approach in the TODOs 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, which 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 pixels by 200 pixels, so 200 pixels high, 200 pixels wide.

Secondly, the font-weight of these h2's are different from normal h2's.

They're actually a lot lighter.

So we've set the font-weight to be normal rather than the default, which is h2's 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 h2's 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 want to go step by step, then look at the TODOs 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 going to do is we're going to make sure that the solution folder is collapsed,

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 want to 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 want to select all the h2s, then we're going to 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 going to 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.