1 00:00:00,650 --> 00:00:07,700 Now, even in its current state, our website already compares pretty favourably with our computer science 2 00:00:07,700 --> 00:00:09,050 professor's website. 3 00:00:09,320 --> 00:00:15,080 So we're definitely doing something right here. But we can make it even better. If you take a look at 4 00:00:15,080 --> 00:00:18,950 the personal website of Sean Halpin, who's a web designer, 5 00:00:19,460 --> 00:00:23,750 this is one of the most beautiful personal web sites I've ever come across. 6 00:00:23,810 --> 00:00:29,030 It's incredibly simple, but it's also really beautiful and really well-designed. 7 00:00:29,690 --> 00:00:34,020 So this is going to be our inspiration for this CSS module. 8 00:00:34,430 --> 00:00:40,610 And I'm going to show you how by using the powers of CSS and everything that you're going to learn 9 00:00:40,610 --> 00:00:47,480 in this module, we're going to elevate the design of our personal site to look something like this 10 00:00:47,810 --> 00:00:50,240 and bring it right into the 21st century. 11 00:00:50,840 --> 00:00:58,190 So the first thing that would already make our website look a little bit nicer is changing this pretty 12 00:00:58,190 --> 00:01:02,630 bland white background to a colored background. 13 00:01:02,900 --> 00:01:09,980 So if you head of us your code file and open up index.html, we can inject a little bit of access 14 00:01:10,400 --> 00:01:14,300 right into the HTML tag that we want to effect. 15 00:01:14,840 --> 00:01:22,010 And the tag that we're interested in is the body tag because we know that most, if not all, of our 16 00:01:22,010 --> 00:01:27,260 displayed content on our website is enclosed inside this body tag. 17 00:01:27,650 --> 00:01:33,620 So if we change its background, then the entire website's background will change, too. 18 00:01:33,980 --> 00:01:44,540 So inside this body tag, we're going to tap into an attribute called style, and style takes CSS code 19 00:01:44,690 --> 00:01:46,520 inside the quotation marks. 20 00:01:46,730 --> 00:01:51,290 So the style that we want to change is the background color. 21 00:01:51,440 --> 00:01:56,900 So I'm going to write background-color and I'm going to write a colon. 22 00:01:57,290 --> 00:02:04,340 And after that colon, I'm going to specify the color that I want for the body. And let's just start 23 00:02:04,340 --> 00:02:06,140 off with a blue color. 24 00:02:06,740 --> 00:02:11,630 And then we're going to close off this line of CSS code using a semicolon. 25 00:02:12,260 --> 00:02:18,500 Now, if at this point you find that Atom is highlighting your code in a slightly different color scheme 26 00:02:18,710 --> 00:02:19,340 to mine, 27 00:02:19,640 --> 00:02:26,090 so for example, the part which says background color blue, instead of the green text I've got you've 28 00:02:26,090 --> 00:02:28,370 got white and yellow like this, 29 00:02:28,760 --> 00:02:29,620 don't worry about it. 30 00:02:29,690 --> 00:02:34,490 That's just something specific to your computer, and it doesn't mean that you've done anything wrong. 31 00:02:34,850 --> 00:02:42,260 Just make sure that you've got the semicolon that closes off that background color blue, and then you've 32 00:02:42,260 --> 00:02:45,740 got the double quotes around that entire style. 33 00:02:46,160 --> 00:02:49,640 And once you've checked those things, then you can continue on. 34 00:02:50,960 --> 00:03:00,320 And now if I hit save and if I go back to my browser, then if you hit refresh, you'll see our CSS code 35 00:03:00,320 --> 00:03:05,630 being implemented, changing the entire background of our web page. 36 00:03:06,410 --> 00:03:11,690 Now, if the background color is not changing for you, make sure that you're actually looking at the 37 00:03:11,690 --> 00:03:15,170 copy of the website that you're working on and not the GitHub version. 38 00:03:15,650 --> 00:03:17,870 This is where our development is going to happen. 39 00:03:17,900 --> 00:03:24,320 So if you don't have it up, remember you can simply right click and go to copy full path and paste it 40 00:03:24,320 --> 00:03:28,100 in here in order to get to that website under development. 41 00:03:28,130 --> 00:03:33,800 Now the question you might have at this stage beside the question of "how did we manage to get our website 42 00:03:33,800 --> 00:03:35,600 looking even uglier than before?" 43 00:03:36,230 --> 00:03:37,820 Just bear with me on that. 44 00:03:37,970 --> 00:03:44,900 But the question that most students have is, well, how did you know to use background-color and how 45 00:03:44,900 --> 00:03:48,380 did you know that blue as a color would work? 46 00:03:48,500 --> 00:03:50,870 Let's see how we can find out how to do this. 47 00:03:50,960 --> 00:04:02,570 So if I head over to Google and we search for change background color using CSS and we're going to tag 48 00:04:02,570 --> 00:04:08,330 on MDN at the end because that's our preferred documentation, and you can see that the first link 49 00:04:08,330 --> 00:04:14,610 that shows up already takes us to the documentation on the background color. 50 00:04:14,900 --> 00:04:21,680 And this page explains that the background color is a CSS property, which sets the background color 51 00:04:21,680 --> 00:04:23,450 of a particular element. 52 00:04:24,110 --> 00:04:34,430 So we've used this particular line to change the background color of our body HTML element to blue. 53 00:04:34,550 --> 00:04:43,370 Now, as it shows, we can also do this using hex values or hexadecimal values. So we can replace this 54 00:04:43,370 --> 00:04:51,920 really ugly looking blue with something that is custom. And a really good tool for finding beautiful 55 00:04:51,920 --> 00:04:57,080 colors and beautiful color palettes is a website called colorhunt.co. 56 00:04:57,800 --> 00:05:00,130 And here you've got professional designers 57 00:05:00,400 --> 00:05:07,900 who've curated some of their favorite color palettes, and they provided the Hex codes to implement 58 00:05:07,900 --> 00:05:12,580 them in your own designs. So you can search by hot or popular. 59 00:05:13,060 --> 00:05:17,950 And we're going to look for a nice color palette that is going to work for our particular project. 60 00:05:18,250 --> 00:05:25,960 So I'm going to choose this one and I'm just going to go ahead and copy the hex value of this nice sort 61 00:05:25,960 --> 00:05:29,200 of light pastel green bluey color. 62 00:05:29,740 --> 00:05:34,150 And I'm going to replace the word blue with that hex value. 63 00:05:34,240 --> 00:05:40,180 And remember, whenever you're using hex values, it needs to have the pound sign, or you might see 64 00:05:40,180 --> 00:05:42,160 it as the hashtag sign in front. 65 00:05:42,550 --> 00:05:49,690 Now, as soon as we add that hex code, you'll notice that one of our plugins that we installed in the 66 00:05:49,690 --> 00:05:56,470 beginning, the one called Pigments, is highlighting that color to us to show us what it'll look like 67 00:05:56,770 --> 00:05:57,880 when it's implemented. 68 00:05:58,180 --> 00:06:00,730 But we're going to verify that on our website as well. 69 00:06:01,030 --> 00:06:06,580 So let's go ahead and hit save and go back to our website and hit refresh. 70 00:06:06,970 --> 00:06:13,240 And you can see that beautiful light green color is now showing across our web page. 71 00:06:13,600 --> 00:06:20,890 So the other question that you might have is how can I figure out which colors I can use just by specifying 72 00:06:20,890 --> 00:06:25,360 the name of it and which ones I have to use as a hex value? 73 00:06:25,810 --> 00:06:31,630 Well, again, let's head over to Google, and we're going to look for an answer to our query. 74 00:06:31,900 --> 00:06:37,330 And I know that I've been banging on about this point, but it's really, really important because as 75 00:06:37,330 --> 00:06:44,680 a fully-fledged web developer, one of the most important skills is finding and figuring out how to 76 00:06:44,680 --> 00:06:47,650 do something that is specific to your needs. 77 00:06:48,010 --> 00:06:55,150 So inevitably, at some point in your future career, you will need to build features or implement things 78 00:06:55,330 --> 00:06:56,920 that we haven't ever talked about. 79 00:06:57,280 --> 00:07:03,460 And it's important that you really start building up this skill of figuring out what are the best keywords 80 00:07:03,460 --> 00:07:04,150 to search for, 81 00:07:04,420 --> 00:07:06,270 how do I structure my searches, 82 00:07:06,610 --> 00:07:11,170 which sources am I going to go to, be it Google, StackOverflow, 83 00:07:11,510 --> 00:07:17,590 MDN, in order to figure out how I can do this specific thing that I want to do, and that's why I want 84 00:07:17,590 --> 00:07:22,690 to show you my thought process in order to guide you on how you can start doing this for yourself as 85 00:07:22,690 --> 00:07:23,110 well. 86 00:07:23,500 --> 00:07:28,960 So whenever you come across something that you want to figure out or you want to do that isn't covered 87 00:07:28,960 --> 00:07:35,110 in the tutorials, I want you to first give it a go looking and seeing if you can figure it out for 88 00:07:35,110 --> 00:07:41,530 yourself because this is one of the most important skills that you need to learn as a developer. 89 00:07:42,280 --> 00:07:46,750 So let's go ahead and search for CSS colors. 90 00:07:46,750 --> 00:07:54,190 And if we hit enter, you'll see that Google has picked out this particular table on the MDN website 91 00:07:54,550 --> 00:07:58,570 and it has keywords and RGB hex values. 92 00:07:58,870 --> 00:08:01,420 So let's go and take a look at it in more detail. 93 00:08:01,630 --> 00:08:08,270 So this is a page that I recommend you bookmarking even because it describes the color 94 00:08:08,390 --> 00:08:11,950 CSS data type that's available to you when you use the CSS. 95 00:08:12,310 --> 00:08:19,510 And if you scroll down, there's this really useful table that shows you the colors and the keywords 96 00:08:19,510 --> 00:08:27,010 that you can use in order to implement these colors in your code without ever having to dive into the 97 00:08:27,010 --> 00:08:27,580 Hex code. 98 00:08:28,090 --> 00:08:34,450 So, for example, maybe you want the background to be this powder blue, right? 99 00:08:34,600 --> 00:08:37,540 So you can go ahead and simply copy this keyword. 100 00:08:37,900 --> 00:08:43,360 And instead of using the Hex code, we can simply use the word powder blue. 101 00:08:43,900 --> 00:08:51,280 And if we refresh our website, you can see that that color is automatically rendered because it's recognized 102 00:08:51,610 --> 00:08:53,770 as a valid CSS color. 103 00:08:54,010 --> 00:08:58,540 So this is a quick and easy way of implementing colors using CSS. 104 00:08:58,600 --> 00:09:04,090 Now there's a whole range of other ways that you can change the color using CSS, and I'll leave 105 00:09:04,090 --> 00:09:09,160 you to read through this documentation and take a look at some of the other ways or some of the other 106 00:09:09,160 --> 00:09:10,990 palettes that you can tap into. 107 00:09:11,410 --> 00:09:18,400 Now, heading back to our personal site, the next thing that I want to change is the style of these 108 00:09:18,400 --> 00:09:26,620 horizontal rules. And you might realize that there's a little bit of difficulty involved in doing this 109 00:09:26,620 --> 00:09:34,750 because as nice as it is, modifying the style of a particular HTML element by simply going into the 110 00:09:34,750 --> 00:09:42,220 tag and changing the style attribute, it's a little bit cumbersome when you want to do that to many 111 00:09:42,220 --> 00:09:43,510 repeated elements, 112 00:09:43,810 --> 00:09:50,140 for example, our horizontal rules because I have a total of about four of them, and I would have to 113 00:09:50,140 --> 00:09:56,200 write up the CSS code and copy and paste into each and every one of these tags. 114 00:09:56,620 --> 00:09:59,680 Now, if at some point I decided to change one of these 115 00:09:59,970 --> 00:10:07,530 CSS values say, you know, I actually prefer this light color over this powder blue, and I'm going 116 00:10:07,530 --> 00:10:15,480 to change it back to that particular hex code, then I would have to remember to change it in all four 117 00:10:15,480 --> 00:10:18,240 places and this is very, very error prone. 118 00:10:18,540 --> 00:10:25,020 So in the next lesson, I'm going to show you another way that you can implement CSS code that will 119 00:10:25,020 --> 00:10:28,080 apply across the entire web page. 120 00:10:28,530 --> 00:10:31,180 And it's by using internal CSS. 121 00:10:31,380 --> 00:10:33,690 You can look forward to that in the next lesson. 122 00:10:33,840 --> 00:10:34,380 See you there.