Welcome back to today.

I'm doing a crash course on foundation.

Now.

Foundation is a CSS responsible framework that makes every website available on mobile tablet and desktop devices.

My name is Shadow, and I'm going to be showing you guys today how to implement this CSS sponsor framework called Foundation.

Now, for this tutorial I'm using, specifically, foundation Virgin six made my reserve.

Let's get straight into the crash course to go to Google or your browser and you're gonna type in foundation, not observe.

Should bring you to this website.

If it doesn't look like this might have been outdated.

So we're gonna go ahead and click download.

We're going to download the complete because it just gives us everything live download.

It should give you zip file down here.

Now you're gonna go to your desktop and you're gonna click.

You're gonna right?

Click Got a new older.

You're gonna name my name.

This foundation.

You can name it whatever you want back to your browser and go to your your foundation.

Download file, extract all click, browse, but a desktop.

The foundation Look select folder, then click extract.

What that does is basically makes all the files that we just downloaded it and put it into our desktop file called Foundation.

And we come down here and we read a little bit about it and how it works and it down here, and it shows, sites and e mails.

You can also do foundation for e mails.

But for this tutorial, we're just gonna do sites.

So we're gonna want to do is you're gonna go over to getting started.

Then you're gonna click sites, kitchen sink, and you should be in this giant on list called kitchen sink.

Now, kitchen sink is every element available in foundation all on one page.

As you see, if you scroll down, there's tons of tons of stuff you can put on to it.

We're gonna go through all of it we're gonna want to do now is gonna want to go down to your editor.

I'm using Adam in this example, and you're gonna want to click open a project, and we're gonna select on foundation.

It should bring us.

Okay, So what we get is this large interest a mile file pretty long.

So what we're gonna want to do is we're gonna want to leave everything out of the body tags.

Keep the body tax.

Really?

Everything inside of the body tags except for the job.

A script.

And you should be left with this.

Yes.

What we want to go in to do next is we're going to build some simple form validation inside of foundation.

Now we're gonna just start off with some form tax.

So we're gonna like that.

Right?

Form just like that.

We're gonna put some JavaScript data values in here, So we're gonna put data cache, abide and no validate.

We're gonna put a dip inside of here.

We're gonna give it a class called grid X in grid cash margin Nash eggs.

Now inside of that dip, we're gonna put another day if we're just gonna give it a class of cell going to make another day If we're gonna give it a class called alert.

Where?

All out.

Gonna give it a style display?

None.

We're gonna go back and we're gonna add some Java script values data provide cash.

You alert case the next you're gonna make another def and you're gonna call it You're gonna get the class of grid X and grid margin X and it's the same thing that's just went up here.

It's just how foundation sorts out its Ah, there dibs.

You're gonna put another dip in here.

You're gonna give it a classical itself.

Small dash 12 we're going to do next is inside of this day.

If you're gonna put a label and you're gonna put number number wire now, you're gonna write in input tag and set the type to text or keep it as text and then put a place holder of 1234 Since we are validating numbers and we want the user to know what kind of input the put and then you're gonna put something called area Dash described this ride.

Uh, I said equal and inside these are you're gonna put example.

Oh, text.

Make sure you capitalize the last two Campbell case.

Next, you're gonna put a required pattern you're gonna take required, and then you put a space and then pattern you're gonna set a equal to number, and then you could just take out this name and value.

It's not needed inside of there.

Next, you're gonna make a span, and you're gonna give it a class of form dash air And inside of this you could basically put whatever you want for when the user misspells something or something.

So you can say you know you for about something on form like that.

So when there's an heir message, it'll just give you this.

This is basically the air message.

And after this span, make sure you close out the label.

And after that label, you can put a paragraph tag and give it a class of help.

Text.

So gonna put class help ash text save it, then you're gonna give it an I.

D.

Of example.

Oh, text to make sure you camel case lows and the next you're gonna put whatever you want.

However, you want to help the user.

So I'ma put here is oh, you fill out and then save it.

It's what?

Whatever help text you really want to put into it.

Okay, so next you're gonna wanna make def.

I'm going to give it the class the same one as the one up here.

You just copy it paste, save it, you're gonna put a label, and you're just gonna put password liar.

And then after that, you're gonna put an input and you're gonna put the type as passed word.

Make sure the label is outside on the very end.

Make sure you add an i.

D and said it password.

And you could set the place holder to whatever you want, as long as it looks like a password.

So, like, uh, like, let's see if this was a password, Really?

The same thing we did up here with the that area described by.

So we're just gonna copy this and paste it down here, and then we're gonna right after it required.

And we could take out these name and values because we don't need them.

And after that, we're gonna put a span and at a class to it, And in that class, we're gonna call it form hair.

Where you gonna put I'm required.

Make sure your span and label.

