Have simplified my name's Kyle.

And in this video, we're gonna use HTML, CSS and JavaScript to make tabs in on Lee 12 minutes.

And I'm not gonna mess around on any extra information that you don't need because at this channel I like to make things as simple as possible.

So while these tabs are gonna look a little bit ugly, it's perfectly OK because they're completely functional and super easy to plug into whatever set you want to use them in.

So without any further ado, let's get started.

Now, before we start coating this project, let's take a look at what the actual project will look like.

As you can see, we have our tabs over here on the right, which, when we highlight over them, issues going toe hover a little color to let us know we can click on it, and when we click on it, it's going to show us that tab Content as well is highlight the tab that we've currently selected.

So to get started making these tabs, the first thing we need to do is of course, crater html page.

So let's just create a page.

We're gonna call index dot html And if we click exclamation point and hit enter, it's going to default all of this code force if we're using Emmett inside of visual studio code, which is the default visual studio code.

Next, we can just type in our document title, which in this case is just going to be tabs.

And now, instead of the body, we can actually get to work creating our tabs.

And this is actually gonna be straightforward, but we're gonna have is we're gonna have a list up here, which is going to be a nun ordered list.

So it's create that on ordered list and inside of here we're gonna have list elements, and these list items are going to be the 1st 1 is just going to say home the 2nd 1 here is going to save pricing and then lastly, we have the 3rd 1 and this one is going to say about now that we have our actual items out of the way, we can create our different content down here, And to do that right, you're going to wrap all of them inside of a single div, which is going to have the class here of tab content, and then each one of these is going to have a single DIV, which is going to have our content.

So this 1st 1 is going to be our home content.

So it's given I d here of home and then inside of here we can first put in our content which, in our case, where you can't have an h one that says home and then you're gonna have a paragraph tag and this is just going to say something along the lines of this is the home.

There we go.

Let's copy this down a couple more times making sure that we keep this inside of our tab content section.

So we have our home, we have a pricing and we have her about and appear we're gonna have been pricing and about for a different titles.

And for our actual page description, we can stay some information on pricing and overhearing the about.

We can just say oops.

Let me tell you about me.

There we go.

And now what started this application?

We just open this with live server.

If you have that extension installed in visual studio code and As you can see, we have our three different tabs up here as well as the different content for a taps.

Obviously, this is not correct because things were showing where they shouldn't be.

But we can fix that pretty easily by using some Java script.

So let's included JavaScript tag.

We just come in here, we can type in our script and we want first to have a source of script dot Js, which would be the Java script file we create.

And we also want to make sure we defer the loading of this.

So what happens after HTML was loaded?

Now let's create that Java script script at J s and inside here, we're gonna put all the code for making our tabs work.

So the very first thing we need to do is we need to build it whenever we click on a tab.

So if we click on home over here, we want to show this home section and hide everything else.

So the first thing we need to do is build toe, have our tabs link up to a specific section, and I can actually really easily be handled in our html by using data attributes so we can come in here and we could just say data Whoops, data tab, target.

And this is going to be the selector.

That's the Lexx are tag.

In our case, we have ideas and all of these so we can just make this one select our home, I d And we could do the same exact thing.

Just copy this down for pricing and about so we can select the pricing tag.

And down here we can select the about section.

So now each one of these tags has a target that selects the specific did that we want to show in our case, home pricing or about So now, instead of our script, we can select all those tags.

We could just create a variable called tags and we can use the documents dot query selector all which is going to allow us to select everything that has a specific selector.

In our case, we want to select where its data tab target lips target.

If I can spell that correctly.

There we go.

And this right here is all of our different tabs.

Make sure we spell it tabs and what we want to do is we want to look through all these taps so we can just say tabs dot for each and we're gonna get a single tab.

And for each one of these tabs, But we want to do is we want to add an event listener so we can just say tab dot at event listener every time that we click on the tab, we want to run the code inside of this function here.

So what we want to do is we just want to show that particular tab, and that's actually fairly straightforward.

First, we can get the target.

This is going to be from our data attributes.

So we can just say tab dot data set data said dot tab target, which is what we set right here in our HTML.

And this is going to be the selector that we can use with document that query selector, and we just pass it to the here just like this.

And essentially, this is going to get us that tab element for example, this home element for this pricing element based on whichever tab that we clicked because of this tab target that we set here and then only wanted to do is show that target.

So an easy way to do that is to add a class.

So we're just going to say, target dot class list dot ad And we want to add the active class, which we're gonna style using CSS to make it so that this is actually visible.

So let's create a CSX style sheet here.

We're gonna call it stiles dot CSS.

Make sure we include that inside of our age, Tino, Just like this.

We have a draft which links to style CSS.

And lastly, we need a rail of style sheet.

So the browser knows that this is the style sheet and not something else.

And now inside of here, where we can do is first.

Actually, we should probably add a class to each one of these different tabs.

And actually, instead of a class, I think I'm gonna actually use the data attribute so we could just say data tab target actually tab content.

And that's exactly what this is.

Each one of these is going to be a tag target.

