1 00:00:08,656 --> 00:00:11,030 Hi everybody, welcome back. 2 00:00:11,030 --> 00:00:15,420 In the past, we've done code together segments, where I've coded, 3 00:00:15,420 --> 00:00:19,240 you've coded along with me, and we've made lots of little mistakes together. 4 00:00:19,240 --> 00:00:22,150 Today, I really want to do a code review instead. 5 00:00:22,150 --> 00:00:25,960 I want you to sit back and look at some of the code that I've written and 6 00:00:25,960 --> 00:00:28,560 see how the little things that we've been learning 7 00:00:28,560 --> 00:00:32,330 are adding up together to create more complex webpages. 8 00:00:32,330 --> 00:00:34,730 So let's start with some HTML. 9 00:00:34,730 --> 00:00:39,520 Over here, I have code that's just going to create a bunch of different divs. 10 00:00:39,520 --> 00:00:43,840 The one thing that might be new that you haven't seen before is this idea of 11 00:00:43,840 --> 00:00:45,510 tab index. 12 00:00:45,510 --> 00:00:49,550 What the tab index does is it lets the browser know that if somebody is tabbing 13 00:00:49,550 --> 00:00:50,860 through your page, 14 00:00:50,860 --> 00:00:55,550 you actually want to put different elements in focus in a different order. 15 00:00:55,550 --> 00:01:00,770 So in this case, the first thing would be A, and then C, and then B, etc. 16 00:01:00,770 --> 00:01:03,650 It's just one more level of accessibility that I wanted to introduce 17 00:01:03,650 --> 00:01:05,340 to you in our code. 18 00:01:05,340 --> 00:01:10,710 The only other thing I wanted you to know in this HTML is that the very last div 19 00:01:10,710 --> 00:01:12,680 has a class animate in it. 20 00:01:12,680 --> 00:01:16,560 I've made this one a little bit different so that you can look at transitions and 21 00:01:16,560 --> 00:01:18,500 transforms in action. 22 00:01:18,500 --> 00:01:21,590 So, let's go ahead and look at the CSS, and play with the browser. 23 00:01:24,980 --> 00:01:28,450 Now, when we start at the top, you can see that I've just dialed the div so 24 00:01:28,450 --> 00:01:31,210 that they're little boxes where you can see the contents, and 25 00:01:31,210 --> 00:01:33,250 it's not all too squished together. 26 00:01:33,250 --> 00:01:35,400 The one thing that you may not have used yet 27 00:01:35,400 --> 00:01:40,540 yourself in your code is this idea of transition two seconds ease. 28 00:01:40,540 --> 00:01:44,360 This is going to let the browser know that when we change states, 29 00:01:44,360 --> 00:01:47,280 we want to take about two seconds and ease it in. 30 00:01:47,280 --> 00:01:50,050 But first, let's look at the focus. 31 00:01:50,050 --> 00:01:53,280 In my focus, I say change the background color. 32 00:01:53,280 --> 00:01:55,130 So now, when I go to my browser, 33 00:01:55,130 --> 00:01:58,650 I'm gonna start tabbing through the different elements. 34 00:01:58,650 --> 00:02:02,320 And when I do, you can see that they all light up. 35 00:02:02,320 --> 00:02:06,660 I'm gonna refresh the page, because the one that I expected to go first didn't. 36 00:02:06,660 --> 00:02:10,030 That's because I'd been tabbing before we even started typing. 37 00:02:10,030 --> 00:02:11,260 So here we go. 38 00:02:11,260 --> 00:02:14,400 A changes color, and then C, and then B. 39 00:02:14,400 --> 00:02:20,070 This is you giving the user power to jump to the most important sections first. 40 00:02:20,070 --> 00:02:24,270 All right, so after focus, let's talk about hover. 41 00:02:24,270 --> 00:02:29,350 Now when hover comes into case, what I'm saying is make the width 200 pixels, 42 00:02:29,350 --> 00:02:32,600 it was 100, and change the background color. 43 00:02:32,600 --> 00:02:34,060 So let's take a look. 44 00:02:34,060 --> 00:02:39,550 I'm gonna highlight over C right here, and then B, and then A. 45 00:02:39,550 --> 00:02:42,790 And you can see it's a very nice, smooth transition. 46 00:02:42,790 --> 00:02:46,060 But one of the things I do want you to notice is that when I'm not hovering over 47 00:02:46,060 --> 00:02:50,180 anything, we actually have A through F on the top line and 48 00:02:50,180 --> 00:02:52,090 then G through I on the bottom. 49 00:02:52,090 --> 00:02:55,410 When you start to go a little bit too crazy changing the size of things 50 00:02:55,410 --> 00:02:58,520 dynamically, you can throw everything off position. 51 00:02:58,520 --> 00:03:00,330 So make sure you use this sparingly. 52 00:03:01,372 --> 00:03:03,680 All right, let's get to the cool one, the last one. 53 00:03:03,680 --> 00:03:06,360 If you remember, I made one div, and 54 00:03:06,360 --> 00:03:10,280 I set it to be animated because I used the animate class. 55 00:03:10,280 --> 00:03:15,185 Right now, the only difference is the background color is a little bit green, 56 00:03:15,185 --> 00:03:18,622 but I want to show you what happens when I hover over it. 57 00:03:18,622 --> 00:03:23,328 When I do, I'm gonna kick off a transform where I'm gonna say 58 00:03:23,328 --> 00:03:25,603 rotate this 360 degrees. 59 00:03:25,603 --> 00:03:30,314 And in addition, instead of having an opacity of 0.4, which means kinda blur it 60 00:03:30,314 --> 00:03:34,050 out, clear it out a little bit, set it to the full color. 61 00:03:34,050 --> 00:03:34,550 Here we go. 62 00:03:37,061 --> 00:03:38,680 I think that's pretty cool. 63 00:03:38,680 --> 00:03:40,060 We rotated it. 64 00:03:40,060 --> 00:03:42,960 When we go off the hover, it rotates back. 65 00:03:42,960 --> 00:03:45,990 These are the kind of fun things that you can add to your page when 66 00:03:45,990 --> 00:03:48,980 you're first learning how to code that really give you this sense of, 67 00:03:48,980 --> 00:03:51,840 hey, I'm doing it, I'm making things change. 68 00:03:51,840 --> 00:03:57,070 So what I'd really encourage you to do now is go back, review the transition lecture, 69 00:03:57,070 --> 00:04:01,330 review the transform lecture, make sure and see if those concepts 70 00:04:01,330 --> 00:04:05,040 now make a little bit more sense that you've seen the code in action. 71 00:04:05,040 --> 00:04:07,730 And I hope you'll play with this code, change the values, and 72 00:04:07,730 --> 00:04:09,100 really have some fun with it. 73 00:04:09,100 --> 00:04:09,740 So good luck.