So in this video, we're gonna create a website that allows us to visually create box shadows instead of having to manually create them.

So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle.

And my job is to simplify the wood for you so you can start building your dream project sooner.

So that sounds interesting.

Make sure you subscribe to the channel for more videos just like this not to get started.

I have the final version of our project on the right, and you can see when I update any of these numbers.

This box shadow is actually updating based on all of our different values.

We can even modify the color, for example, of the shadow or of the box.

Or we can even change the background color if we see fit.

So we have complete customization over what our shadow looks like.

And now to get started, I just have a blank project open and visual studio code.

We're gonna need to create first and html page, then a CSS page.

And then lastly, we're gonna need some form of javascript.

So we're gonna also need a script here.

So let's get started with the HTML because this is going to be the easiest thing.

And if we just hit exclamation point, enter generates old a boilerplate for us that we can link in our style sheet, which is stiles dot CSS and we're also going to link in our script tag, which is script dot Js and we're just gonna make sure to defer this so it loads after the rest of our body content.

Also, let's just give this a title here.

We're just gonna call it to Fox Shadow Gooey just like that.

And now in the body, we can get working on creating the elements we're gonna need to create this You I on the right.

The first thing that we're obviously going to need is a square for our box, and we're just gonna give that an I D of box.

So now we have a div with an idea of box which is going to represent our box in the middle.

And in order to get this box to be centered inside of our screen, we're gonna wrap it inside of a container.

So we're gonna use a box container class Div, and we're gonna put the box inside of that Div.

This is so that we can easily center this using flex box later.

The next thing we're gonna need is this side war.

So let's create a sidebar.

And if you're confused, how I'm creating classes by just typing a period and then hitting enter.

I have an entire video on that topic, which you confined in the cards and the description down below.

Now to continue on with our sidebar instead of here.

We have a bunch of different labels and inputs, and we also have this divider line.

So let's get started first by adding in a label, and this label is going to be four x position and it's just going to have the label of X.

Then we're gonna have an input, which is going to be a number input, which is going to have a name of exposition, and it's going to have an I d.

Of X position.

Now we're gonna have to copy this down a bunch of additional times.

So it's just copy this label in this position and we're going to do the same thing.

But this is going to be for a wide position.

It's going to have a label here of why, and the name and the I d are both going to be y position.

Next, we're gonna do another input here.

This one is going to be for our bowler.

So it's just make sure you change this to be for a blur.

Our label is Blair hopes not Blue.

Where and our name and our i d are all going to be the exact same of Blur just like that.

What's copy this down again?

We're gonna do this first spread.

Make sure this says spread here and there we go.

We ever spread value done.

And the next thing we can work on those are actual color.

So we're gonna have another label here.

This one's gonna be for Shadow.

It's gonna have a label of shadow and what we're gonna do inside of this label here, we're gonna have a input which is going to be a type of color, and it causes that nice color picker that you saw on the right hand side.

And we click on this this fancy color picker that's by using type of color and we're gonna set this name to be shadow, color and the I d to be shadow color.

And we're also gonna make sure our four is also shadow color.

Now it's copy that down two more times because we're gonna have our box color.

This is just going to stay here box and make sure we replace all these shadows with box color and again appear we're gonna have background color.

Let's just move this down below our box.

It's that it's easier to work with their radio.

So this here is going to be our background.

And let's make sure we change this to background change this to background color and also this one to back on color.

And now if we open this up with live server over on the right hand side, he'll see it pop up in just a little bit.

You see, we have our X y, all of our different inputs as well as our different color pickers.

So everything is showing up there by default.

Obviously, our box is not showing up because it's just an empty def.

Right now, we don't actually have any with her height inside that the last thing we have left to do is add in this horizontal line.

We're just gonna create a div called divider.

And that divider, def is what's going to represent this horizontal line here which divides our top and bottom content.

This top section is all for the box shadow and his bottom section is extra things such as the color of her box and the color of our background.

And that's all of our HTML for now that we're going to need.

So it's actually jumped into styling this HTML.

The first thing that I want to get started with is just to change our box sizing on every element to be border box makes working with our width and height so much easier and then in our body, let's remove all of our margin, set that to zero and then work on how we're actually going to lay out our box and our sidebar We're gonna use Flux Box to do that, so it'll be side by side next to each other.

We're gonna change this to display of flexed, and we're also gonna make sure that the minimum height is going to be set to 100 view height that just ensures that our body is going to take up 100% of the height, which will make center in this box much easier later on so that we have that done.

You see, our margins were removed on our body, which is great.

The next thing that we're going to work on is actually pushing our sidebar over to the side and building out our box.

So we have our box container and we're gonna have our sidebar here.

And our box container we want to Philip is much available.

Place space as possible.

So we're gonna set this to flex grow of one.

And as you can see right now, nothing happens because there's no additional space horizontally.

So when our sidebar, what's set a minimum with here, which is just going to be 121 130 pixels.

Sorry.

And we're also going to set a actual with of 20%.

