Learn CSS and JS Fast: From Beginner to Pro

Hi, in this video series we are going to begin a very important topic for a newcomer who wants to learn the web designing and here we are going to discuss about the CSS. CSS is basically a technology which is very much popular and is very indispensable for the web designing concepts. Nowadays a lot of concepts like Bootstrap are totally based on the CSS. So here before getting started by learning with the CSS concept a candidate must be familiar with HTML and after that you must have a web browser and a text editor since here I'm a Windows user so I will use the text editors which is very much free of cost and any web browser of your choice like Chrome and Firefox. So once you have a knowledge of HTML, once you have these basic softwares like the text editor and the web browser, you are good enough to start with the CSS. So let's discuss about what the CSS is all about. CSS stands for cascading stylesheet. Stylesheet is the thing in which we are going to work. So basically stylesheet means a list of a document means a document which is containing a list of all these styles which you want to define for a particular element on the web pages. For example, if you want to make a particular design for the heading tags, you can create a sheet of those styles. Similarly for all the different tags, maybe the controls as well. So this style sheet will help you out in making the set of style rules. Secondly, there is something called cascading. Cascading means a flow. Whenever you will make changes on the top, it will be flown in the downwards direction. That means if you'll make any changes in the stylesheet, the changes will definitely be reflected in the web pages as well. the pages who are using those particular stylesheets. By the time we will start explaining about the working or the functionality of CSS, we will get to know like how we can make the different sheets for different documents for the stylesheet and the HTML. And when we will make some changes in the stylesheet, the changes will be reflected to the HTML as well is used to control the style of a web document. As I said, it will contain a list of styles for the specific element or as per your choice. Like you just want to make some list of styles and on any particular element, you can apply that. Like for example, if I have designed some font family, the text color or something for a specific text, I can apply this particular setting to an heading also to the paragraph as well. Handles the look and feel of the web page. As I said, it will contain the exact layout of a particular page. So, how you want your page to be look, you can make that all inside this CSS. And now let's discuss about the advantages. Since we have HTML and using HTML as well, I can customize the look and feel of my web page. For example, I have a font tag in which we have a attribute like color, the family means the font phase or some more attributes. So using that particular tag, I can customize the appearance of any text. So why should we go for CSS? So let's have an idea of that. Here we are talking about the advantage. It saves time. Saves time means you can design the set of style rules in a single document and later you can apply that in throughout your website. So every time when you adding a new web page, you don't particularly have to define the sort of styles again and again in a specific HTML tag. page loads faster. When you add the HTML and you keep on adding the different tags like font or maybe some more with some more attributes, the HTML documents will be heavier and by the time the HT protocol will take that particular text to the web browser, the more HTML will take more time to get loaded. If you will make a separate for means a separate document for CSS the amount of HTML on a particular page will be lesser and it will be faster in loading easy maintenance since all these styles have been defined in a single document. So if I want to make some changes in my website appearance I can do that by changing a single document and all the changes will be reflected to all the web pages in my website. superior styles to HTML. Some of the tags are actually not containing the more styles for the appearance. For example, if you take H1 tag, H1 tag or any heading tag doesn't have a property or attribute which can change the text color. For example, if you want to say H1 color is equal to red, that is not going to work definitely. So using these styles you can actually make the attributes applied on a particular tags which basically doesn't have those attributes. Multiple device compatibility that means if you're creating a web page with the CSS that particular web page will be compatible with any system like the different operating systems as well as with the different kind of devices maybe laptop, desktop, mobile devices. it will be applicable to all. So these are the advantages of working with the CSS. So now using all these benefits in the next video onwards we will start implementing the concept of CSS practically. Hi in this video of CSS we'll learn how we can include the CSS along with the HTML. So far we have seen a bit but here we will cover all the way like what are the different ways of including the CSS with the HTML. So we are going to discuss about the four different things. First one is the inline stylesheet. Inline stylesheet is something where you will write any HTML tag and right after that you will use the style attribute and inside that you will start writing all the style rules in the CSS syntax. Embedding is something where you will write the CSS code inside the header section of the HTML document inside the style tag. So there we will write all the style rules and those will be applicable for the current HTML page only. So after that in the body whichever HTML tag you are putting either you can use the name selector, ID selector, class selector, universal selector whatever but that will be applicable for the current page only. If you want to write a stylesheet that should be applicable for the all the pages of your website then you will have to create a separate file with an extension dot CSS and then you will write all the style rules inside that file. Later you are having two different ways of including those style rules in any HTML page that is linking and importing. These are the two ways which will help us out in getting the style for from a separate CSS document and where we will implement that in a current HTML page. So let's see a practical implementation of the different ways how we can link the stylesheet with the HTML. So now in this particular video we'll start working with the inline stylesheet. So basically what I'll do as here you can see there are a couple of tag that is H1 and H2 and here is the output of these H2 and H1 tag. Now if I want to put the inline stylesheet what I'll do like the attribute we used to pass in any of the tag so far here I will use the style as the attribute. After that here what I'll do I'll just put some of the values as I was doing in the previous video where we just saw the simple example like here if I want to change the color of this H1 what I'll do I'll say color to blue as soon as I'll do that you can see the color of this particular text this particular heading is turned to blue similarly if I want to change the font family again I can come to font family attribute here in this style and I will use any of like in the previous video we use SMS that is the same I'm going to do here as well and here you can see the difference so basically the way to write the attribute and the value will remain same but the thing is we will actually pass the value in the style attribute right where I'm putting the tag since this one is in line If I'll put any other H1 tag, these styles will not be applicable in that heading like this is a sample text. So here you can see the another heading is not getting affected with the inline because this style attribute is particularly for this H1 only. So it will not be applicable for any other H1 tag. Now if you want to put some common designs for all the H1 available on this web page as we have done in the initial video as well. So for that what I'll do I'm just removing this style from here and I'll come back to the head section where I'll put the style tag just make a good practice to pass the type attribute here where I'll put a value text / CSS and here since I want to pass it for heading I will use the values like color to view font family to MS. So now all the H1 available in this particular page will be turned to the same style set which I have used for the H1 tag and similarly you can make it for any other tag you want. There are different selectors which I will cover in our next video. But here I'm I'm just telling you what are the different ways of putting these style things in the web page. All right. So here first thing was the inline stylesheet and here I'm actually embedding the style sheet inside the head section of the same HTML document. Let's put some styles for the H2 as well before proceeding. So here color is green and text decoration is underline. So it is coming with the underlined. Now these are the two ways in which you can put the things in the same HTML document. Remember if you have passed some of these styles by embedding and if you want to make some changes in a particular thing again you can come to H1 tag. For example if for this particular H1 I want underline. So what I can do I can actually come and still can pass the inline style sheet. So here what I'll do I'll say text decoration underline. So not the first H1 but the second H1 will be decorated with the underline like this. Similarly, if you want to change some of the attribute which is being defined initially, like for example, I said like all the H1 will be having color blue and the text MS. But maybe if you want particularly this H1 should not come in MS then you can just pass the same attribute again here and that will override the previous one. It is like the inheritance if you are from the programming background that this one is the parent and this one is the child specific val uh values. So if there is nothing defined then it will take it from the parent otherwise it will take its own value if you want to make some changes like font family here I want to put it aial so I'll come here and you can see this is the aerial text so this is about the embedding and inline style sheet but if you want you can just cut all the style attributes from here and I'll take another document where I'll save them all. And now let's save it in the same folder like currently I'm working in the CSS folder. Uh inside which you have the demo.html and inside this I will save it as styles dot CSS and here you can find the CSS extension as well. So you can choose it from here as well. So now I have saved this CSS. All right. So now next thing what I'll do. So let's come back to the browser and if I'll refresh you can see only the inline stylesheet where I said font family aerial and text decoration underline is still there. Rest all the styles are gone away. So what can I do is I can actually link this stylesheet into this HTML document. And for that what I'll do I'll come to the head section again. And here I will pass the link tag. I don't want to put anything inside it. So I just close it. It will be a non-pair tag or empty tag. And now link relation. Relation is that I'm going to use a stylesheet. So link relation is a stylesheet. Again you can specify type which type of text this linked file is going to bring here. It will be the CSS again the mime type and href. The most important thing that's the hyper reference. So both are in the same folder and inside the CSS there's a file called styles dot CSS. So again I'm passing the relative path out here. So maybe if it's done I should get these styles back. So let's refresh it here. So now I get all these styles which I have defined in this style. So these are the different ways using which you can actually use a stylesheet inside an HTML document. So here we covered the three ways that is the inline stylesheet like this, the embedding stylesheet where we put the style tag in the same HTML document and this is the linking where I created a separate style sheet and then I pass the hyper reference here in the link tag and here is how it is working. So this is all about the different ways of using the stylesheet in HTML. Now let's get started with the basic implementation of CSS. So here in this practical implementation we will see how we can start working with the basic CSS with the existing HTML document. So let's get started by implementing the CSS in the HTML document. So for getting started with a very basic example of CSS, what I'm going to do is I will put the style tag in the head section. In HTML, we have already learned that the head section is basically meant for putting the title or for any resources. And here I'm going to use my style as a resource. So for that what I'll do, I'll start the thing with the style tag. And within this style tag I can also put an attribute which will tell the mime type since it it will not be a basic HTML syntax. So in general way what we do we will put some mime type text/ CSS. All right. Now inside this style tag you can put the style attributes. All right. So what I'll do I'll put for the couple of tags here. Let's say for the H1 tag. So for H1 what I want to do is I want to show it with the color blue and I want to show it in the SMS font. So for that I'll say font family colon MS. So basically you can observe what I'm doing. H1 is the element for which I'm putting this style. Now inside these delimiters these curly braces I will put all these style things what I want to put and then inside this I will put the different attributes such as color is the attribute blue is the value. So I will separate the attribute and the value with a colon and similarly if you want to pass multiple attributes you will pass semicolon as a separator. So you can just put semicolon again and in case you want to put some more styles you can continue by putting that. So this is all what I want to do for H1. Similarly let's put one more that is H2. And here I'll just put one style that is I want the color should be green. All right. So what happened when I'll come to the body and I'll simply put H1 tag with the text like welcome and in H2 I'll put another text easy learning. All right. So let's come back to the browser and when I'll refresh this, you can see the H1 tag is coming with two attributes that is the color blue and the font is comic sense MS while the H2 tag is simply coming in the green color with the default font and all the default attributes. So this is one of the way of putting the style. In our coming videos, I'll show you what are the different ways to style the HTML document like whether it will be inline the out out outside some file or like embedding the style in this way. But this is all for now. Hi, in this video of CSS we'll discuss about giving the styles to the font like if you want to give the font a different color or some style rules like the font family you want to change if you want to give some styles like make it bolder make it itallic or something you can go for the fonts in the styles so let's see what all different options are available while working with the fonts in CSS so here now with the reference of font style in CSS I have taken a number of paragraph tags and in each P tag you can see there are different options available for the fonts like in the first one where I have used font family attribute of CSS I have passed three different kind of fonts that is SMS monotype Cosa and Korea so it will give the priority to the first font but if the first font is not installed in your system then the second font will be applied and again if second font is not available in your system then we'll go for the third font and if none of the form is available in your system then the default font will be shown to the user but in this particular case in my case I do have MS at least everyone has this particular font so the first font will be applied to this text called changed font family and here you can see in the output you can see this particular font is nothing but MS. Similarly if through CSS you want to pass some styles like you want to make any particular text as itallic you can use this CSS class font style rather not CSS class but uh the attribute so font style is the attribute here and the value is italic. Let's say if you want to make the text italic at the runtime in any particular event, you can't add the italic tag at that particular time. So that's why we should learn how to make a particular text itallic using the CSS attribute. So font style italics and here this is italics is the text. So you can see this is italics. All right. So this is the font style italic which I have applied for this particular text. Similarly, we do have a variant here for the font where I'll use the attribute font variant and the value is small caps. You can make it none which is by default. So what it will do all the capital letters which are available here like this is small caps example. So T S C E the particular the respective capital words will be shown in the capital but all the alphabets who are available here in small cases in small letters will be shown in the smaller caps like this. All right so you can see the size of these fonts is smaller than the caps size form. All right. So this is how you can use the small caps. Similarly, if you want to make it bold any particular text, you can use the attribute font weight at that particular time which will make it bold, bolder and maybe you want you can put some numeric values as well depending if your particular browser supports that font uh options. All right. So like here you can see font weight is bold. If you want to make some nested text even more bolder, you can put it bolder as well. Now, next thing which comes here is font size. Font size is here like you can see 30 pixels. We do have the different measurement units as we have learned. So here I am passing the unit as pixel. So the font size of this particular text will be nothing but 30 pixel as you can see here. All right. Similarly, you can increase or decrease size as per your requirement. All right. Now, it's 40. So, let's make it 40. All right. Similarly, if you want to use small and large, like in HTML, we do have the small tab, small tag and the big tag. But here, if you want, you can use the font size attribute in that particular situation. And you can use the value small and large. So comparatively to the default text if this font this text will be in the smaller font and similarly comparison comparatively to the current text this particular text will be larger. As you can see here this is smaller in size while this one is larger in size. This is your default font size. All right. So comparatively you can check like this one is small and this one is large. And here I have used the shorthand notation for passing the different font styles and a single line. All right. Like font colon italic small caps bold 50 pixel Georgia. All right. So this is the font family which I am working with. This is the size. This is the font weight. This is font variant. This is font style. All right. So all the different attributes which we have used so far have been applied in a single line and this one is the shorter way to style the text. So while working with CSS you can use these various options in order to style your texts. In this video series we are going to begin with the JavaScript. JavaScript is basically a scripting language which can be embedded in a HTML page. HTML page simply means any web page which is running on worldwide web. Once you embed the JavaScript in the page, you can provide the various functionalities to that particular web page such as you can put some validations. You can make the page even more interactive. You can put some animation kind of things. So that is all we can do using the JavaScript. So make sure before getting started with the JavaScript you have the sufficient knowledge of HTML and CSS as we will be working with the web page and these two are these uh important things which you must know for creating the interactive web page. Now here as I just said it's a scripting language but if I'll add something more I will say it is a clientside scripting language. Client side means whenever you will execute the JavaScript on a web page the complete execution will happen on the client side only. It there will be no serverside interaction while executing the JavaScript. That's why whenever we'll try to do some operations like putting the validations or doing the animation like things everything will execute on the client side which will also efficiently execute the page means the performance of the page will be more better. Now something more about JavaScript let's see it is untyped. And typed means if we know something about the programming languages, you may know about the thing called data types which specifies the type of data we are going to process. But while working with JavaScript, you will observe like it is untyped means it is not a type language. So whenever you'll have to store something, you will just use a variant type and that type can store any type of value. So we will have to take care like which type of data we are going to manipulate manually. Apart from that it is multi-paradigm means you can do various kinds of development website development things related to JavaScript. Nowadays, JavaScript is also a backbone of so many different technologies like jQuery, AngularJS, NodeJS and so many JS- like technology you may be hearing nowadays. It is functional which will make the code even more modular. You can split the uh particular code in the different functions and you can call them up on a particular event as it is also eventdriven. So using JavaScript in such a way will make it wonderful and so that we can use it even more creatively. It is interpreted by browser's JavaScript engine. Now if the question comes like when I write a simple HTML how it runs every browser has a passer which reads the HTML tags and render the text accordingly. For example, if I use H1 tag, so the text written within the H1 would be shown as the H1 as a heading one, the biggest heading. But if I say what about JavaScript means if I'm writing some logical code, some programming like code, how the browser will be able to execute that? So for that as it is mentioned, every browser has the JavaScript engine. For example, for Chrome, it is V8 engine. For different browsers, it's different engine. So that JavaScript engine is actually enable enough to execute the code which is run which is written in the JavaScript and make sure while doing this your JavaScript must be enabled for that particular browser only then you will be able to see the execution of your JavaScript code. Now let's move on to some more advantages of JavaScript as it is less server interaction. All right, means while executing it will execute mostly on the client side. So it will be a lesser interaction with the server and that will make the performance better. All right, because if the uh code is here only and it is running on the client side, the page will not be posted back to the server again and again and that will definitely enhance the performance of your web page. Richer interface as in jQuery we internally use some of the functions of JavaScript which makes the uh interface even more better. So you can say like it will give you a richer interface through animations or through some uh dynamic CSS kind of things which will make it even more attractive and the client will feel like good while working with the web pages increased interactivity that's what it means all right when you will create a rich interface a more interactive interface it will be good for the client and it will keep on coming to you. So these are some key features of JavaScript. From our next video onwards, we will start with the implementation of it. In this video of JavaScript, we are going to cover arrays. In computer science, array is basically a data structure which allows us to store multiple values in a single variable. Yes, earlier we have read that it is not possible. But the way to do this thing is actually a bit different. Here when we will define such variable that variable will actually behave like a collection and in that particular collection there will be a number of memory blocks would be defined. How many memory blocks that we will define while defining the arrays. That means when we will define the array along with the definition we will specify the number of blocks which we want and after that we can start storing the value in each of those element blocks. And since as you can see it stores a fixed size sequentiary collection of elements that means it is a fixed size. the size which you will specify by the time of creating the array later you will not be able to change that and if you will try to store values more than that your program may get terminated abnormally. So make sure while defining the array you are specifying a handsome amount of size which will not cause any overflowing. Now you have defined the elements number of elements of an array and after that you can start storing the values into that. Whenever you want to access a specific element block from that list of array blocks you have to pass the index as whenever you create an array the index of each memory series starts with a zero to 1 2 3 and so on. For example, if I have defined an array of size five, then the lower index will start with zero, then 1 2 3 and four. So whenever I want to retrieve or assign the value, I have to pass the index like that. So here you can see there are couple of syntaxes about writing the data. How we can start writing the uh data or elements in an array. So here what I have done I have taken a where fruits fruits is the name of my array is equal to new array. All right this new is a keyword to allocate a new and fresh memory space and start into that you can pass the elements like apple orange mango. So it is sequential storage. Here I have not specifies specified the size. You can also do that like you can say new array five and then later you can assign the values. Here I directly stored the value. So the first element will get stored in the index zero then one and two. And very similarly I have done here as well. So both are the valid syntaxes. If I talk about JavaScript once you have defined the array and after that if you want to retrieve the elements in separately. All right. So what you can do fruits like the name of the array and then in the square brackets you can pass the index as I said earlier index will start with zero. So when you will say fruit zero so it will give you apple fruits one will give you orange and fruits two will give you mango. So let's see practically now how we can start implementing the concept of arrays. So now in this implementation of arrays as you can see first of all I have defined the array of length five and I have used new keyword for allocating a new and fresh space for this particular array. The size of the array is five. That means it will create five separate element blocks in which you can put a specific value. And to point out those particular blocks we can pass the index. So like here you can see the index is starting from the zero then 1 2 3 and four. So in this particular index you can assign any type of value. As JavaScript is not a type safe language you can put any type of value. But when we talk about array basically it is the collection. So we generally make a collection of similar type. Here I have put the value of same types. And now to read that particular array what I can do is I have just written a loop which will start from the zero till the less than five that means four and obviously it will run this loop will run from 0 to 4 and every time I'm running this I'm reading the if index which is changing from 0 to 4. So and every time I'm uh printing the value I'm breaking the line as well. So let's see how this particular output will be looking like. So as expected here the value from 10 to 50 is being printed. You can also do the inline initialization for the array. As here you can see right after the new array I have not passed the size but I have used the curly braces to initialize all the values. So here I have passed five values. So array is always having a static memory allocation. Any particular number of uh values which you will pass here that will be the size of the array. For example, if I'll pass the sixth element. Now the length of the array is six. So let's execute till the fifth index. If it is six uh length is six, the last index would be five. All right. So let's refresh this one. And here you can see the output. So as we have discussed these particular syntaxes in the uh description also like there are various ways of initializing an array and anytime you want to read you can simply pass the index after that and you can retrieve the value. When we have a number of elements all together sorting and searching are the two very important task that we need to do. If we have a number of elements stored in an array and I want to sort them in a particular order that is either ascending or descending order, I can go for the sorting concepts. And here I have written a very simple program of bubble sort in which I am sorting an array in ascending order of length six. So here in the very first line you can see I have assigned some values in an array like 7 2 8 1 3 4. It's a random values I have put inside this and now I want to sort it out. So before sorting I have just printed the value right here like this before sort and if as you know it's a sixth number of elements are there. So 0 to 5 this loop is running and I'll print each and every value out there. Now as soon as I print it I'll start doing the bubble sort. So for any successful bubble sort I need to run a loop for n into n minus one times. So that is what I have done here like here it's n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n n is the length of the error that is six. So this loop is running for the six times. Inner loop is running for the five times. So overall it will be running at the 30 times. So that is the maximum number of cycles that we have to execute for a successful bubble sort. So let's see what I have done inside this particular loop. So here you can see like J is started from zero and obviously it is less than five. So when the first time this loop would be running the value of J is zero and J + 1 is of course one. So if the value of the earlier the earlier value if the earlier value is greater than the later value for example J is zero and one. So if a ar r0 is greater than a r1 of course in this particular case 7 is greater than 2. So what I want is I'll have to swap these two values so that two will come before the seven. All right that will not make it a complete sort but of course uh the two values will be sorted because it is the ascending order. So any smaller value have to come before the greater value. So that is what I have done inside this like these three lines are simply swapping the values of the zeroth and 1th index. So the index of the value of 1 index will be here in the zeroth index and the seven which is at zeroth index will come to the first index. So similarly this loop will go for the uh five times means 0 to four index would be covered. And of course as you can see here in the logic I'm putting J + 1. So the last index is five when J is four. So what it will be saying if a ar r 4 is greater than a ar r r5 that means these two values will be compared and if required the swapping will take place but only in one cycle the complete sorting will not be done. So to iterate this particular concept again and again I have placed it inside this another loop and it will make it show like in 30 cycles this loop will be sorted completely and after that I have printed the loop again in the very same way I have done it earlier. So let's execute and here you can see the output like initially it was like 7 2 8 1 3 4 and later it's 1 2 3 4 7 8. All right. If you want to sort it to the descending order, you can simply com uh replace the greater than symbol to the less than. Now the swapping will be done when the smaller value is before the larger value. So now you can see this whole array is being converted into the descending order sorted. In this video of JavaScript, we will begin with the variables. As in the programming and even in the scripting of JavaScript, variables are something which can store a single value at a time temporarily. Temporarily means the value can be changed later during the execution if required. As earlier we have already discussed in the features of JavaScript like it is not a type safe language. So whenever you will be defining any variable it will not be having any specific data type. So we will use a where that is variant keyword whenever we will go for any variable declaration and after that we can assign any type of value. But since we want to be logical we will not try to do so and we'll stick to a single data type of value. Now whenever you will start working with the variables they would be having two scopes either local or global but practically we will do that as soon as we will start working with the functions. So if any variable is defined inside a function that is a local variable and if you define any variable out of the functions it will be a global variable means it can be accessed inside any functions you are making. But initially it is nothing like that because we are not going to implement any functions. So let's see practically how can we start working with the variables in JavaScript. So now in order to declare the variable here we will use the where keyword and after that you will name the identifier. So like here if I want to store some name I will name the variable that is the name and uh then if you want you can assign the value right here or you can do it later. So if I want to assign the value I what I'll do I'll put a double quotes since here I want to store the string type of data. As we already discussed that JavaScript is not a type safe language. It is loosely typed language. So you don't have to specify a specific data type right here. Just by specifying the where keyword you can define a variable and after that you can assign any type of value into it. Let's say here I assign a value. Similarly if I want to assign some other things like age which is a numeric value I can do that as well. And similarly you can assign any type of value like the same. For example, if you want to assign some decimal numbers also, you can do that in the very same way like this. And similarly, whenever you want to print the data, you will use the same method that is document.right, which we have already used either document.right or document dot write ln. So make sure that whenever you are printing the value of an identifier you will not put them in the quotation and you will keep them like this. But if you want to put anything before that you can simply put it in double quotes like name and then a concatenation symbol that is the plus. So let's save this one and see the output in the browser. So as here you can see similarly if I want to do some more things I can do that in a very simple way. If I will run this you will see all the things in the same line like this. But if you want to break the line as we know we use the BR in the HTML. So I will simply concatenate that right after each message like this and again in age and if I'll do anything after salary so that will again come in the next line. So now this is the output we were looking for. So similarly like this you can start creating the variables and can assign the values as per your requirement. Now here in this video we are going to do some interactive things using some of the methods or timer like concepts. We can actually make some animation like things in your web page and this will definitely not destroy the performance of a web page as whatever functionalities we will make it will all execute on the client side only. So there will not be any postback things happening. So let's see practically how to do some basic level of animations in your web page. So here inside the body you can see like I have placed the img tag for putting the animation and here I have four images in the same location that is 1 2 3 4.png. All right. And uh the name of this img tag is img1 so that I can access it uh from the JavaScript code from this name. And uh I have called a couple of method which I'll discuss later. But before that let's go to the JavaScript tag to see how I have placed the animation. As here you can see in the very first line inside the script I have placed an array of images in which I have just put the name of the images. As I said 1.png 2.png 3.png and 4.png so one by one I want these images will be set in the img tag. And for pointing each particular element of this array, I have taken the uh I means a index variable which will point an individual element of this array. Now uh after that I have taken a reference so that I can uh control the timer and the slideshow which I am getting started. I'll discuss about this riff later. Now inside this function pick library what I have done is uh document. Since you can have a number of img tags in your document, I am asking for the first one with the index zero. Either you can use this particular name also inside this square bracket. So uh just I wanted to check like uh the src will be a r i initially the value of i is one. The index will begin with zero but I want that the uh I it should start with the one. Why? because by default I have placed the 1.png in the uh img tag. All right. So uh as soon as uh you will load it you will show you will see this 1.png but after a second it will be uh changed to 2.png. How? Because this will do the thing. It will set the uh image at the index one and then it will do the increment by one. So 0 1 2 3. If this increment will make it greater than three, I will reset the value to zero. All right. And now I will create another function called start. Inside this I have used the set interval method. Basically the set interval method will take a couple of argument. The first one is the callback function. So here I have passed the name of this function with the name pick library and it will set like this uh set interval function will keep on calling this pick library after each 1,000 milliseconds. So after each 1,000 millcond this method will be uh called again every time the increment will be there. That's why I have taken this particular variable I outside the scope outside the function as a global variable. All right. uh now uh it will start the things and now to stop uh and one more thing by the time I was setting the interval I assigned the reference of this interval to the variable called ref which I have defined already. Now in the stop when I want to stop the slideshow of the images I will just pass that reference itself because there may be a number of intervals there in the single HTML page. So I need to specify like which particular interval I need to clear. That means uh when I'll say clear interval ref it will stop calling this pick library after each 1,000 millisecond that is 1 second. And when actually I'm stopping that as soon as you will put the mouse over the image it will stop it. Means you can easily see that particular image but as soon as you will say mouse out again that particular uh interval would be set. So uh you can do that and one more thing I want this slideshow to be there to be started as soon as the page gets loaded. So I can also call this uh start function on the onload event. So what I'll do I'll simply say start. All right. So now let's come to the browser and see how the output is looking like. So here you can see uh the different color of logos are there. All right. So some of them are 1.png 2.png and all. As soon as I will put the mouse over this image, you see now the image is not getting changed. All right. But as soon as I will move the mouse out of the image again this transition will begin. So in the same way you can use the set interval function for the different purposes like if you want to change the uh color of the font or of the background at a particular time you can just set the logic like this and you can put some animations in the output on the client Right.