Now even in its current state our web site already compares pretty favorably with our computer science 1
professors’ web sites. 2
So we're definitely doing something right here. 3
But we can make it even better. If you take a look at the personal website of Sean Halpin, who's a web 4
designer at seanhalpin.io, 5
this is one of the most beautiful personal websites I've ever come across. 6
It's incredibly simple but it's also really beautiful and really well-designed. 7
So this is going to be our inspiration for this CSS module. 8
And I'm going to show you how, 9
by using the powers of CSS and everything that you're going to learn in this module, we're going to elevate 10
the design of our personal site to look something like this and bring it right into the 21st century. 11
So the first thing that would already make our web site look a little bit nicer is changing this pretty 12
bland white background to a colored background. 13
So if you head over to your code file and open up index.html, we can inject a little bit of CSS right 14
into the HTML tag that we want to affect. 15
And the tag that we're interested in is the body tag, because we know that most, if not all, of our displayed 16
content on our web site is enclosed inside this body tag. 17
So if we change its background then the entire web site’s background will change too. 18
So inside this body tag we're going to tap into an attribute called style and style takes CSS code inside 19
the quotation marks. 20
So the style that we want to change is the background color. 21
So I'm going to write background-color, and I'm going to write a colon. 22
And after that colon I'm going to specify the color that I want for the body. 23
And let's just start off with a blue color and then we're going to close off this line of CSS code using 24
a semicolon. 25
And now if I hit save and if I go back to my browser, and remember that we're working with the local 26
file, not the one that you might have hosted on GitHub, but this is where our development is going to 27
happen. 28
So if you don't have it up, remember you can simply right click and go to Copy Full Path and paste it in 29
here in order to get to that web site under development. 30
So once you're here then if you hit refresh you'll see our CSS code being implemented, changing the entire 31
background of our web page. 32
Now the question you might have at this stage, beside the question of how did we manage to get our web 33
site looking even uglier than before, 34
just bear with me on that, 35
but the question that most students have is ‘Well, how did you know to use background color and how did 36
you know that blue as a color would work?’. 37
Let's see how we can find out how to do this. 38
So if I head over to Google and we search for ‘change background color using CSS’, and we're going to tag 39
on MDN at the end because that's our preferred documentation, 40
and you can see that the first link that shows up already takes us to the documentation on the background 41
color and this page explains that the background color is a CSS property which sets the background color 42
of a particular element. 43
So we've used this particular line to change the background color of our body HTML element to 44
blue. 45
Now, as it shows, we can also do this using hex values or hexadecimal values, so we can replace this really 46
ugly looking blue with something that is custom, and a really good tool for finding beautiful colors 47
and beautiful color palettes is a website called colorhunt.co. 48
And here you've got professional designers who've curated some of their favorite color palettes and 49
they've provided the hex codes to implement them in your own designs. 50
So you can search by hot or popular. 51
And we're going to look for a nice color palette that is going to work for our particular project. 52
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 53
of light pastel green bluish color and I'm going to replace the word blue with that hex value. 54
And remember whenever you're using hex values it needs to have the pound sign or you might see it as 55
the hashtag sign in front. 56
Now as soon as we add that hex code you'll notice that one of our plugins that we installed in the beginning, 57
the one called pigments, is highlighting that color to us to show us what it'll look like when it's implemented. 58
But we're going to verify that on our website as well. 59
So let's go ahead and hit save and go back to our web site and hit refresh and you can see that beautiful 60
light green color is now showing across our web page. 61
So the other question that you might have is ‘How can I figure out which colors I can use 62
just by specifying the name of it and which ones I have to use as a hex value?’. 63
Well again let's head over to Google and we're going to look for an answer to our query. 64
And I know that I've been banging on about this point but it's really really important because as a 65
fully fledged web developer one of the most important skills is finding and figuring out how to do something 66
that is specific to your needs. 67
So inevitably at some point in your future career you will need to build features or implement things 68
that we haven't ever talked about. 69
And it's important that you really start building up this skill, or figure out what are the best keywords 70
to search for. 71
How do I structure my searches? 72
Which sources am I going to go to, be it Google, Stack Overflow, MDN, in order to figure out how I can 73
do this specific thing that I want to do? 74
And that's why I want to show you my thought process in order to guide you on how you can start doing 75
this for yourself as well. 76
So whenever you come across something that you want to figure out or you want to do that isn't covered 77
in the tutorials I want you to first give it a go looking and seeing if you can figure it out for yourself 78
because this is one of the most important skills that you need to learn as a developer. 79
So let's go ahead and search for CSS colors and if we hit Enter you'll see that Google has picked out 80
this particular table on the MDN web site, and it has keywords and RGB hex values. 81
So let's go and take a look at it in more detail. 82
So this is a page that I recommend you bookmarking even, because it describes the color 83
CSS data type that's available to you when you use CSS. 84
And if you scroll down there's this really useful table that shows you the colors and the keywords 85
that you can use in order to implement these colors in your code without ever having to dive into the 86
hex code. 87
So for example maybe you want the background to be this powder blue right. 88
So you can go ahead and simply copy this keyword and instead of using the hex code we can simply use 89
the word powderblue and if we refresh our web site you can see that that color is automatically rendered 90
because it's recognized as a valid CSS color. 91
So this is a quick and easy way of implementing colors using CSS. 92
Now there's a whole range of other ways that you can change the color using CSS. 93
And I'll leave you to read through this documentation and take a look at some of the other ways or some 94
of the other palettes that you can tap into. Now, heading back to our personal site, 95
the next thing that I want to change is the style of these horizontal rules, and you might realize that 96
there's a little bit of difficulty involved in doing this because as nice as it is modifying the style 97
of a particular HTML element by simply going into the tag and changing the style attribute, it's a 98
little bit cumbersome when you want to do that to many repeated elements, 99
for example our horizontal rules, because I have a total of about four of them, 100
and I would have to write up the CSS code and copy and paste into each and every one of these tags. 101
Now if at some point I decide to change one of these CSS values, say, you know, I actually prefer this 102
light color over this powder blue and I'm going to change it back to that particular hex code then I 103
would have to remember to change it in all four places. 104
And this is very very error prone. 105
So in the next lesson I'm going to show you another way that you can implement CSS code that will apply 106
across the entire web page. 107
And it's by using internal CSS. You can look forward to that in the next lesson. 108
See you then.