Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy.

And in today's class, I'm going to show you how to create shapes in your HTML documents using CSS.

So I'm going to be giving you some basic examples today that are probably a little bit of no brainers.

I'm going to show you how to create a square, going to show you how to create a rectangle.

I'm going to show you how to create a circle, and I'm going to show you how to create an oval past, that we're going to use a cheat sheet because that's what all good technology professionals d'oh when things start to get a little bit too complicated.

So one of the resource is I've talked about before that you should be using if you use learning CSS is a website called W three schools dot com.

It's very useful because they give you very specific information on how to do specific tasks.

And not only that, they actually have an environment where you can play around with the CSS code live, click a little run button, and then it will output the results.

Once we get past squares, rectangles, circles and ovals, the CSS code gets a little bit squiggly trying to trying to explain everything to you s.

So what we're going to do is we're just going to go over W three schools.

They have a lot of examples on different ways to create shapes on, so we'll just go over a couple of them there and again.

If you want to create a shape, there's more complicated.

You can just go to W three schools, figure out the shape you want.

Open that coat up, see what it looks like, modify it to your needs and then paste it into your project, which is what really coders.

D'oh!

Please, please.

There are a lot of coders out there.

There's a lot of newbies out there.

A lot of newbies out there that copy and paste.

Copy and paste is for amateurs.

When I'm a professional, I will never copy paste.

And here's the thing.

As a professional, if somebody already wrote out, all the code and I have to do is modify a couple of things, eh?

So that it fits into your project.

Why are you going toe hand type All that code when you consider plate copy paste, modify a couple of things and be done with it again.

It's important, understand?

With when you copy and paste what type of code, your copy and pasting s O.

If you're copying and pasting JavaScript or possibly PHP like real programming code, you do have to worry about major vulnerabilities within whatever project that you're creating, right?

So you just copy and paste 1000 lines of jobs.

Stripper 1000 lines of PHP on.

You don't really go through and out of that code and verify what that code is doing.

There may be some place in the code where it's taking all of your information and shipping it off to somebody server, so you do have to worry about that with real programming languages again.

Java, Java script PHP ruby on rails python that type of thing.

But remember, when we're dealing with CSS, all this is the style sheets.

All this is style sheet.

So worst case scenario, if you don't look at the code quite properly, the background color will be a little screwed up and you have to go in there and modify it.

So copying and pasting to be clear with CSS knock on fake would knock on fake.

It is almost always completely safe.

Eso again, You can go.

You can see what somebody else did with her style.

She Oh, that looks pretty.

Copy, Paste, Dump it into yours.

Do the little modifications as you see fit.

And now that is in your project.

And you didn't have to go through and figure out every specific setting S o.

Do you understand that every once in a while I'm going to show you examples from W three schools dot com just to be clear.

There, there an incredible resource.

I have no connection with them at all.

Have no idea who runs it, anything like that.

They're just an incredible resource.

And again for a lot of these projects.

When you start getting into how to create a trap.

Is oId right?

How to create a Travis Order?

How to create different types of triangles.

I could sit here for an hour and walk you through all of these different shapes, and then you would completely forget it anyway.

So if I just show you w three schools and I can say, Look, here's the 20 examples that they have.

If you like one of those, click on, try it.

Modified s see fit.

Copy paste.

That will do a lot better for everybody at the end of the day.

So, anyways, let's go over to the computer again.

I will show you with a complicated task of squares, rectangles, circles and ovals.

And then we'll go to W three schools just to show you some of the other shapes that you can create.

So here we are, back to my demonstration machine again.

I am using a Mac book.

So to write these two files, I used text edit.

All you need for something like this is an ass key text editor.

So if you're on windows, you can use no pad and Mac, you can use tax debt it in the Lenox world.

You can use g et it.

Nah, novem, whatever you want.

Basically, all you need is a basic asking text editor.

You're gonna create two files.

One I've called shape dot HTM l s.

So this is what's actually gonna be open up in the Web browser?

The main thing here is it has to end with dot html on.

Then we have, ah, shapes style, Nazi SS.

So this is the style sheet where all of our styling is going to come from these two documents created.

Let's just go take a really quick look at the HTML.

Then we'll take a look at the style sheep, and the HTML is very simple here.

So again, we open up the HTML we open up the head.

Then we're going to link to the style sheet relations style sheet and then the ref again as long as the style she is in the same folder or directory as the document.

You can simply put the name there.

If it isn't another folder or directory, you would have to put the full file path.

We're gonna close the head, and then we're going to open the body.

Then all I have here is just I have four different dibs with specific classes.

So Div is basically where you where you kind of create a section you create a division on your HTML document on Basically what we're going to do here is we're gonna create that div It is going to be a shape and then it's going to have a specific background color so it actually shows up and we can see it.

So I have a div.

The class for this is going to be a square.

It was gonna be a square.

We don't put anything within the DIV itself.

