It's now time for the final project. 1
And in this project, we're going to be building a flag of Laos using only CSS and HTML. 2
If you take a look at this image, it looks like an oil painting, right? 3
But actually, if you look behind the scenes, this is created completely just with HTML and CSS, which 4
is completely crazy. 5
If you head over to this URL (https://diana-adrianne.com/purecss-lace/), you'll see the portfolio of Diana Adrian, who is a CSS artist. 6
And if you right-click on this image and you inspect it, you can see that all aspects of this painting 7
is all created using CSS, which is completely mind blowing. 8
For example, if we take a look at something really simple, the hair here, you can see there are like 9
a million divs in here, each strand having a div. 10
And then if you look inside each strand, you can see they've got border-radius set, width, height, 11
different colors, etcetera. 12
And it's this crazy complex CSS art. 13
If you're not into oil paintings, then maybe you're into The Simpsons. 14
These images of The Simpsons were all created using CSS, and if you head over to this URL (https://pattle.github.io/simpsons-in-css/), then you 15
can actually click on each of these characters and you can see the CSS that was used to create them. 16
And it's not surprising that it's a ton of CSS to write. 17
So don't worry, this is not your challenge. 18
We're not going to be creating something crazy like Krusty the Clown with 875 lines of CSS. 19
It's just for you to be aware of the power of CSS. 20
And once we learn the different ways of combining selectors, of the specificity of CSS selectors, 21
positioning things, different properties, you can in fact eventually create crazy stuff like this, 22
if you have a ton of time and probably an artistic streak as well. Most of the time when I work with 23
CSS, my results look like this weird Pikachu where things are not positioned correctly and everything's 24
just moving in the wrong directions. 25
So you're not alone. 26
Most people write CSS code that creates weird pikachus. 27
The important thing is we understand why we get weird pikachus and why the eyeballs are so far down. 28
So we're going to consolidate what we learned in this lesson by creating the flag of Laos. 29
And this is going to test everything you've learned about combining different CSS selectors about CSS 30
specificity, the CSS cascade, and also about positioning. 31
And in the end, we will have this beautiful picture of the flag of Laos. 32
Go ahead and download the starting project files and extract it. 33
Now here, if you open up the index.html, you will see some very simple HTML that I've already set 34
up for you. 35
And if you preview it on the right, you'll see it has pretty much nothing, which is a great starting 36
point for your project. 37
The important thing is you don't change any of the HTML, so don't touch the index.html file at all. 38
It's purposely vague in terms of classes and IDs and nothing is really tagged with anything. 39
Right? 40
And this is because we're doing a challenge, right? 41
You can of course add loads of classes, loads of IDs and make this project super, super easy, 42
but I want to test you on what you've learned so far. 43
So that's why the initial index.html has basically nothing for you to be able to target with your selectors. 44
Instead, you have to be a little bit more crafty. 45
What we're aiming for is this. The flag doesn't have to be centered or positioned in any sort of particular 46
way. 47
This is going to be the top left corner, right here, and then there going to be a sort of rectangle that 48
occupies part of your website. 49
But the important thing is that it has these different aspects to it. 50
It's got a red section here, which is 50% of this blue section here, and then it's got another red 51
section down here, which is also similar in terms of how much it occupies and how it works is there 52
is a big red div right here and above it there is this blue div on top. 53
So that should already help you in terms of how this layout should look. 54
Now the next thing is we've got a paragraph element that's located at the top and we've got another 55
paragraph element that has to be inside a white circle. 56
If you take a look inside the index.html, you'll notice that there are some hints in here, for example, 57
the width and height of the flag and also the width and height of the circle. 58
If you want to get hold of the precise colors. 59
Remember previously we learned about CSS inspection and I've added a URL in here for you to be able 60
to inspect on 61
the actual image of the flag of Laos. 62
This will test you on something you've learned previously as well. 63
Remember, you can also right-click on the solution without opening the file and show it as a preview. 64
And you can of course take the URL from VS Code and paste it inside your browser in order to see what 65
the final outcome should look like 66
so you can better compare your version versus this version. 67
You can do this in many, many different ways. 68
And the main thing I want to know is that you know how to combine selectors, you know, about CSS specificity 69
and you know how to position things roughly on screen. 70
Once you're ready, pause the video and complete the project. 71
All right, let's go through the solution together. 72
The first thing is to style the outermost div, which has a class of ".flag". 73
So this is probably going to be the easiest part of this whole project. 74
We can target that div and set it to be 900px wide and 600px high so that we have a rectangle. 75
Now next we're going to have to set the background color so we can actually see it so that it's not 76
white. 77
In order to get the colors of the flag, remember I said we should inspect on it and then we can go 78
into the three dots, more tools, CSS overview, 79
and if we capture the overview, we'll get our hex codes. 80
So the red, which is our first box, has this hex code, which I'm going to copy and then paste into 81
here. 82
And now we have a very large rectangle in our preview. 83
Now the next step is to add this second rectangle on top of it. 84
If we take a look at our HTML, you can see we've got a div with class flag as the highest, most div 85
and then we've got as its children a paragraph element and another div and then we've got finally another 86
div and a paragraph element. 87
So this second div enclosed is going to be the one that we're going to turn blue. 88
Remember I said we can't change any HTML so we can't add any classes or IDs to it. 89
Instead, we're going to combine some selectors to select this particular div. 90
So what is an identifying feature of it? 91
Well, it is the direct descendant, the immediate child of this div class, so we can use the child 92
combination by saying let's get the class ".flag" and then the angle bracket and then the child div. 93
And in this div we're going to go ahead and give it a width and a height. 94
The width, we want it to be 100% of its parent. 95
So I'm just going to write 100% and it should end up being 900px. 96
Alternatively, you can write the pixel number. 97
Next, we're going to give it a height and I'm going to say 300px. 98
This way it takes up exactly half the height of the big red pot. 99
Now we just need to give it a background color in order to see it. 100
And the color is going to be this blue color. 101
And there we have it. 102
We have a blue rectangle inside a red rectangle. 103
Before we get busy positioning things, let's just make sure that we've got everything on screen first. 104
So I want the circle to show up. 105
And coming back to our HTML, you can see we've got one div. 106
This is the red rectangle. 107
Inside there's another div which is the blue rectangle. 108
And finally inside that we've got another div which we're going to turn into the circle. 109
How do we get hold of this one? 110
Well, we could use the descendant selector because this div is the immediate child of this div, which 111
is then a child of this div. 112
So we're saying it's three levels down and we can do that by saying the ".flag" class has a child, which 113
is a div which has another child, which is a div and this particular div we're going to give it a width 114
of 200px and a height of 200px and we're going to give it a background color of white. 115
And we should now see a little square here. 116
And in order to turn it into a circle, we set the border-radius to 50%. 117
So now we've got all three shapes on screen and it's time to try and position them so they look a bit 118
more like this. 119
Notice that this blue rectangle is not only half the size of the rectangle, but it's also shifted down 120
by a quarter. 121
So we want to set its position. 122
Now, as I mentioned, in order to set the position of an element relative to a parent, what you need 123
is for the child element, 124
so in this case, this rectangle that's inside this blue rectangle that's inside the red rectangle, to 125
have a position type of absolute. 126
And then if its parent has a position type of relative, then we can now set this blue rectangle relative 127
to this red rectangle. 128
So we can say from the top, let's shift it down by 150px, which is a quarter of 900px, 129
even though we set this red rectangle to have position relative and we didn't move it at all, 130
by setting it to relative, it enables us to modify the children's position relative to that parent. 131
And this is why you'll very commonly see this structure, a parent having position relative and a child 132
having position absolute. 133
And then we move it relative to the parent using the same strategy. 134
We can do the same thing for our circle. 135
Because our circle basically has to be in the middle of the red rectangle if we set the position of 136
this white circle. 137
To be positioned relative, then we can set it relative to its parent, which is the blue rectangle. 138
So in order to move it to the center of the blue rectangle, we have to shift it down so from the top 139
by 50px, because if we know that this height is 300px, 140
then half of it is going to be 150. 141
So then if we know that the radius of the circle is 100px because it's got a total height of 200 142
and a width of 200, then we know that in order for it to be in the center, it needs to be 50px 143
from the top. 144
And by similar calculation, we can work out that it needs to be 350px from the left. 145
Even though we did all our calculations correctly, you can see this white circle doesn't quite look 146
like it's right in the middle of this blue rectangle, right? 147
It's a little bit shifted to the lower part so we can diagnose our issues using pesticide. 148
In this case, you can see that we've got a div here, but we've also got a box above it and this is 149
the paragraph element. 150
And if we go ahead and inspect it inside the Chrome inspector, you can see that paragraph element has 151
a margin top and margin bottom. 152
If I go ahead and delete both of those margins, 153
then you can see our circle shifts bang into the middle. 154
So it's actually the margin around the paragraph element that's actually pushing the circle down because 155
it is within the flow of the HTML because by default, all elements are statically placed in the flow 156
of HTML. 157
Let's go ahead and implement that in our code. 158
We can select all the paragraph elements and set their margin to zero. 159
And you can see immediately our circle is now centered in the screen. 160
In addition, if we look at the goal image, we want to have the text super large. 161
You can play around with the font size, but the one that I used is 5rem and this will get you pretty 162
much the same size that you see here. 163
In addition, the text is centered both inside the circle and at the top. 164
So we need to set our text align to center and that gets it pretty much where it needs to be. 165
Now, the very last thing we need to do is to change the color of this part to white and this part to 166
black. 167
One way that we could do it is to simply set the color for all the text to white, and this will turn 168
everything white and will no longer be able to see this text even though it does exist. 169
And if we wanted to select that particular paragraph element, we don't have a good way of selecting 170
it with class or ID because we're not letting you change this HTML. 171
But you can of course use different combinations to get there. 172
For example, this paragraph element is a child of a div of another div of another div of a body. 173
There's actually a cheat code to doing this. 174
If we open up the inspector and find that paragraph element, we want to select right click on it, 175
go to copy and then copy selector. 176
And once you paste it in here, you'll see it's actually the selector that will allow us to target that 177
exact bit that we wanted to. 178
I don't recommend blindly copy and pasting things, so this is a little bit of a cheat code, but because 179
we now understand how this works, we can actually simplify this massively. 180
We know that what it's saying is find the body, find its child, that's a div, find its child, that's 181
div and then another child and then three levels deep, 182
there should be a paragraph tag which needs to be black. Because we understand this, we can vastly simplify 183
it by getting rid of that body, 184
or we could change this to the class ".flag", which would do exactly the same. 185
And we can even swap out these child symbols and keep it as a descendant selector. 186
So a paragraph element that is a child of this div, a grandchild of another div and a great-grandchild 187
of something that has this class, we'll select it and make it black. 188
This is a little bit of a roundabout way of achieving the goal. 189
You might have done something completely different. 190
For example, we know that by default everything is black. 191
So you could have also selected this paragraph element and turn it white instead. 192
But I just wanted to demo to you a neat feature of Chrome Inspector show you the cheat code after you've 193
done the exercise and let you know that this is also a possible way that you could try out in the future. 194
So now if we compare our flag with the solution flag, you can see it's completely identical. 195
Now, it might not be for you because maybe you've used a different method for positioning. 196
Maybe you've changed the font size to a different font size, but essentially you should be close to 197
this layout and hopefully in the process you've managed to use some of the skills that you learned in 198
this section. 199
The inspiration for this project comes from a website I came across by Michael Lascarides, and he basically 200
classified world flags in order of difficulty to draw. 201
So you can see all the way down here there is Serbia, which is pretty much the most complex flag to 202
draw because of the shield. 203
And there are other countries like Croatia or Mexico. 204
But at the very top there are the simplest flags, for example, Palau or Nigeria or Peru. 205
So if you want to have a go drawing your own country's flag, hopefully you're not in Serbia. 206
If you are, then good luck. 207
But if you're based in Austria or Bangladesh, then this should be quite doable using the skills that 208
you've learnt with CSS. 209
Enjoy, and I'll see you on the next section.