1 00:00:00,450 --> 00:00:08,130 All right, so we've really come pretty far in our journey of creating and beautifying this CV website 2 00:00:08,130 --> 00:00:13,590 that we have here, but we're no longer really aspiring to be computer science professors. 3 00:00:13,830 --> 00:00:16,620 So we're going to have to take a slightly different path. 4 00:00:16,950 --> 00:00:21,000 And instead, we want to be hired as web developers. 5 00:00:21,360 --> 00:00:24,810 Unfortunately, we're never going to get hired with a website that looks like this. 6 00:00:25,110 --> 00:00:27,570 So we have to aspire to greater heights. 7 00:00:27,960 --> 00:00:35,160 And we want to create a website that looks and resembles more like a professional personal site with 8 00:00:35,160 --> 00:00:41,490 a beautiful interface and a few brief notes about what you can do and how people can contact you. 9 00:00:41,670 --> 00:00:48,390 So we're going to pay homage to one of the best personal sites on the internet, which is this website 10 00:00:48,390 --> 00:00:49,440 by Sean Halpin. 11 00:00:49,440 --> 00:00:55,620 And for the rest of this module, we're going to make a website that looks more similar to this and 12 00:00:55,620 --> 00:00:59,760 less similar to our computer science professor's CV website. 13 00:00:59,970 --> 00:01:07,020 So once you're ready, I have a challenge for you and that is to create a brand new project. 14 00:01:07,470 --> 00:01:14,220 So that means you have to create a new folder called CSS - My Site, and you have to create an index.html 15 00:01:14,220 --> 00:01:16,350 page inside that folder. 16 00:01:16,830 --> 00:01:21,810 And then you're going to add all of that HTML boilerplate code that you will need for any website, 17 00:01:22,170 --> 00:01:24,930 and you're going to give your website a title of your name. 18 00:01:24,930 --> 00:01:25,800 So mine would be 19 00:01:26,040 --> 00:01:27,570 Angela Yu for example. 20 00:01:28,890 --> 00:01:34,920 And then you're going to create a CSS folder and a styles.css file, and then you're going to 21 00:01:34,920 --> 00:01:36,710 link up your styles.css 22 00:01:36,710 --> 00:01:42,690 file with your HTML file, and you're going to check to make sure that it works by giving your 23 00:01:42,690 --> 00:01:48,040 website an ugly blue background color or whichever other ugly colors you can think of. 24 00:01:48,420 --> 00:01:49,740 It's completely up to you. 25 00:01:50,070 --> 00:01:52,980 So pause the video now and complete this challenge. 26 00:01:54,980 --> 00:02:01,430 So inside, Atom, we're going to close off what we were previously working on, be that the CSS Bacon 27 00:02:01,430 --> 00:02:07,850 Fansite or the HTML personal site. If you've got any of these open then just right-click and remove 28 00:02:07,850 --> 00:02:09,980 it from the left hand pane. 29 00:02:10,550 --> 00:02:16,460 Now you're going to go into whichever folder you've decided to store all of your web development projects 30 00:02:16,850 --> 00:02:22,400 and you're going to right-click and create a new folder that is going to be called CSS - 31 00:02:22,580 --> 00:02:23,390 My Site. 32 00:02:25,150 --> 00:02:31,660 And you're going to go back to Atom, and you're going to add this to the left-hand pane by clicking 33 00:02:31,660 --> 00:02:33,070 on Add Project Folder. 34 00:02:33,280 --> 00:02:37,840 And the one that we're going to pick is that brand new folder that has nothing contained inside. 35 00:02:38,560 --> 00:02:38,880 All right. 36 00:02:38,890 --> 00:02:44,530 So here's our brand new project folder, and I'm going to go into it and create a new file. 37 00:02:44,900 --> 00:02:48,310 And this is going to be our homepage or our index.html. 38 00:02:48,820 --> 00:02:56,590 And inside this brand new HTML file, I'm going to add in the boilerplate code just by using auto-suggest. 39 00:02:57,010 --> 00:03:02,010 And I'm going to give my website a title of my name which is Angela Yu, 40 00:03:02,080 --> 00:03:02,650 that's me. 41 00:03:03,100 --> 00:03:11,490 And now I'm going to create a new folder inside this project folder, and it's going to be called CSS. 42 00:03:11,890 --> 00:03:17,530 And inside that CSS folder, I'm going to create a new styles.css file. 43 00:03:18,760 --> 00:03:25,060 So now I have a stylesheet, and I'm going to link it up with my HTML using it as an external style 44 00:03:25,060 --> 00:03:25,330 sheet. 45 00:03:25,330 --> 00:03:29,860 So I'm going to insert a link that has a relationship of stylesheet. 46 00:03:30,340 --> 00:03:34,470 Now you can also add a type of text/ 47 00:03:34,700 --> 00:03:40,660 css, but this is optional if you want, and it doesn't really matter if you have it there or not. 48 00:03:41,260 --> 00:03:46,660 Now what does matter, though, is that you correctly point to where your styles.css exists. 49 00:03:47,320 --> 00:03:54,620 So in our case, it exists inside a folder called CSS at the same hierarchical level as our index.html 50 00:03:55,120 --> 00:03:59,020 which is the current file we're inside and then it's called styles. 51 00:03:59,020 --> 00:03:59,590 css. 52 00:04:00,250 --> 00:04:06,220 And finally, just to check that everything worked out correctly, let's go inside the body and let's 53 00:04:06,220 --> 00:04:13,990 add a background color of, say, blue, which is going to be that pretty awful looking color. 54 00:04:14,440 --> 00:04:20,380 But now we can check to make sure that everything worked by right-clicking on the index.html and 55 00:04:20,380 --> 00:04:27,280 clicking on copy full path, then going into chrome and just pasting that into the browser bar. 56 00:04:27,670 --> 00:04:28,650 And there we go. 57 00:04:28,660 --> 00:04:35,110 This is our brand new, beautiful site that is just a blue background, but that means that everything 58 00:04:35,110 --> 00:04:39,880 we've done so far has worked out, and you can see our title is showing up, up here as well. 59 00:04:40,150 --> 00:04:46,210 And I'm going to get rid of this, and I'm going to close down this previous site we had back over here 60 00:04:46,210 --> 00:04:51,850 and we're now going to focus on working on this new site that we're creating and we're going to try 61 00:04:51,850 --> 00:04:56,110 and make it look similar to a professional web designer's personal site.