So, hey guys welcome to the course. In this video I will show you how you can set up your environment for html development. So, for writing html code you need two things. The first thing is the text editor where you will write all of your code and the second one is the browser where you will display your page. For the text editor I will use the vs code and for the browser I am gonna use the google chrome browser. I will give the link of both of the software in the description of the video as well as in the resources file after the video. After you have downloaded and installed the vs code just open it. Now if you open the vs code for the first time you are gonna see this window right here. Here you will see multiple options like creating a new file or opening a file or opening a folder. So I want to create a new project. Now for creating a new project I need to create a folder where we will be creating all of our files and folders regarding the project. So let's go and create my folder. I am gonna create it on my desktop. You can create wherever you want. Just double click on your pc and then new folder and in here you can give the name of your project. So I am gonna give it the new project, new project. See my project has been created. Now let's open up this in the vs code. Now for opening this folder in vs code you have multiple options here. You have the open folder option here also here and on the top right corner top left corner you can see I also have the open folder option but what you can also do is you can just drag and drop your folder in vs code to open it. Let me show you how you can do that like this and drop it over here. Just wait a bit and it will open up your folder in the vs code. Just make it larger. Now here you can see my project has been opened in the visual studio code. Also here you can see new project. So that indicates that my project has been opened. So how we can create a new file inside the vs code. Now you have several ways of doing this. You can create it from here or you can create it from here or you can also double click here to create a new file. So let's create our first file which will be the index.html. Now I named it index because this is gonna be our home page. So this is gonna be our main file. So our main file of the project of the HTML project will always be the index and we are creating the HTML file. So we must use the extension .html here. So congratulations you have created your first HTML file. Now I will see you guys in the next video. Hey guys in this video we will learn the introduction to the HTML. So what is HTML? HTML stands for hypertext markup language. HTML is the code that is used to structure a web page and its content. It is not used for designing the elements. It just provides a skeleton to the web page. For designing our web page we use the CSS which we will talk more about in the CSS module. So the HTML element consists of three elements which you can wrap your content to make it appear a certain way or do certain things. The main parts of the HTML is the opening tag, the content in between this tag and the closing tag. The opening tag consists of the name of the element and the opening and closing angle brackets. So these two brackets are called the angle brackets and you also have the closing tag. Closing tag is similar to the opening tag but it has the forward slash before the name of the element. Whatever you will write or type here will be shown in the browser and these tags won't be visible in the browser and you also have the attribute for your elements. The attributes contain extra information about the element that you don't want to show in the actual content. The attributes consist of three things the name of the attribute and the equal sign and the attribute value wrapped in opening and closing quotation marks. What you can also do with HTML is you can nest the element inside another element like this. I'm typing the span tag in the p tag. You can see write whatever you want and let's delete that. You can see I have nested the span tag inside my p tag. So this is called the nesting. So if you are wondering what is the meaning of these tags so just don't worry we will talk about them in details in the upcoming lectures. For now this is it for the video. I hope you guys learned a lot from this. See you guys in the next tutorial. So hey guys in this tutorial you are gonna learn about the complete structure of the HTML document. So the first thing we use when writing the HTML document is the dog type declaration. So how you can declare the dog type declaration. It is quite simple just hold the shift button on your keyboard and the opening angle bracket. You can see the visual studio code is giving me the suggestion just click on the suggestion and the visual studio code has inserted the dog type declaration for us. Now this declaration defines the instruction for the browser about what version of the HTML the page is written in. Dog type HTML means we are using the HTML5. So this is the first thing that you must declare in your document. There is nothing more special about this element so let's move on to our next element which is the HTML element. Now how you can type the HTML. It is quite simple just type the HTML and you can see the MF is giving me the suggestion just click on the suggestion and the MF has inserted the opening and closing tag for me. Now this element is known as the root element of all the elements in HTML and this is the parent of all the elements of HTML. That means all other elements you are gonna type will be the descendants of this element. The HTML tag tells the browser that this is the HTML document. The HTML element has two direct child elements. The first one is the head element. The head element acts as a container for all the stuff that you want to include in your web page but you don't want that stuff to be displayed on your web page. The head element contains machine readable information about the document for example the meta tag which provides the important information about the page for search engine optimization but the user of the page can't see that it is only for search engine. The permitted parent for the head element is the HTML element that means no other element is allowed to be the parent of the head element. Now we have several other HTML elements that are child of the head element. Now there are several child elements of the head tag. I will show you the usage of these elements later when you have good knowledge of HTML. These are not important for you to understand in the beginning but let's just talk about the element that is necessary for you as a beginner and that is the title element. Let's write the title. Now the title element sets the title of your page which is the title that appears in the browser's tab the page is loaded in. Now let's open the Google Chrome browser with the live server. Just click here on the go live button on your IDE. Now let's go to the browser. You can see my title is displayed here on the tab. Now let's move on to the second child of the HTML element which is the body element. Let's go to the visual studio code and create a body here body click on the suggestion. Now the body element contains all the content that you want to show to web users when they visit your page whether that's the text or images or videos audio etc. So let me show you the example with the paragraph. Let's create a paragraph now let's check in the browser you can see my paragraph is displayed on the page so that's pretty much it for the video. So hey guys in this video we are going to talk about headings the paragraphs and some other elements. So let's start off with the headings. First of all let's declare a proper html structure just hold just hold the shift and press the exclamation sign on your keyboard and you can see emet is giving me the suggestion and if I click on the suggestion it will give me the proper html structure I was looking for. Just don't worry about these meta tags because these are not necessary for you to understand in the beginning. So without wasting any more time let's start off with the headings. Heading elements allow you to specify that certain parts of your content are the headings or the subheadings just like in books you have the main headings or and the subheadings and we you have the paragraphs. Similarly in html you can have these two html contains six heading elements the first heading is the h1 which is the most important one and the last heading is the h6 which is the least important one. Now these headings are used to index the structure and the content of your web page you should use the headings as the main title of your page and then you should use the top level headings which is the h2 so the h1 is this is main heading and then we have the top level heading which is h2 and then we have the h3 which is the subheading and then you can also use the h4 h5 and lastly we have the h6 now let's go to the google chrome browser and check how these headings are displayed you can see i have already opened this page in my google chrome browser so let's go and check the and you can see this is the result of all our headings that we typed in our visual studio code like i said before we also have the paragraph elements in html document the paragraph elements starts with p tag so let's go to the visual studio code and then type p you can see amit is giving me the suggestion just click on the suggestion and type here something and now we have typed the paragraph element so let's check in the google chrome browser you can see my paragraph is displayed as a normal text in the browser now what if i add spaces in between the paragraph will these white spaces render in the browser the answer is no the reason why is because the html is white space collapsed it ignores all the white spaces and line breaks that you put inside all of the html element but if the white space is really needed for example if you want to show a poem in your html document then there is one element that can help you with this and this is the pre element so let's go to the visual studio code and type the pre element just type pre and you can see amit is giving me the suggestion click on the suggestion now the pre html element represents pre-formatted text which is to be presented exactly as written in the html file white space in this element is displayed as written it preserves both spaces and line breaks so let's type something random here with spaces and line breaks and see the result in the google chrome browser for typing something random we use the lorem l-o-r-e-m and type the five because we want five words and then press enter and just copy that five times or three times or four times white spaces white spaces and line breaks and white space here also here and let's check in the browser you can see my white spaces are rendered in the browser as well as my line breaks are rendered in the browser now what if i add the white spaces and line breaks in my other html elements like the headings elements and the paragraph elements what do you think the result will be so let's check in the visual studio code i am pasting the first line with the one element with the h2 element also h3 and paste all that in h4 also in the p element now let's delete this pre and check what will be the result you can see none of my white spaces nor the line breaks are rendered and there is also a way of doing this in the css which i will show you in the css lecture module but if you don't want to show the point or something like that and your objective is only to add a line break then you can use the br tag so let's go to the visual studio code and add a br tag let's delete that i'm creating the p element this is a paragraph with line breaks let's see so let's check the output in the browser you can see my paragraph is displayed without any line breaks so let's add line breaks in it i want to add a line break here so what i will do i will type br you can see it is giving me the suggestion yes br and i want another line break here br now let's check the result in the google browser you can see the line break is added here after the a element and also the after the paragraph element like we did here you can see i added the line break after the a tag and also after the paragraph tag and you might have noticed that i did not give the closing tag for the br the reason for this is because this is an empty element you don't need to give the ending tag for this so that's pretty much it for the video i hope you learned a lot from this video now see you in the next video so hey guys in this video we are going to talk about the display property of css so what is the display property the display property specifies how your element is displayed every html element has a default display value depending on what type of element it is even though we have so many display properties in html but we will cover them in the later videos but the default value for most of the elements is block or the inline so let's talk about the block level element first what is a block level element a block level element always starts on new wine and takes up the full width available it stretches out from the left to the right as far as it can okay let me show you the example of this individual studio code just create an h1 tag with some dummy text and also an h2 tag with some dummy text now open the page in google chrome browser by clicking the go light button and now go to the google chrome browser and here you can see even the text is not covering the whole page but it's still but it is still taking the full space from the left side to the right side and the text inside the h2 is not displaying in front of the h1 there is a lot of space left but still the h1 is covering the whole space that is available to it and adding a line break for the h2 element and the second level element we are going to talk about is the inline element an inline element does not start a new line and does not take full width available it only takes up as much width as necessary so let's take a look at the example of this individual studio code let me delete that and now create a small tag with the dummy text in it lower m 5 and also create a strong tag which is also an inline element and put some random tags here now let's open up the google chrome browser and see the results and here you can see my small tag didn't add a line break and didn't take any extra space instead they are displaying side by side in our hcml document let me add one more inline element for explanation but first let me clear one thing if you are wondering why i am not explaining all these tags i would say just don't worry because i will be explaining all these tags in the upcoming tutorials but for now just focus on the topic i am explaining so let's add an image using the img so let's go to the visual studio code create an image here using the img so let's specify the path of the image in the source tag i am a g image this is my image and also alternative text for my image this is image let's give the width and height to this image let's give it 300 pixels and also the height 300 pixels now let's just open up the google chrome web browser to check how it is displayed and here you can see my image is at the similar level as my text in the same line my text is not adding any kind of line breaks now let me explain you one more example with the combination of these inline and block elements so let's create a p tag which is a block level element and put some tags in it and also create an inline tag put some tags also here now in this example what i'm trying to say is that you can nest any inline element inside a block level element and that text will be displayed in the similar line because the inline element does not add a line break now let's check in the browser and here you can see this is my inline element and it is not adding any kind of line break in my block level element so i hope you understand that we can nest the inline element inside a block level element now let's nest the block level element inside the inline element just go to the text editor vscode and add the example here here you can see i have created an example with an inline element which has a block level element in it and let's now open the google chrome browser and check how it is displaying this you can see this is an inline element this is the line from the inline element and as soon as i added the p tag it automatically added the line break and here you can see my first line of the inline text is here and then you can see after the end i have specified the p tag and the p tag is starting a new line and covering all the available width on my webpage and then it is starting a new line for the existing inline text so that is it for the inline and block level elements see you guys in the next tutorial so hey guys in this video i'm gonna talk about four of the inline html formatting elements so the first one is the abbr so abbr defines an abbreviation abbreviation is basically the shortened version of something else like html usa or or eu abbreviation can give useful information to browser translating systems and search engines the title attribute is used with the abbr tag to show the description of the abbreviation when you hover over the abbr element so let's create a paragraph in which i will nest the abbr element create a p tag like this and type something here in this tutorial now let's wrap this html inside the abbr tag cut that abbr and here in the title attribute you can specify the full form of the abbreviation so let me type the full form of the html now let's go and check the output in the browser and here you can see it is showing me the shortened version of the html which i wrapped inside my abbr tag but when i hover over this you can see it is showing me the tooltip so this is the abbr element now moving on we have a b tag the b tag is used to draw reader's attention to the elements content this tag specifies bold text without any extra importance now let's create a b tag inside any bloke level element like in paragraph and enter some text like this is my blue car now let's wrap the word blue inside the b tag to make it bold and if i check this in the browser you can see my word blue is bold now if you want to show something important in your text it is recommended to use the strong tag let me show you both of these elements let's go to the visual studio code and type strong tag here type anything here like this now let's wrap the very in the strong tag and now let's check in the browser you can see they both look the same but the semantic meaning of these two tags is different from each other the strong element is for the content that is of great importance while b element is used to draw attention to text without indicating that it is more important over next element is the i tag so what is the usage of this i tag we use the i tag to write something that doesn't look the same as over other part of the paragraph such as some technical terms or a phrase from another language or a thought for example so let's go to the visual studio code and take a look at the example now i will wrap the i tag inside my paragraph so let's create that now let's wrap the homo sapien word inside my i tag if on the suggestion or enter and paste the text that you have copied here and now let's check in the google chrome browser you can see this shows the homo sapien part as italic text but you should use the css form style property if you want to style your paragraph as italic and the last element for today's tutorial is em the em element represents stress emphasis of its content that means when you want to emphasize something out of your sentence so let's go to the visual studio code create a paragraph you can see if i want to emphasize this now i should wrap this in my em tag now let's check the output in the google chrome web browser and you can see the output of this looks the same because they both are italicized but the meaning of using them is different so that is it for the video guys see you in the next one hey guys in this video we will talk about five more formatting tags of html so let's start with the video tag video stands for bidirectional override so it is used to change the current text direction of your content in the dir attribute you specify the direction of the text like rtl for right to left and ltr for left to right so let me specify the value for this as right to left rtl and now type some text here this is english text let's open this up in google chrome browser you can see it is written in the reverse form because we have changed the direction of the letters as well as the direction of the words you can see this is written in right to left direction and the words are also written in the right to left direction moving on we have the br tag so let's go to the video studio code and create a br tag inside a paragraph tag so the br tag is used to insert a single line break it is a block level element that means it covers the complete available space the br tag is a self closing tag which means you don't need to add the closing tag for this you can see here i didn't add the closing tag and now let's go to the google chrome browser and check the output you can see my br tag added a line break after the a element and now my paragraph is displaying on the second line you can see i have added the br after the a tag so here it is it has added a break after the a tag the br tag is useful for writing addresses and points let's talk about the address tag as the name suggests address elements are used to write the addresses in html document the text in the address element is rendered in italic and it is a block level element so the browsers will add a line break before and after the element so let's create an address element click on the suggestion now you can see my address tag is created so let's add some dummy data in it you can see i have added some dummy data with a bunch of line breaks and now let's check in the browser you can see my address is written in the address form like we see in websites or some other blogs now moving on we have the side tag the side tag defines the title of the work a creative work that could be a book a song a painting and so forth so let's create a side tag inside my paragraph tag in visual studio code let's go to the visual studio code so let's create a paragraph tag first paragraph and here i will create my side tag i will give the name of the work like the avengers and now write here the name of the writer now let's see the result in the google chrome browser you can see it is written in italic form and the last element for today's tutorial is the code element so let's go to the visual studio code and type code so the code element displays the content inside the tag as a chunk of code let me show you by writing code here and now let's see the result in the browser this is how the result of the code looks like so that is it for the tutorial guys see you in the next tutorial so hey guys in this video we will talk about some more inline formatting html elements so let's start with the kbd so kbd is used to define the input from the keyboard it is an inline element so that means you can have multiple kbd tags in one line to show any kind of input like the shortcut keys of any kind of software so let me show you through this example like ctrl and then here write plus and then another kbd control c and let's wrap this in a paragraph and now let's go to the browser and check you can see i have already opened my page in google chrome so let's go to the browser you can see this is how it displays the kbd element now moving on we have the mark tag so let's create the mark tag in visual studio code create a paragraph type some random text now i want to mark this paragraph so let's cut this control x add a mark element and now paste your text here you can see i have nested the mark tag inside my paragraph tag and now let's see the result in the browser you can see my text is highlighted like you do with highlighter on books now that's it for this element let's move on to our next element which is a block code element so as the name suggests block code is a block of code that is quoted from another source it is a block level element so it takes up the full space that is available to its parent element let's write the block code you can type any text here let me type the lorem text and now in the block code we also have the site attribute where we give the link of the source like zk.com this is a sample url so let's go to the browser you can see this is how the block code is displayed if you don't want to take the full space for the code and want to show the code inside a paragraph or if your quotation is short there is another way of doing that by using the q tag q is an inline tag and it is used for short quotations that don't require paragraph breaks so let's take a look at the example in visual studio code create a paragraph and type some random text and type q for quotation inline quotation and now let's check the browser you can see it has added the codes around the text in the q element so that is it for the tutorial guys i hope you learned a lot from this tutorial see you in the next one so hey guys in this video we are going to talk about some more formatting elements so let's start off with the span element so the span element is a generic inline container for phrasing content it can be used to group elements for styling purposes it should be only used when no other semantic element is appropriate the span is very much like the div element but div is a block level element whereas the span is an inline element the span tag provides no visual change by itself so let's write some text here let me wrap this inside my paragraph now paste it here now open your page with the live server you can see i have already opened so let's go to the google chrome browser and here you can see there is no difference in the paragraph and in the span element because span is only used for styling the text or styling some part of your element the span tag is used to group inline elements in the document once you grouped your text you can style it using the css so let me show you an example add a style attribute here add some kind of style css style like color and now i want my text to be red let's go to the google chrome browser and here you can see my text is red now i hope you understand the usage of span with this example our next element is time element it is quite simple to use just type time type anytime you want like 10 let's wrap this in a paragraph you can wrap this in whatever element you want now let's go to the browser and check the output for this you can see this is how the time element works next up we have the underline element this element is used to underline the text that is stylistically different from normal text or some misspelled words or it can be some word from another language so let's write the u tag u and let's write a misspelled word here like paragraph let me nest this underline element inside my paragraph element and now let's see the output in the browser you can see my paragraph is now underlined so that is it for the video guys see you in the next one so hey guys in this video we are gonna be learning about five more inline formatting html tags so let's start off with the strike through element the strike through text is rendered with a line through it that means we should use this for the text that is no longer correct accurate or relevant to the story you are telling let me show you this with an example so let's create a paragraph which is a low-level element and then nest this inline element inside that paragraph now for the strike through we use the s element click on the suggestion and type any text you want i'm typing my share is blue so this is our strike through text which is not correct and let's type simple paragraph here so this is my text that is correct and this is the wrong text that means my shirt is red not the blue one so let's check the output in the browser here you can see my page is opened in the 5500 on the live server so let's go to the browser you can see on my first line there is a line on my first paragraph and the second paragraph is the normal paragraph however s element is not appropriate when talking about something that is deleted we use d el tag for this let me show you with the example let's go to the visual studio code create a d el tag here and type anything you want i am typing the red let's go to the google chrome browser you can see there is no visual difference between this and this but the semantic meaning of both of these elements is changed so let's add this delete tag inside a paragraph with insert tag cut that paragraph my shirt is red and here i will add insert tag type blue or anything now what is this insert element the insert element is used to define which text is inserted in the place of deleted text so if i want to say my shirt is blue i will use the insert element because my this text is deleted text so let's go to the browser and see how it looks you can see my inserted tag is underlined it indicates that the blue is inserted in place of red moving on we have the small tag as the name suggests as the name suggests the small tag is used to display the smaller text in our content so so let me show you the example let's wrap this in a three tag type i am smaller so let's wrap the smaller text inside my small tag let's see the output in the browser you can see this text is smaller than the other one so this is the use of the small tag there is nothing more special about this and the last two elements are superscript and subscript so let's go to the visual studio code and create a superscript here with the normal text i'm gonna write a paragraph here i'm gonna write h and then i'm gonna write the two and then the o let me show you how you can transform this in a chemistry formula just cut that and create a subscript space and then paste that in here and remove the empty spaces now let's go to the google chrome browser you can see my two is displayed like this it is below the half height of the h and o so this is subscript let me show you example of superscript let's go to the browser enter and let's write anything you want you can see i have created the example of superscript it is the exact opposite of the subscript so let's go to the browser and check the output you can see my four is above the average height of the other letters of the abc so i hope you get the idea on how to use these two html tags so that is it for the video guys now see you in the next one so hey guys in this video you are gonna learn about the form element and its attributes so the form tag is used to create a form for the user input it can have multiple attributes and it can have multiple child elements so let's create a form tag first you can see the vs code gives me a default attribute so this is the action attribute so this action attribute specifies the type of method to submit the data with these methods are not necessary for us to because we are not going to work on server side you can ignore these attributes however we have some other attributes for the form tag like the autocomplete attribute just cut this attribute because we don't need it and add a autocomplete attribute now this autocomplete attribute specifies whether a form should have autocomplete on or off when autocomplete is on the browser will automatically show the values that you have entered before on some other websites in the input fields so let me explain you with an example let me select my autocomplete as off and inside my form element just add an input element and the type will be the text simple text and create a submit button here and in the value just give the name of the button let me also specify the name attribute for my input and here I will give the name as email now if you go on the browser and start entering something you can see it is not giving me any kind of suggestion because I have set the autocomplete off for my form element but if I set my autocomplete on for the form element it will automatically set the autocomplete on for all the child input elements so let's go to the visual studio code and set it to on and now if I go to the browser and start entering something here you can see it is giving me the suggestion about my emails now what now what if I remove the autocomplete attribute for the form element so let's check this and remove the autocomplete attribute from the form and now check in the browser if it is still giving me the suggestions and yes you can see it is still giving me the suggestions it gives you the suggestions for the values that you have already entered somewhere like the email or name or first name or last name it will give you the suggestion about these elements but if I change my input name to something else like the pet now it will not give me any kind of suggestions because I haven't entered my pet name anywhere else so that is the reason why it is not giving me the suggestions so let me show you another example of this let's change it back to the email and create another element with name now it is also possible to have autocomplete on for the form and off for some specific fields and vice versa now let's specify the autocomplete off for the form element and the value I'm going to select is off I want my email to give me suggestions so I will specify the autocomplete on for my email now let me also change the type of the input to email now let's check the result in the browser first of all you can see it is not giving me any kind of suggestion for my name and when I enter here you can see it is giving me the suggestions for my email and you can do the opposite and you can do the exact opposite of this you can set the autocomplete on for the form and off for the email and now if I check the in the browser it will give me the suggestion for my email oh sorry my name but it will not give me any kind of suggestion for my email so that is it for the autocomplete attribute now we also have the name attribute for the form you can see this is the name attribute so the use of this so the use of the name attribute is when you click on the submit button you can validate the data in javascript or do something else with your data and you can also select and style this in your css using the attribute selector and you can also use this to style the input element using the css using the attribute selector which we will be talking about in the css module and we also have the no validate attribute for the form it is used to submit the data on the server without validating it on the client side you will understand about this attribute when you work with the database so this is the usage of no validate now just cut this attribute and let's talk about our next attribute which is the target attribute the target attribute is used to display the response for the data that you submit by clicking the submit button to a new window or new tab or on the same tab let's take a look at the example select the blank here now just go to the google chrome browser and now if i enter some values here like this and if i click on this button it will open my response page in a new tab you can see it has opened my response page in a new tab but if you want to open the response page in the same tab you can also do this by using the value of target attribute as self so this is the default value of target attribute which means if you don't specify this it will do the same thing as you specify the value of this attribute as self now let's go to the google chrome browser and check the result enter some values click on the submit button you can see it has opened the response of the form in the same tab so that is it for the video guys i hope you learned a lot from this video and i will see you in the next one so hey guys in this video we will learn the basics of html elements so first one so let's start with the input so the input tag specifies an input field where the user can enter data avoid variety of types of input data and control widgets are available the input element is one of the most powerful and complex of all the html due to a huge number of combination of the input types and attributes the input element works depending on the value of the type attribute type attribute is the most important attribute of input element if this if this attribute is not specified the default type will be the text from the next video we will be talking about the type text of the input element and some of the attributes that are common for most of the input element so hey guys in this video we will talk about some of the most common input attributes you can see i have already created two input fields with input button with the submit button and now just give the autofocus attribute here now this is used to specify that your input element will automatically gets focused when the page loads let me show you with this example just go to the google chrome browser you can see it my input field has already gets focused before i enter the cursor in the input field now if i refresh the page my this input field is getting the cursor automatically and now if i give the autofocus attribute to this input field you will see the change let's go to the vscode cut it from here and paste it in the last name and now if i go to the google chrome browser you can see this now this is getting automatically focused when the page loads just refresh the page you can see instead of this one the first one the second one is getting the focus automatically so let me refresh the page again you can see my cursor is blinking here so i can write anything here so this is the autofocus attribute now let's move on to our next attribute which is the disabled attribute disabled attribute is used to disable the input field that means you cannot type anything in the field or you cannot do anything with the field let's give this attribute for our first input field disabled now like the autofocus attribute the disabled attribute is similar to the autofocus attribute it is a boolean because it does not have any value it is a boolean which means if you type it in your element it will set the value of the disabled attribute to true otherwise it will be false if you don't type this attribute now if you check in the browser you can see i am unable to type anything in the input field so this is the disabled attribute now let's move on to our next attribute which is the form attribute now the form attribute is very interesting attribute the form attribute specifies the form which the which this input belongs to if i create the input element outside of the form element with this attribute i can specify that this input element belongs to the specific form so let's copy this last name input field and paste it outside of the form now let's give the form attribute to the input field and in the value of the form attribute i should specify the identity of the form now let's give the identity to our form using the id attribute you can see i have given the form one id to the form element now just copy this and paste it here and now we have successfully created the relation between this form and this input element moving on we have the form method attribute the form method attribute defines the sttp method for sending form data to the action url for the submit button so let me paste that input field in my form and paste it here let's delete the attributes also this now we need a page for the action attribute so let's create that about dot html now copy all this and paste it here and let's delete that create a p tag here your form has been submitted now let's go back to our index.html and now add the action attribute for the form and here give the page you have created about dot html and now create a submit button here let's copy that and here specify the form method attribute and now we have two form submission methods get and post just click on the post now we also need a get method for the form let's create that method and specify the value as get and now let's change the name of the submit as well to be more specific submit with post now the usage of this form method is if you want to use two input methods for the same form element then you can use the form method attribute you can see for the default submit button I want my data to be submitted with the get method and for the second button submit button I want my data to be submitted with the post method so this is the usage of the form method attribute so let's move on to our next attribute next up we have the form now validate attribute you can use this attribute if you want to submit the user's data to the server without validating it it is a boolean attribute which means the value of the the value of this element could be true or false and you can specify this inside your submit button like this now you can submit your data without validating it and lastly we have the form target attribute this attribute specifies whether you want to show the result of your form submission in a new tab or you want to open it in this tab so let me show you with a quick example here I created a submit button which will open the result of the form submission in a new tab and the first one will open the form submission in this tab in this tab so let's go to the google chrome browser and this will open the result of the form submission in this tab in this tab sorry just click on this submit button you can see your form has been submitted now let's go back and now click on this submit to a new window button and you can see it has opened the result page in a new tab so that is it for the video guys I hope you learned a lot from this video now see you in the next tutorial so hey guys in this video we will talk about another five common attributes that are used for input elements the first one is the placeholder attribute the placeholder attribute specifies the hint in the input field before the user enters any value in the input field so let me enter some placeholder here let me also specify this for my last name now let's open this page with live server in google chrome browser click here on go live you can see this is giving me the hint of what should I type in the field as soon as I start entering the value it is gone and the last thing to remember about the placeholder is that it works with many kinds of inputs like the text search URL telephone email and password input types now moving on we have the value attribute let's go to the visual search code back and specify the value attribute here like yawn now this attribute is used where you want to give your input fields a default value the value attribute has also other usages but we will talk about them later in this module but for now let's look at the example for the let's look at the example for this attribute let's go to the google chrome browser you can see it is giving me the default values even I have not entered these values even I have not entered these values now moving on we have the read only attribute this attribute is used to make your input field read only which means you cannot add it for that input field this is used when you have also used the value attribute for the default value you can see I have a default value yawn and also specify the read only now let me delete this required attribute because it it is added with the autocomplete now let's go to the google chrome browser and check whether our field is working or not let's refresh the page now if I try to delete this you can see I'm not able to delete this field because this is the read only field now moving on we have the required attribute which is the last attribute for our video let's go to the video code and let's delete that now if you specify this attribute for your field you cannot submit you cannot submit your phone before filling up the data in that field this attribute works with the checkbox radio file email date picker and so on and so forth let's go to the google chrome browser to try this and now if I try to submit this you can see it is giving me the error fill out this field so that is it for the video guys hey guys in this video we will be talking about five input elements the first one is the input type email so let's create the input type email type input like this and change the value of the type attribute like this let's give it a name now there is another way of doing this by using the emet snippet just type input and then use the emet snippet like this you can click here or you can click you can hold the shift button on your keyboard and then the colon type email now and you can see the emet has autocompleted the email for me let's type email also here name of the email and let's cut all that now this input type email attribute is used to define the field for typing the email if you are thinking what is the difference between the type email and the type text you can do the same thing with the input type text the main difference in this input type is you can validate your email on the client side before submitting it to the database so let me show you this with the example you can see my input type is email and now if I open the browser and if I type something like my name and try to submit this you can see I am getting the error please include add sign in your email address so this is the basic validation that you can do with the input type email so let's write the email something random and now you can see I have included the add sign in my email and if I try to submit this you can see it has successfully submitted let's go back to the page again and you may have noticed that our email is submitted even we are not giving the right email provider like gmail and hotmail well you can do complex validation using the patron attribute using the regular expression which has its own complex syntax so I'm not gonna cover this in my course and this is not necessary for you as you are only learning the web designing you can also use the multiple attribute to give the user ability to enter multiple email addresses so let's go to the vscode and give it a multiple attribute and now I can enter multiple email addresses in the input field you can see and now if I try to submit this you can see my data is successfully submitted and you can also try all the common attribute with the email input types now let's talk about the password input type let's create a password input field in the form element after the email element now if you use the password input type for your password then your password will be masked which means your letters will not be visible now let's try this in the google chrome browser let's open the browser and type your password you can see my words and my letters are not visible so what you can also do with this password is you can limit the length of the letters in the password now let's give the password input element a an attribute type max length and here is our attribute just enter and now fix the character limit for your password for example I want only eight letters and now if I go to the browser and start typing something like one two three four five six and now my length of the character is limited because I'm not able to type more than eight characters this is the password input type let's move on to our next attribute value which is the search let's go to the visual studio code back again and create a search field but let me delete that first and create an an input field with the type search I'm using the emit abbreviation and now name it id is not necessary because we are not going to design the element now this type search is used to specify the input field which you can use for searching the content on your web page it gives you the suggestions for searching something like you do on the google search let's go to the browser and check never data sorry go back and let's refresh the page and now you can see it is giving me the suggestion based on my web history based on my search history so that is it for the input type search let's move on to our next type which is the url now go back to visual studio code and let's change this to url or use the emit abbreviation type input url now this input type url gives you the input field for entering the url the url you enter in the field will be validated so let me try this in the google chrome browser and type type something random like avengers and if I try to submit this you can see it is giving me the error please enter the url and now if I type dot com and try to submit this it is still giving me the error because we haven't given the proper url so let's give it a proper url now select the url based on your search history now type the proper url and then colon double forward slash avengers or www.avangers.com and now so click on this submit button here you can see my url is successfully submitted so that is it for the url input field and I also recommend you to try all the common attributes for the input types that I have already taught you and now let's move on to our last input type which is the submit input type now the submit button is basically a button for submitting all the values that you have entered in your fields in submit we have the value attribute like this this is our value attribute for our submit button now remember we have also used this value attribute for our input fields for putting the default values but here it is used to name the submit button now let me show you this I go to the browser you can see the name of our submit button is submit the data and if I change it to something submit like values now if I go to the browser again you can see the name of the button has been changed now this submit button has some special attributes one of them is form one of them is form action attribute here you can specify the url of the page that will handle the values you have entered in the input fields this attribute overrides the this attribute overrides the action attribute of the form element that means you have two or more pages for for submitting the data of a single form element now let me show you the example of this in the visual studio code for the form action attribute I am going to create two pages for explaining the form action attribute I am going to create two pages here let's create the first one on tag dot HTML and the second one about dot HTML and now paste some random HTML here and about you can type any title here I am going to type the about the name of the page and now welcome to about page I will type here now just copy this and paste in paste it in your contact page the title to contact and now let's go back to the index dot HTML and here copy this submit attribute now for example this button will submit the data to the contact page so I am going to change the name of these two submit to contact and let's rename this also submit to about and now for submitting the data to the contact page I will use the forms action attribute over slash contact dot HTML and now I will specify the action for the and now I will specify the action for my second submit button so I will use the form action attribute and this will go to the about dot HTML and now let's just go back to the browser and if I enter some values here and try to submit this you can see well it is giving me the welcome message for the contact page that means we are in our contact page because we have created a paragraph in the contact page named welcome to contact page and now if I go back and click here submit to about you can see welcome to about page it is giving me the message welcome to about page so I hope you understand that the how the form action attribute works now let me explain you one more thing about the submit button is that you can also use different methods for your different submit buttons for example if I want the post submission method for my first submit button which is the default submit button I can use the method attribute here post and but but I want the get HTTP method for my second button I can use the form method attribute here and I want the submission method as get so let's go to the browser let's go back and refresh the page and now if I enter data and click on the submit to contact which is our default submit button so this button will submit the data using the post method it is giving me this error because we are not using any kind of backend mechanism to submit our data but just try to understand that if you get the data in the url then you are using the get method and if you don't get the data your data that you have entered in the url then you are using the post method let's go back refresh the page enter some data and now click on the submit to about which is our get you can see I am getting my data in my url which is hashed just don't worry about these you can see but you are getting your data in the url like http avengers.com so that is it for the video guys I hope you learned a lot from this video so hey guys in this video we are going to be talking about the two remaining attributes of the input type submit so let's start with the form enc type but first let's delete these attributes also these and now let's also delete that and let me specify the method here which is post and also change it to whatever you want I'm changing it to text and here I will specify the name and let's copy that and paste it here now change the name of this submit and let's rename this also submit now let's specify the attribute form enc type now this attribute specifies how the form data should be encoded when submitting it to the server this is used in conjunction with the post method of the form element if you set its value to multi-part form data your value will not be encoded and if you set this to text slash plain your value will be submitted as plain text except your white spaces will be converted to symbols so the default value of this is this one the first one now this value converts your data to hex values so this is the form enc type attribute now let's move on to the next attribute which is the form target attribute now this attribute is similar to the attribute you have used with the form method with the form but the difference is that this method is used with your submit button so you can specify if you want to open your page in a in a new tab or you want to open it in the same tab but first let me specify the target attribute for my form like the self-value now if I click on this one submit button it will open the result page in the same tab but if I click on the second one button this right here it will open the result page in a new tab now let's check the result in the google chrome browser type type anything here like my name and if I click on this it will open the result page in the same tab but if I go back and now it is giving me the error because we are using the post method but not working with any kind of server so don't worry about that and let's go back now refresh the page and now enter some data and if I click here it will open the result page in a new tab you can see now it has opened the result page in a new tab so that is it for the video guys I hope you learned how these attributes work and now I will see you in the next video so hey guys in this video I'm gonna talk about three different input types so let's start with the input type image but first create a form let's delete let's delete this action inside my form create a input text you can create whatever you want like email or password or something I'm creating this and now I will create the input type image type input and then shift and colon and now type image you can see this is my image click and now we have to give it a source so let's just drag and drop the image here you can see my image has been added but it is so big let's go to our index dot html and now keep the source here forward slash ocean this old attribute is the alternative attribute in case if your path is wrong or you have entered the wrong extension so the text you type here will be shown in the place of this image so let's write some alternative text like ocean ocean image and now this image is too big let's see in the browser you can see the image is very big so let's go back to the vs code give the width and height 30 pixels and height 30 pixel note 300 now let's go back you can see this is my image let's add a line break so it appears here let's add a line break after the name another now you can see it is appearing here now it is the similar as we use the submit button so if I type some data here I can submit this with this image and you can use all other submit attributes with this input type image because it is similar to the submit button you can say it is an alternative of the submit button so that was the input type image now let's move on to our next input type which is the file now the file attribute provides a select input field and a choose file button for uploading any kind of file so let's take a look at the example let's change it to file this to my file and this is our submit button now let's go to the google chrome browser and here you can see it is giving me a choose file button if I choose a file let's say this click on the open button right here and you can see my file is selected and if I click on the input type image button which acts like a submit button you can see my file is submitted but with the plain file field you can select one file if you want to select multiple files at once you can use the multiple attribute for this so let's go to the vs code at and add multiple attribute here now if I go to the browser again and click on the choose file button here I can choose multiple files by clicking on the control and click button pressing the control and click button and now if I click on the open you can see my five files are successfully selected now what if you want to select only one type of file you can do this with the accept attribute with accept attribute you can select only one type of file it could be an image or video or ms word document or any other type of file now let's go to the vs code and delete that and let's use the accept attribute and here you can give the extension of the file that you want to allow to the user like the dot mp4 or mp3 or the dot dot file to select the ms word file or you can use the syntax like image slash all or image slash jpg like image or the video slash all or video slash mp4 now these are the media types I will give you the link of all the media types in the description so you can learn more about them now let's go to the google chrome browser to check you can see I have the same exact choose file button if I click on that button you can see it is it is allowing me to select the video and if I select any video you can see my video has been selected so hey guys in this video we will learn about the date and time input types of the form element in html now these are quite simple and self explanatory you can see the date attribute shows simple date without any time and the date time local shows the date with time and the third one the month input type shows the month of the year and this week input type shows the week of the year and and here the last one the input type time shows the current time on your pc so let's open this page in the google chrome browser just click here on this go live icon just wait a bit and it will open the page for you you can see this is my simple date I can select my simple date here which month I want from here and just select the date you can see the only the date is selected and now if I want to select the time with the date I can use the date time local and here you can see it is showing the month of the year and the year and it is showing the date here and you can select the time from here like this am or pm you can select from both of these and with this I can select the month of the year and for the input type week I can select the week of the year and the last one the time input type from the time input type I can select the current time or the time I want to select for example this is my time right now and I want to select the 7 pm I can just click here and now here you can see my time is selected so these were the date and time input fields that's it for today's video


