Transcripts
1. Introduction: Hello and welcome to a new class. This is building an e-commerce website with headphones. So first of all, what are we going to use for this class? We're going to use Node.js and JavaScript. And for the front end we're going to use Bootstrap, EJS, HTML, and CSS. So in this class we're going to create everything which is front end. And let's visualize it now. So this is the project that we're going to create. We have our home brand integrity about and contact us. We also have the sign in and sign up method. And of course, this is the homepage. We have some characteristics of the website, some brands, some bestsellers. And of course, the categories. Then followed by a footer that we're going to have it right here. So this is it basically for the website as a homepage. And of course we're going to create much more than that. We're going to create the brands categories about us and contact us together while we learn each and every step on the way. And of course, we're going to end our website with a bit small project that you are going to create and of course leave it in the project section. So with that being said, this is the introduction of this glass. See you in the first video.
2. Setup Node : All right, so now we are in our e-commerce website. This is a folder on our desktop. And we are going to divide the project into two main parts. The first one is to design the front end of our project, then to work with the back-end. But for now, we're going to start with our JavaScript file. We're going to use Node.JS and require some of the some few things such as Express, bodyParser, EJS, and mongoose. And of course, don't worry if you don't know anything about them. You can actually keep up with us since we are going to explain some of them in our project. So first of all, let's create our app.js. So we'll call it up, and this is the JavaScript folder file. And then let's go to NodeJS, download the version that is for us. So I'm using Windows, so I just don't know the dispersion. And after that pass through the wizard of insulation. And then we good to go. So it's up and Command Prompt, CMD. And I. Let's say note, we're going to get NodeJS. It's merchant 14.15.5. And this means that we downloaded NodeJS successfully. So now let's head to our desktop. And I'm sorry, let's go back cd Desktop and then enter our e-commerce website. So as we said, it's e-commerce website and e commerce site. And let's go ahead and install. Some are requiring some of the things that we need to have in order to complete our project. So the first thing we need to do is to write npm install express. And as you can see, it will download express and a few seconds. And this is the download process. And we need to download some few things also Such as bodyParser, EJS, and mongoose. So the database we're going to use is a MongoDB. And this is the first thing. This is expressed downloaded. And we can actually say, I said of installed. And we can download bodyParser, EJS, mongoose, and express session all at the same time. So if we go ahead and hit Enter, you can see that they are being downloaded. So for now, why they are being downloaded, we can go back to our code and start by requiring is downloaded. A file. So the first thing we need to do is to create our first constant. And this will be the Express constant. And we'll use it to require Express. And as you can see, we didn't have this package. Luck that JSON before. Once we required some few things, we notice that we have something such as, let's see. We have here bodyParser. We also have, for example, the color name and all of these files or requirements that we need to use in our project. They are being downloaded automatically just by downloading these four or five requirements. So for now this is expressed and then we need bodyParser. So we need to require it also. So body parser, and as usual, this is just a name. We can name it whatever we want, but it's easier if we name it that way. And of course we need to write the same download name from here. As you can see, we use bodyParser with a dash at the middle. And this is expressed and bodyParser for now, let's continue EJS to require EJS, then Mongoose. So this is mongoose require. And of course, we need to use the session. So this is session from express session that we downloaded. And I think for now we're good. The final thing we need to do is to create our actual app. So this will be expressed like this. So for now, we can start with our project. So let's check if everything is working. And one way to do that is to simply creating the port that we're going to use. So I'll use port 3000 and we'll see that in a minute. And of course we need to listen to this board by using up that lesson. So we're going to use the people that we just created. And of course, we can create a function. And let's console.log. And we're going to type Server started or 3000. And this is for deployment. And now we can send something. For example, let's suppose that whenever we enter our browser, we need to write hello world. So we need to get, we're going to use the method get. And the default page will be this one, the forward slash. And of course we need to create a function. We have the request and the response. And then inside this we're going to sand from the response, rest that sand. And we're going to send Hello world. So this is it basically, this is our setup. Now we can go ahead and type in our CMD Node JS. And this is how we can instantiate. So when do we have here we have an error, cannot access app before visualization. And as we can see, we used aptitude length. Sorry, here we need to use App that you get. And of course, this is the initialization of the app, should be before the usage of it. And of course now if you go back and write app.js. And as we can see, We've got this to allow NodeJS to run. So I'll simply allow access. And we can see the message that we wrote. Esl started at 0.3 thousand. This indicates that everything works fine. If we go ahead and go to localhost 3000, we can see Hello World indicating that we successfully managed to build our node browser or Node app. So this is it for this video and the next video we are going to start with the front end of our project. So see you then.
3. Header: All right, Now that we just finished setting up our app.js, we can actually start with our front end. But one thing before that is to use something available for us in node. And this is called Norman. And as you can notice, if I go to our cmd and let's type node app.js. And of course go to localhost 3000. We can see that we have hello world. However, if we change something here, Let's suppose I change HelloWorld, HelloWorld as heavy. And this case, if I go back and had to fresh, nothing is going to happen. So one way to deal with that is to actually install Node 1. And what not men, as is used for, is actually to create something that whenever we change anything, our code is automatically changed and our browser. So let's go ahead and solid. And one way to do that is to simply write MPI and BMI dash g to global and we need to install it. Haldeman. Now, an old man is being installed. And then after finishing the installation, we can simply use it by saying node app.js instead of node app.js. So this is basically for Rodman. And then after scanning is done with this, we can start with our front end. So let's wait, let's wait a bit. Maybe. Just close this window for now. And inside our e-commerce website, we need to create the views. And inside this USE, they're going to create all our EJS files. So inside views are created the folder partials. Inside partials we have the header and the footer. So let's go back and check on Norman is still stuck on something. So let's go and start with our header. So inside the header, by simply went to Bootstrap. And in this project we're going to use Bootstrap. So get started, go to Started template, simply copy it and paste it here. Then I went to Font Awesome to use the icons. So go to Font Awesome. And of course, get your own kit. If you don't have an email sign-up. And then going to get something like that. Gets inside, gets he gong to get this one. Can create any kit you want. My phone now, I'm going to use this one so I'll hit Enter and then go back and basic here. So I already pasted in the body. And now we're going to create the header. And then after finishing from the other, we can simply move this part, maybe all this till here, and paste it inside our footer. So this is basically let's go back. And as you can see, when sold Tuckman and then we wrote Norman app.js to instantiate the app, the JavaScript folder or file. And in this case, server is running on port 3000. If I go back here and let's go back to localhost, we have hello world, it's headed. If I change anything here. So let's suppose I went and added this, go back, refresh. And as you can see, let's see. All right, So it's starting, and now we have this here. So this is basically for nochmal. And as we said, we have here our header. And inside this header we are going to create the navbar that we're going to use. So we have header. Inside the header, we have the nerves and we have some classes here. We have navbar, navbar expand large, nav menu and BJ dark. And you can actually copy your own navbar from Bootstrap, but I prefer to create it on my own. So this is for the navbar and of course we need to add the button. So the first button would be of class navbar, toddler. And then we have the nav button. And then of course, we need to be a D type of this button to be the actual button. And then data VS toggled to toggle between the items whenever we have a lapse and of course the target. So data BAS target, and these are simple addition methods just to use the navbar. So my, now for I limit my network for now. Go ahead and create the subdivisions here. So inside our button and go here and open it. But for now, let's go back to our app.js and actually attempt to send this header that EJS into our browser. So when I'm thinking is to simply create home. And inside the sum, we can use the header and footer. So let's learn how to do that. We can simply create a new file in views, and this will be home.html. Inside this home, we need to include the header and the footer. So to do that, we can simply write this line of code so commander, dash, and then include what we should include as partials and then attr. So now we simply close the tag as we did before, and this is our header. And of course we can type anything we want here. So for example, let's write hello from home, and it will work just fine. But for now we need to render it using the app dot JS. Here. So let's go back to up and inside. We need to use it as app.get. So at the gap, we need to render to home as usual. Now let's go back, refresh. And as we can see, we got our navbar. It's very small for now, but we got it from the header. And we actually use it inside our home by simply including it inside our home that DJ S. So now we called the Home for the js file and also the header by simply referring to it inside here. So this is basically for transferring the header from one file to another. This is the simple line of code that we need to use. So let's go ahead now and continue that header here. And of course, we need to start by creating a few items. And some of them are the home, for example, we need to have a homepage. And the first thing I'm thinking to do is to create a few, some icon here. So let's figure it out later. But for now, I simply write the reference. And this reference will point out to nothing for now. But we have some classes such as navbar brand, that slide. And then text uppercase. If we need to add any writing here, it should be uppercase and x g2. And then Amex auto to simply make it in the middle of a deficient. But for now this is it we need to add here our element. I'll simply add it inside the span. The class will be H2, and we can add our icon. So let's go ahead and choose the icon we want from Font. Awesome. So let's go back to icons. And let's scroll down. As we can see, we have so many items that you can use. Let's choose this, this one for example. For now. So hit Enter and then wait a bit until the page is loaded. And you can actually use this icon with this simple line of code. So if you go here, go down site using this icon and copy this. Now let's go back to our code. And instead of I, I paste this. Now if we go back to our e-commerce website, oh, it's here. So this is it basically this is our Eigen that we are going to use for now. So now, after creating the item, we can actually start with creating our elements inside this nav bar. So to do that, we need to create the new division. And this division will have several classes as usual. The class will be collapsed, the first-class, and this is the most important class and we'll see why in a bit. But for now, navbar for labs. And then after that, justify content centered. And of course, text, uppercase, and then SW, bold. And of course, since we use the data be as target to be pointing out at my nav bar, we need to name it the same as before. So my nav bar, and this is actually for the division, this is demand division. Inside this division, we need to create the first column and it will be a column Dan, and of course a group also. So this is a column 10 group. And of course we need to create the unordered list. And inside our unordered list will have navbar, nav and some padding or margin on all sides. So this is, we can create our first list item. And as usual, the class will be nav item. Since we're working with network, the link will be pointing at nothing for now. And of course, the ID. We'll figure it out later. But for now to be the active class. And the classes will be nav link, a box maybe for later and m2. Then I think we're good for now. So let's go ahead and check it out. If I go refresh, we didn't see anything because we didn't try it. The homepage. So this is home. And as you can see, we got our home for now. So this is the first list item. Let's go ahead and create the others. So inside here, let me copy this few times. 1, 2, 3, 4, and 5. Now thinking to make this as a brand and then this product. And of course we need a page for the, about us. And so this is about, and this is Contact Us. So this is it basically four. And the novel, the first part of the navbar, if I go back, let me just change it to category thing, it's better. And if I go back, refresh, as we can see, we got home brand category about contact and we can all agree that we need to adjust them, maybe change the colors. And of course we need to add a few things at the end of this nabla. Maybe a simple sign in and sign up button it will check them out later, but for now this is it. So in the next video we're going to create our CSS file for our header. And just few things here. And of course continue but I think our header, the signup, signup buttons. And we are actually going to create this sign in as a model. And we're going to see how it's going to be built. And the next video. So this is it for this video. Here. The next one.
4. Navbar 1: All right, so now that we are done with our first part of the math bar, we can start with a starting the animals. And one way to do that is to create a style or a CSS file. And in this CSS file, we're going to link it to our header. And of course, we can call the items by ID or by class name, or even by the tag. And we can change or modify anything that we weren't, such as color, size, and so on. So first of all, we need to create a public folder. And inside this folder, we're going to create a CSS folder. And then create the CSS file. And I named it style.css. You can name it whatever you want. But you should pay attention that it should end with dot css, indicating that this is SCSS file. So this is my file for now. And of course we need to link it to our header. So go back here. And as you can see, I added this line of code. And it's simply saying that we want to link this heritage EJS to a file named style.css is an CSS folder. And of course to go back, don't forget that we are now at partials. So need to go back here and then go into the CSS folder, style.css, and it should work just fine. So now to make sure we can simply go, and let's say I need the body with the background color of red. So now if I go back and refresh, we can see that we got the red background as we wanted. So this indicates that our CSS file works just fine. So the first thing we're going to modify the font family of the whole body. So font family. And of course, let's make it san-serif and this should be important, so we simply add S as important. Now go back fresh and now we're good. So let's go and start with styling p elements of our nav bar. And these elements are inside the header. So I create these comments to indicate that this is a header. So and adult. And of course, if we need to call the elements by ID or by class name. And let's go back to header. Scroll down. And as we can see, we have this class navbar, nav and nav item. So we're going to use these two to change and modify the banner of these items. And of course, let's go back and start with the first one. So Navbar, Nav. And this will be an actor. So whenever this class is active, the a inside the navbar should be of color 31. 31, 8, f be five. But this is a, basically this is the current that we want to use for now. And let's say whenever we hover over something, we need the color to be also this one. So we need to change the nav item whenever we have the element hover over. And the color should be the same hashtag, 31, 8, f, v5. And now let's go back refresh. And whenever I hover over this element, you can see that it changes to what we want. Now, if we reduce the size of this, as we can see, it collapses. However, let me make it bigger. So we have home brand category about and contact. However, if we make it smaller, it collapses and there isn't any thing that we can press on to visualize these items. So let's build it and of course, change the style of these items to make them look nicer. So the first thing we need to do is to create our divisions here. So I left an empty space to create them. And now, so the first thing we need to create a new division of class, background light and anemic line one. Copy paste it two more times. And this is line 2, line 3. Now let's go back to our style.css and let's add some styling elements here. For example, we can add the, the three lines on the same one. So line one and that line two. And of course that line 3. Let's open the curly braces, so I'll give it a width of 23 pixels. You can change it and maybe try it by yourself. But for now, I give it the same. The width of 23 pixels, the height to be maybe, let's make it three. I think it's to be good. And then the margin of five pixels. And of course, we need to add a transition. So the transition should be old, a 0.4 seconds. And we'll see why in a moment. But for now, we can call the change. And this will be, as we said, the Transform Rotate minus 45 degrees. So I'll simply write it and then explain it. So that's late. From minus five pixels and six pixels. And of course to line 2. This will be our capacity, 0. And then the final one will be change. That line 3 and transform. Rotate 45 degrees and translate. Minus five pixels, minus six pixels. So this is it basically. And if you face some difficulties writing this line of code, the CSS, you can always check back the old value course and in which I explained HTML and CSS. And we have a very detailed explanation about some very important topics. And for now, these are the lines. Let's go ahead and continue then. Go back to them. So after changing lines, we need the nav button. And whenever we focus on it, we're going to change the radius, border radius to be none. And this is important. Of course, and let's give it a semicolon here. Now, for the menu item, I simply naming, named them after. So this menu item, Let's change the size. So size will be 16 pixels. And then the letter spacing and give it a one pixel and the color and make it maybe it just between the white and gray, so font-weight will be lighter. And finally, the transition will be all n, or maybe the color and 0.5 seconds. So this is it for the styling of the navbar. So let's go ahead and rename them. So inside the header, we have here the navbar toddler, the background light 123. And of course we need to add the menu item to all of these. So menu item. And whenever you want to add the same thing for more than one item, you can simply press on and, and then choose all of the places that you want to write and then write menu item. And now we're good. So we have our menu items, nav items, navbar, everything should work fine. Let's go ahead and run. As we can see, we've got our home brand category about and contact. And whenever we hover over them, you can see that it changes the color. Now what we did indeed transitions is to create this. The first thing is to create this one. And whenever we press on it, we got these here. So what did we do? Cancel, go back to style. And as we can see, we transitioned in 4.4 seconds for the lions. And of course, we translated minus 5 minus 45 degrees and minus five pixels to six pixels for line 1, minus five pixels, and minus six pixels to line 3 and line 2, we'll have a Bassett is 0. And of course the all of the menu items have the same font size, letter spacing, color, font-weight, and transition. So this is basically for the styles. Now if we go back, see it one more time. If we press here, we got all of our elements here. Make it bigger. We got them right here. So maybe in the next video, we can add these sign-up and sign-in buttons. And of course we can maybe reduce the size here. I think it looks. Maybe I can move this to the right a little bit and make it bigger. And yeah, we're good for now. So this is it for this video. The next video we're going to finalize our navbar, then start with our footer and see you then.
5. Navbar 2: Hello and welcome back. In this video, we're going to continue building our navbar and then moving to the photo. So first of all, we need to create two buttons. The first one we'll say sign up, and the second would be to sign in if you have already an account. So with that being said, let's continue. We built our unordered list. We have this division, and inside this collapse, we can add our new division. And this division will only appear if the screen is sludge. So sign up will only appear if we have a large screen. So to do that, we're going to use the column large two. And the unordered list will be of classes navbar. And to indicate that we want this to add, I'm sorry, navbar-nav at float. And so float. And, and we're good. We can start with creating the nav item. And of course we need to create the HRF. The classes will be nav link. Then we have the text light and of course, maybe add the class Signup for later. So this is sign up. If I go back and refresh, we going to get this sign-up button that appears here. Now, as we said, we want this sign-up to only appear whenever we're using a large screen. So if I maybe make it smaller, we can see that the sign-up appears here. So we're good for now. And of course, we need to add the sign-in, but I'm thinking to just make the sign-up disappear. However, if we have a small screen such as this one, we're going to have this and the logo. And then here we have sine. And so to do that, we can simply write our code below our division. So this division, where is it? This is it, this is the collapse. And this division, and then create a new division. And this division will have several classes. We already used ten out of wealth here. So we're going to use that the remaining two. And of course I give it depicts px 1, column 2. And if the screen is large, maybe one is enough. So now we're going to create our list. As usual, the class will be nav bar and then the list item of class nav item. And of course we need to create our element. Point out to nothing. For now. This is in length as usual. And inside this nav link. We can create our span. And in this case, what I'm thinking is to create a model and this will pop out. So for example, suppose I have this button here. Whenever I press, press on sine n, something will pop out here to fill in the username and password. So let's go ahead and build it now inside the link here. So we have enough white bar, nav item and nav link. So let's skip this for now. We're going to create our icon later. But for now let's get the actual model. So it will be a link to nothing for now. And it will be navbar brand. As usual data be struggle. And this would be to model saga only to tunnel the model data BAS target. I'm going to name it sine n. So I'll simply writes hashtag sign-in. Inside this layer, I'm going to create a button, a, class B, the end, the type will be button. And the style I'm thinking to having the background color of as usual. Step 3 one, 8, f, v5. So now we're good. If I just enter his sign and let's go back, refresh, going to get this button as sign in here. Now what we want to do is to create this model. So whenever we press on this will pop out at, out here. And before that, let's just add this small thing here. So we're always thinking to add a shopping cart. And inside this nav link, so maybe just add the I icon from Font Awesome. And the classes will be FAS as a shopping cart and make it two times bigger. So I have a two x. And of course we need some styles, so I'm thinking to make it white, so color white. So now we're good Refresh, going to get this shopping cart out here. And we want to show the shopping cart and the sign up at the same time. So whenever the user is not signing in, we're going to show sine n and sign up. Maybe we showed this shopping cart here. But we'll figure it out later. For now, we're going to have sign-up sign-in. And of course, the button of sign out. So let's go ahead and created as, as this one actually. So we have here the button of sign out. So let's simply change the sign out right here. And of course, let's check each shaft navbar brand, modal, sine n type class. Everything looks good. However, we need to actually remove the items, this one and this one. So I think we're good now. We have the class navbar. And we need to add an action. So unclick, going to do something, but for now, I'll leave it empty. And we're going to face it actually while riding the backend. For now, this is it. So if I go back and refresh, going to get the sign-in, sign-out, sign-up and guard. So now, before moving on, let's just comment this out. So these two and we are going to be having sign up and sign n home brand category. And everything looks good for now. So this is basically for the sign-up and sign-in. And now let's create the actual model right here. So to do that, let's go ahead and go back to our header. Inside this header, Let's go out of this navbar header, create a new division. And this division will be a class model, and it will be fade also the id, as we said each point out at this, so let's copy it. So id equal to sine n inside this division, we're going to create the form. The action will be decided later. For now I'll leave it empty. And of course, we need to add method, but for now, we can go without it. So the division of this class will be modal dialog. And we are going to create several divisions inside this modal dialog. So the first one will be more than content. Inside this content we are going to have the header and title, then body. So the first thing we're going to create a model that content. And inside this, we're going to have the modal header. Then we have the h bar. This will be modal title. And then here we're going to have signed it. For now. If I go back and refresh present, thus, the sine n would pop out right here. So what we're going to do is to add a label, then an input, then a label for the password input, and the sign-in button. Go back. And of course, after creating this H4, maybe create the button to dismiss. For example. Here we're going to have the modal body and I'm thinking to create a form group. And of course, we're going to have some banning. The first label will be for an e-mail. The class will be labeled. And then we have email address. And of course, after getting the label me to have an input of type e-mail. And the classes will be formed control. Then we have MY to be two and this is an input. And the name, we're going to use this name later, but for now let's name it username. So this is the first one. I'll go ahead and refresh press. We have an email address and the input. So let's go back and let's actually copy this to not repeat it many times. So we have the e-mail address, then we have the password. So let's simply change this for password. And of course we need to change these also. So password type, also password. And finally, the name will also be password. So this is it for the email address and password. Check them out. We have the email password, and of course we need to add the sign-in button. So let's go back to here. And inside our division. This one is for the body. We, we finished with the body so as create the footer. So this will be modeled. And we're going to justify content center. Inside this photo, I'm going to create the button and this will be of type submit and the class will be btn. And I'm thinking of the same background color as before. So sorry, background-color. And it would be 318, F, B5. So 31. It That's b5. Let's go back refresh. We're going to get this small button, but we forgot to add here sine n. Go back, refresh sine n. And as you can see, we got this sign-in button right here. So now we can enter our email address and password, then click on sign-in. And if we are signed in, if we have an account in this website, that will take us accordingly. However, if we don't have, maybe we will add something such as an alert or something like that to simply glorify that this email address or password or not, correct. So this is it basically for the front end of the header. I think this is maybe clear enough sign-in email, address and password. Maybe later we can add a sign in with Google, where the user can choose to sign in with an already create the account from Google. And you can also do that with Facebook. But to keep it simple for now, we're going to use the sign-in button. And then maybe later on we can add another button right here and maybe say sign in with Google. So this is it for the header. And the next video we're going to create our footer. So see you then.
6. Footer: Hello and welcome back. In this video, we are going to create our footer. So let's start with creating the frozen. We have the photosynthate EJS. However, before exciting, Let's copy all of these and then add them to our footer. So this is what would be the end of our four there. So we have the scripts and the body than the HTML. So for now, let's create the footer. The classes will be dark as the header, the X5 and empty five. So now we can create our container fluid and then create the row. And the text will be light. And of course, we need some padding on the y-axis, so maybe four. And now after creating the row, we need to create the color. So cannon algae for and for small ones, I'll make it six. Now, maybe at the age five. So this is the About Us. And the paragraph will be a class lead. And let's add some Lauren, Lauren, I think it's good. So now, if you go back and refresh, nothing will happen since we did not add the photo to our homepage. So here, let's copy this and add it right here. But before this, Let's add couple of lines. So maybe 20 is good. And now instead of header, we need to add the footer. So now let's go back and refresh. And as we can see, we got these About Us here and some Lorem Ipsum paragraph. However, if we go back, let's see what's happening. So here we have the, each five images about us. And then we have the class maybe changed this lead to small since they are equal in size 10. Let's go ahead and check them now. If I go back and it looks better. So we have the About Us. Now let's create a few more. Thanks. So I was thinking to divide the page into four categories. The first one is about us than we going to ask, maybe just add all of these here. And then we're going to have the e-mail us or need help or something like that, then they connected. So this is the plan. Let's go ahead here. So we have the column, then let's create another one. So after getting done with the first column, to use it for two now, and of course for small, I was thinking the same as before. So column small six. Inside this column, we're going to create the visit us. And then we have the unordered list. Let's make him unstyled to get the bullet points. And of course we can create our list items. The element will be class, footer, link. And of course, need to add home. And actually let's copy this a few times. This list item 123. So we have home maybe brands and products. So if I go back and refresh nothing to get visitors home brands and products. And whenever we are going to, uh, maybe, maybe the user press on brands, It will take him automatically do the brand category here. So this is it. And actually let's change these products into categories since we already named them before. So this is it basically for the second division. Let's start with the third one. And here we're going to ask the user if he needs help. So column 2 and column small six. And then going to create an H5 and class will be Pb three. And here we're going to ask, if you need help. This is the case. We have an unordered list says before the class will be list and the list item will be an H ref and maybe add the contact here. So class would be footer, link, Contact Us. And of course, we can copy this list item to maybe add our email address. So here we're going to have our email address, maybe this into e-commerce at example.com. And of course, we can actually add this right now. So whenever we want to send an e-mail or make the user send an email, we can open up the mailbox by using the mail to and then mailed to e-commerce and example.com. So now if you go back and refresh, we're going to have the Contact Us and e-commerce and example ago. And this contact us who will take the user into a whole new page where we have a message that the user can send. And this e-commerce will actually up in the mailbox of the user and make him actually send an email to us. So this is basically the idea of need help. We have two options. Either contact us via the website or go via e-mail. Finally, we have the stay connected, and this will be used to make the user enter his e-mail if he wants to receive exclusive offers or new updates. So let's go back to our code. And inside this here, create a new division. Classes will be column large or column small, 685, maybe. Yeah. And the class will be V3. Then we have the stay connected. And then we have a paragraph. The paragraph will be small. And maybe something like enter your email address to receive exclusive offers and new updates. So this is it. Let's create the form that the user should submit. The action will be empty for now. And of course we need to add some class, maybe just the margin-bottom three for now. And then we need to create a division of class. Input-group. Inside this input will have the male input and the class will be formed control. And of course, the name would be email. This is for later placeholder, would be e-mail address. So I think this is good. Maybe just add the button to submit. So this would be input, group append, append it to the input above it. And we have the button and the type will be submitted. Then we have the classes. We have several classes. I was thinking to add a danger background. So we gave danger. And then we have the text, white text, uppercase. And of course, maybe make the font-weight bold. Yeah, So this is it basically, if I go ahead and refresh, we're going to receive enter your email address to receive exclusive offers and new updates. We have the e-mail address and this button. However, we forgot to add something, maybe at see you here. So if I go back and refresh, going to get this email address and the CU appended to it. Now, if we now see we have a small difference. Maybe. Let's adjust this. So instead of, let's count them. So we have here 4268. And we also have here for yeah, I think we're good for now. However, this email address point b2 long. And to be in the same line, maybe high dividend space. Let's check. Yeah, It's because of this email address is too long. We can make it other than that, so let's make it eco at example.com, refresh. And now we're good. You have the Contact Us email. And if he wants to enter his own him and atlas to receive exclusive alphas and new updates he can from here. And click Submit, see you. And then this will be later on used in our database where we can keep these emails and then send exclusive offers to these users. So this is it for the footer. We just created our header and footer. And actually I believe they look nice and we have our hovered over here. And of course we might adjust these two buttons, but for now, we'll leave it as it is. And the next videos we're going to start with creating the about us and contact us page. And then we'll move on to our last three pages, which are the home brand and category. So that being said, this is the end of this video. See you in the next one.
7. About And Contact: Hello and welcome back. In this video, we are going to create our About Us page. And we'll start creating this page inside the homepage. Then after finishing it, we can create our own EJS file and move all of the code there. But for now we'll start with creating it right here. So the first thing we need to do is to create the section with some classes. The first class would be B5 and I'd give it a m four maybe. Yeah. And we need to create our container fluid. Then we can create our division. And this division will be the header, the About Us, the title. And we get created, maybe text center. And then each one. I'm thinking about having a color. So I use this tile. It will be color lag. And then we can create About Us. Then we have a paragraph. I'll add some padding on the y-axis and then some learn. Thank God. And if we go back and refresh, we going to get this about us than we have some few lines. After that we can create maybe something visual. And I was thinking to maybe write y us and then list some of our characteristics or what are we special? And so maybe after creating this division, we can create a new division. And this will be rho text white and tax center. Then we're going to have the column at the old page and I'm white fall inside this. I'm going to ask why. And of course, we need to add few classes here, so display for them before. And the color will also be black. So this is it basically for the wires and now we can maybe add some underlined here. So the Persian. And this will take a class of underline and maybe March and button of foil after the underline. So if I go back and as you can see, we got this, as we said. And here we can add the characteristics or our specialties. So I was thinking to add faster, very best prices and top quality, and then also add some icons to indicate what are we saying. So after finishing from this division, which is here, we can go ahead and create a new row with MY life. And each column would be MD4. And of course the tax center. So now we can create our first icon. And this icon will be FASFA, shipping fast, to indicate the fast delivery and make it five bags. And the text will be danger. So now m before, and now we're good. Let's add fast delivery right here. And if I go back, refresh now to get this icon and then fast delivery. If we want to add something here, we can add a paragraph. So maybe usually around five to seven days. Let's go back and refresh. And as we can see, we've got fast delivery, usually around five to seven days. We still have two left. So this is fast delivery. We have no best prices. Let's go ahead and implemented. We can simply copy this column, two more types, 1 and 2. Instead of fast delivery, we can write best prices. And here we can add the top quality. Now, I already searched for the icons, so I know instead of FAS, have a shipping, Let's remove this. And I thought about best prices do use the hand-holding USD. So as aid and holding USD and detects will be the inter, also the kidding that it's red. And here a arrow and then circle up. So this is it. But instead of FAS, we're going to use FHIR. So these are simple classes and four foot Font, Awesome, and we don't have to worry about them. We simply can't copy them from there and implement them in. Now, let's go ahead and refresh. We have best prices, top quality and fast delivery. So let's change these paragraphs. Instead of usually around five to seven days. Maybe. I don't know, maybe Lauren, eight. And then we have here top quality. And it's also learned. So go ahead and refresh, regard our Y AS fast in a very best prices and quality. And we have small a definition here. Oh, introduction to our products or company. So this is it basically for the About Us page. I think it looks nice and simple. And of course we can go ahead and create our Contact Us page. No. So before that, we can simply remove all of these and add them in science, our about us. Fine. So let's go ahead and create here a new file named about EJS. And this will contain all of this section. So let's copy it and paste it here, but make sure to include the header and the footer. So I'll copy this one included here. And then we're going to have the footer also. So please here. And now we're good. We went back to our first position. We have hello from home. And these lines here. So this is basically for the About Us. And whenever we want to implement or you work with the back-end, we can adjust this. Soever we press on this about, take us to the, about the js. So we'll leave this for later. But for now let's go ahead and create a contact page. So let's go back here. And of course, we need, or we also need to create the contact to the EJS. But as I did before, I'll first work with the home to the EJS and then I move it back to another file. So for now, let's create here a new division, and this will be the container. And I'm going to add some classes also saw will be contact form and BJ dark. And I was thinking to add the contact image class. And these classes we're going to use discusses in the Ionic CSS file, but for now I'm going to add them here. So class will be a baby, a Rocket Chat tax slide. And then we have a 5 x pD D3. So this is it basically, if I go back and refresh, going to get this and we have this message, I could. And we're going to place it in the middle. Then we are going to have a box here, which will say to enter your email address and your message. And if you're assigned, then maybe we can change it to enter the message only because we already know the email address. So this is the general idea. So let's go ahead and implement it now. Now inside. Then, maybe create a form. And we have the method and action. We'll leave that for later. Inside this form, we have the age three where we're going to save. You would love to get your feedback. And alkylate the class text slide. Go back and refresh. And as we can see, we cut this. We would love to hear your feedback. Now, we're going to start them and paste them in the middle in a bit. But for now we are going to simply add them right here. So this is the h3 we can add. Our division should be a row. Inside this row we're going to have the glass medium sex, the column, sorry, and then we have the form group as usual. And you want to have the input of type text. And maybe the name will be X name. And then we have the class form control, and then the place holder, and maybe your name. And now we add the value, but for now and leave it until. So this is basically for the input. So let's just copy this two more times. For the e-mail phone and then the message, the actual message. So let's see. We have here our email and then we have text. Email. The type should be e-mail. Then we have the phone. So the type text is okay. We simply need to change this to phone and then your phone. And let's see what we built and now refresh, we got these four inputs and they are all below each others. So we're going to fix them in our CSS file. For now. Let's just create them. Let's delete this. And now that we have our name, email, phone number. Again, add the send message. So let's create it here. And it would actually be the same input type text. Maybe here is submit. And instead of tags. And then we have here, instead of the name, I'm text name, businessman, submit. And then we're going to add something on Clegg. Placeholder. Maybe just delete the placeholder and the class will be btn contact set of form control. So BTN contact, the value would be send message. So we have sent message. And now we're good. If I go back and refresh, we have this button here that says Send message. And if we want to adjust it, we can simply add the btn here, refresh. And it disappeared since we didn't use the Text slide. So if I use text, maybe danger. Let's see, Refresh. We got this button right here, but for now I'll leave it as before, the original way, and then I'll adjust it using CSS style. So this is a basically for the send message and these are on the same column. And now let's create another column where we are going to add our actual message. So column md 6. And this column we're going to create a form group as usual. And then we're going to create the text area. The name should be text. Message. Class will be for control. And I think we're good. We have everything we need. Maybe style, the width to be 100 percent, and the height to be also maybe 150 pixels is okay. And now we're good. We have our text area. Finally, we need to add the send message button in this case. So let's go ahead and create it right here. Or maybe we're good for now. We actually, I was thinking to move this to here or let's see it. But go back and refresh. We've got our text area and we've got our message. I think it looks better that way. So this is the general idea. And in the next video we're going to style these, this form and make it look better by simply placing these in the middle, having some padding and margin over here and there. And changing the style of this send message button. With that being said, this is the end of this video. See you in the next one.
8. Brand: All right, So now we're done with our home for about and contact us and betas, we can continue with the brand page. So let's go back to localhost 3000, and this is the page that we have. Let's just move these to the feedback page or the contact page. So here I'm going to create a new file and name it, contact that EJS and then go to Home, copy all of this and simply pasted inside the contact. Don't forget to add the header and the footer to each EJS file you create. So here we have header, copy this and add a tear and footer. So now I'm set up here, we have was there and now we're good. If I go back, save, let's go back here and refresh. This is the homepage till now. And we already created the about and contact our speeches and we can use them whenever we want. So for example, if the user press on about, it should automatically take him to the about page instead of this hashtag. Now, let's jump into the brand page. And in this case I'm going to build it as usual and the homepage. Then whenever we done, we can simply remove it and place it in the brand that EJS file. So for now, let's start with creating the division. And it will be a text centered and the background, I'll give it the name background brands sold, use it in the CSS later. But for now, this is it. The H1 will be maybe brands. And I'm thinking as to have some padding. Years of class will be BT five. And of course, going to write a paragraph with the class lead Pb. I've also, and I'm thinking, choose your product from the brand you like. So this is small introduction. If I go back and refresh, we're having brands and choose your product from the brand you like. And of course, we may want to add a background here may be an image or a background color, and we'll figure it out later. But for now, this is the main idea. And inside this and thinking to add a search input so the user can search for the probe or the brand he wants. And then, uh, maybe the button here. So let's go ahead and do it. So it will be inside the form and the form really empty for now. And the division will be an input group margin, bottom three. And then a max auto. I think this is good. And then we have the input. So input of type text, the class will be formed controlled as usual. And of course, we need a place holder. So search for your brand. And then we have the name that we're going to use later. I'm thinking brand-name. And then we have maybe add the button and it will be on the same line of the input. So I'm going to use the input-group append class. And then add the button of class, btn, btn, BTN outline, secondary. And just to make it gray and then E5. Of course, the type will be submitted. And then we have the actual button which is search. So now if we go back and hit Refresh, known to have the Search button, but it looks very large. It takes all the page, so maybe we can adjust it. We have the Search button here. So instead, whenever we create this input, instead this and this division, we can create actually the style that we want and we want the max width to be maybe 35 REM. Let's check. Now if we go back refresh. Yeah, I think it's good. But we can also maybe do the height. So in this case, maybe add here. Yeah, so we delete this margin, bottom five and our she'll go back as we can see, we got our search bar with the Search button here. So this is it for the brand. Choose your product from the brand you like, and the search bar. Now, let's move on to the actual cards, where we will be having the cards. So the user have two options. Either choose the brand by searching for it, or we have here some brands listed and you can choose any of them. So let's go back and hear. After getting done with the form and the division, we can start with our new division, which will be row. And I'm acts auto. And of course, inside this row we need to create the column, so column sex and a max Auto. Also inside this row, I'm going to create another row. And we'll see why in a minute. But for now let's take it to the plant. So column six, or maybe at medium sexier. So maybe medium sex and kind of pull large at will be four. And MY to add some padding on all sides. So P1. Now we have our structure and we divide it actually hour, maybe our page and 2. Two columns whenever we have a medium for smaller size screens and into three columns. And whenever we have large screens and how do we know it's two or three. So the screen is divided into 12. And here we are using six and medium and small. So 6 times 2. So we have two columns for medium or smaller screens. And he will have four times three, which is 12. So we have three columns whenever we have large screens. And we'll see that in a minute. But for now let's create our card. So we have heard and I'm going to give it the brand God. This is, we're going to use NCSS. And of course, let's create our form and will have an action later on. But for now let's stick into this for MD. And we're going to have an image, going to choose an image in a minute. But for now, let's have the card image. And of course, I'm going to the style because I want the image to have a maximum height of five REM. And now we're done with the image. We can create the header of the card. So I'm going to create a new division in which I'm going to maybe the class, which is the brand name. So I'm going to have a paragraph with a class of lead. And here we're going to have the brand name. And then let's go back here. And let's create the other division, which will take the submit button. And let's create it using text center and some padding on the top. And this button will be of type submit. So types of math. And then we have class btn, btn primary. And then we have maybe explore. And now we're good. If I go back and hit refresh, you're going to get the first card. So we have the image here, but we didn't add the source of the image yet. Don't to do it. Later. We have the brand name and explore. So I thought maybe make it simple. And whenever the user is interesting, is interested in the brand. He can always press on next Tuesday to the actual brand with the products listed. An another page. Maybe you create a product page where the user can see all of the products of this specific brand. And then we can create also a product page for the specific product that the user chooses. So this is it basically let's copy this a couple more times. So maybe we have this row and take this column and we have another row. Maybe you can copy this. So let's see, it ends here. Copy this few times. And Go back, hit Refresh, and now we're good. We have our brand name, images and the explorer button. And now let's go ahead and add some images here. So whenever you want images, you can go ahead to pixels.com. And these images are completely free so you can choose any image you want. Maybe I'll take this one for now. And you can press on this button to download it. And of course you can donate or tanks on Twitter or Instagram, the maker of this image. I will skip it for now. Go to choke show in folder and then maybe take it from here. Appeared, cut it out and then paste it inside a new folder that we go into Create, I'm thinking to name it images and maybe added to the view or public folder. So let's see. I'm thinking to get this here, maybe named temperatures. And inside this images folder, we're going to create the actual or maybe paste this first. And then let's go back. And of course, we can always take this folder and a set and the public one here. All right, so now inside the public we have CSS and images inside the folder of public. So this is it basically, we chose one image. If we want, we can also choose this one. And now we have our two images. Let's renamed them. And I'm thinking image one and image two, and always check for the dot file. And of course, we'll see that in a minute, but you need to make sure that whenever you are writing in the source file here, This is our image. And whenever we are writing here that we want the image, for example, this up and public images. We want this one. We need to make sure that we write the dot file, correct, otherwise the image won't appear. So this is it. We can now maybe add the images here. Let's add these two images. During this, I'm going to add it such as dot-dot images and then the actual image, image one that PPG. And now if I go back to the e-commerce website, we're going to see that we got the image here. And of course, let's delete all of these because we don't need them for now. I'm going to copy the others. So we change the image of the first one, which is this. So I'm going to delete all of this. And let's copy these couple of times and change the second image. So now we're good. We can change this image 21 more time. This is also Image 2. Let's go back and hit refresh. And as we can see, we got our images. Maybe you can adjust them, but for now, we're good with this. We have brand named the image and explore. And this is the brand page. Maybe you can add the background color here. So let's check if we have background. And if we wait, let's take maybe this one. So now we have it here. Let's just rename it. This is the background image brand. I don't know if it will look nice, but let's try it. So we actually didn't add it here. We need to add it in the CSS file. So in the next video we're going to the CSS of the brand folder file. And of course, we're going to continue with the category and then the products, the actual products. And we need to also create the admin page where the admin of the website can change, add, or do anything he wants inside this website. So that being said, this is the end of this video. See you in the next one.
9. Products: All right, so now that we've created our brand page, Let's go ahead and copy all of these into the actual EJS file. So let's go ahead here and create a new file. I'm going to name it a grant that EJS. And of course, let's go back, copy all of this and paste it inside this brand. And we need to absolutely add the header and footer. So this is the header. And of course, we need to add the footer. And now we're good. So we have our brand pitch ready. And now let's go and create the category page. So what I'm thinking is to create here a brand and categories. So whenever the user click on brand, it will take you to this page where we have the brands and of course we have the image right here. And same thing for category. Whenever the user clicks on category, it will take him to the categories and he searched for the category he wants. And I think this is it, but we also need to add the background here. And we said that we're going to do it in CSS. But for now I'm going to copy all of these again and paste them and the homepage or the category. So it will be the same, but with a little change of categories instead of brands. So let's go back. And inside home. I'm going to paste them again. And here instead of brands, I'm going to write categories and choose your product from the category you like. And then we have search, search and brand name, category name. And of course, let's change all of these at the same time, some brand, brand. And we also have here. Yeah, So this is it. Let's go from here. We have also brand and brand. So let's delete all of these and type category, the very name. So if you go back and hit refresh, we have the category name, category name, and we missed one here. So this is it that the library name. And now we're good. We have our categories. We have the categories juicer product from the category like we have the search. And we also have these guides for the. And all of these are going to be changed once we work with the back-end and the databases. So for now, I'll leave them like this, but of course we need to change them to the actual name of the category. And I was thinking maybe add some padding here. So let's go back to the disk division. And inside this one we have the form and maybe add some padding bottom five, maybe. Let's go back and hit Refresh. And we have now our padding of five pixels. And now forget, let's add the actual background here. So as you can see inside this one, we added a class name right here. So we have the background brand and leave it as brand for both categories and brands, since it won't change, I'm going to choose the same background for both of them. And of course, let's do it at their term when you're done with them. And now in the style.css, we can add our actual background image. So I'm going to call background a brand and then use the background image as, I'm sorry, background image URL. And of course that the images, then we have a background image, brand the GPG. And now we're good. If I go back and hit Refresh, going to have this background, we can change it if we don't like it, but for now, I'll leave it as it is. And of course, this hello from home one b and our actual website. So let's go ahead and delete it from here. And now we're good. Refresh. Now you can see we got our categories. Choose your product from the category you like, and the search, and also the categories that we have in our store. So this is it basically for the categories and this is the same one as for the brand also. So let's go ahead now and take all of these and place them in the categories file. So I'm going to create a new file. I'm going to name it category. The EJS. Then go back to Home, copy all of this, and pasted inside this category. And as usual, we don't want to forget the footer and the header from here. So this is that basically we have our category, brand and about and contact us. All of these are ready to now if I hit refresh, we don't have them in the homepage. So this is it basically for the category and brand. Now, all we need to do is to create a new product's page where we're going to list all of the products that we have, either in the brand or the category. And this depends on the user. So what we're going to do is in the back and S2 filter. All of the items according to the brand or the category. And whether the user wants. Maybe if we click on brand and it takes him to the brand, brand Thrive. And then of course, he chooses the brand he wants. So we need to filter all of the items that we have according to the brand the user chooses. So this is the idea. So let's go ahead and create the products page. Then, create a product page for the actual products themselves. And I think it sounds a bit complicated, but trust me, it's not, it's as creating a category or brand file. So let's go ahead now and create a new folder for the products that the JS and another folder for the actual product. I'm going to name it product. So products here we're going to have all of the products that we have according to the maybe what the user chooses, either brand category and whenever you want actually. And then whenever we are at the product's page and the user likes a specific product, then it will redirect him to the product page where we have the explain details of the product. So with that being said, let's go ahead and start with the product's page inside our homepage as usual, and then tapetum into the product. So the js. So now as usual, as we have in the products, all the categories and brand, we're going to copy this first division because I think it looks good. So let's paste it here. And now we only have this one. So let's choose, maybe change categories to products and then choose your, a product from maybe a category you like. I think that looks good also. If you want to remove it again, go ahead. But for now we'll keep it as it is. But here we have the products and then we also have the search bar as usual. And now let's start with the actual product. So I'm going to create a new section with the background may be light. And then going to start with the row, then we have Ireland. And inside these I'm going to create our unordered list. And this will take glass products. Don't use it. Indeed, CSS file. And then we have the actual list items. So the first list item will have the product division. And then inside this product division going to have the link. And of course in this link it will point out at nothing for now. Then we have the style. I'm going to make the text decoration to None. And now inside this link we're going to place two things. The first one is the image and then we have. The title, price, brand, and category of the product. So let's go ahead and create first of all the image. And inside this image we're going to add images, maybe image one team. And then after adding this image, we can add the title. But before that, let's create a class of product image that we don't use later. And then we have the new division, which will be row, maybe margin top two. And then we have the center block and then column. And now we're good. We can create our span and let's name it. Maybe for input and dance style as usual, text decoration to none. And then after that we can create the product name class with H6 as the heading. And inside the span we can have the item vital to now go back and hit Refresh, going to have item title with a background light. And of course we have this unordered list and we're going to adjust them in a bit, NCSS. So now if I go back here and add few things, so when I'm thinking is to have the images and then we have the title. And those are the only thing to add. Or maybe the user can click on to be redirected to the special product. And we have also the brand name, category, name, and size. I'm not going to include them inside the link. I'm going to write them, just add to them. Now if I go back and refresh, we have our image and then we also have the maybe item title. So now we need to adjust the image item title and add few things. So first of all, let's create a new division which will be of class column text. And then I'm acts five, H5 center block and product price for later. And in this, I'm going to add the product price. So item price, maybe I add an example such as $10. So this is for the product price, and I'm going to add the product, brand and category. So a new division with product brand as the class name. And inside this one I'm going to write brand and then followed by a span with some classes. Maybe just make it bold. So font-weight, bold. And then the brand may be. Let's try Google for now. And then we have another one for the categories. So product category. Or maybe you can work with brands since it's the same. So, and here we're going to add a bakery. And then followed by the span would be also fun way both. Then we have the category. I simply add a degree because I don't have any top of my mind. And we're good now we have the brand and category. We still have one thing which is the size. And I'm thinking to add it inside this division. So we have here product, brand also. Then we have size followed by a span with the class font, weight, bold. And we also have the size, maybe to a 100 milliliter, and here maybe changed the plant and make it johnson. So now we're good if I hit Refresh. So we're going to seem brand Google category Johnson size to a 100 milliliter. And this is it for this video. In the next video we're going to adjust it using CSS. So see you.
10. Product: Alright, so now that we're done with the first product, let's go ahead and adjusted using CSS. So inside our CSS, style.css, we're going to create here a new but for the products. And of course, let's start with the products. As you can see, if I go back to Home, we have here the product class. So I'm going to comment in CSS. So I'm going to display flags, then justify content start. And of course, the align items going to make it flex that. Then we have the flex wrap wrap. So now if we go back and refresh, we can see that we got out of the items at the left side. They were already on the left. But now for any changes that might occur, they will still on the left side of the image here. So now let's adjust the items, the actual items. So inside the products, we have the ally list item. So all of the list items inside the product, we need to list-style-type to none. We don't want the style type and padding will be 0. Then we have float. Maybe I do 0, 1, 34, yeah. And then we have the height. So the maximum height will be 25. And then we also have the border button, bottom. And of course, solid 0.1 REM. The color will be as usual, 31, eight, V5. And finally, I'll add some margins on all sides. So 15 pixels, ten pixels than 15 pixels, and finally ten pixels. So now if we go back and hit refresh, you're going to have this as our background. And of course, we need to adjust some of the characteristics. Let's go back and let's see inside the products we have now the division which is product. Now we adjusted the list item. Let's go ahead and, and make it a little bit smaller, but actually a lot smaller. We actually wanted like this. So let's go back to Stein and work with the product class. So product arpanet then displayed lacks. Then we have flex direction, which is to be in column. And finally, the width will be maybe 15 RAM. And of course, we need to adjust the product name. So font-weight, bold. Then we have the color. As usual. 31, ATF me 5. So now let's go back and hit refresh. And as we can see, this is our image and we can agree that it looks very big, so we need to adjust the image. So let's go back here and adjusted using the product image that we created earlier rather than Arpanet. And we need to adjust it by using the max would be, well, hurry max height to be also well, I am. Now if you go back and hit refresh, you're going to see we got our first image followed by the item titled brand, category size and also the price right here. Now let's adjust some of these also. If we go back to our homepage, we have here the product name, product price, and product brand for all of these. And of course, the product image for the image that we just modified now. And let's adjust them by calling the product brand. Maybe make the color a little bit. Such as 880, 880. Think it will look nice. 88 atm thing discovered is good for the brand and size and of course, the product price. Now, let's work with it. Maybe just make it bold. Let's see. And then we also have maybe the product category. And we said that it's the same as the brand, so we're good for now. Let's go back and hit refresh. And as we can see, now we got our boat. This is bold and these are little bit like, great. And we also have the item title and the same color as hovering over these items. So this is the first item we have. We have the image, we have the quality info for now. And of course, what we need to do now is to create another product page where the user, if he wants to know extra details about this product or to actually purchase it, He can click on either the image or the title. And it will take you automatically to the product page where he can add it to the discard, see some details about this product. And maybe you can add a rating at the end. See what we're going to do a later. But for now this is the general idea about the product, their products page. Let's add a couple of products here. So go back home. We have inside this row, we have this column. So let's go ahead and copy it couple of times. And let's see what's going to happen. Yeah. So here, 12345. If I go back and hit refresh, we're going to get these products. We have six products for now. And of course maybe we can remove these findings later. But for now it's good. And even if we change the size. So at medium size we're going to have to, and at sponsors we're going to have one. And of course maybe you can adjust this to be at the center whenever we have small screen such as this one, maybe it's a good idea to place the images and the following information in the middle of the screen. And of course, whenever we have medium of something bigger, we're going to have them on the left side. So the additional well construction or modifications that you can do is to actually make it at the middle of the screen. And of course, whenever we have large screen, make them maybe four at the same one instead of three. Yeah, it looks better. So for example, this is the first 1, second, third, fourth year. So maybe it will look better, but for now, we'll stick with this. This is the product's page. Let's go ahead and copy all of this and paste it and the products that EJS class or file. So this is it. Yeah, Let's go ahead and copy this whole section into products so the JS, and of course don't forget to add your footer right here. And then the header at the beginning of the file. So this is the products are the chairs. And now if we refresh our homepage, going to get these lines footer and header as we want. So now the next step is to actually print the actual product page. So we said that we have several uploader products. And whenever the user wants to check a 11 product or one specific an item that he likes. He wants to see more details, for example. So he click on the electron, the product image or a title, and then it should do direct him automatically to the product page with extra explanation. And maybe you can add something at the bottom of the page that says, maybe you might also like and then some extra products from the same category or the same brand that he's checking. So this is the general idea. Let's go ahead and start with it inside our homepage as usual, then copy it into the product. So to do that, let's start with creating the. So this is the section. And inside this section we're going to create our container. Fluid should be and the ending of the container lowered. And then inside this going to create the first row. Maybe add a row of 0 for small sized screen or anything but the large screen and one. And we'll see that in a moment. And this will be empty. Then we're going to have a column sex. And for large screens of four. And align items, center. And this is where we're going to add the image. So let's add image. The source will be as usual pattern images, image1, but GBG. And of course we don't have to add some style, which is the max width of this image to be 300 pixels. And I think we're good for the image. Now. We're going to create another column for large screens. And this will be also be empty. And then followed by another column 6 where we're going to add the information, I'm sex and for large screens as it's going to be four. And of course inside this panel, down to create the form to submit or to add to cart. And inside this I'm going to have the title. So this will be of class text to make it blue. And then we have the item title, and then followed by a paragraph with the class H5 as Heading 5. Then inside this heading we're going to add the price. So price. And then inside the span, going to have the price with text secondary data. You can see if I add price, for example, $34, Let's go back and hit refresh. And as we can see, we got the image followed by item title and then the price which is 34. So this is a general idea. This is the actual image. Now here we can add extra information. Let's go ahead and do it right here. We have the price we have before, and then we need to add brand. So let's go back here and add a new class or be a new paragraph. And then we have the span, which will be having the class font, weight, bold. Then we have the brand. And of course, we're going to add the actual brand such as Johnson in this case. And this brand, sorry, Johnson should be between this parent paragraph. Now we're done with the brand. Let's jump line and then create a new row for the sizes. So what I was thinking is to get a new row inside this row going to have the column of two and the margin of top of two also inside the SRO going to create this size. And of course, the class should be taxed secondary. And of course, maybe I'll make it having sex. And then followed by another column. And this column would be the same as before, so column 2. And here we're going to have the actual size inside a paragraph of class league. So maybe the size is 200 milliliter. And of course, if I go back and hit refresh, you're going to get item title price, brand Johnson size to a 100 milliliter. And now let's continue with how many pieces the user once. Or maybe let's copy this one more time for the category. Today we're going to have category. And then followed by maybe, let's say shampoo. And now as a finishing from this row is create another one with column of sex. And inside this column I'm going to create the input group. And here the user is going to add the actual quantity, how many pieces he wants. So MP3. And inside this I'm going to create the actual input of type text name. I'm going to name it box for a later class. I'm drawing. And then the placeholder will be quantity. And then we have the division of pieces to span class input group. So now if we hit refresh, we're going to get this size to a 100 milliliter quantity and pieces. So this is it for this video. And the next one going to add the add to cart and maybe the description of this item. So see you then.
11. Home 1 : Hello and welcome back. In this video, we're going to continue our product page. So we still have the Add to Cart button. Let's go ahead and edit here. This is our row to another row here. And I was thinking to give it a class of the moire three just for depending on the y axis. Then I'm going to add our card, which is the button. And the type would be, as usual, submit. And I'm thinking to data, the toggle for later. I'll build it for now, like this. And the style will be display inline block. Finally, we have the actual classes and we're going to use Bootstrap classes and btn and btn dark, then Add to Cart. So this is it basically for our button by go ahead and refresh it. We're going to get this button and it's dark. And it's suppose to redirect us to the maybe to the products page where we have all of the products that the user has chosen for now. And of course, if the user is unsigned and signed in yet, it should actually take him to the sign-in model where he should put his e-mail address and password. And of course, if he doesn't have an account yet, he can also go to sign up to sign up with a new account. Then go back here and add this item to as cut. So as we said, this is our garden. Let's go back. And I was thinking of adding a description here behind the item Titan. So maybe we'll do it in. We have a title. Let's add a bar graph where we have Lauren. And of course, we can always choose some classes for our Biograph. Don't choose the class mode to make the paragraph small. And as we can see, this is our paragraph. And then we have the price, brand, category, size, quantity, and then add God, and of course our image. So if I just decrease the size of this, let's see what's happening. Let's increase it from both sides. So as we can see, we have our image and the information at the same line. So this is it for the products, the product page. Let's go ahead and move all of these to the product that EJS file. So here, let's see. This is the beginning of this section of the way till the end here. Let's take them at them here. Then go back and take these header and footer. So this is the header. Let's take. And place it in the product page. And then let's go all the way down and add our footer. It's been there for. So I think now we are good for the product and product page. So till now, if we check, what did we do? We we've done the homepage. I'm sorry. We we've done the brand category about contact us. And we've done two pages that are not visible for the viewer inside the navbar. And they are the products and the product page. So for now we're good. Let's go ahead here and save. And go back. If we refresh, this is our home. So now we start building our homepage. Then of course, we're going to build the Orders page where the user can see all of these orders, previous orders, and current items in his card. And we also need to build the Admin pages as well. So that Let's start with the homepage. And I was thinking to add a carousel right here to maybe visualize different brands and then add a bestseller. We have the bestseller products. Then also add another kerosene where we can visualize the different categories. And of course, we might add a few products at the end. So let's see. Let's go back and hear thank to start. Right. So here though to create first division. And I'm going to have a background image strategy in some bad style. Background image will be equal to URL of our image. Check it later. But for now, the background size I'm thinking to make it cover. And of course, the background position would be centered. And then finally, we also have the height. I'm thinking 35, maybe 38 H. And then we have background, repeat, no repeat it. And finally, the margin will be 0. So this is for the image and we'll check it later. But let's create it go. And when I'm building here is actually an image, a background image. And then we have something like welcome to the e-commerce website and a paragraph at the bottom for, so for example, let's have glass with p or top sides and maybe Welcome to the e commerce website. And then finally, let's have maybe having sex and checkout. Old, maybe top quality items and exclusive offers. Yeah, I think this will be it. And of course, we know we need to add now the actual image. So let's go to pixels. And let's see what do we have some backgrounds. That's a simple, maybe add a ground symbol and that search. And as we can see, we have so many options, but for now, I'll choose the simplest one. So maybe I can go with this one downloaded. And now we have it here as background home. And I ended it here. So if we go back, we have the image and maybe we need to center this information. So I'll add a column. And I was thinking of column for medium and above to be six. And then you need to text center. So text center. And of course going to have the max photo. So this is it that's placed these headings here and go back and refresh. And as we can see, we got a website welcome to the e-commerce website, checkout, top quality items and exclusive buffers. Maybe now we can add something right here as a background of, let's, uh, let's see. So this is our first division. Let's create another one With row center. Then we have some margin, know maybe 0 and some paddings and also background light. And then let's create the column of four. Inside this column we're going to have a paragraph of glass, lead, maybe top quality. And then copy this two more times. So top quality, fast delivery and best prices. So now if we go back and hit Refresh, going to get something like that. So we have the welcome page, checkout, top quality items and exclusive offers. Then we have some of our characteristics. For example, top quality, fast delivery, and best prices. So this is basically for the welcome page, and let's start with the best sellers. So if we go back and let's create our section here. So this section will have several classes, maybe light than text. And some padding. Let's open it up and then create our container fluid. And of course, we need to create the title where we have the best tellers. And then the paragraph which says check out some of our best sellers. So going to have the first row and some classes such as text. Then we have the text center. And this is it for the growth and Phantom with a margin of four. And inside this column, thinking to add here best sellers. And of course add some classes such as display for and then MB or. So. Now if we go back and hit refresh, we're going to get something like this. We have our bestsellers. Let's paragraph here. So after our heading, maybe you can add the actual paragraph right here. So class will be lead. And then we have check out some of the best-seller items for 2020, for example. Let's go back and refresh. And this is it basically. And now we can add three of the best sellers items. And we can add them using maybe cards. So let's go back to our code. And this is the ending of the scroll was telling the container fluid. And now let's create another row. Of course we need to add align items, center, text, center, and then we have a max or two. And then let's open it up. Now let's create the column. So column for large screens is four, and for small screens is 10. Then we have a max auto. And this is basically for the column. And now we can create our actual card. So I'm going to create the card with card one for CSS. Use this class for CSS. And then we have text dark MY for endemics photo. Let's open it up and start with creating the image. So the image source will be dot-dot images. Then we have the actual image. Let's suppose we're going to use a much one. And let's add some classes right here. So the first class will be a max autumn. And of course, we don't forget to the module on the y-axis. As for the style, I'm going to have the max height with a 100 pixels. And same for max width of 100 pixels. Now if you go back and refresh, as we can see, we got our image with nothing till now we can add some information at the end. Let's see. Let's go back. And of course, we can add the name and then maybe add a button that says See details. And if the user clicks on this button, it will automatically redirect him to the product page of this specific item. So this is it. Let's go back. This is the ending of the God. We have the image. And of course, inside the card we can create the guard Buddy, Buddy. And then we have the first heading, which is the title. And we still have actually the title and the button. And let's add two other than this. Of course, we're going to do them in the next video. So see you then.
12. Home 2: Hello and welcome back. We still have the title and of course the button to see details of this bestseller product. So let's go ahead and start with the heading that says maybe the title. So I add a heading five. And then subclasses such as text, uppercase. Then we also have fun, weight, bold, and of course MB, three. List item. This is for the CSS and I'm going to add the actual title, Let's suppose Johnson. And after that, I'm going to add a form to submit. So the firm will have no action for now. And of course, the button, the actual button with type submit. And then some classes such as PTEN, some paddings and all sides. Maybe text, uppercase or maybe not. Let's add the price button and the CS4 or later. And I'll make it yellow. So I'm adding the BDI and wanting class and tax flight. So let's see the details. And of course, if we go back and hit Refresh, going to get Johnson and see details. And this is basically for this card, we can also maybe have the width on default card. So let's go back. Let's see. So instead of specifying the max width to a 100 pixels, I am going to say width to be equal to a 100 percent of the card. And instead of having some margin on, let's see, instead of having some margin on top like this and button, I'm going to specify that the margin should only be on the button. So instead of MY app.use MB. Thus we can see we got our image. And of course, this title is not only one word. It's basically, for example, Johnson shampoo, 400 milliliter. And I think it looks good for now. And of course, all details should be inside the product page that we created earlier. So this is just the definition of the product and an image, the title. And if the user is interested in this this specific item, he can always go to the product page by clicking on See details. So this is it for the first product. Let's add two more. Let's go back, copy all of this and paste it two more times. Maybe change the image. Maybe this one to image two and the last one, and keep it as image one. And let's see. And as you can see, we got our bestsellers product. We have three products and we can always change them whenever we want. So at the end of our project, we are going to build maybe a specific part where we can change these products right here. So this is basically for the bestsellers. Let's see what we're going to do with the, maybe the brands and categories. So what I'm thinking, thinking is to have the brands here first, before it, the bestsellers, then add the categories here. And of course we're going to do it using carousel. So if we go back to bootstrap your two components and then carousel, going to see several carousel types. And we're going to use this one. So this one with indicators, we have both the agents and these can choose between them. And this is the code of this. And of course, maybe you want to add the title and some definitional information about this product or this brand. We can easily do that by adding the width caption here. So let's go ahead and copy all of this and go back to our code. Go to top quality before the bestseller section, I'm going to paste it. Let's see our the website now. And as we can see, you have the first slide. And if we go back, so I added here some headings for the first one. And of course I added the images as we can see right here. And now if we go back to France, you're going to get this. And I know it's a very big for the screen and you can fix it. But this is the idea. If we press on the indicators, they should automatically take us to. This third one is not available, and this is the first one. So let's go back and adjust that. We have images. I forgot to add the forward slash. And this is it basically we can always make it smaller. So for instance, if I want to make it at the middle of the screen, I can add a new row, then Add Column 3, 4, right? Column sex, to add our carousel. And column 3 for the left. And now open this here, and then copy all of this from here until the section, and then paste it right here. And then maybe if we go back and hit refresh, we can see that we got our brand rate here. And as you can see, it changes. The maybe the height of the image changes according to the picture itself. So I was thinking to add a max height to the images. So here. Einstein max height. And I was thinking maybe 400 pixels. And now I'm going to copy this two more times here and then here. And if we go back to fresh, going to get this. So as we can see, it looks better now. And we also have here the title and some captions. Yeah, about the product. The user can check all of the products from here. And of course, we need to add maybe the first maybe the title of the brands. So I was thinking to add container fluid and then add here the first row and then the heading to brands. And then also I'm going to add text centered. And of course I'm going to add the paragraph with the class lead that says, shut out, maybe our checkout, our brands. Now if you go back to refresh, going to get brands, checkout our brands. And of course, we can maybe make this in another color such as a weight or maybe texts secondary. So let's go back here and add to this class tax secondary. Now if you go back and hit Refresh, going to get this one. So we have brands, checkout our brands. And here we have all of the brands. And of course, if we don't like it this way, we can always adjusted. So for instance, I can move this to here, it's going to be aide. And finally here I'm going to also put tune. Now if we go back, I think it will look a bit nicer. Yeah. So this is it for the brands. Will do the same thing for the product. So I'm just going to copy all of this and paste it right after the bestsellers. And of course we can add some margin here. And I forgot to maybe add all of this, all of this row to the actual container fluid. So this row let me just close it. Take it all. Let's see. Yes. So this is it going to take it they sit right here. And if I go back and refresh, going to get the same thing. So we're good and maybe add some margin on both, both sides. So MY five, and I think now we're good. I refresh. This is the brand's checkout, our brands and some margin on the bottom, and of course on the first here. So this is for the brands. Let's go ahead and copy it. So I'm going to close this container fluid. Not be all of it. Then open it then after this one. So this is the best centers as close as I can created right here. Let's open it again and check out our categories. And then inside these categories we can add also here instead of brands categories so that the agrees. And I think no, we're good. This is our homepage. If we scroll down all the way down, we can see the categories. We have. The footer, we have our header. We have some, maybe some info about our sharp and of course the bestsellers right here. And the back end. Of course we're going to add the right here. We're going to add a, for example, if the user wants to click on this specific brand, you can always click on it and it will take him to the brands here, and of course to the specific brands that you want also. So this is it. And as of this best seller, if the user chooses this product, it will take him directly to the product itself. And this is the idea of the homepage. Let's just delete these right here. And I think we're done for this. Let's refresh. And this is it. This is our homepage. In the next video, we're going to create the place orders and the location, maybe the payment. And of course after this we're going to end up our front and a design with the admin page where we're going to let the admin change anything he wants from. Maybe brands, categories, add new items, new product, and modified them. The prices, the description as he wants. But this is it for this video. See you in the next one.
13. Place Order 1: Hello and welcome back. In this video, we are going to create the Place Order page. And I was thinking, let's go back first. So whenever we are here and this and let's suppose I am looking at a specific item. So I'm in the product page where I also have the add to cart right here. So as we can see, if the user clicks on this Add to Cart, it should directly take him to the Place Order page where he can see all of the previous orders. And you also can see the card itself. And it can remove items, add items, and check the total, then place the actual order. And I was thinking that before that if the user didn't enter his shipping address or anti payment method, it should actually adds them and they will also appear on the Place Order page. So let's go back here. And let's create a new right here. So new file. And I'm going to name it the shipping, God. But EJS. So this is the first. And in this file, as always, we need to include the header and footer. So let's go back, get this basic right here, and then maybe change this to footer. And now we can begin. So the first thing I was thinking to do is to create maybe the container fluid. And let's do it right now. So container fluid, and then also the row. And of course, we're going to create some P13. And I was thinking that the first on large screens, the first division with four, it will be empty. Then I'm going to add another division with large forward also inside this division. Let's create another right there, and then some padding on the y-axis. And of course here we need to add the progress bars that we're going to use. So what I was thinking is to add right here a progress bar that will be updated every time we finish a task. So it consists of two or three tasks. The first one will be to add the shipping address and then rest on complete. And after completing this task, we have the payment method. So this progress bar will be updated every time we were done with one task. So let's create it right now. And to procure a pro, create a progress bar, you can either take it from Bootstrap or created by yourself. So it will be of class progress and maybe bg secondary. And what I was thinking as to add a margin, bottom three. And of course, I need to create the progress. Butt. And then let me just shifted to the right. So this is the progress bar, maybe background warning. And then the style. We're going to have the width equal to 25 percent. So now if we go back oh, I'm sorry, we built it in the shipping. God. And it's a case. Let me just remove it and place it in home after some lines of the Earth times 20. And let's try it here, refresh. And as we can see, we got our progress bar right here. So this is the first one. And if we go back now and change this to 50 percent, we can go and we notice that it's now 50% instead of 25. So this width to change the progress bar from secondary to warning. And it looks like you're achieving something. So this is it for the progress bar. Let's continue. So this is the division and this is economy. And of course, I'm going to take this and start from here. So the second division will be the sine n is shipping the payment and this order. And these will be right here after the progress bar. So let's create a second row with PDE5 and then also create some columns. So the first one would be sine n and the division is second deficient would be of class maybe Column 3. Also. We have seen and in this case we're going to have shipping. Then column three him with payment. And of course finally, the place. So as we can see, we now currently at the disposition, maybe let's change this to 25 again. And as we can see, we have sine n shipping based payment and place order. And now we are at this position where we have signed end and we are in the shipping shipping dusk. So in this case, our back and we'll take care of checking if the user is signed in. If this is the case, it will take him automatically to this one. And of course, if it is not signed him, he can also sign in and then come back to this shipping adding the shipping information. So this is sine n shipping payment and we're good for now. Let's go ahead and create our actual box where we're going to have the shipping information. So the first thing we're going to do is to create the code and Tax Center, then also PY file and maybe texts light. And we're going to add column 1 just to have some space at the left. And of course going to have the column tan with Background dark and text. Start. And let's add some style. So style will be the height. And in this case the height will be 28 REM as open it up and create default form will be empty for now. And of course we're going to create the inputs. So I'm thinking to add several input boxes and let's create them using the form group. So for group, and then we have the label. And this label will be of class B. Why R0? And then maybe full address. Then we have the actual input of type text. Then we have some classes such as form control. And maybe that's it, that's the name and address. And of course, placeholder, maybe at the village. And so I think this is it. Let's copy this feud more times. We'll address. Then we're going to change this to city. And maybe here. And you're sitting and of course, the phone number. So here number. And then finally we have maybe let's add the next button where the user can proceed to the next task whenever he finishes at these information. So let's do that using maybe an input group. Or let's suppose, let's say we're going to use the simple buttons. So Tax Center, then B13. And this is at basically button type submit. And then we have classes such as btn, btn-primary. And then we have text center, and this is the button Next. And now if we go back, let's refresh. And as you can see, we got our sine n shipping payment place order. This is the bar, progress bar, and we are now at 25 percent. We need to fill this. And then after printing these, we can go to the next. And of course, after the next we're going to have the payment method. So we're going to update this navbar and create a payment method just like this. So let's go back and create a great down. So now we have the navbar, we have the progress bar, and we have everything for the address. Let's copy this. And of course, let's paste it down here, but let's have some lines. And here we go. Now the progress bar will be at 50 percent. And of course, let's remove these. And now we're good. So this is our The second one where we have the actual payment method and we have signing everything we need. Let's just delete this and start a new division right here. So after placing orders and having these divisions, maybe let's add here a new row text centered the Wi-Fi. Okay, So we're good for now. Let's have the column a 10. And of course, we need to change this form group. So here we go. Let's feed all of this. And that starts with creating a column 2 and column 1. And then we're going to have the text center. And of course Let's have deformed that we are going to submit. And then we have the division and let's have some classes such as the card. Then we'd have text white, then we have text center. So this payment method, since we don't only have one payment method, which is the cash on delivery for now, we're going to create it as a card. So this is it, margin bottom. And of course we're going to add some style such as margin 0. Then we also have maybe none. And then the max width of 18 are in m. And finally, the margin button, ten pixels. And this is it for this division. Let's open it up and start creating some content here. So the first one would be the cut header, which will be Payment 2. I'm simply going to create or time payment right here. And then we're going to create the card body. And here we're going to have the different options, but for now we're going to stick with only one option. So it will be a phone. We're going to use it as a checkbox. So texts start and p53. And now we're good. We can start with the input of type check box. And then let's add some classes for check control. And then finally, maybe add the ID. So we'll use it for later, which is maybe I'll do it example. And let's delete this. Now we're good for the input. Let's create the label. And this label will be, for example, check. And then we also have the form check label. And finally we have the actual labor, which is cash on delivery. And of course, after all of this, we need the Submit or the next button. So let's create it right here. We're going to create the button and the type, or it's going to be submit. And of course, the classes will be btn and btn warning. And this is it. Let's go back and refresh. As we can see, we got our payment method. We have it as a cash on delivery, but we forgot to type next strike here. Now, fresh, as we can see, we got it. Now what I was thinking as to have this next as disabled, whenever we we didn't choose any payment method and whenever we choose it, it's going to be and disabled. And of course, user can go to the next task, which is the actual placement of order. So with that being said, this will be the end of this video and the next video, we are going to place them in the specific files. And of course we're going to do this, going to have a disabled the not checking any boxes right here. And we're going to also create definer place order page. And with that being said, this is the end of this video. See you in the next one.
14. Place Order 2 : All right, So hello and welcome back. In this video, we're going to continue the payment method. We said that we want to disable this button. And whenever we click on a payment method, for example, if we chatbox this one, and then this next should be available for us so that we can press on it. Let's go ahead and do it. Right now. We have the cash on delivery. And of course, the next however, what we're going to do is to add an on-click a right here. So inside the input, this is the chatbox. And unclick going to return a method that we're going to create in JavaScript. So maybe I'll name it terms changed and give it this. And of course, we're going to do what you're going to do is to disable this button. So if we go back now and click Refresh, we can see that it's disabled. And what we need to do now is to maybe change it once we press on this. So let's go back and create a script right here. And in this script we're going to create our function. Let's go ahead and create the script. Inside the script we have the function that we just named, terms changed. And it will take the chatbox, let's limit chatbox. And it will check if check box the chat. So if it is checked, we're going to called the element by ID. So document dot get element by ID. And let's check the ID of this element. And as we can see, we don't have an idea. So unnamed, I'll give it an ID of next and then go to get the element by ID next and then change disabled to be equal to false. So if the checkbox is checked, we're going to make this able to false. However, this is not the case. We're going to get the element by ID and then simply make it true. So this is it. Now a fig, go back and hit Refresh, going to have this button disabled. However, once we click on this, we're going to have it. We can use it and if we remove it, the same as before. So now that we've created the shipping and the payment method, let's go ahead and start with the actual place order. Peach. So now let's go ahead and move all of these to their specific pages. So here, let's go ahead and create a new page and that we're going to name it maybe a payment card and Node.js. And of course we are going to remove all of these here. So let's remove them, add them here. And of course we're going to add footer and header. So this is the footer. I'm going to do the same thing for here. So here we have the header and we're good for now. Of course we still have this one, which is the shipping method. So let's go ahead and remove it also and place it in its appropriate position. In this case, it's in the shipping cut. So now if we go back to our homepage and click on Refresh, we're going to get some empty spaces since we have these lines. Now let's refresh and we're good. So this is it for the first two pages. Now we're going to create the actual place order page. So let's go ahead and add some lines, maybe dn. And now we're going to start with creating the container fluid. Then I'm going to create the row with some padding on the y-axis. Then I was thinking to leave as, as usual, some, some space on the left and then start with the actual box. And in this case, but I'm thinking as to add a row. So we'd have our DOM. And inside this row, I'm going to create as usual. Maybe I just copied them. Yes, so since it's the same, we're going to copy all of this from the previous one topic, go to payment. God, as we can see, this is deficient and we don't need all of this actually, we just need these two. So let's copy them. Right? And let's go back to our homepage at them here. And of course we need to add the globe with some padding, as we said. And let's remove this. And we've got so this is it. Let's place it here. And maybe the division that's missing. And now we're good. And this is the shipping or the progress bar, as we can see here we have it. Now let's create the Place Order, but before this, Let's adjust this. So we've now 75 percent instead of 50. And if we go back, we're now at 75 percent. We still have the Place Order only. So now let's start with creating the actual page. So what I'm going to do is to create a new. Row in this case here. And I'm going to have the first column with maybe seven at medium size. And then we have go with some padding and of course the actual column. And what I was thinking is to add the location. So the first thing we're going to display is the actual location of the person with the information that he entered from the shipping. And of course, maybe an edit button so he can go back to shipping and editors location. So to do that, we're going to use a cart as usual. So card with some background, light, margin button three. And we can start with the card header. And then going to add maybe address, and then followed by the actual address. So maybe, let's suppose village, maybe Street, building. And then after that we're going to have the card body. We're going we're going to display the city. So in H5 and I'm going to do it as ket called title. And then we're going to have the city. And then after that we can create the telephone or the phone number. And in this case, I was thinking to add the phone number on the left and the edit button on the right. So let's create a new row. Scientists stole going to have sex for the first one. And the paragraph will be of text. And maybe phone number. Let's suppose 4, 4, 4, 4, 4, 4, 4, 4, 4, 4. And then after that we're going to create a new column, also sex. And in this case we're going to have the button which will have several classes such as BTN, float to end. And of course BTN outline, primary. And of course the actual edit. Now if we go back and hit Refresh, going to get something like this. We have the address, we have the city, the phone number, and the Edit button to edit all of these. So in the backend, we don't want to make this button. We direct us to the shipping page where the user can edit all of these and then go back, come back to the place holder page. So this is the first one. And let's continue with creating the payment method. So I think it's the same. And let's create a new row right here. And in this case, I'm going to have one column only. And then the card with the background patterns of light. And of course, the margin-bottom three. Let's open it up and let's start here. So this is it inside this division, we're going to have the card header as usual. And in this case, it will only say payment. And since we only have one payment, I'm going to add it simply by using Heading 5. In this case, as usual, it's called title and then cash on delivery. So this is it. Now if we go back to the paragraph and adhered class called Text, going to have maybe free delivery on old orders above maybe $15. So this is it. And now we're done with the second coin. If we go back and refresh to have something like this, but I was thinking to add it under the column which is at medium seven. So let's go back. Let's see what did we do wrong? If I go back to here we have the column and here we should have added this role. So let's remove it and place it right here. Now if we go back and hit refresh, we're going to get the address then the payment method. And we still have some spaces here. And in this empty space, I'm actually thinking to add the Place Order button and where the user can also see his actual orders. So, but before that, I'm going to add a new character right here. And this card will display all of the items that are in the customer Scott. So let's go ahead and start with it. Let's go back. And as usual, we're going to have it inside this division. And let's do it right here for us. We'll create our column, then, I'm sorry, outgrow and then our column. And of course, the sum background with light and much and bottom three as usual. And we have the card header. In this case, going to have the paragraph with some styles such as display, maybe inline-block. And of course we've got to have your orders or cure. Yeah, I think all those are your items. Sounds better. Then we have another paragraph with the class float. And in this case we're going to have style. And we're going to also display inline block. And in this case we're going to have prices. So the items are on the left hand, the prices on the right. So this is for the header. And in this case we're going to start with the cold buddy. Let's go ahead and create a new division with body and justify content center. And as we know, we start with creating E4 to submit. And then we have a row. And in this case we're going to have the column three. And the end in this column, I'm thinking to add the image, the items so that suppose he chooses the item buffet image1 and maybe add some styles. Let's see. First we're going to display inline-block and then going to have the height of five Barry. And finally width of also very end. So this is it for the image. Now let's create another column. And in this case we will have column 9. And inside this column I'm going to have the paragraph for the title. So as usual style inline block, I'm sorry. This is it. We have inside this tile display inline block. And then we have the actual title it suppose we choose chanson, and then we're going to have another paragraph for the price. And this time it will be may be displaying and also inline-block. And of course now we're going to have the class load and, and let's suppose we have 25 dollars. So now if you go back to refresh, going to see something like this, we still have some modifications for this and we're going to do them in the next video. So see you then.
15. Place Order 3: All right, So now that too bad, Let's add the rest of the information so we still have, we already added the title and the price. Maybe we're going to add this, add the quantity actually. So let's add a paragraph that says quantity. And then followed by the actual quantity. I'm going to have it in a span. In this case, let's suppose that the user bought three. And then after that we're going to create a new row after this division. And in this case, we're going to have it for the demo. So maybe column 6 and this would be emptied and we have column and the sex. And in this case, we're going to have the remove button. So let's add the button. And the actual button will have some classes such as PTEN, video game changer, and then float, right? And of course, the type submit. So yeah, I think this is it. Let's go back and hit refresh. And as you can see, we have the quantity right here. Maybe let's add the quantity actually to this one. So let's do that. We'll have here the color, and let's add it actually inside this column. But since we're using display inline-block, I'm going to have a new division right here. Inside this division, we're going to have these two paragraphs and then followed by this quantity. And of course, scientists button, we're going to add remote. So I think this is it basically, if we refresh it, we're going to have the quantity 3 and the button removed to actually remove this item. So now to all of this, we're going to add a line. And in this case, after d4 right here, I'm going to add each part. And if I hit Refresh, want to have this line. And of course if we have several, maybe several items, they will look like this. So let's go ahead and we have this card body. And inside this body we're going to create several forms for several items. So I'm going to copy all of this a few times. And now if we go back and hit refresh, you're going to get several items. And of course, each item consists of specific image, Pacific title, the quantity that the user has purchased, and of course, the price of the item. And we also have the remove button to remove any items the user doesn't want. So this is it for the items. And in this case we still have the actual place order contract here. So if you remember, we actually created a column right here, which is this one. So if you want to have maybe here, yeah, So this is it. We have column middle. Seven. So after seven, I'm thinking from 7012 we're going to have the Place Order. So let's scroll down. We have this division is create a new division right here. And in this case, we're going to have a new column at middle of five. And in this case we're going to have, as usual, a new row with some padding on the y-axis and then another column, then the actual God. And in this case we're going to have, as usual bad drought, light and watching button three. And then we also have the form that we're going to submit for the placing order. So this is it. We're going to have the card header as usual. Inside this card header, to have an Aztec center. And we're going to have the button with some styles. So I'm thinking the width of this button should be 65 percent our card. And then we still have the classes of btn, VT and maybe yellow, so warning. And then we have maybe, let's add the onclick and return First Order and this method we use it later, but for now I still added. And of course the type should be a button, and then we still have the name, maybe action. And of course, the Place Order right here. So place order. And now if we go back refresh, we're going to have this card with only a header which says place all. So this is it for the header. Let's continue by creating the body. So let's go back. We still have the card body, and in this case I'm going to create it right here. So good body. And then we still have the card title. In this case. I'm going to emit card summary. And let's start with a new row. And this row going to have the items, so column 6. And then inside this and go to place items. Then let's have the, maybe the sum. So at the column sex, the second one, Let's add maybe for now 70. And of course, when we're done and we designed and equality backend the act. Actually the program should maybe add all of the items at the prices of all of the items and then display it under the order summary. But for now, we're going to add $70. And then after getting ton with the strove going to create a new row. In this case, let's have a new column sex. This is for the delivery. And then let's add another column, sex. Which is 3 maybe. And then after that we're going to create a new row with some B13. And in this case we're going to have the order total or maybe the total price. So that's created column sex. And in this case, or the total, and then followed by the actual amount. So let's do a trait here, balanced six. And let's say it's also someone in dollars since the delivery is free. So I think this is it. Maybe you can also actually add maybe a paragraph that says you have no items in your card. If we don't have any items in our code. But for now we'll stick with this and wherever we're making the back-end, we can also add it. So let's refresh and as you can see, we have the other summary items, delivery have some paddings, and also the other total with the actual total. Now, I think this is it for the, this one. And of course, we can add also a new card here to view all of his old purchases. And in this case, I'm going to create it right here after this. So inside this column, going to have a new row. And in this case we're going to have as usual, the column with light. And of course the margin bottom green. So card header as usual. And then of course we're going to have the paragraph. And in this case, let's make it a new line and style. Maybe display inline block. And then of course we have the purchases class load, and then we had the style display inline block as usual. And in this case we have the received. So what we're showing here is the actual orders of the user and if it is received or not. So I think this is it for the card header. Let's go back and see as refresh it. Yeah, I think it looks good. We have your purchases and if it is received on no. And after Daniel going to create the card body with justify content center. And after that we're going to have the row. And then after it go, we can start with creating the paragraph, maybe four. Maybe remove this class for now, I'll add some styles. So at this time would be display inline block. And then, then I have the order date. So date and maybe let's suppose 26 to 2021. And then followed by maybe the price. But before let's go ahead and refresh. And as we can see, we have the order date. And I was thinking to add the actual button of received or bending right here. And of course the total or the price right here. So instead of adding the price here, I'm going to have the button that says Pending or received. So we're going to do both of them. And the different andrew going to display one of them according to whether the item is received or not. So button flood and BD and BD and succeed if it is received. And maybe success, I'm sorry. And of course the style which is display inline block. So this is it for the first button and I'm going to write received. And then after that, after this division, we're going to have a new division. And in this case, I'm going to have the total is and maybe $120. Now if we go back and refresh, as we can see, that total as and this button should be right here. So let's go ahead and fix it. Inside this button we have the style display inline-block. However, I think we have probably let's just delete that. I did again. So we have here the inline-block and we forgot to create a new division. We're going to store all of these, so let's go ahead and make it here. Then let's refresh. And as you can see, we've got the received button right here. And maybe we can also have this as one for small. And let's refresh. And as we can see, we got this as a total behind or after the order date. So this is it for the first one. Let's add maybe let's go ahead and add another line. So HR and then copy all of this, then pasted few more times. So this is Atlas. Go ahead and refresh. And as we can see, we got different orders. But this is not what I was thinking. I was thinking to have them all inside the card. So let's go back and let's see the problem. So here, set of having this one right here. I'm going to have it just after this one. And all of these should be in the card body. So I'm going to copy all of this and pasted a few more times. Let's go back and hit refresh. And as we can see, we got our orders with the Euler date, the total amount of it, and if it is received or not. And for the sake of this example, I'm going to change this to pending just to let you guys know how you're gonna have it if the order is not yet delivered. So I'm going to have here, instead of btn-success, btn danger. And instead of received, I'm going to have bending. So this is Atlas. Go ahead and refresh it. And as we can see, we got the button that says pending right here. And however, all of the other items are received. So this is it for this video we created. To wrap it up, we created these small cards where we have the address payment. Then we have all of the items that are in the card of the user and of course, his old purchases. And we also have the total or the summaries. So we have the total right here. And this should be the summation of all of the items multiplied by the quantity that the user has ordered. So this is basically for this video. The next video we'll start with building the admin page. And we also still have the sign-up page where the user is gone. Now, sign up for this website. With that being said, this is the end of this video. See you in the next one.
16. Admin: Hello and welcome back. In this video, we're going to create the admin page. And actually the admin page will consist of two pages. The first one we're going to build together, and the second one will be your project that you're going to create. So let's start with the first one where we're going to have several categories, brands, and items that we can add. So let's go back to God. And first of all, since we still have all of these right here, Let's just maybe add them to the place order. So here, whenever we have this one, which is the container fluid, going to take all of it. And they said and the Place Order, I believe we didn't create a new file, Place Order, EJS. And in this case I'm going to add all of these here. And as usual, don't forget the header and the footer. So this is it for the footer. And let's scroll up at the header right here. And we're done for the Place Order. Now we're at the home that EJS and we're going to create the first admin page. So as we said, we need maybe a box where we can add our categories. So let's go ahead and start with creating the container fluid. And then inside this one and go to Create her grow with before. And of course, column, large sex, background, light and be three. So this is it for the first one. Let's create the form. And of course, inside this form I'm going to have the add category. So let's add it right here, and then followed by a label. And this will be the category name. And of course, a division which is input-group. And inside this input-group going to have the actual addition of the category. So we're going to have an input of type text and the class will be formed control. And then the placeholder, maybe category name or name, simply a name. And I think this is it. If we go back and hit refresh, we're going to have something that looks like this. So we have the academy, you have the category name, and we also have the actual name. Now when thinking is to add the image of this category. So let's go back and maybe copy all of this and paste it right here. So category image, and we're not going to add a link to the image. We're actually going to add the bass, so I'll leave it as text. And what we're going to do is to add all the images to our images folder. And then we can choose from this. Since we're going to enter the path. So this is it for the image. Let's just maybe bad. And if we go back and refresh and then I have the name and the category image. So this is it for the Add Category. Let's just do the exact same thing for the brand and place it right here. So now let's go back and take all of this, which is column sex. Copy it and place it right here and here we have the brand, brand name. And then we have the brand image. And as you can see, if we go back and hit refresh, we're going to have something that looks like this. However, we still have to add maybe, maybe make it dark. So set of background light that's naked dark and CO2 happen. Let's refresh. And of course, we don't need to forget to add the tax like. So this is Atlas. Go back and refresh. And as we can see, we have the add category and the brand boxes where we have, we can enter the category and the image. And of course we don't want to forget actual submit button. So let's create another division. We're going to add the button. And this will be of class btn, btn, maybe here, dark. And then we have submit. And we're going to have the same thing right here. So button. And then some classes such as btn, btn light this time since we're using the background of dark and submit, refresh. And as we can see, we got the submit and submit for our brand and category. Now that we're done with our brand and category, the next step is to actually create the addition of an item. So let's go back. And here we have the form, we still have division, and this is for the row. Let's create a new row. And in this case, we're going to have the column Medal of six and the background dark. And also tax slide with some padding all sides. And now we can create our form. And then inside this form, let's start with creating the H3, which is add item. And of course, we've got to follow it with the first label for the item name. So label for name. And this will be itemName, then followed by a division of input group as usual. So input group. And then we still have margin bottom three. And of course we need to add the actual input. So then I add an input text and then we have class form control. And we also have the name, which is the actual name, and maybe placeholder item, name or nothing. I think maybe you're going to do it as name. And this is basically for the first division. Now, we still have. A few things. So let's copy this and paste it a few more times. So we have the item name may be the item description, and then we also have the item. Let's add here the category, then followed by the item brand. And of course we still have the price, quantity and image and also the size. So item, brand, item, image, let's say. And then after that, we're going to have the item quantity. So this is the quantity available in our stock. And after that, we're going to end up with the item image, oil. Okay, so we added here the image so we still have the price. Yeah, So basically we have everything we need, we still have the size. So let's add it real quick here. So this is it, this is the side. And finally, we're going to have the submit button. And I was thinking to add maybe a button to view all of the items that we have. So let's do it great. Here. We have this item size. Let's create a new row right here, the column sex for the submit button. So type should be Submit. And then after that class, btn, VT and light as usual, and the actual Submit button. And then after that we're going to create the columns x. And in this case, we're going to have it. Right? So float, right, or float and the metal. And this form will be the form that we're going to submit button will be btn, btn light load, and then view all items. So basically if I go ahead and refresh, we can see that we got all of the items in folk. So we have the name, description, category, brand, image, quantity, price, and size. So this is it basically for the item. And now we actually need to create another maybe division. And this division consists of all of the orders that the users have ordered to now. And of course, we need to create a new, maybe a new page for to view all of the items and maybe change any of them if we want. So this is it for this one. Let's go ahead and create the next division. So let's go back to our code. And in this case, I'm going to scroll all the way down right here and start with the actual orders. So after getting done with this form, this is it for the column and still on the same row. So here, let's create a new column, middle sex and our thinking to make it scroll. And we'll see what score scroll means in a minute. So this is for the orders and. Of course we're going to have division as cold as create our form. And then inside this form I'm going to have the card header as usual with some background warning and the text should be dark. So let's go ahead and open it up. Inside this, we're going to have the order number in this case. I'm maybe I'll write it as one. And of course followed by another paragraph with the classes card, text and float. And and in this case, this is for the total price and followed by maybe, let's say $75. So this is it. If you go back and hit refresh, we're going to have something that looks like this. This is the orders and inside the orders we have the first order with a total price of one. Now we can add maybe some info about it. And of course we're not going to add all of the items that the user has purchased. We just going to add maybe his location, the total price we added already, and maybe a few button. And whenever the user, the admin presses on this button, it will take him to the actual order with all of the details of this order. So this is it. Let's go ahead and continue creating the card body, so-called bunny. And in this case inside the body we have the car title as usual, which will be maybe the user of whose order is this? So maybe I'll name it had. And in this case, I'm going to have the location and the card text, so called x. And in this case going to have maybe Lebanon. And then after that, we're going to have the date. So also another context with the date may be 26 to 2021 and then followed by the phone number and another context. So this is it, maybe over 4, 4, 4. And so if you go back and hit refresh, you're going to have this. We have the name, Lebanon, the date, and the phone number. And of course I'm going to add maybe the view button right here. So let's go ahead and create the button to see full order. And I was thinking to add it right here. And of course here I forgot to have them as the paragraph instead of text instead of division. So let's guide and fix them up. Alright, so now that we fixed them, Let's create the button with the type of submit. And then we have the classes which are the btn, btn-primary. And I think we're done still have to see each other. Now let's go back and refresh. And as we can see, we have the actual order. And maybe because this isn't taking the whole page for the whole division, let's make the seafood order right here. So I am going to do is to have these title tags and all of these new row and column 6. We're going to have all of this inside this column. And then I'm going to create another column which is also sex. And in this case, I'm going to have the button of submission. So now if we go back and hit refresh, you're going to have something that looks like this. And of course we can add the classes such as load. And, and as you can see, it's at the end right here. So this is it. We can always add, maybe take all of this and copy it a few more times, and let's refresh it. And as we can see, we've got our orders, several orders. And of course, this is it for this page. We created all of the mentioned Admin pages or admin features, and this is it for the first admin page. See you in the next video.
17. Items: All right, So welcome back. In this video we're going to create the item speech where if the admin clicks on this view all items it will it should be direct him to all items with all of the information that he can edit. So let's go ahead and start with it. But first, before doing anything that's just the color of this and placed it, place it in the actual admin page. So I'm going to create a new file. And this will be the admin page or the, yeah, So I think it makes sense admin to the EJS. And in this case we're going to have these. And of course, let's start building the items right here. So the first thing we're going to create is a form. And then after that we're going to have to create the container fluid. And then followed by maybe the row. And then of course the canon. But before that, let's add some padding, so maybe B5. And now we're good. We can start with creating the card. And I was thinking to simply create a cold body. And inside the Skype, buddy, I'm going to have the background, light and justify content center. And now let's start by building the first row, then the column large three. And the first thing we're going to add is the image. So maybe images or slash images. And mention one that you Vg, dpi JPEG. And of course going to have to add the style. So the display should be inline-block. The height. Maybe 15 pixels might be good. I'm sorry, 15 AM. And the width will also be 15 RT m. And this is basically for the image. Let's create another division for the text. And in this case, I'm going to have some planning before and detects center. And then let's start by creating the row. Then we have the column sex. And of course we are going to have the input to edit. So this type should be Button. And of course, the idea that's needed at that and the class btn, btn warning. And then PY two. And finally, after getting done with this input, going to have to create another code column of six, which will contain the actual button of type submit. And in this case, we're going to make it disabled for now. Maybe I'll limit next summer. Just for the scripted, we're going to create. So be the n, be two btn warning and then of course be way too. So this is it for the first one. If we go ahead and refresh, we're going to have something that looks like this, but we forgot to add the buttons. So right here we need to add, first of all, we have the first button, which is this. And in this case, I'm going to have the button Submit. If we go back and hit refresh, I'm going to have something that looks like this. But however, we still have this button. And in this case, I'm sorry, we need to make it as button right here. So the pipe should be submit. And as usual, maybe id. We're going to make it added and then declares the end BD and warning. As usual and PGY2. Let's delete this and inside this button we're going to have edit. So this is a basically we have the edit and submit. And of course the edit is not disabled, but however, the submit button is disabled because we did not change anything to submit. And this is what it looks like that the image, and now we need to add the information right here. So let's go ahead and start with them. We still have, we already created the column large three. So what we're going to do is to create the column large 9 to sell have nine. And in this case a salt with the flow. Then we have column sex. And of course we are going to have the label for the name, maybe product name. And then followed by the division which is input group and MV3. And then of course, the actual input of type text. Of course the name should be named and the it should be disabled at first. And of course the class should be formed, controlled. And then followed by the ID of next semester. And this is the idea that we can use JavaScript. And this is, it basically is go ahead and good luck. As you can see, we have the product name and it is disabled for now. So this is it for the product name. Let's go ahead and copy it several times. Or the other information. So product, maybe the image. And then we have the product category. And then of course we have the product brand. And let's copy it one more time. So here we have the product, maybe quantity. And now if you go back and hit refresh, you're gonna see something like this. Let's remove this product quantity from here and place it right here. So we're going to remove this. And we know in a new road is create a new color. And inside this we're going to have the product quantity. And maybe we added the image name. Maybe let's add the price and size. So let's base product price and product size. And I think these are all of the information that we need. We have four by four. Oh, okay, so we forgot description. So it's thinking to remove this base right here. And then of course, add product description right here. So this is it. If I go back and hit refresh, we can have something that looks like this. And this is it basically for the items, we're going to have several items that look like, that, looks like this. And what we're going to do is to add some values. For example, we have the product name inside this, there have the value, which is maybe Johnson, maybe the product description which have deep value of lorem, ipsum, and then the product category may be shampoo. So value shampoo, product, brand, value, Johnson. And of course, product per quantity that we have maybe let's have 20. Product price will be maybe $15, and product size will be 200 milliliter the image. So the value should be damages dimension 1 to GBG. And now if I go back and refresh, I'm going to have all of the values right here. However, we still have to create the Edit button. So wherever we press on added, all of these, one of the inputs should turn to not being disabled and then we can change them. And whenever we press submit, all of these should change in our database. However, this task should be an outflow back and, and database tasks. And for now we still have to just make them not disabled whenever we pass on this edit button. So with that, let's go ahead and create a descriptor that we're going to use. So let's go all the way down to here. And after the form, we're going to have the script, which will be maybe the type. So here, let's add the type which is text JavaScript. And let's start with creating the document and ready to, ready up in this function, which is the other case. So we have the edit, which is the ID of our edit button. And of course on clink, going to have to open this new function. Which will change or remove the attribute of this abled of all of the information that we have. But we forgot to add this class here. So I was thinking to add it right here. Let's add for all of the information at once. So let's go ahead foreign control and open it up and add the letter F. And this is the class that we're going to use. So here we're going to have the class F, and we're going to remove this attribute of disabled from this class. So this is it basically for this one and of course for the class or the ID submit. If we click on Submit, it should disabled them and actually add the disabled attribute. So let's go ahead and do it now, and I'll explain it once I've done it. So submit and of course DoubleClick. We have the function and then we also have to dot, or this is the ID. So next summit and that attribute, we're going to add disabled. This Abel. And this should be disabled. So this isn't basically for this one. And of course, if we go back and refresh, if I press on this edit and these are now open. However, whenever we press on submit, we should be able to press on submit. Back here we notice that we did not add the class F. Now let's go back and refresh. And as we can see, if I click on edit, I have all the information that I can edit. And once I change it, let's say Johnson baby shampoo and click on submit. We can see that we changed it. However, for now, since we're using, we're not using back-end. It will not change once the, once the page is refreshed. So this is it basically for this one. And we will use this item by God for several items, actually for all of our items once we finish our website. So now let's go ahead and place them in the item, that EJS items, but EJS. Now let's go back to home. Go back to our form. Let's get it. And of course we're going to have this script. So let's copy all of this basic here and then deleted from here. And of course we're going to have to add the header right here. So here we have our header and now our items are DJ as file is ready. So this is, it is actually for the item, so EJS. In the next video we're going to have to create the sign-up method. And this is actually the last thing that we're going to create. And of course, we don't know, I have to forget about our project which will be presented after the sign-up value. So with that being said, this is the end of this video. See you the next one.
18. Signup: Hello and welcome back. In this video, we're going to create the sign-up page. So let's go ahead and start with it right here. First thing we're going to create is the section. And in this case, I'm going to have to add some classes. So if first one is contact just for later and some padding. And then of course the container fluid, followed by the first heading, which is the actual name of our website. So I'm going to add some classes such as text dark, maybe text, uppercase, and margin, bottom four and text center. So these are our classes and maybe add e commerce website. So this is it for the heading. Now we're going to start with our first row. And I'm going to add the justify-content center as usual, and maybe start with creating the first column. And in this case, it will take the column large forward and column medium 54 small. I'm going to have to make it six sum. Maybe. Some padding on the bottom for the route, ground is dark. And I'm going to add the box and this is for the CSS later. So this is it for our column. I'm going to have to add a form. And then inside this form I'm going to create a row with a margin top of three. So now let's go back and see what did you create for now, if we refresh our page, we're going to have a small box with the e-commerce website title and decide this box. We're going to have to add a, B, the FirstName, lastname, email address, password, and of course, the sign-up button. So this is it basically, Let's go ahead and start with the e-mail address. So for column medium of sex and some padding on the y-axis, we're going to have to create the label for the first name. And then the class will be labeled first name. And then we have to create the input of type text, followed by some classes such as foreign control. We have also MY to be two and this is the input for CSS and maybe Name, firstName. So let's go back and refresh. And as we can see, we got this firstname with this on this side, or just after the first name. However, we need our firstName to have the text slide. So what we're going to do is to use all of this inside the CSS. So for now, let's go ahead and copy this and maybe a few more times. Firstname, maybe another maybe this for the last name. Yeah, I think this would make sense. And last name. And here we're going to have to add L name instead of pathname. And as you can see, we have firstName, lastName. Let's just delete this name right here. And I think we're good for now. Let's create another row. And in this case, this row will be assisting up a division with a form group and some padding as usual. In this case, I'm going to have to add a label for the email. So this is for email and class will be labeled. And this will have the label as email address. And we have the e-mail of type, the input of type e-mail, the class, would it be for control as usual? And then we have some margin on y2, b2, and input and name, maybe username. And this is it basically for the actual e-mail address. And let's copy this, paste it one more time for the password. So here, instead of e-mail address, I'm going to have to add password. And of course the type should be here, password. And finally, the name. Those would be the same. So this is basically let's go ahead and refresh it. And as we can see, we got our firstName, lastname, email, address, and password. However, let's just adjust them using the text light here. So light, Let's go back and refresh. And as we can see, we got our maybe sign up page. And the last thing we're going to create is the actual button to sign up. So let's go back. After creating this division, I'm going to have to create another division with some classes such as the grid. And then the gap should be to be Y2. And now we're good. We can create our actual button of type submit. Then we have the glasses, we have DBT, and maybe we're going to create B2. Let's make it bold text, uppercase. And then we have the submit button, and this is for the CSS. Then we have text light. And of course we're going to have to add. So this is it basically, if I go ahead and refresh it, then have something that looks like this. So I was thinking for now we're not going to use CSS. Let's just maybe make this as yellow. So btn, btn warning. And I think we're good. Let's go back and check it out. If we refresh it, we have this button to sign up. Or maybe you can make it btn danger. And let's go back, refresh. And yeah, I think it looks better. So this is it for the sign-up page. This is all consists. We just have this one and the footer. So let's go back and add all of these into our sign-up that EJS file. So this is the section. Then I have to add this. And let's create a new file. And this will be signed up that the JS and a half all of this. And now we're done with this project. We still have one step. And this will be actual project that you go to Create. And we'll have a look at it in the next video. So see you then.
19. Project: Hello and congrats if you made it this far. In this video, we're going to discuss our project. So the project is about creating the order page. When we created the Euler or the admin beach, we had something that looks like this. We have the orders total price, title. This is the name of the user. Then we have the location, date or a number. And you also have something where we can click on it to see the full Euler. In this case, whenever we press on this Hippel order, it should take us to this one. And as you can see in this page, we have the full order of a specific user. In this case, the user's name is how did this is the location date for a number? And here we have the items. And it happened to be that I had you ordered just items of baby Johnson and their prices is 12. And as we can see, 3 times 12 we have 36 right here. So this is the idea. The idea of this project is to just create. This may be a guide to display the user's information and the order of the user also. And you can also add this quote that we created in the admin page right here just to visualize it also. And of course, if I press on this, it should automatically take me to the next user, which is order number 2. However, all of this, we're going to do them in the next class whenever, where we're going to work with the backend of this website. So with that being said, this is the end of our project for now. I hope you enjoy it and good luck creating this part of it. So if you have any questions, don't hesitate to ask me in the discussion part and please don't forget to add your projects in the project section to give you my feedback. I hope you enjoyed this project and good luck.
Hadi Youness, Computer Engineer
