1 00:00:08,712 --> 00:00:10,600 Hi everybody welcome back. 2 00:00:10,600 --> 00:00:13,010 It's time for us to start coding. 3 00:00:13,010 --> 00:00:15,690 One of the things I've noticed over the past couple years of teaching 4 00:00:15,690 --> 00:00:19,270 is that students really differ in the way that they jump in and 5 00:00:19,270 --> 00:00:21,390 handle different types of coding classes. 6 00:00:21,390 --> 00:00:25,130 Some will sit down at the computer, never read the book and just hack, 7 00:00:25,130 --> 00:00:26,290 and hack, and hack. 8 00:00:26,290 --> 00:00:30,290 Some of you may be a little bit guilty of doing all the readings, listening to all 9 00:00:30,290 --> 00:00:34,520 lectures, but never actually trying out any of the things we've talked about. 10 00:00:34,520 --> 00:00:36,450 So that's what these homeworks are for. 11 00:00:36,450 --> 00:00:40,510 A chance for you to finally go through and put down some of this code and 12 00:00:40,510 --> 00:00:43,900 see what goes on when you try to apply styling to your HTML. 13 00:00:44,930 --> 00:00:48,530 So the objective for this homework assignment is for you to show me that you 14 00:00:48,530 --> 00:00:53,870 can write one CSS file that can go and style three different HTML files. 15 00:00:55,560 --> 00:00:58,810 I'm gonna go ahead and show you some examples of our before and after for 16 00:00:58,810 --> 00:00:59,890 this assignment. 17 00:00:59,890 --> 00:01:01,670 I've put the links here on the side, but 18 00:01:01,670 --> 00:01:05,540 it's really going to be much clearer when I show you the homework in action. 19 00:01:05,540 --> 00:01:07,410 So let's take a look at it. 20 00:01:07,410 --> 00:01:08,380 When we start, 21 00:01:08,380 --> 00:01:13,270 I'm going to give you three HTML files that are really not well styled. 22 00:01:13,270 --> 00:01:14,270 They start off, 23 00:01:14,270 --> 00:01:19,560 they have a navigation, they have three very large pictures, some are smaller. 24 00:01:19,560 --> 00:01:21,450 And then they have the content. 25 00:01:21,450 --> 00:01:28,640 All three pages that you'll look at, home, teams, and history have different content. 26 00:01:28,640 --> 00:01:32,780 What I want you to do is write your own CSS rules that will take 27 00:01:32,780 --> 00:01:37,780 these type of pages, and turn it into something that looks like this. 28 00:01:37,780 --> 00:01:40,350 Now, I know this isn't a huge jump, but 29 00:01:40,350 --> 00:01:42,870 this is exactly how i want you to start coding. 30 00:01:42,870 --> 00:01:46,560 I want you to make small, incremental changes that can take you from something 31 00:01:46,560 --> 00:01:50,040 that's hard to read to something that's much easier to read. 32 00:01:50,040 --> 00:01:53,150 So let's go ahead and step through the different things that you'll need to 33 00:01:53,150 --> 00:01:55,300 change in order to achieve this separate look. 34 00:01:56,830 --> 00:02:01,540 The most important thing to understand is that you must leave the HTML alone. 35 00:02:01,540 --> 00:02:03,530 I don't want you to change it at all, 36 00:02:03,530 --> 00:02:08,610 instead I only want you to style things and edit things within the style sheet. 37 00:02:08,610 --> 00:02:11,240 And the things that you're gonna need to add are styles for 38 00:02:11,240 --> 00:02:15,990 the header, the headings, the section, the links and the images. 39 00:02:15,990 --> 00:02:18,490 So, let me go through and show you exactly what you need to look at. 40 00:02:19,530 --> 00:02:21,580 For your header, it's pretty straightforward. 41 00:02:21,580 --> 00:02:24,110 I want you to go in and I want you to add a background color. 42 00:02:25,670 --> 00:02:30,070 For your headings, both h1 and h2, I want you to change the font color. 43 00:02:30,070 --> 00:02:33,080 Now remember, this is different from the background color. 44 00:02:33,080 --> 00:02:35,100 It's the color that the text shows up in. 45 00:02:36,130 --> 00:02:40,630 Next, I want you to make sure that all the headings are displayed in capital letters. 46 00:02:40,630 --> 00:02:42,840 So, if you go back, we'll take a quick look. 47 00:02:43,840 --> 00:02:48,170 You can see that watch your head and ultimate frisbee are in capital letters, 48 00:02:48,170 --> 00:02:53,320 while in the original HTML version, they're in lower case. 49 00:02:53,320 --> 00:02:56,750 So I want you to use CSS to make that change. 50 00:02:56,750 --> 00:02:58,970 The next thing I want you to do is just for 51 00:02:58,970 --> 00:03:01,360 the h1 heading I want you to center the text. 52 00:03:02,450 --> 00:03:06,337 Next make one quick change to the section part of your HTML. 53 00:03:06,337 --> 00:03:08,551 I want you to style the different section so 54 00:03:08,551 --> 00:03:12,379 it has a different background color from the other elements in your page. 55 00:03:12,379 --> 00:03:14,090 Next, let's take a look at the links. 56 00:03:14,090 --> 00:03:16,560 The changes you're gonna make here are very subtle. 57 00:03:16,560 --> 00:03:19,500 They're not very obvious if I didn't specifically tell you what 58 00:03:19,500 --> 00:03:20,670 you're looking for. 59 00:03:20,670 --> 00:03:24,050 And what I want you to do is I want you to change the background color, and 60 00:03:24,050 --> 00:03:25,940 the font color, for your links. 61 00:03:25,940 --> 00:03:28,960 After you've done that, go in and center the text, 62 00:03:28,960 --> 00:03:32,880 similar to the way that you're going to the center the texts for the h1 headings. 63 00:03:32,880 --> 00:03:37,539 Finally, the last thing that really kinda messes up our HTML page initial example is 64 00:03:37,539 --> 00:03:40,046 these huge pictures that just get in the way. 65 00:03:40,046 --> 00:03:44,178 So for right now, since we haven't talked about the best way to style images, 66 00:03:44,178 --> 00:03:46,505 I want you to just remove them from the page. 67 00:03:46,505 --> 00:03:50,317 But remember, this might be the trickiest part of the whole assignment because I 68 00:03:50,317 --> 00:03:52,400 don't want you to change the html. 69 00:03:52,400 --> 00:03:54,380 I want those pictures to be there. 70 00:03:54,380 --> 00:03:58,460 I just want you to use CSS3 to remove them from the page. 71 00:03:58,460 --> 00:04:02,740 So I hope between looking through this example and looking online, and looking at 72 00:04:02,740 --> 00:04:06,539 my before and after shots, that you'll be able to do this homework assignment. 73 00:04:07,650 --> 00:04:10,850 When you're done, we're going to be using peer grading. 74 00:04:10,850 --> 00:04:14,660 When we do this, grades are gonna be based on basically how well you were able to 75 00:04:14,660 --> 00:04:15,950 finish what we were doing. 76 00:04:15,950 --> 00:04:17,170 When I talk about aesthetics, 77 00:04:17,170 --> 00:04:20,780 I'm talking about did you pick pretty background colors and font colors. 78 00:04:20,780 --> 00:04:22,160 We don't really care about this. 79 00:04:22,160 --> 00:04:23,379 This is our first homework assignment. 80 00:04:23,379 --> 00:04:26,047 I really just want you to feel only success. 81 00:04:26,047 --> 00:04:28,921 However, proper standards do apply. 82 00:04:28,921 --> 00:04:33,920 And what I mean by that is don't use color names, use hexadecimal or 83 00:04:33,920 --> 00:04:37,640 RGB, and don't put all your rules on one line. 84 00:04:37,640 --> 00:04:41,290 Make sure your CSS style sheet is easy to read. 85 00:04:41,290 --> 00:04:45,120 Other than the styles that I listed please don't change other things for right now. 86 00:04:45,120 --> 00:04:46,790 It makes it much harder to grade. 87 00:04:46,790 --> 00:04:47,640 But don't worry. 88 00:04:47,640 --> 00:04:51,250 As we go through this course you will have the chance to put in your own unique 89 00:04:51,250 --> 00:04:53,070 looks as your styling elements. 90 00:04:53,070 --> 00:04:55,540 For right now all I can say is good luck and 91 00:04:55,540 --> 00:04:57,950 make sure you go on those discussion boards if you have any questions.