You could put some text here if you wanted to, but we're not putting anything because all I want is a basic shape.

Then we do a break.

They're gonna give class of rectangle, close the Tiv, give class of circle, close the Tiv Day of Class of Oval, close it.

If so, that's gonna give us a square rectangle circle and an oval on our HTML document.

Then we can go over and we can actually take a look at the CSS, and it's pretty simple.

A lot of this you've probably already seen before.

Most of this you've seen before and other classes, but this is just kind of focusing on it.

So the first thing that we're going to do is we're gonna create a class of square, so dot square, and then we're going to say what this class is.

We're gonna give it a wit of 40 pixels.

We're going to give it a height of 40 pixels, and we're going to make the background color gray Now.

It is important when you're doing these projects that you actually set the background color.

Because if you don't set the background color and especially if it's on a white page, then it's just gonna be white and you're not going to see it again.

That's it.

That's one of the difficult things in the coding world.

You can have something exist and not be able to see it at the exact same time.

So if you don't put a background color, you won't be able to see it.

So it doesn't matter what background color is.

Just give it once.

So this one I gave grey, then it created a rectangle.

So for this, the with will be 100 pixels will be 100 pixels wide, 40 pixels tall again.

I give that a background color of grand.

We're gonna go down to the circles and the circle in the oval.

This might be a little bit new new to you, but it actually uses would have already shown you in a previous class.

So with this literally, what we're going to be doing is we're going to be a rounding the square, right?

So basically, imagine you have a square, and then you're trying to around the edges of the square, and then you round the edges of the square so much that it becomes a circle that logically is literally what we're doing here.

So the first thing you're gonna do here is you're going to do the same thing that you did when you had a square.

You gotta make it a wit.

The 40 pixels gonna get high to 40 pixels and give it a background color of gray literally exactly what we did up here.

The difference is is that we're going to use the border radius s o.

I did a class talking about borders, and one of the ways you can format your images is by basically giving rounded borders, and that's what this border radius does.

And so we're actually going to give this a border radius of 50%.

So if you give it a border radius of 50% basically that means it rounds all the borders to the point that it turns into a circle.

We go down here, we take a look at the oval.

So oval is the exact same thing is a rectangle with of 100 pixels, height of 40 pixels, background color of gray.

But again, we're going to do that Border border radius two fifties percent by setting it to 50% is going to round the border radius so it turns into an oval.

We go over and we actually take a look at the demonstration.

This is then the example that we get So so this is our square again.

It's great.

All of these air gray 40 pixels by 40 pixels, right rectangle 100 pixels by 40 pixels.

Now with the circle, if you can kind of tell, you'll notice the height and the width of it is actually 40 pixels.

But the border radius has been rounded to such a degree.

That is now a circle.

Same is then true with the oval in regards to rectangle.

So basically, this is still 100 pixels wide by 40 pixels tall.

But you have rounded the border radius to the point that it now looks like an oval.

If we go back just to give you a little bit of example for how this would work, let's say I only set the circle to 25% for the border radius I could file.

I could do save, and then this might be something you're a little bit more accustomed to.

So basically see.

So what this is is this a square with rounded borders and all we're doing as we increase the percentage of the rounded borders were just slowly, slowly, slowly turning it into a circle.

Right?

So do 50%.

Then we do file, you save.

We now have a circle.

That's all we're doing here again.

If we go down to the border radius for the oval, let's just say that to 25% to give you an idea.

We do save.

We do refresh, See, now it's a rectangle with rounded borders.

Essentially, that's literally all we're doing here.

We're just rounding the borders to such a degree that it then turns and to an oval.

So those are the basic examples of square a rectangle circle and oval past that, though past that, To be clear, you could do a lot more really cool things.

That's where you go to some sight like W three schools dot com Again, one of the things you have to remember encoding is that once you create a basic way to do something, other people can simply copy and paste it again.

There's no reason to reinvent the wheel all the time.

And so again, that's what That's why I recommend you have a book where you could go to something like W three schools because then you can have an idea in your head about what you want to do with CSS, and then you could just go on research it and see if somebody else has done it like you may be sitting here going, But hell, I don't want a rectangle.

I want a trap is oId so I can go here and I can click on this.

Try it for yourself, button and this gives me the trap is all right.

So basically, the important thing here is we're creating class for trap is oId.

We're doing a border hyphen, bottom 50 pixels.

Solid of this will be great color border hyphen left, 25 pixels.

Solid, transparent border hyphen, right, 25 pixels.

Solid, transparent height.

Zero with 125 pixels.

And so what you can do here is you can go when you can start playing around.

Let's see if we did the bottom board or we turn it to 150 pixels and then we can click the run button and we can see that's what it turns into.

Then we can get rid of that.

No, no, the left.

What if we made the left 125 pixels and then that's you know.

Then you can start.

You can start going through here and tweaking things and figuring out what you actually want it to look like.