Full Stack Web Developer Course - 10 Hours | Full Stack Web Development for Beginners | Edureka

Key Takeaways

[Music] full stack development is a comprehensive and integral approach to building digital Solutions covering both the front end and backend aspects of a web and application development in an era where technolog is constantly advancing full stack developers are in high demand for their ability to work on every facet of project as per talent.com the early income of a full stack developer in India range is from 5 lakhs to 20 lakhs per year while in the United States it ranges from $97,000 to $149,000 per year hello everyone and welcome to this session on the full stack developer course whether you are an aspiring developer seeking to understand the entire development process or a Season Pro looking to expand your skill set this course will Empower you with the expertise to navigate the everchanging landscape of the full stack development effectively in this full course you will explore programming languages Frameworks and the best practices to become a proficient fullstack developer capable of transforming ideas into digital reality but before we get started let's take a moment to outline the agenda for today's session first we will begin with a brief overview of HTML covering its structure doc type declaration elements and forms next we will explore CSS a stylesheet language used to control content presentation and layout Within the CSS section we will discuss its syntax selectors the CSS Box model and units advancing further we will provide an introduction to JavaScript highlighting its benefits and guiding you through setting up a development environment including JavaScript fundamentals afterward we will provide a brief overview of a gquery then we will explore the angular framework emphasizing how to create Dynamic web applications as we move forward we will learn to build Dynamic and engaging web applications using reactjs from scratch advancing we will discuss the introduction to nodejs we will then proceed to essential backend development components such as mongod DB rest apis and Marvin this will also include important tools like git GitHub as well as genkins where we will explain what a pipeline is discuss genkin files provide installation guidance and touch on Docker additionally we will explore full stack web development using Jango finally as we conclude this full stack developer course we will present a road map to help you become a full stack web developer but before we begin please consider subscribing to our YouTube channel and hit the Bell icon to stay updated on the latest content from edureka also visit the Eda website for full stack training and certification courses the link to it is in the description box [Music] below so what is full stack web development I'm sure you all must have heard of front-end and back-end web development but what is fullstack web development now full stack web development basically involves front-end and backend web development it requires in-depth knowledge of the different scripting languages like HTML JavaScript CSS which make the web look more interactive and Alive it also requires high level programming languages such as Java Python and so on to code the server side apart from this you also to require experience in working with JavaScript Frameworks like node.js and libraries such as jQuery and so on now in the further slides I'll be covering the different aspects of becoming a full stack web developer in depth so stay tuned so before we move on to what a full stack developer does and how a front end and backend developer Works let's look at the different layers of full stack first we have the presentation layer or the front end of the web this layer helps you interact with the web watch videos perform actions like register to an online shopping site so guys whenever you surf a website the different fonts images and the content of the website forms a presentation or the front end of that website so basically the design look and feel of the web is accomplished with the help of HTML CSS and JavaScript then comes the logic layer or the backend layer now this layer forms a dynamic connection between the front end and the database so every time you search the web it's the logic layer that transmits your requirements to the dat database and Returns what you searched for all of this is powered by a web server now in order to get this layer working it's important to know at least one of the programming languages such as python Java or chash okay now lastly we have the database layer this layer is a massive Warehouse of information it contains a database repository which captures and stores information from the front end through the back end now a prerequisite over here is to have knowledge of how data is stored edited retrieved and so on languages such as MySQL mongodb are a must to know now let's look at the type of web developers so guys front-end developers are responsible for a website's look and feel these developers must be Masters at three main languages which is HTML CSS and JavaScript they also need to be familiar with Frameworks like bootstrap angularjs and emberjs which make the website look more interactive and Alive libraries like jQuery also help to package code into a lightweight and compatible form now moving on to the backend developers now the back end of a website consists of three components the server the application and a database a backend developer creates and maintains the web server application and the database which allows the front end of the website to operate to make the server application and a database to communicate with each other backend developers use serers side languages like PHP Ruby python Java and net to build an application they also require to operate on tools like MySQL SQL mongodb in order to fet store or edit data and then serve it back to the user in the front end now guys this is how backend developers work now moving on to full stack developers the term full stack developer was popularized in a meeting around 8 years ago when Facebook announced that they are looking to hire only full stack web developers now basically a full stack de veler should be knowledgeable enough to work on both the front-end technology and the backend technology so he needs to have an understanding of how the web works at each and every level including setting up and configuring Linux or Windows servers coding serers side apis running the client side of the application by using JavaScript and structuring and designing the web page with CSS and HTML a fullstack developer is like the Jack of all trades one must have enough knowledge to run both the client and the scripting side now let's discuss a few key points about why one must practice full stack web development one of the reasons is the full stack developers can choose from a rich set of tools and Technologies for creating and designing unique code they are not restricted to a certain set of tools for development because there are n number of Frameworks and libraries that will assist a full stack developer in achieving an effective web application now the next reason is design and development now one of the best things about working as a fullstack developer is that you're not restricted to only development as a fullstack developer you can design and style your application and then if you're bard of Designing you can probably switch to your developer mode now developer skills come into handy when you want to create a functional and a bug-free application a fullstack developer is basically a creative person who can both develop and design an application so guys I'm not going to lie to you a full stack developer is like the Steven Hawkings of web development after mastering various scripting and programming languages and working alongside several Frameworks and libraries a fullstack developer is no less than a master of course one requires to have work experience and a lot of knowledge but nothing is unachievable if you have the will to do it apart from that a full stack developer is highly valued in all parts of the world in the US the average salary of a full stack developer is over $110,000 not only in the US all around the world full stack developers are in high demand now that you have a basic understanding about what a fullstack developer is let's dive deep into how to become a fullstack developer let's look at the responsibilities of a developer and what exactly does he do all right so guys to begin with you must have a decent understanding of how a website or a web application is built and what tools and Technologies are used to do so so let's begin with our front-end web development to master frontend web development you you need to know many Technologies but the main Technologies are HTML CSS and JavaScript now HTML which stands for hyper text markup language is the skeleton of every web page it defines the structure of the web without it the web would be as shapeless as a lump of clay by using HTML you tell the browser how you want your content to be structured by defining the different parts of a web page for example you define the content of your web page within HTML tags now these Stags tell the browser which part are headings body sidebars and Footers this not only helps to structure the web page it also lets you style each HTML element by selecting them and then adding different style parameters now CSS which stands for cascading style sheets is like the clothes we wear to look stylish and attractive the HTML elements we defined can now be styled using CSS for example you can change the color of the header add and style various buttons you can also use CSS to adjust the width of the HTML elements you can style them by adding color and design you can also play around with buttons and make them look colorful and attractive so guys you can style a web page in any way you want CSS has thousands of styling functions which let you design and make a web page look like a beautiful painting next up is Javascript now before I get on with how fullstack developers use JavaScript it is important to understand how JavaScript Works JavaScript is basically a language of the web which every browser PC and mobile phone understands now JavaScript can natively run on the browser by natively I mean that most of the web browsers like Google Chrome Safari and Internet Explorer have a JavaScript engine embedded into their browsers okay now this JavaScript engine interprets the JavaScript code so that it can run on the browser so guys this is exactly how JavaScript runs on the web browser now where is Javascript used now let's look at here an example so guys when you're browsing on a web page you come across many buttons on clicking these buttons some event occurs now JavaScript has event listeners which perform specific actions on the click of a button like for example on the click of a button another page might open up or a personal detail form can pop up all of this is Possible only through JavaScript it is basically used to manipulate the HTML elements add motions and Graphics to them so any sort of motion that you see on your web page is all JavaScript now that you have a good idea of how foot stack developers work on the front end let's look at the back end now when a user opens up a web page and clicks on a link or submits some form or let's say he enters a URL where does this data get stored and how does the browser return information to the user so basically the browser connects to a web server now a web server is just a computer running an application or a software that delivers resources to the web pages so guys when a web server receives a request for a resource it has to respond with that resource so how does it do that now basically backend developers program the web servers to respond with the right resources so the main aim of the web server here is to respond with the correct resources but where do they get these resources the web server is connected to a database which is continuously pulled on receiving some request so the role of a full stack developer here would be to create an application that fills a web page with the required Resources by pulling data from the database now this application is programmed using server side languages like Java python PHP node.js and the database is also programmed using languages such as MySQL mongodb and SQL so guys basically the back end of a web page is used to serve the required resources to a user so here we just discussed how the frontend development is used to design the user facing part of a web page that lets us interact with the web page we also discuss how the back end is used to deliver a web page to the browser along with the requested resources which are retrieved from a database so guys this is what a full stack developer does he has to create both the front end and the back end of a web page all right now let's look at some of the important Technologies and tools that a full stack developer must know first of all a full stack developer must choose a code editor that is best suitable for him there are hundreds of code editors out there personally I switched between Visual Studio code and Sublime Text they're the most userfriendly code editors but you guys can go ahead and choose whichever code editor you like now the second tool is a Version Control System a Version Control System basically is used to keep a track of all the changes that you make to your code files or any sort of documents now like the name suggests it creates versions of your code or your file every time you change something so let's say that you created a web app application and added an additional feature to it but for some reason this feature slowed down your website and you want to go back to the old version of your website so usually it is very hard to revert back to an older version but a version control system takes care of this because it has a track of all the code changes that you've made and it can easily revert back to any code change some of the popular Version Control Systems include git and sub verion now guys there are thousands of JavaScript Frameworks and libraries which will come handy during web development Frameworks like node.js can help with backend development of a web page and JavaScript librar such as jQuery can help at the front end to design a web page then there is angular react backbone metor which are all very useful to a fullsack developer a fullsack web developer is always familiar with a couple of JavaScript Frameworks and the best part of these Frameworks is that after learning JavaScript which you'll definitely need while developing the front end the they are very easy to understand next up we have HTTP protocols now HTTP is basically a stateless application protocol on the internet which allows clients to communicate with the server so basically it enables communication between the front end of your web page and the back end guys let me tell you that there are a lot of web developers out there who don't know much about HTTP but it is quite essential to have an understanding about HTTP and how the internet works it is also necessary to understand what is rest and why is it important in regards to the HTTP protocol in web applications apart from all of this a fullstack developer obviously needs to have prior knowledge about running the application on operating system such as Linux windows and so on because at the end of the day all of this is running on top of an operating system also a lot of fullstack developers have brushed up on various project management tools like jira teamw work base camp to effectively carry out the web development process so guys becoming a full stack web developer requires good amount of effort and dedication but is it worth all the effort I would say definitely it is it is the most valued designation and once you practice fullstack web development you'll become a master of the web and at edura we provide a full stack web development course that has all the required tools and technologies that you need to learn and we also make sure that you don't just learn it you master it so guys if you're interested in learning the full stack web velopment Master course or any other training Technologies let us know in the comment section and we'll get back to you at the [Music] earliest so the idea behind HML was a modest one when Tim burner's Lee was putting together his first Elementary browsing and authoring system for the web he created a quick little hypertext language that would serve his purposes he imagined dozens or even hundreds of hypertext formats in the future and smart clients that could easily negotiate and translate documents from servers all across the internet now HTML stands for hypertext markup language and it is a standard markup language for creating web pages and web applications it is used to describe the structure of the web pages using a process called markup now HTML mostly constitutes of elements and these elements are the blending blocks of any HTML page and are represented by tags now let me just give you a brief introduction to the structure of HTML now this is Al so called an HTML boiler plate so firstly an HTML boiler plate begins with the HTML tags which tells the browser that this is an HTML page and this is where it begins from next comes the head tag which contains most of the meta information about the document the head tag normally also contains the link to the styling sheets the fonts that you might be using on your web page and even the JavaScript that you might be using now the head tag also has the title element which specifies the title for the document and can be seen as a text on the tab that you open on a browser now next comes the body tag which mostly contains the content that is visible to the viewer of your page and these contains elements like H1 tags or paragraph tags which are known by P tags and they make up the mass of your content Now to create an HTML page there are a few steps so firstly you need to open any sort of text editor it could be notepad++ notepad Sublime Text or even Visual Studio code you have the freedom to use whatever text editor you want next you have to write up some HTML code that you want to show on your web page and then you just save your file as a HTML and to open the file all you have to do is just view it on your browser now let me just give you a quick demonstration on how that is actually done if you still not understood that so let us create a folder first so let's call this folder HTML demo and now we're just going to use Sublime Text because that's my favorite text editor out here all you have to do is create a new file and I'm going to be saying that it's a HTML type then you just fit in your HTML boiler plate I'm going to tell my title is going to be my first web page and that is the title of our web page now let's put in some content into this so it's going to have an H1 which says this is just some text let's save this this is going to be saved into to our HTML demo so let's open it let's save it as index.html now once we've saved it all you have to do to view it is go into your folder and just open it on your browser so as you guys can see the title is written out here on the tab and this is our H1 that we just created okay so that's how you basically create an HTML page so let's move on now there are some elements that I want to tell you all about which is very important so first is the doc type element so the doc type declaration represents that the file you're working is a document type and helps the browser to display web pages correctly and it only appears once at the top of the page before any HTML tag and the doc type declaration is not case sensitive okay so this is what HTML actually looks like now before we move further with some HTML coding I want to make you all aware that a web page is fundamentally made up of three constituents the first is HTML the second is CSS or cascading style sheets and the third is Javascript now HTML will only give the structure of the web page it has nothing to do with the styling while CSS is completely responsible for how beautiful your web page looks what colors you're using as the background how your images are actually lined up and all those sorts of things to learn more about CSS you can always refer to our CSS tutorial on the same page of Ed recer and thirdly JavaScript is for making your page much more Dynamic if you're clicking on a button your posts are being actually submitted that's all being done by JavaScript and if you all want to learn about JavaScript we also have tutorials for that and you can surely check them out okay so now let's go ahead and create some elements and see how they look like on an HTML page so let's go back to our HTML page so this is what an H1 looks like so let me just copy this down now and let me show you all the types of headings that HTML provides us it's actually H1 through H6 so H2 H3 H4 H 5 and H6 let's also change them here H6 H5 H4 H3 2 now let's save it let's go ahead and reload our page so this is how the different types of headings look like this is H1 being the biggest and H6 being the smallest okay so that was about headings now we have some other tags also that I want to make you all aware of so there's the P tag first so P normally stands for paragraph now paragraph is basically what it looks like and it normally contains random text or paragraphs of your web page and this is what they look like this is what a paragraph looks like okay so that was all about adding a paragraph So how do you add images so you can simply add image with the image tag and all you have to say is a source now I already have a beautiful picture of a Pokemon that I really loved as a kid so let me just copy that down into the folder okay so now that we've copied down our image into our folder all we have to do is give the source now this can be nin tales. PNG that's the name of our image let's go back to our page let's reload it okay now you can also put in attributes like height and you could say the height is going to be 7 or 500 pixels and then you can also put an attribute called width and say that's also it going to be 500 pixels yeah so that changes the height and width of your image you can also make it smaller by saying something like 100 pixels so let me just show you that save it let's reload it and yeah now we have a much smaller Ninetails out there now suppose you don't have a picture you can also put an ALT tag so this will say there was supposed to be an image here so let's save that now you will not be able to see the alt tag because our image is working but suppose I misspelled the name of my image and now you'll see something like that out there so there was supposed to be an image out here so it's showing the alternate thing right we can also have line breaks in our HTML so you do that simply by saying slbr and there will be a line break between this word alamco and laboris so let's save that let's cancel this out okay so now alamco and laboris are on different lines we can also make stuff bold so suppose you want to make this first word bold so you can go b/b and that'll make it bold yep now lauram is bold you can also for making things bold you can use a strong tag and now let's say this is also bold and now this is also bold comes up right there then you can change the site of text so let's just create some other text so it not so that it doesn't get cluttered up so we have tags like big and we also have tags like small so let me just show you the difference this text is Big while this is small let's do that so this text is Big while this is small so let me just put a line break here save that let's also put a line break here and now let's put back our image yeah this text is Big well this is small now you can also put in horizontal lines inside your HTML all you have to say is HR and that'll put in horizontal line out there write like that you can also put the width and height out here so width there's no reason to put a height because it's not there and width is going to be something like 70% you could say 70% and you have a line that goes 70% through this screen next we can also put in links into our HTML so suppose you want to go to a site so let's say you want to go to Ed reca now we can put some text like say this is a link to a website let's save that put it here and now this will take us to ed. go yep so that's how it works you can also put links on images so suppose we were to remove this text out here copy this image from here and just put it out here now if we were to click on the image it'll take us to Ed record. okay you can also add lists into your HTML page so there are two types of lists one is an ordered list so ordered list are numbered lists and you can put in list items like this so let's put in a bunch of list items Okay so let's type in some text so this is a random list so list items are actually going to be the things that you're going to list out so these could be anything that you're listing out you could list out your favorite dogs you could list out your favorite chocolates or anything like that let me just show you what that looks like let's go back to our page and this is what it looks like so as you guys can see we have a list out here which says this is a random list this is a random list and just to make it a little more creative let's go and put in some stuff like that so first ly let's put an H2 out here these are some of my favorite dogs let's say I love Sams I also love corgis I love huskys and I also love golden retrievers so now we'll have an actually good list out here so these are some of my favorite dogs now if I were to just make this an unordered list so we could also have unordered list so this is how you create an unordered list you just go ul and then you put in your list items so I'm going to say so let's put in H2 again and these are some of my favorite heroes in Dota two so list item this is going to be let's see I really love play shadow fiend then let's put in some other Heroes like storm spirit invoca and let's say Templar Assassin let's save that and let's see so these are some of my favorite heroes in Dota 2 now if you see our H2 is kind of indented that is because we have put it inside our list now if you were to just cut it out and put it outside let's reinit my lines and let's see so now it's properly showing so these are some of my favorite heroes in Dota 2 you can also put in images in these list items so suppose we were to put in some images of Shadow fiend storm sprit you would just put an image out here and you would put the source now I don't really have images but you can also put in the URL of images so let me just show you how to do that so let's say shadow fiend let's go into the images let's find something small like let's say 300x300 Okay so this looks like a nice cartoonish figure so so we open this image in a new tab and we copy down this link so you can say the source is this link let's save it let's see if it shows up yep and now this thing shows up just outside shadow fiend you can also put in some styling or some attributes like you say width is going to be 100 pixels and height is going to be 100 pixels so let's save that now and now it's a much smaller image of Shadow Fen now we have other types of tags also so these are called div tags so div tag stands for division so to divide your page into separate parts you could say this will contain the footer so footer tags are normally coming at the end now you could also have a div tag in the beginning and this could contain the header so these tags will contain the header this is so let me just put in some header so this is the header and this is is the footer so this is the header headers always come on top and this is the footer now you can also create forms using HTML so let's go ahead and create one so our form is going to be called a registration form okay so now let's put our form in a div first of all so let's give a div an ID so IDs and classes are actually used to select stuff on an HTML page when you're styling so to understand more about ID is check out our CSS tutorial let's give this ID form or registration form rather then let's go into our div and create a form our form will always stay inside our form tags now that we have done that let's understand the elements of a form firstly we need an input so first input will be of type text let's say its name is going to be first name and we'll have a placeholder like sound like this say ARA and we will always be requiring it so if you say required that means somebody will if he's actually inputting stuff into the form this is a mandatory field okay so let's save that and see so now we have a registration form called ARA okay so we also need labels so let's go ahead and create one so label so for first name and this is going to say first name and it's have a colon so now there's a label called first name now we can do this for last name also so let's contrl c contrl v so this is going to be last this going to be last and this is also going to be last and we want to put a placeholder for Paul and this is also a required field so now we have a last name with this placeholder we can submit stuff into that now form also takes into important attributes I forgot it mentions so one is the action and the other is the method now action is something that will happen when you submit this form so you can run a script something like script.php but for now that's for another session okay now there are other types of inputs so let's see let's create another div now suppose you want to input the gender also so let's see let's first create a label and let's also create an input type so input will be type of radio and this is going to be called gender male and let's also give us a value of Choice One save it now you want to label and you want to give it the attribute for and we want to give in the name out here so let's put in that so gender male save that and let's write mail out here so let's save that now and let's see what it looks like so now we have the syn on mail we can check it and we can uncheck it now let's create for female also and others so let's see let's call this female and this is going to be of type Choice two now we have male yeah female but if you see we can actually select both of them or all of them so that's not something we want right so let's make this choice three let's make this other okay now we have a gender submission going on so male or it's female or it's other now we can't really select everything so how do we actually solve that so let's give them all the same name so we can call it gender Choice save it now you either go male or you go female or you go other you can't really select the same thing so that's how you make that that happen okay now let's look into some other types of input types we can take in so let's create another div suppose you want to take in the email address so let's go ahead and copy that SP out here let's say so label for let's see first of all we need to change this type to email and we will also give this a name of email let's put in a placeholder instead of a value and it's going to be something like let's put XYZ at rate email.com okay now we have the thing going on so let's change this label to email and let's change this label to email to now we have the sing going and we can type in our email and we'll also need to type in a password for registrations let's call this password let also make this password the type is going to be password and and let's remove a placeholder because passwords don't really have placeholders save that and now you see when you type in a password you can't really see anything that's how you make a form that inputs a password okay so that was how you takeing emails and passwords in a form now there are some other stuff that I want to show you so let's Dive Right into that so let's create another div okay so first of all we need a select tag so select tags are used from making a selections so let me show you how that works so firstly let's give this a name and let's call this birthday or let's call this the month now we'll also need a label for this let's create a label so our label is for month let's call it birthday now our select can have various options so you're basically going to put in a bunch of options out here let's see option now we need 12 options actually that's three that's six that's n that's 12 delete these out just Reen my lines now our options are going to have values so our value will be something like fine so let's say Jan Feb March April May June July August September October November and December and you could say January out here February let me just create this quickly March let's save this now let's see what this looks like so we have this birthday thing and it has all the months in there okay now out here if you see it already comes with the default value of January now you can also mitigate that by putting in another option called default so let's put another option or so now that we have an option let's give this a value zero and let's say selected disabled now if you reload this there's nothing but you get all these different values now instead of just making it blank you could say that this could say month so now this says month and you could create something similar for days also so for days you need to create 30 of these and I hope you get the logic of creating this thing now now our form also needs a button to submit so let's go and create that also let me show you another type of input so let's say input and the type will be check box and the name will be agree and let's put a label for this A4 agree and I agree to all the conditions of the form now we will have this thing going and we have a checkbox we could check it we could uncheck it something like that then all we need is an input and order an input we rather need a button say button and you say submit and you also have to give this a type so this is going to be of type submit so once that's done we see this button and we can submit it so if you go and submit you'll see please fill out this field because it's a required field and that's all that is there forms so that's how you create a form in HTML you you can also create tables in HTML so let me show you how to do that let's reload and make this blank save it yeah so our tables are created with table tags your table and tables have table datas okay so we can also create tables in HTML for that we need table tag now table comes with the table header first of all so this will contain all your table headers so suppose you were creating a table for dogs and the breeds so th dog and you can say the dog also has a name and breed so this has created a table header now so let me just show you what that looks like so now we have the dog name and breed now we can just simply go in and put in some table rows so put in that row you say TR and in every row you'll have to put in some table data so for that you use a table data tag so TD so let's say our dog is called so let's make this rather dog owner name right so I had a dog and my dog's name was Stoner let's call him Stoner and Stoner was a street dog so let's just keep the braid a street okay so that was one table dat R save it now we'll be needing multiple table rows so let's just copy that paste it multiple times so let's say my friend sham he has a dog called Goldie and it's a retriever and then I also have this friend called aayushman he has a dog called Duke and it's Husky and then there's this guy called isan he has a dog called Monster but it's a pug yeah so now we have successfully created a table and as you guys can see dog owners are Arya shba man and isan their name of their respective dogs is Stoner goalie Duke and monster and the breeds are Street retriever Husky and pug so that's how you create a table now with CSS you can add a border to this table let me show you how that's done with a little bit of CSS so let's say style let's say text SL CSS now out here you could just do some little styling let's say let's give a table a border of 1 PX solid black now our table will have a border and we can also give TDS a border and and they're going to have one PX solid black too so now everything has a border and our table looks much neater yep so that's how you create a table in HTML okay guys so now it's time I actually show you how HTML can be really polished sometimes so let's go ahead and create a blog so for this blog I've already created the CSS out here so I'm not really going to be explaining the styling part but we are going to be creating our blog so let's go ahead and see how that looks like so first of all let's delete everything let's create a page now so let's call this blog now we'll be linking our stylesheet out here so for linking our stylesheet all you have to say something like this and then me go ahead and copy my stylesheets desktop we're doing a stuff in HTML demo let's copy this here right now our blog. CSS is going to be here now let's go and start creating our blog so firstly let's put everything inside a div now this is going to have a class called post because I've used the class to actually style some stuff now that's done so let's have another div so this is going to have a class called date and we're going to be putting in the date so let's say our date is going to be October 24th 2018 now let's say we have a heading so let's say Vancouver my favorite City then let's put in some paragraphs because every article needs a paragraph So for paragraphs you're just going to be filling it with some Laura msum now our paragraph will have a class called Cote okay now let's reload and see what is being made okay so if you guys can see our blog post is coming up now we can also add some images to our blog post so let's say let's add a link first so we link to https ww. ed. go now we are going to use an image for actually making it clickable so we already have an image that's called image 1. jpg so that's there let's also put an ALT tag out here just in case it doesn't load up so alt and say Vancouver image now let's put in some another paragraphs so another Laura myum and some more paragraphs I guess because this is a Blog so let's make it look like a Blog save that and let's also give it a horizontal line to make it look neat save this let's load it okay so we have this nice looking article and it has this image if you click on this image it take us to edira site so we go to edira if we click that image let's add another article into this just to make it a little longer so let's copy down this div so let's change the date first because let's say we posted on the next day let's change the title so the my second blog post save it let's remove the image from this one to make a little different yeah so now if you see you have this nice looking block post going on it has this horizontal line we have some code out here and that's how you can do stuff with [Music] HTML so what exactly is CSS well CSS stands for cascading style sheets and is generally used to control how HTML tags and elements are displayed on your screen so this means basic styling of your web page is controlled by CSS now CSS was actually made to solve problems that were introduced in HTML 3.2 now HTML 3.2 got in some new attributes like font color background color which generally was pertaining to styling of a element on a web page now while this did add some very very needed functionality into HTML 3.2 it cluttered up your code as a developer and made your life pretty miserable so to keep the structure of your web page which is the HTML and to make the styling a different aspect CSS was made by w3c so w3c stands for the worldwide Web Consortium and CSS till date is still being maintained by the w3c developers okay so that was a general introduction to CSS now let's move ahead so this is the basic syntax of CSS you basically have selectors which selects or targets the place that you want to attach your styling to then you have basic properties and value pairs now you can include your CSS into your HTML with a link tag while putting the href attribute as the file name or you can do some inline CSS but that's not actually recommended because that's the problem that we are actually trying to mitigate by putting CSS as a different file also if you don't want to create another CSS file you can do some internal CSS by putting in some style tags in your head tag and just writing some normal CSS to it okay so now let's see the different type of CSS selectors so these are all the different type of CSS selectors and basically a selector is a way of targeting an element on a web page so the star selector selects all the elements and applies the CSS that you would apply to it then if you would say div then it would apply your CSS to all the divs now div comma P will apply to all the divs and paragraphs div space p will put your styling to all the paragraphs inside this now going through all the CSS selectors is a pretty cumbersome job so I recommend that you go through this page on double3 schools which has all the different types of selectors and the different types of pseudo selectors all listed out so this will very much help you when you're doing your own CSS so always keep this page open now just for basic sake let me just tell you about pseudo selectors so we also have pseudo selectors which is defined something like this so pseudo selectors include stuff like hover active visited and stuff like that now suppose you were hovering over an a tag so you can say there is supposed to be some specific styling when you're hovering over it so how would you do that you would just say a golden hover and then you would actually specify The Styling that you want now you could also find all these types of Cudo selectors out here and it's all listed out here so AV visited like select all visited links something like that now I also want to make you all aware of the Box model that is very much used in CSS now Box model has four things the content padding border and margin so content is the basic content of the web page that you want to show to you your general audience then the padding is the space between your border and the content itself the border is a line that can be of any size color and width and then there's a margin which is this distance from the edge of the screen to the bottom okay and now the Box model looks something like this so the content comes in between then comes the padding which is between the border and the content and then there's the margin which is between the screen and the Border itself the screen Edge and the border right so that's how the Box model works now the last bit of Basics is the CSS units so there are four kinds of units firstly we have the pixel so pixel is represent any pixel on a device so you could say something like font size is equals to 25 pixels so it'll make it actually 25 pixels then there's also points which is mostly used in print media and all you need to remember to use points correctly that 72 points equals 1 in now the last two types of units are relative units now these are relative to your current font size so 1 em or 100% is actually equals to your current font size so if you want something to be double your font size all you have to say is 2 em so these are how relative units work in CSS okay so that was all the basics of CSS and how you select stuff and all the units now let's get ahead and code some of our own CSS so for this time I've actually created a bunch of HTML pages and we're going to style these HTML Pages by adding some CSS into them and this will stand as good practice for CSS alone okay so for the first page we have this page called page 1. HTML and it's a pretty basic page let me just open it up and show it to you guys so this is what it looks like without any sort of CSS being attached to it now we're going to create some CSS and we're going to try and practice first of all selecting stuff in different ways possible okay so firstly let's do some very random CSS okay firstly let's target all the divs in this HTML so how would you actually do that well you'd say div by going selectors and let's actually save this as a CSS file first so that our syntax is colored properly okay so that's a div so that's how you select any element in CSS now suppose we were to say background color or rather just background it will be purple and the text or the color of the text will be white so now everything inside a div will look like that so now let's just save this as page 1 as is saved as page 1. CSS let's reload our page and everything that is inside the div now has a white text and it also has a purple background okay now let's see how we actually select IDs so we select IDs with the hash so we have an ID called quote out here if you go and see so where is that thing gone okay so this paragraph out here that you see has the ID called code so we're going to select that and put in some of our own CSS so let's see now that we've selected our ID we can say suppose we want to change the font family so we could say font family is Verana and you could also put in alternate font families just in case Verana doesn't exist in your system like kiland fine so that's how you set up your font family let's also set the color to be black let's see what changes now so this is the quote that I was talking about so that font should change now let's reload oh yes now the font has become verdana and that's what we exactly wanted and the text is also black knife okay so how do we select classes now so if you go here and see we should have a class called movies right right so all these have a class called movie all these a tags so let's select them so first of all to select a class you say dot and then you say the class name now we could put in some random CSS into this again so let's make the color let's keep it white and let's make the background steel blue let's see so where are movies let's see where the movies actually exist oh yeah DOTA Splinter Cell and God of War these are the movies so these should now change let's save it and now they have a background color of Steel blue and they have a text color of five and that's exactly what we def finded out here fine now let's try out some other kinds of selectors so suppose in the span out here we have this ID called author so what if we only wanted to Target that what would we say so we could say span and # author now you could put any type of CSS so let's say text transform so this is how you transform any sort of text and you could say uppercase now the author will be changed to uppercase out here and this is the author the pop Alexander part now watch that now it's just uppercase and we have selected it with this selector called span and hasht author we can also do some other kinds of selecting let me just show it to you so we could select the allies of the unordered list or the ordered list so our skills is the ID this is the ID of skills so let's select them now so we have skills and we could go the audited list and then the Li and what we want to say out here is the color will be purple we can do the same thing for the unordered list too let me just copy that down put this here say unordered list and let's say we change text color to white save that let's reload up page so wait first of all let me uncommon this now let's save it again reload our page and see the differences now since we had given it a purple color it's now all purple and let me just put a background of white so that you can see it yeah now these are purple and these are background white we can do the same for the unordered list too let me just uncomment that let me also give it a background of purple or actually let it be like that let's just make it blue now SAS and haml have turned into blue as you see out here this is the blue thing fine now that was selectors okay now let's go ahead and select some other stuff so what if we want to select all the paragraphs that are after the H3 tag so if you remember we can do that by saying H3 + p and let's say we want a background of black and some text color that is one white so color white not being very creative with my CSS at this moment because this is just about selecting so let's see how that reloads yep now we have a color of white and a background of black and that only selected the paragraph just after the H3 which is my favorite video games okay we can also select every paragraph that has a class by just saying something like P and class we don't even need to specify the color or I mean the class name so you go back background let's say we want to give a gray background let's see all the paragraphs of the class so this is the only paragraph with the class now you can do the same thing for IDs just say ID out here and let's see all the paragraphs with an ID so this is the only paragraph with an ID okay so now that we're done with selecting stuff let's go and actually see how text can be transformed with the use of CSS fine so first of all I already have a page created for that so this is going to be our page that we are going to use to see how text is transformed if you see I have an audit list with all the types of text Transformations or the text stylings that I want to show and we also have a paragraph out here which will show the basics box elements like the borders margins and paddings so I'm going to demonstrate that through this P ID out here right so let's get started first of all let's create our CSS file and in the CSS file we're going to save it and we're going to call it page 2. CSS right then yeah it's connected as page two so let's get started so first of all let's target this ID with lauram so lauram ipsum is just some Latin paragraph that is normally used in web development to fill in spaces with text where you can always come back and delete that text and fill it with something more meaningful so for now we're going to be using this lurm EPM thing so it's in a paragraph tag with an ID of lurm so let's go ahead and select it so we're going to select it with the help of the ID call it lurm now first of all let me just show you what the page looks like without any CSS attached to it so this is what the page looks like right so this is the part that we are going to Target right now first of all let's give it a background of black let's make the color of the text white let me show you what that looks like okay right right now let's give it some borders and padding so first of all to give a border we could say we use a border at property then we give three parameters the type of the border the size of the border and then the color and you do it something like this 3px solid red now apart from solid there are a lot of types of borders and those include dashed dotted rigged and many more these are the ones that are just from the top of my head so you can try out them out and you can find other types of CSS border just by going to Google and saying CSS border types so these are all the types of bordos that you get and you can definitely check them out it's impossible to show everything in one video like that so let me just show you the solid type so let's save it and let's see what kind of Border we actually get let's close this down yeah now we have this neat little border of three pixels in size and red and color now let me just show you how dot it would look like so this is what dot it looks like and and this is what dashed looks like fine and this is what dashed is okay now let's also give this thing some padding now padding exists between the content and the bot so I just explained the Box model when we were discussing the basics of CSS so I hope you remember that so for padding there are four parameters actually the right top left and bottom so you can Define your pad something like this you can go 13 pixels 13 pixels 13 pixels and 20 pixels now these are just very arbitrary numbers but what I want to explain is that this first part will mean that there 13 pixels of patting from the top and then we move VI in a clockwise fashion so this is on the right this is in the bottom so 13 pixels of patting in the bottom and 20 pixels of padding on the left now you could also say this really easily if you want to give equal amounts of padding suppose now this means that there will be 13 pixels of padding on the top and bottom and this second part would mean that there's 13 pixels of padding on the left and the right and if you just put one digit that means there's 13 pixels of padding all around it now let's go and put these different paddings around lpsum now it looks much neater we can also put a margin so let's put a margin and the margin also works in the same way so suppose you were to save five pixels that means it would give a 5 pixel margin all around your content if you were to put say 10 pixels and 20 pixels this means that 10 pixels of margin on the top and bottom and 20 pixels of margin on the left and right and there's also another keyword that I want to make you aware of and that is auto so what Auto does is it gives equal amounts of margin however you specify it so out here it'll give 10 pixels of margin on the top and bottom and equal amounts of margin on the left and right so let's see how that works yep so that's how I changed it now that was all about the Box modeling so let me just remove this part from the h HML and let's remove this part from the CSS now as you guys can see I have this ordered list out here first of all let me reload the page now I have this ordered list out here which shows us all the types of styles and weights and sizes that I'm going to be showing right now and this will include a lot of the units that we discussed like M's points pixels and percentages so let's move ahead so to select these I'll be using these IDs so let me just remember the first four IDs is normal italic oblique and small cap so let's go ahead and create them so firstly let's select our normal ID and say what are we going to try and show here is font style so all you have to say is font style is normal so normal basically means that the font style will be normal instead of something bolded then I think we had italic so you go font style italic then we also had oblique so we go font style oblique and we also had small caps so let me just see that again yep it's small cap so you go small cap and what are we trying to show in small cap is the font variant so font variant small caps so let me just reload and see how that changed stuff okay so font style normal just stays normal while italic and oblique are almost similar then in font variant small caps this is how it would look like where the first letter has a bigger f font size and the rest have a smaller font size but everything is in capital and next is the font weight so let's see the IDS it's normal bold Boulder so let's go with that now so firstly we have normal so font size is a size or weight it's weight so font weight will be normal next part is bold Boulder lighter okay so we select Boulder like that we go font weight is Boulder and we can say again let's for after Boulder it's bold okay so w bold and you go font weight is bold let's see how that changes stuff so yeah bold is bold and font weight Boulder is slightly more Bolder while font weight normal is absolutely normal right time for some more so the next is the font size which which goes from extra large large medium small extra extra small so let's do that so first is extra extra large and this is the font size that we talking about so it's extra extra large there's also extra large so extra extra large looks something like this while only extra large looks something like this fine then we also have large so font size will be large so that's font size large next we have medium small and extra extra small so medium small and extra extra small so this is going to be font size medium it's going to be font size small and this is going to be font size extra exra small so let's see how that changes stuff so this is extra extra small this is small and this is medium now the next thing that we're going to see is how points work so our size is going to be 25 points so instead of just doing that let me just change extra extra small and let's say it's 25 points should remember that one point is around 2 in so that's how font size xtxtra small would look like if it was 25 points then we could also say the font size is 15 15% so that shows us how percentages Works where 100% means the current font size look at a change and that's how 150% means the next thing that we want to show is line height so let's say what is the ID let me just check the ID so the line height IDs are line normal height 25 point so let's just select one line normal and this is going to have a line height of normal let's put a semicolon save it up and that's how line height normal is that is the normal line height now you could say your line height is 25 points and that's how it would change also you could say your line height is around 25 em or just 5 em let's say that and that's how it would change even more with em with 1 em being the constant font size that we using or you could say line height is 200% that is basically twice of what our line height or font is so that's how it would change right so that was all about text styling now let's move ahead and see how positioning and stuff takes place in CSS so for positioning I have again gone ahead and created this page 3. HTML so in here we will be including a CSS page called page 3. CSS so let's go ahead and create that first of all we have to set this to CSS save it as page three and let's get started started so first of all we have three types of positioning in CSS absolute fixed and relative so first of all I'm going to show absolute positioning to you guys now before I show absolute positioning let me just show you guys how text and stuff can be centered first of all so let's start doing some random CSS so first of all we are going to Target this ID called container so let's go hasht container and let's go to background some random color so for Color Picker we just go Color Picker let's give us this background go okay that's the background we chose let's also give it some borders border will be two pixels solid and black we can also set up a border radius so border radius gives you a curved border so you could say border radius is around 5 pixels let's say now let me just open up the HTML file that is concerned at this moment so this is Page Three okay so this is with some CSS now let me just uncomment that CSS first so this is what our page would look like without any sort of CSS now this is what it looks like with the CSS that we just included now to make you aware of how box radius works let me just uncomment that first let's comment it out so box radius should not work and we should get yeah now if you see let's zoom in out here see that this border is pointed suppose we don't want that to happen let's remove that first and let's uncom this save it let's reload and now we have this slight little curved border which looks much neater okay now we can also Center stuff so a neat way to do that is let me just show it to you let's take this part called centered now to center it let me just give it a first background to make it look different different so this background will be let's say 89 cf0 that's our color let's see what our color looks like so that is the color that we are going to center now let's say our width is going to be we can set the width of elements like this so you say width is 50% and then you go margin is going to be Auto so what does Auto do it'll put equal margin on all sides let's reload our page yep and now it's it's Center we can also Center without actually centering the element we can just Center the text by just saying text align and Center fine now that will remove the background and just keep the text out here so that's exactly what we wanted and that's how you align your text okay now let's move ahead with absolute positioning now absolute positioning means positioning based on the document itself which means this whole web browser so a is basically the document that you are actually manipulating so it's called document object manipulation if you've heard of that term so let's go ahead and let me just show you how absolute positioning works so first of all we have this element called top left and we're going to try and put it on the top left so let's select that first so you go top left now let's give it a background okay that'll go to be the background let's also give it a border so let's border be one pixel solid and black let's say now to position something with absolute positioning all you have to say is position is absolute now let's also keep the width around 200 pixels and the height also around 200 pixels let's save it let's see how Stuff changes let me just zoom out yeah so that is our element so this is what top left and bottom right is going to look like now we are going to try and select this element and put it in the bottom right of this parent so let me just show you how that is done so to select that I've already created an ID for it and it's called bottom right let me give it a background of white and you say the position is absolute now we want to change the position to actually inside the element so we have to say it's going to be 0 pixel from the bottom and also 0er pixels from the right so since it is has absolute positioning it's going to position this inside of this so first of all let's give it a background of white and also make the color black right and now we have this right where we want it now there's also something called the Z index so Z index is what comes first on your screen basically so if you have multiple things that are stacked on top of each other with absolute positioning the one with the most Z index will be the one that is shown on top so you could set a z index like this and say the Z index is five so anything with a z index of four will actually come underneath this thing right so that was all about absolute positioning now let's go ahead and do some fixed positioning so for fixed positioning we have this ID called fixed which contains a paragraph saying I'm staying right here so let's select that first let me just remove all this stuff so that that it's not cluttered anymore let me reload the page save it reload it and that's how so I'm staying here first of all this is what it's going to change fixed positioning right is that what we called it fixed position okay now first of all all you have to say is position is going to be fixed now let's make it more prominent by giving it a background of black and a text color of white so let's see this has become black and position is fixed what do I do if I'm scrolling it just stays there it doesn't really matter what I do to this thing okay so that was all about fixed positioning now the next thing that we're going to see is relative positioning so for that I already have two elements created so let's say these are the divs which says this it's going to be relative so relative positioning as I was just saying is positioning based on the relative position of the element so let me just show you so relative one now let's go a background first so let's just select some color let's make this green this green out here okay that's going to be our color let's give it a border of one pixel solid black and let's say the height is going to be around 100 pixels now we're going to select another element and position it relative to this element okay so that is this element right out here is going to be relative two so to set something with the position of relative all we have to say that the position is relative and the Le rest of the CSS is just arbitrary so let's say left not parading left so you want to position it somewhere left of it and the positioning is going to be relative so 20 pixels from the original positions 20 pixel to the left from the original position I mean and you could say from the top it would be around 30 pixels you could also say -30 pixels move it the other way around let's give it a background I'm already given it the background okay let's give it a background of yellow so you say background equals yellow and you can also give border and say one BX solid blue let's get a blue background okay so this relative layout is going to be positioned relative to this thing fine let's just reload and see yep and that's how relative positioning works now this might just not look neat at the moment but I'm trying to drive a point home fine okay now let me just see if I have dog. jpg okay there's a PNG file called Ed Recon so let me just show you something cool first of all let me just remove everything from here okay so now that our things are less cluttered and let's me just rename this now to the image that is already there so Eda PNG and ed. PNG fine let's save this let's see what our page looks like now so this is what it looks like now you can float stuff like images to the left and right so let just select the image tag and suppose you say float them to the right these will float everything to the right now that's how you position stuff or images with the float tag so I guess that was all about positioning of stuff now let's move ahead Okay so in this part we are going to be learning about overflows so for overflows what we can do let's say let's go back to page 2. HTML and we have this text out here or this un audit list and this list is pretty big right first of all let's open up a new page or rather let's open up okay wait let me just close these out so let's save this as page two. CSS or rather let's just call it something new first first of all let's set this to CSS right let's save it and let's call it overflow now what I want to show you guys is something really cool so let's select the audit list so that's what we're going to select let's say it has width of around 100 pixels it has some padding from the top and right so let's get some padding of 10 pixels and 10 pixels all around rather let's give it a margin of 100 pixels and auto so it'll bring it right to the center let's see so there was page two that we're fiddling around with so this is Page 2. HTML now let me just replace this with overflow do CSS let's see now yeah so this is what it looks like now if you see to scroll through this list is quite combersome because you have to actually scroll like this get a the background also background is going to be black as I just love black and the color of our font is going to be white see how that change yep so this is what it looks like now what if you do and say Max height is equals to 500 or rather only 200 pixels yeah so that doesn't really tell much so if you say overflow is auto you got to scrolling bar or you could say overflow is scroll let's remove this Max height now you see we have these little scroll bars out here and that's what exactly overflow does it's basically shows us the items and you can scroll through them yeah basically like that so if you would say that the width is only suppose 50 pixels let's say make this even smaller yeah so that's how now you have this little scroll bar and let's just scroll through stuff so that's how overflow works okay now let's look at some pseudo selectors or some pseudo classes that we can select and style so first of all let me open up the page that is going to be responsible for that so we have this page out here that I've created now it also has some new tags that you might be seeing these are some HTML 5 tags so header tag nav tags and then the main tag these are just some new tags that you see in HTML 5 and you can also Target them through CSS 3 so targeting them is pretty easy but what I want to show is something pretty cool let's save it first let's create a new page let's call it CSS right so let's save this first as page 5. CSS okay so now it's time to practice some more CSS and we'll be doing it on this page that I've have created so this page is kind of a big page to be honest it has quite a lot of paragraphs got a lot of links a few images also I guess and they use a lot of the HTML 5 tags that have been used only introduced like the header tag the nav ID or the nav tag the main tag we have section tags and a lot of other tags like these now these tags can also be selected with the help of let's say CSS 3 that's what we are learning okay now let me just remove this part because we won't be needing that now let's go ahead and save our content and let me just show you what this actually looks like on the web page so let's go ahead and open up page five and this is what it looks like on a web browser rather without any CSS attached to it so let's transform this thing with the help of some CSS so firstly we've created this page called page 5. CSS and we've already attached it to this page out here with the link tag and the href attribute now let's get started so first of all let me just actually make use of some pseudo selectors so we have already discussed Pudo selectors while going over the basics now let me just show you how they work so aover is going to Target all the A- links while we are hovering over them now when we are hovering over them we want the background to become black and text to become white right so let's save it let's reload now if we hover over these the background becomes black and the text becomes white right now the same thing can be done with a lot of other selectors like this is active so when you click on a link that means it's going to turn like that so let's save it let's see let's reload our page first of all now you see when we hover nothing happens but once we click it it becomes that black and white kind of thing right we can also do this for visited and that will actually change the link when once it's been visited so if we go and do this open link in new tab well it's not working out here but if there was actually a database connected you would actually see this to now suppose we want to select our body let's give it a background first of all get out the Color Picker let's give it a nice green background okay and that's going to be our background for the body now we also Al have a div with the ID of rapple so let's go ahead and select that first so we say rapple now let's give it some CSS so we going to say margin is going to be zero and auto now whenever you say zero you do not need to actually specify the units so we can just do that we'll give it a background color of white then we'll give it a width of around 800 pixels we give it a height of around 1,000 pixels okay now let's save that and let's see what it looks like now so this is what it has turned to now we can also do some more stuff so let's select some HTML 5 elements like the header tag and let me just show you that CSS still works as we want it to so let's give it some simple padding Z pixels on the top Z pixels on the right and we want to give some 10 pixels on the bottom and Zer pixels on the left too see what changes now we got that little change we can also select stuff like with the IDS as I just showed you now let's select the navigation which has the ID of hor naav let me just check if I'm right yep it's called hor naav with the N being Capital now we can say stuff like so there's also the display attribute this shows how elements will be displayed now they can be blocked or inline block which means it'll be converted into an inline element now we could say display is blocked and you could just give it some background just to make it more apparent so let's give it a background color of black and make the color white let's see yep that's how it's selected now you can also give uh cedo tags like this one out here like visited to IDs too so let's say once we're hovering over the nav bar we want this to happen so let's save it now if we only hover over it will the change happen so that's how that works now let's go over and see some word spacing now word spacing is used for mostly specifying the words so let me just remove some stuff from here first of all let's remove all this right let's remove the header tags and we just need this part where we have all these paragraphs so I'll be targeting the first paragraph to show you all word spacing so so it's going to be this one out here right here fine let's save it go ahead here reload the page now this is what it looks like let's remove everything that we have already created and let's just select par one I hope that's what it was called out here so it is called Power one indeed now we could go word spacing and just say let's say let's give it 10 pixels between the words right so the spacing between these words in this paragraph should change now now that we've saved it let's go ahead and reload so yeah now you can see that the word spacing for this this out here is much more different now we can also do letter spacing the same way so let's select paragraph 2 for that so for letter spacing all we have to say is letter spacing and then we can say something like 10 pixels now this will specify the letters and how they're spaced now you can see it looks this horrible thing is having 10 pixels of layer spacing also put some word spacing into this so let's see how that looks like it's for word spacing of 20 pixels and make this even more ugly yep so that's what it would look like with word spacing and layer spacing so that was just for experimentation purposes and you can use that whenever you feel free to okay so another property that I want to make you all aware of that is in CSS is the clear property so the clear property makes sure that nothing actually appears before it so in this case the foter tag which is right about here which says only the copyright right part now it is shown here this is the foot attack that we talking about so we want to say something like let's say so you can say clear and both so that's how you specify clears okay so let's give a background color of black let's also say the color of the text will be white just to make it a b more prominent yeah so nothing actually appears before that so that's how you use clear now so there's also style types also style types so let me just see we have these lists out here first of all which says random 1 2 3 random 1 2 3 now let's say first of all let's convert this into an unordered list so find all let's going to replace that with uned list right I just want to show it with unordered list first so let's say let's select all the uls and let's say list style is going to be none now if you see out here we have these bullet points and now we don't okay so you can also do these with audit lists so let's go back and let's do control and UL find all let's select them let's make them OLS audit lists let's see now o doesn't work with list type none if you just realized now we can do something like Alpha lower Alpha so let's see that how that works okay so for lower Alpha we have to say list style type please remember that that was my mistake right now okay if you have to select the OLS again now you see that we have these list types that is saying with small caps now there are other stuff like lower Latin also lower Latin so let me just show you what that looks like save it okay that doesn't really change because I don't think I have Latin installed but we can also go Greek there's bunch of stuff that you can do and it's pretty fun so I have Greek installed now it goes Alpha Beta gamma instead of ABC and that's how you can change stuff you can also change the position of the list style so list style position you could say outside so let's see what that means and doesn't really change much out here but that's one of the properties that I just wanted to show okay now you can also let's say we want to select power one and say so this is going to be a cedo selector again so you say after you say content and your content is going to be let's say at the rate say all these atates are going to be before this little thing out here so let me just show you the change yep so since we said after it has all these at rates after but if you say before this is how it'll change so now it's all before them right okay now let's go ahead and see how we can use the end child elements so for that we're going to select our Ur again actually let me go ahead and delete everything first first of all okay so let me create another HTML boiler plate and this is going to be called list first of all let's say we have an unordered list with a bunch of list items so L all around let me just copy that down and paste it a few times right so now we have all these list items here let's just fill them up with some random text okay so let's just say something random like cats so let's save this let's go out here now we have these things called cats okay so what if we want them to have alternate paragraphs I mean alternate background colors so first of all let's go ahead and select the allies and give them a background let's say this gray color that I have selected F7 F7 F7 now you see we have okay this doesn't seem to be working Lis looks like I've deleted my link tag that's why the CSS was not working so let's see now we have that okay so first of all let's go back and change this to F7 F7 F7 right this will give it this gray color that you see out here it's also give the width of around 360 pixels so that'll bring it there let's also give it a margin of 100 pixels from the top and equal on the side let's bring it to the center right now suppose you want to say Li and chck child and you could say something like 2 N so this will select all the even Childs and you could say they have a background color of white so let's see how that changes things for us now you see that all these things out here have a alternating background color where it's gray white gray white gray white and that's how you select all the even GS now you could also select the first child by saying first child for that we do not really need the to end counter and now only the first is black you could also say last child and now the last will be white That's How Stuff changes with CSS okay now you can also change the first line so let's go ahead and change our HTML up a bit so let's create a paragraph and it's going to have some laurum in it so let me just show you something really cool let's delete all of the stuff let's select our paragraph and we're going to say the Ser selector called first line and let's say text transform uppercase so let's reload that first of all let me just comment this out just to show you what the page looks like without any CSS so this is our page without any CSS and let me uncommon this now save it and there you go the first line has been completely made uppercase now instead of first line you could also say last line last line and that will transform the last line to uppercase you could also say something like first letter and okay so just to show you that it does indeed work let me just reload this without any CSS first okay now you see that lurm epsm begins with the lowercase L now let me just uncom this out save it and now you see that the first thing is a capital you could also change it to say stuff like text siite or rather font size and say around 100 pixels now the first letter will be 100 pixel big and that's how you can do stuff like that okay so another thing is you can also change the pointer or the cursor so let's see when you're hovering over a paragraph let's say p and huffle first of all we want the background to become black we also want the color to become white and we want the cursor to become pointer so so let's see so when you're hovering over it it becomes this hand like thing and when you go out it becomes back to normal so that's how you can change the cursor also now let me show you all something called box Shadow first of all so let's remove this cursor part so without the cursor it looks something like this let's remove the hover tag so that's always there right okay now let's also change this to that gray color that I really like and let's also change this to black so this is what it looks like now let's give it a width of around 400 pixels so this is what it looks like now let's also Center it so that I can show you some cool stuff so margin let's say zero and auto so this is going to center it from the top of the screen now that centered okay so this is what our thing looks like now suppose we were to give it a border so borders are really neat so 2px solid black so this is where bord looks like but there are other stuff also like a box Shadow so this is how box Shadow Works takes three parameters so one z x and y axis and not really in that order it's x y and Zed axis and then it also takes a color so let me just show you how that happen so suppose we say 0 x 0 Y and let's say three pixels on the Z axis ra five pixels to make it more prominent and then it takes an rgba of zero we want to make it really really invisible so 0.5 so that gives it a half opacity now you can see this really neat little Shadow going all across our content so that is what box Shadow does it's a neat little trick for when you don't want to use a border or something like that now other than borders there's also outline let's say an outline is black in color so outline completely negates our box Shadow and you could also say outline equals none so let's remove that now because box shadow looks really neat yep okay so now let's talk about text decorations so since we have some text already going up let's decorate it now there are a few kinds of text decoration that I want to show so the text decoration let's see so first say is line through just put a line through all of the content so now it's all strike through you could also say something like overline or underline so let's see that underline will underline our text yep and overline as you might have guessed well overline our text now everything has a line on top of it fine now we can also set the visibility of our text or any other tag to be honest visibility so let's check out all the other visibilities that are there so do that always go on Google and Ty visibility and CSS and let's see the visibility property and how it goes so you must understand that knowing everything in CSS is kind of impossible so you should always have a go-to or a backup so my backup is normally W3 school and they have everything regarding CSS and its properties these are all the properties that you want to go through and I'm mostly going through the most important ones in this tutorial that you may use in your day-to-day projects and topics but sometimes you might need the rare ones like counter reset empty cells Flex Flex bases and all these stuff and you can always go back to W3 tools and go through them now you can say visibility is visible or something like that and it should make it visible yeah right so that was all about the miscellaneous types of CSS that we were handling now let's go ahead and see some gradients and how we can create some beautiful gradients using CSS okay now before we move on to gradients let me just show you some white spaces or some more text Transformations right so I already showed you all these text transformation there's capitalize there's lowercase there's overline line through uppercase and underline now capitalize we'll just capitalize it so I don't think I'm going to show that to you guys now let's close these two pages out here let's create our new CSS file and first of all let's set this to CSS let's save it and let's say it's going to be page 6. CSS now out here if you see we have a bunch of white spaces right now let's see how you can handle whites spaces using CSS so there is this thing called the ID called whites space pre I think that's exactly what it's called Whit space pre yep let's select that and you could say whitespace is pre let's see how that changes stuff so first of all let me load up P six for you guys right let's remove the CSS save it let's reload it again and what we are actually targeting is this part white space will be preserved right so white space will be preserved now go ahead uncommon that save it and let's reload now see the white spaces that are in the HTML is preserved now white spaces can also be handled in other ways so there are two things that I want to show so let's select this thing called Never wrap never wrap right and we say that the white space is going to be no wrap so let's see how that works so first of all this is what we are actually targeting this Laura myum part out here and it's somewhat like this and let's see how it changes now and now you see that it goes completely out here so no wrap it doesn't wrap it around so you also have pre wrap so let me just show you how that works so I'm going to be targeting this part out here with these weird kind of fight spacing so let's see preserve wrap so with preserve wrap we go pre wrap out here and that's the property so let's see yep L and the wrap has been preserved okay now you can also set up the direction so let me just show you how that's done so we're going to select these two things out here left right and right left so hash left right and also contrl C and let's make this right left fine let's remove all this stuff for now and let's remove everything before right left to now that you've removed that let's remove this let's save it let's see okay so this is where it looks like right now and all you have to say is direction is L2 R so that means left to right and out here you say direction is RTL let's see how that changes stuff so so I prefer right to left and I prefer left to right so that's how it's working fine so that was all about white spacing and directions now let's move on to gradients and animations so this is going to be the last part and the most interesting part in my opinion so gradients are those beautiful backgrounds you see on most websites and to generate your gradient you can always use this thing called a gradient generator so this gradient generator out here is a really nice created generator you have to select the direction and you select the ending colors so I've already selected a gradient out here it's going to create this gradient now let's see go to page seven right now let's select the body tag let's close this off let's close this off I want to save this and let's create a new page first of all and this is going to be our CSS so we save it and say page seven right now we select our body and just paste in so let me just explain how this happens so there's a linear gradient and there's also another thing called radial gradient so I'll just show you that now this takes in a few parameters the first is to the right that's Direction and this is how the colors will change so let's just see how that works so first of all let me comment this out let me just open page seven for you now if you see it's going to be a blank page okay this is a gradient I'm sorry let me save that right so this is what it looks without a gradient and you already saw what it looks with a gradient but let me just show it to you again this is where it looks with a gradient now you can also set the background with other stuff like a image so for that you go URL and you can paste in the URL so let's go and search for a beautiful image I really like Dragon Ball Z so Goku Super Saiyan 3 so that should be a good image to save as a background so let's see this looks like a really nice image so you go here let me just save this image as so this is going to be good Goku and it's going to be saved in desktop and in CSS tutorial going goku. jpg right so you can say goku. jpeg right now that's saved let's go back to our page and it should have a picture of Goku okay so that didn't work I think I got something wrong let's go and analyze that so open up our CSS tutorial okay so it's a JPG file and not jpeg so that was our mistake small mistake nonetheless and now we have this picture of Goku now you can also set the background repeat let's close this off say background repeat and you could say no repeat and it will not repeat the background anymore or you could say background repeat is going to be let's check out all the background repeats that are actually available now background and repeat so if you go into background repeat and see the properties you can just try it ourself so you can repeat it according to the Y AIS you can repeat it according to the x axis so let's see how that works so repeat X so if we say that I think it should repeat it on the x- axis like it was or you could repeat it on the y axis I don't think that'll show up about here but let's see yep it's now repeating on the Y AIS so that's how background repeat also works so we've covered that too now we've also covered the gradients now it's time we do some radial gradient now if you remember let me just go back to the gradient part so if you have a radial gradient all you have to say is that it's a radial gradient out here and a radial gradient doesn't really need the direction because it's going to be radial save it page and let's reload it okay now we have a gradal radi now you see all these lines going in but if I just zoom out you can see that it starts from the center and spread spreads out where it's white on the sides and white on the sides so that's how radial gradients work okay so now that we've covered the gradients let's go into animation so I think animation is the most interesting thing that you can do with CSS so we have selected the div so first of all let's give the div a border so this border is going to be two pixels solid and black now let's give it a background to begin with let's say it's going to be of red now this is how you do animations in CSS okay so before animations actually let me show you how you can move this thing around fine so there are some stuff that I want to show you guys so let this be let me just show you what this looks like so let me give this a width first it's going to be four um 100 pixels or rather 200 pixels and the height will also be 200 pixels now let's see okay we have this div out here let's make it a little bigger give it 500 and 500 save it yep let's also make this much more prominent let's give it a 10 pixel background I mean a 10 pixel bottle and now you see we have a really prominent Square out there now let's try some really interesting stuff so let's say div and when we hover over the div you want to scale this so scale and let's say we want to scale okay so that's not how you scale first you say transform and how do you want to transform you want to scale it and you want to scale it twice so when we hover over it it should scale twice let's reload and as you see it's scaling twice now we can also transform some other stuff like this so we can rotate so we can say rotate 45° let's see when I hover it's rotating 45° you can also skew it so skewing is how it works let's see you can skew at 20° to the x axis and 10° to the Y AIS save it and this is how it get skewed this is how skewing works you can also translate stuff so this is let me show you how translation works so translate and let's see you want to translate a 20 pixels and 20 pixels so let's see hover over it and it translates a little let's translate it around 120 pixels just to make it more clear 120 and 120 let's save that let's reload this and you see that now it's translating so much right so that's how translate works okay now that I've showed you scale rotation skewing and translate let's see we can also set up the transitions so with transitions you can set up a all stuff so now that we're done with transitions let's go ahead and see some animation so for animation I'm going to be actually targeting this div out here so let's actually style this div I've given it the width of 100 pixels and a height of 100 pixels the background of red and a border of three pixels solid and black let's say right let's see what that looks like now that's what it looks like fine let's zoom in a bit now all we need to do is actually set up some key frames so we do that by saying key frames now we name our key frames let's call it anime and we have to set up actually what it will look like at different points in time so we do that by saying 0% and it'll have let's say a background color of red and then it'll move so we want to move it in the Square so let's say it'll be not padding rather there'll be zero pixels from the left and from the top it's going to be 0er pixels let's save that copy that down let's paste that a bunch of times times now all I want to say is this is going to be 25 it's going to be 50 it's going to be 75 and this is going to be 100 let's save that let's change their colors so this is going to be yellow first then changes to Green some pretty basic colors blue then and in the end we'll change it to Red so that brings us back to the original position let's first also move it by 300 pixels then let's move it 300 pixel both ways now it's only going to prove 300 pixel this way and in the end it comes back to the original position now to use this key frames animation we have to give this animation name it's going to be using the animation with the key frames name anime now we can say the animation delay is going to be 2 seconds we can also say how many times it's going to be iterating so you can save that by 100 let's save that okay so our animation is not working because we have and set the positioning so now let us just save this and let's say our position is going to be relative let's save that let's uncomment our animation now you see that our animation will work as we intended to so after 2 seconds our animation starts working and this will just keep going on and on now if you want to actually repeat that animation there's a way you can do that and that is with the animation iteration count let's say you want to iterate it 100 times let's reload let's wait for 2 seconds and voila our animation will keep going on and on and on so that's how you animate stuff with CSS [Music] guys so what is Javascript now JavaScript is basically a highlevel interpreted programming language which is used to make web pages more interactive now it all started in the year 1995 when Brent and I cre created JavaScript in a span of 10 days since then it has seen multiple versions updates and has grown to the next level now JavaScript is basically the language of the web so it is used to make the web look alive by adding motion to it not to be more precise it is a programming language that lets you implement complex and beautiful things or design on web pages now let's move on and see what can JavaScript do so basically there are a lot of queries about why do we need JavaScript and what it can do when we have HTML and CSS already but JavaScript as a language helps you build a website that will do a lot more than just gaw at you now currently we have hundreds of programming languages and everyday new languages are being created now among these are few powerful languages that bring about big changes in the market and JavaScript is definitely one of of them now JavaScript has always been on the list of popular programming languages according to stack Overflow for the sixth year in a row JavaScript has remained the most popular and commonly used programming language now moving on to what this programming language can actually do we see that JavaScript is mainly known for creating beautiful web pages and applications now an example of this is also the Google Maps so if you want to explore a specific map all you have to do is click and drag with the mouse and what sort of language could do that of course is Javascript now this language is also used in smart watches now the popular smartw watch maker Pebble created pebble. JS which is a small JavaScript framework that allows a developer to create an application for the pebble line of watches in JavaScript not just that the most popular websites like Google Facebook Netflix Amazon Etc make use of just JavaScript to build their websites now among things like mobile applications digital art web servers and server applications JavaScript is also used to make games a lot of developers are building small scale games and apps using JavaScript now a lot of people ask about where to run the JavaScript code now when it comes to running the JavaScript code you can use the console which is pretty simple because you can just type whatever you want to do with your code and you will see the output here itself or you can use any text editor for example I will be using the visual studio code and show you how you can write your code here and then how you can run it in your website and see how it works so you can work it both ways you can enter any data or input here and then you can go back to your console and check your output also if you have to check anything for your code you can check it inside the console itself now JavaScript was originally designed to run only in browsers so every browser has what we call a JavaScript engine that can execute JavaScript code for example the JavaScript engines in Firefox and chrome are spider monke and V8 so it's pretty easy for you when it comes to running JavaScript code online now JavaScript can build the backend for our web and mobile applications so in a nutshell JavaScript code can be run inside of a browser or in node browsers and node provide a runtime environment for our JavaScript code so now that you know where the code runs let's move on and have a look at the different benefits of JavaScript now there has to be a reason why so many developers love working on JavaScript well there are several benefits of using this language such as it's easy to learn and simple to implement now it is a weak type programming language unlike the strong type programming language languages like Java and C++ which have strict rules for coding now it's all about being fast in today's world and since JavaScript is mainly a client side programming language it is very fast because any code can run immediately instead of having to contact the server and wait for an answer not just that it has Rich set of Frameworks like angularjs reactjs which are used to build web applications and perform different tasks lastly it also builds interactive websites now we all get attracted to beautifully designed websites and JavaScript is the reason behind such attractive websites and applications now finally we will have a look at the setting up of the development environment or the IDE now there are different editors that you can use for writing your JavaScript code so there's Visual Studio code and then we have Sublime Text and then we have atom as as well now these are pretty famous and popular when it comes to working on any programming language but when it comes to choosing the favorite one I would definitely opt for visual studio code so today I will be using the visual studio code in order to show you all the examples and also explain the fundamentals of JavaScript now out of these my favorite is the visual studio code it's simple and easy to run your codes here now to download visual studio code you just just have to type download visual studio code and just go to the website code. Visual studio.com and get your version that is suitable for your system now it's a very simple lightweight crossplatform and Powerful editor so if you don't have Visual Studio code on your machine go ahead and download it right away now in order to become a frontend developer you should also be aware with HTML codes so here we are going to use our HTML code as our host for the JavaScript now first thing first you must get this live server extension installed here before you try to run your JavaScript or HTML code here so all you have to do is just go to the extensions and then search for live server now I have already installed this so you just have to install this before running any of these codes so now that you are ready to learn how to code in JavaScript let's begin with the fundamentals now talking about the fundamentals the first thing is the variables in JavaScript now this particular programming language includes variables which basically holds the data value and it can be changed anytime so it uses a reserved keyword V to declare a variable now all your variables must have a unique name so now let's get back to a Visual Studio code so this is my basic HTML file here so here I have the HTML head and title and after that I have the script tag as well so inside my body I have a head tag that says welcome to Eda which means when I go to my website it will show me this particular head tag that is welcome to EDD Rea now it's always a good practice to keep your script tag at the end because the browser passes this file from top to bottom so if you put the script element here in the head section you might have a lot of JavaScript code there so your browser may get busy parsing and executing that JavaScript code and it won't be able to render the content of the page now almost always the code that we have in between the script elements needs to talk to the elements on this web page for example if we want to show or hide some elements so by adding the code here at the end of the body section we will be confident that all these elements are rendered by the browser so here we use a variable to store data temporarily in a computer's memory so we store our data somewhere and give that memory location and name and with this name we can read the data at the given location in the future for example think of the boxes that you use to organize your stuff you put your stuff in various boxes and put a label on each of them so that you can find your stuff easily now a variable is basically like a box so what we put inside the box is the value that we assigned to a variable now that's the data and the label that we put on the box is the name of our variable so let's see what's the code for declaring our variable here now in the old days we used to use the V keyword to declare a variable but there are certain issues with that so now we have started using the let keyword to declare a variable so first we will use the let keyword here and then we have to declare a name for our variable and your name should be something that is understandable or by looking at the code you can see that what you are trying to write so here I have a code with the variable name so I have given the name as Eda and then I'll just write console.log name so now once I save this code and finally we will save this code with the extension. JS so this is our Javascript file now in order to to run this in your web browser you need an HTML file so now this is where this file will come into existence so here I have added one source which points to my Javascript file so here I have just given an extension as SRC equals to index one. JS which basically takes me to my Javascript file so now when I run this HTML file it will take me to the browser and you can see the heading here that is welcome to Eda now now how do I get this console so you just have to right click on your website and go to inspect and once this window has come up you can just go to console now inside console you can see that you have Ed Rea mentioned here why because we have declared a variable with the name Eda so our output was console.log name so as soon as we run this code and go to our console you can see Eda now in case I changed the name for example example I'm just changing the name to learn JavaScript now make sure you give something unique because you cannot use the keywords that are there in JavaScript as your variable names or any sort of value so here I have given the value for my variable as learn JavaScript now once I just save this and go back to my browser and once I refresh this you can see that it has been changed to learn JavaScript now previously it was Eda and now you can see that the name has changed to learn JavaScript because the value also has changed here so now that you have seen how this variable works here let me tell you about certain rules that you need to follow while writing the name of your variable now the first rule is that it cannot be a keyword that is it cannot be a reserved keyword in JavaScript for example let where these are all reserved keywords for Java JavaScript so you cannot use them as your variable name next up is you should always have a meaningful name so you must keep in mind that when you are giving a name to your variable it must be meaningful and understandable while just seeing the name itself also your name must not start with any number so how odd would that be to just have a name that begins with a number like one edureka or two edureka so it does not look look good that way so you must not have a variable name that starts with a number next up you must keep in mind that there should not be spaces or hyphen when it comes to the name of your JavaScript for example I have written learn JavaScript here I can also just write it like this in order to separate the two things but there should not be a hyphen or a space in between the two words so you just have to write it together also the names here are definitely case sensor positive that means if I write learn JavaScript like this and then I change it to learn JavaScript with a capital l these two will be considered as different names because it is case sensitive so now this was all about variables now let's move on and take a look at constants Now by declaring a constant you basically assign a meaningful name to a value so once a constant is declared inste it cannot be modified or assigned any other value so now let's see how we can define a constant in JavaScript so for example you want to describe your name in two different parts such as the first name and the last name so suppose you have let first name is equals to edura and then you have last name as JavaScript so here you would need a semicolon to separate the two things and declare it separately in such a manner but rather than doing this you can just use constants that makes your work easier so now let's see how you can use the constant in your JavaScript code so now let me just take the variable name as age so for AG we have a specific value suppose I'm giving the age as 23 now when I type console. log H and and then let me just save this one again and now once I go back to my website and refresh it you can see that it gives me the value 23 so here what I'm doing is I'm declaring a variable but also I'm giving it a constant value so now I cannot change the value of my age here now sometimes we don't want the value for our variable to change because otherwise it's going to create all kinds of bugs in our application now in those situations in instead of a variable we use a constant so that the value of a variable that is the name implies can change but then the value will remain constant now in the next line I give H is equals to 21 and then now let me save this one and see what output do I get when I run this one so let me just refresh it so you can see that I get an error here because we have already declared a constant value for age which is 2 3 and again we're changing the value to 21 so this will definitely give you an error that is the uncut type error assignment to constant variable so here your variable H is a constant you cannot assign any other value to this variable anywhere so thus it will show you an error so basically we cannot reassign a constant so once you have used constant you cannot change the value so the best practice is to use where whenever you're planning to change the value next so now that you know what are variables and what are constants you must be wondering what are the kind of values that we can assign to these variables so now let's move ahead and have a look at the different data types that you can use so now here we have two different types so first we have the Primitive or the value types and then we have the reference types first we will have a look at the different primitive types now the data types are basically the type of data that can be used and manipulated in a program so the different data types include the numbers strings bullion undefined and null so now talking about these data types let's go back to our code and see what are string literals what are numbers what are booleans so let's just type let name equals to edura then we have another variable as age which is equals to suppose 23 now for checking Boolean let's just give another variable as is approved is equals to true so true and false are the ones that represent our Boolean values so this one is basically our string literal and this one is our number literal this one we are using for Boolean next up if we just write let first name and put a semicolon it automatically gives an undefined value to this one but we can also write it as first name is equals to undefined so there's basically no value assigned to this particular variable now the final one is the null value so let me just give it as let date equals to null so now let me just save this and then let me go back to my console again now once I refresh it so basically I have not given any console here so there's no output in my console but then you can always check the type of your literals here so what I have to do is just type type of and then if I want to check the type of my variable name so I can just give name and it shows me string so here I have my name as urea which is a string literal so this is exactly the value that it is showing me here that is the type of my name is string now let's check the type of age so you can see that it shows number so my age declares my number literal here in the same way when we type type of is approved suppose I write type of is approved it'll show me Boolean so you can see that inside the console itself you can find out the types of all of these variables now if I just just want to check the type of my date so I'll just write type of date and it shows an object because we do not have any value here we have a null value which is also considered to be an object in JavaScript now this is exactly where the reference type comes in so these were the different primitive types now we will have a look at objects so now that you have seen the Primitive types in JavaScript we will have a look at the reference types in in the reference type category we have the object array functions so now we will talk about these three different types so first let's talk about the object now object in JavaScript and other programming languages is like an object in real life so think of a person who has a name age address and so on so here I have given three attributes to my particular object suppose the girl is my object so I have three different attributes for this object that is name age and I color now when we are dealing with multiple related variables we can put this inside our object for example we have two variables name and age here so what we can do is we can declare it as a property for our object so we can refer these two as elements or properties for our object this basically makes the code clear so now let's see how we can declare an object in JavaScript so let me just declare my variable as girl and inside girl I'll add properties for the girl so we have to begin with the curly braces so now inside the curly braces I will add the properties now the first property was name so let me just give the name as Emily and then we have the age as 23 and then we also have another property as eye color so it's brown now we separate these properties with the help of a comma now finally we close the curly brace along with a semicolon now I will just use the console.log and find the output for my object which is the girl so now let me just save this one and let's go back to the console and see how it works now inside this I will add the properties for my object which is the girl so here you have to give the name of your first property and then use colon and then I'll just write the name as Emily and we separate the properties with the help of a comma so the next property is H so I'll write it as 23 and then we need to close the curly braces along with a semicolon now I just typed console. log and the name of my object that is girl and close it with a semicolon so here I have declared this variable or my object which is the girl and inside girl I have declared certain properties for the girl which is the name and the age now let me just save this one and go back to the console and see so you can see that once I run this code I'll get to see the properties for my object so it shows the name that is Emily and age as 23 now suppose supp we want to change the name of this particular object what do we do so this is exactly where we use the dot notation so what we will do here is we will just give the name of our object which is girl do name suppose I want to change the name here so I'll just give the name is equals to and I'll give another name here suppose I want to give the name as John and then add the semicolon now let me just save this one and see what happens to the output so now once we go to the console you can see that the name has been changed to John here now this is one approach there another approach that you can change in order to change the name so what you can do is use the bracket notation now what is this bracket notation so we can just type girl and use the square brackets so inside the square brackets I'll give the name that is for the variable that I'm planning to change so my name now will be equal equ Al to suppose I want to give the name as Sam so I just type Sam and close it with a semicolon and then now let me save this one now once I go back to my console and see you can see that the name is changed from John to Sam again so these were two different approaches that is the dot notation and the bracket notation through which you can also get into the property of your object and make any particular changes so now that you have learned how to declare an object let's move on and see what are arrays and how you can declare arrays in JavaScript now the JavaScript array object is basically a global object that is used in the construction of arrays which are highlevel list-like objects so now in case you have a list of products in a shopping cart or list of colors or list of items that are used in order to make a painting you will need to declare them with the help of arrays now declaring them just using variables would be hectic because you have to Define all of them separately which might be a tarious task when your list is pretty longer so now here comes arrays to your rescue so let's see how the arrays work in JavaScript so I'm just going to give the name as items and inside this I will declare my array here for example I have certain items inside my list for example I have color then I have paint brush and then I have a plate so suppose these are the items that are present in my list so what I can do is close it with a semicolon and then now I'll just use the console. log and I'll put items here now let me just save this and go back to the console and now once I refresh this you can see that it gives me the value and also what are the items in my list so you can you can see that I have added three different items in my list that is colors paint brush and plate so it gives me the value of the number of items inside my list and also what are those different items so now once I click here you can see that it also gives me the index value for each one of these items so in Array the index value always starts from zero and not from one so you can see that the index value for color is zero and then for paint brush it is one and then finally for plate we have two so basically the index value goes from zero so here we have 0 1 2 which means that the total length of the array is three so now if you want to display any particular item you can just use this index value so suppose I want to display the paint brush so what I can do is use the square bracket give the value as one because the index is 0 1 2 so the index value for paint brush is one so let me just save this one and now let's go back to the console so you can see that the output it gives me is just paintbrush because I have just given the console log item value as one that means I only want to see the value that is there in the place of one that is the index value should be one not just that you can also add something else in your list with the help of the index value for example I can just give the name and specify the index value where I want to add something suppose I want to add another item so the index value will now be three because I want to add it at the end of my list so I've just given the value as three and suppose I just want to add sprays so I'll just type sprays semicolon and then I'll just save this code so I'll add the item sprays here now let me just change this so that it shows me the value of all the items and let me save this one now once I go back to my console and reload this now you can see that the value of the items have changed from three to four and also another item has been added to my list and also you can see the index value so sprays come at the index value three that's exactly what I have added and that is exactly where the value has been added to now here you don't need to have a similar type of data that is if I want any number to be added here suppose I just want to add 100 so I can just add this number here and then save the code so you can see that in the output it will give the value as color paint brush plate and 100 so it need not be a similar data type you can add different data types and also put it in the array itself now if I go go back to my console and just type type off the name of my list that is I've given it as items you can see that it shows object so you can see that array is basically a type of object we can also use the dot notation here and find out various properties so you can see that you already have different properties that you can find out so let's just find out the length of my list so we can just type length and let me just save this one now once we go back and refresh this you can see that it gives me the length as four so basically with the help of dot notation you can also find out the values or different properties for your array now this was all about arrays so we have seen what are objects and what are arrays now it's time to move on and have a look at functions in JavaScript so functions in JavaScript are divided into two different types first we have the predefined functions and then we have certain user defined functions so basically a function is a subprogram designed to perform a particular task now functions are executed when they are called and values can be passed into functions and used within them so now let's see how we can declare a function in JavaScript so here I'll use the keyword as function for declaring any sort of function or the name that I'm going to provide to my function so now let's see how we can declare a function so I just want to view welcome to Eda so what I do is take the function keyword and suppose let me just type view and inside this I'll have to add the curly braces inside which I will have my console. log so I want to print welcome to Eda so now once I close this now after the curly braces we have to call the function now so my function name is view so what I I'll do is just call my function here and now let me just save this one so now once I go to my console and then I run this code you can see that it shows me welcome to Eda so what actually happened is I have used a function View and I have inserted whatever I want to display and after that I have called my function here so what happens is so inside console log whatever I have written is displayed in my output with the help of this particular function that has been called here now we can also add a parameter so let me just add a parameter inside my function so suppose I've added a parameter as name and here I'll concatenate that particular parameter so let me just type name here and then inside my function I will be typing whatever parameter I'm going to pass through it so inside my function I'll just write learn JavaScript so here I'm just passing a parameter inside my function so here I'm giving the name as learn JavaScript so let me just save this one and go back to the console so once we run the code you can see that it shows welcome to Ed Rea learn JavaScript so the value has been concatenated here so you can see that there's a missing space here because in my code I haven't added the space so in order to add a space so you just have to leave it blank and then add it again and now once once I save this code and go back to my console and run it again now you can see that there's a space after Eda because here I have added a space and then concatenated the name so now let's check for the value square so now let's see how the function Works in JavaScript so here we have taken the keyword as function and we have given a name to our function suppose I want to find the square of a number so I have taken the function name as Square so now inside the square I've given the parameter as number and then you have to open the curly braces inside which I'll return the value that I want as my output so here I want the square of the number so I've given the return value as number into number which will give me the square now you have to close the curly braces next up you will Define the number now so here suppose I want to find the square for number two so I have defined the number here as let number equals to square of two so I want to find out the square of the number two and then finally console.log number now once we go to our console you can see that it has given me the output as four because the square of two is four and I have asked for the square of the number two so this is what the output is so now that you know how functions work in JavaScript let's move on and have a look at some conditional statements in JavaScript now what are conditional stat statements when we use the word as if else or we put certain conditions that is when the conditional statement comes in JavaScript so let's see how that works so first let's have a look at the if statement so suppose I'm declaring a variable here as number so let number equals to let it be an undefined array here next up I will Define the array or I will provide a set of numbers inside this particular array so let me just Define this and provide certain values so let my array be 1 4 1 2 5 2 so these are the set of values that I have provided inside my variable next up here I will be using the if conditional statement so now inside if we are basically supposed to provide any particular condition so I have to find a condition here suppose I want to check if the number in position Z is equal to the number in position two so this is the condition that I have provided here so now after the condition I will just try to get the output so I'll just give console. log so let me just say the answer would be yes so in case the condition is satisfied it'll give me an output as yes so now let me just close this with a semicolon so now this is where and how we are using our if conditional statement so inside if we have just provided a condition for our variable that we are using so our condition is that to check whether the number in the position zero is equal to the number in position two and in Array as you remember the index always starts from zero so we see that this is 0 1 2 so you can see that the numbers in position zero and two are same so basically the output should be yes so now let me just say save this one and go back to our console and see what it shows so I get the output as yes because the condition has been satisfied here my if condition is satisfied and that is exactly where I've got the output as so now let's see what is the if else condition so it is pretty similar to the if condition so it's pretty similar to the if condition just that there's one more condition that gets added here now in this case if both the numbers were not equal what we would have got suppose let me just change this value to three and now let me save and see what my output is so you can see that we do not have any output because I haven't given any value for the next condition that is what if these two numbers are not equal so now this is where the else condition comes in so I'll show you how you can add the else condition so you just have to write else and then I will give another output here so I will just type console. log and then let it be no so when the condition is not satisfied it comes out from this Loop and goes inside the S condition where if the condition is not satisfied it will give me the output as no so now let me just save this and go back to the console and see now you can see that the output is shown as no because here the condition is not satisfied so it has come out of this particular condition and now it's checking the next condition so here if if this condition is not satisfied the output would be no so you can use this ifs condition a number of times and you can provide different conditions and also provide different outputs for different conditions that you are going to imply here so now let's move on and have a look at Loops so in JavaScript we have the for Loop the while loop and the do while loop so first let's see how the while loop works so for that first I have to declare a variable suppose I'm taking I equals to 0 I have to initialize the value of I and then give a condition so here I'll use the loop so I'll take while and give the condition as while I is less than five that is the value of I is less than five and then I'll give the output here so it'll be console do log number is now I'll concatenate the value of I here and then finally it's I ++ so now what happens here exactly is so I have initialized the value of i as zero and then I have given a loop which says that while I less than five we will be printing the number that is number is and the particular number and I ++ that is the value will be incremented after each Loop so what happens here is the loop will start from zero and it will go on till 4 so 0 1 2 3 4 4 as soon as the value of I reaches five it'll come out of this particular Loop and the output will be only from 0 to 4 because so now in order to check the while condition first I will initialize the value of I so let me just take the initial value of i as zero and then here I'll use my Loop so suppose I'm giving a condition here that is I is less than five and for the value of I less than five I will give an output which will be console do log number is and then I'll concatenate the value of I here and then finally increment the value of I here so now what exactly happens here is that so first I have initialized the value of I to be zero and then I have considered a condition that is I must be less than five so I had to put it inside a loop so I have taken the while loop here so what we considered is while the I value is less than five our output will be number is and it will take the particular number so it will count from the number zero and go on till four now as soon as the number reaches five it will come out of this particular Loop the i++ is for the increment that is from 0 to 4 and as soon as it reaches five it'll come out of this particular Loop and then only the number 0 to 4 will be visible in our output so now let me just save this and see what happens so let's go back to the console so now you can see that the number is printed at 0 1 2 3 4 so as soon as the number reached five it has come out of this particular Loop so this is exactly how the while loop works now in a similar manner you can also use the for or the do while in order to insert Loops in your JavaScript code so in do while what happens is first you make the task happen that is you use the do keyword and put your your output or whatever value you want and then later on you put the condition so the condition is checked later whereas in while first you check the condition and based on that you provide the output okay so this was about the while loop in JavaScript now let's move ahead and see that how does the do while loop Works in JavaScript and also how the do while is different from the while loop so in case of do while loop what happens is the condition comes a little later so first we declare the variable and here we take our do Loop and inside the curly braces we give our output so we have our output as number is and we concatenate the value of I and then we increment it as I ++ now once we're out of this Loop here we will be adding our while loop so here we will be giving our condition so suppose I'm giving the condition as I less than 6 so what happens is now it will take the Val values till five only and what happens here is it'll keep printing the value and come out of the loop and check for the value or the condition that I have provided inside the while loop so now let me just save this one and go back to my console and refresh this and see so here you can see that it's printing the value from 0 to five so previously we had given the condition as I should be less than five so it printed till the value four now in my DOI loop I have checked till I value less than six so here it has printed the value from 0 to 5 and as soon as the value is more than five or the value goes to six it comes out of the loop so now let's move on to the for Loop and see how the for Loop works so while using for Loop you don't have to initialize the value here so here we will begin with our for Loop and inside the for Loop there are three sections in the first section you initialize the value for I so here we are giving I equals to 0 and then the next section is the condition for the I value so here I'm giving the condition as I value should be less than seven and finally we will give the increment or decrement value so I'm giving I ++ here and finally we give our output that is console. log number is and we concatenate the value of I here now instead of declaring your variable here you can do one more thing so what you can do is inside your for Loop itself you can just type let and then initialize the value in this manner as well so now let me just save this one and now let's go back to our console and see what is the output so you can see that I've have given my condition that I value should be less than seven so what it prints here is the value from number zero to number six so you can see that using the for Loop is pretty easier compared to the other Loops you do not have much to worry or you do not have too many sections to be divided in this you just have to use the for Loop inside which you can initialize the value of your variable and also provide the condition and then give the increment or decrement value all together and finally you just have to add the output that is whatever you want to print so this was all about for Loop and with this we come to the end of Loops so we have learned about the while loop do while loop and the for Loop and how these three loops work in JavaScript and how easily you can Define any variable and insert it into the loops so for any sort of condition rather than writing the same thing twice or Thrice or number of times what you can do is you can just put them inside the loops and let it just take place all at once now the final thing that we can discuss in JavaScript is the switch statement so what is this switch statement so if you have a number of cases that you are supposed to check inside any particular program so you can use the switch statement so what happens is inside your switch statement you can add various cases and then go for the value that you want to execute so let's see how the switch statement Works in JavaScript so for example let me just take a variable as let game equal to let me just take any particular game such as Cricket it's w cup season anyway so let's take the value of my game as Cricket now you just have to use the switch statement inside which I will just declare my variable game so first we take the switch condition inside which I'll take the variable as game and inside the curly braces I will have my first case so my first case I'm adding the game as football so whenever the game football appears I I will just give the output as console.log I don't want to watch football now this is our output and then we give the break statement so that we can switch into our next case so now if we consider another case and suppose here we have hockey and then we will give another output for hockey that is console. Log and then we put console.log as I don't play hockey and then break this statement again now the next case would be cricet so suppose I have cricet here so I will just give the output here as console.log I love cricet now in case I hadn't initialized any particular game here so we always need a default value when it comes comes to switch statement so here what we do is we take another default value and for our default value we give another console. log so we just give match not found so this is how we write a switch statement in JavaScript now let me just save this one and go back to my console and refresh this okay so there's some error let's see so yeah we just had to put colons instead of semicolons now let me just save this one and now let's go back to our console and see so you can see that the output is I love Cricket because here I have already initialized the game to be Cricket so what I want to see is whenever the switch statement comes in and inside switch we have various cases it will only take the output where I have the value for game as Cricket now in case I change this value to football and now let me just save this one now let's go back to our console and refresh it and see and it says I don't want to watch football because for my football uh case I have given the output as I don't want to watch football so this is exactly what is getting printed or this is what we get as the output now let me see let me just give Foos ball and we do not have Foos ball in any of these cases so it should go to the default value but let's see what is the output here so let me just save this one now and go back to the console and refresh it yes so exactly we get the output as match not found because it goes to the default value so in case any of these are not found or matched with the initialized value it provides us with the default value here so this was all about the switch statement in JavaScript now with this you know a lot more about the loops and switch statement and before that you have also learned about all the fundamentals such as the object arrays strings and how you can take these syntax and include everything inside your JavaScript code and also how you can get it inside your console and see what is the output with the help of your HTML file as well so now with all of these you have learned about the variables objects functions arrays loops and conditional statements in JavaScript now this will help you create your own website now you can beautifully design your website with the help of JavaScript and also by playing around with these fundamentals of [Music] JavaScript so let's look at the basic Dom structure so basic drum structure this is just a simple HTML document here and they have have laid it out in a tree sort of pattern okay there is the document it's the parent of everything else the document tag within the document tag then you have HTML tag which further contains head and body and then head contains title and title contains some text over here if you if you look at this right and then you have H1 tag which contains some text and then you have the P tag which which contains some text the Dom really refers to so so whenever you're writing HTML what is really happening is that you're writing certain directions to a browser so a browser is a software right through writing HTML you are writing certain directions to the browser that hey paint my web page in a certain way so it's like uh if you had a friend and he had a canvas that canvas and that friend together are the browser and you as a developer are the person who's instructing this browser or person and you're telling this person hey draw a box for me make it this wide make it like this make it have this Shadow effect print or display a message like box one over it the font size the font weight multiple multiple things right or if it's a document like let's suppose you're dictating a document to somebody okay the heading should be jQuery training start with the subheading jQuery intro then start with the paragraph plan your jQuery training now so it's that is sort of the way that the browsers work this HTML is essentially directions they are essentially directions to the browser okay what the browser does is that it takes those directions and creates something called as a Dom a document object model out of it now why does it create a Dom because it needs to apply the styles that you have provided from the CSS it needs to do several things to it so it converts it into something called as a Dom and makes it available to you and to itself for manipulation and a large part of JavaScript or jQuery has to deal with dom manipulation and we going to figure that out as we go along right so when it comes to Dom manipulation right if you look at this example so let's talk about this particular line uh let's suppose that there is a div tag with the ID results this particular line basically gets that element gets that Dom element to you in the variable in this JavaScript variable and the following lines are setting the HTML inside it so basically you are setting HTML or you're setting text inside an HTML using JavaScript now that's a very very powerful concept right right there that you can deliver a web page to a user with a certain look and feel and then based on how the user decid to interact with it you will make changes to that web page you can literally change the entire web page right there and then because you have JavaScript helping you out because it has access it can read that HTML document the Dom it can read the Dom and pick out the nodes in the Dom so think of these as nodes and think of jQuery having access to each of these nodes and having the ability to modify each of these nodes whether it is the content of the node or it is something else that it can do to a node mode now one thing about the Dom is that every browser behaves a little differently so if you have ever felt that your website doesn't look the same on Chrome or versus Mozilla versus Internet Explorer versus Opera or was Safari and I'm sure you must have experienced this with even uh very very good websites like they tend to differ quite a bit depending on how careful the developers were so the reason is that it's not broken it's just that every browser behaves differently so it's like this consider each of the browser as a person right you are giving directions to paint the Dom so you want something called as a document to be painted or printed on a canvas and you're giving instructions to each browser but each browser behaves differently each like like a person the browser behaves differently to instructions now 90 to 95% of the beh behavior is similar but that 10% 15% depending on what kind of instructions you're giving might change so the websites don't look massively different but they are still a little different right so that comes from who developed that browser what did they want to build it for what is the main purpose so Internet Explorer for example is built primarily for security it is supposed to be very secure uh Chrome is built for something else Firefox is built for Speed Safari is built for something else Opera is built for something else and based on those decisions sometimes these behaviors chain where they might not react to a CSS property or they might not perceive a certain way in a certain way in a certain directive in a certain way so this is a problem this is a huge problem for developers who have to build quickly and have they have to build websites which would sort of at least 90 to 99% of the time behave in a similar way across browsers because if you were to build for different browsers or if you were to write separate code say doing the same thing for different browsers it would be just too much work and developers are supposed to be lazy right so jQuery helps us out jQuery really really helps us out so think of jQuery like a manager okay think of jQuery like a manager who knows each of the workers so if if these are my friends he knows the behavior of each and every friend he knows five Firefox requires more directions than Chrome or Chrome is a bit slower than Internet Explorer or Internet Explorer needs to be given the instructions slowly now these are not the actual differences but I'm just giving you an example now as a manager jQuery knows how to deal with the different behavior of different browsers so it eliminates the need for us to write code specific to browsers instead it takes care of it for us that is the first and the most fundamental reason why jQuery is so so popular that it removes a dependency to write code for each and every individual browser makes it very very easy for people like you and me to build websites really really quickly okay so what is jQuery then so jQuery is essentially a JavaScript library so it is still JavaScript what is the difference between JavaScript and jQuery JavaScript is a language jQuery is a library built using JavaScript so jQuery fundamentally is nothing but a lot of JavaScript code that has been written by developers who are way way experienced who have 20 25 years of experience developing and programming and so on and so forth so jQuery is just a library now it was first released in 2006 it's one of the most popular libraries with cross browser support it is lightweight lightweight being that the size isn't too much it improves developer efficiency of course easy to learn because it relies on a lot of CSS based syntax will come across this soon and the current uh latest releases are 1.9 or 2.1 you can use either both are sort of the latest releases and uh so let's move ahead now the next question is why jQuery so jQuery is a JavaScript library designed to simplify the client scripting naturally because the syntax being similar to CSS cross browser support it helps in creating Dynamic web pages dynamic in terms of whenever you are able to manipulate the domor that is what adds a dynamic nature to your web page and your web application so that is one of the fundamentals again that it creates Dynamic web pages which respond to user input it is intuitive and easy to learn it integrates with ID so IDs have out of the box support for it it helps in Pages loading faster so because the size is small the download time of the library in itself is small which helps out so generally when you find websites to be slow either it's your internet connection and if that's not the case then the website is heavy heavy being that the size of the code that you're downloading to run the website is is a lot next is that it helps in creating animated Pages like flash so before JavaScript or jQuery or even jQuery became really popular one of the typical ways to animate a web page was using flash however that meant that as a frontend developer you had to learn HTML CSS JavaScript and Flash further flash is not I think it would be sort of sufficient to say that it's not the most elegant of things to deal with when it comes to browsers again a lot of problems across browsers uh and across OS as well so what happens is that jqu because it's so easy to use and there are so many functions already built in it provides us with a lot of functionality to create animation which is similar to flash but without using flash so in terms of you learning newer things it reduces the number of newer things that you have to learn you don't have to learn flash and you're still able to create beautiful animations using jQuery which is also a part of a dynamic web page right uh a web page which can sort of animate based on user input or based on certain section being loaded and so on so HTML document type uh it informs the browser what document type it is and again it has to do with the interpretation of the document so again the document the HTML document just contains directions to paint a web page and the doc type basically tells the browser which version of directions these are and so it is very important till HTML 4 this was the way that you would mention the HTML document type and from HTML 5 it's just very simple you just type this and that's it this would be sufficient now CSS selectors so whenever you give directions uh in terms of hey I want the box to be of red color or I want the font to be 14 pixel or I want to divide up the page in Columns of 20% 20% and 40% right you write that code AS CSS but then how do you tell CSS how do you link the HTML and CSS together in terms of what style is to be applied on what element that happens through selectors now there are multiple ways to select or identify a tag so imagine it in this way that there are eight boxes that you're telling your friend to uh that you told your friend to paint on the canvas now you want uh one of the boxes to be of red color naturally the friend will ask hey which box now if the boxes were numbered that they were identified as 1 2 3 4 5 6 7 8 you would tell your friend hey box number three needs to be of red color now when you're doing this this is an identifier and selector is I think a synonym you can consider it as a synonym for an identifier so there are various ways to identify a HTML tag one of them is the tag name in itself that is a P tag or a div tag or a span tag and these are then universally applied so if I apply a span tag with font size of 14 pixel that will be applied across anywhere in my HTML document that I use a span tag then there are ID selectors which you set by setting the ID on the HTML document then you can of course set the class selector as well now tag ID in class tend to be the most popular ones but then there are more there are a lot of ways in which you can selectors there are pseudo class selectors there are selectors based on relationships that is the parent child relationship then there are attribute based selectors and then there are multiple selectors as well so for now I think we can focus on the top three that is tag ID and class but I think even selectors based on relationships tend to be commonly used as compared to the other ones right so the jQuery object let's say I open my Local Host okay so this is an empty web page right now but just to quickly show you what I mean is that this is an object in JavaScript right curly braces is open and curly braces is closed and it essentially contains key value pairs so if I had to count the number of fruits I could store it like this and then if I do a. Apple it would print one a. banana it would print two and a do guava would print three similarly what you have is something called as a jQuery object now there are two ways to use the jQuery object one is the dollar symbol and the other one is jQuery written in this particular casing that is J cap J small and Q capital and the rest of them small again you can use either it is fine if you use dollar or if you use jQuery but a lot of times the examples that you will find on the internet will be using dollar now dollar is essentially a function okay you need to really look at it like JavaScript syntax so it's dollar is nothing but for you a variable so if I was to show it to you again you can consider it like this where dollar is equal to this right now I can say dollar. a a = to 3 and if I do a I print dollar then it's an object so dollar is a valid identifier or a variable name in JavaScript in JavaScript in general but what jQuery does is that it adopted the dollar as a symbol for itself that all jQuery needs to be accessed through the dollar and if you look at it it's not just a variable actually it's a function jQuery this this parenthesis right if uh so in JavaScript functions are called by the parenthesis the opening and the closing of the brackets and then code inside it so this is essentially the jQuery function which has a lot of things inside it but you need really need to visualize it in that particular way that I'm just calling a function that's it okay so a jQuery object is like an array which contains zero or more indexes it also contains object methods like length context and selector so it's a jQuery object contains a lot of things but keep in mind that it is nothing but JavaScript at the end of the day so we are not going to lose sight of the fundamentals very very important okay so some idas for jQuery so I'm going to be using atom there is Sublime Text again one of the very good ones lightweight there is dream viav you can also use it in the browser console like I was just demonstrating there are online editors such as jsfiddle JS bin Cloud9 and then there are debuggers so I just use a Chrome web inspector in F in Mozilla or Firefox there is the Firebug and you can use either depending on uh what you're familiar with what you have installed uh all of them are are good right so jQuery CDN and installation so there are two ways of installing uh jQuery in the web project one is to download jQuery and have the file like just like a Javascript file stored on your on your laptop or in your project and give the path to it so that is what I have done I have the jquery.js file here if you can see this is a lot of scary JavaScript don't be confused by it but uh I just included it like this so I just added it it's it's over here it will find it and I'll be able to use it okay the other way is through the CDN which is uh called as a Content delivery Network CDN are basically hosted by big companies such as uh Cloud flare such as Google such as Amazon Jin itself might have its own CDN which are basically localized servers so servers which are close to your specific location uh respond to your request the Ben benefit of a CDN is that of course because the server is physically close to you physically meaning that it's not sitting in the US if you're in India it's sitting in Singapore or if you're in us it's not serving you a file from India or UK or Europe it is serving you a file from us itself so physical proximity plays a role of course in transfer rate as well as the fact that the file version is being maintained and you don't have to maintain a c copy of the file on your own machine that also plays a role then there are certain other benefits in it being a standard file so on and so forth versus you choosing it from you know something that a code developer downloaded so you are sure that it is the original jQuery and it's not been modified it's not been messed around with if you think about this right there's this file I might accidentally edit it I just edited it now something might break if I'm one of the developers on this project but if you're downloading it from the CDN I can't really accidentally change something so that is why the CDN helps out but if you're developing on local I usually prefer local being if you're just in development mode I usually prefer having the files on my machine because that's much faster because it's just serving the files from my machine to my machine and uh I don't have to wait for it to download from a server so development I would suggest that go with downloading the file okay so before we start with this let me show you something now notice that I've already loaded the jQuery files and I'm doing a console.log of dollar I have not defined dollar anywhere unlike the browser okay I'm going to reload this page on my browser I'm going to just get rid of this and if you notice it has J HTML l36 line 36 and has done a console. log it has returned a function so jQuery dollar is a is a function essentially which can be a little head spinning but in JavaScript even functions are objects okay even functions are objects so when when it said that dollar is a object it is correct and when it says dollar is a function is correct because functions are also objects in JavaScript now if I do jQuery I'll get the result as the same function and for comparison sake let me do it like this so if you notice both of these are returning the same thing right they're the same function let me just remove these for a second yeah let's also try something else let's see if they are same and they are so as I said jQuery or dollar it is the same thing okay so now talking about what we are doing here let me just okay so I have a simple HTML file which has the div tag now notice that there is nothing inside this div tag so even when I'm loading this page right there is nothing to be displayed it's a it's an empty HTML page with nothing inside it everything is basically I uh I've commented out everything there's only one div tag but it has nothing inside it now let's suppose I wanted to display something after the page was just loaded did how does that work so let's break it apart piece by piece so I have dollar it takes something called as a document so when when I pass in document over here jQuery understands that I'm referring to the entire HTML document right from the very top and then I'm going to use something called as ready ready is a function again it's a function so this is a function the one that I've highlighted which has another function on top of it JavaScript allows us to do this okay that there are functions defined on top of each other it is also called as chaining that have function toed on another function so I'm calling a function which takes in a parameter the parameter is another function so I know that we're doing a lot of functions here but uh just be with me for a second so I am basically telling the browser that hey when the document is ready execute this function the one that I've just selected just run whatever is inside of it so I'm not setting a timer here because I don't know when the page would be loaded or when the page would be ready right I'm just saying that Hey whenever the document is ready do whatever is inside this function so let's try it out let's do a simple console.log document is ready let me actually also comment out all of this now let me reload the page so this prints and let's see if we had this outside let's set it out the line number on line number 36 and then on line number 42 so if you see right line number 36 is executed line number 42 is executed but the document got ready later on it executed this it set this instruction it moved on to this instruction and when everything was done and when the page was ready ready so the page the document was not ready until and unless it comes down to this one un unless it goes through everything the document is not considered to be ready by the browser so this function does not get triggered but then internally JavaScript triggers this function once everything is ready so this is really the first snippet of code I think that most people go through when they're writing jQuery that uh when the document is ready do something and the next thing is that you want to display something on the on the web page now jQuery allows us to select an object or select a element in the Dom or to break it down it allows us to select a particular HTML tag now selection can happen through multiple ways it can happen by saying div so it will select all the divs available in the document all the divs even if there are like thousand 10,000 div it will select all the divs not recommended that you do this because because naturally it causes a lot of problems so like CSS if you wanted to set the style on all divs that is what you would do then the next option is to select it by ID so if you look at this over here the ID is ready demo so I can just set the hashtag like I would do in CSS so CSS would be something like this right or let's reduce it a little bit right so # ready demo in a similar way I can do # ready demo over here which tells jQuery that or the browser in fact that this is what we are referring to this is what we want something to be done on what do we want some to be done on we want to set the text inside it because it's empty and we want the text to be document is ready so we were doing a console.log but now we want to show the user that hey my web page is ready so you want to say web page is ready now let's reload the page as you can see it appeared it wasn't there it is my code which put it there so anything I print over here it will show over here and this happens after dollar document. ready so when the document got ready then this function was executed and the function execution wanted this to happen first select the tag that you want to make changes to so I want this node to be modified manipulated I want the text inside it to be web pages ready and that's what I ended up doing so it is executed as soon as the document is ready for Dom manipulation and we assign a function right so moving on now another thing that jQuery allows us to do which I was talking about is chaining or even even actually JavaScript allows us to do is is chaining functions on each other where functions are executed one after the other so let's suppose I want you to set the color of this after it loaded jQuery provides me with a method called as CSS and whenever you're kind of searching for these things online you have to refer to them as CSS in jQuery and you will immediately open open the documentation on Google or or jQuery website so c. CSS in jQuery this is a method which takes two parameters the first parameter has to be the CSS property and the second parameter has to be the value okay so let's run this for a second and see the result if it works or not okay it already did right web page is ready we can also chain another one to this or let's suppose try let's try a different one let's try it as something like uh font weight and let's set it to 700 now it becomes bold if I make it as 100 it is not bold I make it as 1,000 it is okay it is not bold yeah 1,000 is not a valid property yeah 700 is so it becomes bold and I can even change the color again so I can make it blue now so I'll go over here I the color so if you look at it it's a sequence first do this set the text text then color then this so again I'm giving directions like to a friend but this time the canvas is ready and probably it's a second friend which is my JavaScript and jQuery friend which I'm telling that hey now do this now do this now do this and to try the last thing that was given on the slide deck which is fade in which basically tells it to fade in sort of an animation I can give it a number I can say I think it's in milliseconds so I can say that hey show it in 2,000 milliseconds or 100 milliseconds okay let me set it to 5,000 which should be 5 Seconds which is pretty slow I think uh my live reload is enabled and that's why it's kind of not loading really it's not really showing that effect let me try it out like this right so jQuery also allows us to declare functions of our own on the dollar object now this again goes back to the fact that functions are also objects and objects can contain functions on top of them right so so an object in JavaScript can uh have like a one the keys one of the one of the keys be corresponding to the value which is a function so to define a custom function on JavaScript this is sort of the way we would do it where we would call dollar. fn. my custom function and then Define a function which would do something and then we can do further things to it so if you have to Define your own gquery functions there is a possibility to do that as well without you know rewriting the entire Library however what I would suggest is that uh just keep it as a mental note for now because it is uh preferred that you are a more advanced uh user of sorts who has done this who has sort of familiarity with javascri with jQuery and JavaScript quite a bit to be attempting this but it's a good to know thing that you can extend the library and one of the most beautiful things about jQuery you can extend the library through your own means and fashion what is angular so it only makes sense to start with what exactly is angular so for viewers who are watching any angular video for the first time you deserve an introduction to what you are learning now most of you I assume actually already have done your research before coming onto YouTube and typing out angular tutorial so it's only mandatory that I give you this introduction so first of all angular is a front-end development framework now now that's out of the way let's get into what front-end development framework means so when if you have any web developer friends you will constantly hear to words backend and front end back end and front end so what do these two words mean well uh the roles of a web developer are foled into two very distinct branches in this industry the first is that of a backend developer and the second is that of a front-end developer now a backend developer is responsible for mostly everything that happens on the back end so basically stuff like routing well routing is also done by front-end developers but that's another thing but routing is basically the job of a backend developer uh fetching things from a server writing the JavaScript for all that things that is a complete backend developer thing setting up the server for in fact setting up the database schema that's everything a backend developer does what the front-end developer does mostly entails what you see on your screen right now so the way you see Facebook the way it's designed how everything how the news feed is actually placed like that that is a job of a front-end developer he makes sure that everything on the website looks Tip Top and smack perfect and he does this with a lot of optimization so mostly back in the day front end mostly used to be done by HTML and CSS and CSS used to get very complicated in this fashion it still is a little complicated if you want to present a very polished website but creating the HTML and making it much more reactive is what the framework does for you so most online sites will say that frontend development framework is also referred to as a CSS framework well while this is very true it's not so perfect of a thing to say that this is a CSS framework it is more of a reactive HTML framework and I will explain just now how so the second thing that you should know about angular is that it is maintained and developed by Google so Angular JS is a JavaScript based open source frontend framework mainly maintained by Google and by a community of individuals and and corporations to address many of the challenges encountered in developing single page applications we'll also get to what single page applications mean in a moment it aims to simplify both development and the testing of such applications by providing a framework for client side model view controller that is the MVC architecture or the model view view model controller or the mvvm architectures as you might know it so basically it's maintained and developed by Google Now if you know Google you know things they give you as a product is amazing things like flutter took off Android we know what it is today and Angular JS has been out there since a long time it's got amazing Community if you have any sort of doubt you can go ahead and post it out on stack Overflow under the angular Tab and you will probably get an answer almost immediately other than that your problems might already be there posted by somebody else who is developing and face the same problem so basically you have a great Community great support from Google and it's a breeze to work with angular today the third thing that you need to know about angular is that it is a JavaScript based framework now if that was not already obvious from angular one which is named angular GS well I'm just putting it out there it is Javascript based so why is it a good thing that it is Javascript based well JavaScript is commonly known as the language of the web so if you are interacting with any part of the web you're probably going to use JavaScript or the JavaScript engine you might be doing unknowingly but you are definitely doing it for example you're watching this video on YouTube right now you are using a JavaScript engine that runs a video framework so yeah so if you know JavaScript you basically know how to talk to the web so when you're trying to learn angular you don't really have to learn a new language for example when you're learning flutter you have to learn about Dart so Dart is a new language that is developed by Google and is used in flutter that is their mobile application development framework if you want to go learn flutter you can check out my flutter tutorial on Ed but for now you need to know that angular is based on JavaScript well not exactly JavaScript it is based on typescript typescript is the main language that is used in angular scripts and typescript is basically a superet of JavaScript and we'll get into what typescript is later on so basically the fact that it is made of it is based on JavaScript makes it much more common and easy to reach out for developers like us after that we just discussed that angular is main for single page applications so we are not trying to create multi-page applications with angular angular is made for making single page applications so what exactly is a single page application well it does not re require a page reloading so for example Gmail is a wonderful single page application so let me just go ahead and show it to you so if you go ahead and open up your Gmail account and let's say you are straight up going to open on the inbox page now if you were to go into drafts uh let the s stop loading okay so if you were to go into drafts you see that there is basically no load out here your screen isn't going into that whole whoopty of loading but if you are not on a single page application for example go to webinar which is a recording service so out here we are on the my webinar Tab and if I were to go to my recording out here you see that this goes into a loading fashion this is loading up a new page so this means that go to webinar is not a single page application while Google is a single page application and you just saw how much faster Google can be my God this is still loading and Google was done with it already so yeah single page applications certainly have the performance and speed that you require today to do all your things very seamlessly so it's great to have a framework that lets you create single page applications with so much ease so with that out of the way this is all the theory part let's go ahead and start up with our own angular project so the first thing that you need to do is to start up with angular is go ahead to your browser open up a new tab and search for nodejs now I am assuming that you don't have nodejs installed on your computer so click on the first link and go ahead and download the one that is recommended for most users after you download it you'll get a setup file go ahead click the setup file and just follow the instructions it's a pretty easy install and I don't think there should be much problems with it but just in case out there you get a problem with it some configuration problem goes wrong please go ahead and check out another video that actually explains how to install nodejs on your computer because this video is meant for angular I have a lot to do and I can't waste time with stuff like how to install node there are a lot of videos out there including Ed recas itself and you can go ahead and check them out now once you have installed node on your computer you can go ahead and check if node is installed by just typing node on your command prompt and this should open up a JavaScript console you can say stuff like print or let's say varx = 5 and if you just call X it'll say five out there I know my text isn't very clear because I have this weird blue background in my command prom but yeah if you can open up a JavaScript console with just typing node you have installed node in proper fashion now to exit from this console you can just type do exit and that will exit you from that console so uh let's go ahead and clear up our Command Prompt and the next thing that we are going to do is install angular on our computer so to install angular let's see what we have to do so the best place that you have for any doubts of this sort is the angular documentation so go ahead and search for the angular docs so this will open up the angular docs it's at angular.io dooc go ahead and check the setup part so out here you see that you need no JS now that you have done it you can go ahead and install angular through an npm command so npm is a node package manager and all you have to say to npm is that you need need to install so install or you can just simply say I and then hyphen G which basically means that it is going to be a global install and not pertaining to any particular folder or any project setup so we are going to be installing this globally so that you can access the angular CLI from almost anywhere on your computer so after that all you have to say is angular SL CLI F correct okay it's at theate angular so for stuff like this always keep the documentation open and you should go ahead and press enter after that so this command will go ahead and install angular on your local machine so let's just wait for this to finish okay so as you guys know I already had angler installed on my computer so nothing new has actually been changed it just says it updated one package so that doesn't really matter so this means that angular has been installed on our computer and you can go ahead and check that by just creating an angular project now I'm in my default user directory so let me just go ahead and change it to the desktop directory and out in the desktop directory I want to make folder called angular tutorial so angular uncore tutorial so this is where I'm going to be saving all the projects and all the setups that we will be needing for the various assignments and simple applications that we will be looking at and the concepts so this is going to be the folder for the DAT so let's go ahead and quickly change into that folder and so angular to and we are in our angular tutorial folder so out here what you can do to start up a new angular project is as you guys can see out here this it says to create a workspace and initial application you can use the en new command so new basically tells angular CLI that you want to start a new project and then you basically give your project a name okay so NG new and what do we name our project well let's think of some appropriate name let's go back and see what are we actually going to do next so we going to be writing our first app so it's very simple that we are going to be calling this our first app so NG new will go ahead and create folder which has everything that you need to create your first app so you can opt out for routing for now because we will not be going for routing in this tutorial and we will also be using CSS for our file so just press enter twice and that'll be using the default settings for setting up your angular project and there it goes so that completes our project setup and for this project setup we are also missing out one thing so firstly we are missing out our code editor so I'm going to be using visual studio code but you can use other paid applications like webstorm out there webstorm is amazing if you can pay for it please go for it but for now for a very free way of making a tutorial I'm going to be sticking to my cheap ways and just use Visual Studio code now just because Visual Studio code is free doesn't mean it takes away from any of the functionalities that come from the paid apps it has all the functionalities like syntax highlighting for creating and generating components it's really good you even get a builtin terminal to actually run your angular CLI commands Okay so let's just wait for this project to get set up it kind of takes a couple of minutes from some time so let's just give it some time okay so now that our angular app is set up and up and running all we need to do now is go ahead and just download visual studio code so to download visual studio code go ahead and type in Visual Studio code on your browser go to the first link and also the second link out here that download visual studio code that should give you a setup file and you should just go ahead and set it up that's very easy to do so let's not waste more time and get started with writing our first app okay so out here if you were to go to your desktop and if you made a folder like me like angular tutorial you will see that there's a folder that says first app now if you were to open the folder you see a lot of things you probably don't understand out here so there is a TS lint which is a Json source file there's also the package file there's a package lock there's also this very important angular do Json file which basically includes all your dependencies now this e2e file is not really going to be useful for us in this angular tutorial E2 basically means end to end and this is made for end to end testing of angular apps what we are going to be interested in is mostly the node modules and the SRC so out here in SRC you will see that there is this index page there is an index page which is your HTML file there's also this stylesheet which is your basic styling of the web app that comes built in when you basically make any angular app so first of all let's go back and let's open this folder particularly with Visual Studio code so as you guys can see I have opened up our first app and we can go into our SRC and we can see that there's an app folder and we get a lot of files out here so we have an app component. CSS file we have an app component. HTML file we have an app component doec dots file so all of these dopc dots files are basically used for testing purposes you're not going to be concentrating on testing but rather more on developing an app so this is none of our concern for now you can feel free to actually go ahead and delete it now if you go ahead and open up app. component.ts you can go ahead and see that there is a bit of code written out here so there's an import line from the first thing we can see that it's importing something called components from a library called angular slore there's also this decorator out here that tells angular that this is a component it has a selector it has a template URLs it has Styles URLs and in the class you can see that there is a variable that says title and it says first app now this really doesn't make sense to a beginner but just wait on when we will know what all of these things mean from components to a class and everything else so first of all let's go ahead and see what this app that angular ships looks like so to do that go ahead and open up your terminal you can simply do that by dragging it up and down and out here what you want to say is NG hyphen hyphen open uh which basically makes your default browser open up and all you want to say is serve so this command basically serves the app that is in the development mode right now and it will serve it on a local host at Port number 4,200 so it's compiling at the moment so so let's go ahead and see what it actually looks like let's give it some time to compile and should open up the app for us automatically let's close off this one let's keep the documentation open let's close off the nodejs let's close off my mail okay so this is the first app okay so as you guys can see we are greeted with the welcome screen as you guys can also see it's on a local server this is not hosted at a global scale this is just for your testing purposes as a developer so you can see that it says welcome to the first app now if you go ahead and see out here it says title equals first app now if you go ahead in the HTML part you can also see that there is this little place where title is referenced back again so as a developer I think you can make some sense that these three files app component.ts the app component. HTML and the app component. CSS is kind of interconnected with each other so yeah this is basically what an angular app looks like okay so this is basically the application that angular ships with it's a very welcoming application it says welcome to First app it has some useful links such as a tour of Heroes link it has a link to the command line interface documentation and a few of the angular blogs now this is of really no use to us if you want to learn so let's go ahead and actually fiddle around with this file that comes along with angular when you create your app so if you go ahead and look at the app component. HTML page it looks deceivingly similar to what we see on our screen out here when with this app that angular ships with so as you guys can see it has an H1 that says welcome to an title and out here you can see welcome to First app so basically we can say that the title out here which we saw in the typescript file which is said title equals to First app and that gets converted out here above that we also have a few links and basically it's an un AUD list and also if necessary there is some styling that goes along too but at this moment there is no styling that is available so let's go ahead and Tinker around with this application just to give you an idea um how angular actually works so angular is basically divided into components an angular app so out here what you see is the app component so every component has three files it's basically it's it's a template so it has its own styling so that is app. component. CSS it also has its template so The Styling is CSS the template is app. component. HTML and the logic the business logic that goes inside this thing is in the app. component.ts file now there is also this app. module. DS file and I'll get to that just in a moment but for now what you want to do is go ahead and just delete all these stuff that is there in the app. component. HTML file now don't forget to keep your terminal running which is so serving this application so every time you go ahead and save it basically saves it and you can go ahead and see that it has reloaded it and we have nothing out here to be honest so let's make this page a little more interesting so firstly let's give this just an input let's say so we want a div and in this div we are going to have an input of type text now every input should also go with a label and this label is for name so we can give this type name equals name out here right so let's make this a little less confusing for you guys let's call this first name right and out here you see if you go ahead and save it we should get an input out here we can type stuff out here but it really does nothing even if we press enter and stuff like that so we can also have um a paragraph out here which and outputs out our name for us please don't pay much attention to the Syntax for now just try and understand what is happening in the background because we will get to the syntax just in a few moments so we want to display the name out here so to display the name we need to create a variable called name so go ahead and go to your app. component.ts file and change this name the title to name and out here let's change it to my name so we're going to say ARA so let's save that let's go back and save our HTML file and as you guys can see ARA is coming out here but if we still type something into the input nothing actually happens now what I want to do is whatever I type in the input should automatically be reflected in this paragraph below it so we can do that very simply with so-called tool that angular ships with now these tools are called directives and we will get into directives just in this tutorial I'll be teaching you how to make use of inbuilt directives like the one I'm going to be using right now so let's go ahead and use this directive now pay no attention to the way I am writing this because syntax is something that can be dealt with later on so for now what we want to do is start a square bracket and then an open parentheses bracket that is the normal bracket and all you want to say is NG model is equals to name so name should be in your double codes now this will tell angular that whatever is being typed out here is going to be stored in a property called name and we are also going to be displaying the same name down here in the paragraph So let's go ahead and save this and let's go ahead and reload our file and you surprisingly see that the input part that we had has suddenly disappeared now what we want to do to realize our mistake is go ahead and say inspect now if you go into the console it says uncut error template pars error so it can't bind to NG model since it isn't known property of input okay so basically angular can't figure out what NG model is now this is because we have not imported the functionalities of NG model now I said that this is an input model and it comes shipped with angular but the way typescript works is that you have to go and tell typescript everything you are importing that you will be needing for your app to be running now all your Imports to this is actually done in the module file so things that need to be imported when you are running this is done in the modules file so as you guys can see we are importing a few stuff already that is by default so we are importing the NG module from angular slore and uh we are also importing the browser module from angular SL platform browser now to actually make the magic of NG model happen we need to import something and this is atate angular forms so everything ends with the semicolon so basically in typescript you you need to tell typescript where everything is particularly so angular / forms and what we need to import is forms module now this was telling typescript that we are going to be using this but you also need to tell angular that your forms module needs to be imported so you can do that by just copying this name and putting it in the Imports array out here so put a comma press enter and type in forms module go ahead and save your HTML page also just just in case and now what we see out here is we do not get any error first of all and we have this nice little input box so let's close this we also have this nice little input box it says ARA in the paragraph It also says ARA in the input box now if I were to delete that everything in the paragraph also automatically gets deleted so if this was not a single page application for example reflecting the changes you made to the input would probably take you to reload the page but that is not with angular you can go ahead and simply type your name and everything will happen like it's magic and it'll appear down in the paragraph below so that was all about installing angler setting up your project and we set up our project we saw how the shipping app actually looks like and then we kind of fiddle with it and this is how an angular app basically works you have components and then you also have modules so modules are like subpackages like any app would be divided in sub packages and angular app is divided into modules now modules contain components and this is the component out here that we worked with just now it is called the app component also another thing that I want to bring to your notice is if we go ahead and open up the source code what you see out here is it's basically an HTML page but there's this weird app Root element out here it almost seems like we have built our own custom element below that what you see is a bunch of script Imports that angular does for you so that angular works properly but the main interesting part is this app Root element now if you remember we had seen this app Root element in our app. component.ts file and we see that we have a selector called app Root now the page that gets loaded into the browser is actually this index.html page now out there you see that we have created this app Root thing so basically app rout out here is like a selector so basically this will help you understand how an angular app gets loaded when we get to that so index.html is basically the file or the source code that you see out here it also happens to have this app Root custom element now we built this custom element using our components and we told our component that the selector for this custom element will be app Root and the template of that component is stored in app. component. HTML which is basically this file and also the component has some styling which it at the moment doesn't have any if would have any styling it would be in this app. component. CSS file and basically that's it and we have our app. component.ts file which makes sure of the logic that is working properly so basically this is how angular works it's a bunch of components now let's go ahead and this was our first app that we created now let's go ahead with our next topic and that is what is typescript now you really saw that we are using something a little different from JavaScript it's basically not JavaScript it's typescript so what exactly is typescript well typescript is just a superet of JavaScript it is a strongly typed objectoriented compile language it was designed uh by Microsoft and it is basically a superet to JavaScript so anything that is included in JavaScript is definitely included in typescript but the reverse can't be actually said so everything in JavaScript is there in typescript because it is a superet but everything in typescript is not there in JavaScript so typescript is basically used when you want to create a JavaScript based application that can actually scale at an industrial level because when we're talking about typescript it basically compiles down to JavaScript and this compilation is done by the angular CLI so if you want to go ahead and uh learn integrities of typescript you can go ahead and check out typescript tutorial out there on the web there are plenty of them typescript is really easy to learn and even if you don't want to learn typescript I think it's easy enough if you know JavaScript you can catch it up along the way it's basically like JavaScript but having classes interfaces and stuff like that so with that out of the way we can move ahead to our next topic and that is integrating external CSS into our angular application okay so for the purpose of integrating an external CSS we are going to be working with bootstrap 3 so bootstrap if you don't know is a CSS framework so let's go and see what bootstrap does so this is bootstrap we are on bootstrap version 4 right now but I will be using version three for this purpose of this demo so you can go ahead and see what bootstrap does out here on bootstrap's official site I also have a bootstrap tutorial you can go ahead and check that out too it's basically will show you how to use bootstrap in this various forms and formats okay so now we are only going to integrate bootstrap into our project so to do that all you have to do is go out here and open up another Powershell command out here what you want to do is type in the commands npm install and Das Das save and you want to say bootstrap atate 3 what this will do is download all the files of of bootstrap 3 and store it in this node modules folder so node modules folder is anything that you use from the node package manager if you download some external package it will be saved in your node modules after that after it's downloaded I will show you how you can integrate it into your project that you are working on let's give it some time to actually download the node modules or what we have here that is bootstrap 3 okay so we have actually downloaded bootstrap 3 now you can check that by actually opening the node modules folder and going down to b o so a b c d b um should be somewhere here okay it seems like now find it there let's go ahead and check it out on our desktop so we have angular tutorial first step no modules and there should be a bootstrap out here yep below bonjour so it should be below bonjour so let's go ahead and find bonjour out here so this is our bootstrap folder that we had just downloaded now out here we have a few folders so under this bootstrap folder go into the disc folder that stands for distribution go to CSS and all you have to do is copy this right click on it and copy the relative path now all you have to do is go into let's let's minimize this a little so that it becomes easier to work with now all you have to do is go out here go to Styles this is the angular.js file on almost line number 27 you will see that there is a Styles array so out here all you do is put a comma just press enter and put in the address of the bootstrap.css file now be aware that when you copy the relative path you have to actually go ahead and change this all to backslash so just change all of these to backs slashes and you should be ready to go so let me just show you guys this is without actually having bootstrap installed so this is the app that we have created now if you were to just go ahead and inspect we can go ahead and see that in the head part there is only one styles that is says text/css this other styles is just a way of telling angular that there's a source mapping of all the CSS Styles now at this moment you can see that this is the global styles to this file now once we actually go ahead and save our angular.js file and then what we have to do is actually go ahead on node where we were actually serving hit control C and then what you want to do again is serve it again basically save your angular Json file stop serving your application onto the server and then save all your files and then start up a new Fresh serve process again so to start a new Fresh serving process all you have to do is go ahead and type NG uh new or you can just say n Oh wait we're not creating a new component all we want to do is say NG hyph o and serve so remember this has only one style at this moment so now let's see how we can actually integrate bootstrap if we actually could integrate bootstrap into our project okay so our application has actually compiled and let's go ahead and see let's go ahead and inspect our page and if you go into your head part you will see that there is a new style that has been added so this says that bootstrap version 3.4.1 has been added and now you can use all the styling that comes along with bootstrap for example if I were to put this division inside a class called Jumbotron this would give it a specific type of styling a jamron is not exactly meant to be used like that so let's go ahead and change it to a container now if you want to know about all these bootstrap glasses that I'm using you can very I'll go ahead and check out my bootstrap tutorial that I have up on Eda site okay so let's remove this we are not doing the styling properly at this moment let's get back to this okay looks like we have actually broken something but what I wanted to show you is that we actually have bootstrap going on and our bootstrap is completely working so this is bootstrap version 3.4.1 for us so that is guys how you would would add an external CSS file to your project okay so our next topic for today is how angular actually loads so if we go back to our code editor and uh we analyze all the files that we've seen so first of all you have three component files that is the component styling file the component template file and the component um typescript file now if you were to go back to your page where your application is loaded and you would inspect it or to be honest you have to go and see the source so in the source you see that there is is this up root element now how does the uproot element know that it has to insert an input box and a paragraph out here well let me just explain that first because this is a very important concept this will help you how in learning angular because you're getting to the root and fundamentals of how angular is working so firstly the page that is getting served by the NG serve process is this index.html file now in this index.html file we have somewhat of a custom element with the selector of app Root now if you would realize we have tighten this app Root selector out here in this app. component.ts file in this app. component.ts file we have a decorator method we have a decorator class I'm sorry and in this decorator class we have said that the selector is going to be aboot basically it saves a string as a selector and it gives it a value that it this is going to be used for recognizing an element on an HTML page we have then also said that the element will have its templating in app. component. HTML file so very basically when an app Root component is present on your HTML file angular knows that it has to serve this three files out here these three files out here the app component files it knows because it's tied in with the selector now if you go ahead and see it out here there is a module file also now before we get to the module file I'd like to tell you that the first piece of code that is actually run is always the main file so out here the main file is the main.ts file and out here you see this line out here so out here in this file basically there are a few Imports to one is to enable production mode for development purposes but the most important line out here is platform browser Dynamic and it's a bootstrap module so in this bootstrap module we are passing in the app mod module as an argument so since the app module is being passed as an argument the app module part is actually invoked out here and out here you see it has another bootstrap array so this bootstrap doesn't actually refer to our bootstrap CSS framework we just included bootstrap means what should be run first when you are actually running an application so out here we are saying that we want to run the app component and the app component here happens to have this HTML file the CSS file and this typescript file which are also tied into the index.html which this uproot selector so whenever this uproot selector is found on this HTML page it is going to actually serve these three files and that is exactly how an angular app is loaded onto your screen so this workflow is very important for you to understand such that uh you know where you are going wrong just in case in future debugging processes we will be having a very detailed lecture on debug in in the future so please hang on for that so this part that I just explained will act as a precursor of knowledge for the future videos which will need you to understand how an angular application is actually being presented to you on your screen now moving ahead we are going to go ahead to our next topic and that is components now what we have here under this app folder is a component now components are the building blocks of angular everything that you see on your screen using angular is basically a component so imagine there is this website that you see on your mobile phone and it is a website built by angular now everything on angular will be starting with the root component and they will obviously contain sub components and even more subcomponents after that so basically it is a tree of components now if you were to remember my flut tutorial if you haven't watched that please go ahead and check that out flatter is amazing and you should be learning it today well in flutter I had said that application built using flutter is a tree of widgets now the same analogy can be put to web page that is built using angular as a tree of components it's basically a unit or a building block and each framework gives it it gives its building blocks a different name so for flatter it's a widget and for angular it's a root component or just components in himself so what we did out here is that we had a component now let's say that we want to create another component how do we do that well all you have to do is go ahead and right click on your applications folder and what you want to see is you want to put in a new folder now let's call this folder um let's say we want to have a component called servers so let's call the servers and out here what we want to do is we want to create the server files so out here we are going to create a new file so we are going to create a new file and this file is going to be called the server. component. HTML so why did we choose this naming process well when you are building an industry level applications you tend to forget what is what so naming something appropriately so out here you know that this is the server. component. HTML file this gives us very good information for example it is a server it is a component and this is the template HTML file now in this template HTML file we could be putting anything for example let's just put an H3 and we could say that this is the server component that you are viewing so if this is coming on our screen we will know that there this is a server component now we can we also need to add a new file out here so to serve this file we need a typescript file first of all so what we need to do is create a new file and this will be the server. component.ts file so TS stands for typescript now if you were to go ahead and check out the app component.ts file out here you see that there is an import and then there's a class so first of all we are going to try and replicate this because that is also a component and we are making our component manually so we will know what we want to do so first of all we want to say export class and let's say server out here let's see the naming fashion of what how it is used so it says app component so to make it more clear that this is a component we could just use something of a naming structure like server component our brackets now we said export because we want to be using this class everywhere else so this was your way of telling angular that this is a component but this is not where it actually ends you also need to tell angular by actually putting a decorator so adate component will tell angular that this is indeed a decorator so out here if you were to go ahead and again look into your components file out here you see that we have to open the components part and type in the selectors now basically what we want to put in in this component is want to say how you want to select this so we're going to say selector and our selector will be let's say a server I'm sorry that's