All language subtitles for 060 Stylised Personal Site Solution Walkthrough.en_US

All right.

So in the last lesson there was a pdf that you could download which showed the end result of our web

site and it shows how things would be laid out,

what is the rough spacing between each of the elements and how everything should look and feel.

Now I've also specified the hex codes for the colors that I'm using here.

And I also showed you how you can go about getting hold of this button code.

Now in this lesson I'm going to show you how I implemented this,

adding in the rest of the CSS code that we need to achieve this look.

Now it might just be that your code, based on what you estimated visually, is a little bit different from

what I'm going to type.

That's not a problem at all.

Now you can either follow along with what I'm doing in the solution or you can simply watch it just

to see if you got the broad strokes right.

For example how did you implement the horizontal rule,

or how do I get this bottom footer section to look like this?

Now it doesn't matter if your web site looks similar to mine or not.

In fact, I encourage you to personalize your web site, but I want you to be able to achieve the layouts

that I've specified.

So after you're able to look at a specification like this. Now, I admit this is a very rough spec and

I haven't given you the specific margins and paddings etc., but it's a great skill as a web designer

to be able to look at a sketched out layout or a mockup and to be able to implement that in code inside

your CSS and HTML.

So let's get going and feel free to follow along with me or just watch the solution video to see how

to do something that you couldn't figure out.

So the first thing I'm going to change is that I'm going to change the body text color to a slightly

off black, and that's the color I specified here,

40514E.

So let's head over to our body and let's add that font color here.

So that's going to be changing the color property.

And it is 40514E, and that's this sort of dark greyish color that we're going to implement for

the text inside our web site.

And that just makes it look a little bit more designed than previously but it's still highly readable.

So be careful about using really light greys when you're changing the body color because if there's

not enough contrast with the background color then it can make it really difficult, not just people with

visual impairment but even normal people would be a strain on their eyes.

So always go for something dark and high contrast.

Now the next thing that I want is to have a little bit more padding between the h2s and the text

below them.

So for example I want just a bit more space between the Hello and this bio, and also My Skills and the

skills section.

So let's head over to our h2 and add that padding-bottom, and I'm going to add only about 10 pixels

to achieve that.

So you can see the effect is really subtle but it helps to space things out a little bit.

Now the next thing I want is a bit of space between the middle section and the top section.

So I'm going to add again 100 pixels of padding to the top and 100 pixels to the bottom to space it

out between the middle, the top and the bottom containers.

But I don't want to add any further margin to the left and right,

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

the screen.

So in order to do that I'm going to use the shorthand, where I say it's 100 pixels for the top

and bottom and 0 for the left and right.

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.

And that looks a lot more natural than before.

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

in width, and you can have a few more lines rather than this long line that's quite hard to read.

And so I can do that by changing it’s width.

So if I go into my index.html, and I already have this class for that paragraph which is called

intro.

You might have called it something else or you may or may not have this class.

Just check to see what you called this class over here.

And then we can target it inside our styles.css.

And I'm just going to put it below the pro class.

So it's called intro,

and I'm going to change its width to only 30 percent of its parent container, which is of course the middle

container.

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,

which is much easier to read rather than one long big line.

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

because it's no longer edge to edge and we now have to set the margin to

auto

in order to get it to be centered in the web page, which is exactly what we want.

So I'm going to go ahead and add a margin property and just set it to auto on all four sides.

And now you can see it's perfectly centered and it looks a lot nicer than before.

So one of the things I added here was to make the line height double what it used to be and that spaces

out the text and makes it a lot easier to read.

Now I'd like to do that consistently across my web site,

so for the intro as well as the other parts of text.

So instead of having that line-height down in the skill-row section, I'm actually going to cut that

and add that to a paragraph level

CSS rule.

So I'm targeting all the paragraphs inside my web site and I'm changing all of their line-heights to double

the height that it used to be.

And this makes it a lot more spaced out and a lot easier to read.

Now finally I just want to adjust my clouds a little bit,

just based on what I prefer it to look.

So I'm going to change the top cloud to have 40 from the top rather than 300,

make it go up a little bit, and then I'm going to make the bottom cloud

only have a left of 250,

so make it go further to the left.

All right.

So that is pretty much the top sections done.

Now the next thing we need to look at is this horizontal rule and at the moment it's looking a little

bit ugly.

But as we did previously, we managed to get these little grey dots to show up as the horizontal rule

separating the sections instead.

And that's what we want to do here also.

