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.