Bootstrap Studio Tutorial Version 6. 0 Learn Bootstrap Studio

1. Course Intro: Hello guys, Hawaii, you Thank you for landing to this particular course. This course is all about Bootstrap Studio. Bootstrap studio is what? Bootstrap Studio is a desktop application where you can design a website. It is a static website and there is one feature where you can create a dynamic website also, but that is only for e-commerce, So we are going to see that as well. So Bootstrap Studio is a desktop application which is completely built on Bootstrap framework. In this course, we are in to see how exactly to use Bootstrap studio to design website without coding. That is the keyword. Without coding, little bit of coding is there coding your leg, just calling something here and there. But it is not like hardcore programming or hardcode coding. You just need to follow me what I'm doing and then it's done. You will be able to design everything. I will show you what exactly you are going to design and what you will learning in this course. In this course we are going to see all about the panels in the software like Studio panel, online panel, what exactly these overview panel. And in this options panel we have three options, appearance options and animation. Then design panel. I have created a separate, separate video to understand how exactly we are going to be used this panel, then we're moving to a project. Okay, so we are going to design few projects like resume a page. This is a one-page website. If you see it is a complete one-page website and you will be able to customize everything this page according to your convenience and according to your needs. Okay, So how exactly this website is going to look? This is my browser. You can see a real time a review of the website. So this is your browser. If you click on About Us, you can see the scrolling up. If you click on Contact, it is scrolling up. If you click on whom it is coming up at the top. And in the contact page, if you see there is a form. Without coding. In this course, we are going to learn how exactly to create a smart form in Bootstrap studio. We call it a smart form, which means that whenever the user will fill this form and click on Submit, it will come to an email address which you have selected that on which email address this information of the form should come. This is kind of a dynamic form, but not exactly dynamic. We call it a smartphone. Coming next, we have a multi-page website which we are going to design in this particular course. This is kind of like tech company webpage. So we have multiple pages over here that we have forms. Again, this is a smart form. Then we are going to create the contact page, all these things. And on top of that, everything will be mobile responsive. See this navbar, like when I come to a larger screen size, the icons, the buttons over here coming up. If I am coming to mobile screen, they are hiding inside this toggle. You're going to see how exactly we are going to design a mobile response your website without coding. After that, we are going to create a design of an LMS system that is learning management system like multiple courses, multi-page has options are there. We are going to design wishlist page and then registration page and all the other stuff. The most excited thing over here is this e-commerce website. And to be very clear in this particular area, e-commerce website is a complete dynamic website where you will be able to integrate. The payment gateway is also so let's see the demo of that website. This is our e-commerce website, which we are, we will design in this course. And there are multiple products here. And if I click on this product, you can see it is coming to this product page and then some related options are then related products option. Then you have some size option to select. And if I select this size and change the quantity, and if I add this gift wrapping, all of these, Let's do it in the course. If and if I click on Add to cart, it shows like product added to cart, you can click over here like C card or else you can click year to go to cart and then you can see your product is there. And if I click on Checkout, you can see it is asking me to enter few of my details. If I add all the details over here, if I click Next and it is showing pay via PayPal or debit card, you have two options like PayPal and Stripe. And you can also provide some options called wire transfer, pee, pee on delivery. And here I have used BY a UPI. So all these things you are going to learn in this particular course. This is a very complete tight course. And apart from that, we are going to see lots of things like Zoho integration, customer support integration, and all the other things. Without wasting much time. Let's get started and I will see you in the first video of this course. 2. Getting Started: In this video, we're going to see how to get started with Bootstrap studio. At the time of recording this video, the bootstrap studio is at version 5.6.4. That is the latest version. At this point of time. When you launch the bootstrap Studio for the first time, this is what you see in your screen. Let's see how to deal with this. We have very few options at this screen. First is recent design. As the name suggested. The reason design means the recent designs which you have worked on. We'll come here so that you can just click on it and you can open the project, time-saving, nothing else. Then tutorials, you have few tutorials over here. Whenever you click on any of this option, it will take you to the webpage, which is a completely text-based tutorial. It is not a video tutorial. That's why I'm making a video on it. The name of the software is there bootstrap studio than the version that is 5.6 for the current version, then we have a new design button over here. Then we have a Open button. Year. New design is when you click on the new design, when the dialog box will come in front of you stating that what type of new design you want it. If you click on Open, the file explorer will come in front of you. And you can just select the project and then you can start working on it. So let's see how to create a new design. Just clicking on a new design one dialog box will come in front of you. Bootstrap Studio gives us few ready-made designs. You can start with that also, but you all are, you're watching this video to learn Bootstrap studio not to use the ready-made designs. So what we will do, we have to make sure that three options are there. And we have selected this. First option is name your project. Second is makes sure that the blank template is selected. You can see this small circle, is there, blue circle inside that blue circle, white tick is there. It means this template is selected. Name the project, and then you have to make sure that which version of Bootstrap studio we are using. The default selection will be 5. In the previous version it is 4.6 widgets selected. Previous version means 5.6.2 from 5.6.3, the default selection is Bootstrap five. Most of the students get confused here that what is this bootstrap five and Bootstrap Studio 5.6.4. So let me tell you. Bootstrap is a framework and Bootstrap Studio is a software in which we are working. We have selected the latest version of Bootstrap framework, that is 5, actually it is 5.1, but the submergence are not mentioned over here. So we are selecting 5, which is by default selected. Then we will name our project anything. Let's name it as test one. And then I will click on Create. So as soon as I click on Create, now we are in the real bootstrap studio. Now we have understood how to get started. In the next video, we will understand the user interface of Bootstrap studio. So see you in the next video. 3. User Interface: In this video, we will understand the user interface of Bootstrap studio. We will start from this corner. Here we have two panels. First one is a studio panel and then online panel, but we don't call it as online panel. We just call it as a subversion of Studio panel. This is a studio panel. In Studio panel we have two things. One is studio and one is online. What exactly Studio IIS. Studio is the place where you will find all the components which are there in Bootstrap studio pre-installed. It means bootstrap Studio comes with few components and few HTML elements that components and HTML elements you will find in the studio panel you as a user, the first folder will be UI. As I'm using Bootstrap studio from so many days. So the user folder is there for me. Sooner. You will also get this folder as we start uploading the components. Studio panel is the place where you will find the components and the elements to design your website. The second thing is online. Online panel is, as names suggested, the components which are not there in Studio panel. And you want that components and the components which are created by others and upload it to the community, bootstrap Studio Community that components you will find in online panel and just click on Online. And here you will see the most trending components. Then we have a dark mode switch. I think this component helps us to switch the website from dark mode and light mode. So these are a few trending components then we have few Let Us components which are they're created by the community. All these things are there. This is the online panel, and this is a studio panel right below the studio parallel, that is the overview. You will see the overview of our website based on a structure of our website, you will see the overview of the website. Once we start designing the website, you will understand how to use the overview panel in a very efficient way. To the left of our screen, we have two panels that is the studio and overview. In the center, we again have two panels. One is stage, what you see in the center, that is the white screen that is staged. And right below the stage you have the editor panel. You can see the HTML text over here and a style text. Oh yeah. You just need to click anywhere in-between this. Once you click there, you will see the text editor is now in front of you. You will see all the HTML code which Bootstrap studio is writing for you. In this place, this is the style in this place. You will see all the CSS which is already returned or you want to write it right below this HTML area, you have the attributes. Once you click on that attributes, you will see the attributes over you. You have a key and a value to enter. You can create an ID and a class in this place only. So let me show you how exactly it looks. In the overview panel, I will select this body tag. Once I click on the body tag, you can see the attribute panel is there. You can call an ID OU, you can call a class over here. And you can also make some new key and values. These are the CSS which is already written for you from the Bootstrap framework. You can see the colors and all the other specifications are already in this particular place. Canvas is the area where you will see your website design. And in the top of the canvas area, there are a few options. Let's see that one-by-one. The first option is zoom in, then zoom out. You can zoom in and zoom out your canvas. Then we have a Flip Canvas. You can rotate the canvas OU. Then here we have the Fit to Canvas option. Once you click on the Fit to Canvas option, the Canvas will fit to this particular area. Then we have few View Options. What you want to view like outlining grid, show box models and all that things. Then here we have a size of the display. The first is the width and the second one is the height. You can change it once you start designing the website, the height of the website changes according to the length of the website, then you have a percentage OU and you have a small arrow. Oh yeah. Once you click on the arrow, you can see the list of the mobile devices to see how exactly a website we'll look in that particular mobile. Then we have a page selection option over here. This is the place where you can select the page or you can create a new page when you have a multiple page, at least of the page will come in this particular area, then you can just click on new page to create a new page. We have the other option also to create a new page. We will see that also in this video only after that we have six display sizes where we can see how exactly it looks on our particular display size. The first one over here is double XL, that is extra, extra large screen. Then we have Excel screen, that is extra large screen. Then we have a large screen, we call it as LG. Then we have a medium device size that is MD in Bootstrap studio. Then we have a small size there is SM. Then we have extra small size that is access. So we have six device sizes specifically designed for Bootstrap studio. And based on this device sizes, the grid system work. What is the grid system? And all we will see that in the later videos. This is the canvas. The project which you are selected. The name of the project comes over here, that is first test. And right after the name, if you see any star mark, it means that this project is not yet saved. Make sure to save the project as this is a first test project, we are not going to do anything in that. So I won't save this project, but if you want, you can save it. Now on the right side of our screen we have two panels. One is option panel, and one is designed panel. In option panel we have three subparts. One is appearance, one is options, and one is animation. In appearance panel, you can change the appearance of the component or element. You can change the layout, font, background, borders, all lead things. You can also see how exactly the margin and padding is assigned to a particular component or an element. After that we have options panel. You're based on the components. First two options will change. Last of the things will remain seem. But if you select the body, then only these two options are there. That is text option and the Flexbox. But as we start designing the website, when we select the different components or elements than the options will change based on the components which we have selected in the options panel, we will get so many options to modify the components. Then we have Animation panel over here. This is used to animate a particular component or element. Right below that we have a design panel where our projected resources are arranged in a systematic way. We have few folders in that. The first folder is page. If you click on this particular arrow, you can see the index.html page is there. Whenever you open a new project in Bootstrap studio, this is a by default page which you get and you cannot delete this page. Whenever you create a new HTML page, that page automatically lies inside this Pages folder. After that, we have a styles folder where the SSS and SAS files will be staying inside this folder. Then JavaScript, all the JavaScript file will stay inside this folder. Then we have fonts. All the fonts will stay inside this, and images will stay inside this. You can also create a sub folder inside this particular folder. But you cannot move the files from one folder to another folder. It means you cannot move the dot CSS file to HTML file. The STL file will be staying in the Pages folder only inside the Pages folder, you can create multiple folders and you can move the HTML file inside that folders, which are inside the Pages folder. So pgs is a parent folder. And inside the Pages folder you can create multiple folders. This is what the design panel ease at the top, we have few options over here that is new. We can create a new design over here, then opened, create a new design, then save export settings of their settings. Are there, undo redo option is there. We can also preview our website while we are designing, we can preview our website in multiple devices just by putting the IP address. We will see that as well in the later videos. The published option is also there. You can publish the design, published in the sense you can export the design in your local machine or directly, you can publish the design from here to the server by using the Cloudflare account. So we will also see that in the later videos. So this is what the user interface of the bootstrap studio while designing the website, this is the place where we will be spending are most of the time. So I hope you understand the user interface of the bootstrap studio. And in the next video we will see how to import a component in Bootstrap Studio project. See you in the next video. 4. How to Import Component: In this video, we will see how to import a component from RStudio panel to the stage or to the overview panel. In both way, we will see that this is the studio panel. And you can see the search components option is OEO. In the beginning, what we will do, we will start with the navbar. We'll import our navbar over here. So I will type nav. So as soon as I type NAB, you will see few components over here. That is nav, navbar, navigation clean and all that things. We will use the second component that is navbar. How to import the component? It's very simple and just click, hold your mouse, click, drag and drop in the Canvas. Drag and drop in the overview parallel. So if you're dropping this in the overview panel, you have to drop over the body tag. Once you take your most pointer or the body tag, you will see the blue outline is there. Just take your mouse pointer over here and release the mouse click. Once you've released the most clicked, immediately you will see the output of the component. This is a component, the navbar, we call this as a component because inside this component we have multiple other components. One is navbar, navbar brand inside, then we have navbar-toggle that navbar-collapse. If we open a navbar collapse, we have again a new component that is nav. Then we can open that as well. Then we will see a nav item. Inside the nav item, you are, we have element. This is a link element that is a tag. So to see the code which is written by Bootstrap studio, that is the HTML code. We will just click on the editor panel and we can see all the code is written for us. You can see this is the a tag which is selected over here. What you will select in this overview panel, that particular line will get selected in this text editor area. And anything you select, your, that particular component will get selected in the overview panel. Let's select this body over here. So once I click on the body, you can see the body is selected now in both the areas. This is the place where you can see the HTML code, how exactly the HTML is written. You can see it is written in a very professional way. All the alignments and all the sections are written very clearly. Now if you want to change anything, you just have to select the component based on the selection, the options and the appearance panel will change and you have the liberty to make the changes, to make the need full changes in that. This is how we import the component in the bootstrap studio. It's very simple. Just search for the component, select the component, drag and drop on the stage, or drag and drop in the overview panel. Let's do it one more time. After this, what I will do, I will just come over here and I will try to import a new component. Let's see, a ready-made components are in, just come to UI and in the media. Let's see what exactly it is. I have a photo gallery. Select this photo gallery. Now I will import this from the stage. I'll just take my most pointer and I will come over here. You will see a blue line is there, and a small arrow is also dead. So this is a small arrow. It means if you drop this particular component here, that component will come right below this particular blue line. And above the blue line, the component we have ys navbar. Right below the navbar, this Lightbox Gallery. Welcome. You can see the name also the Lightbox Gallery. It means it shows that the Lightbox Gallery is about to come in this particular area as soon as you release the mouse click. So let's release the mouse click. And now you can see the Lightbox Gallery is there. In the overview panel. You can see the navbar is there. Right below the navbar you have this Lightbox Gallery. Now let us see how to import a component in between two components. So let's import this parallax background right in-between this navbar and a section. Importing a component in-between two components is difficult in the stage, but it is easy from the overview panel, what do you have to do? You just take that component drag over here. When you drag that component, you can see now the body is in blue outline. It means if I release that it will go inside the body and it will go straight below the lightbox section. But we want this component to become in-between navbar and the section. I'll just take my mouse pointer over a year and I will just keep it over here. You can see a horizontal line in-between the navbar and a section. Section is Lightbox Gallery. When you see this horizontal line, it means that if I release this component here, it will come in between navbar and the Lightbox Gallery. And that is what we want to do. Just release my mouse pointer. And now you can see this parallax background is now in-between the navbar and the Lightbox Gallery. You can see this is a navbar. This is parallax background. And then we have a Lightbox Gallery. In this stage, you can see how exactly the website is looking. In the overview panel, you can see the overview of the website. Now you can see in the styles you have this CDN is imported. The Lightbox Gallery CSS file is also there. I hope you understand how to import the components in Bootstrap studio. In the next video, we will see how to edit the components. So see you in the next video. 5. Editing the Component or Element: Okay, So now we understood how to import the components. And in this video we will see how to edit the components. To edit the components first, we will select the component. We can select it either from the stage or from the overview panel. Selecting the component in a stage is simple. When I hover my mouse pointer on any element or component, you can see the name of the component over here. And you can also see a blue outline, like a blue border over here. This is the area of this particular heading. I will select this as soon as you can see, a bunch of icons over here. This first icon means move. Just click and drag anywhere you want. You can move the component, you can move this particular element. Then we have an up arrow. It means select parent. As soon as you click on this particular icon. You can see in the overview parallel, this is the heading which we have selected. Now, the parent for this particular heading is this doom. And if I click on this arrow called Select parent, you can see now the deal is selected. It means when you click on this arrow, it will select the parent of that particular component or an element. Next we have edit. It means if you click on this edit, you can edit the text over here. Instead of this lightbox. What you can do, you can tie photo over here and just hit Enter key. And you can see now it is a photo gallery. So this is the place where you can edit the component or the text. Anything. Next is duplicate. If you want to make a duplicate of this particular component or a text, you can duplicate it. This option is highly useful when you want to duplicate the component with all the CSS and styles and whatever the changes we have made. And you want all those edited styles in a new component, you can just duplicate it. Then you have the option of height. If you click on this, you can just hide this component. You can see the component is still here, but it is hidden now. And how to display that component back again. So for that you have to come to the overview panel, right-click and click on show. Another component is back again. If you wanted to delete the component, you can just simply click on this delete icon over here, and then you can delete the component. Same way it goes with the image. If you select that year, you can see the Move option is there. Then select parent option. Is there duplicate is their height, is there, delete, is there. The edit option is not there because editing the image is not what we can do in Bootstrap studio, but we can change the image. How to change the image? Either double-click over here and you can see a choose an image dialog box will come in front of you and whatever the images which are imported in this particular project will come in front of you in this particular area. If you have a folder structure than the folders will also come over you. You can select any of these image. Once you select the image. And if you click on Okay, that image will come in this particular place. Again, you can just double-click and you can change the image. That is how we can change the image. Same way we can do it from overview panel. Just select this image tag. And if you double-click over here the same, choose an image dialog box will come in front of you. These are the few options and the techniques by which you can edit the component or changed the image and all that things. We will see all this option in details as well in the coming videos. And in the next section, I hope you understand how to edit the component or an element in this video. If not, you can just play this video back again. This will be the end of this section. From the next section, we will see the options panel in detail and we will understand how the options panel hook. So see you in the next section. 6. Layout: Before starting this video, we have to open a design which I have created for you. In that design, we will be doing the changes and we will understand the appearance panel for that, you have to find the attachment, the resources files in the resources file. The second folder is BSS files. Inside of CSS files, there is one more folder for that is get started. You have to open the first file that is getting started, dot BS design. This is the file I have created a rough design. In this rough design, we will understand the options panel from appearance options and animations by using this design. Let's get started with the first option in the appearance panel. For that, I have to select any component. So we will start with this section. I will select this section. As soon as I select this section, I will see the appearance and the options inside the appearance. In this video, we will see layouts. In layouts we have four options, that is width, height, margin and padding. And in all these options in front of all these options, we have this arrow. When you click on this arrow, you will see the sub options that is minimum width and maximum width. After that in height we have minimum height and maximum height. In margin, we have margin, top margin, right margin, bottom margin left. In padding again, we have padding, top, padding, padding bottom, and padding left. What exactly this means. If you change the width over here, the width of the particular component will get changed. Let's see. I have selected this section and you can see the blue outline over here. It means this is the section which we have selected. If I increase the width, you can see the width of the component is increasing. The text and the buttons are moving to the right side. Why? Because I'm increasing the width. And the width is increasing in the right side only. In this particular section, the width increasing the width is not necessary. So we'll just make it default. Now you don't know what is the default number four here, we have two options. If you have changed just the width, then you can just click on Reset all, it will reset all the options in the layout section. Or else just select this, hit the backspace and hit the Enter, and it will come back to the original width. From here, you can increase the width. You can put the minimum width of a particular component and a maximum width of a particular component. Next, we have height. Similar to the width. We can increase the height. Now you can see the height is increasing. You can see now the blue line is coming here. Previously it was somewhere here. So this way you can increase the height of a component. Same way, we can change the minimum height and the minimum width. We will see this particular options when we will start designing the website. Now we have margin. Margin. We can change it in all the four directions, or we can change it in once. The first option, that is just margin. If we change the option over here, it will apply to the all top right, bottom left. Let's see. If I make it ten, then all the four sub options are getting the ten pixels margin. Now you can see the margin is also there. You can see a slight gap is there it means the margin is applied. If you want to just apply to a specific margin, to a specific area. So you can just click on this arrow and then you can change the value of top margin. Let's say if you want to change the top margin, then you can just change the value of top margin. Like this. All the other three will remain to 0 and the only one that is torque margin will change. This is how you can change the margin. Same way you can play with the padding. If you want to change the padding of all directions at once, you can change the value in the padding option. You can just come down and change the padding of individual options. By default, the padding, top, padding bottom is 50 pixels and right and left is 0. If you wanted to change the right padding and left padding, you can change the value over u. This is what we have in layout section, width, height, margin, and padding. In the next video we will see the font section. So see you in the next video. 7. Fonts: In this video, we will see the font section. Let's see the options in this font. First we have color. It means we can change the color of the font. Then we have font size. And you can see there is no arrow in front of the word color. It means there is no sub options. It is just one option that is color. After that we have foreign size in front of the foreign sites, we have this arrow. When you click on that arrow, you will see line-height and line spacing. Then we have foreign family. We can change the font styles. And again, we have the arrow over here. If you click on the arrow, you can see font-weight and font-style is there. And at last we have alignment. So we have few alignments over here. First one is left, then center, then right, and then justify. Let's see one-by-one. If we want to make change to the font, Let's select this font over here that is highlighted. And now we will change the color of the font. There are few ready-made presets of the color given by Bootstrap and that ready-made preset color are just OU. As of now, you can see only five colors over here, but they're more. You just click on this more option over here, that is the last one. You can see the three dots over here. Just click on that. You can see all the other colors in this particular preset. So you just need to click on any color, and that's it. The color is changed now, this was black, now it is red. If you want a specific color which is not in this particular palette, then you can just click on this color button over here you can see a red color is here. You can just click on this. Then you will come to this particular color selector option. You have four different sub panels in that first is select. This is the place where you can select the color, then design. Few color palettes are readily available over here. Then favorites, the favorite color which you have added. Then we have a library. Library are like single color with differentiates. This is yellow. Then we are moving to red, pink, blue, green. All the colors are readily available over here in the library we will come to select. Here we have the color selector options ready for us. In the bottom we have a UE line, that is HUB you line that is, we have all the colors over here. You just drag the mouse on this particular line. And the color which you want, you just release the most point around that particular area. Then you will get the shades of the colors, or you can just select any shade. This is the dot. You can see a box over here. This box means this particular color is selected. You can select any color from here. You have to make sure what color you want. As soon as you will move the mouse. From here you can see the live preview in this particular area. It will help you to understand what color you want and which color looks good to your design. I will just select this color. And right below that we have an alpha channel over here that is the opacity of the font. You can just reduce the opacity to make it transparent. And this is the a 100% opacity, and this is the 0% opacity. You can play with this as well. If you want to select a specific color which is already available in your project, then you have eyedropper tool over here. Just click on the eyedropper tool and you will see a different cursor is there. You can see a circle. And in that circle you have box. In the center, you have the red box. That box is the area where you will be selecting the color. So once you come over here, you can see a red box is now in that blue color area. If you've worn that blue color, just click on that blue color and boom, the selection is automatically moved to that particular blue color. And if you liked this blue color, just click on Select and it's done. This is the way you will be changing the color. You will be selecting the color. After that we have foreign size. If you want to change the foreign size, then you can just change the foreign size from here. By default, size was 32, and you can change the foreign size. Inside foreign sites, we have two options that is line-height. If you want to change the line height, you can change the line height as well. And if you wanted to change the letter spacing, you can change the letter spacing as well. So this is how you can change the letter spacing. If you want to bring back this options to the default state is selected and hit the backspace and enter, select backspace and enter, select backspace and enter. And this is now in the default size. After that, we have formed family. We can change the font from you. By default, you can see the font. Is there some alpha system, some foreigners are, some font is applied. To change the font. You just click on this arrow OU, and you will see Add font option. Is there? Just click on the Add font option and the least of font will come in front of you. There are so many forums. You can search the form from year because there are so many forms. For now, what I will do, I'll just select any random font which I will fill. It will be good. I will just go with I'll just go with this one. And how to turn on this phone? Just you have to click on this checkbox. Once it is checked, just click on Save. Now the font is imported. You can see in the fonts in the design panel, you can see the font is already here. Previously it was empty. Now the font is there. And now we want to change the form, select the component or element, come to the foreign family, click on the arrow, and now you can see the font. Is there. Just click on that font and boom, the font is changed. The same way you can change the font weight. You can increase the foreign weight from normal to bold. Two options are there, normal and bold. And in font-style you have other options that is normal, Italic and all the things. So if I click on Data Lake, the forum will convert himself into italic style. Orals bring back to normal. This is what they are in foreign family. And now alignment. In alignment, we have a trick over here. This alignment is already centered, but here you can see the central alignment is not selected. You want, if I click on the left alignment, the font will not go to the left alignment. The reason behind that is the formed alignment is controlled in the option panel. If I go to the Options panel, you can see the alignment is centered. If the alignment of that particular font is controlled by the Options panel, then if you make any changes in the evidence, it won't get changed. It is very usual that when you're designing the website, if you are changing the font alignment from year, and if the alignment is not getting changed, don't get mad. Just go to the Options panel and change the alignment from you. In the next section we are coming to the Options panel, but let's complete the appearance panel year first. So this is how the section of farms is control the first East color, you can change the color, then foreign size than foreign family, and then alignment. It's very easy that without writing the code we can chain majority of the things. That is how the form section ease. And in the next video we will see the background under the epidermis. So see you in the next video. 8. Background: And in this video, we are going to see about background. In background we have three major options. First option is add image, then we have add gradient, and at last we have BG. Bg is nothing but background. The short form of background is BG add gradient. And bg color is specifically related to colors only. And add image in the sense we can add the image in the background. So what we will do, instead of going in a straight way, we will see in a backward side, it means we will first see the background color. Then we will see add gradient. And at last we will see Add Image. Background Color is as similar as colors in the font. The only difference will be this particular option will change. It will apply a color to the background of the particular object. What exactly it is, Let's see. Same like color. We have a theme color, which is there. We can see here. Just click on any background. So as this is like slight red color, so we'll try to give a black color to the background. So this is a black color, but this is not a complete black. This is a grades or dark gray. Yeah, it is It is written that gray dark. So once I click on that color, you can see now the background color is filled with that color. This is the background color. And similarly, if you want a different color, a specific color which is not in this particular color palette, then you just have to click on this color selector optional year. Instead of Design, go to Select, select a specific color which you want. Let's say I want this particular color where the red dB value is 384041. And I will be using this frequently, just for example, like I will be using it frequently, so I will put it in the favorite. And now I have two colors in the failure to. One is for the text and one is for the background. Now I will click on Select. That's it. This is how you will be applying the background color. You may ask me like what if I wanted to give a background color to the entire page? Yes, simple. Select the body tag and change the background color. For that. I will show you how exactly it is. I select the body tag, body in the sense, this is a complete web page. Right from this top. This end of the page is a body. This body tag I will select. I will come to background color, and I will use this color only. I will just click on this color. And that's it. The body color is changed. Now, why this area is not changing? The reason behind that is it, it already has a background color to it. Now how we can remove this particular color, how we can remove a white color. We don't have any null color over here. I will show you that as well. Now what I will do, I will select this particular area, that is section, this is right below the navbar. We have this section. I will select this section. And now you can see the background color of the section of this particular section is Grundy five, twenty five, twenty five, red, green, and blue values at twenty five. Twenty five, twenty five. It means it is a white color. Click on this color selector. Go to selection, go to Select. And now this opacity is the right. I told you, this is the transparency here that is alpha. Bring that alpha down to 0. Once I bring that alpha down to 0, now it has a null color, no color for this particular section. You can see now RGBA that twenty five, twenty five, twenty five, but the Alpha is 00 in the sense Z TO complete a 100% transparency. Now, if we want a gradient ingredient in the sense mixture of two color, if we want that particular option, then what we will do, we will use this option called gradient. What I will do, instead of putting the gradient over here, I will select the second section, that is project horizontal year. We will apply the gradient. Okay, So I will just scroll it down. Let me see how it went exactly it is okay. You can see this blue color over here, the blue line over here. So this is the end of the section. This portion particular, this portion is what our second section is. We just projects horizontal. We will add a gradient. What I will do, I will click on Add gradient. As soon as I click on Add gradient, you can see the background color is not transparent, it is fully transparent. Okay? Now the Gradient option is on. Now you can see at the top we have black color and at the bottom of this particular area we have white color. Why it is black and white? Just because by default the gradient color is black and white. You can see this is black and this is white. Okay, let's see the options inside the gradient. The first option is type. We have two types of gradient. One is linear gradient, which is now we just selected. And second one is a radial gradient. What is the difference between linear gradient and radial gradient? Linear gradient means it travels in a straight line. You can see the black color is there and the white color is here. It is traveling. The black color is traveling to the white color in a straight line. But this means it is a linear gradient. Linear gradient travels in a straight line, but the angle can be changed from where we continue in the angle. This is the place where we can change the angle. Now it is by default it is 180 degree. I can change the angle so you can see now the black color is yellow and the white color is yet. But again, it is traveling in a straight line. Only the angle of the travel is 148 degree. Okay, this is 148 degrees. So we'll take it back to the default. I will just remove it. So this is the angle of the gradient. Now let's see how to change the color of the gradient. First is black and the second is white. You can also change the offset of this particular area. I will change the offset of this and you can see the black color is taking the extra room just because in this particular area I am saying that black color has the extra room that is offset. I am giving the extra room to it. That extra room is called as offset. This is what I'm doing, so I will just take it back to the extreme corners, both of the colors at the extreme corners. Now let's change the color. First, I will select this. As soon as I click on this, you can see the color option is here. Now. Now you can see the black color is there. It means this is the black color. I will just click on this red color Oreo, the start color is red. We'll change the color. The red color is not looking good. There's a bit of a warm. So instead of that, what we will do, we will take a blue color. So this is a blue color. It we can take it the blue color. Let's keep it to the cool color. I will select this blue color, and I will click on select the first color is now blue. The second color will take blue again, but we'll change the intensity of that color. So first I will select this blue color, then I will come to select, and then I will move it to the lighter portion. Now, your I am, this is the color which I am selected. Now. I will click on select the gradient color looks like this and it is in a linear form. Offset is 101%, 100% in that sense, both are in the extreme corners. This is offset. Let's say I'm taking this offset towards something here. And I'll click on, Repeat the gradient. Now you can see the offset. This is right Exactly In 50%, as you can see, it isn't 50%. The beginning of the color is this one. Okay, this blue color, the dark blue color. The color starts from year. It's ended right exactly in the 50%. Once it reaches to the 50%, immediately it start again from this particular blue color. So it is starting from this color, blue color, coming down to the white. And officer is 50. As soon as the offset is finished it against stock. That is, that is what the repeat option is. Okay, so if I turn off this option called repeat, then the offset will take the white color, this light blue color. It will give the extra room. And the blue color it will take the lesson. Okay, so let's bring this back to a 100%. And then we go, this is the linear gradient. Linear gradient means traveling in a straight line. The color travels in a straight line. Now let us see what is radial gradient. Radial gradient means it travels in a circular form. So I will switch it to the radial gradient. And now you can see the blue color is in the center and in the circular form, that color is changing. In the center, it is blue. In there top-left, it is white. In the bottom-left, it is white in the bottom right is it is white in the right top it is white. So it just traveling from center to the ages in this circular form. If you want to change the color RLC, if you want to flip the colors, what you can do is you can change the offset. You can take this color at this point and this color to this point. And there we go. If you want to keep the same color but in a flip form. So you can just pick this up and take it to the other direction. Gradient option works like this. So you have two gradients. One is linear gradient which travels in a straight line, and one is a radial gradient which travels in a circular form. Now what we will do, we will see the image option, that is Add Image option. Before go into Image option, what I will do, I will just click on this cross icon over here so that the gradient option will go away. And we have a default position now that is white color. And now we will add an image. If I click on this image folder over here, there are few images are there, like this bus and then this building laptop and all that. Let's put any background image in this particular area. What I will do, I will again click on this section. So if I click over here, this is selecting the container. And if I click your outside that container, it will select the section or else I can directly come to the overview panel and I can select this section from you. Once I select this section, now I will click on Add Image under background. Just click on Add Image. As soon as I click on Add Image, the Add Image option will come in front of you. Now you have URL. Url. You can add any image, doesn't matter if you have added the image in the bootstrap Studio project or not, Just click on the Add icon over here. This Add button is there. Let's click on that Add button. The tools and image pop-up will come in front of you. Just select any of the image. I will select this image and I will click on, Okay. Once I click on Okay, you can see the background image is right behind this particular area. This way we can add the image, but now you can see the image, the original image only have one stance, but it has 1234 stairs or that why? The reason is again, I will click on this Add Image. Now you can see the size of the image is 640 pixels by 426 pixels. That particular image is just fitting in this particular area. So once the image is over, it repeats the image. And in the bottom side also it repeats the image. If we want to fit the image, we have to play with the position. The second option is position. So I'll click on this position option. Then we have top, bottom, left, right, and center. So what I will do, I will click on Center. As soon I click on center of the main image comes in center. Around that all the other images come in loop. Okay? The next option is size. If I come in size, it says auto, contain uncover. The default setting is an automatic. If the automatic is on it repeats the image. If I select contain, capture all the area, but in height and width format. But if you see carefully, this particular area is repeated and this particular area is repeated. So the image is taking the area containing the area in terms of height and it is not expanding the area beyond the section. But if the size is discovered, then it covers the area. Doesn't matter which portion is displayed or which is not displayed. We've just covered the area and Pilsen the entire portion. This is one thing. And let's say if this portion is top again and this is auto, so this repeat is there. But in the repeat option, if you come and if you say no repeat, then you will see only one image which is in the center, which is in the top position. If I come here and I will click on center. So we can say the image is there, but there is no repeat option is there. But in repeat, if you say repeat x, then only x-axis will be in the repeat form. If you say repeat, why? Then only y-axis in a repeat top and bottom. If you see a repeat, then in every excess it will repeat. The best setting for the background image option is put the position in center, keep the size in cover, and the repeat should be noted that the first is URL. You can add the image over here, the position, the best option will be centered, size, the best option, it will be covered. And the last repeat, it shouldn't be in non-lipid only if it is required. But still you can go and play with the options and you can put the options as you want. So this are the options in background. So I will just remove this option. I will show you one interesting and very useful technique. In few websites you may have seen like there is an image on top of that image, the gradient is also there. What do we can do is like we can just add a gradient. Let's click on Add gradient, and let's select two colors. Let's go to library. And I will just select this yellow color over here. I will click Okay. And instead of this white color, I will just take another dark yellow color. For this example, it is fine for me. You can see this lines up there before this color switch. So I'll just click on this particular area and I can collapse that options. Now what I will do, I will click on Add Image. I'll click on Add Image. I will choose an image. I will again use the same image or maybe I will use this minibus image. Then click on Okay. Now what I will do, I will just click on center position, center cover. No repeated. Now I want to see the image also and the gradient also both effect I want. What I will do, I will click on edit gradient. This edit icon is here for and click on this icon. And I will select this first color. I will go back to this color selector tool, and here I will drop the opacity. A little bit. Opacity I will drop. Now I think now you can see the bus is not visible. Just I'm just dropping, dropping, dropping and dropping it till 0.5 alpha. That is exactly 50%. And just click on, Okay. Now what is happening? This color is 50% transparent, and this color is a 100% solid. This color also will come here and it will drop the opacity, but I will drop the opacity up to 77%. That's it. And I will click on Okay. Now you can see some interesting thing. It is like the image is also there. And on top of that image, the gradient is also there. Now let us remove this background color of this particular portion that is this heading. So I will just come here and I will click on reset. And that illegal how we can play with the background option in appearance. Isn't it interesting? This is where we are going to end this video. And in the next video we will look over the borders option in that appears. So see you in the next video. 9. Border: In this video, we will learn about borders. So these are the borders right below the background, we have the options of borders. Let us see how exactly the borders work. For that, what I will do, I will select this text. This is a paragraph in this Lightbox Gallery here and select this paragraph. There are few boxes over here. And in each box that are 11 lines which are highlighted. And other three lines are kind of diffused. What exactly this means? It means like when you will click on this box, it will only give up border, top border. It will only apply a top border. If you click on this box, it will apply a bottom border. If you click on this, it will apply a left border. If you applied, if you click on this, it will apply right border. And if you apply in the center, it will give border to the oocyte. Then in the bottom we have two options. If you click on this particular area, it is like border radius. It will create, it will give the flexibility to create a round aged border. And this option will create individual border-radius. Individual border-radius. It means like if you weren't to make our ground age only to the top right, then you can just give that around age two, the top-right and all the three other border will be h. Let's see one-by-one. And we will also see the styles color. I think as of now you have understood how exactly the color works. And radius you can see. I mean, just click on All borders all year and then I will give a color to it, maybe red color. And the style from default, I will take two solid. As soon as I take the style to solid, you can see that is a red border over there. Now let's say I just want a border on the top side of this paragraph or on the bottom side. So what I have to do is I will create, I will click on reset all. I will click on border top. I will come to style and I will select a solid style. I will change the color. That's it. Now you can see we have a border top for the particular paragraph. Let's say I want border bottom also, what I will do, I will click on border bottom. I will again go to style and I will click on Solid, and I will give a color. I can give a different color also. Just for example, I'm giving this indigo color and border left also I want, I will select the border left. I will split on solid and I will give some other color, maybe this blue color, anything. I know this is not looking good, but I'm doing this just for the example purpose. So now what we can do is like let's say I want to increase the verdict of the top border. Again, select the top border. Once the top border is selected, you can see the settings like solid and red color is there. And the verdict of the top border, we will increase the width. This is all we are going to increase the width. Let's say the width, we will keep it to 15 pixels. We can now change the style as well. So let's see the style one-by-one. We'll see the style. First one is default. Default is nothing like none. Then we have solid, then we have dashed. We can see the dashed is there. Then we have dotted, then double, then grew. We have two different colors in one line. Then we have rigid. Then insert, outset. We have initial than inherited, then hidden, initial inherited and hidden. I don't know how exactly it is, but they never show up. From a solid till outset. We can use it. Let's say I'm using this solid red color with some extrovert, or the color has changed. Actually it is a pink, not red. Then click on the red color back again. Or maybe we can take a blue as blue. I will change the pixels and I will just remove this other borders. This way we can do it. This is how we add the border. Sometimes what we do, we think like the bottom border will be nice. So I will just remove the top board roles and select the top board. I'll click on Default and select the bottom border. And I'll click on Solid and take a blue color. And I will take, and I will just increase the height. I can take a dashboard or style also, I can take a dotted border style also. I can take a double line also. So double line looks also good. We have multiple options like grew, we have GRU also looks good. It's nothing bad in that. It's like it's just a style, border style. Now, this is what we have done as of now. We have seen the all sides of border and the center board results are there. Now let's click on the Reset All button over here and disk and just apply all borders with blue color with a solid color. And let's increase the vert little bit so we can see it properly once we move to the radius. This radius option just I will click on this radius option and you can see this radius in pixels. We will increase that and you can see the borders are now moving to a rounded borders. You can see that. You can see it exactly. You can see it. The borders are now not aged and they are rounded. Now, the same thing happens in this option also, but it works individually. It'll just make it 0 now. And I will click on this other option which is individual borders. As soon as I click on that button, you can see four options over here, which shows the side of the age. This is top-left, top-right, bottom right, bottom left. Let's start with this area. Now you can see we can have a specific design, let's say 32 pixel year and 32 pixel there. It looks pretty different and quite unique as well. Or else I will just select it one more time. And this is 3232. And maybe this one we will give a slide border like 19 there and 19 years. We have a different design. But if we go with the 0 up to this two options, it looks pretty much different and it looks quite good also. From here, you can change the color any point of time. If you want this yellow color, you can go with that yellow color as well. This is how the border option work, and this is how we will be using the border option in Bootstrap studio. Now in the next video, we will move forward and we will see box shadow option. See you in the next video. 10. Box Shadow: In this video, we are going to learn about box-shadow. For that, what I will do, I will just scroll down a bit and here we have a Contact Us form. I will select this form, will not select any child component of the form. I will simply select the form. You can see the selection in the overview panel. Once you select the Form, then come to the box-shadow option, and you will see only one button over here that is added. But when you click on Add, you will get multiple options. We'll click on Add. Then first option is invert. This option we will see in the end. The second option is color. So again, as often now you have understood how exactly the color work. So this is the color option. Then we have x and y. By default, the x and y are in 0 pixels. So what we will do, we will just increase the distance, will induce the pixels, will take it to maybe 14 pixels. You're in exposition in x-axis, we will move the shadow, 14 pixels, positive in a positive side. And y-axis, we will move the shadow and pixels in the positive side. It didn't pixels. Now, aspart bootstrap Studio, we have a box-shadow, which is in x-axis. It isn't positive side 14 pixels and y-axis it isn't positive side ten pixels. But if we see practically the shadow should be a little bit of blur and it has a spread also. And Bootstrap Studio gives us the option of blur and spread. From blur, what we can do is we can increase the blur. And there'll be good. We have increase the blur and we can also increase the spread. But if we increase the spread, it looks quite weird for this particular example. But maybe in your case in some other situation, the spirit option will work absolutely fine. For this example, I will keep the spread at 0. And also I want that my color should, the color of the shadow should not be that dark. What I will do, I will come to the color and I will take a different color which is like kind of a shadow currently. Yes. There we go. I like this color. This is RGB 1198198198. Just click on Select. That's it. This is the box-shadow. Now in the next video we will see text shadow. And for that we have to select the next. See you in the next video. 11. Text Shadow: August on the box-shadow is done. Now we are moving to text shadow. For that. Definitely I will be selecting the text, select the Contact Us text. Come to this tech shadow option and I will click on Add. Now you can see the same options are here. Only the option of spread is not there. What I can do is like, I will just come here and I will select this color that is 198198 or 100 over 97 is also fine for me. I will just click on Select, and I will just increase the value of x and y, but I'm not going to increase too much for pixel is fine in x and y-axis and I will just increase the blur amount. That's it. This particular option, like four pixel again, is good for me. This is how the text shadow option works. If you don't want the blur, you can keep it like 0% also 0 pixels. For me, this option is quite good. But yes, one more thing I will tell, I would like to tell you. You can add multiples, box-shadow, add multiple text shadow, like this. Tech shadow you have added, if you want to add more for the same element or for the same component, you can add more. Same thing goes with the box-shadow. That's all the text shadow is done. Box-shadow results are done in the previous video. In the next video we will see the transform option, and then the last we will see the filters option and then our appearance section is done. See you in the next video to see transform. 12. Transform: Okay guys, In this video we are going to see about Transform. While learning transform, what we will do, we will open a new file, come to your resources file under BSS files, and you have a folder that is hash to underscore transform. Just open that folder and in that you will find a b as design file. Just double-click on that file. And there'll be group in this file of design is ready. On this image, we will understand how exactly the transform option under the appearance works. Under appearance, we will scroll down and we will find the option called transform over here. If all the other options are not visible to you, you just need to click on this arrow over here. And that's it. We'll see the options which are there in transform. First option is prospective. We can change the perspective of an image or a component or whatever it is. Then we have translated, and again we have arrow over here. Then we can translate the particular selection in x, y, and z-axis. Then we have rotation. Again, we can rotate a particular selection in x, y, and z-axis. Then we have scale XYZ and switch, we have XY. So you may have noticed over year that we have three x's over here, that is x, y, and z. And whenever the excess that is zed axis come in the picture, it means it has a 3D feature. When I'm talking our 3D, it's not a real 3D. It's like an illusion of 3D. We are not making the image into a 3D format, but it's like illusion. It's not a real 3D makes you, or that it's not a real 3D, it's the illusion. Let's start understanding the options under transform. First is prospective. If you make any changes in the prospective, you won't see any change. The reason behind that the perspective is changing. But as I told you, it is just the illusion. The illusion is not visible on the flat image. So let's make it default. I will remove it. That will be go first. I will show you the translate option. Translate is nothing but just a movement of a particular selection. This will translate the position in the x-axis. Translate Y is translating the position in y-axis. And now when I will move the z-axis, you won't see any changes over year. When we want to see the changes of zed axis, we have to do one thing. We have to find this particular component that is an image tag. Actually it is the image tag. This image tag is under which component or which tag. So before that what I will do, I will just make all these things to 0. Let us do it like reset all. I have selected this image. This image is over here. We can see it in the overview panel. And this image is a child of this particular due, because inside this Do this image tag lies. So I can show you if I collapse this, we can see that the image tag is inside this div tag. In the transform option, I will scroll down to the very last option that is preserved 3D, and I will turn this option on c. I wanted to make the changes to this image in 3D space, okay, 3D space in the center zed axis, I want to make the changes to the image in the zed axis. To make the changes to this image in the z-axis, I have to tell Bootstrap that this image is inside this div, and this div is apparent and this image is a child. Whenever I want to do any changes, I have to make sure that the parent is converted to preserve 3D space. Now, bootstrap studio knows that this div is in 3D space. Now what I will do, I will take this image bit on an upward side. You can see this by author name, September, some date is their soil. Make sure that this image is about that. And why on this text I'm doing it. Why I'm not doing on this particular text. The reason behind that is this text is in this row, and this row is not in 3D space. This is not preserving any 3D space. So we, that's why we are not doing on this image. And the second reason is this image is inside this div. There is no relation in between this div and this row, okay? And this text which is hidden now, that text is also inside this div. So the entire div is preserving the 3D space. This paragraph is also inside the 3D space. That is the reason I'm taking this example. I'm trying to explain you with this text only. The image is, oh, you're overlapping that particular text. Now, let's come you. This is where we want to make genius, Okay? So if I take it to the positive side, it is coming towards green. It means it is coming outside, but we cannot see it. Why? Because there is nothing to see. But if I take it to the negative side, now you can see the author name is there. As this is an image which is inside this div, we are making the changes and now we have changed the position of this image in the z-axis. So we are able to see this text. It is visible when we take this image in the negative space. And so this text is in the front. Now, if I take this image in the positive side, the image in the front and the text is behind that image. Same thing. One more time I will show you with this example. This image, particular image is inside this figure tag. And the parent for this particular tag is this div. Again, inside this div, all these texts are there. Okay, so I will select this option over here and I will delete this caption. I will just select this div. And now what I have to do 0s, I will come down and I will check this option on that is preserved 3D. Now this is in 3D space and all the text inside this div is in 3D space. Select this image. And what I will do, I will translate the y-axis, so it is now overlapped. And now I will transform it in z. So you can see, that's it. So you can see the text over here. Now it is a negative, so the text is visible. And as soon as I take it to the positive side, the text is not visible. Now. This is how the 3D space walk. This is a translate in zed axis. Now let's see the rotation. Rotation is, as the name suggested, you can rotate in x, y, and z axis. Now I will show you the relation between the rotation and the prospective. Let's rotate this image in x-axis. Just slightly rotate this image like 33 degree or something, or maybe more. Let's go up to 50 degree. No can see that image, but you will see this image is not rotated. It's just like squeeze because the borders remains seem only the image is looking like a squeeze image. Now the real magic comes when I will change the prospective. Let's change it a bit. There we go. Now you can see the image is actually rotated. This allows us to bring the prospective in this particular image. Now if I change the rotation, we can see the image is rotating. This is how the option works. Now you can see this image is in front. That's why the text is not visible. So let's take that image. Year that the text is properly visible. We can rotate it more. We can change the prospective option as well. Likewise, we can rotate it in y-axis, and likewise we can rotate it in z-axis and I can see the rotation in z axis. Now you can see the rotation in y-axis. You can see the rotation in x-axis. I will reset this. All options except x-axis. Let it be in this particular position, and the prospective will be somewhere like this. Now seem way we can do it with scale. We can scale it in x-axis, y-axis, and z-axis. Again, the scale in the zed axis is not visible. Same thing. We can squeeze, squeezing x, squeeze in y, and there we go. I will again make this option default. Now this is option called transform origin. This is directly related to all the options. In transform origin. We have top, bottom, left, right, and center. What exactly it means? First thing I will show you in rotate if I select and I'm rotating this. So this image is rotating from the center. This is the center point and it is rotating from there. Now, if I take it to top, now if I rotate, you will understand that the image top is fixed and it is rotating from top. This is the use of the transform origin. Likewise, if I do bottom, so the rotation will begin from the bottom. The bottom is fixed and the rotation ies from the bottom. Likewise, left, right, and center works in the scene. This is how the transform option of work, and we can make it anything from it. That's all for this video, the transform option is done. And in the next video we will see about the filters. 13. Filters: In this video we are going to see filters. Filters is the last option in the epidermis. The first option is opacity. So we are going to see the opacity for us. So what I will do, I will select the form, the entire form over here. Once I select the form and whatever changes I do, it will be applicable to all the components or to all the elements which are inside this form. What all things are inside the form? If I collapse this, you can see this text. Contact Us text, this input text, then this email input, then text area and the buttons are all inside this form. Whatever changes I am going to do to this form, components are the elements which are inside the form will also get affected. Opacity. If I turn down the opacity, you can see the opacity is changing. Yes. Okay. Done, it's done. Opacity, yes, It's done. Now. The second option is blurred. Now if you change or if you increase the blur now you can see it's Bird. Yes, that's it. Digging back to 0 or maybe I will click on reset all. Now brightness. Yes, you can change the brightness of it or you can increase or decrease the brightness. Yes, That's all. Brightness is also done. Then contrasts, contrast. You can change the contrast of that particular component. Then you have Grayscale. Grayscale I will show you on an image. Select this image. As you can see, this is a colorful image. Which image is more colorful than that? Okay, this image like we have blue and some colors are dead. So I'll select this image and I will increase the value of grayscale. And you can see that image will start turning like a black and white image. Okay, so this is the option of gray. You will ask me for just to change the color of a particular image. We have this option. So yes, we have this option, but VK and use it in a different way, in a different level. Very soon you will come to know how exactly we are going to use this. This is a grayscale and then we can increase the EU, also humans, as I told you, the color, the white blends. You can see the wavelengths of the alleles changing, the hue of the color changing. Then invert, we can change. We can invert the color. Now it isn't a negative, not like older cameras have that negative, right? That is the state of this image. Now, if we take the inward option 200 per cent, then the option than the image turns out in this particular form. Then we have saturation. We can change the saturation level of the image. Now the last option is CPR. Cpr is a Color Mode which gives a bit of like kind of warm color, not exactly warm color, but in a kind of old school colored type. And I will show you how exactly it is. Just increase this. And you can see the color is changed. I can show you on this image also increase the sepia. There we go. So the colors are fixed and the color schemes actually the color palette for the sepia color is fixed. And it changed the complete color scheme to this CPM pillar scheme. This is how filters work and we can play around it. We can do anything with it. We can also use with different options, different permanent is permutation and combinations. And finally, we will come out to a particular output where you and me both liked it when we are willing to do that very soon in the later videos, as of now, I will end this video over here. The filters options are done and all the options in the appearance panels are done. We have covered all the options in the appearance panel. In short, the appearance panel is completely done. Now in the next section, we will start understanding the options and how exactly the options work. The only difference between the evidence and options IIS, Appian remains seem doesn't matter which component you're selecting. But in the options, the options inside the options panel, the options inside the options panel changes based on the components. Not completely. Few options remain seem, but based on what component you are selecting, few of the options comes and few of the options goals. So depending on the component or element which are selecting options inside the options panel changes. We are going to see that in the next section. So see you in the next section. 14. Convert BS4 to BS5: Okay, so before moving forward what we will do now this project is currently in Bootstrap 4.6.2. In Bootstrap five, there are few additional options are there? What we will do, we will convert this project from Bootstrap 4.6.2 to bootstrap five. This is the name of the project which you can see here. And at the end you can see one star mark. This star mark indicates that the project is not yet saved. Okay, so far that what we will do first, we will save the project. Now the star mark is gone, and now we have to convert the project. So it's very easy. You don't have to do anything. Bootstrap Studio will do all the things for you. You don't have to do any kind of dirty works. Let's see how exactly we are going to convert the project from Bootstrap 4.6 to bootstrap F5. Click on File, and then just click on Convert to bootstrap five. That's it. Once you click on that, you will get a pop-up window stating that this tool will create new BS design, copy everything over, and recreate your page with Bootstrap five components, everything is fine. We won't convert this particular project to bootstrap five project instead of that, what bootstraps today we'll do bootstrap Studio going to create a complete new project with all this information within the new project. And that particular project will be converted in Bootstrap five. So this project will remain same as it is. That isn't Bootstrap 4.6 and a new project will becoming, instead of, instead of converting the same project, okay, so what I will do, I will just click on convert that signal here you can see this is our old project that is getting started, and this is our new project that is getting started in brackets, bootstrap F5. Again, you have a star mark over here. It means you have to save the project. There will be some slight genius like we have lost the color of this particular area over here, and we have lost the decoration and all that things. Why? Because that particular option is now upgraded in this particular version. Okay, so now what we will do, we will save this project and we will start working on the new project that is Bootstrap five. Just click on Save. Now I will close this old version. And after this, we will be starting all the things in Bootstrap five project. From the next section, we will be learning all about the option balance. So see you in the next section, in the next video. 15. Text Option: I guess, uh, from this section or from this video, we will be learning all about the options panel. Let's start without wasting more time. Directly, I will select this section. We will jump into the Options panel and we will see how exactly the options panel gives the option as per the components. So it'll click on the Options panel. This is the first option which is there, that is text option. Then we have decoration tooltip than response to display it and flexbox and accessibility. In this, the flexbox is very important and it is very useful. We will be using this Flexbox option most of the time. Let's start with the first option that is text option. In their text option we have multiple options. There is alignment, color, transformation, mono spacing, no rap and all the things near. You will notice that in the color option that has no color picker tool. Instead of that, we have some predefined color given by Bootstrap studio. We will be using predefined color by Bootstrap studio in the Options panel. And if we want a specific color at that time, we have to go to the appearance panel. Let's start with the alignment. In alignment, I have this options that is start then this is centre, and this is the name of the alignment is changed in this particular version, bootstrap five version. And the start means it is a left align, the center is obviously a central line and the end is the right alignment. Now, if I click on this particular icon over there, it is the arrow icon. If I click on that, then I will get some screen sizes. Over the years there is SM, MMD, LG, Excel, double Excel. Exactly. We have seen this, we have seen this earlier. This is double XL, that is extra, extra large. Then this is Excel that is extra large. This is LG, this is Md, this is small and extra small. Extra small is not there. Or whatever we will be doing in small SM, it will be considered as the extra small, extra small command also. So why exactly this options are there? We'll tell you what exactly it is. This alignment option is there and you can see three options over here. This is like a universal command. Look at universal command in the sense, if you make any changes in this particular option that is in front of the alignment, in front of the alignment key, we have this value. These are the universal value. But if you do any changes in the screen sizes, when the user will browse through the website on the specific screen size, they will be getting. This particular alignment only. Let me show you how exactly it is, okay, So before that, we have lost the color of this heading and this paragraph. We will move forward to the color. What exactly color is. As I told you, we have a predefined colors that, which Bootstrap studio is giving us. Whatever color I'm going by applied to the section. All the texts which is inside the section will get the same color. Okay, not individually, everything now we have this heading and this paragraph. They are texts, right? Except this buttons. Whatever the text inside the button, it won't be affected because it has a special command for that. This heading is dead, and then this paragraph is there. Okay, so I'm selecting this section which is a pattern to all of the components which is inside the section. And I will change the color. Let's change it to warning. Warning is a yellow color. Let's senior to warming. That's it. Now you have a yellow color to the text. It is useful when you want to change the color of the entire section or whatever it is, entire component, whatever text is there inside the section or component, you can change the entire text in just one click. Now, let's come to the alignment back. Because there's now we can see the text. You select this heading text and then I have a different option or you, in that alignment, you can see there is nothing is selected. But still the text isn't Centre format, the center alignment, even the paragraph isn't central alignment. Why exactly this ease without selecting any option, why exactly this heading and this paragraph, he didn't center alignment. It's very simple and maybe you have got it Also. The reason behind that is individual heading component or element has a center alignment. Let's see that if I click on the heading. Now you can see in the alignment, the universal alignment is set to center. Okay? That is the reason why if we select this section, that is nothing is selected, but still it is and center because the individual component is selected as a center alignment, maybe this may confuse you, but maintain the rhythm. As we go forward, you will understand what exactly it is. So as soon as I selected the heading, heading element, you can see when additional option is appear over here that is heading option. Type of heading is maybe you have heard, if you have, if you know HTML, then you have heard about heading tags like headings starts from H1, H2, H3, H4, H5 and H6. H1, H6 are the headings. That is only the number over here. Now which number is selected that is to is selected. It means this is a heading to heading 123456. These are the headings that is one to six NADH. Other display, display is like one-to-five displays. Are there. Actually, it should be six. This will pull this. Yeah, Okay. So six is dead. Then if you click on one, you can see the size of text is increased. That is display one. Displays six we have. And if you close, this is default. This is the option which is coming in front of you when we select the heading tag. Now if we select the paragraph tag that instead of the H1, H2, H3, you will get the paragraph option. One option will be there inside paragraph option that is lead. If you click on this, you will see the size is increased, but the foreign is also change. Now see what exactly is going on. You're in the Text Editor. You can see this paragraph, is there paragraph tag, is that inside the tag we have class and class is lead. Text centered. Text center is nothing but this option that is alignment. Then style and whatever it is, then we have something over here and we have this text to whatever is written inside that. And then the closing tag of the paragraph. Lot of code is already been written. So we will see this in-between. Just collapse this. Now let us see the alignment option. If I select this heading and you can see the alignment, the union or cell alignment is center. Now what I will do, I will tell Bootstrap studio, that is whenever the screen size is MD and above sea, it was like like that. Only if you change anything over here, the chain gets will be applicable to all the above screen sizes. But the lower screen size will remain same. It means whatever you change to the MD screen size, if I change the alignment to start in MD, All the above, that is LG Excellent double axle will get the start alignment only. Let us see how exactly it is from MD, I will just click on Start, where exactly we are now we are on Excel. So definitely once I click on this, the changes will be visible in this particular screen size. Also, just click on Start, and that's it. It is in the start position. But in SM, SMEs it should be in centre. Sm means small and above what is small? Small is your smaller than a boy is what? Immediately the MD. So the, only in the small screen size, the alignment will be center. Let's see. If I click on small, you can see the alignment is center. And as soon as I click on MD, the alignment is to the start. Let's tell Bootstrap studio that whenever it is in LGN about it should be center. Again, if I come to LG, it is incentive. And all the above. It will, again, it will be in center. And let's say if the screen size is excellent above, but there is nothing above Excel. The Excel is the last size. Whenever it is an XL, jim the alignment T2. And now we are in, and what we have done is for only Excel, we have not given anything. So what it will take, it will take from LG LGN about okay, nothing is Bootstrap will understand that I have to take the alignment from LG only, So LG and above. And then Excel again, it has a different value. So it will show that. Let us see how exactly it looks in the code. Just pulling out the text editor and you can see the H2 tag is here. Text center. That is the universal option is there. It is showing text center and text SM, SMEs small, what is small, smallest against center. So it is stating that text small is centered. Then text medium is start. So this is Md fixed, MD is start, yes. Then text LG center. Lg is center. Then directly we have double XL. So text Excel, this is text external is, and this is how Bootstrap pseudo write the code for you. Let us say if I remove this Excel, you can see over here, keep your eye over here. This is text Excel, and I will just remove that. And immediately it will remove the code for you. The bootstrap studio is writing the code for you. You just have to click here and there, drag-and-drop and all that things that again drop and all that things are in, this collapses back again. This is how that option work of alignment. And after that, we have color again, it's the same set of colors or their predefined colors are there. You can select any color from that. Now transformation is their transformation is lowercase, uppercase, and capitalization. If I click on lowercase, all the characters will be in lowercase. If I click on uppercase, all the characters will be capital. And if I click on capitalize, the first letter of the word will be capital. The same way will happen to the paragraph. If I come to transformation and if I click on capitalize, the first letter of each word will become capital. This is how exactly this than mono spacing is nothing but if you turn on the mono spacing, it will look like this, like old school, old-school font type mono spacing. I just turn it off. I will turn on this no wrap option nor app means doesn't matter what is the area of the paragraph, it will come in one straight line. But what happening is you can see the blue border, blue outline is there states that the paragraph, this particular paragraph have this particular area. But as no wrap option is turned on, it is showing that it is crossing the limit actually does crossing the border. So what we can do is like, if you don't want this particular extra option coming out of the border, that means it should not cross the limit. What we can do is we can turn on this option one. As soon as we turn on this option, it will come like this. Three dots. It means like something is more in this particular area. You wouldn't need to select the section over here. You will see all these options over here. The same options are there. But now if you change anything over here, it will be applicable to the section not to the specific individual texts. To apply the changes to the individual text area or the text element, you have to select the text and limit and then you can change it. And let's say I have, I'm selecting this paragraph now and I want to change the color. If I change the color to, let's say danger, you can change it. Now it's changed. So this is hold the text option. Walk. After that we will be looking the decoration option in the next video. And they could action option is very much similar to all the components. It doesn't give some additional options in-between. If we select the paragraph, the paragraph option is here. If I select the heading, the heading option is here. So this kind of situation doesn't come in. The decoration. Decoration option is fit tight. There is no such changes in the liquidation option. In the next video, we will see the decorations. 16. Decorations: Let's start with decorations. In the decoration v have four options that his border, border, color, shadow, and background. First thing, border. We have few defined borders over here. This is not the borders which are like in the appearance panel. This borders are different, that borders are different. In that border you have a specific control, but this is a fixed thing. First thing is bordered by default. It is none. That is the cross area selected, that is default. There is no border is selected. Show you one by one. So firstly, we will click on that irregular border. If I click on regular border, now you can see the border is there, you can see the white border. Is there white border? Why the white border? Because the watercolor is default. Whenever in this under the Options panel, if you select the border as any, Select, select any border. And the color is default. It means it is a white color. Now I will click on Color and against some predefined color set is there. If I click on danger, if I just select that particular heading, you can see the border is now select that border once again. And now what I will do, I will select this particular area that is rounded. It means the ages will be rounded. Now you can see the edges are rounded. After that, the other option is circle the border even circular form. The next option is filled. If I click on the pill option, you can see now the border is looking good, pretty good. But only the corners are in pill form and the pill shape. Now I'll select this heading back again. And now let's see the shadow option. If I come to shadow, we can see small, regular, large. And if I click on Regular, you can see a shadow is there. Now let's change the background color of it. I will select this area and I will go back to the impedance. And I will just remove the background color from here and just click on Reset and so that it is white now so we can see the shadow and all that things. If I have removed the shadow, I will select this heading. If I remove the shadow, Let's make it default. You can see the shadow is not that. You're specifically when we apply the shadow over here. The shadow comes only in the lower portion. It won't come in the angle which you want. If you want that particular shadow, you have to go to the Appearance. If I turn on the shadow as the regular shadow, just to keep your eye in the lower section of this heading. If I just click on the regular, you can see now the shadow is there. This is how the shadow works in the declaration under Options panel. And I have a large shadow also, if I click on large, the area of the shadow will increase. Now I have a background also. If I click, if I come here and if I click on background, so if let's say I click on warning and you can see the background is warming, but we are not able to see that text. The reason behind that is the text is also warning. Let's see some other color. Let's see the primary. Now you can see the primary is there, the border is read, the background is primary and the text is warming. Let's change this. Let's make it warning the border. The border color will be warning. The shadows regular, and the background will be again warning. So same color will be there. In the text color option will change the color from warning to maybe light. Now it's looking good, pretty good. So this is how the text decoration works. Now you have the option of gradient also over a year. As soon as you give any color to the background, you will get this gradient option right below it. What exactly gradient is greater in his leg you cannot you cannot select any color which you want. What will happen? What is this warning? The color which you have selected warning, the gradient will come in linear form and it will be like a light color on the top and the dark color in the bottom, it will look like that. So I will just turn on this gradient and you can see a slight light color is there on the top. And the dark color is that the original warning color is around that. Okay. So I will show you in some different color. Maybe it is not visible in this color. So let's select the dark one. Now you can see there is a light color is there? I will just turn off this. You can see the difference, gradient, gradient of, gradient. Gradient of this is how exactly the declaration auction works. You have some ready-made borders over a year. Then you have a border color. You have the shadow option there, then you have a background. You can change the background color that is predefined background color, and then you can turn on the gradient also. That's all in this video, the decorations options are done. And for any component in the decoration option will remain same, it won't change. In the next video, we will see tooltips. So see you in the next video. 17. Tooltips: In this video, we are going to learn about tooltips. So let's click on this tool tip over here to expand that option. So let's click on the Tooltip. And inside tooltip, you will find one option there is unable Tooltip. But when you enable the tool tip, you will get some more options. What exactly tooltip is? Let's say in the preview, if the user hover the mouse pointer on the specific area, extra information will come for that particular tool that is called tooltip. Whatever I told that it's not definition of tooltip in general, I told you. Okay, So I will just turn on this tooltip option and now two other options are there. One is placement, where exactly the placement of the tooltip will be and the title. What should be the title for the tooltip title in the sense of what information will be coming inside the tooltip placement I will keep top. And for this particular tooltip title, let's type this ease. Heading element, VSS of five in brackets. Beta. I will just click enter any interests, find what will happen in preview. The tooltip will pop, but you're also, it will pop, but it will pop in the lower area somewhere here or they'll just take my most pointed and I will hold it over here. Then it is there. It shows that this is then heading element of the spellings or wrong. Let's correct the spelling. This is an heading element, e LEM, NP, heading element. Okay, so how are back again? So this is an heading element in BSS and BS phi Beta. Bss is Bootstrap studio and BS five 0s Bootstrap version. So I think this is an headings are and should be not there. It is grammatically wrong. So this ys o heading eliminated. This is how the tooltip work. Now we can change the placement also placements are like top, bottom, left, and right. You can change the placement of the tooltip. Let us see the preview. And in that preview you will understand how exactly it works. To get the preview of the website. The Preview button easier and one arrow will be there, just click on that arrow. The second option is stating as disabled, so we have to enable that option. So just click on this trigger over here, and now you can see the preview in brackets it is on. If you click on, it shows just preview. Just click on Preview. Now it is on, and now I will click on this button. So your default web browser will launch and it will show me the preview. This is how exactly our website is going to look for. I guess I'll just take my mouse pointer over this area. And now you can see the tooltip is that this is a heading element in BSS off BSS five beta. Let's change the placement. If I gained the placement to bottom. And again, if I go there in the browser without refreshing it, it's already refreshed. I'll take my mouse pointer over here and you can see the tooltip is that there is no specific length to the tooltip. You can type anything in the tool tip. There is no specific character limit to that. We have the placement of y because like let's say if I'm hovering my mouse pointer on this now the placement is bottom. And just because the placement is bottom, you cannot see the paragraph. Some area of the paragraph is hidden know, let's say on the top also we have something better. What we can do is like we can, we can select the placement to left or right. So let's select the right placement. And now if I go back to the browser one more time, and if I hover my mouse pointer over that now you can see the placement is on the right. Now, this is what tooltip is and you can create anything to give us specific information. Most of the time, tooltips are used on the area where the question mark is there, you don't know what exactly it is. So you just take your most point on the question mark and immediately when additional information comes out of there, that is what tooltip is. So we will end this video over here. So the tooltip option is also covered. To understand flexbox, we have to know much more about bootstrap row, column. Lot of things we have to know when we complete that particular section, when we will be able to create a complete design. After that, we will see what exactly the flexbox 0s, two things we will be going to look after few videos, that is response to display and Flexbox. This two options we will see later in some other section. In the next video, we will see the option called Accessibility. See you in the next video. 18. Accessibility: It was an LED seed, the accessibility option. That is the last option in the Options panel. I'll click on Accessibility. And here you can see visibility. And you have two option that is visible and invisible. And the last option is screen breed only. Then you have to turn this on how exactly it works, I will tell you. So let's select this particular text over here. After the project we have this text and indivisibility. If I click on visible, it will be visible. Obviously. If I click on invisible than the textbook will be invisible. But it is not hidden. The component, the element is not hidden. The visibility is invisible. So it means that text is there, but it is invisible. The second option is screamed read only. When you turn on the screen read option you can see the paragraph is now hidden. The paragraph is now hidden, but it is still there. Now it is in scream bleed auction event. If you turn on the visibility to visible, it won't be visible because it isn't screamed read only. What is the mean by screened lead only? There are a few websites which are designed for people who are blind, but they can listen. There are so many websites nowadays, there are browsers also are in such a way that they have a specific option called screen read. The text to which is dead, which has the option of screen read only. The browser will read that particular text only in the news website you can see that it's an audio file oriented. You can just click on screen, read it, start reading the text. Doesn't mean it's part reared the entire text from the website. It is read only the text witches in the tag called screen read. The screen read option is for that to convert the textual content in the audio form with the help of the browser support, that is called screamed read option. And this is the visibility, but this is what the accessibility options IIS. And we are closing the section over here and we are done with the options. In the next video, we will see the third and last option in the evidence panel that is animation. So let's start learning that emission from the next section. 19. Animation Scroll: Oh good. From this section we are going to start our animation panel. So this is the place where we will be animating our elements, components. For that, what I did is I have created one small project for that. You have to go to your BSS files. And in that you will find a third folder that is called animation. Inside animation, you will find this be as design file that is also called as animation. You have to open this file. Once you open that file, you will get this design in the animation panel right now it is showing no components selected because I have not selected any component over u. So let's select the first component. This is the overview panel. And in the overview panel you can see there is one container. This is a component and we have two elements in said that that is heading element and a paragraph element. Then we have rho, this is a class, so we can call it as a component in this bootstrap studio. Inside row we have multiple columns, we have column, column, column. You can see columns are there. In each column we have card. You can see again on each column we have cart and insight card. We have this image. Then we have one more, a component that is scarred body then heading, heading. And inside this heading we have link and paragraphs. So this is a completely well-structured nest of a component. What do we have to do over here is like we will animate all the cards in this particular design. So first I will select this card and let's start understanding our animation. So as soon as I select this card now you can see in animation panel, you can see one option is there that is triggered. And if I click on this, you can see three options are there. One is scroll, one is hover, and one is Laura. What is cruel? Cruel means scrolling. This is the scrolling of the page. This is scroll. We can animate our page on the scroll as well. When you scroll the page, whatever components or whatever design comes in front of you, it will come in animated way. Rigor is scroll, then type is filled. Now you can see as soon as I select any one of these options are just scroll, hover and load. You can see a star mark over here. It means that this particular component is limited now, and then we have types of animation. If I click on that, we can see fade, fade up, down and all that things. If I click on feed, if you want to see how exactly it looks, just click on Play, then you can see how exactly it will come in the web browser. You can see it appears immediately. If you see carefully, you can see that the duration is very less to control the duration, we have the option of duration. If you click on this, we have 50 MS. MS is milliseconds. It starts from 50 and the multiples of 50, we can go up to three thousand. Three thousand MSE is three seconds. If I click on 3 thousand and if I click on play, and you can see it takes three seconds to come in front of you. So you can make any changes. Select 1 thousand MS, it means 1 second. And if I click on Play, you can see in 1 second, the car comes in front of you. This is the scroll effects. What we will do, we will come down and we will apply the scroll animation to this for photos over years, There's four photos. First one is this, so I will just open this column. I will select this card. I will come scroll and I will increase the duration to 1 second. Seem way I will give it to the second one. But here what we will do, we will use another type if it is fade. So let's see zoom in and duration of 1 second. Let's plate. Let us see how exactly it looks. Oh, okay. Then I will come down the third one. I will select the scroll. Let's give another one like slide up. Duration will be once again. And Lee, this is how it will look there. The last one, the last one, this card scroll, Let's see. Any other effect is the slide was there. Flip right? And just play. We need to use the duration to 1 second. Now, Lee, okay, we have given four different animation types to four different cards. Now let us see the preview. I will click on the browser. And now if we scroll, you can see when it comes in the visibility. It means this is the end of the browser. Are you scroll down and I will refresh this so that the page is reloaded so that the animation can be played once again. And if I scroll now, you can see there is nothing but as soon as I scroll a little bit more, the animation is there and you can now see it properly. Let us do it one more time. I can see. Now it is not looking good because we have given all four cards are different animation, but it will look good if we give the single animation type to all the cards. Let us give the single animation type like flipped right to everyone. Let's change the type of it. Slip right? Select this one more time. Flip practice. If I click on Play, I can see, yes, everyone is having the same type. Now. Let's refresh it. Yes. Now scroll down, scroll, scroll up. Now we can see again, again, this is holding a scroll animation work. Now let us see the other options in the scroll. We have the option of upsets also, and we have the option of delay also. Delay means we can make a delay of it. If I play now you can see the delay is there. So immediately it won't start. It will take 250 milliseconds and then it will start. As of now we will make it none. Play once means when the animation is loaded. And even after that, if the user scrolls up and down, the animation will play for only one time. It won't play again and again. We'll show you that you can see the animation. Now, I scrolled up. Again, I'm scrolling down animation is there again against scrolled up, against scroll down again. You can see the animation. But let us select this first one, and I will click on Play once. I will come back to the browser. Now it played once, scroll up, scroll down. You can see this remains same, but these three card had the animation. Again, I will show you scroll up, scroll down. Now you can see the animation was there, but this was not playing because we have given the command to it as play. Once. After that we have one more option called run on mobile. It means even in the mobile screen, the animation should be there. That's it, nothing else. These are the options in scroll. This was the scroll animation. In the next video, we will see the hover animation. I'll see you in the next video. 20. Animation Hover: Let us see the hover animation now. We will work on this for card. This is the card first one. I will select this Cartier. Now select this hover trigger. So I'll click on hover. Now, we have first-world bounds. So I will click on bounds. And if I click on play, this effect will come when the user will hover on that particular card. We have flash also. It will flash like this, and then we have pulse. So it will come like this. I will stick to pulse, feel free to check out the other options as well. So coming back to the browser, now if I come here and if I hover, you can see whenever the most pointer is Howard, you can see this animation. The only thing is you cannot apply all the three animations at once. For single component, you have to go with one only. This is pulse and select again hover. And if I select anything else, shake, then click. You can see the animation is there. But let's select the pulse to all four of them. The cart come to Animation panel, hover and go back to the preview button. Now you can see, yes, there we go. This was hover and again, you have that option run on mobile. It means the animation should work on mobile as well. That's all. You won't see any other options like delay and duration and all that things because it is fixed, you just have this menu options in how a trigger. In the next video we will see load animation trigger, and that will be the last video of this section. So see you in the next video. 21. Animation Load: Okay, so let's start with our Lord. Let's work on this card which is at the top. So just click on Reset all I will remove the animation from here. I will select the load option. Lord means whenever the page is loaded, what animation should come in front of the user. Again, we have this options that is bounce flash bulbs. All these options are there. Let's select any one of the option from here. Let's select the bounds and click on Play. And you can see that when the page is loaded, this animation will play automatically for the onetime. If you want to play in loop, then we have the option for that as well. But for the loop, we will select this paragraph. Selecting the paragraph, selecting the trigger to load. Then let's select this flash option. If I click on Play, you can see the flash option is there. If I click on loop, then this animation will be played in loop as soon as the page is loaded. And the last option is run on mobile. It means this animation should run on mobile. But let's see the preview over here. The page is loaded and now you can see the animation is playing in loop continuously. Then I will refresh this and you can see, yes, you can see that particular effect was there. This is all in the animation panel. This many animations you can do for your components, elements, tags, whatever it is. Feel free to check out all the options in animation panel. And if you have any question, drop a question to me and I will try to reply you as soon as possible. Majority of the time, I reply you in 24 hours. But because of some different situation, I may take more time, but it will reply you. That is for sure. As of now, we have covered all these three panels and that is appearance panels, options panels and animations panel. Now, we don't have anything to see much more in the panels. In the next section, let's begin with some of the technicalities of Bootstrap. See you in the next video of the next section. Bye bye. 22. Understanding Row and Column: Now let us understand what is Bootstrap grid system. Bootstrap grid system is responsible to make bootstrap a mobile. First response, WHO framework a grid contents of two components. First, ease row, and second is column. One row divided itself into 12 grid and it changes its size automatically according to device size. Let's say we have taken one row and in that we took two columns. It will automatically get divided into two parts, taking six grids each. Let's say if we weren't two columns of two different sizes, making a total of 12 grids. Year is the magic year. We can tell each column that how many grids it can take. Let's say in first column, we need a big area compared to the other one. So we can tell the first column to take eight grids. Then automatically the other column will take the remaining four grids, making their total of 12 grid system. In case if we give Ed grades to the first column and six grids to the second column. Then the second column will come below the first column because it has exceeded the total of 12 grids. This way we can create a perfect row column structure. This you will understand in more detail when we start designing website in the bootstrap Studio software. 23. Lets Get Started: In previous videos, you have learned about the basic understanding of Bootstrap studio. And the major drill over here is you have seen bootstrap studio version 5.6. Because of few reasons, I was not able to record videos. And now after this, we will be learning in Bootstrap Studio 5.8. Not too worried that I was not so many of drastic changes in Bootstrap studio. The changes are like minor bucks fixation is there through additional options, are there which we will be going to see in the further videos because from now we will be working on projects. We will be working on majorly three projects. First will be a basic normal one-page website. Second will be, we will be creating a website where you as an individual can start a business of website designing. I will be teaching you how to design your own website, how to integrate few external things like ticket racing, online, chatting, official emails, hosting the website, and all that things. At last, I will be teaching you how to design an LMS system website where we will be covering both sections, the user and the admin end once you're done with the user and admin. And if you wanted to create one more module like instrument, and it will be easy for you to do it by your own without wasting much time. Let's start. 24. Navbar of Project One : So by this point of time, you have learned about the basics of Bootstrap studio. And while I was recording this video, there was a huge gap in between. This is the reason why we have stopped on Virgin 5.6 and now the bootstrap is at version 5.8. But nothing to worry, there is not a huge change in the software. The changes are, they have fixed, some minor bugs, have improved the performance of Bootstrap studio, and also they have changed some look and feel and all that things. I will show you that first and then we will proceed further. And few things which they have changes like they have added a Bootstrap icons library. And now the Bootstrap version that Bootstrap framework is now 5.1. The Bootstrap framework has also upgraded. Without wasting much time. Let's start directly and let's see what we are going to design in this video as we have started designing the website from this section, two projects will be there. One is a single one-page simple website design. The second project which we are going to start is an LMS system in which we will see both the ends admin and the user end. This video tutorial. As you already know, we want to create a new design. So what we will do, we will just simply click on new design over here, and then we will name this particular design. I will name this as your name. Now the bootstrap studio version by default selection is version 5.1, and we are okay with that version as well. By default, the blank temporary selected, and that is what we want. We will simply click on Create now, design. We have our blank webpage in front of us. Before that, I will show you what exactly we are going to design and which resources we are going to use. What do you have to do is you can go to your BSS course main folder. Inside that you will find BSS files and then you will find fourth number of folder that is hash for underscore resume a. In that you will be finding this BSS resume a design. I already designed that just for my reference, I will be looking to that design and I will creating it back again. And the resources which we are going to use ease in the resources folder. So these are the images which we are going to use there. Just, I will take this over here and select all drag and drop in Bootstrap studio. So seven images were imported. And now I will open the BSS file over you, the resume a dot bss, I named it as resume, but it didn't turn up as a resume. A look, this is what we are going to create. So we'll just preview this once in this browser. Show less. Don't want this. This is what we are going to design your name. You can put your name over here. So we will have three sections in this particular piece, this is a one-page website which will be continuing home about and contact. If you click on a board, you can see a smooth scroll is they're comes to the About Us section and I'm going to click on Contact. It will come to the contact, contact section, coming back to home. This is what we are going to design. There will be a navbar one central line, one center component in-between where you will be entering your name, what I do image. Then three cards are there, some icons are there, the Nevada section, then fuel photo galleries, then contact form is there with this particular with all this contact information and all that things. And then we have a footer and yes, that's all. Let's start designing this website very quickly. Okay, coming back to bootstrap studio. So first thing we have to do is import our navbar. So I will type Nav over year. The second option is navbar drag and drop inside the body tag. Now we have the navbar. Select the navbar now, go to Options and turn off the fluid option because we don't want the fluid to be there. Now in the brand area, you can type your name. I will just type your name or your three sections, which we want is forced ease home. Second one which we want is about third one which we weren't. E is contact. Okay? So that is all for now. We will go step-by-step. In this video, we will only cover the Navbar section. Now this home about and contact. I don't want I don't want in the left side, I want this in the right side. What I will do, I will select the navbar. Navbar is selected now and which area I wanted to select. Now, I wanted to select this nav. Once I select this, now you can come to options and you can see now in the alignment I will select the end alignment. So now it isn't the end. In the bootstrap five version, we don't call it as left, center, and right. We called it as Start, Center and end. I'll just click on end. And that is what we wanted, right? So that's all this particular area is done. Before moving forward. The first and most important thing, the look and feel of our site comes with the proper font. What I will do, I will select this body tag, OER. And in the appearance section, I will come down to the font section, and I will add a font by using the font family. The font which I am going to use ease. This one. I will just turn on this option and I will click on Save. That's all. And then I will simply select this form from you, this font which we are going to use in this particular project. Okay, Moving forward, I will just select a navbar. Now, directly navbar I will select which is the next component immediately after body. Now I will come to the background section, and in the color section I will just select the white, extreme white color. And let's reduce the opacity down to 80%. You can see now it is RGBA stands for alpha and 0.8 is 80%. And that's all I will just click on Save. And now the Navbar section is done. I will stop this video. And in the next video we will look how to design the next portion of this website. 25. Home Section of Project One : In this video, we will move forward and we will be studying two new things in Bootstrap Studio. One is image editing by using external software, and that editing will be directly connected to bootstrap studio. Let's see how we can do that. What do we have to do here is first I will just take a DV over here. We'll just type div. Div will take a div and drop over this body tag. My Ds is, you're now, now inside this div, I will take an image tag, so I will just type IMG and I will take this image tag and I will drop all this do tag. Now the image tag is over here. And now we have to do is we have to place this number six image in this particular area. So I'll just double-click over here. I will select this image and click on, Okay. Now what is happening, OU, we want a square image, but the height of this image is too big. In traditional way, what we are supposed to do is we have to import the image in the image editing software like Photoshop when affinity or any image editing software there. We have to edit the image, export the image after editing, and again import it into the Bootstrap Studio software, then use it. But now we have a shortcut in them. Let's see how to do that. Now what I will do, I will go to Setting option. I will come to external editor and I will click on image editor. Now in my system I have GIMP. And GIMP is a complete open source image editing software. That is the reason I'm using that image editing software. For this particular tutorial, I will just click on this default editor and I will click on GIMP. Once it is done, I will just click on Save. After that, what I have to do is like, I know I have used this image in this particular area. I will just select this and I will double-click on that image. What will happen? That image will automatically get opened in my image editing software. Now, whatever the instructions are there, I have to check the instructions for now I will keep it as it is and I will just click on converter. Once the conversion is there, I will click on Crop button over here. And I will just simply drag my mouse and I will just crop this image. I will make sure that my image E squared, so it is 1000 by 1000. I will type just thousand over your, and I will click on Enter. Once it gets done, I will just click on the Selection tool and the image is cropped. Now. Now I have to export the image and it's very simple. I just click on file. I will just come over Export option or your export as. Now this six-point DPG is there. I will select this image and I will click on Export. I will click on Replace them. After that, I will just get this dialog box option. Will just click on Export or you know, the export dialogue box has gone. And what I will do, I will just simply come back to bootstrap Studio software. And now you can see the image E's in square. Now it is like a 1000 pixels by 1000 pixels. Now simply I will just click on View icon over here, or just go to options. And inside text options, the first option is alignment, and I'll click on center. That way the image is now centered align. Now, if I click on image, come back to Appearance now you can see the image height and width is 1000 pixels by 1000 pixels. It's very quick and very easy. Know what I will do. I will just type 500 pixels or your px and 500 pixels over here. That where the image will be in 500 pixels by four pixels and that is the size of each I want also, again, I will select this image, go back to Options, and now I will search for decoration option. In the declaration option, you can see the borders are there, and now I will just click on circular border. Now the image is in the circular form. After that I will just take a heading. I will place this heading right about this image tag. And I will just type your, your name. We will take it in different colors. So for that, what I will do in the search, in the studio search option over here, I will just type span. Take the span and I will drop inside this heading tag. And this will select and I will type name. I need a space in-between that. So I'll just come over here and I will drop, drop, drop us peace. Just enter, select the span. And in the color option, we have to make sure that we are in the text option. In the color option, I will just select danger or I can select any color in that order if I weren't any customized colors or just come back to appearance and from this foreign color, I can select any color which I wanted. After that. After that, I will take a paragraph and I will drop it in between heading tag and the image tag. I will just double-click on that and I will type what I do. That's all. Now this portion is ready. Now let's move to the new section. In this deal, what I will do, I will take the container type COND and it will drop this inside this div tag. Now the container is here. I will take the row and this row is suggested, or you could just take a row. Now I will select the row, the columns are there. I'll take this column. Inside this column, what I will do, I will take a card drop discard in, inside this. And there we go. We have a title subtitle and all that things. But what we want, we don't want these links over here, so I'll just remove this links from you. I will, I will search for icon now. Icon is there and I will drop this icon inside this body card body. I'll double-click on this icon. And now you can see we have lots of icon libraries over u. We have bootstraps, would you icons as well? Now I will just type verb and this web option, web icon is there and I will select this web icon. Coming back to the Appearance, I will just scroll down and I have to increase the font size. Now, I will just increase this phone size. Maybe a 100 will be good for me. It makes sense. The title will be website design, VSS designer, BSS bootstrap Studio. And here you can put anything, whatever you want, you can just add over there. For now, I'm just letting the dummy text to be over there. Now what I will do, I will just select the scarred, come to the Options. And now I have to go to the decorations and I will just drop shadow over u. That will be a regular shadow. Regular shadow is there. Now, I will select this column and I will do look in this column in total, there will be a three columns, 12. There we go. I'll double-click on this icon. I will just type search, search icon. Instead, I will select the search. I will come here and I will just name it as SEO. Digital. Availability. Again, the dummy text will be there. And now I will just double-click on this icon one more time and I will type server. The server icon is there and click on. Okay. I will type hosting *** be ING hosting domain. You are able to type hosting her because I use hosting her, because I use those strings are frequently you can type anything over there. Now this particular options, we want some changes in that. Now we will give some extra look and feel to that. So I will select this first card year. I will I will come to Appearance panel. And in the background the image is complete white. What we will do, we will just take the opacity down to maybe 80%. Fair enough. Then I will select this copy, I will do this steam to the second card actually. And to the third card also just paste the values over u. Now I will select this row, or maybe I can select this container, compute container. Now coming to the appearance, the first layout options out there. And in the layout option, the margin option is there. I will just open this margin option and margin top. What I will do, I will just pick the value to the negative side. Now you can see that there's overlap between this image and discards, and that is what we wanted. Now, I think this much overlap is enough, so maybe let's take minus a 100 pixels. There we go. Okay, fair enough. Let's check with the different screen sizes. Md, we want different things. So I will just open this row, I'll select this column, come back to Options and MD I will just take six. The second column, I will take six. And for the third one, I will take the complete tool in MD. Yeah, I will take the complete dwell in small screen size. That is completely fine. And in extra small screen size, again, that is completely fine. Okay. No issues. Yeah, One issue is there. The image is now big. What we will do, I will come, I will come and select this image. We will come back to appearance panel. And now what we have done is like from 1000 pixels, we have taken down to 500 pixels. So in short, what we did is we reduce the size by 50%. Instead of taking 500 pixels, what we can do, the alternative option is just click here to the reset button over here, and just simply type 50%. That's all. There is no vertical scroll and the complete fixation is their second option is also there, which we will see in the next video. But before that, we will fix this particular area where these two cards are very close to each other and there is no distance between them. So coming back to the Excel screen size, I will just select this column, this editor panel, attribute panel. And in the class, what I will type, I will give the margin bottom to them. So what I will do, I will just scroll down a bit. Select this column. I will type margin bottom two, dash two, and hit Enter. You can see now we have a margin bottom seam I will do for this column as well. Margin m for margin before bottom dash two. Simple on this column as well. Margin, bottom dash to what I did. What I did over here is like I selected individual columns and I give them the values individually. But you can select all together, all three columns at the same time and you can give them, and you can give the same value that is margin-bottom to at the same time. Okay? So I'm just going slowly. Once we get the flu, then I will do it in a proper, systematic, and appropriate professional way. Now we can see that again, we have some issues with the column. The column Rita selected all three columns with our selected. So going back to the Options panel, now we can see after MD, the screen size will be LG. Lg will give the width of four. This way. In MD, it is like this, sorry. Lgn above it will be one after another. In MD two will be at top and one will be in bottom. And in SM, each and everyone will be below each other. And same thing will happen to extra small. I think for now it is good to go. So coming back to the Excel size, we have this which started getting a look. We have to do something with this image C. Now the responsive is off, and if I come down to this particular screen size now you have a horizontal scroll over here. Just to fix this without using the medallion older didn't just click on this response you icon over here. And that's solids done. Play with the responsiveness of the image. That's all. Okay. Yeah, thank you guys. See you in the next section now. 26. About and Gallery of Project One : So in this video, we will move forward. We'll take one more containers, so we'll just type container year. And I will drop over this and I will drop this container over this body tag. I have the container over here. Therefore, this container I will give a margin, top, margin, top is M is margin and T is stop. Dash five will give the extra margin over here. So yes, we have some extra gap year right? Inside this I will take a heading, heading tag, drop this heading tag over here. And this will be written as about going to Options central element. That's all. This heading I will give padding top and padding bottom. So P stands for padding. Bottom is B, dash three space, again, padding top. Pt dash three, that is Pb is padding bottom, P t is padding top and three is the value. Now, I have given the padding and margin to this. So I'll select this container and in appearance will come down to border. And I will select this top border, and I will select the solid color and black will be fine. Again, bottom and select Solid. I have top and bottom border to this. Let's have a preview over here. I will just click your eye will enable this Preview and I'll click on Preview. Default browser will launch. There we go. We have the preview of our website. It's looking nice, isn't it? Just minimize this and let's move forward. We'll take one more container over here, drop this insect body tag, and I have this container over here. Now, we'll take a paragraph tag and I will drop this paragraph inside this container. And for this container also I will just give some margin top or maybe three. I wanted to dummy text in this. What I will do, I will hit Control P and L type Lorem are I will just type, I will just hit Enter and hit Enter one more time. There we go. We have a dummy text over here. I will think I have to duplicate this dummy text three times at least so that I will have some data or you, let us see the preview. That's it. Good or else just take this copy and paste it. And paste it here. Again in paste we have two different options. I will just copy this one more time. What I will do is you just simply paste control V year. You can see there is an extra space in the beginning and extra space at the end. To avoid this, what do we have to do is just do Control Z. Now to avoid this extra spaces, what we have to do is like we have to paste by using the shortcut like control plus shift plus v. That's it. We don't have extra space now. I will do this inside this on so that it is a good paragraph. And I will just remove this last one. So select the paragraph and in the fonts I will just go to alignment and just click on justify. Same thing. I will do this to the second paragraph. I will just click on justify over u. Ok, now it's looked good. After that, we have to put the gallery section and that is very much easy. The readymade component is there. I will just come here and we'll just type gallery. You can see a Lightbox Gallery. Ou, just take this gallery, drop it inside this body tag. That's all your gallery is done. The Lightbox Gallery or I will just remove this lightbox and only Gallery option will be there. This text as usual, if you want, you can keep it or else you can remove it. Now you have this photos as well. These photos can be replaced and that replacement we will see in some later videos because now we're just focused in designing not the replacement of the photos. Let's say the preview. In preview you can see now, yes, we have this thing also the About section then gallery. That's all the Gallery option is also done. Now the most important thing, the Contact Us section, we want to design the Contact Us section and that particular section we will learn in the next video. See you in the next video where we will be learning how to create the Contact Us section with some text and a contact form. I'll see you in the next video. 27. Contact Section Part 1 of Project One: In this video, we are going to learn about the Contact Us section. So directly we will start, I will just take one container, drop it inside the body tag. Now I have this container and I want two sections where one though e-mail address and phone number will be there. In the second section, we will create a form. What I will do, I will take a row. Obviously. Let's not search the room. I will just select this container and in the suggestion, the row is their big this row and drop it inside this container, select this row and we have to create two columns. One column is here, and I will just duplicate this and this is the second column. So select both the column come to the options, invert. Just select this six from MD and above we have division of two, that's 66, and before that it is like 212. So complete two sections will be there. So I'll just click onto L over here. It will look like this. Now two columns are there, and now below MD year we have one after another. I will take a heading over here. I will drop this heading inside this column. I will type. Feel free to contact me and exclamatory mark. After that, I will take a paragraph. Let's not take paragraph now. We'll take a link. This link I will just drop inside this column, the first column. Okay, let's take this editor panel. In the class. I will just enter a class. The name of the class will be text decoration, text dash decoration, none. That is a ready-made bootstrap class. Then text dash dark. Again, this is a ready-made bootstrap class. It enter. Now the text is dark and there is no decoration, decoration that sense when you have a link, when you hover, hover your mouse pointer on the link underlined, welcome that we don't want. Okay, so now, OK, and now I will take a paragraph. Put this paragraph inside this link. Now, just type the e-mail address. So what I can type the immunogenicity example, Years Example at the rate email.com. And the text of link, I will just double-click on this text. I will just double-click on this link, link text and I will just select it and just remove, like removing the sense backspace. We have a paragraph for you. Why I added paragraph is like we have more control over paragraph, but linked, we don't have control over link. Let's say for example, I just want to increase the size. Just select this paragraph and just click on Leto. Yeah, that's it. And if I select this link and now I want to duplicate it two more times, what will happen if it is link? It will come one after another. I wanted to below each other, not one after another. That is the reason I have taken the paragraph for your and I didn't continue with link. So let's select this link. Duplicate one more time. Now we'd ask him below that. Duplicate one more time. One more public good is there. Now we'll just type a phone number over years. The full number will be plus 91. That is the country code of my country. Space, 9876543210. I'm very much sure this number no one use this second phone number will be plus 91, again, 9876543211. Again, this number, no one used this. Now what we want is whenever the user come to the website, you can see now on this particular area the most pointer is changed. Let us the fingertip icon is there. Why? Because it's the link. Whenever user click on this particular email address automatically, the default web browser or the default email application will open. And in two sections where we enter the recipient's email address automatically, this email address should be entered over there. I want to create that kind of feature in this website. So how to do that? It's very easy. Just go back to bootstrap studio. Select this particular link in the URL section, this hash, and just type male colon and the email address. Example at the email.com. That's it. There's good to the preview. And if I click on this email now you can see it is asking to launch e-mail application. And I'll click on, Okay. Once I click on oaky, you can see example at read email.com is now you're in the two sections. You just now the use of just need to add the subject and the content. That's all. This is very much easily and very much handy. In UX terms, user experience is at top-notch. Same thing we will do with full number. So I'll select this phone number and the link, which is the link which holds this full number. And I will just click on this link, come back to this URL. And I will type tel colon and just type the number with the country code plus 91979876543210. That's it. Same thing I will do with the second link as well. Just type till PEL tell semicolon space, Country Code and the phone number. This way, what will happen when the user will click on this particular area it will set the site is trying to open, pick an app. I will just click on Open. And now it is showing one more thing. But what happened when majority of the users are using Chrome browser? Chrome browser is connected to our mobile devices. What will happen when any user clicks on this full number? And it isn't Chrome. What will happen when different kinds of dialog box will come you try if you're using Chrome browser, the different types of pop-up will come here. And once the user click on Allow automatically in their phone, whether it is the Apple or Android, doesn't matter. Automatically that number will be coming inside the phone and how exactly will come. The phone application will open. This number will be automatically dialed up and the user just need to click on Call button. That's all. Again, the user experience is at the top-notch. Yes, that's it. This is how we are going to create this particular area and this section is done. Now, we will moving forward to the next section where we will be creating a contact form and that we will be doing in the next video. See you in the next video. 28. Contact Section Part 2 of Project One: Okay, so we are going to create a contact form in this particular video. So let's get started. So first thing I will take a form, your FOR M form. I will drop this form inside this container. Inside this column Not container. This is a form element. Now inside this form element, I will take div. I will just drop this div over a year. And after that I will take a label. I will type labeled LAB, idealtype leap LAB only then field labeled. Welcome. This field label. I want to drop it inside this body tag. Okay, field label is there. And now first thing what we want from the user is meme. That particular information will come inside text input. I will just add one note over here, the text input and text area are two different things. Don't get confused over you, or you just take this text input and this text input, I will drop it inside this div. Now this label, I will just edit it. I did this and I will type fullName. Select this text and put your eye will put the placeholder as your a full name. In the value. The value will be not know the name, the name of this field. Look at this name is the name of the field. So this will be full name or just type full name. And I'll select this label now, feel the label. And for this field label is for whom? For what we have to do is I will just select this and the label now, the name which we have given his full name, right, so just copy this, select the label and I'll type, and I will paste this fullName OU. This way the system knows this field label is for the input text which is named as fullName. Select this div. Open this attribute panel, and margin bottom. That's all. Now, we will just put some declarations to this. So I'll select this text input inside appearance, I will just scroll over your four the borders. The borders are there and the radius, I will just remove the radius and I will put it to 0. This way, the ages of this particular text input will be sharp. And I will just add a bottom border with a stroke and a one pixel width to it, sorry, one pixel width to it, and the color will be dark. This way. This particular input field is ready. Now, I will just select this div and I label it. So right-click and label, label this as full name. Okay, So we will, when we will come back to redesign this particular area, we will know inside this div, the full name, label and the input field is there. Now, duplicate this. This area, we will call it as what we've born next phone number. Yeah. So we will type for number. Phone number. We will not use text input because phone number or always numbers we don't use like characters in that alphabetical characters inside. I will just delete this from your type number or your number. And we have number input field over you. I have created one number input by my own. That is number input without arrow. I will show you the difference between that. We'll take this number input first and I will drop this inside this second one. Just to change the label name. The table name will be number. This number input is there. Let us go to the previous section now you can see when you just hover over here, you can see two arrows are there, which are like increment and decrement. We don't want this arrows when we are entering the full number, right? So what I will do, I will go back to bootstrap studio. I will just delete this number input from you and this number input without arrow. This particular component is there. This component is not by default installed in the bootstrap studio. This component I have created this component. Just go to online and search input number input without arrow. You will get this. Select this number input without arrow and drop this into this phone number area. Now what will happen? Let us go to the preview. Now you can see there is no arrow over here. That is how we wanted it. So let's select this. And in the scroll up in the options, the placeholder is again full number. Just copy it and put the same name for the label. I will just rename this label as well. Okay, now select this phone number, come to Appearance. And now in this area, I will just select this lower border and make it solid and dark color. One pixel is good and the radius will be 0 pixels. That's it. Okay? Now, after this full number, what we want is email address, okay, so duplicate this. Now before that I will just rename the label as email and hit Enter. Let's change this from phone number to email. Now, email address has a different input field, so I'll delete this one more time. And here I will just type email and email input. Is there. What this email input does? It has a ready-made JavaScript written for it. Email address has a particular format, right? Format will be like first, your name will be there or whatever it is, the leg slit in this particular area, this example is there. Then we have at the rate, then we have domain name, that is gmail.com, hotmail.com, yahoo.com, Outlook.com, whatever it is. If some user just entered example and try to submit this form, It will see the email address is not corrected. If the user type example at the email and.com is not written, again, it will say this is not in the proper format. Hypothetical situation. If the user types example at the email com where he missed the dot. Again, this particular input field, input field will say email is not in a proper format. I will show you that as well. Continuing with this, select this particular email input field, go to the Options panel placeholder I will type e-mail. Enter your e-mail ID. The name I will give this name as email. I will copy this to the label. I will change the label name as email. We want the area where the user can type the message. Now in this particular place, the text area welcome. Duplicate this. And now I will type message. Select this email input and O, we have forgotten to give the border. Okay, so I will select this email input field. I will go to Appearance and radius will be 0 pixels. The color will be black and the lower border will be solid. Moving forward. So select this div will change the label first message. The label is message, and now we have to take text area over here, drop it inside this message. Do same thing we will do first, 0 pixels radius, bottom, solid with black color. Done with that. Now let us see the preview. We have the place to, now we have the place to enter the name it's showing it says that enter your full name and phone number and email address, then we have an area to message. Now, you can see this area, we can increase the size. This particular, this particular input field is called as text area. Now the most important thing, we need a button where the user can click a hand. He can submit the form. For that. Again, we will need this. We will need this deal where we will duplicate this div and we will just label it as button. And we don't want this label and anything inside this. We just simply need a button. I will just take a button and I will drop this inside this button, I will type send message. The theme which we are following is red and black. So what I will do, I will just go to options and the style will be dark itself. The border will be sharp. You can see the preview. Yes, the borders are sharp. One small change I will do. I will just increase the size of the button from default to large. Okay, So it will look pretty good. If you want. We can put ICANN also inside that soil just type icon. And it'll take this icon and directly put over here, I just double-click the bootstrap icon and send message dot coming. Maybe. No. Sorry. No, this one. We can use this one. So we will take this 1 first 1. Just put ones peace order. That's all. This particular button will be a Submit button. When the user will click on this button, this form will submit, the form will get submitted. Select this button. In the button option area, we have the button type. This button type, we will select the submit one. Whenever the user will click on Submit whatever the information is written in this form, that information will come to the email address. Now how to send this particular information to the email address. That is very easy and that we will see in the next video. See you in the next video, guys. 29. Smart Form of Project One: So we're going to send the information from this form to the email address. For that, what do we have to do is we have to select this form. Once I select this form, I will just click on Smart form button over here. Then I have to add the recipient. So we have this recipients over a year. This is my e-mail address, current degree at the Yahoo.com. And if you can ask me any questions by sending the mail on this e-mail address. Already, the email addresses are there, but if you want to add an e-mail address, how you can do that, It's very easy. Just click on Manage. Dialog box will come and click on Add recipient, enter e-mail address over here. Let's say I will just type example at the reheat mail.com. Sorry, I just wrote email address email.com example at mail.com and just click on Create. And what will happen? One verification e-mail will come there in that you have to enter some five or six digit number will be there. That number you have to put here. And then just click on Verify. That's all. After that. I will just delete this. After that, the e-mail recipients will come in this list. In this recipient choose recipient school also. Just select this. I'll just select my email address. That's all, nothing else to do. And then we have the option like Redirect URL once the form is submitted, where you want the user to be redirected. As of now, we have only one page, so we'll just click on index.html. That's all. Okay, Then we have some custom messaging option also that we have already seen. I think I think that we have already seen all these things in the previous videos. If I'm not wrong. Yes, But again, like send after, like, you can add the subject. Subject will be contact forms. Co-np is gone. From the user. Loading. Maybe we can type almost there. Then successful, then we can send the message. Then success message will be, I will get back to you shortly. Error message will keep it as it is. Whoops, then file too big. If the attachment is there, then we have to show this file too big then empty form. Like Please fill the whatever information is there. Yes, all these things then close button will be there. Close button we will we will leave this options as default totally. Okay, Now, then we have to validate the form as well, right? So this first field, it should be compensated, users should fill this form is the form will not get submitted. What will happen now? Just come to this. And if I click on Send, you can see the form is sent now, but there is no information and just click on I'm not a robot. It will check. Please fill the required field and try again. But this should not happen. You're only the input field should show like please enter something in this, right? So let's go back to the Bootstrap studio and just select this text input in options. In validation, we have to come in the validation and just click on this required button or you seem thing to full number, go to Validation, click on required button. Same thing. We'll email address, click on required button and message required button. Now what will happen if you go to the preview? If I click on Send, it will say, please fill out this film man. Please. I'll put my name. What is my name like? Let's type full name, then full number. Type this phone number and email address are now. Now I want to show you this email. Just type e-mail and I will put the message as message. I will try to send this. Now you can see, please include add the rate in the email address. Email. Come on, show. E-mail is missing an ad. The rate okay. Fine. At the rate that aren't just one more time, please enter the part. Follow at the red e-mail address is incorrect. Gmail.com. And now if I send this e-mail now you can see it shows like I am not a robot. And it's almost done. And boom, that's all we are done with that. We can create one more page where we will show congratulations, I got the message. I got your message or I got your email and we just get back to you shortly. We can create one more page and we can redirect the user over there. And we will put a button over there, like go back to the homepage. And if we click on that particular button, the redirection will be to this page on it. Okay, so we don't want to do all that things for this particular demonstration. So as of now, this area is done. Image and this image galleries working properly, no issues and all that things. We can also add a footer over here. Just come here and I will type FOBT and footer dark like it has too much of information. First off, basic is OK, good for us. I will just drop this footer basic in the body. This body. That's all. How many buttons we have, we have home. Then we have about and then we have contact. That's all rest. We don't want. So I will just select this one and this terms and terms and privacy policy and then remove this. We can link this obviously and company name at company name, Corporate 2021. So I'll just type your name. Copyright 2021. That's it. Now, let us see the preview. If I scroll, is everything is going good. Now what we want, our navbar is going away when we're scrolling down. We don't want that. So coming back to bootstrap studio, I will just select the navbar one more time, and I will just keep the position fixed to top. Fixed to top is a little bit weird that your name has gone inside the map, but let's keep it as TikTok done, no issues. Let's go back to the preview. Now you can see the navbar is stick to top. That's all. Let's do the last portion of this website where we can just click on this button and the page will scroll up to that particular area. And that particular thing we will be doing in the next video. See you in the next video. 30. Finalizing the website of Project One: Maybe this is the last video of this particular section. I don't know if something comes in my mind. I may create a few, few more videos in this section. Home button, we will select the home button and you can see this Home button is dark and about and Contact Us II is little bit on a light side. The reason behind that, and we'll just select this link that I will select the home button. I can see this link is selected, but I want this nav item to be selected. So I'll select this nav item and is active. It will just click on, let's click on this button that's on. Now everything is done. Okay. Let's start with this first container is this area. This is the, this one, this do, this do is first this deal. We have to give an ID for this particular duty. Just click over here and ID will be home. This is the home section. This is the home section. Then we have this container which contains About Us section. This section comes in the next container. Okay, fine. So what we will do, we will just add one dv over here in div. And this two containers will go inside this div, and this div will be called as about the attribute ID will be about enough. Then Gallery, this particular section is Gallery. And then they would just go to the attributes section and type your gallery. This section is contact section. Then I will just type cd contact. Yeah, basically we have for now. I don't think so. We need a gallery or you just remove this gallery. So now we have three like home about and contact. That's all. Coming back to the navbars. Select this home where the link is there. This link we have to select and this particular URL we will be typing. The ID, year ID starts with hash key. The hash key is already there and just simply type home. Make sure if you have, if you have given the ID home with a capital letter inside that, you have to use the same case over here. It is case sensitive. So home, after that it is about, so hash key is already there and they will just type about. Then I will select this contact and contact will be there. Same thing we will do with the footer as well. I will just select this home and I will type home over year. And about. I will type about contact. Contact. Let's see the preview now. We are in the preview. If I click on home, There we go. If I click on Contact, There we go. If I click on Home, we come back to the top. Okay. Fair enough. By this way, we have completed our one-page website design where anything you can use, you want to change anything in this particular thing. It is kind of resuming only, right? You have a home about and contact section and then you can just drop anyone can come. They can directly drop an email or they can just type. They can just fill this particular form and they can just mail you. And this form will be whatever the information the user type in this particular area, that information will come to the meal. Oh, we didn't give the placeholder to this particular text area. So just come here and I will type a place holder. Type your message exclamatory mark. That's all. Okay, So coming back to the preview to have type your message and that's it. I think it's all done, man. Yes, it's all done. 31. Opening Of Project 2: Hello and welcome. In this section. In this section we are going to design tech results. So this is the website which we are going to design. And in this website we are willing to see a lot of things like media query and X2 integrations like Zu who form integrations, live chat, help desk. A lot of things we are going to see in this particular section. This section is going to be a little bit longer compared to the last section. In that section, we just created a one-page website. In this section we will be creating a minimum of, let's say, four to five-page of design. This section will be a little bit longer without wasting much time. Let's start and learn how to design a multi-page website. So see you in the next video. 32. Home Page Section One 1 Of Project Two: Okay, So let's start. So as usual, we will just click on new design over here and we will name it as tech resolve. Bootstrap will be the latest one. We will select the blank template and hit on Create. That's it. Now before moving forward, we have to import all the resources which we have. Just go to your BSS course main folder in that BSS files, and then you will find hash 500s scroll result. Just double-click on that and you will see another four folders inside this. All the four folders are based on the pages like homepage business solution, our client, and contact us. What we will do here is like inside Bootstrap studio, we will just create one folder inside the image folder, and we will name it as home. After that, what else do we have whom then business solution, our client and contact. I will create one more folder called business solutions. So I'll just buy BS, that is business solution. Then our client, OCI, then contact. So we will name it as full as we will name full contact. Okay, based on this folder, we will just import it. I will just double-click on this home. I will select all this and I will drop it inside this home folder. I'll set 60 images are imported then business solution, I will just select everything. And business solution easier. Bs seven images are there, okay, all seven images are imported. Now after that we have our clients, that is OC. So I will just collapse this whom and bs. So OC is this one. And OC we have only one image. So I will just drop your OCI. Last folder is contact Contact folder. Again, one folder is there and I will just drop this contact folder. So I will just drop this image inside this contact folder. Okay, so resources are loaded inside this one, so we can close this. Now. Let's see what we are going to design year. So we are going to design this. We will be doing a clone of this not complete website, but few major portions of this website. Obviously the landing page we are going to design that landing page that you can see now this form is there. But as soon as it's moved to the small screen size, the form goes away. And the button comes over here and it says, Tell us about your business and when you click that, when model come and that form is inside that model. So pretty obvious as we have learned about this, we will be using media query for this. So in this particular section, the media query you will understand in a detailed version. Okay, Fair enough. Fair, fair enough. With the introduction, let's start now. First thing first as usual, we will be taking a navbar year. I will just type nav and I will take this navbar brand will be tech results. So I'll just type your TCH tech in our ESOL VE, sorry, VE deck resolve. And we have icon over there. So I'll just take an icon and I will drop the icon over here. So let's see in bootstrap icon, do we have anything for technology or not? It is a battery but it's not a technology. Batteries technology? No, not at all. Okay. So let's search something different. What do we can do is 3D ADHD VR video. We are, oh my God. Anything related to technology, what we can do? We cannot use bug. Calendar is there video is. Let's search for computer. Do we have computer or not? Compass we have. Let's for, just for this demo, just for this video, I can take this compossible year. I don't think so. It doesn't look good. We'll take something else. Let's take this collection when maybe it will look good. Yeah, it's looked good enough. Okay. Peck result is the website which we are going to design now. And this nav items we have on this side, we wanted to take it to the other side, so alignment will be end and the navbar, we will turn off the fluid option. Okay, fair enough. Let's go back and see now what we have here is the transparency of the navbar. Is there, there is some transparencies there which the background area is visible. So we will do that. Let's jump into Bootstrap studio back again. And so navbar, I will select the navbar. I will come to background image and this yellow-colored we can use it. Okay. This one or this one both the same motion. This is BS yellow and this is BS warning. Okay, so we will use this yellow color. I'll click on this image picker, go to Select, and I will just reduce the transparency to maybe 80%. As of now, you can't see anything because we don't have anything. But very soon we can see that. Okay, So next is we have to create this particular area. So for that what we will do, so we will take a div. I'll take this div is there now. And inside this div we will take one container. And inside this container, one row we will take, and inside this we will take two columns. This one column and control D is duplicate that. We will have two columns over here. This div is there now. And for this div, we will be giving the same background color that is yellow. And I will click on Select. Okay, fair enough. So now in this particular area of what we are, what we want here is go from traditional to digital, and we'll just copy this. You can also copy the domain name is peck result dot in. Here. I will take a heading. Just drop this heading over here and paste. So remember the shortcut Control Shift V to paste it here still we have this issue. Go, go from traditional to digital. And yes, the font is different. For, for now, we will be going with the same font. If you want, you can change it. I think you know now how to change the font. If not, go back to the previous videos and see how exactly to change the font. Okay, fair enough. After that, what do we have that we have a paragraph which says every business needs a digital presence, so we are here to make it possible. Let's take a paragraph and rub this paragraph right below this one and paste it. Fair enough, after that we have image image tag. Right below this one, we will just put an image tag and double-click home. This image we want, I will just select. Yes, that's it. The image is there now. Now we have some bottom space over year and the navbar also have some shadow. We will do that one. And before that we will just take a preview and I will tell you why exactly we are using the shadow over here. We have a reason over there and two reasons actually. You can see now as we have the transparency 80% for the navbar, that's why the color is light and the same color we have used here, and it looks very dark. This one looks like this one looks ducts. In fact, both colors are same, only the differences. This is 80% transparency, that is 0% transparency. Now we don't want to show this differentiation and we want to make a trick over here. That is the reason we will be adding a shadow to this navbar. So I'll select this navbar. I will go to Options, decoration, shadow, Regular. Now I will come back to the preview. Now you can see there is a shadow. You can see the shadow is more larger compared to this one. What we have done over there is we have used the large shadow over there. Now you can see we have a large shadow and then we have used some margin top to this one. So margin top five. Fair enough. And for this one we have given margin bottom five. That's it. Now you can see we have extra space here and here as well. Then if you want to see in mobile view, then we can just come down over here and then you can see there is horizontal scroll. And now you know how to fix that, not by media query. We just need to click on response. You. That's it. It's done. We will be fixing this as well. So nobody's coming back to the bigger screen size, that is LG. I think your Excel extra large. In this area we will be creating the form. Should I stop the video over here or should I continue this? Okay, let's continue this. We will complete this section and then we will stop the video. On the other side, what do we need 0s, we need a form. Let's take a farm. Yeah, Before form, we have some texts like contact now and get best deal of the day. Okay, so copy this one. Take heading, the heading over here. Paste, and this heading will be H4. For this heading also, we will take margin top five. Okay, fair enough. And then we will take form. We perform. Then we will take a div. And inside this div, what we have, we have fullName, business name, field label is not there. We are taken directly text inputs. Text input. We have your and we will put this here in this text input. What we are, what is this actually, this is a business name or full name. Your full name. This is fullName. Then placeholder again, this will be full name only. State is disabled or read-only. Everything should be that and validation we need it, so make it required. And what else do we want? This edges should be sharp, sharp borders. I will just label this one as full name. Then we need a margin, top one and margin bottom one. Let's see. One, One is enough or not. I think margin bottom should be 32 is fine. Doc in margin bottom two is good for this one also margin bottom two is good. This one is business name, business name, copy, paste, business name again, it is required. Then after that, what do we need like business type example, hotel school. Okay. Duplicate, business type, copy. And in the placeholder, we will give example Hotel. Cool. Then what we have, we have a select over here which says, yes, my business has GST. I am that is GST number and know my business don't have a GSD IN. Select we need so I will just duplicate this one. And inside this I will delete this and I will type select. Just take the select over here. We have to rename this as well. So this is business name. This one is business type. This one is GSP ion. We don't need group. We need only 2. First 1 is yes, my business has GSD IN and I think we will be small. And the second one will be my business. Don't have GSD IN the yes one will be selected. Then what we want is the email address, contact, and in which product you are interested in. Okay, fine. I'll just duplicate this one year. Now we will be doing this. I need this option group first, and I'll take this one at top. The Option Group, I will name it as static website. This will be one-page website. This will be like five-page basic website. What is the idea of this 13 loci? So this will be value will be 14 and label will be multi. Website, WEB site, the website in brackets, it will be more than five-page. Okay, So this comes under static and now we will create one more. This will be Option Group and the label will be dynamic. Website. We'll add this one. So this one will be 15. Label will be e-commerce website. It will be option only. The label will be LMS or Learning Management System. This will be 16 and you can create many more. So for now I will just stop here. If we go to the preview now you can see we have two groups. So this is static group and this dynamic one. In static, we have one-page website, five-page basic website, and multi-page website, which is more than five pages in dynamic. We have e-commerce web, certain elements, it is learning management system. You can put anything over here based on your requirement. You can put anything after that. What we have is like e-mail address we want and contact number we want and then we want a message, an e-mail address. So I will take this business input, I will duplicate this. And what I will do, I'll take this business and potent just drop below this to GSD and we'll just label this and name it as interest. This business type will be contact number. This labeling is not just for our understanding when we will export this complete project. That time also this labeling will be very important because there is option in label. This will help us when we export the projector. When we export the project, there is an option called labeled convert two commands. When we, when we will see the core after export, these labels will be converted as a comment on that particular area. That will help us to understand what exactly it is. It is a developer course use and at the end of the day it is like on us like how we want to take it. After GSD, what we have, Let's see. Not after GST email address and contact, we need that. Okay. This particular area will be e-mail. E-mail. So I will take this. This is contact number. We have given the label contact number. Just take number input without arrow. Just drop this number input and I'll select this, delete this. This is a number input as a new input fields. So we have to make the borders, age border, that is rectangular borders. Place holder will be phone number. Here, it will be just number. Next thing is e-mail. Duplicate this one. Label it as control and just type email. Email input. Whoops. This email input or delete this decoration rectangle. Lease holder will be email. Same thing for name. After this one we need in this text area. And we want this rectangular also, this one, and this one. Okay? So after this interest, we don't need this select year. We need a text area. This area again, rectangle. Placeholder will be what I have written over there is your message. If any message, if the message m will be small enough. Let's see the validation now required, required, required. Required. Then this one tone on this required e-mail address stored on the required. Then this one tone on the required, and this one will be optional like we have written that if any, this one will remain as optional case. And last we need a button to submit that. So BTN button, so your label it as message. This will be like button, BUT DON button. This button. Let's take it As. Button type will be submit. This will be dark. Now, I have got few questions from the students who are already enrolled to the previous version of the bootstrap Studio, they have told that the options of button has changed, that the Block option is not there. It is true that in new bootstrap, that is Bootstrap F5. Now the button don't have the Block option. What do we need to do is we just need to go to appearance. In width. We have to type a 100%. Now it will work as a block, but Unfortunately this block option is not, you're not. Okay. Then we have Declaration and then rectangular decoration. And we will type your submit, your message or what we have written over there like send message. Lynn. Send send message. The border is there slight border, white border. I will be given to that particular area. Let's see the preview now how exactly it looks. Okay, this looks pretty good. So this form is small in width, and this form is very big in the width area. So we will come back over here. So let's see, this is our main row. This row is of form. Just label it as form and invert what I will do till MD. I will give it a width of four. This area, I will keep it in auto, or maybe eight. So eight plus four is 12. So this area is now done. So what most weekend do is display. We can increase the size of this display a bit. Maybe a four will be a good one. And for this paragraph we will turn on the lead option. What we can do for this image is like, okay, we'll keep it as it is. We won't do anything. But what we can do is we can take this do, we can take this image, sorry, we can take this image inside a div, like this inside a div and this div, we will make it alignment center. What will happen for this particular image? It will come in the center of that particular row, but the alignment with this text won't be there. That's why it will look odd. Okay, So for that we will just remove it back again outside the div and we will delete this div. We don't need that. Yes. Okay. So this is done? Yes, this particular area is done then you know how to make the form like a smart form. Let's see. This screen size is fine. Md again, I think we should change the width to algae, so algae will be four and this one will be eight. Let's take this complete 12. And so although we will removing this form from year because we don't want this, we will be adding a media query over here in this area. So this particular section is now different. Fire, fair enough. So let's turn on the form, too. Smart form. So just turn this on, select the recipient custom message. If you want some custom message, you can turn on this as well. After this, where you want to take this particular website, we will be creating one new page called after form. Submit. I'm just creating this page right now. We won't do anything in this just to keep that in mind that we have to do that, we have to create this page also. So that is the reason I'm creating this. I'm creating this page here. Later. We will design that. Now this page after submission, the page will be redirecting to after form submission dot HTML. We will start this video over here. And in the next video we will play with the media query. Flexbox and media query is always a pain, but now it won't be. So see you in the next video, guys. 33. Finalizing Home Page Opening Section 1 Of Project Two: Okay, welcome back. In this video. And in this video, as I told you, we will be going to understand about media query and flexbox without wasting time. Let's start this particular form we want. We don't want in the small screen size, we will be taking this form in the model. Up to LG. This is good enough. And when it's come to MD, that is medium device, the forms goes down and this particular area remains here. But we want that from MD. When it isn't this particular screen size that isn't laptop and above, this will be looking good. This alignment, that left alignment is there. Okay, fair enough. But when it is in MD and below, the should come in a center alignment. So for that, what do we have to do? That I will tell you that this particular thing we will be doing without media query, we will be using completely Flexbox options inside this bot to hide this form and to make it make the button visible over here. For this, we will be using media query. First, we will be doing flexbox, then we will move to media query from this device it is LGN above. I've weren't this particular options over here. What I will do, I will select this column and I will come to Flexbox option. Okay, So this is the flexbox option. If you don't see all these things, you just need to click on this arrow over here. In Flexbox option you have this buttons as we already learned the basics of Flexbox. So now what we will do, we have selected this particular device size, that is LG. And in this device size, what we want is we want the alignment to be left with just click on left. Don't, don't worry, all these things are going to happen. This will, this things will get messed up. But just click on left. And now in directions, just click over here and click on column. Now this particular column is left aligned from LG and above screen sizes. So you can see this is properly aligned. But what happens see as soon as we converted the direction to column, the alignment has came to default. Now, again, we have to click on this column and what will happen? See now the image is expanded. Now you are, you're also, you can see the image has the size of the image has increased. Now, just click on this leftover and done. Everything is reset now, the left alignment is there. And in the above screen size also the alignment will remain left. Now, what we want is like from this extra small screen size still MD obviously not, we cannot do anything to this LG. Now we want to do till MD now, we will be selecting this express screen size, extra small screen size. And here what I will do, I will click on center. That is the central element and the direction will remain to call them only can see the image is not centered, align. This essence screen size. Now you can see there's a central line in MD. Now it is center aligned and as soon as it goes to LG nowadays, left align. This is how we are going to keep this particular design. Now, how exactly it works is like a seventh above pill MD, there is no command, but from LG, the new command is there. From excess, that is extra small till MD. It will take the central element and from LG and above it will take the left alignment. Okay, So that is how the flexbox is going to walk over here. That's all. Flexbox for this particular area is done. Now we will be playing with the media query. Okay, so now we will be moving towards the media query. So coming back to the Bootstrap Studio now, what we want, what we want here is after this MD screen size, we don't want this form or you want the form to become inside a model. And the model Launch button will be here, right below this image. So we will take the button first. I will take the button. And I will name this button as what is the name of the button over there? In small-scale, talk about your business. So they tell us our your business. Tell us about your business. This button will be their rectangle. Small white border. Style will be dark. Yeah, that's it for now and maybe the size will be large. We will make the sizes large size. Here also it is large size. And you're also it will be a large size only. Going back to bootstrap studio. Now. Now what we will do, we will first create a model. Then we will be using the media query to hide all this. I will take a model over your model, and I will take this model, drop it inside this body model tag is model dash one. Just click on Show OU. So the model will come just remove this one and the form which is there, I will just duplicate this form. And I'll put this duplicate form inside this model body. Now this is there and this modal footer, I will delete this header. I don't think so. We need this header or we will just type. Tell us about your business. The cross button is there. Where the model should come. The model should come. Default size full-screen. Okay, no full-screen is required. Vertical scroll, we will turn on scrollable. I don't think so. There is not much of information to make it scrollable. Yeah, we will keep this form as it is now. Let's take the form is smartphone or not. Yeah, this is a smart form. Now I will just click on hide this model. Now, we want to trigger this particular button to that models or target will be changed. So we will play with this target now. Selector is now model. Type II is model so toggled target. Done. That's all. So coming back to this area, and I'll click on this button. Now the model is coming in this version. So bringing out the model is very easy by using that target options in the options spandrels. Yes, It's done now, this button we'd want only in this particular area when the screen size is MD and below. And when the screen size will be MDM below, this particular area won't be there. So the button should not look like it is touching the bottom side of this particular column. We will give a margin bottom to the button as well. So margin bottom three will be fine for now. If we need, we can make it more also. Model is done now. Now let's play with the media query. Styles, new style CSS file. And custom CSS will be there. Double-click on this custom CSS. Just click Create and I will be typing your dot desktop view. It will display one more dot mobile view. Display, none. In desktop view. I want this, but in mobile view I don't want. So what I will do, I will take this desktop view display none option is desktop view display none. So we'll take this class over here. And now it has gone. I will just select this media, this MD over here, coming to these three dots and add media query minimum width 765. If I go above, you can see we don't have that. The reason behind that is minimum width 7068. Use this display from this and above this CSS will be applied. Minimum width is this. So we will just make it as maximum. This and maximum screen size. We want this. That's how we will be doing this. For this particular button. Take the mobile view one, copy, paste it over here, and simply turn on this media query. Now what we will do now this is 7068. We will make it 7671 pixel shot. We want in this screen size, right? So this is 992991992. Okay? Yes. Now it is working fine. This screen size, we have this as soon as we go to the mobile screen size, then this model will be there. This we have fair enough. Media query and flexbox is done for this particular area, and this particular area is completely ready. Now, just save the file. I will be saving this file. In result, I will just create one folder over here. So it will be under scroll VSS. And save. This file is saved now, So yes, that's all, that's all for this video. In the next video, what we will do, we will start creating this particular area. And this is very easy. We just want to take a container row, column heading and few options over here. Then we have this image already there. This is a GIF image. And then we will create Show More Details. Button over here, which will be redirecting to the other page. Same thing will happen for this one and this one as well. I think in next video we will be covering all the bill of sections in one video only. Fair enough. So see you in the next video, guys. Bye-bye. 34. Completion Of Home Page Of Project Two: Okay, so we will start the next section, which is this particular area. So jumping back to bootstrap studio and in this particular screen size, what we are going to do E is simply we will be taking one container and drop it on this body tag. Select this container. We have the container over here now, just take one row, select the row institutions we have column, and again one more column. So I think we will be giving 646 for this till Monday. It will be like this, and after that it will come right below each other. Let's start doing that. First thing we need a heading. Heading I will take, I also get confused in between heading and header. Now sometimes when we don't pay attention on this, reading is here, so we'll just take the heading over here. The heading is this. All your business need under one roof. At up to add, I will take paste it over $1.9, 9029. What can we do after this? We have this paragraph and then we have this paragraphs as well. Decolonial don't want key technology. Inside this column only. This will be result gives. Let us make it IID. What tech result? Static website. Let's do one thing. I will just copy all these things and I will just make this video Fast-forward from static and all the below B12 icon over there, that tick icon. I will take an icon over here. This icon will check in this 1 first because this one is a new icon sets, right? Check is there. So check two we will be using, we can use this one also. This again, I will do it in fast forward. We will, I don't want to waste your time in this set. So we have taken a different, different icon compared to this one. And we have one button over year, so we will take one button also their button btn. What you see is like seeing more details. We will see more details. Select the button and rectangular style will be warning. Let's solve. This button will be not a button, it will be a link. Just put a hash key or later we will change the link of that. After that, what we need, we need this image, that GIF image. I will take image tag, I will drop in whom this image we want to use. So we'll pick this image directly. Click on responsive. I want this to come in the horizontal and vertical center. So going to this very smallest screen size, it is accessed. And I will go to Flexbox, check both these options and column this V from this, I'm doing this on the screen size because from this and above it will effect, right? So it is affecting all the screen size. What happened? Oh sorry, sorry, sorry. I apply, I was applying on this image. I wrong. I cannot apply on this image I want to upload this column, will select this one and the smallest screen size actually. And both of these options, like this is a vertical center. This is the horizontal center and this is the vertical center. Now I can see as it isn't the Sentinel. Yes. There we go. Now what we can do is we have two different colors over here. Select this container. I think I use. So, so many times someone told me to moderate the use of salt because I'm using so, so many times and sometimes it's annoying. I think someone told me in this course only, I will try to do that. I think that is my habit, No, No problem. I guess I use em margin top five. Let's see. Yeah, It's done. For the next section for this particular area, what we will do, we will just duplicate this area and we'll flip both of them. What I will do, I will just duplicate this. And coming inside this row, I will just take this column and I will just keep it above that column. That's it. Nothing else to do. Then what we want is this one, copy, select, Paste. And now this time it will be 29 $9. E-commerce website. We want to do so many things in that dynamic. The same thing. Now this is a dynamic website. Notice static one side with admin panel. Then for the rest of the things it's saying, I think, yeah, let's stop the things that seem coming down to the next section. Again, duplicate this container, come back to this row and just flip the sides. This is keyed EMS rupees 20. Just change this one also. So all things are inside one. Yeah. 29, $9 actually, what is the cost of 20 rupees in dollars? Usd. Inr, is 20 rupees in $0.27, okay? It will be like 0.27 student per month. It will be including GSD. Again, I used the school or school per year. And now we have to copy this option. Again, what I will do, I will just make it fast forward. I don't want to waste your time. Once the copy is done, we will start. This area is also done and we will be moving to the next section that we know what you need for your business. We will give you a complete business solution with world trusted witness solution partners. Who for that, what we want to do eq div, because this image is complete, age to age div is what we will be using for that div. We will take margin top five. Inside this div, we will take heading. After heading, we will take a paragraph. This will be center aligned heading which we are going to use is this one. So copy this and inside this heading, paste this one paragraph, we will be using this one copy. And in Bootstrap studio, paste this over here. After that we have one image, then this image, drop it inside this div. Double-click home. I think this is the image, right? Yeah, This one is the image and click on. Okay. Let us see the preview. That's looking good enough. But I think, yes, we have given a background color to it. What we want to do. I think we have to take one more deep inside that. And before that we want to make it responsive image. We will take a div inside that div, and we'll shift that image inside that div. Going back to appearance, background color, and we will give a dark background color to it. This one is point. Maybe this image is there. We have given a nice dark background and let's give a margin. Top, a bit like margin top two will be fine. I think. Maybe three. Margin, top three is good enough. After that, we have this area. Which we can again copy this container, bring this below that view or like let's take that, do about that. Now inside this column, this heading, we want one paragraph, we want that's all one heading, one paragraph reinvest everything we will remove, including this button. I will just $0. Central line, GSP registered business ear. I don't want this to be a normal paragraph. Now for this column I want vertical and center. Vertical and horizontal center. So coming to flexbox both, oh sorry, I will just reset this once I will come to the lowest screen size. This one, this one and column, That's all. Now that is incentive, absolutely center and this options are there. We have to put that option. So I think we made a mistake by deleting that options. Just come here. Select all this. If we need that button yet, including that button, I will copy or you can take it like this, copy inside this column. Now, right-click, paste, paste inside. That is done. Refresh this one. Not refreshed. Reset. Back to this. We don't want this one. This one also. Contact management. Again, what I will do, we'll just fast-forward this. That's all. Let's see the preview now. Looking good, absolutely fine and fantastic. And now we want this particular area over here. It's very easy. What we can do, I think you already guessed it. We will take a div. And inside that div, I will take one image, ad image, image. This image I will just add over their position will be centered, size will be covered, and repeat will be no. That's all. Then we will take a heading. I think it's a heading, heading and one button. One heading. One button. Center line for heading, margin top five. Let's do one thing. Just select this div. Padding, padding, top, padding, bottom five. That's all. Margin top. That will be a good number. Margin top four. Yes. Good. What is written inside that? Let's grow your business together. This contact us. Contact us. This change to warming, decoration, rectangle. That's all guys enough that we have footer, footer, we will just simply put one basic footer. Footer I will take I will drop on this body, will take this dark footer or maybe this basic food. Now the dark foot results are good to go because we won't do any changes in that we will make it will keep it as it is. So dark footer will be there. And this div I think I don't want I want some weren't some space in between these areas. I will select this div, will give a margin bottom four as well. That's it. This particular area you guys are now, you guys can now do this service about company name, all the things you can change and you can do it. What do you want to do? By this way, I think we have done with our website first page. In the coming videos, we will be doing the next few pages of the website. Let's see what we can do. I think the rest of the page will remain same. But again, this business solution, we have to use this animation GIF. It's very easy. And same thing we are going to repeat year also. Then what we are going to do, like we have clients then yes, the animation, we will be using animation, you know already this then contact us. Contact us, we'll be there. Yes. Now the help desk will be the new one which we are going to do then live chat integrations will be there, which we are going to see. That's, that's all for this video. And in the next video we'll see something new. I don't know what, but yes, we will be going to see something new in the next video. See you in the next video, guys. 35. Design Business Solution And Contact Us Page 1 Of Project Two: So welcome back guys. In this video, we will be designing business solution page. Let's start. Let's create a new page over here. We will call it as business solution. Okay, business solution. And I will just double-click on that. Let's start by taking our div over here. I will take a div, so we will have a free hand over that. And we'll take the image and just drop that image inside this double-click, go to VS, that is business solution and discover images there we will be using this cover image and select, Okay, Just turn on the responsiveness of this particular image. Select this div and make this center align. So let us see the preview. So we have this image or what do we have over here? We will not do this because this particular component is in jumbotron. And in Bootstrap F5, the Jumbotron is eliminated. Now, Jumbotron is no more there in Bootstrap. So we will change the design a bit. This way. What will happen? You can see the image is year, whatever the image is there, this is completely pixelized. You can see the edges are not soft of the images, but the ADSR everything are soft and sweet. Okay, Fair enough. So moving forward, so what we will do now the image is in central line. Let's add some padding to it. Maybe I will put a complete padding of two. Then after that, what do we have? We have some components. I know very well now you can do this particular design. It's very easy for you now. Still I will do some portion of that. So we'll take a container, just drop it inside the body tag. This container is there. Then row I will take, select the row, take the column and duplicate it, go to Options. It still MD, make it six, then add the smallest screen size. Same thing will happen to this one also the second column. There we go. After that. In this particular column we will take one image. So image I will just put the first image will be the first images. We know what you need for your business. So this image is their office walk. And make this responsive. That Sol, and in this first thing we'll be adding, then we have some photographs that we have some a paragraph. And this paragraph will be and as usual, I will fast-forward this video. Then the icon is there. Again. We'll take this icon, double-click this one. And what was the name of that icon? This one. Change something for the Business Solution page. Duplicate this drag and drop inside this tag. See if you are not able to do it from here directly. Now, let's say I duplicate this and I just took it over here and I placed it over here. This thing, if you are not able to do, what you can do here is just duplicate this icon here, no issues. It is I coordinate, drop it inside this paragraph tag. That's all. Then now you can move it from this year to year. Then you have to put a space over there, the keyboard shortcut for duplicate Control D. To duplicate Control D is the keyboard shortcut for duplicate, and otherwise you can duplicate it from here. I just wanted to obliterate this icon. There we go. So this particular area is done. Same thing what we will do. We will just take this container, complete container. And before that we will add some margin bottom four to this. Duplicate this. In the duplication will just shuffle this row, column. I will change the image. What is the next image? Registration? What I will do, I will not change all this information now. I will just keep it as it is because you guys know what to do. What you can do from your side is like just visit tech result dot n, then go to business solutions. Then you can just copy and paste all the information from you. Yes, fair enough. Now, this one, we will shuffle it again. This way we will be doing all these things. So this image, I will take this one goes or something like that. And at the end we will add a footer over here, that footer, and we will do at the end footer at navbar, we will do at the end. After that. What we have over here is the next page. We, what do we want to design? A is Contact Us page. Create a new page now. And let's name it as contact. Let's go inside that contact page. Again, we will take an image inside that div. Just double-click on stack image. I think only one image is there. Yes, one image and click on, Okay, Just to make it responsive. Then as usual, we will take one container. That's how it works. There is a so once you get to know about what to do and what not to do, the things get repeated again and again. Only a few new things are there which comes in between. Everything is CMC like I took the container and took the row. Now, I want three different sections, so I will take three columns over here. In the first column, let us see what is there. In the first column we have contact us, feel free to contact us, click or touch to the number and all these things, then working hours and drop a message the same form which is there in the homepage. Only one new thing is that we have a button over here. Actually, this is not a new thing. Once you click on this button, you will be redirected. It was so who helped us? And that we will be going to see in this particular section only. Let's create this contact us we will be creating now. I'll take a heading. Just base this heading over there. And paragraph heading, I will just make it three something H3O paragraph will be this one. Whoops, feel free to contact us. Then your triple-click and select the entire line. This thing happens like 34 lines comes extra. This is the number. Again, what you can do is you can take a link. This thing we did in our previous project, that is one-page website project. Let's take heading inserts this link, I just drop all you. Remove this link. I will select this link, come to attribute panel. And we'll do a class of text decoration, none and fixed dark. This thing we have given to that link. Now we will just type a number less than nine, what the country code. Then we'll enter a number. Just reduce this size. Will put icon inside this link only. Come inside the heading. Up calendars that is full. I think. We select this link and I will type colon. Colon, will type the, um, but you know how exactly it works, right? Then we will take a button, will drop this button, insert this column, launch it. Again. We'll take our icon. Drop it inside this button. One space. This icon will be support. Let's state this font awesome for support. I correct luckier. Change the color to morning. And that's all what we have written over here is hit desk. As we don't have the block optional year, who will go to Appearance? We'll make it a percentage. Also. Go to decorations and options, decorations and rectangle. This is a link, actually will convert this to link. And right for now we will just put a hash key over here. So when we do our most pointer, it will come like this. Okay, fair enough. Coming back to bootstrap studio, Let's give it a margin, top five to this. So we'll have an extra space and contact us. I will turn to H12. Yes, there we go. Now we have this section. Moving forward to the next section, we will be creating this working ours. And as you already guessed it, this is also very simple. I will just duplicate this both one and drop it over here. And we'll type working hours. That's it. Working hours. Then Monday, Tuesday, Wednesday we want this particular way. We have two options. We can again take a row and make it row column structure. Or we can take a table over here. Just drop a table over here. Just delete this things heading. Then I will start typing the days. Let's take the timing. I will just copy this timing from and start pasting. This will be nothing. Saturday timing is quite different. Don't work on Saturdays. This one will be changing the text color to this holiday. In this section is done. And now for this section we want that form again. So I'll just go to index. I will select this some area. I will take this form, copy, copy, and contact us. Select right-click. Inside. This has done. And all the information like smart form and all that things is already there. That's all I think. So It is done. We want to make it mobile response you actually go to the width is the columns, one column, two column, and the third car. What is the screen say this is LG. Lg it will be for, for, for, for all for all in MD. Don't think so. It looks good. From MD and all it will be completed to well grids. And let's give the margin bottom to all the columns. Select both the columns and then we'll just type margin bottom four. We have a space in-between all the columns over there. That's all. We are ready with this one also contact us page is also done. Apart from that, what we have, contact home. Our client. See we can do that very simple. Also. In the next video, what we will do, we will see regarding the OSI. In the next video, we will design OC. Oc is our client speech. Okay guys, Thank you for watching this video and see you in the next video. 36. Designing OC Of Project Two: Welcome back guys. In this video, we will design our OCI page, that is our customer pitch. Let's create a new page over here and we will name it as OC. Will go to that page here. What I will do first, I will take a div. And inside this div, or maybe before that I will select this div first and I will give a fixed height of 300 pixels to it. This is a fixed height of 300 pixels to that div. And now I will scroll down to background. And in that I will just click on Add Image. In the first, the first option that is URL, I will click on this Add icon over here, I will go to the OC folder. I will select this image and I will click on. Okay. So as soon as I click on, Okay, As we have a height to the div, that image is now inside the div. Now we will do some changes in the position size and Repeat section. So position we will keep it as center size, we will keep it as cover. Repeat. We will keep it as no repeat because we don't want that image will get repeated if the screen size is changing and the edge of the image is there. And after that, that age, the image will repeat himself back again. If I see in the different screen sizes, it looks pretty good. It automatically adjust that. The do automatically adjust the image inside that and it gives the proper output. Okay, so this one is done. And the same thing we can do to the Business Solution page as well, which we have did over here. So what I can do is instead of putting the image inside this div, I will just remove this div from here. I will select this div and I will give a fixed height to that div stating like 300 pixels. Scrolling down and we'll click on Add Image. Click on this plus sign. And I will go to this BSS, sorry, BS folder, and this is our cover GIF, I will select that and then click on, Okay. Then what I can do is I will just select the position to center then size to cover. And no repeated. The repetition will be no repeat. And select this div. I will come to the attributes panel and I will just put margin bottom three, and that's it. Maybe margin bottom four is good. That's it. It is a different v of keeping our elements inside a do. And if we see our preview, if I see our preview, I will just take this year. It looks like this. Now if you want to increase the height of this particular area, we can do that as well. I will just minimize that and that's all. So I will come back to our OCI folder over here. And now we will start the rest of the portion, which is, I think it is very simple, but we'll take it very quickly. So we'll take one container, select the container and attribute that will be margin of four will be good. And then I will just take a heading. I will put the heading over here. I will just type happy customer or maybe customers. And then I will take one row over here inside this a container. Again, your margin, top margin of four to that container. Now inside this container, I will take one column. As usual. Inside this column, I will take one card. The card is there, and I don't need this other text over here subtitle. Maybe I can use that subtitle. And now if I go to image, I will take this image and I will put right exactly above the card body. It will come here. You're what we can put is like client or company name and the business. Okay, fair enough. As of now, I will take one random image over here. Maybe this one is okay. As of now, this will be a logo of the company. Then I will just simply duplicate it a couple of times. Maybe four is good. Let's see the preview. Okay, this is good enough. And then four is good. It means we have to take it in a way where four grid for each column. So I'm selecting all the four columns at once. I will, what I will, what I have done is I will select the first and take my most point of the last one, hold the shift key in the keyboard and click on that. So all fours are selected then in the width. So this what screen size it is, it is LG for LGA will give it as four or sorry, not, not full as three. Then for MD I will give it as six, like absolutely comes to MD. It will be two-by-two matrix. And in the lower screen size it will be complete tool. Now this particular calculation has been applied to all the four columns. And it is looking pretty nice. And same way by selecting all the four columns at the same time. And I will open all the columns here one-by-one. I will select card. So I'll just hold the Control key on my keyboard and one-by-one, I will select all the cards. And then I will, in the Options panel, I will search for decoration. Here is a declaration. The shadows, I will put a small shadow over there. So let's see the preview. And you can see the small shadow is there. Maybe it is not looking that beautiful. So let's take a regular shadow. Now it is like yeah, Now the shadow is properly applied over here. And now going into animations panel and on the hover effect, Let's create what you felt we can give. This one is good. Yes, it is good enough. So how exactly it will look like whenever a mouse pointer will come on top of that, it will hover like this. Fair enough? And let's say if you want, like if not exactly, you're like anyone wants to, anyone who wants a feature like this is a company, right? So they need a link over here on, in such a way like any customer. If they click on that link, they will be redirected to that company's website. Okay, so how would we can do that? So in this column, we'll take a link. Just drop this link inside that column, and this link is the right. So I'll take this card and I will put this card inside this link. I will just remove this link texts from year. And now what happened over here is like now the text is in blue color and the subtitle is they have underlying and all. What I have to do your ys, I will just come, you select the link in the class. I will type text decoration none and text dark. That's all back to the default section now. So that is how you have to do to all the other scarred, all the other card as well. You can delete this card and you can delete this column. And you can duplicate it one more time so that the link is there inside all the columns. And now if you go to the option panel and you're in the URL, you can type the URL. So I will type HTTP colon slash slash keyed classroom.com. I will give it a blank target, so it will open in a new tab or a new window. So the pages is refresh. So this is where the link is there. Once you hover over a year, you can see here, where is my mouse pointer? You can see that link is displayed over there. And if I click on that link, it will take me to get classroom website. I'm just closing it now. That's all. Happy. Customer page or our client pj is done. In the next video, what we will do, we will go back to our Contact Us page and we will start creating maybe this one launch a ticket, will see you in the next video, guys. 37. Finalizing Multi Page Website Of Project Two: In this video, we are going to connect this particular section launcher ticket. So for that we have, we will be using a third-party application called Fresh desk. I will just type Fresh desk over here. This is the URL of Fresh desk. There are other applications like Zoho desk, Zendesk. You can use any one which you'd like. For me, Fresh desk is good enough. And this is not a promotion of prejudice. This is what I personally like. Okay, So let's create an account over here. Free trials sign in. First, I will show you the pricing. You will get to know why exactly unlike that, for a small organization, it is free, completely free for unlimited agents. If you're a small organization, then Fresh desk is very good for starting up the thing. We will be using two things in the two things. One is Fresh desk at one is fresh chat or they have renamed it, maybe something. Let's see. We will start with Fresh desk first or just create a free trial account. Over here. It is telling me sign up with email. So definitely I will be clicking on sign up with email. I will enter my name, not this email address, my Yahoo email address. I will put your company name. Let's put it as cloud school. This is our next to next project or the next project, whatever it is, we are designing one LMS system. So cloud school is there and we will be using the same thing for number. Maybe I can use this full number. Let's see if it is not already used. And the data location is India. I think it works. So thank you for choosing Fresh desk. The Fresh desk account is ready and get started. I think I have to confirm my email. Just refresh this page over you. Activate account, activity account, and that's it. I think it's done now. So press are some shortcuts are coming in front of me. Yeah, now we have to give the URL of our help desk channel. So fresh does sort of Cloud. Cool. I think only cloud school is not available. Yes, this address is unavailable. Cloud school will put support or maybe help is only find help. This is cloud school dash help. Cloud school dash help. Dot fresh does.com will be the URL. We'll click on Next. Don't don't just resolve. Surprise. Something is coming. So we'll wait for that. Now. Next, invite the team. So now you can start inviting the team by putting the email address as often, but we don't have an team, so we will continue with that only. I will do it later. And support. We need an email address of google or Outlook or other where the conversation will happen through that or else the conversation will happen. Using this similar to that is support at the red cloud school, dash H dot Fresh desk.com. So for me it is okay as a demo. So congratulations, you're Fresh. Desk is ready and let's start using fresh does so by default, this three tickets are there. It is a dummy ticket. You can know that it is a dummy, one, dummy etiquette. And let's click on this View ticket over here. You can see the ticket how exactly it is there it is taking a tool for me now, a step-by-step tool or five steps. So you can read everything as I know all these things already. For me, it's not that necessary. Once you start digging into this. And once we go to this, once we come to the section where I will be teaching in details about the Fresh desk and all in the same course. That time I will explain you all the details over here. And till, till time, we'll just continue with this integration process only. So now let's go with setting where the admin panel is there. Let's click on admin and then just click on portal over here. Just click on portal. And this is the portal URL. And let's say if I click on this URL, so what exactly is coming in front of us? So this is what the portal URL is, and this is how our customers are going to see this portal. I think the change the design. Previously, it was not like this. Now they changed the design actually looked good, pretty good. Look pretty good. I will take this URL and I will just copy. Come back to bootstrap studio. I will select this button over here. And this is already a link. And we'll just paste the URL over there, hit Enter, and the target will be blank. This way. If we go and preview our website year, and if anyone clicks on this URL, they will be redirected to our Help Desk page. This is our help desk page of cloud school. This is all the other things are there. View all tickets. I think this is this is agent board actually. If I log out. So how it will be yeah. Yeah. Did they change the design actually to be very frank, submit a ticket and browse article and you can search it something if the article is there. This is knowledge base. We will be coming soon there as often, other knowledge base will be completely empty. So that is how it is. So it'll just log in one more time. This is my e-mail address. I will put in my password. Continue to Fresh desk. It'll go to the admin panel one more time that our portal is set. This one portal which we recently accessed. Now we will go to widget in free account. We can only use one egypt widget. And as of now, one widget is enough for us. So I'll just click on create a widget and I will name it as chat. And we'll just click on Create over year. Welcome to support, and this is how it will look. So this is help and all what we can type like. Let's keep it help only. In this we have a contact form. Let's see if you scroll down over here. No, no, sorry, not this year only if I turn this off. So this is like blank and support articles. So this is only support articles are there. I will turn both the options on support article and this neutral, and this one is the other one. But once we end our trial period of 21 days and once we move to the free three section of the account, this won't work, so I will keep in the appearance. We can change the color according to our brand one, so we have this color and then solid color, we have other solid colors as well. These are the gradients, so we'll take this one. And this is small thing where you can see this we notify you stuck somewhere like blah, blah, blah. This is the main code which you want. So I will just copy this code. And to save all these things, I will just click on save over here. And savings saved. Copy this code with this embedded code. Copy this embedded code, and come to bootstrap studio. Save this project first. Go-to setting. The setting and go to head content. Because if you come back here, it says like, you can embed this widget in your website or product using this code. And we have to put this code, the script inside our head component. I will just paste this code over here. It is like after content and before. So I will go to after, I will paste it here and we'll click on Save. Once I click on Save, I will just go back to our bootstraps Studio preview project. And there we go. Now we have this Help icon over here, and this is in all the pages because we, it came to setting and then we paste pasted that code. We didn't went inside this individual page setting option and we pasted that code. So this option is everywhere. Now, if I click, you can see the color and the name e-mail. All these things are here. Now, this is a live chat. You can call it as live chat also, but this is not a live chat. This is a ticket support system. And if you want to create a live and if you want to create a live chat. So for live chat year, we have in Fresh desk, like in fresh works actually, we have a fresh messenger. We can do that as well, but we won't do it in this particular section for that we have a different section altogether. In that section we will see that for now our, this particular system is ready. Now what we have to do is just go to index page, select this navbar. Before that we have to name it also will go to navbar. I came to Navbar. The first one will be the home. Second one, what it can be maybe solution or maybe Business Solution. Business Solution. The third one, maybe it can be lower profile. Then we can do directly to OC. And then I will just take it one more time. It will be contact. Contact. Let's connect this Pages home will be index, business solution will be business solution. Click on Profile and go to page and then go to profile will be our client. And contact page will be Contact page. We have to design this one also right after form submission. We will do that. Once that is done, once we linked everything over here, I will just click on this nav, right-click. Go to copy and paste, come to copy to, and come to multiple over your turn on this option Link copies and just check this box so that our navbar will be copied to all the pages and it will be linked with everyone. So whenever we do change in a navbar in all the pages at the same time. It will update and we'll just click on Copy. Now I have to go one-by-one in one-by-one peach. And I have to take this navbar from bottom to the top. Top means right below this body. Come into contact also, you're also after do the same thing. Index, it is already done in OCI also, I have to do this one. Yeah, there we go. Now coming back to the preview, if I see over here now I have my navbar. If I go to business solution, this is my business solution and this is the help your eye will go to profile. So this is my profile and help us again. Then if I go to contact, my contact is also there. And once I fill the form, I have to go to this particular page called after submission so you can design anything over here. So what we can do as of now is like just take a container over here, select this container, put a margin top for H2. It is like empty dash for margin of four, I will take one icon, click on B, maybe a thumbs up icon. Come to Appearance panel. I'm going a bit fast because I think because I guess you know how to do this now, I will just change the color, come to the height, height, font size actually. Then I will increase the font size. Right below this, I will put a heading tag, give the heading over here. I never any type. Thanks for contacting us. We will get actually what I did over here is Once I want to come to the next page and if I press only enter, it will, it will be like, okay, the editing is done. But if I wanted to come to a next line, actually not p, I think I call it page but not a peach. It's line. What I will do shifted eta, and now I will type. We will get back to you asap, make it H4, and the whole container, we will take it to the center. Let's take button, button over here. Go back to homepage, coming to Options and then the style will be warning to make it yellow. It will be link, and this link will take it to index. Now coming back to our Contact Us page and select this form. Yes, it is already redirected to this one. So whenever someone fills this form, it will be redirected there. Let's test it. Let's test it. This is my information, GSD then what project I won't like multi-page project. Let's type test. Message. Click on Send message. Check this. I'm not a robot sending. Yeah, that's it. Thank you for contacting us. We will get back to you asap and click on, go back to Home and we're back to home. That's all guys. I think you understood how to design this multi-page website, how to link this page? Smart form, Help Desk is like very basic we saw, but yes, you got to know how exactly we are going to use this Help Desk, Live Chat and all the other things. If you have any doubts, so please ask a question or joined my Discord channel. So this is the discord channel URL, which says this link will get x-bar in seven days, which I did yesterday and I said naval and click year. Hopefully this is there. Or else what you can do is you can put your e-mail address and I will send you an invite over there on the disk in white on discord and you can join mu there. So yes, both ways you can do and my email address is conduct current conductor at yahoo.com. You can put an email over there for asking for in white link of the skirt. And then we can have a chat sessions over there. And sometimes we can come on live, live sessions also on Google Meet or something like that. And we can discuss over there with the common problems are common questions which you guys have. For now this peck result is done, and we'll see you in the next section of this course. 38. Setting Up The LMS Design Of Project Three: Hello and welcome to another section. And in this section we are going to design LMS system, that is learning management system. So what we will do, instead of creating a blank template, we will start using the default template or the provided template by Bootstrap studio in the application. Let's start designing the website. I will click on new design over here, and I will name it as cloud school. Cloud School. And we will be using this SB Admin template over year. So we'll just click on this SB Admin template and I will click on custom. And I want to use all the pages, whichever, whichever are available here. We'll click All. And I will turn this on so that it will be added in the navigation bar as well. So that for us also it is easy. In the brand. We will type it as cloud school cloud school description. We can leave it blank. Note, not a worry. And then I will click on Create. This is the SB Admin template. This is the admin template actually, but from this admin template out of this admin template, we are going to design a front-end as well as an admin panel also. So it is like both ways. Admin panel and this LMS system designing of this LMS system is in such a way that is just like a user and admin module. If you go to kid classroom than it is like instructor admin, user module. But it is just like two widths, user and admin module and admin can be instructive as well and the admin as well. So what we're going to design first is we will be going to design the user enforced. This is what we have in front of us now and we don't want much of this things. What we will do first is we will see this cloud school and the icon we need. I'll just double-click on this icon and I will type loud. I will search for cloud over here. When I'm I'm talking, it's difficult for me to type, so I type something else while talking. Okay, So this is the Cloud icon and I'll just click on Okay, so we have a cloud and cloud school texts over here. This is two divs. In 1D, we have the icon and in another div we have the text. We don't want this side navbar actually. In admin, we will use this, but in the user end we don't want this side navbar, but we want this to things like one is icon and one is the text. Select both. And I will come here, drag and drop in the another section in the another navbar, you can see another navbar is also there. I'm pointing one arrow over there. By using animation. I will release it over here. It will come right next to the search bar. And then this navbar, this navbar I don't need in the user end, so I'll just delete it. Once I delete that it becomes a full page, navbar and then the rest of the things, whatever are there. Again, I don't need that in this particular area. So I will select this dashboard and let us see like from where it is in this container. So if we delete this container, will it work? Yes, it worked. And we don't want this one also that is the footer and this page top. We can use and let's see. If we want to use we can and orals, we will delete that. Okay? So this is the div container. We want that div because inside that div, the nav, but he's also there. Whatever we are going to do that we will be doing this inside this container only. Before that, what we will do, we will use a different color scheme over here, like a dark mode of the website. Coming to the resources. If you come to resources folder which I have shared with you in the BSS file you can find like cloud school over here in the resources. If you go to Resources, you will find this custom change CSS. What you have to do is just drag and drop the CSS file and drop it inside this tailwater. Now you can see this particular area is dark now. Now, to change the color of this navbar also you have to select the navbar first. Check that background color is there or not. If it is there. As in this example, it is white. So just click over here and click on Default, so that it will come to a default area, whatever color is given to that particular navbar. But as often or it is transparent, it is coming to the dark section because we have imported this CSS one CSS file and it is showing that particular thing. And let's select this search bar and we can change the color from primary to dark. And there we go. We want this particular thing like notification message than user. And now this is, there's two things. We will change it. I will select this complete navbar and go to appearance year from the text color. Actually the text color is here and we can make it white from you. That's all it is done. And this one, we will do it manually, like step-by-step white. This one, I think it is from where exactly this coming from. Text gray one CAs is applied, text gray 600 year. We will make text white. There we go. And we can remove this style from your. Now, let us say this icon, icon. Okay, so let's see what color we can use there. Yes, we made it white. And this notification bell, again, we have to make it white. This much. Navbar section is done and we have to continue with the other one. Then we will see step-by-step navbar. As of now it is done. We changed to the, we removed the side nav bar, we changed the color, we imported a CSS. In the next video, we will see one more navbar which we are going to design and that will appear only when we are using mobile devices. So see you in the next video, guys. 39. Creating Navbar for Mobile View Of Project Three: Okay, welcome back to this video. In this video, we are going to design a navbar, which will be only for mobile devices. This one now bodies here, and I will take another navbar. We'll take this navbar and I will drop it over here. Right exactly. Yeah. This one right below the body and let it be whatever it is coming we will, we are going to fix everything. So let's select this navbar and come to options over here. And in the position, this is the third option which is positioned. Just select this option and click on fixed to bottom. Once you click on that, this nobody is going to come to the bottom area. I think we don't need this now, so we are going to delete this. And we also don't need this brand new icon now, not brand icon, the brand name over here. We will delete this brand name also. And now let's come to the mobile view and then we will start designing it. In mobile you. As soon as we came to the mobile view, this hamburger icon came and we don't want that. So again, I will select this navbar expand. I will make it as always. It will keep it always in the exponent one. Now we have to see what all things we have to put over here. I think the basic things which we want ease, one will be the home. And then we will also have one section called my learning or maybe my courses. And then wishlist, Then account and search. I think we have like three or four options over there. Let's delete this to you because we want to bring an icon over there. And I will just turn off this active button over here. And I will come to icon, search icon and drop the icon in this particular area. And drop the icon or you remove this text. That solve this icon will be home. Which home to be used. Let's see. Another icon. It should be very slim and trim kind of thing. So we can use this, but let's see. First home is there, then search icon is there, okay, then video, video is not that good. We can search it for play also. This one is fine. Then setting or maybe count, know or user. We have all the icons, then we can use this one line. Awesome. First is home. I'm selecting this Home icon over here and click Home. I think you understood what exactly we are going to do. Select this now item and duplicate this. Double-click on this nav item. And next one will be search. Let's select on this search over here. And we will duplicate it one more time. This time it will be video or play button icon. This is the play button icon. After that, we have wishlist. Yes, wishlist can be their heart. Hopefully your heart is there. Thank God. We didn't check it. The last one will be users. Okay. We have this icons over a year now. And then we will select everything. Sorry, I'm pressing gaps August select everything and come to the class and just type margin, left, margin left or right. Just a second. We have to do padding. Three is too much. Is enough. Then margin too. Sometimes this margin won't work in navbar, so that time, what do you have to do? Like let's say we will take this one only and then select this first one and see how much space is available over here. Tried to give a bit of margin because we are using Flexbox also. Bit of margin where we will give a margin right side. Okay, So let's say five margin five is good enough. Just take this one and apply margin five to each of them. That they can have a bit of space over there. See what I'm doing is I'm just selecting one-by-one and copy and pasting that. But one more option is there. Now select all nav item at once and just give the margin to them. It will be easy for you Also. Let's say ten is good enough. And then come to font and the font size, we will increase a font to maybe 20. Okay, Now coming to the Nav option or maybe the nav. Select the collapse nav and go to options and just click on Center. Sorry, select this and click on Center. Now it is on the center, so select the nav and then come to alignment, and then select center over here. Now we have this navbar, which is centered align. And I will select this navbar will come to Appearance. And I have to give the color, this dark color over here. So I will just come to this background one. I will click here. We'll take the eyedropper tool. Click on this. I will put it in the favorite also. This isn't a favorite, so I will select it and go to the fonts. The fonts, I will just make the form white. I think I have to make the icon white one-by-one. This one white. Just doing it. I will just do the fast-forward. This is one way of designing it. And we will give a little bit of a different look and feel to it so that it will look very exciting. What I am going to do is I will come to the Options panel over here. Appearance panel, or just come down and I will select this border. I will select this border, or maybe the whole border. And let us give a radius. And let's try to make it a curve. 150 is enough, 50. And we'll come, you're on the top. I've selected the navbar map borrower, you are right. I will do this. Margin bottom. We will just try to make it on a per site, a bit on a per side, let's say five is enough. And we will try to just give some extra room over here. What we can do there, I think padding will be the best option for that. Padding, right? Is it working? No, it is happening inside that margin, right? Margin is working. Margin five is good for right side or left side also definitely we are going to give five only. Okay? We will take it a couple of steps down. And now instead of giving this color, what I'm thinking is like what we can do, instead of giving this color or direct straight color that we can use a gradient over there. So gradient, let us see how we can do that. How we can do that means what gradient we have to use dark to light or light to dark. Let's see. Select this one. Design. I will select this color. Again. I will go to Select. Then. I will take it to the lighter side. Blue won't work appropriately. This what do you say guys? Like gradient looks good? No, not for me. I don't think so. It looks good. Actually. Let it be this way only. Yeah. I think that's all what we can do. Apart from that, his legs select this Icons. Not exactly I cause this nav items and we can reduce a font size. It is too big, so we can make it small. 16 is good, and we have also given the padding somewhere. By adding one, we will remove that padding one. Okay, Now it false properly. Now, we have to now bus one either the top one is at the bottom, but this navbar we are only going to use when we are in the mobile screen that then this NaBr won't be there. For that we have to use media query. And that media query we are going to see in the next video. See you in the next video. 40. Designing LMS Landing Page Of Project Three: Okay, so we will start creating the rest of the area. Before that we have to import few of the elements or maybe few of the resources from you. This cover image we want and this course icons we want. So we will come to our image section and I will create a new folder called cover, where I'm going to place only one cover. And I will create one more folder for the create one more folder and I will name it as course banner. Just double-click this course folder. I will drag and drop this banners in this course banner image folder, course banner folder. And I will come to discover or maybe I will select both this and it will drop it inside this cover. The another one is not covered, but let it be, I will keep it there. Okay, so we have our images now with us and let's create the rest of the things. So first I will take a container and I will drop inside this, as I told you, we are going to do everything inside this one, this div. I've taken one container and inside this container I will take one div, div and just drop it inside this container. And now inside this container we want to take our cover image. So I'm taking this image here. Double-click on this image and go to our cover and select this image. Click Okay. And there we go. And we have to turn on the response you option over here. There we go. We have this this image we have imported and his two big image. And let's see how exactly it goes in mobile view. Whoops, it's gone. I think let's see where we have. I think we have given our media query to this div, hide on mobile. It should not be your, Actually, it should be only for this navbar. And I will just type it here. Now that is gone. And for this image, we have to do one thing that we have to reduce the size of the image. Okay, in Bootstrap studio, we have an option to directly open this image in an image editor like Photoshop or GIMP or whatever image editor we have. And from there we can do it. So let's do that. In the cover. I will select this cover, right-click Open in and I will click on Photoshop. So I have Photoshop in my system. I'm opening it in Photoshop. And once it is opened in Photoshop, photoshop is opening or there. Now, the photo is directly called inside the Photoshop. And in case if you don't find this option like open in Photoshop. So you will find this option open in, but you can go and click on this configured editor. Then you will find the editors which you have in your system. Or you can just click on Add Editor. And you can find some of the, you can just click on that resource file or maybe the launcher of that particular image editor. Maybe like GIMP or Photoshop or anything. Just click on that launcher and click on open over here. And then it will come inside this particular launcher area. And then you can select the default editor. I'm just canceling this. I'm coming back to Photoshop and I will just crop this image by hitting C. I will just take this year, just a slice this head down. I think this much is enough, right? Just click on Enter. And now I just need to go File and click on Save. And just click on Okay. And that's all. If I go to my Bootstrap studio again, there we go. Now it's done already. It is edited. It is chopped properly. Okay, this is what I wanted and that's all. I will select this image and I will start editing further with that. In Bootstrap studio. It'll just come to Appearance panel and scroll down to the borders area. I will select all borders over here and I will give a bit of curve area. You can see here a bit of curve area, maybe till 18 or 20 is fine. Okay, 20 is good enough. There we go. Now we have a proper image inside that and let us see the preview in the browser. The preview is not on, so I'll just click on preview. And there we go. We have the preview, but we have a lot of empty space over here. So how to fix that empty space? It's simple. Just click on this container and turn on this fluid option. And let's come back to our preview. There'll be go, we have this option over you. I think it is still a big image. We have to slice it down more. So come back to bootstrap studio, come to the cover, right-click. Open in and open in Photoshop back again. It will open the image in Photoshop. There we go. Let's slice it down a bit more. Let's keep it from here and let's slice it down from the top area. I think this much is fair enough. You go to File, click on Save. Back to bootstrap Studio will see this. And your, let's see. There we go. Let's look pretty good like small and decent one. Okay, Fine, Fair enough. Let's start designing the next portion. That is where we can see the courses. For that, I will take one heading. I will drop this heading inside this container. This is the heading, I will just type it, type your courses and I will make it H12. This one, I have to make it white. Just come your font and click this white area or you white text. We have to give a margin. Top 33 is good enough. Margin top three is good enough. Yeah. Okay. Now the next area, what we are going to design ease the course list area. For that. We will take one row and we'll drop that row inside this container. A column inside this container, a column inside this row. Select this. I will take one guard. Put that card inside this. There we go. So what all things we want title, we want subtitle, we want this area we can use, but we don't want this links. So let's remove that and let's see whether we can use this or not. If we don't need that, We can delete it. This area will be the title area. So let's name it as the same course. Bootstrap Studio 5.9, or maybe find 0.9 x what happened? Vot bootstrap Studio 5.9 x dBs step by step. Of course, something like that. You're the subtitle, some subtitle will be there. And what we can put a rating, ratings we can put right? So we will take one span over here, inside this paragraph. That span. And inside this span I will take the icon. Actually, when you will be designing it like a dynamic website, that time you won't use this icons and all. Let them. You will have a package if you're using any framework, let's say lateral framework or something like that. You will have a package and from there you will be using that. So that time you won't use this actually. But just to give a good look, we are using this stars over here. I will select all the five-stars here. Let's give a bit of padding. And this text area, I will just remove this text and in the brackets. So we'll just type 123456 students or maybe not students. We can make it a 123456 rated. This much area is good enough and you're getting this borders and all that things because we have added the CSS in the beginning. There's custom CSS, custom Change dot CSS file in that all these things are already there. Next we will take one image. This image, I will put it right about this body tag, cardboard JTAG actually card body tag. And it will double-click on this. And we will go to our course banner. And we will select any of this. Well, let's say, let's select this one. So this is our bootstrap studio like winner wonder, well, whatever it is, this much area is done. And shadow, I don't I don't think so. We have to apply some shadow because already it is dark and what is the use of giving that? But yes, we can give animation to it. So click on hover. This one. Let's see. Yeah, it's working actually properly. And how much we have to give. Maybe we can give it 33 is good. So till LG we can give it 43. Then this one is MD, right now, this one is MD. In MD, we can give it maybe 4444. And then the lower screen size, I think six is enough, like two-by-two or maybe we can go by one by one also. This is also good. Too well is also good, not a big deal. Let's duplicate this. A couple of time. 1234 times is okay. This screen size, let's change this to different course banners so it will look bit different. One by one. And titles also, we can change it. We can put us off now, we can put Lorem Ipsum. So I'll select that. My heading I will control and I will type labrum. Whoops. Control D lorem, enter, enter Lorem Ipsum. Not this much. Let's say if our course title is big, but obviously we will giving character limit of 60 so that we can do a proper SEO titling over there. But again, if we have lot, lot of text over here, we can do something or you, Let's see what we can do in the text area. But we will do it in the next video. 41. Finalizing LMS Landing Page Of Project Three: Okay, So we will continue where we have left. So we don't want this long area or else and z. Now this is short texts, so we have this blank space over here. What we can do is we will select this text area. And in this text option, we will just come and turn this two options on for all this text too big loop going to do this only. So it will be like one liner only and there will be no disturbance in UI. This one are heading tags with h4. We don't want H4 over there, So H5 is also good enough for that. That's solve. Let's select this one and let's put another Lorem Ipsum text over there. We have something different title over there. Some different title over here. And again, some different title over here. Okay. Which foreign size does this, Gary, this paragraph? This is when 16. Actually, we don't want that to be as 16. So we'll select all the paragraphs by holding the Control key and clicking one-by-one on all the paragraph. Just reducing the size to 12. We have to give some thing over here. Actually because it is they got connected to each other actually we don't want like that. So just collapse all the columns over here. At once. I will select all the columns. Hit Control, sorry, hit hold, Shift key and select all. And margin bottom is good I think, or maybe three. Yeah, three is good enough. And now let's see the preview. There we go. We have this prevent Now, did you solve that one by one images when loading for that also to go with a better SEO, search engine optimization. And even if you go to go and check the speed test of the website, it will always recommend you to go and use dot WebP images. Right now we are using all PNG images light. So it will always recommend you to use WebP images. And it will again always recommend to use lazy loading. Let us see how exactly we can turn on lazy load in Bootstrap Studio will select the images, all images one-by-one by clicking, by holding Control key and clicking on the images, go to Options. And here we have the option called lazy load and we can make it as lazy. That's all. If you can see in the CSS over year, load is equal to lazy. And now it is, we can say like we have done a bit of optimization over there. What exactly lazy load means. Now you can see if the images, this particular images at the bottom of the page where that particular area is not visible till now. That time those image won't load. That will help website to load faster. Instead of loading all the images which are, which are not yet in front of the screen. I think this is good enough, but yeah, we have to put the price over there. Again. We have to add price to all this. We'll do that. What to do? We'll take heading. We'll place it year, and this will be H3 or maybe H4 is also good. And then take one icon. This icon will be the currency icon, actually, as I am from India, so I will be using my currency, that is rupee 99. I will type here. Let us see the preview first. Now. Looks pretty good, Not that bad. Coming back to bootstrap studio, I have to duplicate this. Bring it. Again, duplicate this. We bring it here. Duplicate, duplicate. Hello. Oblique it, and bring it to you. Okay, fair enough. Now this much courses is good to go as of now. I think instead of we can do some changes you there also, like it looked too big, then we can make it small. Small means what we can do, select all the columns over you. Instead of three. We can go with two. Let us see how exactly it looks. Actually, it looks good in this size. Will keep it like this only. We have this. And if we tried to lower down the screen size, then it takes the proper area. Isn't it? You can play around with this. And for me, I think it is good. And after that we will create one more section. Not exactly section. We will create one more heading over here is my heading. Heading. And I will drop this inside this container because I want this right below that row. You're exactly, I will make it H12. This to a white color. I will type you get of course completion certificate instead of going to just copy and paste. Take it to center alignment. And I will give margin top five. I put some good space over there. What I will do, I will put this inside a div, actually inside this div. And this div, I will make it as a center alignment. And I will remove the central admin from this one. Inside this div, I'm going to take one paragraph, drop this paragraph inside that that paragraph, I will be calling it as conduct self validation test and get certificate. I'm just copying and pasting the data which I have. But you guys, you type the data. I'm saving this again. Now I will take a row. It will take this row inside this div. Then I will take one column. Inside this column, I will take the image tag. Double-click to the image tag. We have this image I wanted to see major. Now I will open this image, go to Options down on this response. You just duplicate this one from the another one. I will just delete this image. I will put 21 heading tag over there. I think we have to take it outside this div. We don't want that to come in a central element. This div, I will take it above that rule. Okay. Fair enough. This heading will be called as instructor. Then we'll take paragraph, actually. In one paragraph, Let's type something very random Wonder Woman. All right, I'll duplicate this and we'll take it as a lot of myths of control. P, double Enter, Enter, Enter, lot of epsilon. This particular section I want white completely. So to select that column come to appearance. To the complete column, I'm giving white color. And also I want this particular texts, like all the three texts should come like in the center, like horizontal center. So we'll go to the Options panel and in the flexbox. So I will open this Flexbox. I will click on this center. Let us see from where I want that in the center. Your first we will fix this column area. Then we will go to the Flexbox. It is I think it is okay to leave. This one is SM. Sm we want six. Then I have selected both the columns. So you are, it is one after another. And from your it is side-by-side. When it is one after another. I want that to come in a center area like this way. Then I will turn on just a second. Just wanted to select this column. And the second one, not both one, just done on this and column-wise center and this one. Okay, so if I come to the largest screen size now, you can see it. It is coming automatically to the horizontal center. This is horizontal center. You can see Center and this is left. This area is done. One last thing we can do is we will put one. What we can do here, Let's put one video over there. Sorry, I'll take one more div there. This div. For this div, Let's give a margin top four. Let's take video. This is a video, so div, I will take it to center so that the video will come in the center. And now instead of this u2, we will take a Vimeo because YouTube, you know, like how exactly would take it, like just copy the URL over there. And this is Vimeo. Vimeo also seem take the URL. That's all. It is done. Actually. Just copy this link. Let me remove this and paste this. Now this is your title. Let's remove the title then show author. Remove that author as well. This one. That's all. We will only have the controllers over there. Now if I go to our preview. Yes, now the video is there and you can click on this video to plate. Yes. I also have received some questions where students like you guys are asking me how exactly to add a HTML5 video over here and that I will be covering, I have written that also that I have to cover that particular point that we will cover when we will take a real server and when we will upload our files on the real server, because we need server from where we can store that video and call that video link also. This is this is done as of now. It's done. Yeah, that's all. But before that, if we come to our mobile size, then this video is hiding behind that. And we have to fix that. And also once we come to the mobile screen size, this video is going out of the area. What do we have to do instead of this width, 60 pixels? We have to keep a 100% and then it will be in the percentage form. Blue bordered is going behind our navbar, that is bottom navbar. So the last one, what we can do, I will select this div over here, come to Appearance panel. I have to give a margin bottom in such a way that it won't fall on top of that area. Top off this navbar. I have to give that much of margin. Let say 50 is fair enough. I think this image is good. So this has individual controls and this one also have individual control. In this area, also this div, or maybe this container, the complete container, I have to give a margin top area to it, that it has some extra space or extra room over there. That's all guys. I think this particular page design is done. Only this middle area. We will doing this as we go forward. And as of now this particular page is done. In the next video, we will design a one more page that is the Course Details speech once you want to click on this course. So it should go to a course detail page, that page we are going to design and that we will design in our next video. See you in the next video, guys. 42. Creating and Adjusting Other Pages for LMS Of Project Three: In this video, we will continue forward by creating our Course Details page. So for that, what we will do, select this index page. I will duplicate this index page, and I will rename this as Gore's details. Okay, So coming to that page, we don't need all these things now. I will select everything and I will delete this area. I will select this container. And coming here. First thing we have to do is we will take one heading tag, drop it here, and this container, I will just select this container, come to appearance. The entire container, we will make it white. This heading tag will be H2. And we'll name this as the course name. Just pays this. We can make it H12 or one also. H1 is also fine, not a problem. Then we'll take a paragraph. This paragraph will be subtitles, so we can put a lorem ipsum text in that. We can have few one more line over here where we can put other details such as the reading course ID. We can put it as latest, updated at and we will put some date over there. Once that is done inside this container, we will take one row. Take the row over here, and I will drop this row inside this container and select the, select the row. I will take the column inside that container, and I will take two columns over here. And one column will be for video and another column will be for the other, other set of information. I will select the first column, come to the options. Okay, till LG will make it at 84. Let us see how exactly it works. I will put a video tag over your video element. This, I will keep it as HTML5. Later we will add the URL and all the things. But for width, we will make it as a 100% width and height, we will make it as 350. That's enough for now. And in the second column I will put one more card. Not one more actually in this page is the first card. This title I will select and I will give it unto year. It will be a rupee icon. So I'm taking one icon there. Double-click on this icon, and then search for the currencies involved. Whatever currency is involved you want, you can take it. This one will be, let us say phi 99. Subtitle will be this course include. Then we will put some set of information such as a total duration of the course, like on-demand, seven hours, 15 minutes of videos. Then we will give one more thing called Lifetime Access. And then we will have this one called attachment. Then we will give a certificate also. Then we will tell 30 days refund guaranteed. Then we will remove this two links from here. We don't want that links over there. Now inside this body we will take one row two, add two things. That is two buttons. Actually. I'll select that row and put this column when duplicate this column. And now I will take the btn button. It'll put the button, one button over here. I will duplicate this and I will throw it in the column. Select this first button come to Appearance. And as we don't have the Block option now, so what do we have to do is go to width and make the width 100%. Year also make the width 100%. So this one will be to wish list. This button will be by now. And add to wishlist. We will make it as outline because we don't want to show the focus over there. And China, we will keep it like this only. When we come to this screen size. Let's say md. It is going at dramatically below that. What we can do, instead of typing at two wishlist, we can put one icon. Oeo will remove all the texts from there. Like psychological effect not showing anything that the user won't read it. But it will say, okay, it is a wishlist one. So we will put a heart over there with the outline only. Now this column in which the heart is there, we will just shuffle that, that by now, we will bring it in the first place. And this one we will give a bit extra space. All screen sizes. Maybe. Let's heart rate, heart one we will take it for. This one is small and this one big. That sort and video like as I told you, once we move forward, we will taking that video as well. Okay, So this area is done. And moving forward, we have to take now accordion. This is the accordion and dropping inside this container. So this one is accordion. We will put some margin top margin over their margin top, Let's do is good enough, I think. Yes, this much space is good. Let's say, let's try 33 is also good, not a problem. And here we will know what exactly will come over. Here is the section name. Section name. And inside that, we will put this one. What do you say? The titles, the lecture, the video name for that. What we have to do over year 0s, we have to take row inside that directly, put this text inside a row. It will come automatically inside the column. And we'll duplicate this. Sorry, not paragraph will duplicate this column one more time. This column in all the screen size, we will give maybe very less area, less grids, actually, maybe two or something like that. And this will be timing like 0335, something like that. And this text will be aligned in that way. And also we can bring it more like one is also good enough because not all single video is going to be in ours. So that's why it is fine. This one will remain seem. This is the title of the video. Actually. This row will be in shuffle loop. What we can do, your ease, we'll put one border, bottom border, solid. And this one will be the video title. Something like that. The complete row will give margin bottom. Do. I think it will be good enough? Duplicate. This will be second video. Is already there. You can play with the, what do you say? Play with the opacity and all. Let us see the preview now. You can see the preview is like this and we don't want this H2N kind of thing. So we'll come to this container. We will select this container in the bootstrap studio and turn off this fluid option. Now let us see the preview. Yeah, Now it looks pretty good. Height is also not that satisfied, satisfactory. So we will increase the height, maybe 400. Let's see it one more time. Now it's okay, but anyways, we will have the video that time it will automatically take the size. This one you can change, you can put some, what do you say? Opacity or something like that. So I will delete this row, I will select this row one more time and in appearance. So we'll come down to the border area and I will just reduce the opacity root 25%. So it will look something like this. I think this is okay for now. We can put some padding to that. Maybe margin bottom to like this. Same thing for this one also. Margin bottom 0 was already there, but it was not looking good. I think this one looks pretty good. We can reduce some opacity for that line. It was 0.25. Maybe we can take it to ten or something like that. 0.199, something like that. And then, you know, it's like, okay, it's look good. Actually know, then you can make this duplicate, duplicate, duplicate, duplicate, duplicate for multiple times. Same thing will happen to the next section. This will be section name. This will be section name. If we come to our preview, you can see it's like it's good enough here. The only thing like the background, which we like, you can see a white color over here is, we have, is because the body of the page is white. So we can select this body tag and come to Appearance and come to background. This is white. Okay. Come here and select this color and click on Select. And now let us see how exactly it looks. Yeah, it's gone. It is it is there, but it's okay. You can change the color and now you know how to change the body color as well. This is the videos like before anyone purchase your course or something like that, they can see the videos over here. It is similar to Udemy, good classroom, and all the other platforms which are there available in the market. That way, we can design this and this particular page is done now because it is a single user course means there will be only one instructor for this platform. So we won't go into much details about this. That's all. In this sections like inside this, you will find this video title and the timing of the video, the total duration you will be able to see in this particular area by now and all these things like we will be designing that, but it will be like if you click on Buy now the, when you will be designing this website and dynamic, Let's see. If possible we can do one thing by using this design. We can make one more course in PHP Laura will wear, you can make this website dynamic. Not sure about that, but if it is there, I will definitely inform you. And if you click on by now, that reserve pay payment gateway dialog box will come and you will fill all this information over there. And then you will be moving to your checkout page. Not exactly checkout, my courses page or something like that. But we also have to see how exactly it looks in mobile view because we don't want to overlap that and it is overlapping. Select the accordion. And where is that accordion year? I want to give margin to it now. That button margin and bottom margin was 50, I think last time Let's see Exhibit 50. No, still some area is there, so maybe it is 5555 is also not enough. Sixty-five. Sixty-five is like, okay. Yeah, we can work on this. Like not a problem. Why exactly, this is going out of the area now, make it in this screen size. Then the second column in every row is for timing. We have to select second column in every row for the timestamp. Then let's give one, I think one was there, right. Let's go one-by-one till MD. It is fine. From which size it is MD, MD, we have a problem. So LGB will give this year, we will give maybe 33 is good for you. And you're also okay, so three and year one and rest. What we will do, we will select all the text over here. Let's select all the text that is paragraph will turn on this options. So let's say by chance, we'll take one Lauder movie. If the title is too big, then what we have to do, select the first column of every row, which will be the title of our course. This is MD. Md, we will give it as den from LG. We can make it. The timing is now I think it is proper fitting in all screen sizes, yes. And due to that, we are able to control the length of the sentence. I think for now it is okay. It is working properly fine without any issues. But if you find any issues, then you can send me your source file on current conductor at the rate yahoo.com. Or we can chat over the discord channel where we all are going to come together very soon, and I hope so very soon. If you guys show interest to join that, this page is done and let's do one more thing. Over here. We have message notification will remove this one like message. Instead of message. We will keep this as wishlist. Not useless. We have to take her heart over here. I will take this heart and this is dropped on. Actually, I don't need a drop-down over here. I'll just delete this one. This is also a drop-down, I think so. This is also drop down and there also I don't need a drop-down. This nav item is the dropdown, so we'll duplicate this nav item. And whatever is there inside that, which is a drop, drop down. I will remove the drop-down and I will put an icon inside that. That icon will come at this particular position. So not to worry. Just select that and type heart over here. I'll take this heart. And now selecting this nav item, come to the flexbox option and just click on this center area. There we go. Now it isn't center. Again, duplicate this. And now in this area, we will take video or maybe a play button, which will be this one. That's all this. Now I DM will take us two will take us to the wishlist page, and there'll be a link also. So we'll take a link will take this link inside this and remove this text. And one more link inside the another one, which is the video. And drop this icon inside this link. Select this link and remove the text. Okay, fair enough. Select this icon, come to appearance because we have to make it white again and make it white. This video also make it white. Where it, where it is, where it is ready to go. We have this one now. I still, okay, So we have created this wishlist and video player. We will duplicate this page one more time and we will name this as, what is this video means, learning or maybe, sorry, my courses, my courses. And then we are just a minute, we will delete this my courses. What we will do instead of that, we will come to our index page. And I will duplicate this index page, double-click. And I will type it as my courses, my courses, and I will go to my courses section and I will delete this one, that image, this Duvall. So I don't need, instead of all courses, I will just type your my courses and whatever courses which are purchased that will come here. So I will remove the four and I will just keep this one. And I don't need this section also, so I'll remove this row and div altogether all at once. Body color, yes, we can. We can change the body color as we know how to change the body color now. And coming year, I will select this. I will change this color to this dark one. Just capture it. And okay. Which area is this body on the right? I think I where I put that color body when the size of this page will increase. Now what do we have to do is like coming to the index page. We, I forgot one thing. Like this card should be in a link so that only we can take it from one page to another page link and drop it, drop this link inside this column and just drop that card inside that. Select that link and just remove that text which is there. For the CFP. Like Let's check like anything is disturbed over here, nothing this thing you can do to all the other cards. Just select this link and come to the Options panel. And from the page, we can go to Course Details page from their notification will leave as it is visualised page we don't have, but we can create in a second. Actually, I'm going to go into my course page and you're also we have to do that link, one link. I will drop it inside this card and take this card and drop it inside this link, select this link and remove this text from year. We have to go somewhere else where the user can literally click on the videos and play. So we will keep this blank as of now. But I will duplicate this myCourses page one more time and I will name it as wishlist. Wish list. I will double-click on this page and I will rename this as wishlist. We can take it, we can take a different course, banner over four. We won't get confused. Instead of this one, we will rename this and we will put a lot of my Epson Control P plus L O R and enter two times will change this text. Again, we have a link and from this page we can go to Course Details page again. For now this reference point of only for the reference I'm linking to the same page. And actually it is in dynamic. It is going to be on the same page only. Close details page from here also the user can click and it can go to the course. It'll pitch to buy the course. Now we have this one like wishlist tables. What is this tables? Do we need this tables? By any chance? No user and we don't need this. I'm deleting this register pages registered. You will keep it as it is. Only that what we can do is we can just, we can force change, maybe an options. It is dark. So from here also we can make it white. Forget password, or already have an account login. Sign in with Google Assignments, Facebook. We need this profile page we need then my quarters we created, then login. Yes, we need logging also. So you're also we will change this color to white. Index. We created forget password was already there. You're also, we have to change the color to white. Then Course Details we created, then blank page we have, but I don't think so. We need this blank page now, removing that blank page. Now we have 404 also. In this 404 we don't need this side nav and back to dashboard and this footer we don't need actually let it be Footer related. We're yeah, this is what it is there. And this one will change the color from default to white. This one also will change the color from default to white. Whereas that paragraph, this one is dark, so we'll make it white. So 404 is like server not found or something like error page, the pages which we don't want in user and we remove that. Whatever we want. We kept it, kept that. And now, as of now, I think we completed with most of the things and few of the pages are remaining and editing is also there. So removing this navbar again from this area is important. Select the profile and make it white. We have this area. I don't think so. We need this project area and all these things form than signature, signature and all we don't need. Like whatever we need, we will keep it. Whatever we don't need, we will delete that. That's how we're going to do in this video. I think that's enough. And in the next video we will design this page where it is, where it went, where it went. Instead of course details, after buying the course, that learning page, we will, we will design. See you in the next video. 43. Finalizing LMS Front End Of Project Three: Okay, So in this video we will see the learning page. I will duplicate this Course Details page, and I will rename this as learning, right? Spelling learning. And it's very simple. I will just remove this unnecessary items from which we don't need the title of the page. We will make it small. Maybe H4 is fine. And this accordion, we will shift the accordion from year to year. And I don't need the card over a year now. And I will just drop this accordion inside this area. We will change this to a what, what is the size of the eight? This one will be full. Fair enough. We have to do some modifications like exactly we have to do. We will see first over here like how exactly it is coming out. I think it is good to go, not a problem. Now we will go to the accordion. I will delete this two items from here. We can duplicate that. And I will come inside this. And now from year, I have to delete all these roles. First. I want some empty area, and now I will start from scratch. I will take a row one more time. There we go. We have a row over there. Then I will take a column, I will drop a column inside this, and this column will be a title. And we have the option, we should have the option to change the video. So I will be taking this inside a link. And this link, I will take again one paragraph and drop that paragraph inside that link. I will remove that link area. And this paragraph, I will just make it white. This will be a video name, so maybe it can be a long video names. So I am taking epsilon over there, just taking it as this and this. So one line duplicating this one more time and making a time as 0335. Okay, so this column is, we are in LED screen size. This column will be eight. And this one, this column will be for alignment to this side, is okay. In other screen size also, it looks pretty good. And in this screen size, it is coming one after another. So we have to select this one. Now. What is the screen size MD from year? We will start doing that. Maybe we can take it as eight or ten is also fine. Ten and then we can make it as two over here. This one is also good. This one, or this one we have problem in mobile screen. In mobile we have to till year we can make it to ten. But in mobile we have to give some extra space to the timer. Maybe three is good. Yeah, three is good. We have three, then we will need nine over your screen size is good. In the screen size is good. This screen size is good. The screen size is good. The screen size is good. Okay? So all screen sizes are good, Good enough. Then we have to do, you're like, what is the last section? This one, this column is only the last section. So we have to put the, what do you say? Margin bottom 65 pixels so that it won't overlap on our navbar bottom Navbar section one is there. Now coming to accordion. Let's duplicate this sections multiple times so that we can see how exactly it will look when we have multiple sections in mobile view as well. So you can see we have a good margin over here and we have lots of sections here. The video will be in this area. What we can do, we have height, so we'll remove that height and let it be in the default height as I think we have to remove the height from those details page. Also, when the video will come, it will automatically balanced its height. Learning page is also done. Let us see the preview. This is how the learning page is going to look like. I think this particular section and this particular area is done. So let me see in my book if I missed anything, I think this area is done. This accordion and less animation like by default it as the animation is there. We have done so good so far. And wishlist page is also linked. I think it is not linked to maybe. Let's go to navbar and start linking the page. Wishlist two will be the wishlist page is the wish list and this is the learning page. So it will go to my learning, not learning actually, my courses from my courses. Here is my courses from you. If someone clicks on that, it will go to learning page. This is how the flow will be. So let's check the flow once in the preview live preview, lets the page refresh. Okay, so we have this page over here. If I click on this will take me to the Course Details page where all the details of the page will be there. And yeah, pretty good. Then from here I can go to wishlist where my wishlist productive. There. This is my wishlist product. And if I click again on the wishlist product, it will take me to this page only. And if I go to my learning page, so this is my courses which I purchased. And if I click here, it will take me to the learning page. Okay, So far so good. I think we have completed our front-end little bit here and there, like linking this particular area. And so far so good. So I think we have computed our front-end. See you in the next video. 44. Ziara Commerce - How to Create Reflow Account: Hello, everyone. So in this video, we will learn how to set up a e commerce website in Bootstrap studio so that we have to start with Bootstrap studio and create a new design in that. So we'll name this design at Zara and select a blank template and click on Create. So this is our Zara Blank project. After that, we have to go to settings and scroll down to E Commerce. So once you click on E Commerce, we have to click on Manage Project. So once you click on Manage Project, it will take you to reflow. So I'm already logged into reflow. If you're not, you have to create a reflow account. So once the reflow account is created, you have to click here as a new project. I already have two demo projects for me. You won't see these two demo projects, but you will see new project. So you click on New Project and name this project or maybe name this company as Zara. So once you name the company, then click Next. It will ask you for the country. So I'll click on I will search for India invoice details option if you have any specific invoice detail options here, so I will type Zara limited. I can type my address as Bangalore Airport Road, and I will type my city as Bangalore, state as Karnataka, postal code. This is all Dummi data. So once I'm done with this, I will click on next, and then it will ask me to choose the plan. So as this is for a demo, we will go with free plan. I will click on Choose over here, and then I will click on next. So there I am in my reflow account. So if I go to settings general, then my reflow account is created successfully. Now you can see my reflow account project ID. This is my website name or the project name Zara. Let's change the currency to INR, which is Indian rupees. Measurement will be kilograms and centimeters. I will select my time zone from here. I want to keep the timing in AM and PM. Project linked, we will do it later on. So once this is done, just click on Save Project. By this way, we are done with our setup of reflow account by using our brand name Zara. So in the next video, we will see how exactly we can connect our project to Bootstrap studio. 45. Ziara Commerce - How to connect Reflow to Bootstrap Studio: Awesome. So welcome back. In this video, we will see how we can set up our reflow project to Bootstrap Studio. So in Bootstrap Studio, we'll click on setting and scroll down and click on E Commerce. In this select project, we will see our Zara project appearing here now. Reflow tool will be Virgin two. And active test mode will be never. Once this is done, we'll click on Save, and that's it. Our reflow project called Ziara is now connected with our bootstrap studio. So in the next video, we will start adding products and other information in our real flow account. 46. Ziara Commerce - How to Create and Import product in reflow: Awesome. So in this video, let's start creating the products and the other information. So before that, what you have to do, just click on the description of any video of this playlist, and here you can find Resource Link. Just simply click on Resource Link, and it will take you here to this Digi Box folder, and you can download the zip file. So once your project is downloaded, just come here and expand this project. In this project, you will find all the resources which are required for this project. So let's start creating the product in our reflow page. So I will quickly jump to our reflow account and I will click on the product over here. But before creating the products, we have to create the categories. So we'll go to categories and I will click on category one, and we will take help of our PDP one. So we have women's Western Ware. So we'll copy this name and I will paste it here. The same name will come here. Then if you want to add some description, then description will be there and the parent category. So this is a parent category, so we don't want to add any parent category over here. So clic on save. So my first category is ready to use, and then we can start adding the subcategories in that. So I'll copy this name. And I will simply add it to your. And for now, this parent category will be women's Western wear. Then we have dresses. So let's add the dresses in women's Western wear jeans in women's Western wear, again, play suits, women's Western wear and t shirts. Which will again come in women's Western wear. I'll create this. So women's Western wear category is created with the subcategories. Now let's go to Indian and fashion were. So I will create a new category, Indian and fashion were and I will keep it none, so it will create as a parent category, and inside that we have two different categories which we have to create here. This will be in Indian, and this will be the second one which will again be in Indian. Okay. So we have created our subcategories and categories. Now we can head to add our products. So I'll click on products and all products. Here we have option to import and export the product list, which I have given you. This is the product list which you can use. But one product I will show you how you can add that product in your product list, and then even I will also upload this product list in my reflow account. We'll click on add product. Then we have add physical product and physical product. This option is only available in free version. Digital product and gift card are available on subscription model. So we'll click on physical product here, and here we have to add the product details. So let's go back to our download page. We'll go to PDP, we'll go to Women's. I will add a T shirt. So we'll just take the name, Zara T shirt. The name will come by itself, and we have to add a description. There we go. So we have the description. Then we have extras. So this is a promo badge. So as we have a Zara special collection T shirt, then we can just name it as special collection. This will come as a tag over there, so special collection as a tag. Then we have to add the images here. So we'll click on add and as it is a T shirt, we'll see which T shirt we have to upload, which looks cool. This is already there in the product list, so I will skip that and I will use Product 25 and I will click on Upload. Can add videos as well and multiple images as well. Now, let's set the price of this product. So for this, the product price will be somewhere around maybe 1,500. And this is charged tax on product. I can just remove this. This is okay. There is no tax required for this product. Product for sale, we can turn on and we can give the original price. So let's say give the original price as 2999 is the original price, and we are selling it at thousand 500. And we have to also mention sell period that we have to select the date. So the sale starts from second of this month, and it goes up to, let's say, December 31. So this is the range in which this offer will be running. After that, the offer will go down. I will click on Apply. Then availability, yes. This product is available in store. Store is our real flow store, and we have to set what is the minimum buying quantity. So minimum buying quantity for this product will be one and maximum can be five. What is the weight of this product in KGs? I will weight this as 0.300 Kg. That means 300 grams. Estimated shipping time will be roughly around seven days and available delivery method will be all. Then here it comes our category, then we go to category Tshirt and we will also check this category women's Western Ware as well because T shirt comes under women's Western Ware. This category is done. Then inventory, how many inventories we have that is stock keeping unit SKU. So what is the SKU for this product? Let's say I will name this product SKU starts with is Zara then women's Western wear and T shirt. And maybe I can separate this name by a dash and number. So I have to add a number for that. So I'll just add a random number like 98, five, six, 21. This is the SKU number for this specific product. Then inventory system is simple. You can click on Advance as well. Advance means stock quantity available. So stock quantity if you go and keep on simple, this product will never go out of stock. If you go in Advance, you have to give a quantity how many products you have of this in your inventory. So let's give thousand as inventory. Show quantity in product page. So the user can see how many products are left in our inventory. Varieties, if we have variety, then we have to add variety in that. So let's say we have size, color, et cetera, whatnot. So specifically, we will have size and I will click on add variety. So first size will be small. The price, original price and weight will be same. If we want to change, we can change this as well. Then another variety will be medium, then large, then extra large, and then extra extra large. The SKUs for this can be added. So let's take this SKU from here, and then let's go back and click on Edit. SKU for this will be S. As it is a small one, I will paste this M I'll paste this L. So this is, again, random. I don't know whether this is a right way of giving the excuse or not. This is just for the sake of this demonstration, nothing else. Paste extra extra large. How many quantities we have in stock for this? Let's say 100,000 thousand thousand thousand and thousand. I'll click on confirm. The price for the varieties are same, so that's why it is not showing. But if you want to change the price, we can. Let's say 14 double nine is the price for small or maybe 13 double nine is the price for small. And medium large goes with 14 double nine and 14 double nine, and the double Excel goes with 15 double nine. So this is the price which it will be selling for, and then we have to mention the original price as well. The weight is okay, and we'll click on Confirm. So that's how we can create our varieties. Then we have our personalization. If we have any personalization recommendation, we can add that as well. Add option. If you want to personalize this add your name on the T shirt. Instruction required your name. This will be a checkbox or maybe a text input to get the name over there. Minimum length required is one and maximum length required is 277. This is not required, and if they are taking this option, then they have to pay 200 rupees additional. And if you want to create one more option, then you can go with Add option and then you can just click on Confirm and sort by number one and click on Save. And there we go. We have successfully created our first product. And now what we can do, we can import our products straightaway. So I'll just click on Import. I will click on Choose Wile, and I will just select this product, and I will click on Upload. The product is selected. On duplicate IDs, update existing product. If there is a duplicate ID and there might be nothing, I will just click on Import. The CSV file was uploaded successfully. Just close and just refresh ones. You can see products which are importing. So now you can see product importing in process. So one of 24 products. So as you keep on refreshing, you can see the products are getting added. We have good amount of products with us, and there we go. All the products are added successfully in our account. In this video, we have learned how to create a product and how to import the product from That's all for this video. And in the next video, we will start designing the website in Bootstrap studio. 47. Ziara Commerce - Assign Category to the products: Before designing the website in Bootstrap studio, one thing which we have to do very quickly is assign the categories to the product. So this category is a a collection. I will click on this and I will just simply go to category, and this category will be looks like Indian. I'll just market in Indian fashion for Indian and fashion were. So this is done this category, quickly, I will go and set up the category as dresses. This one also dress dress. I'll just uncheck this. This two, three, and four goes under dresses. So dress in women's Western. So done with that. Then we have Sari one, two, three, four, I think, yes, four saris we have. We'll click on category and just select saris in Indian fashion. Awesome. Just keep an eye on what we have added. This one, I think this will go in play suits and confirm. Okay, this is a T shirt. So this one goes in T shirt category. One, two, three, four. This four will go in place play suit category, maybe. Yeah, let's give it there. Oops, I haven't clicked this category. So women's Western is the primary category, which we have to go with. These are jeans. So I'll just select all four and click on Jeans, and there we go. And let's go to the second page now. Okay, so now we'll go with this one. These are Uh, gods and confirm Sari. This is going to be in Sari. And click on Confirm. I think we haven't add anything in this category. Okay, so we have to see. Okay, this is what it is cult one. So we will reset this from this to this. Confirm. And there we go. So we have added all the products in their specific categories. Okay, cool. Fair enough. Let's get started in bootstrap studio in the next video. It 48. Ziara Commerce - Design NavBar and Slider: Awesome. So our bootstrap studio project called Zara was already ready before we started creating the Z flow account. Sorry, reflow account. NAF bar, yes. And here we will add our brand image. So I will just type image over here and bring this image and remove this text. We don't need this text. Home. So first item will be home. Second item will be our two categories here. So I will just name it as Indian and Western. So Indian and Indian and Western is to category what we are interested in. And then let's create Let's go to Ecommerce View card will come, and sign in button will come right after that. So let's click on Sign in button and align to the end and the card button and again, align it to the end. Let's click on Navbar and turn off the fluid option, and let's quickly have a preview of our website. So this is how the website is going to look, and we will change the look and feel as we go forward. I will take a button quickly and keep it here and take the button inside this view cart option, and I will put the span inside this. And I will Oops, remove this. And yeah, this button is now a card button. We can give an icon also to it. Double click, select the line icons, and card icon. Go to appearance and just increase the font size and remove the text. So Okay. So what I did is I just took the nav bar and made a default. This nav item made a default, and the card I again made a default. But the sign in button, I kept it at the end of this. Let's start importing the images as we are required. First, we'll take the logo. I'll just import the logo, and there we go, double click. We have our logo here and click on Okay as it is coming too big. So we just have to mention the width. I will just mention as 120. Uh, come to the preview and see we have set our logo. Okay, so going back to bootstrap studio, this logo will get redirected to the Index page only, and the home also will get redirected to Index page. We'll select the Navbar here and I will turn on the Active Smart Active status. Whichever page is active, that will get highlighted automatically. Let's change this button to link, and for now, I will just put hash key over here. And if you want to change the style, feel free to change the style of this. Okay, next step, we'll create a slider. Let's add Carusal and I'm here with the cousal let's import the Corusalimages. Landing page, hero, desktop, and these three hero pages are there. So we have got the images here. So I'll just double click on this, take the hero one, click Okay, next. Double click. We have added our sliders over here. So after that, we will start creating our rest of the landing page, but we will do that in the next video. So see people in the next video. 49. Ziara Commerce - Fixing the floating button in the NavBar: Before we move forward, what we will do here is the At tocad button, which is there is coming right in the center of the Navbar. We don't want this button over here. So we want the button to the right of the Navbar. The reason being it is in the center is only because if you see the sine out button, sine in button, specifically, sine in button is aligned in the end. So if you just move from end to default, the Atto Cart button will come near the sign in button. So now we just need a spacing. Okay, I have to select the view card button and come to the class, and here I have to add a margin end for class. And this is how we fix the issue of AT Cart button floating just in the center of the NAFBA. In the next video, we will start creating the pages for the dedicated category, and we'll keep on working on the website. So see you folks in the next video. 50. Ziara Commerce - Finalising Home Page: Awesome. So let's start designing the website. So this is a homepage, and in the homepage, what we need is almost all the products which are there, but with a specific design as well. So here we will quickly create one container. I will take right below the carousel. And in this container, I will take one row. And I will add a column inside that. Once this column is added, I will take one image component and after the image, I will take one paragraph. I will take one link as well, and I will drop just about the image inside this column, and I will move the image and paragraph inside this link. Whenever the user will click anywhere over the image or the text, the user will get redirected to a specific page where we want them to get redirected. With this, what we will do we select the link tag over here, quickly come to our CSS and just add text decoration none. This way, the underline will go off and we have to change the color as well. So selecting the link, come back to option and just scroll down to color and make it dark. And as this has to be a center aligned, so I'll select the column, I will come to alignment option and just click on center alignment. I need three columns over here with image and paragraph embedded in that. So I will duplicate this column two more times, and there we go. We have three columns added in this. After this, I will start adding the images inside this. So for that, we need to import the image. So quickly come to our resources folder. Quickly come to the resources folder and just find some three PDPs, which we need. We will come to Cords and I will select this image and I will just import it in bootstrap studio. I will come here. I will go to dress category. I will select any dress. I will import this here and will come in Jeans category and I will just import the Jeans image over. So in the first one, I will quickly add this image. In the second one, I will quickly add the dress, and in the third one, I will quickly add the jeans. So I need all these three images in a responsive form. So we'll select all the three images, and I will just simply click on Responsive over here and there we go. I will change the text from paragraph to I will take the name and I will just paste it here. Then we have dresses, then we have jeans, and there we go. So here, what exactly we have to do now is we'll select this link and give the page redirection to Cords page. I will select the dresses link. So this link belongs to dresses, and I will select to dresses, and this link belongs to jeans. So I'll just click on Jeans so that whenever the user clicks on this, it will get redirected to that specific page. Just to check very quickly, we'll take a preview. So if I come here and click on this, it is taking me to Cords page. I will come back and click on this dresses. So it is coming on the dressers page. And when I click on Jeans, it is coming on the Jeans page. I think the Navbar and the footer is not copied on the Cod page, so we'll quickly go to Index page again. Select the Navbar and the footer, right copy, copy two, select multiple back again and just click on Cards only one single and link and copy again. So this way, the Navbar and footer is on the Card page as well. So select the container and quickly give a margin top of four. We'll just maintain the margin top. We'll just maintain four as a standard number over here. We can quickly add a text right about the row in the container, and that will be a heading tag. I will quickly add a row over here, sorry, not here. So this one unwanted column we will delete, and this we will name as ate at least and quickly change the text alignment to center. Next up in the same way, we will create one more column, but this we will name as ZiaraNw arrival. And here, just to make a simple change, we will add one more column over here so that it is four. And the structure also we will change slightly over here. So just before the paragraph, we will add one heading. And right after the paragraph, we'll create one more paragraph. This will be a CTA called Shop Now. Awesome. And this we will repeat in all the places. So we'll just copy and drop it here. We'll take copy one more time, drop it here, take the copy one more time, and drop it here. Just quickly take this and move it one step above or quickly take this and move it one step down. Take the shop now, take one step down, take the shop now and one step down. Awesome. So for Shop Now, specifically, we need a underline. So double click Shop Now and turn on the underline option from this area. Cool. So yeah, we have to take this in the center. So these paragraph will now be a subhead copy. So you guys go and try your best to add a subhead over here. And now we have to add the images which are most likely to be a new arrival. So I will take one Sari and I will go to Weston. I will take one T shirt. So let's take a good looking T shirt, maybe this one, a play suit, maybe this one. And we need one more dress. Just quickly take this one. We'll name this area as play suit, T shirt, dresses, and sorry. Awesome. So double click and Select the play suit. Click Okay, go to jeans. No, sorry, go to T shirt and select the T shirt. Select the dress and the last but not the least, select the Sari. Let's quickly go and change the redirection. I will select this and this will go to Playsuit now. So this is my play suit link. This link will be T shirt The third link will be dresses, and the fourth link will be Sis. Awesome. Just quickly save this and take a preview. This is how our landing page or home page look like. This is our hero banners. We have three hero banner. You can add as much as you can. Then we have curated for you, and we have links for that as well and Z are a new arrival, and we have links for that as well. And then we have a quick footer. Awesome. So the homepage or the landing page is looking good, and we can move forward now. In the next video, we will start adding the dynamic products in all the respective pages which are named by their categories. So see in the next video, people Okay. 51. Ziara Commerce - Pulling Products Dynamically: In this video, let's start fetching the dynamic products to the respected category pages. This is a cord page. So we'll quickly come to the ecommerce and come to the product list and take this product list and drop it here. So you see the products are now appearing one by one. We'll quickly come here, take margin top and four as a standard number. And there we go. So we don't want the product to be appearing one after another. So we'll quickly come to the options panel, and in the layout, instead of least, we'll just make cards, and there we go. So we have all the products in card format now. We will quickly add a container and we'll move this product list inside the container. So taking down the container and taking this product list and pushing it inside the container, so we have some edge over there. So let's have a quick preview. Yes. So products are coming in a good way. We have add to Cat button as well here. Awesome. So moving forward, what we want is we don't want all the products to be listed in this page because this page is specifically created for Cords category only. So what I will do, I will just take a heading over here, and I will add inside this container, and I will rename this page as Cods I will select this product list now. I will quickly scroll down will come to this data source option and here I will select the category and from here, I will just select the women's Cords section and I will click on Choose. This way, only the Cords product which are there in our reflow account will appear here. Quickly take a preview, there we go. We have only three products in the Cords section and the three products are appearing in this specific page. Moving forward, we'll quickly go to dresses and same way, we will take a container we'll take a heading and we'll take product list. Change the layout from least to cards, scroll down, and change the category from all products to dresses only and click on Choose and change the name from heading to dresses. Quickly take a preview, and there we go. So we have the preview of this page, which displays all the dresses. So in a similar way, we have to do for all the category pages which are listed over here. So before we go ahead and start adding the product list in other pages as well, a quick small setting which we have to do in the product link section, is we have to specify after the user click on this product specifically when it will get redirected to a page where the product detail page will come. We call that page as PDP page means product detail page. We have to give a path to that. How exactly we have to give the path will give a slash key first and then name the page where it has to get redirected. That is pdp dot HTML. Then we will add a question mark over here, and then we will add product is equal to curly bracket, open, ID, curly bracket, close, and hit Enter. This way, we define that whenever a user click on this product, to show the product detail page, the website will redirect the user to the PDP page and show the detail over there. We have to quickly go in the PDP page and we have to add the product component here. Before that, we'll just quickly add a container and we'll quickly add the product component inside this container. I'll save this project. I'll go to dresses, and I will go to the preview. I'll click on any of the image, and bang. There we go. So this product is coming now dynamically. Go back, click on this product. This product is coming. So if you click on this image, the image appears like this. Interesting, right? Copy this parameter and go to the cars page and paste it here and hit Enter. Quickly, what we will do we copy this in all the other category listed pages. I'll right click copy and paste, copy two, I will come to multiple, and I will click each individual page separately. So I want this in jeans. I want this in office. Orders is not what we want, order details, no PDP, no playsuits yes, saris yes, success, no T shirt, yes, the setting, no Western yes. And this time, I will not click on this link over here. I don't want the setting to be same in all the pages. I leave this off and I will click on Copy. Now I will quickly go to the pages individually. I think we left Indian, we'll quickly add this component to Indian. From here, I can quickly go and add it on the Indian and I come back. By default, it will come at the last of all the component. We just have to move it and place it right in the center of Navbar and Putter. Okay, so this is only for Indian category. So I'll select this and scroll down, and I will just change this to Indian fashion and I will click on choose. A Indian types are here. Oh, the gens are also coming in Indian. Okay, fair enough. No problem. Let's go to the jeans, take it to the center. And select the product list. Come here and change the category to genes. No product found. Maybe there might be some misplacement in the reflow account. We have to quickly go and reassign the genes to it. Take it to the center. Select the product least scroll down. And this is for office. So office, I think we can assign dresses only to it for now. And yeah, there we go, orders nothing. Play suits, we'll select this, bring it to the center, select the product least component, and quickly go to playsuits. And by the way, we have to rename this as well. Play suits. Then here, we have Indian okay. Then we have jeans here. This one is Office wares, orders nothing. Okay. Play suits, we are done. Then Saris let's bring it here, rename this as SAs, select the product list. Come to the category option and select Saris here and choose. Success is not required. T shirt again, yes, come here. Rename this as T shirt, select the product list component, come down to this category shuffle, choose category area, and this will be our T shirt and choose. Last but not the least, Western WESTERN Western. So Western is a primary category. It's not a child category, so we'll quickly go here and simply select the Western ware and choose. So there we go. All the Westerns are listed over. Awesome. So we'll go to Index page and home will be Index. Indian will be Indian Page, and Western will be Western, which is at the last. Cool. So we'll quickly link the pages. So this Add to Cart button, which we have, this will go to cart page, which is did we created Cart Page? I don't think so, right? We haven't created the cart page. So quickly create the cart page and quickly add the Navbar and the footer to that one individual page. Multiple. Why we have to come to multiple? Because inside this multiple only we have this option to link copies. So we'll click Card Link Copies Copy. Awesome. I will select this button and we'll link it to card. It's coming to Card and there we go. Yes. Sign in signo is by default given by the reflow. So we don't have to create a specific page for this. Okay, so let's quickly take a preview. I'll click on ZR, which is, again, a landing page. Now if I click on this cords, it will take me to the cords. Then if I click on dresses, it will take me to the dresses section. If I click on jeans, it will take me to the jeans. We don't have the products over there. We can quickly go and check what went wrong why the jeans are not coming. So we'll quickly click on setting Ecommerce and Manage Project. Z selected, go to products, all products, and where are the genes? Where are the genes? Oh, the genes are not assigned to the right category. So I will just select quickly. I will select all the genes. I will click on Edit, I will click on categories and I will move the categories from these to genes and confirm. So this way we can see now they are assigned to genes, and if we come here and refresh, there we go. All the genes are now in the right place. Going back, let's see, play suits are now in the right place. T shirts are now in the right place. Okay, dresses are in the right place, again, and saris are again in the right place. Indian, all the Indian wares are in the right place. The jeans are still in the Indian, isn't it? So we'll quickly go back and see this is not actually Indian, so we'll quickly go back and change the category to Western and confirm. Let's go back to the preview, refresh, and there we go. Now, in the Indian, we have only Indian. If we go to Western, now the genes are coming in the Western area. But if you see in the homepage, we have different fonts, but if we click on any other page, the fonts are different. The reason because we have not changed the style to all the pages. If I click body in appearance, if I scroll down, the font is not yet selected to the font which we want to. So quickly, I have to go and change the font one by one in all the pages. Way. Awesome, so we changed all the fonts for all the pages which are there. We may need one or two pages extra depending on the requirement, but as of now, we are good at this place. So let's save the project quickly, and yes, we are good to go. So in the next video, we will create our cart page. Whenever user add the product on card, the product will get listed in the cart page, and that we design in our next video. So see people in the next video. 52. Ziara Commerce - Designing Dynamic Cart Page: Hello, and welcome back. So in this video, we will design the cart page. So quickly, we will take one container, drop in between Navbar and footer. Just take one heading and we'll name this as your cart. And search for card. We have to take the shopping cart component and drop this inside this container. And there we go. I think we don't need this text because shopping cart is already written over here. So we'll delete this and we'll just keep the shopping cart, which is there by default written. Cool. So once this is done, I think now we need two more pages. One is success URL and one is cancel URL. So I believe we have success page somewhere here, yeah. So we have success page, but we don't have Cancel page. So we'll quickly create one more page called Cancel. And go to Index and take the Navbar and footer from here. And basically, you can go to any page and take the Navbar and footer and click on Link. But I have a practice to go to the Index page where I have designed this and copying the Navbar and footer to that page. So we have the Cancel page over here now, okay, coming back to the card, I will select the shopping cart and I'll mention this success URL Es page and scroll down. We have success page over here, and the Cancel page is here. The project is Yara again, and there we go. We are done actually with the card page. That's all. Okay, so we'll quickly design the cancel page and the success page. We'll take a container and we'll take a container, drop here, I will take a heading. I will take a paragraph and I will take one button. I think the fonts are different here, so I'll quickly select the body and come to appearance and change the font. The heading will say order cancellation confirmed in the paragraph, we will have a quick story and this button, we will name it as continue shopping and I will change the look and feel of the button. I will change the style from primary to dark. Cool. This is our cancellation page and similar way we will create the success page. I will take one container. One heading, one paragraph right after the heading and one button. So this will be thank you for your purchase. I think this and this Y and this should be in small case, we will quickly have our story written over here and continue for shopping button over here. You also will change the style to dark Awesome. So let's quickly go to Index page and take a preview. So this is our index page. This is Cards. And if I click on at two cart, it will show me for the products over here. Oh, yeah, and this product has multiple images. So let's go and see this. So if I come here, the product images which are there, it will come like this and I can click here accordingly. And there is one more product right where we have, I think it is in Western Uh, yeah, this is this one where we have size as well. And according to the size, the product price changes. And this is where we have additional thing like add your name on the T shirt. If I click on this, required your name, and I can add my name over here. Let's say I add my name, I add the size, and I click on Add to Cart. The product is now in my card, and if I go to Card store has no payment configuration yet. We haven't configured the payment. That's why we are not able to come in the card page. So I guess you know what we are going to do in the next video. We'll fix this in the next video. 53. Ziara Commerce - Payment information Setup: Um, let's fix the payment configuration in this video. So quickly come to Reflow account and click on the settings and payments. There are options PayPal, stripe, paddle and custom. So if you click on Stripe, it will ask you to login to the Stripe account and it will take all the necessary keys which are there. Right now, I don't have any of this payment gateway account. So for now, I will go to the custom method, which is a bank transfer method, and I will name it as bank transfer estimated time is seven. Keep this message as it is, and I will click on Create. Just because I need a payment method, I'm adding this, you can go ahead and add your payment gateway here as well. Coming back here, if I refresh now, boom, there we go. We have our product in the cart, we can increase the quantity, and I believe we can't go above five, maybe because we have given the quantity limit as five, we can remove the product from the cart. So as we click on the quantity, the price also changes. Oops, there is some error, so I'll come back to one, and there we go. So you see the page turns gray. That means in the background, it is quickly getting refresh. And the new data is coming in front of us, the new data is nothing but the price. And here, if I click on Checkout, it will come here and it will take my details if I am already logged in. If not, it will ask me to fill all the details over here, which is my email address, phone number, shipping address, and any specific note which I want to give to the seller. So quickly let's do this. My email is car@gmail.com. Phone number will be 123-456-7890 and shipping address the name will be Kurn again, address is somewhere in India. City, I can say is Banguru Bengaluru country is India, State is Karnataka, and Pincode is 560-092-0092. Okay. And then it is saying me worldwide flat Rate. Yes, add billing information. It's okay. There is nothing. You can leave it blank if you have nothing. Then, yes, the total cost is whatever, like 1699. I can add a coupon code over here if I have any. If not, let's click on bank transfer, and there we go. I can see the bank information here, and here the customer will see the bank information, the customer has to submit and customer has to transfer the amount here. Over here, if you see in orders all orders, you see the order is now waiting for the payment. So once the payment is done and the customer confirms you that the payment is completed, you can go inside this and change the payment status to mark as paid and click on Confirm. And once the product is shipped, you can again go and change the fulfillment status to Mark as shipped. This information will go to the user via the email which is given by the user, which is this one, this is not a genuine email, so I won't receive any, but the user can see the order details and the order status once they create account and log into the Zia account. In the next video, we are exactly going to do that. See you in the next video, folks. 54. Ziara Commerce - Finishing the e-commerce website: Awesome. So in this video, we are going to create order status page, order details page, whatnot. So quickly come to Bootstrap studio, and let's see whether we have created the order page or not. Yes, we have Order page and order Details page, both. So let's quickly go to Orders page. Take one container and click on Order. So we have order status here and we have user order here. So we'll take this user order component and drop it here, user order, and inside the order details, again, take one container. And take the orders status component and drop it inside this page. And user need a place where he can come and check this. So let's go to Index and right over here, maybe after this Western Oops, take this NAV item, duplicate this and rename this as orders. And we will link the orders to I will select this to our orders page. So now the benefit of linking the NAV bar is, you can see the orders is now added in all the pages. Okay, so quickly go to preview, and if I click on orders, so it'll ask me to sign in. But if we click on sign in, it will not take anything because we have not configured the sign in settings yet. So quickly, let's configure the sign in setting. So let's go to our reflow account, go to settings and click on Sign In. So this is our reflow domain. We can create. You can choose a custom domain as well. We have to add a domain over here. So we'll quickly go to Bootstrap Studio go to publish setting take our domain as Zara dotbss dot DESIGN and publish this website over there. Wait for some time until it's published. Yes, it's published, and click on this now and now take this URL. Come back here. I will type here at Zara. I will click on origin and I will paste this domain here. And click on Save. The key is generated. And now I can turn on this email and password. So what all information I need. Email and password is by default, I need name, I need phone number. If we have any custom terms and conditions page, we can add that terms and conditions page over there. So I will just add terms. Okay, so you can add the pattern also or else you can leave it blank and just click on Save. You have the option for social logins as well, Google Facebook and other. So if you click on Google, it will ask you to create Client ID number and client secret number. Why this is coming as K, maybe I have added a wrong name. Yes, this is not K and save. I don't need this and save Commerce, I can add for now. Awesome. So this is Yara commerce.refloq.com, whatever it is. So refresh this and click on Register because the URL should match, and there we go, email name, password, re type password, and phone number. So I will add the email, name, password, re type password, and phone number. I accept the terms and conditions and I click on Register. Yes, here you need Ori valid email address because it asks for a verification and paste, verify code. And boom, we are successfully logged in. Now let's place and order. So I will go to our special product, maybe, sorry, Western. What shall I order now? Okay, let's order this play suit. We'll come to this play suit. Play suits looks good. Oops, very cheap, 79 rupees only. This price is by mistake. When we downloaded the Excel sheet, right? In that time it was $79. But while creating this project, I changed the currency from dollar to rupees, so it is showing me 79 rupees. Anyways. So if I click on Add to Cart, this product is added in the cart now, and I will click on Checkout. So you see as I'm logged in, the information is taken automatically, the email address is taken, the address is taken. I will just add some random address and city. I will add India over here. I will add a state over here and postal code. And transfer, bank transfer, here we go. Now if I go to my orders, you can see the order is there and the status is pending. This order is pending. If I go to my reflow account and if I go to my orders now, I'll click on these orders. And here you see the paid one is done. Now this is the second order with the actual email address. I will click on here. And just assuming the payment is done, so I'll click on payment is done. Come back here, refresh. Now you can see the payment is done and it is proceed. The status has changed to proceed. I'll come back here and I will change the fulfillment status to shift and I'll click on Confirm. If I come back here and refresh, it says the status as ship and if I come back here and change the fulfillment status to Mark as delivered, and I will come back refresh. You can see the status as received. So this is how it goes dynamically. We can quickly go and add one option here where it will show the order details as well. So quickly go to orders page, select this, select the order details page for the summary and come back here refresh Ops no. We have to publish this because it is now in a subdomain. So we'll select this and publish Okay, the publisher is done. We'll refresh this now. Now you see one arrow over here. Now if I click on this, it will take me to the order details page, and it gives me this complete, brief summary of that specific order. We are done with this series, the series in which we learned how to design a complete, a dynamic ecommerce website where where we can add a product to the card. We can place the order. We can see the order status, and we can see the in depth order status. We have admin panele where we have the overview of our store. Then we have the user list of the store. We have the plans, payments, order. We can add the products, categories, coupons, then whatnot. So, yeah, we have successfully finished the series here and happy Learning. 55. Lets Get Started To E Commerce Website Of Project Four: Let's get started. In this section, what we will learn is like we will create the e-commerce website. And it will be a real dynamic e-commerce website which we will be designing inside Bootstrap studio. And after completing this website, we, I mean not we actually, you will be able to launch this website and start accepting orders. Let's get started. So what I have done is I have created one design, blank Design, and I have named it as a snap card. Snap card will be the name of my e-commerce website. First thing we will start designing the layout and the first and foremost thing which we will be doing is we will be creating a navbar. And I will be taking a navbar, which will be this navbar. And inside this brand, definitely I will be naming snap card. Snap card. And what we will do over here is like we will have two categories. Inside that categories, we will have a subcategory as well. For this example, I am creating two categories. And inside that categories I am creating another two sub-categories. It's up to you how much categories and subcategories you want to create that you can do. What I'm doing over here is I will just select all these three now items and I will delete that. And I will select a drop-down. Ou. I will place this dropdown inside this nav bar. I will name it as men, and I will create one more drop down or I will select this and I will duplicate this, and I will name it as women. These are the two navbars of sorry, these are the two dropdowns. This other two categories which our website is going to have. I will select this, I will click on Open. The first one will be, the second one will be general. And general. This one will be. Okay. So these are the three categories. I will close this. I will come to human again and open this again. This one will be Roadster and general. And this one will be, before moving forward, what I will do is I will go to settings and I will select a different team over here. Let us say lux theme. And I will click on Save. We will get a different font as well and a different style. Inside this you can see a different style is there. Now, let's preview our website. We'll click on Preview. I'll just bring the browser window over here. There we go. This is our dropdowns. Let's select this navbar and click on fluid option over here and open the preview back again. This preview again, and now this is set. After that we can create carousel. I will put the carousel over here where we can slide our images. I'm just creating a layout first, we will import the images and we will start linking it everywhere. Then we will have one container which I will be placing fight below this carousel. And by selecting this container, what we will do now, we will just give a margin, top of margin, top empty, or maybe four will be good enough. Yes, four is good enough. And then we will put one heading, heading and we can name this as maybe what we can name it products. This we will keep it as h3. Reason why I'm keeping this text in h3 is because SEO and yeah, definitely I'm going to tell you that as well in the later section. So all products H3, and after that we can put the products section over there. I think this is enough for now. What we will do in our products section, like if you go to BSS files on, you will find one e-commerce section over there. And if you go to products, and then you go to sliders, you will find three images over here. You just need to just drag and drop it over here. Or if you want to be more organized, just right-click on images, create one folder and type it as sliders. That solve all good and just drop it inside that. Click on, Okay. And just double-click, open the slider and select the first image, then click on Next. Then double-click and double-click. Select the slider to S2 image. Then click on Next. Double-click on this image, double-click on the folder to open that and click on S3, and click on, Okay. And there we go. We have three images. In this. Now we have added three images. Let's go to our preview. Let the page refresh, reload year. Now it's reloaded. And then we have this images over here. Whenever we want to change the image, we have to change it from your only this week cannot do dynamically. Now we will be coming to the next section called all products and you're, what we will do. We will create the dynamic things, minimizing it. And before going there, we have to do something. We have to connect something to our bootstrap studio. Due to that, our website will become a dynamic website. And what we have to do there, we will see in the next video. 56. Understanding Reflow Of Project Four: What do we have to do is click on Settings. Once we click on Settings, just scroll down over here and we have this e-commerce. You're just click on that E-commerce one. Now you have to click on manage store over here. And once you click on Manage tour, you will get this page where you have to name your store. I will be naming my store as snap card. Once I click on one side type this name snap card I have, I have to just click on Next. And once I click on Next, I will be taken to this page. This is showing one product and I have added this one product long back. And this is your snap card. You can add multiple stores, like new store, you can create multiple new stores over year. Reflow is a sister, you can call it as a sister company of Bootstrap studio itself. Once that is done, then you have to come back year. And again click on manage store or it is already a sink, then you have to select this snap card over here. Once this store snap card is selected here, then just click on save. And then for now, we will stop using Bootstrap studio unless and until we add everything to our e-commerce website. Reflow. You can see this reflow dashboard as an admin panel of our e-commerce website. We will go to Categories and we will start creating the categories. What category we have? Actually we have two main categories. One is meant, Sorry, one is men. That is no subcategory for this, I will just click on save and then we will have this kind of page. I will click on Add category. The second one will be women. And I'll click on this woman. Save. Now we have two main categories and in our website also we have two main categories. It is men and women. After that, we have to create one category called Roadster. I will come here. I will click your ad category and I will type Roadster. And the parent category will be men. And they will click on Save category. You can see now inside men we have one Roadster category and then one will be general. We clicking on Add Category one more time and general. And this one again in men category. All category. We won't create any such kind of category called all. But yes, if you want to create any category called all, we can do that. Again, we will go to Add Category and this will be Roadster and for women now, we'll click Save over here. One more category with general for women. And just click on Save category over here. This major categories we have created now after that categories we can create the products. Now, this is the page what you will see in the product section, and we will start adding the product. If you go to our resources. Inside men, you will find this folders where the product photos are there. So just take this one. Sorry, this one, and this one here. So product, I will just click on the product first and this folder name, we can take it as a name of the product. There is info folder over here where you can take this one as a description, like regular description and we can keep it same for all as of now. Coming back to men, this product, and it will take all this product, product photos, drag and drop it over here. You can import a video also if you wish to. Then the price of the product, it will be somewhere around 316, maybe in stock, everything is there. Now we have to select the category as this is not a Roadster when we will put it in general and men both. And we have to put one description over there. So I will just double-click here and we'll take this one. Just paste it over here. And I will just name it as men. I won't be very specific. Just minimize it. If we have like variance, we can create a variance and we have to do that because we have size. So I have to type size over here and add variant. So this one will be small. A small price will be 360. I don't know what price we added over there. So anyways, no problem. And UK is a stock keeping unit. You can put some number and in reality you can put it some. The exact stock keeping unit. Again, I will create one more and it will be a medium. Again, it will be 360. Stock keeping unit SU k will be something and the weight will be like I'm just putting a random wait. One more. This one will be small, medium, large. This will be, let us say, maybe 370. Like we will hike some 1010 rupees over there, stopped keeping stock, keeping unit. One more will be extra large and the scan this will make it as 380. You just remember we have two products with same amount. That is three sixty three sixty three seventy three eighty. Just wanted to show you that. That's why I'm keeping the different numbers over there. The weight will be 0.2. And once that is done, I will just click on Save. You can see we have different sizes over a year now. Any personalization, if you want to do like add personalization, any options you want to do, personalization options over here, you can do it their stock keeping unit for this entire item. Like maybe there might be some stock keeping unit and the weight of the product will be something like that. Yes, that's all once it is done and I will just click on safe product and my product number one ys added. There you can see the product one is added over a year. Now I will click on add product one more time and we'll add the next product name. This ad is that Notepad. Here it is. This is the notepad. I will copy this and I will paste it over a year. This product images prices will be fine. 99 category again, it is a general category and I have to write something here. I'm writing it like men and variance again, it will be size and it is not like once you create one variant, you cannot create multiple variants over there. You can do that multiple variants like colors and all that things. And recently, recent variant which we have created is this one. And I will just click your copy. And that's all, like, I don't have to do all the things back again. But only after do I have to keep my eyes on the product price or else it will be a mess. So phi 199599 and maybe this one will be 649. I will do one product will be with a different pricing, and I'll just click on save. And that's unlike these two things, I can leave it blank because you already know that. Now in the third product, what I will do, I will go to Roadster. Now, I think it is there only this four products are there which are Roadster. And I will just click on add product. Now, this one will be named as Roadster only. Something like, let us see what is the product color over here. Like Roadster, half t-shirt, maybe. Something like that. Half T-Shirt. Regarded as half sleeves. So I'm just naming it half t-shirt. Just copy this description. Put it here, select this image is drag and drop it over here. This time the Roadster, the price may be 999 or maybe 899. Now the category will be men and Roadster. The general is not there, it is a Roadster brand. Now. This one we have to put there. I'll put this, whoops, copy everything. If it is there something men in variance again, these are the variance which we have, then I will just copy this one more time. This time this is how much it was like 899. Then. Ninety nine. Ninety nine. Ninety nine. This time I'm putting all the price as 899 only. And we'll click on Save and stock keeping unit. You can put anything over there and the weight of the product and just click on save. This way what you can do, you can add the products, whatever products you have over here, you can add it. This is Roadster. You can name this brand with the same name multiple times because we have a different photos over there. This all Roadster. We can put it on Roadster category. And this one, you can put it in general category. And after that you can add the products of women. Again, we have Roadster over here and general category over here. What I will suggest you is you upload your products over here first. And then we will see in the next section what exactly we are going to do that. But you have to upload the products or else you won't be able to follow me that precisely at the products and see you in the next section. And I will also add the products and see you in the next video, actually not this section. See you in the next video, guys. 57. Lets Make Our Website Dynamic Of Project Four: Okay, so we have added altogether 17 products. So if you go to overview, you can see we have 17 products altogether, including men and women general. And what do you say? Roadster category? If I come to products, again, you can see all the products are over year 17 products are there. And now let's see how we can bring all these products to our bootstrap studio e-commerce website that is snap card. So coming back to bootstrap studio over a year now, we have set, like we have typed here, like all products. So what we have multiple options. So what I will do over here is, instead of all products, will name it as, Let's see, Woman product. So just type woman product and selecting this container, I will come to the e-commerce section, where you can see this e-commerce section. And the second component is product least. Just take this product list and drop it inside this container. As soon as I drop it inside this container, the products come over here. And now you can see both men and women, both the products are already there. But what we want is we want only a woman product and we won't want in this list view. We want it in a card view. Actually. What we will do here now, what we will do, what we will do, we will select this product list. And as soon as we select the product least in the options panel, we can see now we have a different bunch of options over u. First one is layout from ListView, we will shift two cards view, and there we go. Now we have a Cards view. You can see the product photos, are there the name of the product? Then we have some details over here as well. We have order by order by date ascending, descending the date on which the product has been added, the name, alphabetical order, price in ascending and descending with so as often we will leave it as it is. Then we have page like number of pages and then or pH, like how many products we want to show per page. We'll leave this two options blank because we just want to bring women's product over here. Then we have product link and all of this lesson we will see one-by-one over there. We have store like definitely this is a snap cut. If this product is not from Snapchats, we can change the store over here. If you have multiple stores over there, then we will come to categories. So I will just select this all categories over here. Before that we have used mock data. If you don't have products, then if you turn on, turn this on. We have mock data over here, which we don't want to use, so we'll turn it off. And then now we will go to Category select on all category one, category option will come. And what we want over here is human products. So we will select this and we'll select on women. We want both general and Roadster. So we will just click on women and I will click on Choose. So as soon as I click on Choose, all the men products are gone and we have, You're like all the woman products. So what we will do, I will just select this container and Control L will be labeled. And this I will name it as women, woman products. And I will click on set, this label. I will be understanding this container is for a woman products and now I will just do one duplicate that is Control D. And this one is there now. And now I will just label it again and name it as men product. I will just click on set here also instead of women, I will just take men, I will just remove WO from there. And now coming to product least, we will just select over here. And now from human I will select men and choose now all the men products our ear. Now if we see the preview of our website, if you come to snap card preview, now you can see we have the woman products over here, then we have men product over here. And this dynamic products. Fair enough. Then we have this one now, Roadster general and all we have to create this page. Now. What we are going to do is come back to bootstrap studio. And we will create one new page over here, that is HTML page. And I will name it as productive. Just click on Enter, double-click here. And take one container. One container and then give a margin top to it, margin top four. Then take a heading. Name it as what is this min this as products. I will take product list or you drop it inside this container. From you, I will take it as card view. Scroll down the products which I will be taking as men products and just click on Jews. This is a main product list. All the men products or that way we will do multiple things. So before that what we will do is we will create sorry, we will create one more page or your product details. This is a product details speech. And coming back to our e-commerce section, this is a product. This is the, this is the component which we are going to use. And before that, again, I will do. I will take one container. As usual, I will put margin top four to eight. This product details page or will you for now, what I will do in just select this product and I will click on the Choose. So I will have this information over here. This is the data like we have images. And if I come here, you can see page one is there now. I can see multiple products. And if I click over here, we have this nice and beautiful gallery, photo gallery. And this again we have multiple sections and we have now products to be added in the cart. And then we have the sizes as we have MDD over there in multiple sizes. This is one option which I have done in personalization, that gift packing. If someone wants us give packing, just check this on and add the name of the person to whom, sorry, whom. We will just turn that to whom you want to give. The name of the person will be there, and then it will be one. Then the user will click on Add to cart. Moving forward what we have to do, your ys product details page. We have to go to product details page there. Instead of fixed product. And instead of C in the data source, product type is fixed. We have to click on dynamic over there. This is the page where we want to bring the product details. Go to the Rename option and I will select the name of the speech and I will copy this page. That's all in this URL parameter. I will just type this URL parameter. When we are in the product component, this URL parameter will be the same name of that page. It means like it is a product details page. So I'll just paste this product details over here. And I won't put any dot HTML and all in this place. And URL parameter I will just type product detail. I will go back to product men. I will select the product list over here. And in this you will see one product link option over here. What gear you're, what we have to do is I will first put a backslash. Then I will type the name of the page on which I want to redirect, and that will be the product details. Your I will type dot HTML because I want to redirect there. I will put one question mark over here. Then again, I will type product details. And this product details is the URL parameter which we have set to this particular page. And after that URL parameter, I will put one equals sign. I will put the curly bracket, the opening curly bracket, and I will type ID inside that. Don't get confused over here, I will explain you what exactly it is. We have written product details dot HTML. This seems like if we click on this product, any product, it will redirect to this page. That is product details dot HTML. And that is this speech. After that question mark, we are putting a dynamic section over here. After a question mark, what the product details page will show is like product details page will fetch the ID of this product ID and that product will be displayed on this product dot HTML page. It is as easy as it looks. It is that simple, okay, the first one is the product page and then product details is the URL parameter. And the id is the product ID which the system will automatically fetched. Now I will just click somewhere else, coming back to the web browser. I will go back one step back, and this is the product list, everything just, I will click on this product to show you. Once I click on this product, you can see this product is opened with the name cost, the sizes that the count Add to Cart button and other things as well. I will come back over here and boom, we're back to our product page. But coming back to bootstrap studio, I have to select this product least. I will select this one. I will just copy it. Go to the index page, scroll down. I will select this product list item over here. And I will paste this URL map product link. And I will just paste it over you. If I go back to my web preview now, it will take me to this page automatically. And if I click here, it will take me to that page. This is the product list and now it is a dynamic one. Now the dynamic section is started. I hope you are a bit excited to build this particular thing. If you have any questions, anything, you can drop me the question in the question section. You can join me in my Discord channel. I will show you that this is my Discord channel, and the invite URL will be this one. You can type this URL and you can get connected to me on my Discord channel and we can discuss a lot of things over here. So coming back here, we will go back to our bootstrap studio and now we have to create one more page for women. So I'll just duplicate this one. Now I will type women. Just double-click over here. I don't need to do anything else because everything is set, the URL and everything is set. I just need to come here and change the categories. And this is a woman now. And I'll just click on Choose. Then I will just duplicate it two more times. The woman and woman dash. General. And this one, I will just remove two and Roadster. Double-click, you'll come to this product list. And from women, this is general, so I'll select the general one and I will click on Choose. So these are the general products. And coming to this one now is select all the Roadster products, Razr category, and I will click on juice, so we have only three over here. Then we have to rename this also. Actually doesn't matter, but the spelling should be right, Right? Roadster. And no general, I will select this one. Men will click on General, choose, then go into roots to select this, and then click Roadster. There we go. And now coming to index page, now we have to link it. Just open this. I will select Roadster. Sorry, where is the URL? Select this page. And then first one will be men, product men Roadster. Then second one is general, beach product men in general. And if you click on, it will be only product minutes. Close this one, open the woman, select the Roadster, URL. Then productive women Roadster, general. Women general. And in all. And just go to women product, product, a woman dot HTML. Anyone close this? Yes, we have this section done over here. And now in the next video, I think it is a long video. In the next video we will create other pages, like Add to Cart and all. So see you in the next video, guys. 58. Shoping Cart Page Of Project Four: So before moving forward and create our other pages, we will go to our reflow account first. We will start doing, start doing some genius in the setting. So first is general setting. And in general setting we have the name of the company like the snap card and the currency which we are going to accept the orders. As often I will just keep it USD only the measurement. It will be like cagey and centimeters and all that things, terms and conditions, privacy policy, refund policy, and the main email address where we want the notifications. So I will just change the email address to my Yahoo account. So in this page I have just changed the email address. Then I will click on Save over here. Moving forward with the taxations, we will add taxations if we have any. Let's say if it is the United States and will create a United States over a year, then select select tax rate and it is excluded you or includes you. So we will put includes you tax on shipping and allow tax and everything. I will just click on save the tax rate registration is updated. And then we can go to add one more country and let's say type India. And I will click here. So the tax rate over here is 18% per product. The tax number, it can be anything f7, G, B, D 12387. Sorry, FFT GB and VAT number. It will be like DCP pk 1122348. And all the product are interior includes you of tax and tax on shipping also, and we'll click on Save. This way you can add the taxations based on the country in which you're shipping the products. Then come to this shipping area where other locations and all that things are there. You can just click on Edit. This is by default it is there. And worldwide flat rate option is there. Then you have to edit this one also, this is worldwide and it's a flat rate and everything. So yeah, this is cost is free and now we have to go to the other area. Let us say it is like India. Indeed, Bye. India. I will type like, let's say type as free shipping. Free shipping. And in the countries like United States, then let's say Australia. Australia, and India. Whereas in India, India, India, India, in India. This three countries are there. These three countries are there where I'm offering the free shipping. Free shipping is there and then add method. It will be like free. Delivery. Label will be free shipping. And total value order. It will be 0 always, and I'll just click on Save. So this is how it comes. Free shipping and save it. If I click shipping, let's say in India, There might be, let's say Canada. It's a page shipping over their ad and it's a flat rate. And label is shipping. Base cost is nine USD and four kilo, it will be $1 per kilo. Let's make it $2 based shipping. Let's make $1 per shipping and $2 per KG. And I'll just click on Save and I will make it safe. So these are the shipping methods which we have created in other locations. If I go here, it is like other location. Edit. This flat is already saved. I cannot do anything over here because it is free only. This is by default option. And now coming to the payment option, we have three payment option. One is PayPal stripe and custom method, not customer. In PayPal. We will we will do two things, PayPal and custom because tribe, I tried doing it but it is not allowing to change my country to India. Actually. You can try stripe you if you have two Stripe account, if you click on Stripe, it will connect to your Stripe account and then it will do some process. And it is automatically it will connect your account after verification of your account. After verification of your accorded will automatically connect to your account over there. But PayPal and customizable liquidity, easy. We can do it very quickly in PayPal. It is just like open it, add your email address and click on Connect, and that's all. It is connected. And custom method is like whatever method you want to add it can be, you can add over here. So I will type B wire UPI, UPI in India it is like payment method, Unified Payment Interface, something like that. This message is custom message like thank you for your business to complete your order, please send a bank transfer amount of or I will type please. Please transfer the amount of this is the amount. Wire UP in bracket. I can type Google b comma comma, comma, any UPI. Instead of this company name, I will type my name and I will type my UPI ID. And I will remove these two lines. I'm typing of fake UPI ID over here. The UPI ID looks like this. It may be like full number. The rate, why BL? Yes. Important include your order number, order ID in the subject so we can connect the payment, your order and just create it. That's all this to payment methods. I have created this PayPal. If you're watching from India, this PayPal is not working in India because they don't have a support in India. Stripe has a supported India because in our platform called Classroom.com Kw ET classroom.com, There we are using Stripe and it is working absolutely fine. But I don't know in this system the stripe is not working, not working as it is not allowing me to change the country. I'm using this PayPal and pay via UPS just like a custom method. And let's see whether it is the option of adding any image or something like that. No, we don't have any option of image and something. I could have added the QR code of UPI over their general taxations is also done than shipping and payment is done then yes. Okay. Let's create a coupon code over here. Like I will click on Add coupon and I will type a coupon is like 20, sorry, not 24% discount on all products. I can give a description here. 20% discount on all products. Or maybe for next five days. For the next five days. And the code will be flat 20. It will be active code, it will be in person, teach. Discount will be 20. And then see if coupon will create one more coupon. Like flat 60. Get flat. $1.60 will make because we are using, we are creating everything in dollars. Flat $1.60 discount on all products. By using flat 60 coupon. Flat, the flat. The code will be flat, 60. It is like a flat amount. It will be $60. We have two coupon codes. One is flat 60 and when e is 20%, okay, So it isn't shown here. It is a percentage and it is a flat. Both are active, 68.20, and this is the starting date. You can create a number of coupon codes over here and we can proceed with that. No categories we have already seen products, orders and overviews we have seen. Now let's go back to our bootstrap studio. Year. We will create a cart page now. Just right-click year New and I'll create cart page. To get access to the cart page, I will create a button over here. And before that I will just select this nav and duplicate this nav. Inside this nav, we have to drop down. So I'll just remove both the drop-downs from there at all. Basically, I don't need a Navier because I'm taking a button, right? We'll take a button and put it inside this collapse. And I will name this as card or maybe I can put an icon of card over there. It'll take icon, just drag and drop this icon over here. Double-click on that icon and just type cart. And we have guards over you. So which card we can take this card. Yeah, cool. Then I will remove the text from here, that is card. I'll select this button and I will align it to end. So it will come here. We don't have any login system, something like that because it is like a guest checkout. Like anyone can come they went select the product, they can add the product to cart. They can put the information and they can order the product. We don't have a system called what do you say? Like logging and all that things. Okay. Here we go. We have a card button over here and we have categories over here. If I scroll down, Yes, it is there. And if I go to men's product product details, actually, if you go to product details page, so what we can do over here, right now, we have this much only will just duplicate this content or one more time and delete this products. From here, I will go to my e-commerce, will take a product list and put this product list in the container. So we have somewhere around how many products, like 17 products we have. Select this product list and instead of least I will bring it to cart. Year. I will put it as price ascending the lowest price with the lowest price, and then we will increase the price. Per page means like C, we have altogether 17 products here. But let's say if you want to show only limited products, let's say like eight products or something like that. So what I can do is I will just type it and hit enter over here. Then we have a pagination, like automatic pagination. And page is one. And we have one page. We have this much of products. Now what I will do, this product link we have to do, right? So I will just come to this men's and click on this year. Click on Product least, we'll just copy this one. And coming back year, I will just select this and paste it there. It is like a show image name then show show excerpts, price and pagination. So yes, definitely. We have pagination. Then we have to show the pagination. If you want to show the price, then prices their oral so you can just remove the pricing also, but I wanted to show the pricing it's on you. You want to show it or not it completely up to you. Descriptions, size, and all that things. Yes, it is there. Now if we are going to cart cart page, like if you are coming, coming to cart page, then we will create one container over here. I'll just take the container and as usual we will put toward margin top four to that container. And your I will just close that coming to e-commerce whereas the e-commerce Yeah. Add to cart is there. So I'll just drop this on. No, sorry, not add to cart. Actually shopping cart. This is the cart page where we can see like shopping cart and list of the products, whatever we have added, that at least of the products will be here. If you select the shopping cart, we have two pages. One is success URL and one is canceled URL. So what I will do is I will create. What do you say like a page. I will type. Success over here. Nothing means like whenever the product is order successfully, where it should redirect. So it is like success page I will take container as usual. Margin top four to it. Margin of four. Then we will take icon. I am just trying to avoid to take anything externally. And maybe. Thumbs up. Thumbs up. Weekend take. Welcome to appearance, will take a green color to it because it is a success. Then coming down to font size will increase the font size. Everything I'm doing inside this div, inside this container. I will take you have successfully. Pleased to the order. Then paragraph will be inserted. This continual tank you for shopping. Again, exclamatory mark. I'll take one button, the button inside that and I'll type. Keep shopping. One more thing we can do is let's say I'm taking one more Heading over your only for you. Or maybe I can say flat $1.60 on all products only for you. So we can use this discount over here. Maybe we can take it inside a paragraph in this way. Flat 60 is the discount code, which will be an h4. Again. This one, we will take a margin of five. This seems like flat $6 off on all products on your next on your next order. This way, what will happen on the next order we are offering them are 60% discount. Let's take it to center. Also will come to flexbox. Take it column, body, center. It sees like thank you. I think we have to put a margin bottom for over a year. Now it seems like you have successfully placed the order. Thank you for shopping. Keep shopping and flat $60 off on all products on your next order. Only for you. Then use the below coupon code. That's all. Save it. Same way we can use this page four. Cancel. Cancel because carton need the cancel page as well. In cancel, we will use this thumbs-up as a sad face, maybe. In appearance we will change it to a red color. It sees something went wrong. Try again, keep shopping. And it says like after your first order, you will unlock a coupon off for your second order. Okay, So coming to cart then, selecting the cart option and coming to options, we will select the success page over here. For the cancel, we will select the cancel page over here. Rest days it in Good. Everything like product details is good. Then Men's is good. We have to transfer the navbars to all the pages. So what I will do and select the navbar right-click Copy to multiple. This is the main option like link copies, select to All Pages and then click on Copy. We have some pages also like terms and conditions and all the things that we can create it later. It's not like we have to do it now itself. Then we have to take this one-by-one on the top. Actually, we can just remove this one from here. Only from Cancel and success. Only from counselors successes, we can remove that navbar. But on all the other pages we have to put that. 59. Lets Finish It Of Project Four: Now, as we have linked everything, we can put a logo over a year or something like that, and then we can use it. Anyways, we want, we have cart, and if you want to add multiple categories, then we can add that categories as well. Yes, I think that solved. So what we will do, we will publish this. I have created one separate domain for it that is snap card dot bss dot design. I think you should know how to do that, but still I will tell you one more time. Click on Publish over here. Not published, actually. Click on Manage website. I have created this one, but still I will just tell you like click on Manage website and then click on Add website, put the name of your website where you will get a subdomain and you have to tell when you want to delete that never or something like that. We want to put a password. You can put a password and then just click on Create. And then your website will be created here like snap card dot bss dot design. And I will close it. And then I will select this snap card dot VSS dot design, and I will publish it. Now the published, it is published successfully and I will click on this one. It will open my browser and boom, there we go. Now this website is live. You can go and have a check. Maybe, maybe I can delete it in future, but let's see, go and check. We have our carousel over here and then we have our woman products. Like it's too expensive. 77, $700 thousand dollars. Like it is like as good as the iPhone. Yes. Then we have all products for women. It is menu. In general, it is a woman, then it is women URLs. Well, in men's we have to change it. Woman's all. It is. Woman. And I will publish it one more time. Coming here, refreshing this page. Now you can see slash product of women HTML. Is there your life? I click on this product, you can see this coming. Absolutely fine. We have other products which the pagination on that. We can see the products also here we can click your lightbox. We can see this super awesome. And click on all Roadster. Everything is set. And then just click on this product. And $20 for a gift trap. Actually, I was planning for a rupee, But nowadays in dollars. So let it be, it isn't test mode only flat 20 year, we can see 20% discount is already there on some products that we have mentioned that let's do one thing. We'll add this product in large size and just click on Add to Cart, like product added to cart. Select this and cart URL. I will add the cart oral URL over here Is card dot HTML, and I will publish it one more time. And then if I come here and if I refresh this Add to Cart, and then here you can see like C card option over you. That is the same button over here also, I think we didn't link it. Coming back there, we're going to index page and selecting this button. We'll click on Link and then we will go to this page called cart, will publish it again. And we're also going to save it. Going back to this one and just refresh it. One more time. We will do that to cut. It is going in cart again and again because all the three times I have selected different size. Let's see one more largest order to their medium. Select here. And if I click on see cart, you can see in card we have this large, small Excel and this one. And even if we click on this one, it is going to come. You're only because this is a card page. Then I will just click on remove this. Remove this and remove this. Yes, this is seven ninety seven hundred forty nine dollars which we are going to pay. Shipping and taxations are calculated during checkout. When we are going to check out that time it is going to calculate the rest of the thing. Okay. So as it is, we don't have a login page, so you will be asking like how exactly it is saving the card. And the answer is it is saving everything in the cookies. So we'll click on Checkout button over here. Then you can see like order summary, you have this order and this is the price, the quantity is this much, this one like go back to cut one more time and will increase the quantity over here. The price is now one hundred, ten hundred and four hundred ninety eight dollars and checkout. You can see two items. We'll do one more like we will go to Roadster one more time and we will select this product or maybe we will go to the general one. And we will select this one. And With the gift wrap and I will put my name only year I am gifting myself as it is. And when you click on Add to cart and then from your eye will go to cart. And then you can see this is a woman large with two quantities and this is like extra $20 for that and altogether $2 thousand is there. Then I will click on Checkout. After checkout, what we can do is we can add a coupon code, which was flat 20. We are not using flat 60 because we don't know as a customer because we have not placed our first-order first. Apply. And then you can see like $20 of 20% discount is added, which is this one. Then I have to type the email address as a customer. So I will add this one and put a random phone number. Put the country as which country was having Canada. Canada was having forced to look or I don't know, Let it be India only. I don't know the postal code of Canada. My roster and node six is the pin code. Then note to seller is like, please make good gift. Back. Not wreck back. To click on. Next over here. We have like PayPal and debit card payment. In the bottom we have this option called PYY UPI. Payment with instant payment is always a top and this payment is in the bottom. Okay, so let's add the information of shipping address. This one. And I will take this city. Neon state India. Roster pin code will be 424213, node six. This is some this is the actual address, but I have not staying on his address. I don't in mind showing you this now, Kyi UPI only. Now this is done. I can see like all prices in USD. Now if you go back here and click on orders, like you will find some other orders as well. But this is the order which we place to recently. This is the email address than 1.60773. You can see like 177.3.60, you have to open this order and select as marked as paid. If we refresh this. Your shopping cart is empty because nowadays is paid. Okay, coming you're like go to whom Nil mil year. You can see now the reflow is there with the order is seas like reflow or to Roadster with this price and roaster size with this. Personalization is gift packing is the name of the good packing will be current, and this is the tax amount which is $270 and it shows like C order. And if I click on See order, so it shows me this order which will say like marked as shipped and all. I have the contact details of the customer now with the phone number. And also in that way, I can be in touch with him. Again, literally marked a shift. And marked a shift means like send e-mail notification to customers. So definitely, yes. And I will type your order is shipped. Click on the link to track your order. And the link will be, right now I'm putting my website link through awesome.com and it is not you. It is your I will just click on confirm. What is the e-mail? That e-mail only on that email, I should expect. One more email. Should I expect or should I forward? It is reflow. Now it sees like you snap card has shipped to your order. Your order is shipped. Click on the link or click on the link to track your order, but it is not showing a link. I think I have to copy and paste that. As a UC as a customer, I have to copy and paste that. So yes, this is how it comes like reflow your order is shipped and all that things. It comes over year. That's how the order is shipped. Successfully. Updated, dismiss Yeah. Yes, Guys. This is how we will be doing our e-commerce website. As of now. For this e-commerce website, this is done and we will do some modifications in the scripts when we will be coming to the SEO section. In SEO sections we will be doing some changes in e-commerce and as well as in some other websites as well to make it SEO search engine optimized where Google can find our website easily and that we will do before we, before we host our website on the real server. Definitely we are going to host our website in real server. So at that time, not at that time. Before that, before we host our website, we will be doing some modifications in the website in the script section, like right-click Properties, title description than OG, like Open Graph, than Twitter, then Meta tags. We will be adding some Meta tags and head content as well, like convergent trackers by using Google Analytics and all that things will be adding the convergent trackers as well. So we'll be doing that in the later sections. And that's all guys, the e-commerce section in Bootstrap studio. Whatever the version is, 5.9 or whatever it is, then we have computed the e-commerce section by using Bootstrap studio. And now you can also do your e-commerce website. Instead of products, you can do anything. You can sell the products only, but like a virtual products or like a physical product, virtual products like once the order is placed and the amount is collected, you can send the link for that virtual product where the user can download that and they can use it, utilize it, use it whatever it is. If it is a virtual product, you can ship the product to them and that's all. Okay guys. So that is it for now. And the e-commerce section is completed. And in the next section, let's see what we will start inbetween something comes in memory and we can do that or we can go with SEOs then. Okay, then, Thank you very much. And that's all for this section. 60. Lets Get Started With SEO: Hello and welcome guys in this new section called SEO, that is search engine optimization. In this series or in this section, we will understand about how exactly we are going to optimize our website using some techniques that is called as search engine optimization. There are so many things which we can do that I will give you the best things which we are going to do by using Bootstrap Studio application itself. As you can see now, the bootstrap studio virgin ease, virgins 6.1. If you see there are not much huge changes, even if you are using this tutorial is done from bootstrap 5.6 something and then it is coming to watch. And six, there are not much drastic changes in that. And down the line when you're, when you are going through the course, you will notice that there is no much changes in that. Yes, you will find not big changes, but like small, small genius out there. But anyways, that is not going to affect our course. And what exactly the changes are there in this particular version that you can see like if you go to our website keyed classroom, Udemy, or wherever you are watching this video. So just search to my course. Right now it is here, maybe down the line, it won't be there. So even if you can search your call BSS and click Enter, you can find this course over your attributes 399 at this point of time when I'm recording this video. So it may increase or decrease, or this website website continuously gives the offers as well. So I'm just clicking on this Gore's and if I scroll down and I come to curriculum, you can see Bootstrap studio version updates. So I create videos exactly on that topics which are updated in Bootstrap studio and which may not create a big change here and there. So that is how we are going to do that. Okay? I'm closing down or maybe minimizing that particular thing. And for understanding the SEO section, what we are going to do is we're going to use our tech Resolve website. I will open that website in Bootstrap studio. And in the recent design, I will just double-click. And there we go. We have the website ready here. Then we will start doing some SEOs. But before that, I will give you some basic understanding of ACOs and why we have to use SEOs in our next video. See you in the next video, guys. 61. Basics of SEO: Okay, welcome back In this video again, and we are talking about SEOs. Let's go to our website. Let's go to kid classroom only. And I will show you one thing in Google. Let's say we are using Google search engine. If we are using search query called keyed classroom, as you can see it is there only so cute classroom and key classroom YouTube channels. So if I just click on keyed classroom, you can see our website, keyed classroom is coming on the first page. Then we have this information called this is a business information infograph also we can call it as it is showing kid classroom, our website, the link, the URL of the website, then it is a LinkedIn website, then this is a YouTube one, then this is a Facebook. Then Spotify if some podcasts is also there may be then Instagram, then there is some company in full company details. And then we have a Twitter account and aspirin, so like so on and so forth. So how exactly this particular thing game in Google Search and Google understand that if someone is searching for this particular query, then I have to show this results. Let's say for example, I have searched for kid classroom multiple times and I have visited this website. That's why it is showing in this particular color. So best way of doing that E is go to incognito mode. That is private mode, that is control shift. And if you press in any browser, it will come to in private browser mode. Here we will search for Google first, let's say google.com. You can directly search here as well. Four key classroom, it is not a big deal. It takes you to the same page only. Lets search your because you are it won't show any details or something like that. But you're also, you can see kid classroom course on demand and whatever it is there it is coming on the first rank. So how exactly we do this? Let's understand. There are three things guys, in this particular place. This area, which is there, sorry, I will select this one or I will just make a red area around this. So let me try to select this or not, I'm able to select this. Anyways, you can see this particular area. This is called the domain section that is https colon slash left-skewed classroom.com. And it's the arrows less public. It means whenever we click on this, it is directly redirecting us to a particular section or folder or something like that, which is stored inside the public folder. Also, we will see when we will take our server and domain. Maybe that is going to happen in the next section. Okay, so this is the first one is always the domain one. Even if you can see here, this is a LinkedIn, this is a YouTube, facebook.com, this is an open.spotify.com. First section is a dominant. And as we are searching keyed classroom. So there are two things which you can see that his kid classroom.com is one domain name, the first name, which you can see over here. Now I can select this in blue. This particular like Baldwin, which is in the blue one. This is the title of that particular page, title of that index page, where we are going to land immediately when we click on that particular link. So let's say for example, if I click on this particular link, it will take me to a website page. That page title will be this one. Exactly this one. This is a title. And then if you see this particular area, this is a description of that particular website page, not the complete website, that particular page. So did the description of the page. In that also you can see this particular area is bold. That is KID classroom. Near kid classroom is bold. The near kid classroom is bold. This is bold because keyed classroom is our search query. If we search something else and still this website comes. And when our search query is different, that time it will take us as the bolded section will be something else. Let's say for example, if I search for keyed classroom bootstrap studio. Now you can see it is good classroom.com, Course Details and course then bootstrap studio, whatever the link is. But you are, you will find there is nothing bowled over here. The reason behind that is in the description of that particular landing page of that website, there is nowhere written called as maybe keyed classroom or bootstrap studio, something like that. But in title you can see it is Bootstrap studio tutorial, virgin 6, learn and whatever, whatever, whatever, whatever. Okay. So these are the pages. This is the title. This is a description which you see, except this two days ago, whatever it is, the description starts from here. This first one is the URL or maybe the link of that particular page, which we can see year when we go to that particular landing page. Let's click on this link and let's see where exactly we go. So what I will do, I will, I want to keep this page here only so that I can come here and go back and forth to show you how exactly it is there. I will just come to this particular link. I will right-click and I will click on open in new tab. It will open in this new tab. I will go here. Let's see. It is taking some time asking for weight Forky classroom.com to respond. This usually happen when we are browsing in a private mode because most of the time, but they do means the company. What they do is they put the website in protected server and that server, when they retrieved data, it seems like it is in private mode. So they see like is there any suspicious activity happening in urine? They're incompletely like that. I will just refresh this so it is coming something like this. So you're, you're also, you can see you are pk facebook.com, and there is, there might be some video related to Bootstrap studio, and it is showing that the bootstrap Studio 5.2 as well. And it is taking kid classroom as well. Here we go, the page is loaded. Now you can see this particular title, bootstrap studio two-tailed version 6, learn Bootstrap studio. You can see that title year, but after a sometime there is a dot, dot, dot and dash q classroom. Okay, so why this is happening? The main reason is Google search or Bing search, or like the popular search engines, what they do is they allow 60 characters, including space for titles. You as an individual, we can put a long title as well. It is completely up to us, but this one, it will be 60 characters only. Because the users who are watching this particular search queries and all Google don't want to confuse them by throwing multiple lines in one line they tried to do it. One leg means in the web, website like desktops and laptops, in one line they tried to do it and it will be always 60 characters. So you can see the title of the course is written. And how do we know that this is the title of that particular page also, I will show you that as well. This is the description of that particular page you can see like Bootstrap studio tutorial for beginners, blah-blah-blah. In this course, I have given a focus like blah, blah, blah. Now let's see how exactly we will find what is the title and description and title of the page and Yeah, title of the page is also in this particular tab. You can see if you just take your mouse pointer over there and just put it there for a time. There will be a drop-down or maybe a pop-up coming there, which will show like Bootstrap studio tutorial version 6, learn Bootstrap Studio dash a straight line and Kd classroom. The title comes here as well. Whenever you are using the browser in desktop or laptop, anywhere in a bigger screen sizes. This is where the title comes. Now let's see in code how it is coming. We'll just, we'll do a right-click over here and we will see View Page Source and the keyboard shortcut is Control Plus you. Just click on this one. There we go. This is a complete code behind the website. And let's see what is there. There are some metadata's are there. They have Google Analytics or Google Fonts, something like that. And you can see the title over here. There is a title tag. And inside that title tag, the course title is written. And then our Meta metadata. Metadata is like first one is keyword. So whenever someone searched for lips and Bootstrap template, bootstrap studio alternative bootstrap Studio, GitHub Student bootstrap Studio license, key license or whatever. These are the keywords, which instructor? It means me. I have triggering that particular keywords for that. And in case the company also can add few keywords from their site which they find. It is useful so that it can pop up in the search result. This is a description. Description comes here Exactly. You can see this is the description nobody showing version 5.9. Very soon I will be changing a description as well. Then there are Twitter cards and all you can see Twitter title. So Twitter title is when we share this particular page URL on Twitter. Twitter will fetch the title, and it will show the title on the post as well. But Twitter won't fetch the title from this area. So Twitter will fetch the type that Twitter will first find, whether they have Twitter title and Twitter description or not. If they have, then it will come, it will fetch the title from your, you're not this title easier. Twitter will federal description from you. An OG is like other social medias and unlike Facebook, then whatever Facebook, instagram or Quora, anything, they will fetch the title from OG. This is where the title is going to take. This is where the title, this website is going to fill the title. Og image is what image? It is going to show this image like a thumbnail or something like that. This image can be taken here. And then they have a particular set of script year with cheese. Maybe I think this is some Google Tag Manager or something like that, which from there they will be able to track the user behavior and accordingly they will, they will be improving the website and all. Okay, So this is the only thing which is very important for SEO as of now in this particular course and in this particular section, Let's see guys, how exactly we are going to do in our bootstrap studio. So enclose this, I will close this as well. And I will close this private mode. Let's come to our normal mode. Go to bootstrap studio, and let's preview this website first. I will preview this website. Just click on preview. And there we go. We have this, you can see this title is your take results. And yes, the title is there. And now let's see our source. In our source you will see meta-information is only this much. There is no keyword, there is no description, there is no Twitter description, there is no OG description. Would your title nothing like that. Only thing we have is like title and that it is just about tech results. Nothing else because we have named the project as tech results, so it is coming only as peck result. We have to take our title in such a way that it will come at least in, let's say like first page of search results. How exactly we are going to find a perfect title and description and keywords that we will see in our next video. See you in the next video, guys. 62. SEO Setting in Bootstrap Studio: Okay, welcome back. In this video. In this video we are going to see how exactly we're going to find the title. This is our website. And according to the design and the information which is there in the website. This website provides website designing and development services. First thing what we will do again, there are a few websites to find the keywords and all but what we will do, we will directly come to Google first year, we will type website design. See what it is coming. No website design company in Bangladesh, right now i in Bangladesh showing Bangladesh. So we'll just click on that search query. And the first thing we just coming is add because see this AD ADATs there. You may know that. But still I'm telling AD is advertisement. And whenever there is no AD before this HTTPS, it means it is a direct search. So in AD like search, we will just keep this advertisement part and we will come to a direct search section. And you're the first W3 dream school website designing company in Bangladesh. I will just click on this particular website and this is just hover my mouse pointer over there and there you can see the title is there. But the title is too big. If I come to view source and then we will find the title. The title is too big. It is like web, the company name then website designing Bangalore website development company in Bangalore website development company in Bangalore back again two times they've written website development company in Bangladesh. We have an idea that if that someone's searched for this particular query, that website designing company in Bangladesh, or maybe website designing company near me or something like that. Then what title we can keep to our website where it can pop up in the search result. So this one is like a webshop, web services, web best website development company in Bangalore. Okay. So this is the website. I don't know whose website is this. And yes, there is nothing about the promotions or not. I'm not promoting anything. What we will do now we will name our website by digging some kind of match in this particular Titles. Let's go to bootstrap studio. The master title, there are two things. One is master title and one is page-based title. Where we will find the master title is, we will click on settings over here. Then you will find SEO. And this is mean. This is the title. So by default, tech result is what the project name is. So it is taking that what we will type is sorry, web site design development company in Bangladesh. Now you can see this is what we are going to see in the search results as well. So website design and development company in Bangalore. And let us say if I start typing anything else, it will come as dot, dot, dot because it is exceeding that character limit. So it is showing dot, dot, dot. We are showing website design and development company in Bangladesh. This is what our title is going to be and let's describe some description overview. We will start with tech resolve, the name of the company forced tech RES ESOL with tech resolve. One of the ESOL deck result and ONE, one. Tech resolve, one of the best website designing development company in Bengaluru. Way. This building is a B in Bengaluru. Capital Omega. Okay. Anyways, so tech result, one of the best website designing and development company in Bangladesh. We design D, E, G, and we design websites and mobile applications. Okay, this is what our description is going to be. Let's add this sitemap as well. So sitemap is nothing but like. It is there will be on page called dot XML, which will have all the website titles and the page names. And this particular sitemap will be tracked by the Google bot. And then they will see like, okay, which thing we have to fetch from this website so that whenever the user search so we can show them the sitemap, we will just turn on the sitemap. And that's all. This is like our master title and description. After that we have our open graph, that is OG, which I told you that OG means opening graph. So what we will do for Open Graph also the master title will be the same. I'll just copy it and I will paste it here anyways, it is showing you, but it is not exactly game you. It is just like you can say, like an input fields, something like that. It'll paste it here. And I will show you why it is not like that. If you just type something, it will go, it will go blank. I'm copying this as well, Control C, and I will paste it here. Same thing I will go to. Same thing I will do to the Twitter as well. Paste it here and the title, I will just bring it the title copy. And I will paste the title over here as well. Now this Ads dot THE robot.txt. We will do that, but not now. In this section only we will do that. Now we have to do the most important thing is we have to see this OG image and this Twitter image as well. What we will do is instead of adding the images year, we will go down, scroll down, and we will go to this corner, see this link. There is SEO section is this much, but we have to go with fabric ones as well. So I'll click on fabric on, and there are some sizes which are mentioned and we have to add the sizes accordingly. As often. Now, what we will do, I will just click on save. This particular icon is there. We have our, what do we say? We have to get our icons ready. Let's go to the website called Canva. Just click on go to Canva, canva.com. And let's create one thing. Let's create a design. And it should be a custom design with a size of five pixels by phi, 12 pixels. That was, that was the maximum one, y two L by 512. You are what I will do. I will just go to the element and I will take one just any design. Design means any icon like technology, something like that. Let us see what will be the feasible one. Graphics for technology. I think let's take this one like this. Maybe this is our logo, logo for icons. So I will just take this one and I will download this PNG file D2L. I will download this. This will be like untitled only. Let's open this one, so I will take it for now and just rename this as tech result g, or that is TR logo and I will just take it here. Inside this. We go, there is PR logo is there. It will go back to settings one more time. And now I will go to fail week on. Phi two L is the image size. So this is the image size I will take it. What do you have to do is you can go to Photoshop and just type this size number, 182, then 13216, and then you can resize it or else you can where it went. So you can just click on resize if you have premium version of that. There is one more thing. There are some websites where you can do some resizing. You can do the insights from there. But what I will do, I will just take the same image for multiple times. This is also okay. We don't have any issue in that. Will take the same image for all the sizes. If I click on Save and let it go. Now, we'll go back again to our settings and then come to SEOs. And if I come to OG year, we have to put the title. But if you come to Twitter or something like that, if we have given the different screen sizes, it might take the exact screen size. You are. You can see if someone is sharing this particular post by using the index page URL, the post on Facebook or any other thing it will look like this example.com. It will come as tech result.com or whatever the domain name is in. The title will come here, the description will come in and the image will come like this. And the OG type, I will show you that website. And in Twitter, I will just go to Twitter and come here and just click on Save. Now you can see when someone's shared this particular page in Twitter, there will be nothing because we have shown that Twitter cut type will be none. We have two different types like summary and somebody with large image. So if I just click on summary, it will look like this on Twitter. And if I click on somebody with large image, it will look like this, which I don't see us. They like it because the image is like cutting down the image. Just go to summary. This is okay, no problem. All good. Then PWA, I will just turn on this section that is progressive web application. What is what exactly progressive web application like? Again, I will come to that. Let's give the title. So just paste this short name, maybe only resolve, sorry. We don't have to give this title and all. The name will be decreased or lonely. **** results and shortening will be TR. And what will be the URL I will show the URL must be index. Whenever someone launch this website, the URL should be index page. Then we will just turn on this mask, Mask icon and the background image. Let's do the background images yellow, something like that. Let's take this background image, yellow, kind of yellow. And team E major will take the same, but on a little bit lighter side. Not that light. You can see the real-time color over here. What is going to come. And just select Yes, fullscreen. I will keep it as fullscreen and orientation. I will keep it as an anonymous like portrait landscape, both orientation it will work. Now what exactly happened here is when we will go to our mobile browser or something like that. Then let's do one thing. Let's see that. Just click on Save. When you go to Preview. Come to this previous section, you're, you'll see this one. That is the number is there, 192 dot 168 dot one dot eight colon 8 thousand. You may have different number. That is for sure. Any different number you will have to do one thing. If you have, like, obviously you will have wifi, wifi connect the system like laptop or desktop and your mobile phone to the same Wi-Fi network. And open the browser. So I will just adding, I'm adding my mobile screen here. What I will do, I will just, I will open my browser over here. Just a second. I will open my browser and I will type this number that is 192 dot 168 dot c. There is seven. And here it is written as like most of the time is changes seed now this number is saved one hundred and eighty two hundred sixty eight dot one dot eight colon 8 thousand. I will just click on Enter. There we go. Now you can see the same website in real-time in mobile screen. Now you can see this particular area. I'm just pointing out this particular area. This is yellow. Okay. Let us go to bootstrap Studio and go to Setting. And come back to our PWA. You're in this color. Let's take any different color. Let's say this one. And I'll just click on, Okay. And I'll click on Save immediately. You can see there is a color change. This is what happens when we are using in PWA as I'm using iPhone. So there is one limitation that iOS and is not allowing me. But if you go to your Android device just a second. Now the color is back to the original. If you go to your Android devices and if you just click on any where you have that option. And actually I don't have an Android devices with me right now. Or else I would have shown you. If you go to the browser and if you select the three dots, something like that over there. And in that you can select on what is the shortcut or something like that. It means it will create launcher, Launcher icon on your home screen. If you click on that launcher icon, the application will open as Android application. There will be no that there won't be a URL bar or something like that. It will be like a pure Android application. So that is how we are going to use this PWA. So PWA, progressive web application in iOS it is not supporting. But yes, in Android and Android and iOS, Android it works that way. So PWA is, that is how we are going to use PWM. That's how it is going to happen. And we have done with our SEO of master page, master pages like this. Seo is going to apply for all the pages. Now I will show you how exactly weekend give a different title and different description, and OG and Twitter and all that things. Title description for individual pages that we will do in our next video. 63. On Page SEO: Okay, welcome back guys. In this video we are going to see how exactly we are going to give individual title and description to individual pages. Index is what we have done right now. And we will go into keep that particular title and description to index page because this is the launching page of a website whenever someone clicks on the URL, Let's go to our Contact dot HTML. So this is our contact page. Select the contact page. I right-click, come to properties. And now we have this SEO settings over your first one for this particular page. Now here it is written as a website design and development company in Bangalore. But now what we will type is like contact Tech result and solve your issue. Something like that. Contact Tech result and solve your issue. Description will be contact us and get your solution from result. This will be the description and the same thing. Obviously, I'm going to do it for OG. Og is taking this particular title from the master. Replace this with this one. And for Twitter also, I will replace the title and description. I will take it from here. I will just copy this description. This description over here. I will also pay as the description over here. And let's add this images. It will be like this year, it will be like inheritance. It means it is coming from the master. One year I will add the image one more time. Again, inherited coming from the master one. And that's it. There'll be go. This is done. This is what the individual page SEO is. Just click on save. That's it. What will happen? Coming back here? See as of now, you can see now the icon, that particular icon is here not title is changed. If you share like when we host this website, let's attack result.com is the website name. So the URL will be something like this www dot tech result.com slash contact page because it is going to be on contact with the default landing pages index. So it will be contacted if you copy this link and if you share that on WhatsApp or anywhere, that image which we have added over there, that image will be coming there and it will show them. So it will give one more strong appeal to the user should stating that yes, this website is designed very professionally. The same way you can do with business solution, and the same way like after submit form also you can do seem that you can do it for OC as well. That is that is our happy customers. Okay, So this is how we will be doing the individual pH SKUs. That is what this particular section called SEO. Let's see one more time. Did we missed anything or not? In SEO, we'd wish saw the main SEO then sitemap also. And this adds dot TXT is we will be going to use it when the ads are going to come that you just have to pay as that particular thing. Yeah, robot.txt. Robots.txt is like pending and that we will see in the next video. I think we can finish this particular SEO section here because we have saw the baby console. So then PW also metatag is like yes, we can see the Meta title. Meta tag is whenever we put that particular like SUVs and all that things, you can see the metadata coming here. One metatag which you can add over here is just click on Add Meta tags. This is named Meta tag, and the tag will be keyword. Keyword and the content you can give keyword. For example, website. Designing. Website designing that is including space is one keyword. When you want to separate keyword, what you have to do is let's put a comma. Comma means these are two different keywords. So website designing is one keyword and website development is one keyword. So this is how you are going to use the keyword to different keywords. One keyword can be multiple words. And if you want to different differentiate the keyboard, you have to use the comma over there. Then head content that we have already seen this head content. And let's see what is this called as robot.txt. Let's see what is robots.txt In our next video. Let's see what is this robot.txt in our next video. 64. Robots txt: Before understanding and before adding the content in robot.txt, I will tell you what exactly robots.txt is. C, search engines like Google, Yahoo, Bing, DuckDuckGo, or anything, any search engine. There is a timing. On a frequent time-based. They visit our website. It means like we'd like any user don't have to click for that particular website URL or something like that. They come automatically. There is a bottom robot or bought whatever it is. There is a bot which come to our website. And the fetch the information from a website, that is H1 tags, H2 tag and something like that. They will fetch the information from a website and they will store it in their database. But whenever the bots will come to the website, there are certain cases. They're v as a website owner, we don't want that bought. Should scan some pages on our website. Let's say for example, in our website there is a page called after a form submission dot HTML. We don't want that bought. Should scan this website because this website has no information. It is just like we have something where we can see this particular page when it is triggered, it means someone has filled the form after that only the speed is going to come. We don't want this page should index in the Google search results or any search engines in search results, this patient index. Which page we want to index that page, we will add it in Google bought and which page we don't want that we will disallow. We will add that page URL in the disallow section that we will see how exactly we are going to add it. See we will go to Settings. And then we SEO, we have this section called robots.txt. There are multiple bots. For this particular example, I will tell you how exactly we are going to do for Googlebots. We will tie first user, USE our user dash, agent AGE and te agent, colon space and Google bought GO, GLM, Google BOT board. Enter. Then we will type disallow. So d should be capital. This The IS ALL OWN disallow colon space. And then we will type the page name over here. That is, what is the page name? So we'll just save it here. I will come here, right-click or just click on Rename, and I will control a copy this page name. Then I will go back to our robots.txt. Space. One slash will be there because before that our domain name will be there, right? And then I will just click paste to this, not click on that. I will paste this and put one more slash. Once this is done. Then the user agent, Googlebot, whenever the Google board is going to come and scanner website, google bought knows I don't want to scan this with this particular pH because I don't want to index. Now what we want to index. Let's speak again. This one, Googlebot studio, Googlebot. And I will type allow. Allow. Just put this slash. It means Googlebot knows he don't want he or she, whoever it is. Googlebot will know that this page is set to be. Don't scan this page, but which page to scan in alloy it is just lash it means except this page. Scan all the pages. This is what it is going to be. And this is for Google board, right? But what if the Microsoft Bot come? He will see, okay, this condition is for Google but not for me. I will scan all the pages again, if someone is searching for searching, particular thing on Microsoft search engine inlet is Bing search engine. This rule is not going to work over there. Do we know how many Virginians are there in the market and which are which search engines users are using? No. We have one thing for that. Instead of this Google bought. We will put the star mark over here and start Mar means for all the boats, it is not specifically for that particular box, so I will just put 11 more star mark. The star is like for all the boats. And one more thing is there, which we can show to it, that is sitemap. We have seen the sitemap over here, right in the mean. We have turned on this sitemap options, so we'll come back to the robots.txt. Some extra spaces by hitting Enter. And I will type sitemap over here. So it is like SID MAP sitemap will put colon, and now we will put the URL of the website first. So let's say this website is https colon slash slash www dot tech result.com. Just assume as of now, because we don't have any domain, just assume this is the website URL that is www.Microsoft.com. And before that we have HTTPS also added to it. Or else we can just type http. Just type http because S stands for secure. So let's say like whether it is secure or not, this is the sitemap. Not space. After that, just put a slash. Remember your domain name will be there not peck result tech result is just for reference. If your domain name is just for example, what we can, can be like, let's say abc.com. Instead of tech result, you will be typing ABC.com.in.me, whatever it is. Your domain name slash, and then type sitemap as ITE MAP sitemap, all small characters, not a single one. It could be capital or ear, sitemap dot xml. That's all. You called your sitemap over here. And you're telling, don't scan this particular page because I don't want to scan this particular page and accept that page. You can scan everything in my website so that it can come in the search result. It is not that quick. Okay, Let's say if you have added robot dot robots.txt In your website and immediately next day it will come. It is not like that. Whenever the Google board will come and crawl your website, then only it will be fetched, the data, then only the data will be fetched, and then the website will be listed in your what do you say? Search engines results. Okay, So this is one thing, and that's how it works. Let's click on Save over here. That's all your robots.txt is done. Anything else? Is there no, nothing is there remaining. That is how we are going to do our SEO robot.txt. If you asked me what is about Ads dot TXT, whenever you want to start advertisements on your website, you can go to Google AdSense and you will create account that time. Google will give you one file called Ads dot TXT. Inside that, well, there will be a number, just copy and paste it here and click on Save. That's all it is done. So this is how we are going to do. This is how we have did our SEOs in our website. And we have done for this particular page business solution, we can do it anytime. As often. I am just keeping it blank. So when we will host the website, I can show you some more things in that, more things is meant like what if we don't do anything in SEOs like private page ACOs, what if we don't do there and what is there? If we have done some changes in that particular dedicated private page SEO section and how it will go into appear or how it will go into come in that particular thing. This one thing is done and SEOs like search engine optimization is done in later videos like when we will host the website, when we will see the Google Analytics tag managers and all that things, then we will see how exactly we are going to do with the rest of the things. That's all for this particular section, SEO is done and if something comes in my mind in future, like as always, I will add the new video in this particular section. So thank you guys. Thank you for watching this video and this section. And see you in the next section. 65. How to buy Domain Name and Hosting: Hello and welcome back guys. In this particular section. In this section we are going to buy a dominant host, a website and do much more excited thing in this particular thing. This is a complete practical knowledge where you can get a dominant for your client as well and for your own. And you can host your website on your real server. And if I'm not wrong, I have told you in the previous lectures where I will be showing you how to attach or how to add a real video directly like HTML video to the Bootstrap studio. We have seen like YouTube and Vimeo video linking to it, but we have not seen the HTML video linking to it because we do we were not having the server at that time. But yes, in this section or in the coming section, we will be doing that. What we will do, we will buy a domain you're hosting. I won't buy because I already have a hosting, but yes, I will show you how exactly you are going to buy the hosting as well. So two things are there. One is dominant and one is hosting. Let's see. First, what is hosting? Hosting is nothing but you will get a space like a hard drive space in the server. And your website will be dumped to that data off the website will be dumped in that server. And that server, you will get one folder in that particular hard drive. And that folder will be mapped to your domain name. And whenever someone's searched for your domain name, whatever data is there in that folder, that is our website files that will fetch and the user will see the website. This is hosting. So I'm using hosting because it is very cheap and the whole servers which they provide is very fast. I really liked that. I already have a couple of website hosted in hosting of my own and my clients as well. This is hosting and let's see, hosting thing. If you go to hosting over here, there are two types of hosting, actually 34 types of hosting other you can see this is all our hosting only, but I will show you the most two important hosting which you will need in the initial level. This is hosting your web hosting, and this is a cloud hosting. Web hosting is for small and medium-sized businesses where the visitors are not more on the monthly basis, lead select ten thousand, two hundred twenty-five, thirty thousand like that on monthly basis visitor, the cloud base is like more visitors with more computing process and a lot of things like large-scale projects at all. I will show you what is web hosting. So we'll open this in a new tab and we'll go. And once I scroll down, you can see there are three plants over year, 691492179 rupees per month plan. But this pricing is only applicable if you're taking this plan for at least 48 months. If you're dropping down the number of months or number of years, The price increases. And I will show you that as we'll see in 69 rupees plan, there is one website with 30 GB of storage and 10 thousand visitors per month. In this plan, you can see the website increases. You can host up to 100 website if you have multiple websites and you don't want to spend again and again on those servers and hosting. So you can take this hosting plan where you can host a 100 website. I have taken this plant only which is premium where boasting plan to website to host my multiple websites. For multiple websites, you can host multiple websites for, but you have to buy domain all the time when you are coming with a new website, you will get a 100 GB of SSD storage in 25 thousand monthly visitors. And this 25 thousand monthly visitors, E is for all the websites which you have hosted in this particular plant. It is not for one website, it is all for all websites. Free emails. You can create free emails as well. But yes, in this particular course and in this particular series, we are going to see how to attach or how to map or how to point our domain to the zoo official emails. And I will also give you what is the advantage and disadvantages of pointing it to Zoho, then SSL and all the things we will be getting like unlimited bandwidth, the null. Now if we go to cloud hosting, I will just go and create click on new tab. Now if you go to cloud hosting, so what is there is the starting plan is 700 thousand rupees per month. You can see the top plan is to 79 rupees per month. Here it is 700 thousand per month, but startup is coming with 200 GB of SSD storage, three GB of RAM to see two CPU core. Then free emails and SSL is Cloudflare integrations is there, and then all the other things are also there. This plan you can use when the website is like pretty much big and you can, if you find that the website has more traffic code, okay, So this is the plan. So what we will do, we will just click on Add to Cart as of now. But when we are going for a checkout that type, I will remove it because I just wanted to show how exactly we are going to buy the hosting. Is this in this plan? Let's say this is a single website plan. You can just click on Add to cart over here, and it will redirect you to the cart section. Now, before going into the card section, it will tell which plan you have to buy will see like 1600 rupees per month is 448 months. And if you go with a one-month plan or like a 12-month plan, this is what you are going to pay if I click on warming planet is like this much 349. And if you go with 12 months planet is like this much 1668. After taxes, it will come to this amount that is 1.2400968 rupees. Okay, So this is where the hosting plan is there. And once this is done, then we'll go for a real thing which is our domain. Let's go for the dominant. And I will click on this domain name over here. And I will click on this domain checker. And I'll click on domain checker. Over here you will find there are multiple extensions and all are there. So dotnet.n.com online and all what we will do in this particular video as we are buying the domain just for showing you a demo purpose or a tutorial purpose. I'm going to buy a domain which is very cheap, that is 75 rupees and something like that. How to buy a domain first, there will be a name in your mind, like I want this particular name of my website. So that name you have to search over here. So I'm typing my name over here that is current, key ARE IN current, and I will just click on search. Once a searches done, you can see there is current dot is taken. And this is asking me to verify that because I've already searched a lot of times. What is this? Please use the e-mail boat. Okay. This is a boat. This is a boat. And the second one, this is a board. This board, this is what, this is what this is wood and verify. This domain is already taken. It is showing me. So instead of that, I will just scroll down and I will see which domain can be taken. Current dash online node. We'll go with this one. Let us see it is available or not global current dot site. And I will just click on Add to cart that is global current dot site. And it is checking the availability and yes, we have verified that and this is available. So what we are going to do now, we will just click on, Continue to cut. Once I click on Continue, continue to cart, it is showing me this amount and why this is showing this larger amount now, because I have selected two years over here, I have to go with the first one. I will just click on this. There is 75 rupees per year. Now it is telling me 104 rupees, 0.31 Pesaro, like in Indian currency it is called that only like 104.31. Okay, so next step is it is showing me also it is asking me to take the hosting plans. So you are also, you can select those thing plan which is the 68 rupees, 69 rupees plan for 12 months or one month, whatever it is. And see here it is one more thing like hide personal information of my domain on repeats, do 99 per year. What is means is if you just check this, another 29 to 1900 rupees will get added. This will hide your personal information or else what will happen when you checkout and when you buy this? Who bite this dominant is your name for email or sometime phone number also, it is publicly available. And the companies who provide services they might start calling you were not two days. If you don't want to pay this to 99, then you can you can just go with that and you can feel the pain for two or two to three days. After that, they will stop calling you. Not a big deal. Just click on Checkout over year. In checkout it is asking me to login and then I will log in with my Google account. This payment option I have in front of me, I will select a UPI option. In my country. The UPA option is there in your country, PayPal or maybe anything will be popular so you can use your trusted payment method over the year it is showing me a 104 rupees is there. So continue with the UPI, my site, the payment is done and now you can see your your payment is successful. Please don't do anything. You're redirecting. We are redirecting somewhere and where we are taken. Now it is finalized your domain and this is, this is what you will also get. This is the noblemen which we have taken that is global current dot site. And I will just see which country you are in India. So it'll just type India over here because I've selected India over here and I will select this personal only and it will just click on Next setup. This is asking for a few of the details over here. So I will just enter few details like state and other things, PIN code, I will enter a phone number I will enter. And I will just click on Finish registration. The address should not be too long. No commas are allowed over here where you're almost done and then click on Continue. There will be an e-mail. So I just have to verify my e-mail, so I will just go to my e-mail address now, that is Gmail. If you have not received any email for the verification, you can just click on recent verify e-mail verification email and that email will be there in your inbox. This is the e-mail verification link and I have to click on this link. And once I click on this link, it will take me to the hosting or page one more time. And this time, it should see like, yes, the email has been very successful at time q. And we can close this. We can come back to this page and just click on Refresh over here. Maybe you can hit F5 to refresh the page. That's all. The domain has been successfully verified and our domain is global current dot site. In this particular video, we have purchased the dominance successfully. And in the next video we will see how to link our dominant to our hosting account. So see you in the next video, guys. 66. Point Domain to Hosting Server: Welcome back guys. In this video, and in this video we are going to see how we are going to point our domain name to the hosting server. What we will do here is we will click on the hosting or your I have already few accounts hosted. I'm making it blurry. Just for some, you can see there's a security reasons. This is my premium server hosting. And you will find a button like this called Add website. So just click on that ad website button over there. And then you have to type the name. So let's see what is the name of the domain. It is like global current or something like that. If I'm not wrong. And I see this is how this happens when you take a domain and you just take any domain. So this is the domain. I'm just pasting this domain name over here. I will just copy this name. I will paste the name over here and I will put a password. So let's put magic password over there. Anything. I'm just blurring this out as well and I will click on Add website. As I click on Add website year you will find my website is listed now, I will just take all the websites, so we're here and this is my website. You're, my website is there. And then I will click on Manage website. As soon as I click on Manage website, the this panel opens, then this is the name of my website and this is all what we need. Now, let's see if we go to this URL called Global current dot site. And I will just use this URL over here. We'll click Enter. It is saying that not secured and it is showing this your account has been created. This is the domain and this is what it is. Now what we have to do is now we connected our dominant to the server. Now they are pointing. Now we will upload the files on the server. After that, we will make our website life and that we will see in the next video. See you in the next video, guys. 67. How to host website: Before moving forward, before we upload our website to the server, what do we have to do is we have to export our website. This is our website called Tech result. And now we're going to export this website. So how we are going to export this? We will open the tech Resolve website in our bootstrap studio, and then we will go to export. And before that we will just click on this arrow over here. I will click on export settings. These are the export settings and we have to make some changes over here as well. Before that, we have to tell where exactly we want to export this file. So I'll click on Browse. And we'll just go to this BSS. I will go to resolve, and I will create one more folder over here, and I will name it this folder as 6.5. Under scroll export. We will get to know that in this particular file, all our files are exported in this particular folder actually. So it'll just select this folder. It means like I will just click on this folder and I will click on Select Folder. And here the path is there. And now we have to do a slight changes over here, slight changes here is the first thing is like skip unused images. We have to click on this link, turn on this option. What it means he was like maybe we have imported lots of images. Let's say, we'll give a count. Let's say for example, we have imported 20 images in our project in this deck result. And out of the 20 we only use ten. While exporting. Just export only those image which are used in this project. The images which are not used but only imported in the project. We don't want that images to get exported. Out of 20, only ten images we'll export it, which is used in this project and ten which are not used. It will skip it. Because of that, the size of our website and size, our size of that particular image folder will come down when we are not exporting the unused images. Okay, and export labels, we will turn on this option as well. Labels is like when we are using the labels, I will show you what exactly the labels are so that labels will get exported and the URL will be here. So let's see. This is the URL and it is telling HTTPS is missing to HTTP colon slash slash. This is the website URL. I'm putting that URL over here. Then I will just click on Save. What is labeled is like you can see like a hashtag model dash one, and then footer dark. These are the labels we are doing exploiting the labels as well. So before exporting, we will save this project one more time. The project is getting saved and then I will click on this Export button. Here you will see like exporting data and your website design was exported and it will click on this. And now you can see the export is their sitemap. We have turned on the sitemap, sitemap and scheme over a year. This manifest dot JSON is there than in our assets folder. We can see the bootstrap mean CSS is there, then CSS folders are there. This is our number and all their things and forms, which forms we have used at forums are exported over here. The images which we have used in the folder structure. All the images are here and the JavaScripts are here. And outside, we can see this index.html. This is the main page, this is the main landing triggering page. And then we will see all these other pages are also there. Now let's go to our server and let's import all this at once. I'm just taking this window out of the screen. And let's go. Let's go, let's come to our hosting area and we'll scroll down. And there are two options like in files. One is File Manager Beta and one is File Manager. So this isn't Beta version, maybe one. You're seeing that maybe there's Beta is not there nowadays in the production level. So I'll click on this file manager Beta and one more window will open over here. And this is the main folder that is public underscore HTML. Whatever files we have, we are going to upload that files inside this folder only. I will double-click on this folder. And then by default, when you're doing it for the first time, we have this default dot PHP folder. This is what, this is what we choose C here that is default or default page you see like default dot PHP that work. Okay, So what we will do, we will just click on Upload over here. I will click on folder. Once I click on folder, I will see this folder is there, that is a tech result export one and I will one step go back and I'll select this folder, entire folder and click on Upload. I don't just click on Upload over here as well. So that folder is now uploaded. Whatever is there inside this folder, I have to move everything and drop it inside this public underscore HTML folder. So we'll double-click it. It will select everything by Control a. And I will just click on Move over here, this move file button is there, move file. There's two dots. You will also get these two dots. I will just double-click on these two dots and move. That's all our files are completely out of, out of that export folder now and we don't need this one, so we'll delete this year we go now our website is hosted and if you come here and just refresh this, there we go, our website is hosted. Now. Anyone comes to this particular URL that is global current dot site. This website will be there. This this domain is for just one year. This domain will expire on 19th of April 2023. If you're watching this video after that, maybe you won't get access to this website because I have taken this domain only for one year. That's how it works. So we have this not secured one, we have to fix that as well, but we will fix this. Not secured, secured in the later videos. In this video guys, we have seen how to export and how to host our website on a real server. And that solved guys, that's all for this video and that's all for this section. We have successfully hosted our website in the real server. This way you can host n number of websites by purchasing a dominant. And if you want to change everything, so what you can do is just select everything, delete, and re-upload the entire files back again. This is how we're going to host our website and we have done it. So that's all for this section. And see you in the next section, guys. I'm also very excited and happy that successfully we have hosted our first website in the real server. Guys, that's all for this video and see you in the next section. 68. Introduction to Zoho Email: Welcome back guys. In this new section where we're going to see about XO who email? Xo who email is a professional e-mail service provider who does not only provide service of e-mails, but apart from that, there are so many other products and services which is Xu who offers, we will just see very quickly what all services x2 offers like in finance. They offers like books or CRM Zoho books where we can keep all the accounting tracks and X2 people for HR, business, emails like males, then project management system for projects. Then assistant meeting CLI IQ is inside organization chatting system. This is like again, it is free, then CRM, then finance, then see, you can see like sales and marketing and then service than e-mails. And they have like righties. Worksheet is like Excel slide is like a PowerPoint then Docs is like Dr. CLA, IQ voice. See all the features, all the services which are there in this particular platform. Few of them they are free and few of them they are paid. Not view. It means like few of them they are free. And a lot of like everything are paid. But in that also you will find here and there are some free services, free offering for a particular number of users. Just for example, this invoices is completely free. And if we go with like emails up to five users, it is completely free. Now, we will see how we are going to point our domain name to the email xo email. Why we want to use the email. We have hosting your e-mail if you're taking if you have taken your domain from GoDaddy, we have GoDaddy emails as well. So the reason behind that is I personally using Zu who e-mailed for a longer time now, but before that I was using GoDaddy and hosting or email. The main problem over here is GoDaddy and hosting her and all the other service providers, like all the other service provider, they provide e-mail dashboard, but they don't have a mobile application. And there is the storage and all that things are included in the servers, in the host, things which we have taken in x2. What happens over here is it is the professional way of mailing. It is as good as like very professionally, very well-built email, email system. And you will also get the Android and iOS application, the Windows application, and all the other things are there, web support is there. And you can see the interface of this particular Zu who, who mail. Where you can see that mainly is their calendar is that you can make your bookings over that, the bookings reminders, then you have notes over a year. Then you can also have a task option then contacts and bookmarks and all the stuff, whatever you need, ease available in zoo email. So if you see in pricing section, so uprisings, yes, definitely there are uprisings are there. But if your organization is not that big and up to five users if you want to use, then we have forever free plan. Use up to five users, five GB per user, 25 MB of attachment limit. And Webex says and mobile access and all the other things like But you have, but you should have your domain e-mail hosted for a single domain. We will do in this particular area. We have our domain name with us that is global current dot site with this domain name, we're going to do that. Let us go to dominate. And let's click on this domain. Yes, we will wait here and we will proceed with our zoo email and we will start creating our account in zoo email in short end so h2 and then we will start proceeding with Zoe emails contribution and that we will see in our next video. 69. Adding Email Records in DNS: Okay, so we will start configuring our CSA who emailed with our domain. So I will just click on Try now, year we go, we have this. We, I am logged in with my Yahoo account, so there will be some verification process also, I think no, the verification is already done. You will also need to do the verification process if required or else you will come to this particular page. Then I will just click on abdomen. And this is our domain over year, so it'll just copy this domain. And I will paste the domain year. And there we go. And this organization, like provide your organization name. So I will just type as global current, maybe your organization name and then industry. I will just put it as education. Education will be good. I will just click on Add. Then congratulations your this, this domain added successfully then proceed to domain verification. Now this is important and be very careful while doing this. First thing which we have to do is verify the domain. Verifying the domain, we have three different steps. First one is recommended, that is add TXT record in the DNS. Dns stands for Domain Name System or domain name server. And then the second option is to add a CNAME record in DNS. And the fourth option is upload HTML file in the website. So we'll start with the first one. Usually, domain verification does not take a longer time. If the TXT doesn't work, then we will go with the, what do you say? This one. But what I will do like just in case if it has got verified, then I cannot show you this. So I'll just click on this one HTML file. And now what do you have to do is this is the HTML file, just if you click on this Zu who verifies Zoho dot HTML, this one file will get downloaded here. What do you have to do is you go to your server, that public underscore HTML folder will be there, right? So I will show you that as well. We'll go to the hosting there. The hosting. We will go to our domain, which is this one year in this file manager. Yeah, inside this public underscore HTML folder, what do you have to do is see, this is the link where it will go to verify this is global dot current site, global current DOT side slash, then it is like Zoho. Verify. You have to create a folder by the name of Zoho verify how exactly we're going to do that year just in case if you are good and are verifying our domain by HTML file, just click a new folder over here. And we will name it as Zoho. Zoho verify. And we'll create this folder. Now we are inside this Zoho verify folder and the file which we have downloaded. I will just open that year we go. I will just drag and drop this file over here. And just because of some reason it got renamed, I have to just rename it as verify for x2 dot HTML and it will just rename it. If you open this file, you will see some number is there. And that way you can verify the domain. And if you just click on this link over a year now it will take, it will show this number only. Once this is done, then you can click on Verify HTML file and your domain will get verified. And I will show you one more thing, how exactly we are going to do with TXT domain verification. For that, we will close this one and we will come to our domain thing. And this is where we find like DNS name server. Every domain name has a different set of instructions. So you have to find that where you are going to change the DNS system. And we'll just click on this DNS over. You're going back to this Zoho. And now what you have to do is first one is see this is a TXT record and this is the value in different domains service they've named it differently, value 0.2 or destination year. What we have to do is this is our managed DNS record. And first thing which we have to do your ys, we have to go to TXT record before that we have to see what actually the verify. I will just type verify over here. Nothing is there. Okay. I will just click on this Copy button over here. I will just click on Copy button. And name will be at the rate only the text value will be that one which we just copied. And I will paste it here. And TTL will be the same one. And I will just click on Add Record. Once I click on Add Record, I will come back and it'll just click on Verify TXT record. There you can see the TXT record has been verified successfully. Okay, So this is how we are going to do that. And before moving forward, we will come back year. I will search for MX year. You can type MX and you can search for MX year. You will find mx two dot hosting or dot in and mx1 dot hosting or dotted. We have to delete both one. I'll delete this one, amex and I will delete this MX second one. And then I can type DKIM and we have to see whether there is decay MS there, let it be. And then SPF I have to type this is the SPF record for hosting her that I have to delete. Spf record I've deleted. Okay. So MX an SPF record we have to delete and now we will come here this e-mail. Now it is asking for email address, which will be the admin one, the admin level level control. You can put your name or you can put the admin also are yours. I will just put my name current at the global current dot site and it will just click on Create. This e-mail address will act as an admin level email address where I can create users and I can change the password for them or I can delete the user's all the things. You can see this icon with the super admin level is they're showing one week ago. Yes. Last login with this e-mail address which is current current contiguity yahoo.com. I did one week ago, so it is showing me one week ago. So proceed to group setup and there is nothing groups setup, so we will proceed to DNS mapping now. Now this is like the should be there or else your email won't be, won't be triggered to the Zoho One, three steps are there, one is MX than SPF and DKIM MX and SPF, which was the old one. We have deleted that now we have to add the new one. So coming back to our DNS records, I will come to this managed DNS record and it will search for MX record, which is the second one. I will come back year at the rate will remain same and I will copy this MX dot x2 dot in. And I will paste this in the mail server section, and we'll just click on Add recorded. First MX record has been added. Same way I will do this for this one, but the priority will change from ten to 20. So now I will take one more year and I will just paste it here and the priority will be 20. I will just click on Add Record. And the second add MX record has been added. Now the third one that is MX, three dots, Zoho dot in and the priority is 50. We'll come back here. The address will remain same, oh sorry. Mx first, then add, the rate will remain same and we'll paste this and the priority will be 50. And I will click on Add record. This record has been added successfully. Then we have to go with SPF, which is again a TXT record at the rate and view SPF value. We'll just click on View SPF value. And it is showing that multiple SPF record has formed. So it is, this one is the hosting a one. And we don't want that, so we'll just click on this one that SPF include this one, the first one, I will copy this. And before adding this record, I will again search for any SPF record. Is there by chance node no SPF record is there. In the text record I will name, name will be at the rate and it will put this value which we copied and I will click on Add Record. Okay, Fair enough. I will just click on Okay. And the last one is DKIM record. Again it is a TXT record. And now the host value, instead of add the ID, we have a specific value which we have to put there. So we'll copy this one. I will come back here and we'll select the text record. The name now will be this one, Zed mail dot undersold domain key and something like that. And the value will be this. It'll copy this one. Come here and paste this value over here and click on Add Record. Now we have added all the records. And once we click on Verify all records slowly and gradually it will start where you find the record. Usual time is 30 minutes to verify the record. Or maybe it may take a one complete day that is 24 hours according to the conditions. So we'll click on All verify all record. Let's see which all records are verified. And we can see there is a message over here which says TTL. Depending on the TTL, it may take some time. And we can see the DKIM record is verified successfully and MX and SPF record is still in pending. You can see it is still showing this hosting or pointing is there. We will check one more time after 30 minutes, and then we will see whether or not it is mapped or not. Once this is done, and then we can move forward while email migration, but we don't have anything for Migrate. So we will proceed to go to mobile. And it is asking me to download the e-mails and all and then cross it the completion. Now two options are there. One is check your inbox and go to admin. So I'll just click on this, go to admin. Now, you can see this is how the admin looks in Zoho CRM, Zoho male. This global current is there and the site name is there. The admin level email address is there. And then we have the plan like free plan, is there forever? Free plan. How many license we have, that is five license we have and we have one domain as often or how many users we have in our system is one only. Sorry, I will just click on back. We'll click on Dashboard and number of groups created, which is 0, then e-mail traffic and all that things you can see it year. Then you can change your logos and all. Click on edit over here. Then from here you can change the logo of your company. And let's see, if I go browse. And E, Is there any logo or something like that? Let's say for example, if I take this one as a logo, I will upload this. I'm just using any random logo. Maybe this is a logo of some company also. I'm not sure about that. Once that is uploaded, then we can see now just remember this logo which we have used over here. The logo has been updated successfully and just in case if this loading image is still going on, going on, going on. So what you can do is you can just refresh the page. Sometimes there are some issues. And then we have a domain which says like MX record is not pointed yet, then it's okay. We can do it later as well. Users is you can add the users. Let us say if I click on Add user, you can put the firstName, lastName, then Username. Username will be automatically just you have to put the username. Let's say for example, if I put new gnarly there, you can see monarchy at the global current dot site and then pass what you can put the password. And then you have to depend on you, like force user to change password on first login if you want that the user of this email address knee should change the password. And then you can keep check this option and you can just uncheck that option. This way. You can add up to five users. Now you can add up to four years because one user is already taken. Then group's data migration, e-mail settings and all that things. Now you can also access this e-mail from now you can see the what do you say? The logo is there. And you can access this e-mail from x2 e-mail mobile application both in iOS and Android are available. Now let's go to our Inbox. I will just come you, I will open a new tab and I will just type z2 male. I'll click here. Be there for a second, and here it is there excess Zu who email. And I will just click on the Access x2 email. Now you can see current at Bluebell dot site is there. Here. You can see we have our logo over here. It has some instructions have that I will just skip this for now. We have our logo, the company logo easier than male. Then you can go with the calendar, then task. You can have the tasky there. Everything is there, like completely professionally, you can see some demo tasks are there. And I will just click on email over here. And once you click on this e-mail, this e-mail opens like this completely fresh, keen and beautiful user interface and user experience. So yes, that's how you're the notification is there then you can see like Xu e-mail and ESP EFN MX records are not yet pointed that we are going to check after 30 minutes. Then there are a few integrations which are there over year. You can just turn on the dark mode and the light mode as well. Send the feedback. And here you can have inter, internal communication with your colleagues and like in your organization. This is how you are going to integrate Zu who email to your domain name. After 30 minutes, we'll check that verification for MX record and SPF record and then all set. I'm good to go. That is how we are going to do this zu Emails. And that's all for this video. Next video, I will show you after pointing this email, what how exactly it looks at nothing else. Yes. See you in the next video. And if you want to see next video, then you can see or else see you in the next section. Thank you, guys. Thank you very much. 70. Note: Hello guys. In this video, I'm going to give you an information that when you're downloading my project files. Okay. And when you're opening that files in Bootstrap studio, there are forms where on the training, what I have done is the training. I have added my e-mail address over here that is current conducted at yahoo.com. What is happening here? When you're testing that file while uploading somewhere, the emails are coming to me. You can see like smartphones, emails this up like smartphone emails, are there smart form emails are there which are coming to me where it is showing all the test e-mails. You can see testing, testing, testing. What you have to do over here is, instead of keeping my email address, you have to click on Manage over here. And as I told you in the videos also, you have to click on Manage and then click on Add recipient and put your e-mail address where you want to bring your emails, like where you want to take the form submission email, put your e-mail over here, click on Create, then you will get an OTP on that email, put that OTB, and then you can connect your email year. Instead of using my e-mail. You have to use your email so that it will come on your email and you will get two Nokias. The form is working properly. Okay guys, that's all for this video. That is what I want to tell you. Don't use this one because that emails are coming to me and you will think like, it is not working. But yes, it is working, but it is coming to the wrong email. Thank you very much. 71. Altly.in is now Lynko.in: Hello, everyone. This video is to inform you that ltle.in is now lincodt in. Everything remains same apart from the pricing plans. So there is a huge change in the pricing plan. Now, we don't have a traal vergin over here. And in the free plan, you can create only one short link, and there will be only one click on that short link per month. So this is good for nothing, but you have a complete access for Bopage. In short, in free plan, you can create one Bopage. And in the paid versin right from core onwards, you have most of the features available for you. So in this core plan, you can see you have 150 links you can create per month, and there is no limit on the click, and the data stays in the database for 30 days. And Bopage is again one. But a slight catch over here in the growth plan if you see, they have mentioned that free upon request for user within 1,000 plus IG story followers. So if your Instagram account has 1,000 plus followers, you can request them to get this growth plan for free. You can click on solution and you can click on the LincoElitPass. You can read the information over here. You can request them, and you can get the LinkOGrowth plan completely for free. So yeah, this is specifically to let you know that Atledt in is now lincodtn. Thank you.