So let's go ahead and target the horizontal rule.

So, remember, because it's an HTML element we're going to put it with the other HTML elements, and we're

going to first change the border so that it has a dotted style and I'm going to change the color to

a light grey,

so an EAF6F6, and I want it to be 6 pixels in width. So let's refresh that.

Now you can see that there's now two borders of one above and one below and enclosing a zero pixel height

horizontal rule.

So if we now go and set the border-bottom to none, then we can get rid of that bottom border to only

have a single line, which looks the way that we want it to.

So the next thing is to change its width and I want it to be a lot narrower than that.

In fact, I want it only to be about maybe 4 percent of the width, and it's important to use percent here so

that it scales when my web site scales, and finally I need to give it some margin, because at the

moment it's far too close to everything else.

So I want it to have 100 pixels of margin-top, 100 pixels margin-bottom, and I want it to be centered

in the middle.

So we're going to go for that good old margin property,

and we're going to say top and bottom should be 100 pixels, and left and right should be auto, so that

we keep this centered in the middle. And that is looking really really nice.

And I know it's a very very light color but it's fine because it doesn't need to be read,

it’s just there to visually separate some of our section.

Now the next section that we get to is, of course, this Contact Me section, and the first thing I want

to do is similar to this intro or bio bit of text. I need to make this Contact Me message a little bit

less wide.

So let's target that and change its width. So, the contact message currently has a class called

contact-message.

So let's go ahead and target that inside our CSS,

so .contact-message, and we're going to change its width. And I'm going to change it to just 40 percent

in this case, and that will make it go onto two lines but it will also make it go to the left.

So let's change the margin so that we have 40 pixels from the top and 40 pixels from the bottom,

but the left and right should be auto.

Now the shorthand way of specifying that is by using the three element circle rule,

so that's 40 pixels from the top, auto for the left and right and 60 pixels for the bottom. Again,

if that confuses you at all,

make sure you take a look at the MDN Developer Docs for the margin property.

So hit save and we've now got more margin here than here,

and it's also spaced so that it's automatically centered in the middle.

Now the final thing in this section is of course changing that Contact Me button from this horrible

ugly looking thing to something that looks a little bit more like a real button.

And as we mentioned in the challenge we're going to use the CSS Button Generator web site. So the text

I'm going to change to CONTACT ME,

all caps,

the font-family we’ll leave as Arial for now, the font-color is just going to be white, and the font-size

we’re going to leave as 20 pixels as well.

Now we're not going to change anything in the box but we are going to change the border and specifically

that's the border radius.

I'm going to change it down to 8 so that it's a little bit more square looking rather than rounded.

And it's not going to have a border but it is going to have a gradient background and the starting color

for our gradient is going to be 11CDD4,

and the end color is going to be 11999E.

And for our hover or rollover state, we're going to start the gradient at 30E3CB, and we're going

to end at 2BC4AD.

All right so now you can see that when you hover over it it's a little bit lighter shade of green.

So that looks pretty nice to me.

And this is the automatically generated CSS code based on all of those options that we've selected.

And we can now just copy it wholesale and paste it into our CSS over here.

Now if you take a look at our anchor tag for our contact button, you can see it has a class of btn, and

that matches perfectly with the class that we get back from CSS Button Generator,

and that means that we will be able to target it without a problem.

Now the only thing that I want to change here is, I want to change the text so that it fits in with our

font-family that we've set for the entire web site.

I’m going to change the font-family from Arial to Montserrat. And now if we hit save and we go ahead and

refresh our page, you can see that we've got that beautiful button that we've implemented without

very much work at all.

All right. So now we're finally ready to tackle the bottom section which is basically our footer that

you'll see on most web pages.

Now the first thing that we want to do is, we want to change its background color so that we can see

the difference between the footer and the middle section.

So find the bottom-container, and let's go ahead and change its background color to the color that we've

been using for a while now which is 66BFBF, and let's hit save and refresh. You can see we've now got

this bottom section highlighted and separated from the rest of the content.

Now why is there this gap between the bottom of our page and the bottom of our footer?

Well, the reason, if you inspect, is that you can scroll it all the way up to the top,

and if you hover over that paragraph for the last copyright message you can see that it's got a pretty

large margin, 16 from the top and 16 from the bottom.

And remember that came automatically from the user agent stylesheet which comes from the browser.

And that's 1em top and 1em bottom.

So we have to either get rid of that padding or we can pad out our footer a little bit more and make

