All right, so here we are,
with a blank Visual Studio Code open.
I've just created a folder called test, and nothing's in here.
Okay, so let's start by just creating our HTML.
This is very, very easy.
This is the easiest starting point.
Okay, so what do we want to do?
Well, yes, we want an HTML template. Within our HTML
we want a <head> section.
Head section.
And within here, let's just link to our CSS file,
right?
Uh, yeah, let's call it styles.css.
We haven't created it yet.
styles.css.
There you go.
We can just leave it empty for now, but we know it's there.
Then I want to set up our body. And within our body, I want us to separate the default checkboxes to
the custom checkboxes.
So firstly, default checkbox styling
applied by the browser.
This is not us.
How do we do that?
Well, let's just wrap it in h1 tags, and we can call this default checkboxes. Pretty straightforward.
There's our h1.
Now we can actually set up our checkboxes themselves.
I want to wrap the labels inline - it's just quicker,
we don't need a "for" attribute.
I do want to apply a class of default.
And I'm doing this so we can later style these.
Um, this can be our options, right?
So this can be option number one.
And of course we need an input of type checkbox.
We don't need a name or ID because we are applying default styling.
So let's just have a look at this with Live Server.
Live Server.
There we go.
Default checkboxes.
And there's the one.
You can toggle it off and on.
But remember what I said?
I wanted the first one to be checked by default.
How do we do that?
I gave you a clue.
I said that there's an attribute.
That's right,
it's called the "checked" attribute.
So if we do this, go back to the browser refresh, we can see it's checked.
And this checked attribute, by the way, is a boolean attribute.
It's either there or it's not.
So we could do this.
It does the same thing, but we don't have to.
And I'm always a fan of writing less if we can get away with it. And here we can.
So this is literally how I would set it up.
And we just want a few more, don't we?
So let's just copy this label with the checkbox.
This one is number two, and you guessed it, that's number three.
Let's save, go to the browser ...
oh, but of course, we don't want the checked attribute on all of them.
There we go.
Let's go to the browser.
And here we go.
How awesome is this?
But, you will notice in the assignment I didn't have the checked items running horizontally, did I?
They were below each other.
So how can we do that?
Very, very simple with CSS.
Do you know what it is?
It comes down to the display property in CSS.
We don't want these displayed inline, next to each other.
We want them displayed as a block.
Meaning each item,
each element
we want to take up an entire block on the page.
So all we have to do is go to our editor, go to the CSS file, target the default class
remember, if we go to our HTML,
we've given each label a class of default.
That's all I'm doing here.
And then we want to display:block.
We save this,
go back to our browser now.
Boom ðŸ’¥.
How cool is this?
So this is the first part of the solution.
Now I want to start styling our custom checkboxes.
Let's get into it.
In order to do that, let's go to our editor, and it's time to style our custom checkboxes.
Custom checkboxes.
And the HTML is going to be very, very simple.
What do I want to do? Well, firstly, let's set up a header called Custom Checkboxes.
There we go.
And now I want to, of course, include a label.
And this time, instead of giving it a class of default, I want to give it a class of custom, because
this is, you know, we're going to apply custom CSS styling to this.
Of course, in here I want to include our input of type checkbox.
And we should have a name.
But you know what,
for this example, we don't need a name because I'm not concerned about submitting it to a server.
And here we do want the default to be checked, right?
Because this is the very first one.
And of course, we need the number one. Before I copy and paste this block of code for the others,
there's one other element I want to put here, and I'm going to be putting a span element.
The reason I'm doing that, is remember I gave you a bit of a clue in the introduction to this kind of
challenge, and that was in order to create our own custom checkboxes, we have to remove the styling
that the browser automatically applies to a checkbox.
And that means we have to create a new style, and I'm going to create that new style in a new element.
We could have used a div element, we could have used any element we wanted.
I'm just using a span element. And you'll see how it works shortly,
but I just wanted to give you the heads up.
There's our input and as I just mentioned, I want to include a span element.
We don't have to have any content inside the span.
We're going to be creating this content entirely with CSS.
I just want to give it a class so we can target it with CSS and let's give it a class of
checkmark.
How's that?
And this, my dear students, is a brilliant time to copy and paste,
right.
I think we did four on the challenge video.
Two, three.
Four.
And, you know, in practice this would be two, option three and option four.
And we don't need the checked attribute on these.
Save this.
Go to the browser.
Wow.
And there we go.
You can see that we're getting there.
Okay, But now it's time to go to our CSS file and spazz this up.
We are almost done
so please, please stick with me.
I know it can be quite daunting, all of this.
It can get quite confusing, but that's what I'm here for.
Our HTML is done. And all we have to do now, is we have to go to our styles.css file.
And you know what,
let me put them side by side
then you can kind of see the effects as we go along.
First thing I want to do is let's change this h1 color to rgb()
136, 0, 0.
There we go.
A nice maroon color.
How's that?
First step is is I want to hide the browser's ugly default checkboxes.
Okay, so let's do that.
We're going to target the custom
class.
And we want to target the input. And we want to set its height to zero and its width to zero.
We save that.
And you can see those checkboxes,
those little squares have disappeared.
That's what we want.
Let me put a comment here, just so you know what's going on.
Hide the browser's ugly
default checkbox.
That's what we've done.
And right now it's pointless.
You know, it's useless.
We can't use it.
But that's okay.
We're going to design our own one now.
And let's start. Our custom checkbox styling.
Okay.
What do we want here?
Well, we want to target the custom class,
right.
If I go to our index file, you can see we've put that custom class on every single label.
Okay, so that's what we're doing.
We're targeting that custom class
now. Firstly, display should be block
so they go beneath each other. And let's apply some padding.
Padding-left: 35px.
The reason I'm giving padding-left is so that we can create our custom checkbox to the left, right.
And then you can see that they are pretty much on top of each other.
So let's apply a margin to the bottom of each item.
Margin bottom.
Let's say 12 pixels.
How's that?
Yep, that's better.
And then I want, you know, when I hover the mouse over each checkbox, I want the mouse to become
a pointer, just a visual cue to the user that it is actually a clickable button.
So let's target the cursor property, and change that to pointer.
Very, very simple.
Now when I hover over each one, it changes to little hand.
It's all these little things that really make a big difference.
Now what I want to do, is I want to change the font size.
Let's make it slightly bigger.
Should we say 20 pixels?
Yeah, that looks good.
Okay.
I think.
I think that's it for now.
I think that's looking good.
What's the next step?
Well, the next step is going to be creating creating our custom checkbox square.
So let's get cracking.
How do we do that?
Well, if we go to our index file, you can see that we've included all these spans.
It's got a class of checkmark and nothing is in it.
And this span is what I want to start styling.
So let's do it.
Let's target our checkmark class
and let's start applying styling to that.
Let's give it firstly a background-colour
of ...
rgb()
134, 134, 134.
Just a light gray, and let's give it a width and a height.
And the reason we can't see it is we need to apply a position of absolute to all of this.
And there we go.
There are our boxes.
You know what I want to do, though?
I don't want them to the right, do we?
We want to actually push these all to the left.
So let's just say left is zero.
There we go.
But if I do this, can you see that those square boxes are literally right at the left of the entire
viewport?
I don't want that.
I want it to be relative to its parent element, and that is this custom class.
So in the custom class, and if we go to the index file, you can see here the <label> is the parent element,
right,
with class of custom. I want this to be what it's relative to.
So on this class, I want to add a position of relative and then it should push those squares to the
right.
There we go.
How cool is that?
So it's literally to the left of this entire parent element, not the entire viewport.
That's important.
So how cool is this?
You can already see our checkboxes are starting to take shape.
Okay.
But, you know, let's start working with the hover.
And in order to do that, we can target the CSS pseudo class of :hover.
So on mouse over, add a gray background color.
How's that?
How do we do that?
Well, let's target our custom class.
And yes, we want to target its :hover state.
And then we want to affect the checkmark,
checkmark class when that happens, and we just want to change its background-color.
Let's do #ccc.
How does that look?
So let's take our mouse ðŸ–±,
let's hover over one.
Hover over two, three and four.
How cool is that?
Very, very easy, right?
Very, very intuitive.
What's next?
Well, when the checkbox is checked, I want to add a blue background.
You'll see how easy this is as well.
All we need to do
well, let me do a comment first.
When the checked
state is on,
add a blue background.
How do we do that?
Can you try?
Give it a go before I show you the solution.
All right.
Well, it's very easy.
All we have got to do is target our custom class, because that's our label, our wrapper.
And within there, we want to target the input when it's checked
state is on. But we don't want to target the actual input element itself when it's checked.
Because remember, we hid it.
We set its height and width to zero.
So what we want to do, is we want to select all the descendants that have a class of checkmark, right.
That's what we want to do.
Those are all those spans, for example.
And then all we want to do is change its background-color
to what?
To a funky, nice blue color ... #2196F3.
And that's cool.
That's cool.
And we can toggle, we can refresh the page.
How awesome is this?
How cool is this?
Oh man, I have a lot of fun doing this.
Let's refresh the page now.
Okay, we could leave it here, but you might be thinking, "Clyde, I really want to create a little
check, checkmark inside that box."
How do we do that?
Well, in order to add that little check box or that check âœ” item, I'm going to be using a pseudo element. (background music playing)