All right. 1
So now it's time for our final project of the section. 2
And in this project, we're going to be building a website to help you learn Spanish. 3
Now, you might already know Spanish, but I'm currently learning Spanish, and there's so much vocab 4
to get through. 5
I thought, why don't we build a vocabulary flashcard website? 6
But a really, really simple one 7
using everything we know so far. In this project, we're going to be creating a website where we list 8
the words in, well, in this case in Spanish. 9
It could be any other language you choose, and we're going to match it with an image of a particular 10
color so that we learn all the colors in our foreign language. 11
This is what the final website should look like. 12
We've got our word which is foreign in the color that matches the image 13
and we've got our images all lined up as nice little squares so that we can scroll through this website 14
and learn the words for the colors in Spanish. 15
Once you're ready, go ahead and download the Color Vocab Project starting files, extract it, and open 16
it up inside VS Code. In the index.html, 17
y ou'll see that I've already set you up with some starting code. 18
If you go ahead and show it as a preview, you'll see some words for the colors in Spanish and the different 19
images for the different colors. 20
Now don't worry about the fact the images are all different sizes. 21
We're going to fix that with CSS very soon in the project. 22
First thing to note is we've already set you up with a link to an external stylesheet which is inside 23
style.css, 24
but notice that we haven't created that file for you. So I want you to create a new file inside the 25
correct location by using this button in VS Code and then name it once you've created it so that it 26
actually works. 27
And one of the things that I often check to make sure that my external CSS is linked up is to target 28
everything on the page and to set the background-color to red. 29
That way you know that if actually it does work, then it's linked up correctly and it's really obvious 30
when it doesn't like right now. 31
And the reason here is because my style.css is actually outside this folder. 32
It's just floating about somewhere and I have to get it so that it's at the location that I specified 33
in the external stylesheet link. 34
So I don't want you to change anything inside the index.html. 35
Instead, all of your work is going to happen inside the CSS file, which you will create and you will 36
incorporate into your project using this file path to make sure that you understand how file paths work 37
and how you can create this for yourself in the future. 38
Now, if we scroll down, you can see there's five different colors, five different images, and there 39
are some h2's and h1' s. 40
In order to complete this project, I've created some steps for you in the TODOs which you can follow. 41
Alternatively, you can simply look at the goal image and try to figure that out yourself. 42
You can either use a stepwise approach in the TODOs or you can use the goal and do everything yourself. 43
It totally is up to you. 44
But what you're aiming for in the final version of the website, which you can view by right-clicking 45
on solution.html, opening it up in the preview. 46
And the most important things I want to point out is that the images are squares, 47
t hey are 200 pixels by 200 pixels, so 200px high, 200px wide. 48
Secondly, the font-weight of these h2's are different from normal h2's. 49
They're actually a lot lighter. 50
So we've set the font-weight to be normal rather than the default, which is h2's get bolded. 51
The next thing is that the color of the text should match the meaning. 52
So rojo means red, azul means blue, 53
and because in our index.html I've matched each of them up together, 54
but also you can look at the IDs if you don't know Spanish words because we're learning them after all, 55
right? So yellow is amarillo, green is verde, and so on and so forth. 56
So I want you to make sure that these h2's have a text color that matches whatever it is supposed 57
to be. 58
So blue or orange or green or whichever. 59
So if you get confused, look at the goal.png. 60
If you want to go step by step, then look at the TODOs at the bottom. 61
But importantly, don't write anything or change anything in the index.html. 62
All your work goes into the CSS file. 63
Pause the video and give this a go now. 64
All right. 65
So let's run through the solution together. 66
So the first thing we're going to do is we're going to make sure that the solution folder is collapsed, 67
so it's not confusing, 68
and then we're going to select this folder and then add a new file which I'll call style.css. 69
Remember, the file name has to match what it's referred to here 70
exactly. 71
Sometimes you'll see people have styles.css, sometimes you'll see main.css, but as long as the 72
file name matches, it doesn't really matter. 73
It's up to you how you want to name it. 74
Once I've created that, let's just make sure that my CSS file is properly linked up by doing that background-color 75
change. 76
So let's change it to red and then let's go ahead and preview this 77
and if the background is red, then it means that it works. 78
So I can now delete this and get rid of that horrible background. 79
The next step is to go ahead and use CSS to style each of the color titles so that the color matches 80
the meaning. 81
The first one that we want to select is this h2, which displays Rojo and it has the ID of red. 82
So remember, IDs are unique, so we can simply select that. 83
So let's select the element with an ID of red and set its color to red. 84
And so we can do the same thing for the rest of the colors. 85
So now they're all matching with their meaning. 86
The next step is to use CSS to change all the color titles, to have a different font-weight. 87
And this is what we want the font-weight of normal. 88
If we want to select all the h2s, then we're going to have a problem because this one is also an h2 89
and we don't want that one to have a normal font-weight. 90
We still want that to be bold. 91
We want these to have the lower font-weight. 92
So what is unique to all of these? 93
Well, we've applied a class of "color-title" to each of them, which this h2 does not have. 94
Then that means that we can simply select "color-title" and then apply the font-weight to all of 95
those with that same class. 96
And you can see that differentiates between this h2 and this h2. 97
And instead all of these which are grouped together have that style applied. 98
Now the final thing we need to do is to use CSS, 99
note, not HTML to make all the images 200px high and 200px wide. 100
How can we do that? 101
Well, we can simply select the image element. 102
So this is using an element selector and we can set the height to 200px and the width to 200px. 103
And there you have it. 104
All of our images are now squares matching the height and width that we've specified. 105
You can of course change this and personalize it as much as you like, 106
change up the colors or change up the words, learn the colors in a different language, make things 107
even more beautiful using the styling that you've learned. 108
But in the next section, we're going to be covering more about different CSS rules and you'll have 109
more tools at your disposal in order to style your websites. 110
So I hope you had fun in this section where we introduced you to CSS. Once you're ready, 111
maybe tomorrow, maybe the next day, head over to the next section and continue learning about intermediate 112
aspects of CSS. 113
For all of that and more, I'll see you there.