All language subtitles for 041 What We_ll Make - Stylised Personal Site.en_US

All right.

So we've already come pretty far in our journey of creating and beautifying this CV web site that we

have here.

But we're no longer really aspiring to be computer science professors.

So we're going to have to take a slightly different path and instead we want to be hired as web developers.

Unfortunately we're never going to get hired with a web site that looks like this.

So we have to aspire to greater heights.

And we want to create a web site that looks and resembles more like a professional personal site with

a beautiful interface and a few brief notes about what you can do and how people can contact you.

So we're going to pay homage to one of the best personal sites on the Internet which is this web site

by Sean Halpin.

And for the rest of this module we're going to make a web site that looks more similar to this and less

similar to our computer science professors’ CV web sites.

So once you’re ready,

I have a challenge for you and that is to create a brand new project.

So that means you have to create a new folder called CSS - My Site, and you have to create an index.html

page inside that folder, and then you're going to add all of that HTML boilerplate code that you

will need for any web site and you're going to give your website a title of your name and mine would

be Angela Yu for example.

And then you’re going to create a css folder and a styles.css file, and then you're going to

link up your styles.css file with your html file, and you're going to check to make sure that

it works by giving your web site an ugly blue background color or which ever other ugly colors you can

think of.

It's completely up to you.

So pause the video now and complete this challenge. So inside Atom we're going to close off what we were

previously working on,

be that the CSS bacon fansite or the HTML personal site,

if you’ve got any of these open, then just right click and remove it from the left hand pane. Now you're

going to go into whichever folder you've decided to store all of your web development projects and you're

going to right click and create a new folder that is going to be called

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

on Add Project Folder.

And the one that we're going to pick is that brand new folder that has nothing contained inside.

All right.

So here's our brand new project folder and I'm going to go into it and create a new file.

And this is going to be our home page or our index.html.

And inside this brand new html file I'm going to add in the HTML boilerplate code just by using auto

suggest and I'm going to give my Web site a title of my name which is Angela Yu.

That's me.

And now I'm going to create a new folder inside this project folder and it's going to be called css

and inside that css folder I'm going to create a new styles.css file.

So now I have a style sheet and I'm going to link it up with my html using it as an external stylesheet.

So I'm going to insert a link that has a relationship of stylesheet.

Now you can also add a type of text/css but this is optional if you want and it doesn't really

matter if you have it there or not.

Now what does matter though is that you correctly point to where your styles.css exists.

So in our case it exists inside a folder called css at the same hierarchical level as our index.html

which is the current file we’re inside.

And then it's called styles.css.

And finally just to check that everything worked out correctly.

Let's go inside the body and let's add a background color of say blue which is going to be that pretty

awful looking color.

But now we can check to make sure that everything worked by right clicking on the index.html and

clicking on Copy Full Path then going into Chrome and just pasting that into the browser bar.

And there we go.

This is our brand new beautiful site that is just a blue background but that means that everything we've

done so far has worked out.

And you can see our title is showing up up here as well.

And I'm going to get rid of this and I'm going to close down this previous site we had back over here

and we're now going to focus on working on this new site that we're creating and we're going to try

and make it look similar to a professional web designer’s personal site.