So before digging into code and see image filter in action, first, we need to make sure that we all are in same page for that exact reason. In this movie, we're gonna set up our project files. So let's start with the code editor I'm going to use in this course. So I'm going to use this VS code and VS code is totally free. And I believe this is an amazing free crater you can actually ever use this is crazy good. So I'm going to use this VS code for this course.

But if you want, you can go for atom, which is by GitHub, you can go with bracket or Sublime Text or maybe a simple notepad plus plus Yep, you can just go with any quarter you wish even the one you might using right now, it's totally fine. You just need a quarter acre. But for this course, I'm going to use this VS code because I love VS code, and I have already installed in my Mac, but if you haven't, don't worry, just go ahead and hit here. Right now I'm on Mac so you can download for Mac, but if you're in the window, it will shoot out for window. So just go ahead and just click on it. Download it and installed in your pc or your Mac, and once you install it, just open this editor and it will look like this.

After that create a new folder and click here to open and locate that folder. Well, in this case, I already have open here, which is exercise file. So I click here that this exercise file is almost empty. I only have these two images, which we're gonna need throughout this course. So first one is a collaborator PNG. I'll get back to it later in this course.

And next one, we have this GD one dot png, which is golden retriever, Doc. So now let me just close it. So let's create our STL file for that right click here and just click this new file. Well, you can name it anything new is like a indexable estimate. But I'm gonna be more specific, and I'm gonna CSCs image filters. And this is going to be our STL file.

There we go. So now we have our STL file. Next up, I need a folder. So I'm going to just create this new folder. And this is going to be our CSS folder where we'll put our CSS tags. So let me just collapse this and here I'm going to hold my shift key and press this one key word in keyboard.

And you see, I get this exclamation mark. Now, when I this tab, when it's going to give me this STL file document structure, here, it says image filters. So there we go. This is going to be our document name. And next I need one important thing. And that's going to be a bootstrap.

So I'm gonna just go to this bootstrap. Well, you can visit here by visiting this URL. And what I need here, I will need only this a CSS file, because we can make use of bootstrap grid. Don't worry, we're not gonna complex, it's gonna be really super simple. So I'm going to go up here and just paste it here. The Next up, we're gonna go right here.

And here, I'm gonna apply a class which is going to be container. This is bootstrap class. And then I can just go down, and I can make use of bootstrap grid system. So I'm gonna say here dot row, which is going to be David row. Obviously, I can rename it to section which is obviously one of our semantic and this is going to be row and then in one row, I need three columns. So what I can do here is a PC called dash four, which is going to be four into three, it's going to be 12.

Because this board system has a 12 column grid layout, I'm going to add my this image, which is a GD one. png, right? So I'm gonna say here image, and here is going to be images. And then I'm attacking this Zd one dot png, because this is exactly what I need here, when I can see here, Gd. And now I have this image. But we need to see the live preview.

Well, if you didn't see this VS code, it's super easy. You can go to this right here and just search for live server. Once you search for live server I have already installed so I don't have to install again, you can simply just click on install here and it will going to install integrator and then please start your VS code and the live server will get installed in your VS code. So now what you can do, you can right click here and go see open with a live server just click here and it will going to open this file in live server which is right Here. So let me just make it quite big so you can see it clearly. Now we have this image.

And now let me just go here. And I want three of em, right. So I'm going to copy this one, and I'm going to paste it. So twice, and right, there you go. If I save it, and finger here, now, you will see that we have these three images in one row, and you see these images looks quite big. So what I can do, I can go right here.

And let me just go to the CSS here and create one file in the CSS, which is going to be style dot CSS. So our target image and I just need to just do one thing, it is going to be weighed to be hundred percent. And this is a, this is the only thing I want. And now what I can do is that I go here, and here I'm gonna link that style set, which is going to be CSS style dot CSS. And if I go here, you see that now we have this enough space. That's exactly what we are looking for.

Now, let me just go here, and let us create one was tight here. So I'm gonna say filter dot CSS. This So it's gonna be filter dot CSS, and this is the CSS file, we are going to walk throughout this course. So let me just show you what I mean here. If I go here, First, I need to give it a class. So let me just give it a class of image two.

So image two, and then I'm going to copy it, I'm going to paste it right here. And there you go, this is going to be our image three. And let's make it image one. All right. So there you go, image one. And you know why these three images?

Well, because being an I keep this original image exactly same, we're not gonna touch this original image, we only going to work on these last two images throughout this course. So we can easily compare this modified images with this original image. So we're going to keep it untouched. And these are the two images, we can modify or add filter. So you can easily compare this modified version of the images with this original image. So let me just go here, and let me just go up Let me actually go to this filter CSS.

And first I'ma target is image two, and then image three dot image three. So now we don't have to repeat it again and again, that's fine. And then I'm going to just simply add it here. And then it's going to be CSS. And it's going to filter our CSS. So now there we go.

We have done it. So image one, image two, and everything's ready. Now let's go ahead and see that we need some space from top. So we can easily make use of Mt five, which is margin, top five, and see that now we have this margin FM. So yep, this is our project. And this is a very simple one.

And we are going to walk on this project through our discos. So here we have this simple STL file. And then we have simple filter, a CSS file. So yep, this is our Project Setup, you can easily just go ahead and download. This was file from downloadable resource, and let's get to working with CSS image filter from the next movie.