There we go, Tab, target.

And now, instead of our style shoots, we can actually select that by saying data tab content and inside of here, what we want to do is first make them absolute hidden.

So now if we save this, you can see all of our different tab content has disappeared.

But if we have an active one, so, for example, data tab content and we want to check for If we have the active class set to that, then we want to make it visible.

So we just come in here and we can say Display is going to be a Glock.

Now we say that you'll see that nothing changes over here, and that's because we haven't actually said that active class.

But as soon as we click on one of our tabs, for example, home, you'll see that that home is now being shown up.

But we have a problem once we click on another tab that tabs being shown up and none of the old tabs are actually disappearing.

So let's read the code that's gonna make our old tabs disappear whenever we click on a new tab.

And to do that, we need to actually select all of our different tabs.

So inside of our job script, what we can do is we can get our tab contents so we can say in here we want to get tab.

Contents were gonna set that equal to document dots.

Whoops dot Cleary selector all and we just want to select on that data attribute which we just set, which is data taboo content.

So now we have a variable here tab contents, which contains all of the different contents for a tab down here.

And all we need to do instead of here is we wanna look through each one of those so we can say for each tab content.

What we want to do is just remove that active class so we can say class list dot remove and we'll remove active.

And let's actually pushes onto another line so that it's easier to read for all of you.

And essentially, what we're doing is first, we're getting our target for what tab we clicked on.

Then we're making all of the tabs disappear.

And then on Lee making the tab that we click on active.

So let's click on home and you can see it shows up.

And now when we click on about, you can see the about section shows up and pricing, and this perfectly works for all the different tabs.

But what if we wanna have a default tab?

Well, that's really easy to do.

Actually, we can just come in here and add a class of active to whatever tab we want to be active by default for our case home, which put class active.

And now when we say that you see home is the 1st 1 that shows up.

What if we move this class active and let's say we move it down to pricing now you can step.

Pricing is the first have a shows up.

Let's put this back under our home because that's where we're gonna want it for the rest of our application.

So now that we finally have all of the Java script that we're gonna need for now out of the way, let's work on styling this to make it look a little bit better.

To do that, we want to first build a select our list over here so we can add a class which is just going to be tabs because this is going to contain all of our tabs, and we also want to be able to select each of our individual tabs.

So it's of course, at a class in here, which is just going to be tab to each one of our individual tabs.

Copy that down.

And also we want to put an active tab on whichever tab we're going to have active at the beginning, which in our case, is the home tab.

Now, instead of our styles of CSS, let's work on making our tabs appear, look unlike they are right now and make them actually spent across the top of the page instead of being an ugly list.

So to do that, we can select that taps class that we just created, and the first thing we can do is display flex, and we want to justify content with space around.

This immediately is going to spread everything out force, which already looks a lot better.

Also, we want to remove those periods at the beginning so we can use list style type and just set this equal to none.

This is going to remove the periods at the beginning of our list, which is great.

Also, you'll notice that there's a bunch of spacing on the left and on the top of our tabs.

And this is because by default, an unwanted list has a bunch of margin on the top and also patting on the side.

So we're gonna remove all of our margin and patting, and now you can see that's already gotten these right in the centre for us.

And none of the extra spacing is on the top or the left hand side.

Very last thing we need to do is just add a little bit of order on the bottom so we can come in here.

You just say we want a border where you're going to be one pixel, solid black.

And there we go.

Well, we just wanted to be on the bottom now, so let's make sure we use border bottom.

There we go.

And to make us who is a border spans across all of our page.

All we need to do is select our body and remove the padding and marginalized so we can just say patting zero and margin zero.

And then you go.

As you can see, everything has been pushed up right to the edge of our screen, which is exactly what we want for our tabs now would select our individual tabs and make them so that they're styled.

And the first thing we want to do is, of course, just make it so.

It's cursor pointer that when we hover over it, you see we get the actual cursor for clicking on things so that users know that these air tabs that they can click on also we want to add a little bit of spacing will say padding of 10 pixels, for example.

That's just going to space out these elements from the Thompson sides of our page just a little bit to make them more obvious and easier to click.

Also, we want to add a little bit of a hover effect on top of our tabs.

So we want to change the background color whenever we hover, so we could come in here a background color.

We're gonna change this to just a A.

That's a fairly dark color.

So now if we say that and hover, you could say we kind of get a darkish grey color whenever we hover over anything, but we need that active style so that we know which tab we've currently selected.

because right now we don't have anything showing.

So to do that we can come down here again into our tabs.

But we want to do it for only the active tab that we have.

And we want to change the background color we want to make.

This CCC is just a slightly lighter color than a a.

And now if we say that you see immediately are active Tab is showing up with that color.

But we're gonna get a problem.

When we select another tab, you can see that are active classes not actually moving to the correct tab.

This is what we're going to need JavaScript to handle.

So instead of our JavaScript, what we want to do is essentially copy this exact code right here that is moving our class and removing the other class.

So let's copy this code to remove the active class, and instead we want to look over all of our different tabs.