Dear students, evolution of human history, the changes on the population dynamics, on the increase in the number of population, or probably decrease in the number of population because of the certain societies that have established throughout the human history. Whether it was a horticulture or a pestrel society, whether it was a hunting and gathering society, whether it's of the agrarian society, or whether we are just talking about the industrial society, how industries, they brought ease, how industry brought development, how industry brought contentment, how industry made people settle at one stage, and it also provoked people to leave their underdeveloped regions and coming to the developed regions. How industries have been the reason of urbanization and so many other things. So industries have been the development of industrial societies. They have been a very important factor when we talk about the change in the population characteristics or the dynamics. So with industrialization, yes, yes, industries you have, my dear students, but the occupational specialization you think will be, they became greater than ever. Today, the kind of work you do has a lot to do with your standard of living. So people know, so people now often size up one another in terms of their job, rather there, according to their family's ties, agrarian people do. So this is what I'm talking about, the change in the societal behavior or the society values. The more you are doing a good work, that is probably your recognition more than the family where you belong to. Industries, the rapid change in the industry, the rapid growth in the industries had even changed the way people think. The more you are rich, the more you belong to the affluent class, probably that is your the first identification in the society. Agrarian societies, can the people used to have strong ties, people used to live strongly? So another kind of environment that we would like to see is what we get. Rapid change and people's tendency to move from place to place that also makes social life more anonymous, increase culture diversity and promote subcultures and countercultures. You see how the sort of advantages, the sort of facilitation now we have, how it is easy it has become to move from one place to another. We have cars, we have aeroplanes, we have jet planes, you have everything, the connectivity has become very important. Now that connectivity among the population segments that have resulted into the change into the cultures that has introduced us towards the culture diversity. This is a big city now full of flights, this is a picture of a shopping centre as you can see and there is a traffic going on, there is a great hustle and bustle and how the economy is going on, how the social life is going on. This is a picture from a Pakistani society where our, that shows a huge population which is a country which consisted of a number of people they live in this country. Industrial technology also changes the family to reducing its traditional importance as the centre of the social life. Dear students, students of sociology, students of social science, different social sciences got subjected to social work, gender, anthropology, political science or other subjects. We are very much always interested to know the social institutions. So your family's institutions also have industrial development, makes significant change which we can see and which we can see in our traditional values. Family, especially the western world developed countries, it does not no longer, it does the family serve as the main setting for work, learning and religious worship. Now the family's significant role in the western world is to fulfil it. Technological change also plays a part in making families more diverse with a great shape of single people, divorced people, single parent families and step families. Now these are the change in this population dynamics. How so many divorced people are around, how we can see the weakening of the marriage institution, how you see single parent, single people and not in the institution of marriage and they are living together, they live in relationships are very common in the western world. Even they adopt children, they are raising children without coming into the, entering into the marital ties. So and single parent, step families, so all these are the dynamics, all these are the changes. That were not very visible in the past and this is how the fast life has introduced us to all these things and this is how the population dynamics, perhaps a greater effect of industrialisation has been to raise living standards. The human beings which have set, it is to raise the living standards. And the new technology where we have our advantages, we get comfortable life, I have told you about the losses there, which we are not able to create a balance problem where we see societal values being lost. Along with this, the inequality, even social inequality decreases slightly because industrial society provides extended schooling and political rights for everyone. There are some things, it can also decrease and in many places it increases what you will see. How will it decrease? Because people will have lots of opportunities and because of those opportunities, they will be able to teach their children. Around the word industrialisation, the effect you will see in many places in the world. Right now we are talking about industrialisation, we are talking about development. Because of the factor of industrialisation, countries divide in companies. They are developed countries, they are developing countries, they are underdeveloped countries. This is an important fact, industrialisation has pretty much changed the dynamics of the human population. Whether we talk about the family values, whether we talk about the social statuses, whether we talk about the difference between the rich or whether we talk about the ease and comfort that have brought the industrialisation in our lives.


