All right. 1
So we've already come pretty far in our journey of creating and beautifying this CV web site that we 2
have here. 3
But we're no longer really aspiring to be computer science professors. 4
So we're going to have to take a slightly different path and instead we want to be hired as web developers. 5
Unfortunately we're never going to get hired with a web site that looks like this. 6
So we have to aspire to greater heights. 7
And we want to create a web site that looks and resembles more like a professional personal site with 8
a beautiful interface and a few brief notes about what you can do and how people can contact you. 9
So we're going to pay homage to one of the best personal sites on the Internet which is this web site 10
by Sean Halpin. 11
And for the rest of this module we're going to make a web site that looks more similar to this and less 12
similar to our computer science professors’ CV web sites. 13
So once you’re ready, 14
I have a challenge for you and that is to create a brand new project. 15
So that means you have to create a new folder called CSS - My Site, and you have to create an index.html 16
page inside that folder, and then you're going to add all of that HTML boilerplate code that you 17
will need for any web site and you're going to give your website a title of your name and mine would 18
be Angela Yu for example. 19
And then you’re going to create a css folder and a styles.css file, and then you're going to 20
link up your styles.css file with your html file, and you're going to check to make sure that 21
it works by giving your web site an ugly blue background color or which ever other ugly colors you can 22
think of. 23
It's completely up to you. 24
So pause the video now and complete this challenge. So inside Atom we're going to close off what we were 25
previously working on, 26
be that the CSS bacon fansite or the HTML personal site, 27
if you’ve got any of these open, then just right click and remove it from the left hand pane. Now you're 28
going to go into whichever folder you've decided to store all of your web development projects and you're 29
going to right click and create a new folder that is going to be called 30
CSS - My Site, and you're going to go back to Atom and you're going to add this to the left hand pane by clicking 31
on Add Project Folder. 32
And the one that we're going to pick is that brand new folder that has nothing contained inside. 33
All right. 34
So here's our brand new project folder and I'm going to go into it and create a new file. 35
And this is going to be our home page or our index.html. 36
And inside this brand new html file I'm going to add in the HTML boilerplate code just by using auto 37
suggest and I'm going to give my Web site a title of my name which is Angela Yu. 38
That's me. 39
And now I'm going to create a new folder inside this project folder and it's going to be called css 40
and inside that css folder I'm going to create a new styles.css file. 41
So now I have a style sheet and I'm going to link it up with my html using it as an external stylesheet. 42
So I'm going to insert a link that has a relationship of stylesheet. 43
Now you can also add a type of text/css but this is optional if you want and it doesn't really 44
matter if you have it there or not. 45
Now what does matter though is that you correctly point to where your styles.css exists. 46
So in our case it exists inside a folder called css at the same hierarchical level as our index.html 47
which is the current file we’re inside. 48
And then it's called styles.css. 49
And finally just to check that everything worked out correctly. 50
Let's go inside the body and let's add a background color of say blue which is going to be that pretty 51
awful looking color. 52
But now we can check to make sure that everything worked by right clicking on the index.html and 53
clicking on Copy Full Path then going into Chrome and just pasting that into the browser bar. 54
And there we go. 55
This is our brand new beautiful site that is just a blue background but that means that everything we've 56
done so far has worked out. 57
And you can see our title is showing up up here as well. 58
And I'm going to get rid of this and I'm going to close down this previous site we had back over here 59
and we're now going to focus on working on this new site that we're creating and we're going to try 60
and make it look similar to a professional web designer’s personal site.