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