All right. 1
So in the last lesson there was a pdf that you could download which showed the end result of our web 2
site and it shows how things would be laid out, 3
what is the rough spacing between each of the elements and how everything should look and feel. 4
Now I've also specified the hex codes for the colors that I'm using here. 5
And I also showed you how you can go about getting hold of this button code. 6
Now in this lesson I'm going to show you how I implemented this, 7
adding in the rest of the CSS code that we need to achieve this look. 8
Now it might just be that your code, based on what you estimated visually, is a little bit different from 9
what I'm going to type. 10
That's not a problem at all. 11
Now you can either follow along with what I'm doing in the solution or you can simply watch it just 12
to see if you got the broad strokes right. 13
For example how did you implement the horizontal rule, 14
or how do I get this bottom footer section to look like this? 15
Now it doesn't matter if your web site looks similar to mine or not. 16
In fact, I encourage you to personalize your web site, but I want you to be able to achieve the layouts 17
that I've specified. 18
So after you're able to look at a specification like this. Now, I admit this is a very rough spec and 19
I haven't given you the specific margins and paddings etc., but it's a great skill as a web designer 20
to be able to look at a sketched out layout or a mockup and to be able to implement that in code inside 21
your CSS and HTML. 22
So let's get going and feel free to follow along with me or just watch the solution video to see how 23
to do something that you couldn't figure out. 24
So the first thing I'm going to change is that I'm going to change the body text color to a slightly 25
off black, and that's the color I specified here, 26
40514E. 27
So let's head over to our body and let's add that font color here. 28
So that's going to be changing the color property. 29
And it is 40514E, and that's this sort of dark greyish color that we're going to implement for 30
the text inside our web site. 31
And that just makes it look a little bit more designed than previously but it's still highly readable. 32
So be careful about using really light greys when you're changing the body color because if there's 33
not enough contrast with the background color then it can make it really difficult, not just people with 34
visual impairment but even normal people would be a strain on their eyes. 35
So always go for something dark and high contrast. 36
Now the next thing that I want is to have a little bit more padding between the h2s and the text 37
below them. 38
So for example I want just a bit more space between the Hello and this bio, and also My Skills and the 39
skills section. 40
So let's head over to our h2 and add that padding-bottom, and I'm going to add only about 10 pixels 41
to achieve that. 42
So you can see the effect is really subtle but it helps to space things out a little bit. 43
Now the next thing I want is a bit of space between the middle section and the top section. 44
So I'm going to add again 100 pixels of padding to the top and 100 pixels to the bottom to space it 45
out between the middle, the top and the bottom containers. 46
But I don't want to add any further margin to the left and right, 47
so I'm going to leave it as 0 so that it's stuck to the left and right sides of the viewport, which is 48
the screen. 49
So in order to do that I'm going to use the shorthand, where I say it's 100 pixels for the top 50
and bottom and 0 for the left and right. 51
So let's hit save and refresh and you see we've now got a good bit of space between the top and bottom containers. 52
And that looks a lot more natural than before. 53
Now the next thing I'm going to do is, I want to format this little bit of bio here so that it's less 54
in width, and you can have a few more lines rather than this long line that's quite hard to read. 55
And so I can do that by changing it’s width. 56
So if I go into my index.html, and I already have this class for that paragraph which is called 57
intro. 58
You might have called it something else or you may or may not have this class. 59
Just check to see what you called this class over here. 60
And then we can target it inside our styles.css. 61
And I'm just going to put it below the pro class. 62
So it's called intro, 63
and I'm going to change its width to only 30 percent of its parent container, which is of course the middle 64
container. 65
So let's hit refresh and you can see it's now a lot less in width and it's now taking up three lines, 66
which is much easier to read rather than one long big line. 67
So, but the problem is now, it's left aligned and it's no longer in the center of our web page, and that's 68
because it's no longer edge to edge and we now have to set the margin to 69
auto 70
in order to get it to be centered in the web page, which is exactly what we want. 71
So I'm going to go ahead and add a margin property and just set it to auto on all four sides. 72
And now you can see it's perfectly centered and it looks a lot nicer than before. 73
So one of the things I added here was to make the line height double what it used to be and that spaces 74
out the text and makes it a lot easier to read. 75
Now I'd like to do that consistently across my web site, 76
so for the intro as well as the other parts of text. 77
So instead of having that line-height down in the skill-row section, I'm actually going to cut that 78
and add that to a paragraph level 79
CSS rule. 80
So I'm targeting all the paragraphs inside my web site and I'm changing all of their line-heights to double 81
the height that it used to be. 82
And this makes it a lot more spaced out and a lot easier to read. 83
Now finally I just want to adjust my clouds a little bit, 84
just based on what I prefer it to look. 85
So I'm going to change the top cloud to have 40 from the top rather than 300, 86
make it go up a little bit, and then I'm going to make the bottom cloud 87
only have a left of 250, 88
so make it go further to the left. 89
All right. 90
So that is pretty much the top sections done. 91
Now the next thing we need to look at is this horizontal rule and at the moment it's looking a little 92
bit ugly. 93
But as we did previously, we managed to get these little grey dots to show up as the horizontal rule 94
separating the sections instead. 95
And that's what we want to do here also. 96
So let's go ahead and target the horizontal rule. 97
So, remember, because it's an HTML element we're going to put it with the other HTML elements, and we're 98
going to first change the border so that it has a dotted style and I'm going to change the color to 99
a light grey, 100
so an EAF6F6, and I want it to be 6 pixels in width. So let's refresh that. 101
Now you can see that there's now two borders of one above and one below and enclosing a zero pixel height 102
horizontal rule. 103
So if we now go and set the border-bottom to none, then we can get rid of that bottom border to only 104
have a single line, which looks the way that we want it to. 105
So the next thing is to change its width and I want it to be a lot narrower than that. 106
In fact, I want it only to be about maybe 4 percent of the width, and it's important to use percent here so 107
that it scales when my web site scales, and finally I need to give it some margin, because at the 108
moment it's far too close to everything else. 109
So I want it to have 100 pixels of margin-top, 100 pixels margin-bottom, and I want it to be centered 110
in the middle. 111
So we're going to go for that good old margin property, 112
and we're going to say top and bottom should be 100 pixels, and left and right should be auto, so that 113
we keep this centered in the middle. And that is looking really really nice. 114
And I know it's a very very light color but it's fine because it doesn't need to be read, 115
it’s just there to visually separate some of our section. 116
Now the next section that we get to is, of course, this Contact Me section, and the first thing I want 117
to do is similar to this intro or bio bit of text. I need to make this Contact Me message a little bit 118
less wide. 119
So let's target that and change its width. So, the contact message currently has a class called 120
contact-message. 121
So let's go ahead and target that inside our CSS, 122
so .contact-message, and we're going to change its width. And I'm going to change it to just 40 percent 123
in this case, and that will make it go onto two lines but it will also make it go to the left. 124
So let's change the margin so that we have 40 pixels from the top and 40 pixels from the bottom, 125
but the left and right should be auto. 126
Now the shorthand way of specifying that is by using the three element circle rule, 127
so that's 40 pixels from the top, auto for the left and right and 60 pixels for the bottom. Again, 128
if that confuses you at all, 129
make sure you take a look at the MDN Developer Docs for the margin property. 130
So hit save and we've now got more margin here than here, 131
and it's also spaced so that it's automatically centered in the middle. 132
Now the final thing in this section is of course changing that Contact Me button from this horrible 133
ugly looking thing to something that looks a little bit more like a real button. 134
And as we mentioned in the challenge we're going to use the CSS Button Generator web site. So the text 135
I'm going to change to CONTACT ME, 136
all caps, 137
the font-family we’ll leave as Arial for now, the font-color is just going to be white, and the font-size 138
we’re going to leave as 20 pixels as well. 139
Now we're not going to change anything in the box but we are going to change the border and specifically 140
that's the border radius. 141
I'm going to change it down to 8 so that it's a little bit more square looking rather than rounded. 142
And it's not going to have a border but it is going to have a gradient background and the starting color 143
for our gradient is going to be 11CDD4, 144
and the end color is going to be 11999E. 145
And for our hover or rollover state, we're going to start the gradient at 30E3CB, and we're going 146
to end at 2BC4AD. 147
All right so now you can see that when you hover over it it's a little bit lighter shade of green. 148
So that looks pretty nice to me. 149
And this is the automatically generated CSS code based on all of those options that we've selected. 150
And we can now just copy it wholesale and paste it into our CSS over here. 151
Now if you take a look at our anchor tag for our contact button, you can see it has a class of btn, and 152
that matches perfectly with the class that we get back from CSS Button Generator, 153
and that means that we will be able to target it without a problem. 154
Now the only thing that I want to change here is, I want to change the text so that it fits in with our 155
font-family that we've set for the entire web site. 156
I’m going to change the font-family from Arial to Montserrat. And now if we hit save and we go ahead and 157
refresh our page, you can see that we've got that beautiful button that we've implemented without 158
very much work at all. 159
All right. So now we're finally ready to tackle the bottom section which is basically our footer that 160
you'll see on most web pages. 161
Now the first thing that we want to do is, we want to change its background color so that we can see 162
the difference between the footer and the middle section. 163
So find the bottom-container, and let's go ahead and change its background color to the color that we've 164
been using for a while now which is 66BFBF, and let's hit save and refresh. You can see we've now got 165
this bottom section highlighted and separated from the rest of the content. 166
Now why is there this gap between the bottom of our page and the bottom of our footer? 167
Well, the reason, if you inspect, is that you can scroll it all the way up to the top, 168
and if you hover over that paragraph for the last copyright message you can see that it's got a pretty 169
large margin, 16 from the top and 16 from the bottom. 170
And remember that came automatically from the user agent stylesheet which comes from the browser. 171
And that's 1em top and 1em bottom. 172
So we have to either get rid of that padding or we can pad out our footer a little bit more and make 173
it a little bit taller so that it encompasses that padding for the paragraph tag. 174
I'll show you what I mean. 175
So if we go into our bottom-container and we change the padding to 50 pixels up top, 0 left and right, 176
and 20 pixels at the bottom, then that should be more than enough to cover the 16 pixels which is the 177
1em padding for our paragraph. 178
So if we hit refresh you'll see now our footer goes all the way down to the bottom and there is now 179
enough space for that padding to be included inside the footer rather than outside the footer. 180
So next let’s style our anchor tags. 181
Currently they're a little bit too squished up together and it's not looking very nice. 182
So let's go ahead and target them by targeting all of the anchor tags and lets first change the text 183
color to what we have in the rest of our document and the text color that I specified was 11999E. 184
And let's add the property, of course, and that's hit save and refresh. 185
You can see that we've now got a slightly lighter color than before but it's still relatively readable 186
against the background. 187
Now you can of course make that contrast more if you wish to but I usually think that the text in the 188
footer, 189
you don't want it to distract from the main message which is either Contact Me or whatever it is that 190
you want to highlight to people. 191
So I want to have that a little bit more muted. 192
Now let's make this text look a little bit more in line with the rest of our text. 193
You can see that the anchor text is actually styled in a different font from the rest of our text. So 194
we can change that to what we've got for the rest of our body, which is Montserrat, by just copying this 195
line over here, or, as you probably should to get more practice, 196
just type it up. 197
So let's update that. 198
And we've got something that fits in with the overall look and feel of our web site. 199
And now all we need to do is just space them apart a little bit so that they can be easily distinguished 200
from each other. 201
So to do that we're going to have to add a little bit of margin to it and I'm going to add a 10 pixel 202
top and bottom margin and a 20 pixel left and right margin to give it more space away from each other, 203
and this way we can click on each one individually without having them all mushed together. 204
Now the final thing I don't like about this look is that by default all anchor tags have an underline 205
that shows you that this is clickable. 206
Now I want to show that in a different way by changing the hover state. 207
So I want to get rid of this underline, and I can do that by changing the text-decoration which, remember, 208
the browser automatically makes it underlined for all anchor tags, 209
and I'm going to change it to none. 210
So now we update that. 211
That's gone. 212
And that looks a lot nicer and it doesn't look like a 90s web site anymore, 213
right? 214
So as we said we want to show that these links are clickable by making it have a different color 215
when I rollover it. So I can target that using the hover state of the anchor tag. 216
And if you remember that we spoke about these pseudo classes a few lessons ago. 217
And if you're confused about this at all then be sure to check out those previous lessons on the CSS 218
selectors. 219
So for the hover state, instead of having a fun color of 11999E, 220
we instead want to have a EAF6F6, and that will just be a little bit lighter so that when we hover over 221
it, it looks like it's definitely clickable and that gives the user enough clues as to what to do with 222
it. 223
Now the very very final thing that I'm going to format is the copyright here, and I'm going to change 224
its color to make it less assuming and also make it a little bit smaller. 225
So let's go ahead and see what we used for that copyright message. 226
We used the class copyright. 227
So let's go into our styles.css, find the part where we have the text, 228
and let's go ahead and select the copyright message and change its color to the same as we had for our 229
anchor tag rollover state which is EAF6F6, hit refresh, and see it's now this lovely light white color, 230
and then we're going to make it a lot smaller. 231
So we're going to change the font size to 0.75rem, so that's 75 percent of 16 pixels, and 232
it's now less important and it's taking up less space as well. 233
Now finally I want to give a little bit more padding from the top and the bottom. 234
So I'm going to change its padding to maybe 20 pixels top and bottom and zero pixels left and right so 235
that it goes all the way to the end. 236
And that way it's got a little bit more separation from the top. 237
And this looks a lot nicer than before. 238
So that's all the changes that I have to make in order to fully recreate our specification here. 239
Now if you had any problems such as implementing the buttons or changing the horizontal rules then be 240
sure to try and fix it using this solution. 241
Now at this stage if you're happy with everything that we've spoken about, feel free to go ahead and 242
completely change or personalize this web site, change the color schemes, change the layouts to whatever 243
it is that you prefer. 244
But this is the live web site, and the next step is of course make it hosted on GitHub so that your 245
personal site is live and you can share it with your friends and your family or show it to anybody who 246
might want to employ you. 247
So that's all for this section. 248
But in this module we learnt a lot about CSS and styling and positioning and layout, changing the text, 249
changing the colors, making text wrap around images, how to create hover states, and loads and loads more. 250
So if any of this is not apparent immediately it might be worth reviewing some of the more difficult 251
concepts, 252
for example the positioning and the difference between absolute and relative. 253
Or you could simply just go ahead and start creating a web design of your own fancy that you've designed, 254
pencil and paper, and try to solve those problems by doing. So, 255
that’s all from me in this lesson. I'll see you on the next lesson.