And the reason we're setting both of our different wits is that the smallest we ever want this to be is 130 pixels.

While if our screen size is very large, for example, like this, we wanted to take up a full 20% of the screen, so it doesn't look too small on the side of our screen.

But when it's really small, we only wanted to take up 130 pixels.

So now, with that out of the way, we can see that our box container is taking up all of this extra Romanian space here in order to actually visualize our box.

Let's select that box, which we know has an idea of the box and give it some with and heights.

We're gonna say maybe 100 pixels of with and tight, and we're gonna change the background color to just be read.

For now, it'll be really easy to see.

And as you can see, we have that nice Red Square in order to center it.

Like I said, we're gonna use display of flex, and we're gonna justify our content in the center.

And we're going to a liner items in the center, and that's gonna put our box of dead center instead of our screen.

Between our sidebar and the top and bottom of our screen.

I also want to give our box a little bit of a margin.

We'll just say a margin of 25 pixels on all sides.

That way, if our screen size does shrink down, it never becomes so small that our box is not able to have a border around it.

We want to build to show that box shadow.

So we wanna have a little bit space around our box, even if our screen size is really small.

So now the next thing we want to work on is changing over our font family, because right now the default font kind of looks ugly.

Soldier shoes Ariel as our front looks a little bit better.

And now we want to work on styling out this sidebar because our body of our box content is fine for now.

But we need to work on the side bar because it's pretty ugly right now.

So the first thing I want to do is changing over to use flex box, and this is because if we change the flex direction to column, were able to stack everything on top of each other.

As you can see, every single input is stacked right on top of each other, which is really, really nice.

Also, it prevents our inputs from becoming too wide, because without this flux direction, you can see we have really long inputs that go all the way to edge of our screen.

But if we make sure use flux Box, you can see that scroll bar is no longer there because our inputs actually stopped right on the edge of our screen.

Lastly, for this sidebar, what's adult Patty, who live 0.5 or E.

M.

Top bottom and one R E m on the left and right?

Give it a little bit of space and we'll also change the background color.

And we're just gonna make this really dark color just to to to looks pretty good and we'll change our color toe.

Wait so we can actually see the text inside of here.

And already this looks much better and pretty somewhere to what we have over here.

All we have left to do is actually focus on style in our inputs and our spacing, and we're pretty much there with our styling.

In order to space are elements out?

Let's select our labels from our side bar, so it's a sidebar label, so every single label that's gonna be X y and so on.

What we want to do is add some margin on the top.

Will do 0.75 r e m And we're also gonna add a little bit of margin on the bottom of 0.15 R e m That way we have our actual inputs spaced out from one another, and the label is just slightly offset from the actual input.

Just giving it a little bit more space.

Which books?

Good, in my opinion.

Also, we're gonna want to set our font wait here to be bold.

That way these labels really stick out that we know that they're clickable.

Now, the next thing to do is work on this divider, if you remember, recreated an element in our HTML with a class of a divider.

So we can actually just select that divider by saying divider and all we want to do is give some space around this.

So we're gonna use margin.

We're going to say we want one r e m to be on the top.

We want negative one r e n on the left.

And the reason for this is that we have this padding of one R e m and we need to offset that.

If we were to have zero here, I'll show you what that looks like.

It just a little bit.

But on the bottom, we're gonna have a 0.5 r e m.

And on the left, we're also gonna have negative one R e m.

But for now, I'll show you what that looks like with zero, and then we're just gonna use a border for this Will save border bottom is going to be one pixel solid.

And we're gonna set this color here to be 999 And if I save, you can see we get that divider.

But as I mentioned, it's one r e m away from the edge on both sides because of this padding.

So we want to do is make sure that we have here are negative one r e m of margin, which is going to push this all the way up to the edge of both of these sides.

And the reason we have a different margin on the top than we have on the bottom is because of the margin top and margin bottom that you see on our label.

We have 0.75 year and 0.15 year, which is a 0.6 difference.

So actually, this should be point for R E m on the bottom like that, so that when we haven't even amount of space between the top portion of our divider and the bottom portion of our divider now all of that spacing done what's work on styling our inputs.

And we're gonna first style our number, inputs and then style or color inputs because they're obviously gonna look quite a bit different.

So let's select our inputs, and we want to select the ones that are not color inputs first.

So we're going to say not type equal to color.

Just like that.

This is going to select every input.

That's not a color input, which in our case, is these four number inputs.

And what we want to do here is we're gonna add a little bit of padding on to these for 2.25 pm and 0.5 pm just to give our numbers some breathing room inside of here, and also you'll notice our font is different.

So we want to make sure that our font family is going to inherit and our font size is going to inherit.

And that way our inputs have the exact same fund and font size as the rest of our application, and that already is starting to look better.

Now, the next thing that we want to work on is going to be our border.

We're actually going to completely remove the border.

But instead of saying border none here, where we're actually going to say, is one pixel solid, transparent.

And the reason for that is that inner input focus states our input.