The People's Democratic Party, the PDP, and its governor's forum say a decision on zoning of political offices will be made by the party at the appropriate time before the party convention scheduled for October 30. The party and its governor's forum stated this in separate statements issued in Abu Jha on Saturday in reaction to a bonus state governor, David Umay's comment on the issue of zoning of presidency by the PDP ahead of the party national convention. Umay has accused the PDP of not being ready to zone its 2023 presidential ticket to the south. The PDP governor's forum and the GF in a statement by its director general, Honorable CID Madhu Abum, said that the forum was outraged by Umay, who left PDP for the APC attempting to turn truth on its head. Madhu Abum advised Umay who he alleged to have sabotaged the PDP in the 2019 presidential election in the state to continue his role in the APC and leave the PDP alone. On the issue of zoning, Madhu Abum advised Umay to face his issues in the APC and not drag the PDP and its governors into it. Notified about fresh news updates


Avoiding the reignition of armed violence is a key challenge in post-conflict societies where pockets of violence remain, often for long periods of time. How can stability and safety be ensured in these settings? There's no linear trajectory from conflict-affected country to Finland. What we have is a series of moments where interventions can take place that place countries in different trajectories, some more stable and some pretty unstable. My view challenges the assumption that the moment of conflict resolution is the best time to reset the rules. My research has shown that there may be greater opportunities in those moments of calm, even though it may seem like there's no opportunity to put a new set of rules in place. If you can gradually reset relationships gradually in a way that doesn't threaten the system, understand how, for example, security sector and communities work together on governance. You can gradually transform a system from the inside in a way that's less top-down and more likely to succeed. Your starting point is a vibrant, sophisticated, very different form of governance, and that's where you need to start thinking about what are you going to do to make it less violent, to make it more inclusive, to make it more possible to transform into a trajectory that doesn't keep looping back into civil war, essentially. There's not an opportunity for immediate peace and immediate successful state building. What there is during conflict, what we often find is communities get on with their lives and there's a strong desire for peace and a strong desire to recover their livelihoods.