And after that, if you want, you can invent them.

And after the span and label, we're gonna put a paragraph tack.

We're gonna give it the class as help text, and then we're gonna give him the i d.

As example help text camel cased inside of this, we're gonna put enter a has word police.

Now, if you open it up in your browser the HTML file you see you get these two ah input fields in here Now, if you're the type in something other than numbers, let's say ABC and press enter is going to say, Yo, you forgot something.

If you go to this password area and you just press enter, it's going to say I'm required.

So it basically validates your form to make sure there's an input.

Now these air just placeholders.

But other than placeholders, it's pretty much empty and you press enter and it says I'm required.

And if you put letters inside of the numbers, it's gonna say you forgot something in your form.

So that's just some simple form validation for numbers and passwords.

You can always just change it as you see in the code.

It's pretty much a pattern up here.

We can even add a comment right here.

Um, you just say, Ah Bao error message flush palate right here.

And this is basically what validates it.

And then down here is the number ballot date and then after that, there's, ah, pass word a lady and basically what you can do is you can copy any of these and just change the classes and stuff.

You can always check the foundation website too will also tell you how to change it.

But these are just some simple form validation for ah, foundation.

Okay, so up next is the accordion menu or just accordion, and so we're just gonna have a calm it down here.

We're just gonna call it, and I'm gonna tap it down here.

So basically, what we're gonna first do is put in a new order list, and we're gonna put a class up here.

We're gonna call accordion, and then we're gonna put a data value called data core in inside of here.

We're gonna put a list item tag, and then we're gonna give it class Name, Paul.

Accordion item.

It is active.

And they were just gonna give it a job.

Script value called data poured in item.

After that, we're gonna put a link.

So we're just gonna type in a an anchor tag.

We're gonna give it a class.

We're gonna give it the class called accordion title or just gonna call this one accordion one.

And then after that, we're gonna put it is we're gonna give this one a class called Accordion Clinton, and then we're gonna give it a job script value called data Nash tab content.

And then after this, we're gonna put a paragraph tag, and we're gonna go give it a class.

Next, we're gonna put a paragraph tag, and we're just gonna say hello world for this one, and then we're just gonna put a link.

We're just gonna put link in it.

It's just gonna be an empty link.

Now we go to our website and reload.

We get this little handle right here, but as you see, there's only one.

So we're gonna go back into our code and copy and paste it so we get more Accordions.

So So you were back in here and we're gonna copy and paste all of this.

Actually, we're only gonna copy and paste what's inside of the list item.

We're just gonna do it three times, and at the end, you're just gonna put the closing tax from the UN ordered list.

And then if you go back to your code you see here, you can minimize each tab.

So it's like an accordion and you can open them up by going like this.

It's pretty cool.

So we were gonna customize it a little bit more.

So instead of this being panel one we're gonna put panel to we're gonna take out this dummy text, and we're gonna call this one panel to this one.

Back to panel one.

This one, Panel three.

Take out all this dummy text.

And now if we go back to it, we reload.

We get all of these where it's like this and we can customize it even more Ngeze from saving it.

And then we reload them.

See, you get all organized with its content inside of it.

So accordion one panel one, they're just empty links, and you could open up each one, and it gives you a new panel.

Now, up next are something called badges.

Badges are an interesting kind of, uh, element inside of foundation, so I'm just gonna show you what they are.

So let's just put a comment saying badges and we're gonna make a span tuck.

We're gonna give it a class.

I'm gonna call it a primary badge.

And inside of that, we're just gonna put the letter a as capitalized so we can view it.

And if you go over to your browser and you click reload, you see down here, down in the bottom left corner of your screen, you should see the letter A and tied up inside of a little circle.

No, we can copy this code.

Make another version of it instead of primary.

We could do something called Secondary Secondary.

Badge them.

Just put it be.

Go back to the page and reload.

You get this, You get this gray badge down here.

Now I've added a diff that has a margin bottom of 200 pixels.

Just so you guys convey you the badges easily.

Now, if you go down here and make another span or copy and paste it instead of primary or secondary, we're gonna do warning.

And then we're gonna put this one with a C.

Save it.

Go to your Web page and click.

Reload and you'll get a yellow one.

The letter see inside of it.

Now, if you go back to your code, make another one.

There's also another class called alert and Alert badge and success badge.

And if you reload you see you have all different colors of badges and the purpose of a badge.

It's kind of like when something goes successfully or some sort of warning.

It shows up this badge next to, like some words saying Reform did not validate and it has a red badge to it.

It can signify something about your form or about something you're trying to fill out.

You're also just great little decorations.

But if I zoom out too normal, you can almost barely see them.

And I don't know why that is.

I don't think it's meant for reading.

I think I think it's meant just for the color and for signifying that something's not correctly filled out.