it a little bit taller so that it encompasses that padding for the paragraph tag.

I'll show you what I mean.

So if we go into our bottom-container and we change the padding to 50 pixels up top, 0 left and right,

and 20 pixels at the bottom, then that should be more than enough to cover the 16 pixels which is the

1em padding for our paragraph.

So if we hit refresh you'll see now our footer goes all the way down to the bottom and there is now

enough space for that padding to be included inside the footer rather than outside the footer.

So next let’s style our anchor tags.

Currently they're a little bit too squished up together and it's not looking very nice.

So let's go ahead and target them by targeting all of the anchor tags and lets first change the text

color to what we have in the rest of our document and the text color that I specified was 11999E.

And let's add the property, of course, and that's hit save and refresh.

You can see that we've now got a slightly lighter color than before but it's still relatively readable

against the background.

Now you can of course make that contrast more if you wish to but I usually think that the text in the

footer,

you don't want it to distract from the main message which is either Contact Me or whatever it is that

you want to highlight to people.

So I want to have that a little bit more muted.

Now let's make this text look a little bit more in line with the rest of our text.

You can see that the anchor text is actually styled in a different font from the rest of our text. So

we can change that to what we've got for the rest of our body, which is Montserrat, by just copying this

line over here, or, as you probably should to get more practice,

just type it up.

So let's update that.

And we've got something that fits in with the overall look and feel of our web site.

And now all we need to do is just space them apart a little bit so that they can be easily distinguished

from each other.

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

top and bottom margin and a 20 pixel left and right margin to give it more space away from each other,

and this way we can click on each one individually without having them all mushed together.

Now the final thing I don't like about this look is that by default all anchor tags have an underline

that shows you that this is clickable.

Now I want to show that in a different way by changing the hover state.

So I want to get rid of this underline, and I can do that by changing the text-decoration which, remember,

the browser automatically makes it underlined for all anchor tags,

and I'm going to change it to none.

So now we update that.

That's gone.

And that looks a lot nicer and it doesn't look like a 90s web site anymore,

right?

So as we said we want to show that these links are clickable by making it have a different color

when I rollover it. So I can target that using the hover state of the anchor tag.

And if you remember that we spoke about these pseudo classes a few lessons ago.

And if you're confused about this at all then be sure to check out those previous lessons on the CSS

selectors.

So for the hover state, instead of having a fun color of 11999E,

we instead want to have a EAF6F6, and that will just be a little bit lighter so that when we hover over

it, it looks like it's definitely clickable and that gives the user enough clues as to what to do with

it.

Now the very very final thing that I'm going to format is the copyright here, and I'm going to change

its color to make it less assuming and also make it a little bit smaller.

So let's go ahead and see what we used for that copyright message.

We used the class copyright.

So let's go into our styles.css, find the part where we have the text,

and let's go ahead and select the copyright message and change its color to the same as we had for our

anchor tag rollover state which is EAF6F6, hit refresh, and see it's now this lovely light white color,

and then we're going to make it a lot smaller.

So we're going to change the font size to 0.75rem, so that's 75 percent of 16 pixels, and

it's now less important and it's taking up less space as well.

Now finally I want to give a little bit more padding from the top and the bottom.

So I'm going to change its padding to maybe 20 pixels top and bottom and zero pixels left and right so

that it goes all the way to the end.

And that way it's got a little bit more separation from the top.

And this looks a lot nicer than before.

So that's all the changes that I have to make in order to fully recreate our specification here.

Now if you had any problems such as implementing the buttons or changing the horizontal rules then be

sure to try and fix it using this solution.

Now at this stage if you're happy with everything that we've spoken about, feel free to go ahead and

completely change or personalize this web site, change the color schemes, change the layouts to whatever

it is that you prefer.

But this is the live web site, and the next step is of course make it hosted on GitHub so that your

personal site is live and you can share it with your friends and your family or show it to anybody who

might want to employ you.

So that's all for this section.

But in this module we learnt a lot about CSS and styling and positioning and layout, changing the text,

changing the colors, making text wrap around images, how to create hover states, and loads and loads more.

So if any of this is not apparent immediately it might be worth reviewing some of the more difficult

concepts,

for example the positioning and the difference between absolute and relative.

Or you could simply just go ahead and start creating a web design of your own fancy that you've designed,

pencil and paper, and try to solve those problems by doing. So,

that’s all from me in this lesson. I'll see you on the next lesson.