And my friends can testify that how nervous I am, because it's my first meetup talk. So thank you, thank you. So yeah, but when I was seeing his talk, like I feel nervous even watching his video. I cannot imagine how I would get so nervous even to drive in the US, I cannot imagine how I can fly. So hopefully it is less nervous now for me. So introduction for myself, my name is Meng Yi-Yuan. I am a solutions engineer for WhatsApp at Facebook. And you can follow me on Twitter, because I tweet a lot of cat chips there. But enough about myself, because I think there are something very important that I want to pitch you about today. And the topic is about how learning in DevOps will help you to become a better developer. The reason is that, especially if you consider the term DevOps, there are two parts of it. And I believe everyone here is familiar with the developer part. But for the operations part, I have seen so many developers that they just don't care. And what I want to show you today is that why you should care about it and why it can help you to become a better developer. So before going into all the details, there is this book called Start With Why. You can basically read the book by reading the title itself, in which it figures this golden cycle. It argues that before starting to do anything, before worrying about how you should do something or what to do about something, the first thing you should ask yourself is why you should do it. So applying the same concept here, why do we want to learn DevOps? Because it helps you to become a better developer. But before that, we should first understand what is DevOps. So I was at DevOps Day Singapore two years ago. And almost every speaker there start with some definition of DevOps at the beginning of their talks. And almost none of them is identical. So it is about one of the technology terms that has the most variable definitions. I won't attempt to define it myself. I only borrow it from the experts. So one of the people that I really, really admire is Jess Humble, who is the author of Continuous Delivery, which I will go more deeper into later in the talk. He defines DevOps as a cross-disciplinary community of practices dedicated to the study of building, evolving, and operating rapidly changing resilient systems at scale. So it is even a mouthful for me to read. That's why I am me. And Jess Humble is the one who came up with this concept. Some other concepts that I take from the agile admin, if you'll Google what is DevOps, they are the first term to come up. DevOps refers to the practice of operations and development engineers participating together in the entire service lifecycle, from design through the development process to production. So both of, if we extract the common points from these two definitions, basically, they all argue that DevOps is a set of practices where the engineers will practice. And it helps you to build scalable resilient systems at production. But I think we are, again, going too far. We are diving into what DevOps is already, but we should start with why. So we take out the golden circle again, and we should ask first why DevOps at all. Why does the industry need DevOps in the first place? So it's worth to look at days before DevOps. So there is this wall between the development team and the operations team. Basically, the developers want to do all the shiny new stuff, and they want to push out things as fast as possible. On the other side of the wall, the operations team are the ones who need to maintain and manage the application in production, and they are the ones who got paged at 2AM on a Saturday. That's why there is this conflict between what the developer wants and what the operations team wants. Plus, developers normally use tools or frameworks that the operations team doesn't need, doesn't use. So this mismatch of knowledge and tools that they use have combined into this result where that the developer will come up with some new codes, and they will just throw over the wall to the operations team with little to no documentation. Then the operations team cannot run anything because they don't know how. And then they throw back to the development team, and the developers will say, it works on my machine. How come you cannot get it to work? Those are the days before DevOps. IT is like we want to think that we are ahead of the industry, but actually, if we go back into history, we would see that the industry leads us into why we want to do agile and DevOps. So I bring up Jess Humboldt again, and he argues that if something hurts, you should do it more often. Instead of trying to avoid the pain, you should do more often so that you are forced to improve your process and make the process less horrible. So just a short history of DevOps, although there are a lot of words there. Basically, the entire idea of agile and lean manufacturing starts in the manufacturing fields by Toyota in pre-2007. Then in 2008 and 2009, finally, the developer cycle starts to catch up with this trend. And the term DevOps was coded in the history book in 2009. Then since 2014, the Dora, which is DevOps Research and Assessment Organization, they start to come up with this state of DevOps report each year. They give out survey questions to engineers, like basically whoever works in the IT field, they can be developers, they can be operations, they can be system admins or DevOps teams, or they can be executives as well. They will give up this service, and they will assess all the business based on how well they are performing in terms of software delivery performance based on these four criteria. Deployment frequency, the time for change is time to restore service, and change filler rate. Then they will categorize all the participating businesses into four categories. Previously, there are only three, but last year they had an elite group as well. And the result from the report in 2018 shows that there are only like 7% out of all the participating businesses that are categorized to have elite status. And the result and the difference between the elite and the low performers are just stunning. You can see all the four criteria mentioned just now, they are significantly higher. And for failure possibility for a change to fail, they are 1 7th as likely to fail a change. And even from an organizational perspective, for the elite performers who adopt DevOps, they are seeing much more likely to meet or exceed organization performance. So there are already many talks that argues about the value of adopting DevOps at the organization level. I don't want to repeat too much about it, because today what I really want to focus on is why you should care about DevOps and what DevOps will benefit for you. So going back to the title, how can learning DevOps help you or help me to become a better developer? First of all, DevOps makes you to write better code, because if you want to have continuous delivery of your code, you will have automated tests. And to make your code testable and automation easy, you have to write clean code and loosely coupled architecture. That is some discipline that you will never remember if you don't have continuous delivery. Also, you need to produce good quality logs for better application monitoring. For developers, sometimes we don't care so much about logs. We just troubleshoot with console log and then remove them before we push into source code. But then if you really operate your code in production, you will find out that you almost have no insights into what the customer is doing. If they run into some errors, you will only see the error for the most part, and you do not know what they are doing before that. So adopting DevOps also require you to embed good quality logs into your application. And the last point that I want to argue based on my experience is that if you are a developer who works on DevOps, it is very likely that you will be pairing or working with the most senior developer on the team. This is exactly because very few developers care about DevOps. And if someone is going to work on DevOps related stuff, it will be the most senior people. And if you are the developer who cares about DevOps as well as they are, you will have a very good chance to be pairing with them and learning so much from them. It is very good for your career as well. Then on the business side, DevOps doesn't, I think, to become a good developer.  It is also, it is better if you understand the business that you are working for. So DevOps helps you with that because you understand that software is not done when you are code complete or not even QA certified. Software is never complete, per se, because they will live forever in production.  And then you will be able to witness the software to deliver business values because software is only starting to generate business values when it is in production. And if you assume something will help your business, you will only see the real results after it is deployed and being used by the customers. And then you can iterate whether my assumption is right if it is not what I should do about it. Yeah, this is the point that I was talking about. So hopefully, I have sparked some curiosity in you and some interest about learning DevOps. And how do we get started? Just like any other software development knowledge, DevOps is no different. You learn, you make, and then you iterate this process. This also that I also like really much. I don't know how many of you know Terraform, but he has this book about Terraform. But he also recently had this book about how you can build a startup as a programmer. In which book he said software is a living and breathing thing that grows and evolves continuously. I would think that our skills as a developer is a living and breathing thing that needs to grow and evolve continuously as well. The parts to become a better developer, as I said, you learn, you make, and you iterate. So I will start. I will present my slides also in this order. I will present something that I have learned from and what you can do to start going. And then to go deeper into something that you can learn from, then to go deeper into something that you can implement. So starting from the most basic ones, something that you can learn or you can read is this book that I really, really like it. Because it is a novel which is very rare in the technical books field. It's about this really traditional business and how this shiny new IT project is way over budget and way behind in schedule. And the entire book is talking about how DevOps and agile practices basically turn this entire business who is about to collapse because of this new shining project is fully, how it was turned around by adopting agile and DevOps and then achieve better business results. So if you want to really get started doing DevOps, actually just now I was also talking to someone in the audience. It doesn't really matter that much what to you get started with. You heard about all these Stalker Kubernetes stuff. Actually, I would argue that they are not the most important thing. It's more about the ideas you want to embed into your project. So to start with, you should use version control. Also, although this looks really rudimentary, but this actually refers to not only your source code, but also all your configuration management script or your data migration script, everything that you need to rebuild an application in a certain environment, you should put it into version control except for your password. And you should use trunk-based development whenever possible. This is especially important when you are working with teams that has a lot other developers. Sometimes you are working on this big, big feature and you are very afraid to push to trunk, which is like the master branch because you will fear that I am committing something to production that I am not comfortable with. But if you are living on a feature branch for more than a few days, you will find out whenever you want to merge back, whatever you assume is there is no longer there. Whatever you assume the file path is there, it's going to change.  And you should also set up some basic continuous integration pipeline in which upon each check-in of your source code you should run automated unit tests. And you should generate an artifact from each build to be used later in the stage. So now you have some experience making something related to DevOps. You want to go deeper because you run into all these problems about how I should manage configurations over different environments. How should I manage my data? How should I write tests? So some other books that I find really useful, the DevOps Handbook. It is a very practical handbook for you to learn all the best practices basically in DevOps world as well as continuous delivery, which I mentioned briefly just now. It is so good. I normally just open it before I sleep and just try to. It's a very thick book as well. But almost every sentence there is good. If you are confused about anything, how should I do this thing? Jess Humble has an answer for you in the book. And then this release it. It is specifically targeted to explain how running applications in production is so different from any other environments, not only your local host, but also a testing environment. Because the load is on an entirely different scale. And you normally will run your application among servers in maybe different availability zones. How do you make sure that something breaks in your system doesn't bring down the entire system? So all of these things are presented in case studies, like real life case studies. So now we are hopefully after reading all the books, you have more knowledge to go on to make more things. You should further build up the CI CD pipeline. Now we are adding in continuous delivery now. So you should automate the development of the same artifacts that we built from the last stage to each environment with different configurations. There is this concept of build once and deploy everywhere. Basically you will be always generating only one single artifact from each build. And you will use the same artifact to deploy to different environments. After each development, at least you should be sure that the system is up and running. This is not guaranteed if all of your unit tests pass. Because even if you don't see any errors after you deploy, there are times where you think, let's say it's a web service, you think the URL is up. And when you are trying to connect to it, it is not. So if you run into such issues very often, it is good for you. Instead of manually checking it every time after development, you should have some automated smoke tests to make sure that at least the system is up and running. Then you can go deeper into automating more acceptance tests, maybe with even some performance tests to make sure that your system not only is barely up and running, but also that it can fulfill the business requirements that your application provides. After the deployment, it is also important to monitor your system because your application still lives there in your production after you deploy. And it's crucial to monitor the health of the system at all times. You can configure most of the monitoring tools that you will find in market or in open source world today. You are able to configure it to send alerts when the metrics you are subscribing to go off track so that you don't need to be alerted by your customers. You can always find problems first and solve it hopefully before the customer realize. Just now I mentioned that DevOps, for me, not only helped me to become a better developer in writing better codes, but also helped me to learn more on the business side, or at least to be more interested on the business side. This is the book that I mentioned just now. I find it really, really helpful. It contains a lot of DevOps practices as well. Not surprisingly, because DevOps is really, really crucial for building a successful startup. You cannot afford your system keeps going down when you are so busy marketing your products. And then when a huge group of users come to your website, it goes down. That is not good for your product, for a startup. And then this very famous, the lean startup. It also introduces the lean manufacturing concept that I mentioned at the start of the talk. So on the business side, actually, the DevOps can also help by monitoring and measure business metrics. And by monitoring and gather data about these business metrics can also help you to make business decisions. Let's say if you want to define a new registration flow, you think you are making the registration floor easier or prettier so that the customers will like it better. But actually, how do you tell? It is not by guessing. It is better that you can measure it. You can implement what we call AB testing so that some users that comes to the registration flow, you can send them to the OAT flow. But some you can direct them to the new flow to go through the registration. Then you can measure, let's say, how long it takes for them to register how many errors the users ran into. By just being able to measure these business metrics, you are able to determine whether your changes actually achieve the business results that you think it will. And then DevOps is not only about automation. It's not only about writing scripts. It's also about a kind of culture. And one of the most important culture that DevOps foster is also the learning culture. You can learn by sharing what I do today. I know I am still super nervous and was rushing through a lot of things that I was planning to say during my rehearsal. But it is a good step that you can come up here and share something that you learned during the journey. So I was told every presentation should end with a story. This could be a long one, but I just want to go through my stumble into DevOps. So some backgrounds. I graduated from NTU, but not with a CS degree. It was an electrical degree. So when I was in school, I was doing some development projects. But I don't know what DevOps is. I don't know how to put my source code into servers so that I can serve up a web page. I don't even know how I get my final year project completed. So after that, I joined MNC, the multinational company, as an internal IT team, which we are responsible for managing business intelligence platforms like Tableau and those kind of platforms for internal teams. At that time, because of the company that I was in, we are purely using Windows servers. And this was before Microsoft starts to become cool and acquire GitHub and have VS code. So all the Windows server that I interacted with, I don't know how automatable they are, but I was just clicking around. And every time if we want to spin up new machines to host these business intelligence platforms, I will do manual provision and configuration so that a new environment can be up and running. This is really horrible, because every time something doesn't work, you don't know why it doesn't work. I ended up manually comparing why in another environment it works, but not in this new environment. The best that I have done development-wise, it was a C-sharp project. And it was also before .NET Core. And every deployment needs to be executed from Visual Studio without code. So you push a button and input something. I wasn't involved because there is another senior developer as I said, because nobody knows how to do it. It has to be the most senior ones who know how to deploy things. And it was all manual. The best I have done is to write some PowerShell scripts to automate something, but every time I have to manually change something. And hopefully I don't make a typo somewhere and break the whole system. So that was that. Then I started to get fed up with doing things manually and comparing configurations. And I feel I should improve my development skills in any way as possible. So I joined a consulting firm where I really started to learn about what DevOps is about by pairing with senior developers again. For all the three projects that I have done in the company, I somehow I all ended up automating their deployments, even doing some contract testing. I will share the slides later. And you can find what contract testing is about. We are able to automate some acceptance tests in one of the projects by managing test data, as well as, well, we even go deep into automated environments provisioning with Terraform and stuff. It was really fun. I was really, really unnovous. I didn't, before joining the second company, I didn't even use Mac or Linux Box before. I was, in my first project, I was so embarrassed that, like, let's say I just know LHS properly. That's the only command that I know. But then being embedded into all of these DevOps gives me the exposure of not only writing application codes, but actually how you can deploy your code into Redaction. Then I joined Facebook. And so my role is solutions engineer. And I'm very fortunate, actually, to be assigned to the WhatsApp team. The main product that we are working with is called the WhatsApp Business API, which they launched just last year. And because WhatsApp is really, really, really end-to-end encrypted, and when you are using it from your phone, the WhatsApp app on your phone is actually doing the encryption and decryption of the messages. So for a business to use the API to send WhatsApp messages to their customers, to encrypt the message, the business should have something like the app on your phone, but we cannot use our phone. So what we do is that we put the software in our Docker container, and we require all the business to deploy these Docker containers in their data center before they can use the API. And you can just imagine how many businesses are not aware of how to do this properly, and we have run into so many problems. But this is where I feel really excited because now it's the thing that I am very familiar with and very excited about. So even being in a big company, where, especially for Facebook, we have dedicated release management team, infra team, like multiple teams, which I am not part of, you can still be the subject matter expert on your team, because, again, so few developers care about DevOps if you are the one who understands what Docker is, what Docker compose is, what Kubernetes means, it is such a good plus even from your career perspective. And another thing that I worked on first during my time with WhatsApp is that we have this tool that we built in Python. We have like three to four developers work on it at the same time. Previously, we want to move fast, right? That was the motto of the company. So we start, we are not using the standard source control system of the company. We are just using GitHub, not GitHub, just Git. And then a lot of times it happens where someone checks in some code and then when I check out, it doesn't work anymore. It breaks it because we don't have any automated tests. We just check in after the assumption that it works on my machine, it should work on others, but this doesn't work. So there is this long time where I spent just to migrate this existing repo into our existing source control system that the entire company uses, which brings in like all the linters, all the automating test system and it's just a life quality improver, you know. So what do you should do? If your company doesn't adopt any develop practices, please be the advocate, show the value and start doing something today. And even if your company is like on the scale of Facebook or WhatsApp, you can, where they have already adopted all the develop practices, but you can still improve on it, fix something, improve, put more tests in your code and just generally make things better. And then for your set projects, it is a very good place to start. The most common that I have heard about DevOps is that it can be really difficult to get started if you are working alone, but if you are working with your set projects, you can just start by what I said just now, use version control and try to run automated tests after each check-in and deploy it somewhere, like all automated, just see how fantastic it is and then you will always want to do this and never back. So software is a craft and never stop learning. That's all for my talks.


