Hi everybody, welcome back. In the past, we've done code
together segments, where I've coded, you've coded along with me, and we've
made lots of little mistakes together. Today, I really want to
do a code review instead. I want you to sit back and look at
some of the code that I've written and see how the little things
that we've been learning are adding up together to
create more complex webpages. So let's start with some HTML. Over here, I have code that's just going
to create a bunch of different divs. The one thing that might be new that
you haven't seen before is this idea of tab index. What the tab index does is it lets the
browser know that if somebody is tabbing through your page, you actually want to put different
elements in focus in a different order. So in this case, the first thing would
be A, and then C, and then B, etc. It's just one more level of
accessibility that I wanted to introduce to you in our code. The only other thing I wanted you to know
in this HTML is that the very last div has a class animate in it. I've made this one a little bit different
so that you can look at transitions and transforms in action. So, let's go ahead and look at the CSS,
and play with the browser. Now, when we start at the top, you can
see that I've just dialed the div so that they're little boxes where
you can see the contents, and it's not all too squished together. The one thing that you
may not have used yet yourself in your code is this idea
of transition two seconds ease. This is going to let the browser
know that when we change states, we want to take about two seconds and
ease it in. But first, let's look at the focus. In my focus,
I say change the background color. So now, when I go to my browser, I'm gonna start tabbing through
the different elements. And when I do,
you can see that they all light up. I'm gonna refresh the page, because the
one that I expected to go first didn't. That's because I'd been tabbing
before we even started typing. So here we go. A changes color, and then C, and then B. This is you giving the user power to jump
to the most important sections first. All right, so after focus,
let's talk about hover. Now when hover comes into case, what I'm
saying is make the width 200 pixels, it was 100, and
change the background color. So let's take a look. I'm gonna highlight over C right here,
and then B, and then A. And you can see it's a very nice,
smooth transition. But one of the things I do want you to
notice is that when I'm not hovering over anything, we actually have
A through F on the top line and then G through I on the bottom. When you start to go a little bit too
crazy changing the size of things dynamically, you can throw
everything off position. So make sure you use this sparingly. All right, let's get to the cool one,
the last one. If you remember, I made one div, and I set it to be animated because
I used the animate class. Right now, the only difference is the
background color is a little bit green, but I want to show you what
happens when I hover over it. When I do, I'm gonna kick off
a transform where I'm gonna say rotate this 360 degrees. And in addition, instead of having an
opacity of 0.4, which means kinda blur it out, clear it out a little bit,
set it to the full color. Here we go. I think that's pretty cool. We rotated it. When we go off the hover, it rotates back. These are the kind of fun things
that you can add to your page when you're first learning how to code
that really give you this sense of, hey, I'm doing it,
I'm making things change. So what I'd really encourage you to do now
is go back, review the transition lecture, review the transform lecture,
make sure and see if those concepts now make a little bit more sense
that you've seen the code in action. And I hope you'll play with this code,
change the values, and really have some fun with it. So good luck.