Well, I asked for my steak medium-rare, but this tastes like a hiking boot. Did they season this with hatred? Okay, let's try the potatoes. Nope, that tastes like the back of a cat. Let me wash this down with an ice-cold beverage. Ah, just how I like it. Warm. Jesus, this reminds me of my great aunt's cooking. After she died. Gordon Ramsay would burn this place to the ground. Am I being punished for something? Food isn't meant to make you question your existence like this. My teeth are yelling at me.  Is everything okay with your meal? Absolutely, man. 10 out of 10. Absolutely. Compliments to the chef. Fine cuisine. This is shit, and I'm never coming back.


Operant conditioning is based on the idea that we can increase or decrease a certain behavior by adding a consequence. For example, if a dog poops on a carpet, we can either provide reinforcements so the dog does it again, or punishments so the dog stops. Both reinforcement and punishment can either be positive or negative, which means we have four possible ways to teach this dog a lesson. We can draw the four options in a table. If reinforcement is positive, we add something pleasant, like a cookie, to increase the likelihood of a behavior. If reinforcement is negative, we still want to increase the desired behavior, this time by removing something unpleasant, like the leash. If punishment is positive, we add an unpleasant response to decrease behavior. When punishment is negative, we also want to decrease behavior. Now by removing something pleasant, like the comfy carpet. If we stop any sort of manipulation, the conditioned behavior will eventually disappear again. This is called extinction. Operant conditioning was first studied by Edward L. Thorndike and later made famous by the work of B.F. Skinner. Skinner believed that organisms are doing what they do naturally until they accidentally encounter a stimulus that creates conditioning, which results in a change in behavior. To test this, he placed a rat inside an operant conditioning chamber, which later became known as the Skinner Box. Among other things, inside the box was a lever that would release food when pressed. Conditioning happens in a three-term contingency, today known as the ABCs of behavior. A stands for antecedent. The rat accidentally hits the lever that triggers the release of food. B stands for behavior and refers to the response. The rat keeps pressing the lever. C stands for consequence. Food keeps coming out. The strength of the response to the conditioning depends on the schedule of reinforcement. If there is always food after pressing, the rat behaves predictably. If the food is released randomly, the rat behaves erratically like an addict. Skinner, born in 1904, was a professor of psychology and subscribed to behaviorism. He argued that you can only study behavior that is visible, and anything happening only within the mind is either a misconception or irrelevant to science. He thought free will was an illusion because behavior is either random or a reaction to the environment. His work became the foundation for behavioral therapy, military drills, and animal training. You can try this classroom exercise on positive reinforcement. One individual must exit the room. Now, decide on a task which that individual will complete, such as finding a particular book. Then, choose a nonverbal way of reinforcing that task, such as clapping your hands. Take the person to come back into the room, and let them try and complete the task. But don't give any instructions. Every time they are on the right track in regards to completing the task, clap your hands louder. If they move away from performing the task, reduce your applause or stop it entirely. Once the person understands what they are supposed to do, let them explain the task. Did they get it right? Sprouts videos are published under the Creative Commons license. That means our videos are free and anyone can download, edit, and play them for personal use. And public schools, governments, and non-profit organizations can also use them for training, online courses, or designing new curriculums. To help us stay independent and support our work, you can join our patrons and contribute. Just visit patreon.com slash sprouts. Even one dollar can make a difference. If you have deep insights into academic topics and want to help us explain complicated ideas in simple language, please contact us at sproutsschools.com.