Transcript for:
Full Stack Developer Course Notes

do you know the average salary of a full stack developer in the US can go as high as 125 000 per annum in fact according to the U.S Bureau of Labor and statistics by 2024 there will be a 27 percent increase in the job for developers so now is the best time to start picking up the knowledge needed for this career path full set developers are more likely to be in demand nowadays because every business is moving to the internet and they are the One-Stop shop for developing web-based software applications today's video will be a full course on full stack development for 2023. starting from the basics to the advanced topics we will start with a small introduction to the full stack development after that we will see how to become a full stack developer in 2023 moving ahead we will learn more about HTML CSS and JavaScript then we will discuss the Frameworks of JavaScript which is react and angular next we will talk about back-end development node.js and Django after that we will learn about SQL mongodb and see what GitHub is and how to deploy our project we will also talk about the salary and skills of a full stack developer finally we have lined up an interview question then answer series for you guys to help you land a great job in the full stack domain so without further Ado let's get into this full course sure you're all aware that every application that you use today has something called the front end which is the user interface and the back end which is the software that accesses data for us and finally we have the database to store the data now these three together form something called as the full stack so hi guys welcome to this video on what is full stack by simply learn but before we begin if you haven't subscribed to our Channel already make sure to hit the Subscribe button and the bell icon to never miss an update so here's what's in store for you first we'll have a look at what front-end development is then we'll see some of the front-end languages then we'll move on to some front-end libraries and Frameworks then we'll see what back-end development is understand some of the popularly used back-end languages and Frameworks and finally we'll have a look at the database so now what exactly is front end every time you open a website it has several UI components and once you click on a particular icon say sign in in this case you get navigated to the sign in or the login page right so what happens is that all of these items facilitate navigation and utility these are collectively called as the front end so the front end is the visible part of the website or the web application which is responsible for user experience the user directly interacts with the front-end portion of the website or the web application so now let's have a look at some of the front-end languages so I'm sure you've heard of HTML CSS in JavaScript so these are collectively called the front-end languages when it comes to HTML it defines the structure of websites and formats the web pages it also defines text documentation so let's look at a simple example if getting your learning started is half the battle what if you could do that for free visit skillup by simply learn click on the link in the description to know more so here I've made use of the H1 tag which is the heading tag in HTML and I've displayed the message hello welcome so correspondingly my website displays the same message so HTML is responsible or defines what is being shown on the website next up is CSS now CSS is a style sheet that allows you to alter and style different web components beat size font spacing Etc it makes the content on the website look more decorative correct so now if you have a look at the code here I've added some styling I've changed the font style to italic I've made the text bold and I've changed the color to red and again correspondingly all the changes I've seen on the website moving on we have JavaScript now JavaScript is a very powerful client-side scripting language and it is mainly used for enhancing the interaction of a user with the web page so again if you have a look at the code here I've created a form wherein the user can enter their name and I've also displayed the message please enter your name as a result an input box is made available whether user can type in their name now this is facilitated by JavaScript so as I mentioned earlier it is used to make web pages interactive and bring the web applications to life so next let's have a look at some front-end Frameworks and libraries now most of these are JavaScript Frameworks and libraries first we have react then there's angular there's view there's jQuery and then there's bootstrap now all of these help develop the front end of the application however when it comes to react angular in view it's not necessary that you must know everything to create a website one of them will be sufficient however the usage of react is on the rise and most of the developers prefer using react jQuery and bootstrap are also powerful Frameworks that can be used used to create interactive web pages now that you know what front-end development is you must be wondering how the data is being fetched and how this data is being presented in front of you on your screen correct now this is all facilitated by the back end of the application so let's understand what back-end development is now backend basically refers to the server-side development of the application it is responsible for managing all the database with the help of queries and apis so every time the user makes a request it queries the database and retrieves the data from the database and presents it to the user and lastly it ensures data consistency so now let's have a look at some back-end languages and Frameworks firstly we have node node and express.js are packages provided by JavaScript then there's python which is a very popularly used language python Frameworks like Django and flask are popularly used to create the backend of applications then there's Java and Java provides spring and Java server faces which are also used for backend development then there's c-sharp which provides Frameworks like asp.net core and asp.net MVC and other popularly used back-end languages are PHP that's Pearl and Ruby database is the collection of interrelated data which helps an efficient retrieval insertion and deletion of data from database and organizes the data in the form of tables views schemas reports now some of the commonly used database Management systems are MySQL there's postgresql there's Microsoft SQL Server this Oracle database and then there's mongodb but how can we assemblylearn help you if you wish to make a career as a full stack developer then a certification will come in handy for that you could head to our official website and look for full stack development courses now we offer the full step Java developer Masters program we also provide the postgraduate program in full stacked web development and we also provide the full stack web developer mean stack Masters program you can go ahead and click on the program and have a look at the overview if this suits your requirements you can go ahead and purchase the course is how to become a full stack developer so let's begin so here are the topics that we're going to be discussing so first we'll see what will stack development is who is a full stack developer then we'll move on to the responsibilities and then we'll dive into the detailed roadmap and then also let you know about the salaries of full stack Developers and finally how you can get certifications all right now what exactly is full stack development now consider a web application let's see Instagram so every time you refresh the page new images are loaded so this is what the user experiences right new images are loaded onto his feet but what exactly happens behind the scenes is that the back end fetches new images from the Instagram servers and these images are then loaded onto your Instagram feed right the app is so easy to use and leaves the users extremely satisfied in case of any application there's always the front end the back end and the database so the process of building all of these aspects for an application is called Full stack development so I hope you understood what exactly full stack development is so moving on let's see who a full stack developer is now basically a full stack developer works with both front end and the back end of an application he has to be familiar with languages like HTML CSS JavaScript and also one or more back-end Frameworks at node.js and python now these developers have got all the web development skills to build websites and applications from start to finish now that we've understood what exactly a full stack developer does let's look at some of his responsibilities the first responsibility is developing the front end so as discussed they must be able to develop the user interface for the users with the help of HTML and CSS next up is design the back end now this is also the most crucial part of app development they should be able to design robust back-end architecture to ensure the smooth functioning of fetching and updation next up is the design database and servers now databases and servers must be resilient to any outages and must maintain consistency next up is cross-platform compatibility now depending on the platforms there could be some discrepancy and alteration in the functioning of an application right it's crucial to make sure that the applications behave accordingly on all these platforms next up is developing apis depending on the planned architecture the developer must be able to develop apis the application must also be responsive and interactive and keep the user completely engaged and lastly it should meet all the technical and consumer requirements so these were the few responsibilities of a full stack developer moving on let me explain to you a simple roadmap of how to go about to become a full stack developer so this mode map basically shows you the prerequisites and skills one should have to become a successful who started laptop all right so let's go ahead and begin with tools and software now the first and the most rudimentary requirement is a text editor now the most widely used editor is vs code it is free open source and can be used to code in different platforms like Windows Mac OS and Linux next up is a web browser so you can either use Firefox or Chrome but Chrome is highly preferred now also you could need a few editor extensions and vs code has a few of them some of them could be live SAS compiler and live server moving on you need to have a good hold on HTML and CSS so HTML is a markup language that is used to define the content that appear on your web page right the developer can incorporate images text and videos depending on the requirements and moving on to CSS it is basically a stat sheet which is used to decorate your entire application it is used to define the appearance of the content say in terms of shape color size spacing Etc next up is Javascript now this is the most widely used front-end language and enhances the interaction with the web page now you might want to brush up your knowledge on simple Concepts like arrays functions objects and loops you can also learn es6 features like callbacks promises async await top manipulation and event fetch API and Json all of these are required when you're making use of different JavaScript Frameworks and libraries so I'd recommend you brush up your knowledge in all of these topics react angular View and jQuery are some of the JavaScript libraries and Frameworks that one can use now all of these topics that we discussed earlier be it ESX features or basic concepts they come in very handy when you're using these Frameworks among react View and angular over the last couple of years react has gained immense popularity followed by which viewers also being widely used now angular has seen a downward curve over the past few years so depending on your requirements you can choose one of these Frameworks next up is Version Control now git and GitHub are the most widely used Version Control Systems now git basically helps you manage project files git basically keeps track of the entire history of things that the user is working on right so it makes sure that it allows the user to backtrack and see what he's worked on until then moving on to GitHub it is basically a web-based service for Version Control using git now the user can also look into other people's code identify issues or errors and also even propose changes now this comes in extremely helpful when you're working in a team let's move ahead and look at some of the backend environment now the most popularly used environment is node.js now this is basically an open source cross-platform runtime environment that allows developers to create server-side tools and applications in JavaScript now node is typically used to create real-time applications with two-way connections where in both the client and the servers can communicate and exchange data without any hassle now I really recommend you have a basic knowledge on command line as well that is now knowledge and basic command line like npm there is no package manager is also essential so this was a simple overview on node.js moving on to other back-end languages there's Python and the most commonly used framework that is Django now python is the easiest programming language out there and I'm sure everybody will agree with me with this so it also offers many libraries and Frameworks for different Technologies so when it comes to backend in full stack development Django is a clear winner now it is a high level python framework that enables rapid development of websites it is also free and open source and has a huge active community of users so I really suggest you get your hands on Django and work on it extensively moving on let me give you a brief overview on the trends in 2020 first up is blockchain now blockchain is an emerging technology and has seen tremendous growth in the last few years now it has also entered into domains like healthcare and finance next up is AI and chat boards AI is booming and there is no doubt in that so languages like Python and JavaScript Frameworks at tensorflow are widely used mobile app development this is one of the top trends you should look out for in 2020 now there are mobile applications for practically anything these days so Frameworks like react native and flutter can be deployed to develop these applications next up is Progressive web applications now these are like a hybrid of mobile and web apps they are faster to load and provide some amazing features like push notifications another important feature is their ability to work offline lastly we have iot with the increasing number of devices getting connected to the internet every second development of iot applications is also on a rise so these were a few trends that you should look out for in 2020 moving ahead let's look at the salary of full stack Developers now according to pay scale the average salary of a full stack developer in India is around 5 lakhs 90 000 rupees per annum the average salary of a full stack developer in the US is around 75 000 US dollars per annum all right so moving on to the fun part let's go ahead and look at a simple quiz now here is a quiz question which of the following is not a JavaScript framework or a library option A react option b angular option C pandas or option D View so let us know your answer in the chat section one lucky winner will get a voucher so I'll keep this on the screen for a while mind you which of the following is not a JavaScript framework or a library so comment your answer immediately all right so moving ahead let me tell you how simply learn can help you now there are several online certification courses but if you're looking for something that is concise and well structured then head out to the simply learn website and here you can see a few options you have the full stack Java developer master's program you have the full stack developer.net Masters program and you also have full stack web developer mean stack Masters program you can also go through the overview and depending on your requirement you can choose the appropriate course hey guys I'm sure you all have heard about phrases like web development full stack development front-end and back-end development but if you are not sure about what exactly they mean or how they're different then don't worry you're in the right place this video on front end versus back-end development will help you differentiate the two but before we begin if you haven't subscribed to our Channel already make sure to hit the Subscribe button and the bell icon to never miss an update now let's Jump Right In and look at what's in store for us so first we look at what exactly web development is then we look at the different types of web development going ahead we'll look at what front-end development is and understand what exactly back-end development is and lastly we'll be comparing the two on the basis of languages libraries and Frameworks skills job roles and salary so now let's begin by understanding what web development is web development is the process of creating a website on the internet it refers to the non-design aspects of a website such as creating features and functionality using programming markup and scripting languages developers concentrate on the technical aspects of web development such as architecture programming application integration and graphics now let's look at the different types of web development now web development could include the front end and the back end now together they form something called as full stack development now I'm sure you're wondering what they actually mean so let's go ahead and understand them let's begin by understanding what front-end development is now front-end development is the part of the website that codes and creates front-end elements of a website which are features that are directly viewable and accessible by the client now essentially a front-end developer is in charge of everything you see be it styling Graphics text alignment navigation colors Etc and the attempts and he attempts to improve the user experience to make it as seamless as possible now these front-end developers also contribute to the overall design and aesthetic along with debugging responsiveness and performance are the two main objectives of front-end development then what exactly is back-end development you guessed it right now web development that occurs at the back end of programs is accurately termed as back-end development now this back-end development covers server-side web application logic and integration and activities like writing apis creating libraries and working with system components as opposed to front-end development which focuses on customer facing services and programs now back in developers create code that allows database and an application to communicate with each other essentially a back-end developer handles what you don't see we are in charge of the back end of the website which includes servers databases and applications so now that you have a brief understanding of what front-end development is and back-end development is let's go ahead and compare the two so we'll be comparing the two based on five different features that is languages libraries and Frameworks skills job roles and salaries now let's begin with languages now front-end development typically includes coding using languages like HTML CSS and JavaScript now as you all know HTML is a markup language that is standardized system for tagging text files to achieve font color graphics and hyperlinks now CSS is used to format the layout of these web pages and JavaScript is used to create interactive elements on the web page when it comes to backend the languages include python C hash Java Perl PHP Ruby and some JavaScript now Java in particular was built from ground up to run on the server side so Java is extremely useful python is also one of the most popularly used languages and c-sharp language is the preferred architecture for backend programming in Windows environments now talking about libraries and Frameworks front-end libraries and Frameworks include react.js angular view jQuery and bootstrap while talking about back-end Frameworks we have expressed JS node spring Django flask JSF asp.net and dotnet MVC now front end and back-end developers work very closely so it's helpful to have a foundational understanding of front-end developer Technologies like HTML and CSS as well moving on to skills now front-end developers are in charge of bringing visual elements to a website as well as interactive elements such as navigation buttons and anything else that improves overall usability HTML JavaScript and CSS are frequently used to ensure that a site's visual site operates well so it's crucial to know these languages and a good understanding of JavaScript Frameworks and libraries is also essential and other General skills include a good grasp of front-end programming languages the ability to create a responsive design the knowledge of testing and debugging and an understanding of front-end development tools like automation content management Version Control Systems talking about the skills required for backend development now back-end developers deal with back-end languages and Frameworks like Java Ruby and rails Etc now back-end developers deal with languages like Java Ruby on Rails Etc to make web pages and applications operate now it's vital to know commonly used back-end languages and Frameworks like Django node.js express.js and so on other important skills include database management framework utilization programming knowledge of accessibility and security compliance and understanding requirements and ensuring data consistency and integrity now moving ahead let's look at some of the job roles for front-end and back-end development talking about front end we have the front-end developer the CSS or HTML developer we have front-end web designer we have front-end SEO expert full stack developer and a UI developer talking about backend this back-end developer Java developer full stack developer devops engineer software engineer and an iOS Developer and lastly let's look at the salaries offered to these front-end and back-end Developers in India the average salary of a front-end developer is around 6 lakh rupees per annum while a back-end developer earns about 7 lakh rupees per annum in the US a front-end developer earns around 100 000 US dollars per annum while a back-end developer earns about 121 000 US dollars per annum action will be about today's topic which is become a front-end developer so let us begin we are going to discuss the things you need to know to become a web developer first we will start with basic skills which every web developer must know before moving into more advanced web Frameworks then we will understand what react is and why it is so popular after that we will go through another web framework called angular then we will also get to know about a comparatively new front-end framework called view in the end we will go through the front-end developer salary Trends which will give you an Insight of the job market so without further Ado let's get started first the basic skills let us understand what basic skills are required to become a web developer there are a few recommendations in that you must learn for either path these are the common things every programmer should know the first one is the GitHub so git is a free open source version control system that enables collaborations in a particular project it is designed to handle both small and large-scale projects git is a tool used to save code and create different versions to better manage the feature updates in the product or an application so followed by the GitHub the next important thing we have is the data structures and algorithms a data structure is a location used to store and organize data an algorithm is a collection of steps to solve a particular problem learning data structures and algorithms allow us to write efficient and fast computer programs so followed by data structures and algorithms we have the text editor get familiar with the text editor of your choice Visual Studio code is the top choice for most of the web developers and my personal choice too because of the large support of languages and of course the speed the text editor is where you write all your code and the terminal is where you execute it so followed by the text editor we have the command line the command line is an important tool to get familiar with it is how you run your code after writing it on a text editor the better you are on the command line the more efficient you will be asked developer so followed by the command line we have the HTTP and https the HTTP protocol is the backbone of the internet it handles requests and responses from a web application it is mandatory for a web developer to have good knowledge of both HTTP and https in order to build fast and responsive web applications now that we know what basic skills are required to become a front-end developer let's discuss about the most popular front-end library that has to react now what exactly react is so react is a front-end JavaScript library used for building beautiful user interface components it is an open source meaning it can be used in your commercial projects without any restrictions it is also component based and these components can be used again and again promoting code reusability it is an MVC or model view controller architecture react is the V responsible for how the application looks and feels for the end user now why should you learn and react react has always been in high performance as it uses virtual Dom rather in real Dom so basically Dom stands for document object model and is used by every internet browser for rendering a web page or an application react can also be easily integrated with other JavaScript Frameworks like node.js resulting in the development of a completely new web application including front-end and the backend it is comparatively easy to maintain large scale applications written in react because it highly promotes code reusability and code readability so followed by react the next important thing we have is the angular we have an idea of what react is but it is not the only framework used for building user interfaces so now let us know about angular so now what exactly angular is angular unlike react is a fully fledged framework for web application development which usually does not require additional libraries for implementing additional functionalities like routing it is also open source and backed by Google and as regularly updated resulting in constantly improved performance and addition of new features in terms of performance at respect to be much slower than react but with the recent versions performance seems to be on par with react now why should you learn angular angular is one of the most stable Frameworks out there it is also the most complete meaning you don't have the need to integrate with other Frameworks since it's pretty much includes everything for the web development of a complete web application angular backed by Google is safe choice for using in long-term projects since it is not going anywhere anytime soon angular is obviously used by Google for its web applications and also used by other large-scale companies creating a lot of job opportunities now followed by angular the next one we have is the view now that we know quite a bit about the two popular front-end Frameworks namely reactant angular let's now go ahead into view and learn a bit more about view.js Library now what exactly is View view as a lightweight and open source Progressive JavaScript framework used for developing interactive web user interfaces it is meant to be integrated with other libraries to develop a complete web application like react vue.js is mainly focused on The View part of the web application and hence its wet fast Urban compared to angular which has a complete web application solution view.js is commonly referred to as View and pronounced as vue.js or view is rightly so now why should you learn View any beginner web developer can easily understand View and start building their own web user interfaces like react view also uses virtual Dom result again better performance and it also uses the component based code design promoting code reusability and code readability vue.js has become popular in recent times and many companies are starting to use it owing to its lightweight performance and easy integration with other web libraries and Frameworks now with this let's move into the next section where we will discuss about the front-end developer salary trends now that we know what skills we need to become a front-end developer let's now have a look into the cell regions of a front-end developer front-end developers are always in high demand since new web applications are launched and managed continuously there are generally offered gender salaries across the globe the salaries also depend on the factors like Frameworks skills and the work experience the average salary of a front-end developer in India is 5 lakh six thousand rupees per annum the average salary of a front-end developer in United States is 76 929 US dollars per annum website architecture website architecture basically defines the design and structure of a website a website contains two important parts the front end and the backend the front end of any website is something the user came across we can also state it as the client side of any website whatever the user of the website sees while going through any particular website is considered as front-end HTML CSS and JavaScript are the three most popular and mainly used Technologies which are responsible for the development of the graphical user interface the combination of these three Technologies is responsible for giving a smooth and appealing user experience on the other hand anything the user doesn't witness while going through the website but actually exists somewhere in the website and the server is known as the backend of a website whenever we visit a page and send a request for the content the server goes through the database and then creates a response that is sent back to the browser the browser then interprets the response and displays the content on the screen several Technologies are used for backend development few of them are JavaScript Frameworks like node.js and next.js python Frameworks like dijango Ruby Frameworks like Ruby on Rails C plus plus Frameworks like Apache and many more other Technologies let's move ahead and we'll now go through what HTML is HTML stands for hypertext markup language introduced in the year 1993 by Tim bernersley the same person who invented the world wide web in the year 1989. the first version of HTML was written in 1991 but released later in 1993 as HTML 1.0 HTML got many updates with time and the current ongoing version of HTML is HTML 5.0 HTML is also known as the most basic building block of the web which is used to create the structure of any website with the help of numerous predefined tags it helps the browser to understand the structure and style of a document or file for viewing over the internet it allows our web pages to host videos images and other applications it also facilitates navigation within web pages or between websites through hypertext hypertext refers to the links present in any website to collect different web pages and create a whole website HTML has a lot of use cases web development HTML code is used to design how a browser displays web page elements such as text hyperlinks and media files internet navigation users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks web documentations HTML makes it possible to organize and format documents similarly to Microsoft Word moving on to the installation part HTML does not require any special software to work if you have notepad installed in your system that's enough to start using HTML the best part about HTML is its ease of use let's move on to the editors part now and we'll then download a particular editor for a complete HTML playlist an editor or IDE which stands for integrated development environment is a software application that comprehends facilities to a program for software development just like Photoshop makes it easier to edit photos in the same way IDE makes it easier for a programmer to write code the number of Ides present in the market today is huge some of these editors are notepad plus plus atom and vs code these editors are free to use on the other hand editors like Sublime are free but with some limitations to access all the features of sublime we have to go for the premium version for the license and then we can use it for software development my personal choice for an editor is the visual studio code there is a reason behind using vs code as an editor let me tell you a few advantages of vs code over other editors first of all it is free to use as it is open source software so we can get it at no cost it supports multiple programming languages there's nothing like we need any web support or work on different editors for different programming languages we can use vs code for different languages as well extensions are also one of the main reason behind using vs code suppose we want to use a programming language it does not support all we have to do is to add an extension and we are good to it also does not affect the editor's speed as it runs as a different process besides all these properties one main key factor behind using vs code is its availability in different platforms like it is available for Mac Linux and windows so I think there are enough features we have discussed till now there are many more features that we'll discuss while installing and working with vs code let's start with the installation part now the installation process for vs code is pretty simple just go to Google and right here vs code press enter and the next page which will open will show us the results click on the first link over here and we are here at the website of vs code right now you can see the download button in front of your screen you can click on it and you can download the stable version for your operating system from here only or you can go to the other download button present at the top right corner of your screen click on the button over here so you can see here we have all the extensions as well these are the top extensions we have to download them inside vs code once the downloading part overs so here you can see the download Starts Now sit back and relax until the download finishes once the download completes open the setup file from your downloads and it will take us to the license agreement page now agree over here click on next and it will take us to the browser part so here what we have to do is we have to choose a location for the vs code file to locate so you can choose any location so for now I am clicking on next over here now you can see we have a different folder so we can click on browse and then select it and then click on next so here we can see we have some additional features so what we'll do is we'll create a desktop icon now you can see Adam options as well so click on them as well click on next and now click on install the installation will start once we are done with the installation part click on finish and the vs code will start automatically fine so here you can see we have the welcome page over here what we can do is we can open a folder from here so if you have any folder so what we can do is we can open it from here now what we'll do is we'll create a new file so here you can see we are in a file what we have to do is we have to save this file now so click on file click on Save and now we can save this file at any place or any location we can see so what we are going to do is we are going to go on desktop we are going to create a new folder over here we are going to name it as HTML now inside HTML what we are going to do is we are going to write here the name of our file so we'll write your first then we'll write here the extension so what we have to do is we have to write here first dot HTML and here you can see we have an HTML file over here right so you can see we have four options over here the first one is for opening a folder or any particular location so click on open folder now what we are going to do is we are going to open HTML over here and you can see we have the HTML folder open now we have the file over here as first.html which we created recently then we have the search button over here to search anything or to replace anything the next button we have over here is for the source control then after this we have the debug Button as well and then we have the extension so these are the features vs code provides us and below here we have the accounts option and the settings option what we can do from here is we can change the font size and different settings right now the next button we are going to discuss is the extensions button here we can find many extensions given by the vs code Studio Community they are free to use so for now we'll use these two or three extensions so what we can do is we'll click on HTML CSS support so you can see I have already installed these extensions over here so then we have JavaScript and type script nightly and the live server extension so this extension is pretty important the live server one and the HTML CSS you can leave the JavaScript and type script knife please for now so we have to install these two extensions for now so I have already installed you can install them in your computer now the next thing we have to do is so we can start writing a code here only I've already told you that while saving any file make sure that we are saving that file with the dot HTML extension so what we have to do here is we have to put an exclamation mark over here and press enter and you can see we have the basic HTML code which we'll need in almost every product we can simply start with it if we have basic computer knowledge we got you covered if you are a newbie to HTML please stay connected with us and you guys will understand HTML in a very fun and exciting way before we go through the different tags present in HTML let's discuss what are targets a tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page after using a tag in an HTML file the browser decides how to render or display the content on the screen the list of tags present in HTML is pretty huge we'll go through some basic tags in today's video and we'll go through the remaining tags while working with them so let's start with the most basic tag we have in HTML you can see here we have a basic program written over here all the tags mentioned over here are mandatory for all HTML programs the first thing we have here is the doctype as HTML you can see it over here we have written doctype HTML so this is not an HTML tag but an instruction for the system about the type of document basically we are telling the system that this is going to be an HTML document so that all the browsers can know that this particular document is an HTML document and work accordingly the next tag we have here is the HTML tag you can see the HTML tag starts from here and goes till n right we have ended this HTML tag at the end of our HTML document now this tag is necessary for all HTML documents if you are working on an HTML document then this tag is what we are going to need the HTML tag represents the root and the end of the whole document this is a container tag that contains all the other tags within it so this tag is pretty mandatory in all HTML documents now the next tag we have here is the head you can see the head tag over here and the ending of this head tag is present over here we have certain tags present inside this particular tag now you can see that this head tag contains meta tags and the title tag right you can see the meta tag over here we have three meta tags and then we have a title tag as well Now The Meta tags doesn't appear on the page itself but only in the pages source code meta tags are essentially little content descriptors that help search engines what a web page is all about now the next tag we have here is the title tip the title tag is used to define the title of a web page basically we write the name of our web page inside this step for example if we see here the title of a web page is document funnel the title of this HTML document and write here something like first document fine now save the program open it with live server now you can see it over here that the window name is changed to first document there is no change in the web page itself so what we are going to do is we are going to reduce the size of a vs code and the browser we are going to keep them side by side here so that any changes we made in this HTML document are reflected in the web browser other tags we can use inside the head tag are the style tag the script tag and the link tag now the link tag is used to link any external CSS file to HTML page we have to provide the source of that file and then any styling changes we make in that particular file will get reflected in the web page for that so let's create a CSS file first what we are going to do is we are going to create another file over here let's name it as style dot CSS now this particular file has dot CSS as extension this will tell the browser that this particular file is a CSS file and we are going to use it for styling purpose fine so we have this style.css over here now we are going to link this with our HTML document for that what we have to do is we have to write here link so this is the tag now we have to write here real and we have to write here style sheet fine now the next thing we have to do is to provide the source code of this particular file so for that we are going to use href href is going to be style dot CSS now close this link tab now this rail tag over here specifies the relationship between the current document and the link document now you can see it over here we have this Rel as style sheet this means that this particular file is a style sheet and we are going to use this for styling purpose another important tag we have inside the head section is the script tag this tag is used to declare or use any script within the HTML document basically used for JavaScript so it's not necessary to use this tag within the head section only we can use it anywhere but for now we are going to use it inside the headline the syntax is also easy we have to write it like script SRC now SRC is going to be the file name so let's add another file over here we'll write first dot JS so this will tell the browser that this particular file is a Javascript file so we are going to write here inside this now we are going to write first dot yes now we have to define the type as well so type is going to be text and the file is a Javascript file so we'll write here JavaScript fine now close this tag and the script tag will closes automatically you can see it over here fine the script tag is closed keep one thing in mind that we have to close the script tag every time but the link tag is not necessary to close the next step we are going to discuss is the body tag the body tag defines the document's body now you can see it over here if we go back to HTML page you can see the body tag over here now the body element contains all the content of an HTML document such as headings paragraphs images hyperlinks tables lists Etc there can only be one body element in an HTML document any tag we are going to use within the body tag is going to define the structure of a web page now the next step we are going to use is the heading tag there are six different types of heading tags starting from H1 and goes to H6 H1 refers to the most important heading and H6 refers to the least important way the font size of H1 is the largest and the font size of H6 is the smallest among all so let's use them all here what we'll do is we'll write here H1 now inside this H1 we'll write this is heading 1. save the program and you can see it over here we have a heading in our web page which says this is heading similarly we have the h2 tag as well so if we write here H2 and inside this if we write this is heading to save the program you can see the change in the font size you can see the difference over here the font for H1 is greater and the font for H2 is a bit smaller than H1 similarly we have H3 and for H3 we are going to write here this is heading C three fine then we have H4 as well so we are going to write here H4 and inside this we are going to write this is heading 4. fine similarly we have H5 and H6 as well so we are going to mention them first so we'll write here this is heading 5 and finally we have at six which is used for heading 6 so we are going to write here this is heading fine save the program and you can see the difference in all the headings over here the size for H1 is the largest and the size 4 heading fix is the smallest we can use any of these headings according to all similarly we have the paragraph tag as well in HTML it is used to write a paragraph or any content within the web page the syntax is simple we have to use the P tag for that so if we write here p and now inside this paragraph tag whatever thing will write so let's say we are writing here this is a first HTML document fine now save this program and you can see it over here we have some text present in the web browse right so these are the most basic HTML tags we discussed in today's video as we said the list of tags is large and we'll discuss them while working with them so please go through these tags on your own and let us know if you face any issue we have already discussed about tags in the last video we came across several important tags in the previous video like the HTML head and the body tags a simple definition of tags states that a tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page after using a tag in an HTML file the browser decides how to render or display the content on this screen right now keeping this definition in mind the definition of an element in HTML states that an HTML element is the collection of a start tag its attributes an antec and everything in between the tags right so an HTML element is basically a collection let's understand this with the help of an example what we'll do is we'll write over here inside the body of this HTML document we'll write P fine now this paragraph tag over here is an example of a tag it has opening tag and a closing tag so this whole thing is a tag this paragraph is a tag over here now if we add an attribute to this tag like an ID or a class so what we'll do for that we'll write here let's say ID is equals to Paragon fine this tag now has an attribute within it ID makes this whole tag unique we can access the content of this tag with the help of ID attribute we'll discuss attributes in detail in the upcoming video for now let's add some content inside this tab so what we'll do is we'll write inside this tag we'll write over here let's say this is a paragraph fine so we'll write your paragraph so this is the content of a paragraph tag now we have four different parts present over here we have the starting tag over here so this is the starting Tech this whole thing over here is the starting time then we have attribute so ID here is the attribute then we have content of this tag so this is the content present inside whole time and then we have the end part of a paragraph tag so this represents the end part right so the combination of these four things is known as the HTML element now let's talk about the case sensitivity of HTML tags so HTML tags are not case sensitive so you can see we have paragraph tag over here with small P present inside angular brackets what we can do is we can write here capital P as well so these two things are pretty same so let's write something inside this as well so let's say we are writing here this is paragraph two fine so this is the content present inside this paragraph tag with capital P inside angular brackets now save the program and you can see we have two paragraphs over here the first one says this is the paragraph and the second one says this is a paragraph two so what we have to do is we have to remove a from here save it now and now it says this is paragraph two fine so I hope you guys got that HTML tags are not case sensitive fine now let's move ahead and we'll now discuss empty elements in HTML most HTML elements have a start tag and an end tag that indicate where the element begins and where it ends for example we have this paragraph tag over here this is the start of this paragraph thing and this is the end part right so this indicates that this paragraph tag ends over here now there is a group of elements that are exceptions to this rule so these elements are called empty or void and only have a start tag since they have no content present inside the tag so they must not have an antagon HTML example of empty elements are like the brake tag we have we have image link and many more such tags the list is quite long so what we'll do is we'll add an image using the image tab so image tag is basically an empty element so we'll use that particular element and you guys will understand what empty elements are so as mentioned earlier that empty elements do not require any closing text so what we'll do is we'll write here inside angular brackets IMG is the tag me then we'll write here SRC so SRC over here is attribute we'll discuss attributes in upcoming videos so inside this will provide the path over image so let's say we have this image present inside images folder which is a folder present in a system so where we are saving all our HTML programs so the next thing we'll write here is alt alt stand for alternate so if the image is not shown over the browser then the alternate text will be shown so let's say we are writing here image one now we'll close this image state so that's all we don't have to close this particular image tag we don't have to write here like this so you can see we don't have to write here like this anything so if we not write it away that's fine because image element is an empty element so let's save the program and you can see we have an image over here in the browser so the image size is quite large what we'll do is we'll reduce the site so we'll write here just for now we'll discuss all these things in the upcoming videos so don't worry about it for now you can see that we have an image over here so this is our image this particular image is what we have added using the image tag so this is done now the last thing we'll discuss in this video is the nesting of elements nesting means we can use the tag or element within another element for example you can see we have a paragraph over here so this is a paragraph which says this is paragraph two let's add some more things over here so let's say we are writing over here tml stands for hybrid text cup language fine and save the program so this is the paragraph over here you can see let me increase the size of our browser a bit so now I think you guys can see it much better now what we'll do is we'll use a particular element or tag within this paragraph text so let's say we want this HTML to be cursive and bold in nature so what we'll do over here is we'll use the B tag over here so b stands for Bool so what we'll do next is we'll cut HTML from here and we'll paste it inside this B tag now save the program and you can see HTML is bold in nature now right similarly what we can do is we can Nest one more tag inside this bold text so what we can do is we'll write here I now we have to put this HTML inside both these texts save this program and you can see the HTML is cursive in nature now so you can see we have three different texts or we can say we have two different tags inside a particular text this is known as nesting of elements so we can do it with HTML as well I hope you guys must have got an idea about what HTML elements are and how elements are different from tags in HTML in the last part we came across HTML elements we saw the difference between HTML tags and elements now that we already have an idea about elements let's discuss what attributes are let me write the basic syntax of an HTML element over here first so what we'll do is we'll write over here let's use the paragraph tag so we are writing over here this is a basic example of elements in htu fine I hope you guys must have got an idea about what this means this is actually a basic HTML element we have nothing else over here just a simple example of HTML element an element consists of start Tech and ending tag and the content within the deck right so this particular thing is an element now attributes in HTML refer to the additional Properties or characteristics of an element for example if we write here let's suppose we are writing over here let's say we are writing over here ID is fine now save this program and you can see over here that we have a paragraph which says this is a basic example of elements in HTML now we have this whole element with IDs paraben or we can give any idea of our choice now this ID is unique for this particular element for now you don't have to worry much about this ID or any other attribute just focus on what attributes are we are going through the working of attributes basically so we can use the ID of this attribute to style this particular element so basically this ID attribute defines what this HTML element is we have to use the style tag element or we can say we have to use the style element for styling this particular paragraph you will understand it once we go through the text so let's do it over here what we'll do is we'll use the style tag over here so we'll write yes type you can see this is a style element basically it has start tag it has ending tag now we'll write some content inside this particular text so let's say we are writing over here hash para1 now inside this what we'll do is we'll Define some styling properties so let's say we are writing over here background color is red and we'll write here color so this color here refers to the font color basically so we'll write here blue now save this program and you can see the paragraph in a browser is changed so what we did here is inside this style element we access this particular ID so ID is unique for each element we will discuss it later on so basically this particular paragraph tag has an ID named parallel so we are using that particular ID then we have some CSS properties so these properties are used to style a particular element so we have used it over here you can see it over here if I zoom out a bit in the browser you can see the background color of this whole paragraph is read and the font color is blue fine what we want to say here is this idea over here is basically an attribute it is used to identify or change a particular element we have many attributes present in HTML so we'll go through some of them let's say we are adding an image over here so let's add an image and you guys will understand about HTML attributes here as well so we'll write here IMG so this is basically an empty element we have discussed it in the previous part wherein we went through HTML elements now what we'll do is we'll write here SRC now SRC is also an attribute this attribute is used to provide the system with the source of a image so if we go back to this particular HTML folder so here we have our HTML folder you can see we have a folder here named as images and we have an image present inside this particular folder right so what we have to do is we have to provide this path inside a HTML file so what we are going to do here is we are going to get back to vs school and inside here we'll write images so this is our folder name and we have a file name HTML dot PNG present inside that particular folder so SRC is the attribute and this particular thing is the value of our attribute right now the next thing we are going to do here is we are going to write here alt now inside this alt let's say we are writing HTML over here now this alt attribute is used when we add an image only so basically what happens is when we add an image to our web browser sometimes what happens is the image is not shown over the browser so in that case the alternate text will be shown so if this particular image is not shown in the browser then this particular text will be shown so let's save this program we'll open a web browser here side by side as well you can see that this particular image is present over here in our web browser the size of this image is quite large we can change the size in two different ways we can either use the ID attribute here as well and then use that particular attribute in The Styling tag or css file to change the size of this image or we can simply use the height and width attribute in the image tab over here so that's the simple one so what we are going to do is we are going to write here height height is an attribute we have to define the height in pixels so we have written over here 300 pixels save the program and you can see the height of this image is 300 pixels now same thing goes for width as well if we write here width and if we Define the width has 300 pixels as well save the program and you can see now the height and width of this particular image is 300 pixels right so guys this is all about the basics of attributes in HTML I hope you guys understood this we'll go through each attribute while working on those attributes in the upcoming videos so don't worry about it if we haven't covered all the attributes over you we'll go through them in the upcoming videos before we move on and discuss the different formatting tags in HTML let's understand what formatting is formatting refers to the process of making the text present on a web page more appealing to the user for example let's say we want to add a heading in our HTML document and for that we want a specific font size let's say we want to add a heading with a bigger font size for this purpose we have the heading tag present in HTML which provides us with six different font sizes with H1 being the tag with the greatest font size and H6 with the smallest one we have already discussed in in the previous videos as well now we need to make sure which font size we want and we can use the heading tag accordingly let's understand this with the help of an example let's suppose we are working on a web page wherein we want a heading so let's say the heading is what is HTML we want the font size to be bigger so simply we'll write here H1 we have already mentioned it that H1 has the biggest font size of all the six heading tags right so inside this we'll write what is HTML so let's suppose this is the heading now on saving the program you can see here on the browser that we have a heading with larger font size so what we can do for now is we'll remove this heading from here now save it and you can see we have only one heading as of now we have the heading as what is HTML we can also write a paragraph after this heading tag that will explain what HTML is using the paragraph so let's do it over here as well and you guys will understand it much better so here we are going to use the break element so this is basically an empty element used in HTML for line break so what we are going to do is we are going to put it over here so this is the tag VR tag or Break Tag we can see now what we are going to do is we are going to write here inside the paragraph tag HTML stands for let's write it in capitals we'll write here hyper text markup planche fine so here we have paragraph that says HTML stands for hypertext markup language now what we want to do is we want to add another heading to this web page which will Define the uses of HTML so basically what we are doing is we are going through the sizes of heading text so we want another heading let's say over here now the main heading of our webpage was what is HTML and we wanted to stand out among all the headings present in our webpage that's why we use the H1 tech for that edit now for the next heading or for the new heading we'll have a little bit smaller size than the main area so what we are going to do is we are going to use the h2 tag or the H3 tag for that so let's use the H3 tag for now we'll write over here H3 so basically we are going to write it after a br text so we are going to use the BR tag over here or the brake tag we can see now we are going to write here uses of HTML file now save the program and you guys can clearly see the difference in font size of both dialects let me zoom in a bit here in the browser so now you guys can say it much better there is a difference in the size of heading 1 and heading 3 right so this difference is what we are talking about till now there are six different sizes for a heading tag in HTML we can use any of these heading tags according to our need figure out which one of these six tags is best suitable for your web page and use that simple and easy let's move ahead and we'll now discuss some more formatting tags present in HTML let's move ahead and we'll now discuss some more formatting text present in HTML the next tag we are going to discuss is the Bold Tech this tag is used to make the text bold or stroke so there are two different tags for the same task for making the text bold we can either use the Bold tag or simple B tag we can say the other tag we can use is the strong tab the functionality of both tags is similar so we'll use them side by side so that you guys can see the difference or they are basically same so what we are going to do is we are going to write here after this BR tag we are going to write here B so b stand for voltage now we are going to write something in here so let's say we are writing over here HTML now again after BR tag we are going to use the strong tab fine we'll write same thing here the content will remain the same so we are going to write HTML over here now here we used both tags with similar content present inside the save the program and you can see we have two similar outputs here on our web page the outputs are exactly similar the working of both the text is the same right now let's recall the nesting of elements in HTML from the previous video we have said earlier that we can use an element within another element in HTML we are going to Nest this bowl tag inside of first paragraph tag it means that we are going to Nest this bold tag over here so what we are going to do is we are going to use bolt tag inside the full form or we are going to put the full form of HTML inside the Bold tag fine so save it and you can see we have hypertext markup language written over here in the browser in bold right it looks better than the previous one just like the bolt tank we have two more texts present in HTML to make the text on screen look more appealing to the user the italic tag and the underlying tag now you guys must be thinking that these three formatting techniques are also present in Microsoft Word you are right these three tags are present in both Ms word and HTML the working is also same so let's use these tags here once what we are going to do is we are going to use this text over here only so we are going to put this hypertext markup language inside three different tags so we are going to put them inside italic we are going to put them inside bold and we are going to put them inside underliners so we are going to do this over here now you can see the nesting of elements over here if I zoom in a bit on Visual Studio code you can see we have a paragraph 10 then we have three tags present inside it so we have bold Tech we have italic and underline so this is called nesting of elements now save this program and you can see the text over here we have hypertext markup language in italics it is underlined and it is bold in Niche right the next tag we are going to use is the delete tag we have two different tags present for this task as well let's say we want to put a line through the center of any text Crossing it out basically let's say that this text is not relevant fine so let's go through an example first what we are going to do is we are going to use the break tag over here and now after this braid tag we are going to use a paragraph tag we are going to write a paragraph So let's say we'll write here I would like to have a cup of pop off fine save it and you can see we have this paragraph or sentence over here on the browser now what we want is we want to delete this particular word or we can say we want to put a line through it fine so what we are going to do is we are going to write here strike fine we are going to put coffee inside this strike tank because we want this particular word to cut and then let's say we are writing over here D fine so save it now and you can see it over here it says I would like to have a cup of coffee has a line over it and then we have written tea so you guys can understand the meaning of this sentence by yourself I guess you can use this tag anywhere according to her needs we can achieve this same thing with the help of the delete tag as well what we have to do is we have to write here in place of strike what we are going to do is we are going to copy this piece of code from here we are going to paste it here now instead of strike we are going to write here delete so d e l this is the tag and we are going to close this tag as well now we are going to write coffee inside it and save the program and you can see we have the exact same output with this tag as well fine another tag we have in HTML for formatting is the market now the mark tag in HTML is used to Mark any particular text the text will be highlighted with yellow color for example let's say we are writing something over here or we can just paste this again and we are going to remove this part now we want to Mark the word coffee let's say so what we are going to do is we are going to write a mark this is the tag and inside this tag we are going to write coffee let's say fine save the program and you can see it over here we have this sentence which says I would like to have a cup of coffee and coffee is highlighted over here right so this is the mark tag and we can use this tag for formatting now the last tag we are going to discuss in today's video is the font tag the font is an inline element used to change font sizes font colors and font styles of the text in our web page this element has its own attributes so the three attributes we can use are size color and face fine size is used to change the font size of the text we can write values between 1 and 7 with 1 being the smallest and 7 being the largest font exactly opposite to The Heading text so you can learn it that way color refers to the font color we can simply write the name of the color or we can use the hexadecimal values for colors the hexadecimal numbers are specified according to the RGB value for each color the last thing we have is trees face refers to the font style the default HTML font is times new ROM we can use any font style offer Choice using this attribute so let's use this tag over here and you guys will understand it much better I guess so what we'll do is we'll write here let's say we are using a paragraph tag so we'll write something over here let's say I prefer now we are going to use the font tag over here so this is a tag you can see it in red color now we have three different attributes right so the first attribute we have is five so we'll write here inside size let's say the size of this font is cool then we have color so color defines the font color so let's say the font color we want is red and then we have the face so let's say we want the font style to be verdana and we'll write something over here let's say we are writing this over red fine now save the program and you can see it over here it says I prefer red fine so let's complete this sentence what we are going to do is we are going to write something after this font tag as well so let's say we are writing over here red over blue save the program and you can see it over here that we have this particular sentence which says I prefer red over so let me increase the size of vs code so that you guys can see it clearly so here you can see we have this paragraph tag then we have written inside it I prefer and we have kept this red word inside a particular element font element basically this font element has three different attributes size color and face now let's change the size of this to 6 for now and we'll check the output save the program and you can see red over here is quite large in size right it looks different so I hope you guys got this formatting in HTML document is mostly done using CSS but now HTML also allows us to format our documents using different tags basic formatting we can say so formatting is making the web page more appealing using these particular tags so the list of format index present in HTML is quite long we can't discuss all of them here but if you use any of those tags in the upcoming videos then surely we'll discuss them over their own now the task for you guys is to use these formatting tags and let us know if you find any difficulty in using them in HTML a phrase tag is used to give structural meaning to a block of text what does that mean let's try to understand this with the help of an example we'll first take a paragraph for this example a small one maybe so let's do it here what we'll do is we'll write here P so we are going to use the paragraph 10 let's write something over here so let's say we are writing over here hello everyone then I'll write this is caution and let's suppose we are writing over here a sub subscribe tool YouTube channel fine save this and you can see here that we have the same paragraph here on the browser now what we said earlier about the phrase tags is they are used to give structural meaning to a block of text right so here we have a paragraph and we want to provide meaning to a block of text let's say we want to put some emphasis on the word YouTube over here fine we want this word to stand out differently from the rest of the paragraph for this task we have the emphasize tag in HTML the Syntax for this tag goes like this so what we'll do is we'll cut this sentence into two different parts so that it will be easy for you guys to understand now we have the emphasize tag in HTML the syntax is pretty simple what we have to do is we'll write over here so we are going to make changes inside this particular paragraph tag only so we are going to use the emphasis tag over here so what we have to do is we have to cut the word YouTube from here and we have to paste it here now the syntax is so simple we have a two word tag so it says em it stands for emphasis now save the program and you can see here in the browser you can see the difference basically the word YouTube stands out from the rest of the words present in the paragraph to lay some more emphasis on the word YouTube we can use the title attribute now title attribute will be used inside the emphasis tab so let's do it here once so what we are going to do is we are going to use the title attribute over here so let's say the title says check a YouTube Channel fine so let's break it a little more so here you can see we have these three lines so inside this paragraph tag what we are doing is we are using the emphasis tag and inside that emphasis tab we are using the title editor fine on saving the program you can see nothing changes over here on the browser to witness the change here we have to take our mouse cursor over YouTube and you can see we have a small pop-up here that contains the value of our title attribute let me zoom in a bit here so here you can see on taking the mouse cursor we have this small pop-up with the value of a title attribute right another thing we can do for this task is we can add a link over here on the word YouTube we'll discuss it in the upcoming videos when we'll go through text links in HTML so you guys will understand it much better then now you guys may have a question in your mind that we can do this exact same thing with formatting tags as well right yes of course we can do that but formatting refers to the process of molding the text for a better look and feel of the text while phrase tags are used to provide meaning to a block of text it's not necessary that if a tag falls under the category of formatting text then it can't be a phrase tag the difference lies in the purpose of using that particular tag I hope you guys are getting it the next tag we are going to discuss is the mark Tech we have already discussed this tag in the formatting tags as well so let's discuss it one more time the mark tag in HTML is used to Mark any particular text the text will be highlighted with yellow color so we have discussed it previously now what we are going to do is we are going to copy this piece of code so we are going to copy the whole paragraph from here and then we'll paste it here now instead of using the emphasis tag we are going to use the mark type over here fine so we are going to change the tag name from emphasis to mark for the opening and closing time save it now and you can see we have another paragraph over here which is almost the same or which is exactly the same it says hello everyone this is caution please subscribe to our YouTube channel now the thing to notice here is the word YouTube it is highlighted in yellow color right so the title attribute will work same over here as well if you put a mouse cursor over the word YouTube you can see we have this pop-up with the same title value right so one thing to notice here is the title attribute is basically the differentiator between the formatting tags and the phrase tags it means that the tag Remains the Same but the way of using it defines the purpose so let's move ahead and we'll now discuss the abbreviation tag in HTML the word abbreviation in general terms refers to the short form of a word that's it we have the answer here if you are using any abbreviation for any word we want the user to know that this particular word has a special meaning then we can use the abbreviation so the syntax goes like this what we will do is we'll again use the same paragraph and we'll paste it over here again so what we are going to do is we are going to remove this empty space from here so that you guys will be able to see the whole code or as much code as possible so what we are going to do now is we are going to use the abbreviation tag fine so we'll remove this piece of code from here we have to put this over the word YouTube so what we are going to do is we are going to write a abbreviation and inside there we are going to write y so this is the short form of YouTube basically now save the program and you can see that we have another paragraph but there's no difference over here as of now the word is simple there is it's not standing out basically right so this is because while using the abbreviation tab we must necessarily use the title attribute along with this type so let's do it here we have to write here title and we have to write Here YouTube because YT stands for YouTube so we are going to write Here YouTube now save the program and you can see here that the abbreviation YT is now underlined with a dotted line fine this indicates that the word YT is used as an abbreviation here and the user will know that something is different over here on taking the mouse cursor over it you can see we have the value of our title attribute you can see it says YouTube so this is basically the short form of YouTube YT over here now the next tag we are going to discuss is the address tag this tag is used to display the address in the web browser the content is written within the opening and closing address tag is considered as an address in HTML so this is the address we generally use fine not an IP address or nothing else the general address we use for our location or for a address so let's use this tag over here we'll write here address and this is the tag now inside this tag we are going to write YouTube office let's say then we have one two three street so this is going to be the street name for our address then we have let's say sector so let's say the sector is four five six and then we have the place name as Noida and the country name is India fine so this is an address and let's save the program you can see here the difference in the browser the address tag over here has a different font this tag is used to indicate that this particular block of text is in address so you can see it over here this is our address now if you want to see it clearly let me remove these three paragraphs from it save the program now and you can see we have address over here so if you want to write it in different lines so what we can do is we can use the break tag over here then over here again save the program and you can see we have the address over here the font is different that's the only difference between address tag and other text the next tag we are going to discuss is the short quotation tag this tag is used to add double quotes within a sentence the syntax is simple so what we'll do is we'll write something over here let's say we are writing over here paragraph We Are writing over here let's say again please subscribe to a now we want the word YouTube inside double quotes right so for that we are going to use the quotation tag this is the syntax we have to write simple queue and we have to put the word YouTube inside it and then we'll write here Channel and we have to put a space over here save the program and you can see it says please subscribe to our YouTube channel with YouTube present inside double quotes fine so the last tag we are going to discuss in today's tutorial is the code tag in HTML this tag is used to represent programming code in HTML the text will look like we have any code from a programming language for example will write here code this is the tag now inside there will write let's say we are using a for Loop in JavaScript so we'll write here for I is equals to 0 and then we have I less than 3 so let's give some spaces over here and then we have I plus plus fine then after this we have inside here console.log and we are going to print hi fine so if you are new to this language just ignore it it's just a simple piece of code from JavaScript so save it now and you can see we have this code over here now what we are going to do next is we are going to use braid tag over here first then we'll understand it fine so we are going to use the BR tag here again and here okay fine save it now and you can see the code now you can see we have the same output on the browser as the text present in vs code the font is exactly the same so this represents a piece of code in HTML we can use the code tag for that so Guys these are some of the basic phrase tags we discussed in today's video as we mentioned earlier that the list is quite long for all these texts we'll discuss them in future whenever we use them I hope you guys got it till now we have covered different types of tags present in HTML we came across the formatting tags and the phrase tags present in HTML in the last part we also covered the differences between these tags apart from all the differences these tags have they are still similar in one aspect that is these tags are used to change the appearance of a web page whenever we use these tags we change the look and the feel of a web page Now The Meta tag is a bit different from these tags this tag does not impact the appearance of a web page it is used in the head section of the HTML document and does not require any closing tag to work what this tag does is it gives information about the data we have on our web page meta refers to metadata metadata means data about data for example if we have a website that provides the user with some data it can be any kind of data and the user can go through it to gain some information but the information about the data present on our website is given by metadata only what does it mean to provide data about data for example if we go to Google and search for a keyword now how Google works is it goes through the keywords present in any particular website and then choose the user that particular website those keywords here refer to metadata and we have to put them inside meta tags in HTML the description we get while searching for a website is also present inside the meta tag of any HTML document basically what we are trying to say is this tag is used to give essential information about any particular web page meta elements can be used to include name value pairs describing properties of HTML documents for example if you want to put any keyword for a web page the name attribute inside the meta tag will contain the keyword and the value attribute will contain the actual keyword name there is no closing tag needed in meta elements because these elements contain information within attributes only we can use multiple meta tags for different information an interactive web page cannot be created with just this structure so you will employ aiding Technologies like JavaScript and CSS to bring interaction and Beauty to your HTML respectively that's where CSS comes into picture making web page Pages attractive is made easier with the help of CSS often known as cascading style sheets the style and experience of a web page are handled by CSS the color of the text the font style the spacing between paragraphs the size and arrangement of columns the background pictures or colors used layout designs differences in display for various devices and screen sizes and a variety of other effects can all be controlled using one single language which is CSS although CSS is simple to grasp and alone it offers strong control over how an HTML document is presented to the user it depends how you are presenting your HTML document how you are styling it because the user will get an impression on the first view itself CSS is most frequently used in association with HTML or xhtml as markup languages now when it comes to front-end web development of any web page the three most widely used Technologies are HTML CSS and JavaScript HTML is used to create the structure of a web page CSS makes it look more attractive to the user by adding styles to it and JavaScript adds interactivity to the web page so let's move ahead and now we'll discuss the advantages of using CSS the first one is time saving CSS is a time saving since you can create it once and reuse it across a number of HTML pages there's a style available for each HTML document or we can say each HTML element that you can select and apply to as many different websites as you desire if you utilize CSS instead of manually writing HTML tag attributes each time Pages load faster you can only you only need to create one CSS rule per tag and it will be applied to every instance of that element so quicker download times results from less code simple maintenance to make a modification that affects all elements on all web pages just modify the style sheet everything will update instantly also CSS provides a great range of characteristics than HTML so that you can provide a considerably better styling experience CSS provides a considerably wider range of properties as well than HTML so can you can give your HTML page a much better look than you can use using HTML attributes beta Styles than HTML now style sheets enable the material to be optimized for multiple types of devices allowing for multiple device compatibility different versions of a website can be displayed for printing or for handheld device devices like pdas and cell phones by using the same HTML document so let's move ahead and now we'll understand how CSS actually works a browser must merge the content of a document with its style information before displaying it it goes through several steps to process the document which we have outlined you remember that this is a greatly simplified explanation because different browsers will perform the procedure differently when a browser loads a web page but this is what usually takes place in a browser the browser starts losing HTML example it receives it from the network it transform the HTML into a document object model in the computer's memory the document is represented by the document object model in the same time it also loads CSS as well most of the resources that the HTML document links to including embedded images videos and even connected CSS are subsequentially fetched by the browser because it is handled a little later in the process we are not discussing JavaScript here to make things easier for you guys the browser passes the CSS that was fetched and groups the various rules according to the type of selectors they use such as element class ID and so on it determines which rules should be applied to which document object model nodes based on the selectors it discovers and applies the appropriate styles to each node as needed this immediate step is called render tree so this is the creation of Dom tree after the rules have been applied to it the render tree is organized in the manner in which it should look the screen displays the pages visual represent representation this stage is called painting So guys this is how CSS actually works on a web page I hope you guys must have got an idea about what CSS is and why one should use CSS on a web page we'll dive deeper into all CSS Concepts in the upcoming videos so we'll go through all the CSS aspects one by one CSS uses the color values to specify the colors on a page they can be specified using predefined color names hex or RGB format there are nearly 140 standard color names hexadecimal is a six degree representation of a color the first two digits RR represents the red value the next two are green value and the last is the blue value all the other colors can be created using the combination of these three colors there are several websites available where you can know the hex value of the different shades of color as you can see the black color is signified by hashtag and the six zeros the red is hashtag FF and the four zeros followed by it the RGB color value is specified using the RGB property this property takes three values one for red green and blue the value can be the integer between 0 to 225 or a percentage as you can see the black color is signified by zero zero zero the red by 25500 the Blue by zero zero 255 and the green by zero two fifty five zero now let's move to an example to understand how we can add the colors to our page in this example we will see how we can add colors in different ways to our HTML so we are on the Sublime Text Editor as you can see we have the standard boilerplate ready with an H2 and a paragraph on our page open the style tag and make the font size of the paragraph to 25 pixels so it is clearly visible let's start by adding colors to our text just by color names HTML supports nearly 140 standard color names we'll make the color of the paragraph green for that just type color and set the color to Green as you can see our paragraph is changed to Green let's try one more this time we will add the color red just refresh as you can see the color is not changed to red there are nearly 140 HTML standard colors that is supported by the web browser you can also add colors using the RGB format there are many websites available to know the RGB or hex value of the desired color once such as HTML codes.com as you can see in the HTML course.com we have the hex value and the RGB value of the desired color let's try one we'll add this color with the RGB value 171 229 and 27 to our paragraph So for that just type RGB and the color code you want foreign as you can see the color is not changed to our RGB value let's try one more this time we'll use this RGB value to our text you can see the colors changed to our desired value in this way you can use the RGB format to change the colors the next way is using the hex values hexadecim is a six digit representation of a color the first two digits are red next one two are green and the last are the blue value let's see how you can use the hex values as you can see the hex value for this color is hash 31787f we'll use this value to our text to add the hex value you have to use the hashtag followed by the color code foreign let's try one more you can see the hex value for this color in hash F14 a07 just copy the desired value to your file you can see the color changes you can also add color borders to our heading do that just mention the Border style along with the color code we'll add the Border color red to our H2 now you can see we have the border around our S2 I hope you have understand how to use the color values to your web page there are mainly three ways by which you can add the colors to your web page they are hacks RGB values and the color names in the last two sessions we have discussed what is CSS and the CSS color property in this session we will discuss how you can set the background image on your web page we'll see the several properties related to background image and how you can use them to customize the image around the web page so without further delay let's get going so let's begin by discussing about the background property of the CSS the background image property specifies an image to use as a background of an element the background is defined in the body element of the HTML code to add a background image on an HTML element use the HTML style attribute and the CSS background image property and mention the path of the image inside the URL attribute there are several properties of the background that are used to define the image on a page some of the common ones are background image background repeat and background position by default the image is repeated so it covers the entire element let's switch to the text editor and see how we can add the background image to our page so we are on the Sublime Text Editor let's start by opening a style tag the background image is always set on the body tag so type body and open the curly braces the background image is always set on the body tag so open a body type with curly braces and start typing background image use the URL value of the background image to set the path of the image make sure the image is in the same folder as of the HTML file here we have our file nature3.jpj so mention the path inside the double quotes save the file and let's see how it looks on a web page as you can see we have the image on the web page let's format this image a little bit we'll start by setting the background size so type background size and there are three values to the background size first one is Auto it will set the image as it is save the file and let's see how it looks on a page as you can see the size of the image is as same of the original size the color value will set the image size that will be fit to the web page as you can see the image is set to the whole web page you can also set the image size to manual let's say you want the image size of bit 500 pixels so now as you can see the width of the image is 500 pixels next we will set the background repeat property there are three values to background repeat first is no repeat with no repeat value the images will not be repeated on a page now as you can see the images are not repeated second is repeat X it will set the images to be repeated on the x-axis as you can see the images are not repeated on the x axis similarly repeat the images on the y-axis as you can see the images are not repeated to the y-axis and there's a default value repeat which will repeat the images on the web page so let's keep it to cover so let's keep the background size to cover and set the background repeat to no repeat let's save the file and look it on our web page now as you can see the image is fully put to the web page let's add a text above our image to see how it looks like so I'll add a paragraph tag and type some random text here let's set the text color to red and align it to Center I'll type P and open the curly braces I'll set the color to red and I'll set the text align to Center let's save the file and see how it looks on a page as you can see we have a text about our image which is centrally aligned and the text color is red in this video you will learn what are CSS selectors and what are their different types so let's start by discussing the agenda for this tutorial so in this tutorial we will learn what are CSS selectors and what are their different types we will also look at an examples to how to work with CSS selectors so what are CSS selectors CSS selectives allow you to select and style HTML elements selectors are used to find elements based on their ID classes types attributes value of attributes and much more let's discuss the most common selectors there are several different types of CSS selectors the most common of them are CSS element selectors CSS ID selector CSS class selector CSS Universal selector and CSS group selectors so what is the CSS element selector the element selector selects element based on the element name this is a CSS selector it means it will select all the P elements on the page it will style all the P elements to the central aligned having blue color this is a CSS selector it is set to P this means it will select all the P elements on the page it will style all the P elements to be centered around having blue color let's look at what it looks on a page so as you can see all the elements are centrally aligned with the text color blue CSS ID selector the ID selector uses the IDU attribute of an HTML element to find a specific element an ID should be unique within the page so you should use the ID selector to find a single unique element to find an element within a specific ID use a hash character followed by the ID of the element so here we have used the hash paraben so all the rules will be applied to the HTML element with ID equal to para1 so this is an ID selector it will be applied to all the HTML element with ID is equal to para1 as you can see it is applied to the element having the ID paragraph and all the other elements are defaultly styled CSS class selector the class selector finds the element with a specific class set by the HTML class attribute to select an HTML with a specific class use a period character followed by the name of the class so this style will be applied to all the elements having the class name class 1. this is a class selector it is denoted by a period symbol all the elements having a class named class 1 will be styled with centrally aligned and color blue as you can see the element having the class name class 1 is tiled and all the other elements are set to default CSS Universal selector the universal selector flips all the elements on a page the universal selected is assigned by a star character the universal selector selects all the elements on a style sheet as you can see it is denoted by a star Mark all the elements inside our web page will be centrally aligned and the color will be set to Blue as you can see all the elements are centrally aligned and the colors are set to Blue CSS group selector in stylesheets there are often elements using the same style to minimize the code you can group selectors to group The selectors separate each selectors with a comma here we have group selectors for H1 H2 and P so style is applied to H1 H2 and P elements only it is better to group The selectors to minimize the code here we have group selectors P H2 and H3 so style will be applied to only element having PS2 and S3 as you can see so all the elements of P H2 and H3 are centrally aligned and colored to red every element that can be displayed on a web page is comprised of one or more rectangular boxes CSS Box model typically describes how this rectangular boxes are laid out on a web page these boxes can have different properties and can interact with each other in different ways but every box has a Content area and options surrounding padding model and margin areas the following diagram demonstrates how the content padding border and margin CSS properties determine how much space and element can take on a web page the content area consists of content like text images or other media it is bounded by the content Edge and its dimensions are given by the content box width and height the Border area is the area between the Box padding and margin its dimensions are given by the width and height of the Border the margin area consists of spaces between the border and the margin the dimensions of the margin area are the margin box width and margin box height it is useful to separate the element from its neighbors the padding area is the area that includes the elements padding this area is actually the space around the content area and within the Border box its dimensions are given by the width of the padding box and the height of the padding box now let's jump to an example to understand the Box model better so we are on the Sublime Text Editor to get started I have created a box theme simply run background color pink the font size is 30 pixel and we have set the border to zero solid green let's see how it looks on our page so as you can see we have a box named simply learned with background going all the way to the end I have also removed all the padding and margin from the page so that the boxes are pushed just at the corner of the page as you can see let's start by adding a padding of 20 pixel to the Box if you save the file you can see the Box increased by 20 pixel from all the sides inside the background of an element it goes around the content of the element most of the buttons inside the CSS be designed using padding so that the background of the button becomes wider than the actual text the next thing you can do is change the border of the element if you change this border size to 15 pixel we get a nice solid background of color green the Border goes around the padding of her element so we have the 20 pixel of padding around our content and 15 pixel of border around the padding which is around the content now we'll see the working of the margin if you add 30 pixel of margin to an element you can see the spacing on the outside of our border so let's add the 30 pixel margin and refresh you can see the spacing on outside of the Border module is used to space two elements apart from each other now let's change these values to see the difference let's make the margin 40 pixels we'll make the padding 30 pixels and let's keep the Border 20 pixels and make it color red this is 40 pixels let's observe the changes so as you can see our border now has a red background the padding is 30 pixel the margin is 40 pixels let's inspect the elements to understand it better inspect you can see the different Style here in the computer tab you can see the Box model this is a Content area this is the padding area this is the border and this is the margin area we have the margin of 40 pixels around the border so you can when you click on this area you can see the margin gets highlighted the body area gets highlighted of 20 pixels this is the padding and this is the content you can change the size of the content by adding the height and weight so let's try adding height and width we'll give the height 50 pixels and will give the width also 50 pixels just save the file now when you refresh you can see the content area of 15 to 50. what is a flexbox flexbox also called flexible Box model is basically a layout mode or model that provides an easy and clean way to arrange the items within a container if you are using a CSS for a while you must have used the old block model where you assign width in terms of percentage or fixed width and then use the float to arrange the items on the page suppose for example you want to arrange three boxes in a row then you have to enter everything manually from width height and to padding flexbox can do all these things with ease some of the concepts of flexible Box model is the ability to alter the item width and height to best fit in the containers available in the free space Flex model is the direction agnostic which is different from the Box model which is vertically biased and the inline which is horizontally biased flexbox works for both flexbox is more effective in a small scale layouts so here are the main properties of the flex okay so let's jump to some code and learn how these Flex properties work okay so we are in the sublime textator to get started let's add a div inside our body here and we'll give a class of flexbox container since this will be the container where all our flexbox item will decide foreign we will add another div and give it a class flexbox item and one more class flexbox item one which will help us to understand which items we are referring to when we style our elements individually thank you let's just save the file and see how it looks on a page now if you save the file you can see we have the box because I have already applied some of the styles to these flexbox items let's just see the styling so you can see we have the items tiled just a basic styling so that we get the Box on our page now let's just copy these and add two more flexbox items and you will see we have two more boxes on our page just copy and paste them below give them the class name flexbox item 2 and flexbox item three just save the file now you can see we have three boxes on the page Now to create a flex container we will add display Flex to our Flex container and this is how we create a flex box container so here we will just add display Flex just save the file now you can see all the items are at the same height and they are all in the same row you will also notice that if you shrink our browser the items adjust themselves accordingly to fit within the browser now if you want to style the elements on the mean axis we will use the property justify content inside of flexbox container let's make it a center save the file now you can see that all the elements are in the center of the page another thing we can do is if we want our layout to have a spaces between the elements we will set the justify content to space between you can see all the items are now evenly spaced if you want to lay out your items on the cross axis we would use the Align items property the default value for this is stretch if you want to keep the size of our items we will use the center and then all our items will be centered vertically before flexbox aligning the items vertically inside the container was nearly impossible with flexbox you can do it easily now you can see the items are aligned vertically inside the container now let's just delete everything and we'll just keep the display flag now if you want to have a column layout instead we will use the flex direction and change it to column select Direction column now if you refresh the page you will see all the items are shown up in a column now we can start talking about the different properties that can be applied to our different flexbox items as opposed to a flexbox container items the flexbox contains only for laying out and spacing between your items as well as the positioning of your item inside the container the actual flexbox item properties are used to override those item Properties or to apply different sizing to these elements now if you want a first item that it does not shrink when you shrink your browser we'll set the flex shrink to zero to our first item so we'll set the flex shrink to zero now if you go back to the page and try to shrink this you see the first item Remains the Same it does not shrink now in the same way you can set the items to grow in proportion with the web browser suppose we want our Flex box item to to grow with the as the page grow and cover all the empty spaces so we'll set this Flex grow to 1. now you will see the all these empty spaces are taken by the second item let's say we want a second box to be the center of the container instead of stretching to full height we can use the Align self property and set it to Center now you will see that the alliances property overrides the Align content property of the container you can see it is centrally aligned so this is all you need to understand and get started to work with the flex boxes I hope you guys enjoyed this video and learned something new about the flexbox and how you can use the text box to create the dynamic layout for your site what is a grid a grid is a setup intersecting horizontal and vertical lines defining the rows and columns and what is the grid layout so CSS grid layout is the most popular layout system available in CSS it is a two-dimensional system meaning it can handle both columns and rows unlike flexbox which is largely a one-dimensional system you work with grid layout by applying the CSS rules to both the parent element which became the grid container and the elements children which became the grid items the CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size position and layer between parts of a control built HTML Primitives you can see this is the basic layout of a grid system like tables grid layout enables an author to align elements into columns and rows however many more regular layouts are either possible or easier with CSL grade than they were with tables for example a grid container's child element could position themselves so they actually overlap and layer similar to the CSS position elements so here are the features of the CSS grid layout they are fixed and have flexible track sizes you can create a grid with fixed track sizes using pixels for example this sets the grid to the specified pixel which fits to the layout you desire we could also create a grid using flexible sizes with percentages with the new FR unit designed for this purpose you can place the items into a precise location using the grid line numbers names over targeting an area of the grid the grid also contains an algorithm to control the placement of items not given an explicit position on the grid you can define an explicit grid with a grid layout the grid layout specification is a flexible enough to add additional rows and columns when needed features such as adding as many columns that will fit into a container are included it also gives you control of overlapping content more than one item can be placed into a grid cell or area and they can partially overlap each other this layering May then be controlled with the Z index property so here the basic terminologies you should know to work with the grid system better the grid line is a dividing line that make up the structure of the grid they can either be vertical or horizontal and resides on either side of rows and columns a grid column is spaced between two adjacent vertical grid lines the size of a grid column is determined by the grid template columns property on the other hand a grid row is a space between two adjacent horizontal grid lines its size is determined with a grid template Rose property the grid cell is the single unit of a CSS grid and in Grid design a gutter is basically the width of the space between columns a gutter margin is a white space formed by the adjoining inside margins of two facing pages in a book or space between columns on a page so with this let's now move on to the Hands-On demo and see how the grid system works in actual world if getting your learning started is half the battle what if you could do that for free visit skillup by simply learn click on the link in the description to know more you can see this is a basic background style we have pre-applied this will have a good look of the Box model we'll start by creating a container and wrapping our grid items in it so let's create a grid and give it a class name grid container and inside of it we'll put our different grid items so we'll just create different grid items and give them a class grid item followed by a clock number they belong to so that we can easily distinguish between them foreign so we'll have the five elements on our page let's save the file and see how it looks on the page thank you so you can see we have the different grid items on the screen so there are easy for us to visualize we have not applied any styles to them other than the visual styles so we'll go back to our code let's go back to the CSS styling sheet so to create the grid we'll open our style sheet we need to display grid on our grid container so we'll select the grid container and set the display to grid foreign doesn't Define any rows and columns for us to work with it just they give the alignment properly therefore by default it looks just exactly the same to make the grid look actually great we want to need to do is Define columns and rows for a grid so to do this you will use a set grid template and set the column if you want to set the size of the column we'll set the size to 100 pixel line 150 pixel foreign if you refresh you have the 100 pixel column on the left and a 150 pixel column on the right and then the grid captures our next row but what if you want a box to flexible size themselves according to the items inside of them here we'll use a fraction in it so instead of a 150 pixel column we want one fraction of our size and instead of 100 pixel we want the two fractions of our size so we will just replace with two fractions and this with one fraction now if you save the file and go back to the page you will see the items on our left here in our first column are twice as the largest item on the second column and that because of the FR units we have defined you can see the difference in the sizes the item one is the twice the size of the item two another thing you can do is with columns is use repeat suppose you want four Columns of a size 100 pixel wide you can just write repeat command and inside of it how many times you want to repeat the size so we will just delete this and use the repeat we'll set the number of times we want to repeat and the size of the columns now if you save the file you will see we have a four Columns of 100 pixel wide we can do the same things for rope just set the grid template rows and Define the size you want now you can see we have the symmetric size all around our container if you don't know how large your grid is going to be you can use the grid Auto rows and this will determine the size of all the rows that is added after the template rows suppose we want all our rows to be 100 pixels so we'll just delete the grid template rows and set the grid Auto rows to 100 pixel now you can see all the rows are now 100 pixel tall let's change our column back to 100 pixel and 150 pixels so that it will be easier for us further we'll just delete this grid Auto rows now we'll talk about the spacing of the rows and columns apart from each other we can do this with the help of the grid Gap property grilled row Gap will give some spaces between the rows similarly the grid column will give you the spaces between the columns foreign columns now we want the same value for both The Columns you can use a grid grab property and mention the space will just delete these two and instead of it we will use just the grid Gap and set the size to 20 pixel now you can see the evenly spaces between the rows and the columns this is all you need to know about the sizing of the different columns and rows now let's talk about the positioning items within its grid cells so for horizontal positioning we could use the justify items and we can set that to Center so that's interesting each item within the cell by default it is set to stretch you can also set it to start or end or space around we will leave this to Center to vertically position the content we could use the Align items the Ally items also accept the same values we can set it to Center we can also set this one to start or end just we'll keep this to Center as well you can also align the entire grid within the container so let's get rid of these to just demonstrate them in a proper manner you could use a justify content and that will align the content horizontally within the container you can also set this to start or to end just set this back to Center to align the content vertically we could use the Align content and the Align content also accepts the same value we can set it to Center or start foreign you can see they are aligned centrally between the container we'll just close this okay so this is everything you need to know to get started with the grid layout grid works very similar to the flexbox but it allows you too much in terms of laying your elements because of its 2D nature here you can see we already have the HTML file with us in this video tutorial we are going to create the structure of a form with the help of HTML and then we are going to style it with the help of CSS so before we begin with the programming part let's discuss what is a form basically forms are very essential part of any website it is a way to take users input and process the data acquired from the user the form offers controls for almost every use of an application with the help of form controls and several form fields we can take small as well as large input data from the user and then we can use that data you guys must have seen it in different websites where we have login and signup forms so in login form what we usually do is we enter our email and a password or a mobile number and a password a combination of any of them and then the website allows us to open account or for that particular website on the other hand on a signup form we need different type of data we need name with then we have to put a age and several other form of data right like the phone number email everything we have to put in a registration form so these are the types of registration from we usually see but apart from that we can create other forms as well so let's discuss why CSS is necessary to create a form as we all know HTML is used to structure a web page so with the help of HTML we can create a form but to make the form look more interactive to the user we need to style it that's where CSS comes into picture CSS is used to style a form and it will make a form look more interactive to the user as well so without any further delay let's start with the programming part and we'll create a basic form with the help of HTML and CSS in this video so don't worry we'll create some more forms in the upcoming videos so we'll in this particular video we'll see how CSS is used along with the form so here you can see we are in the HTML part of form so we'll create a form first so the most basic element HTML element to create a form is the form element now we are going to take some unordered list or the UL element now we are going to take the LI so you as you guys all know ul and Ally both the elements are used in combination always so let's label the form so we'll write label 4 we'll take certain parameters and we'll write here name fine this is going to be the name we'll write your name save it and just refresh the page so here you can see we have the name present on a web browser so the next thing we are going to do is we are going to create some more input Fields right so to create an input field we have to use the input element always so we'll write here input we have to Define type type is going to be text and then we have to put a name name is going to be ID so ID is going to be the name and then we'll write here user name fine so here you can see we have an input box let me just increase the size a bit so here you can see we have our input box with name as the label and then we have an input box so similarly we'll create some more input elements first so we'll just paste them here for four times so you can see we have four different placeholders so just let's just remove this one and we are going to keep it simple for this particular video so we'll write here label for mail then we are going to take email from the user so we'll write here email and input type is equals to will write here email ID will also mention is mail let's say and name we are going to write here user email fine so save it here you can see now we are going to do the same for another one so here what we'll do is we'll right here message so we are going to label this as message we are creating another input field so we'll write here input type is equals to okay just let's just do one thing let's just remove this input tag from here and we are going to use the text area in place of it so we'll write here text area ID as let's say message and then we have to write your name user underscore message fine close it and the text area is done so here you can see we have a text area as well we have two input fields and a text area so we are going to create a form out of it right so we have all the HTML elements now what we are going to do is we are going to create a we are going to style this form basically so before that let me just create a button as well okay so we'll write here button type is equals to submit and we'll write here submit fine save it and here you can see we have a button as well so let's move to the CSS part of this form now so what we are going to do is we are going to style this form with the help of CSS now we already have the structure of a form so to style this form we are going to use certain IDs or we can say elements name or whatever we want to use we can just use them so first of all we are going to Center the form on the web page so we are going to let me just show you in this way so here you can see we have all the HTML elements present on the left side of our web page so we are going to Center them first so we are going to put them here for that we are going to use basic CSS so we'll write over here margin margin is going to be 0 and Auto 0 for up and down out of it left and right so then we are going to write here with the actual width of our form so let's say the actual width is going to be 400 pixel then we'll write here padding padding we are going to write is 1M and then we'll write here border border is going to be one pixel solid and let's use any color for this form so let's just write here this save it so here you can see we have a border the border of our form so here you can see our form is present at the center of our web page it looks different from what we had in our HTML part right so we have about the all the elements are present at the center let's style it more then we are going to Define the Border radius border radius is going to be let's say one name save it and here you can see the curved border and we'll write here background color background color give any let's use Beach so here you can see this background looks nice for this form so we actually we are actually done with the outer styling of our phone we have a form here now what we are going to do is we are going to style these elements as well so we'll write over here UL and list style type so we are going to remove these bullet points from here so we'll write over here none for the first and here you can see all the bullet points are gone then we are going to write here padding is zero and margin is zero fine save it so here you can see we are done with the unordered list now we are going to write here form Li and we are going to do it for every list element so we'll write it here like this we are going to give margin top every list element so we are going to give margin top to every element so let's say the margin top is going to be 1 M so here you can see it's equal for each element so the top margin is also 1M then we have a difference of 1 M between each input field right so that's how it works now we are going to style the label so we are using a HTML element name right so here you can see now what we are going to do is we are going to align all the labels fine so we'll write here display as K inline block save it and here you can see then we'll write here width as 90 pixels save it so here you can see the width it started taking the form of a form the shape of a form basically then we'll write a text aligned to the right okay here you can see now what we are going to do is we are going to take a input element and text area together so we'll write a text area as well so we need to make sure that all the text field have the same font settings by default so what we'll do is we'll write here font 1M and we are going to use since City feel fine let's just write something over here and now save the program and here you can see so the font size is changed and the next thing we are going to do is we are going to give uniform text field size as well so we are going to write your width as 300 pixels and then we have box sizing property box sizing we are going to write here border box so here you can see all the boxes are of same width so here you can see the form looks nice now and the next thing we are going to do is we are going to write here border as one pixel solid and let's use this color save it and here you can see the Border changed now what we can do is we can also use the focus property of CSS to focus on every input box but we are not going to do it right now so the next thing we are going to do is we are going to write some code for the text area and we are going to align it vertically so we are going to write here vertical alignment stop and here you can see the message is now present at the top it looks nice and we are going to give height as well to the text area as 5 m and you can see the text area is a little bigger in size when compared to name in email now what we are going to do is we are going to write here dot button we are going to align the button with the within the text field so we will write over here padding padding left basically we are going to declare it as 90 pixels and here you can see it looks nice and let's just use 95 pixels here we can use 93 yeah it looks aligned right so it the button is done and we are going to just use the button element here margin left 0.5 m M save it and yeah the form is we are done with the form so this is the basic CSS form so actually we used HTML to create the structure and then we use CSS to make it look a bit more interactive than it was with the help of CSS so don't worry guys we can do a lot of things with CSS we can make a web uh we can say form look more interactive way more interactive than we can even think CSS is actually interesting we can do a lot of things with this form as well but this time what we are doing is we are going to see how CSS is basically applied to a form to make it look more attractive to the user so the background color and all plays a vital role in making a form it look attractive to the user so discussing talking about how actually your form works so here you can see we have three different input fields we have name email and message just write name over here okay and just let's write here caution and message submit it and here you can see it says please include and at the rate in the email address because here in HTML we have used the type as email for this input box so how actually a form works we create the structure of a form with the help of HTML then we use CSS to style and make it look more attractive to the user and then at the end JavaScript is used to validate that particular form but now HTML also provides some sort of validation to any form with the help of type and some other attributes so here we haven't used JavaScript till now so what will happen if we are going to create a full flash form with backend and front-end Booth we'll take input from the user we'll submit it and the data will be sent to the server and then we can retrieve any data from the server or we can submit the user data to the server as well so HTML CSS and JavaScript together comes together to actually create a form this time we are done with the HTML and CSS part we have created a form and we have styled it with the help of CSS JavaScript was developed in the year 1995 by a person named Brendan Ike Brendan was working for Netscape Communications while he developed JavaScript in 10 days there were a few changes in the name of JavaScript initially it was mocha which was later changed to livescript and then it finally became JavaScript the start of JavaScript wasn't that good as so many developers who were using Java at that time they considered JavaScript as a language for designers and non-engineers no one ever knew that this small side scripting language would have a great future today more than 90 of the websites out there they are using JavaScript somehow many of you guys gets confused with Java and JavaScript let me clear it for you that both Java and JavaScript they are different languages they have almost nothing in common many people say that JavaScript was named after Java as a part of a marketing strategy to gain wider acceptance and recognition in 1995 Java was a buzzword when JavaScript was developed that's why they renamed JavaScript after Java let's move on to what is Javascript have you guys ever been through a website where you can see images that slides automatically one such website is Amazon the home page of Amazon where we can see different types of ongoing sales is an example of JavaScript in Layman language JavaScript is a lightweight scripting language used to make web pages more interactive and more likely earlier when JavaScript was developed it was only a side scripting language to do basic tasks like you can add pop-ups in your web page or you can make your web page more interactive nothing more than that but now the whole scenario has changed with the help of JavaScript we can create applications as well if we talk about applications let's take an example let's suppose we want to create an app we can create it in Android or in iOS but we have to learn few different languages to create those apps for Android we have to learn Java and XML and Swift We have to learn for iOS but with the help of JavaScript you can create hybrid applications which can work on any platform without any problem Tech giants like Google PayPal Amazon and YouTube they are using JavaScript these days the evolution of JavaScript in the past few years was unbelievable suppose you want to create a single page website every one of us is familiar with Gmail let's suppose so Gmail is a single page website which looks more like a desktop software than a website so Gmail is based on angular.js it is a popular framework by Google which is free of cost and it is totally based on JavaScript now let's go over some of the features of JavaScript these features are actually why it is considered that using JavaScript is advantages over other languages so let's start some of these points JavaScript is not a proper programming language indeed it is a scripting language which works in the runtime environment just like python so there are few other languages like C plus plus and Java they need a compiler to work but with JavaScript you don't need a compiler once you are done with the script it will interpret and show you the output in the browser directly next up is lightweighted Javascript can provide programming facility to some extent in JavaScript you don't need to specify any data type or return type which helps in making development more quicker that's why it is known as light weighted JavaScript is both client-side as well as server side technology client-side technology runs on the user's computer whereas the server side technology runs on the web browser initially when JavaScript was introduced it was introduced as a client-side technology but with the introduction of node.js in 2009 one can now work in the back end as well there is a way to validate the user's Data before sending it to the web server and we can do that with the help of JavaScript the data will be checked for correct form and value all we have to do is start a loop give it the condition to check the data JavaScript is also platform independent although originally designed to work on browsers only but now it is a platform independent language which means once you are done with the script you can use it on any browser or platform without any problem JavaScript is an object based scripting language although many programmers do not consider JavaScript as a true object oriented programming language due to its lack of class concept it does support other features of object oriented programming like it supports encapsulation it supports polymorphism and also it supports prototypal inheritance the last but not the least feature of JavaScript is case sensitive so when it comes to keywords identifiers names and functions JavaScript differentiates between capital and lowercase letters we have to keep this in mind while programming now I will quickly go over some of the JavaScript applications where JavaScript is currently being implemented first one that comes to every person's mind is web development it was also the main motive behind developing JavaScript we have Technologies like angular we have node.js we can create beautiful web pages also JavaScript can be used along with HTML and CSS to make those static looking web pages more engaging if we talk about other applications of JavaScript we can use it in app development either mobile app or web app like we took the example before that how hybrid apps made with the help of JavaScript can take over traditional Android and iOS app one of the most important and unique application of JavaScript is in smart watches the bangle.js is an open sourced Smartwatch powered by JavaScript Gordon Williams the man who is currently working on this project it is said that this new open sourced stack built around JavaScript will replace the onboard firmware soon the next application of JavaScript is client-side validation as we discussed earlier JavaScript is used to validate the user data whether the user's input is correct or Not by cross checking it with the given condition like the user wants to enter in your website and you want it to be a user with the rate gmail.com in his email ID so you will give that condition to JavaScript and it will cross check it with the user's information like when the user will try to enter in your website it will check that if at the rate gmail.com is there or not in the user's email ID so it can validate the user also apart from that one more application of JavaScript is game development JavaScript can be used to make fully fledged 2D or 3D games using different libraries although most JavaScript game development focuses on creating games used in browsers only let's start this video with the introduction to Dom Dom stands for document object model it is an API for HTML and XML documents which helps JavaScript to understand what is their return inside the HTML document API stands for application programming interface to understand API better let's take an example of a restaurant imagine yourself in the restaurant you are sitting at the table with the menu the chef in the kitchen is also part of the system the waiter here works as a messenger between you and the chef that's what API does it works as a moderator between JavaScript and the HTML document Dom defines the whole HTML document in a hierarchical form to make it understandable for JavaScript so that other JavaScript functions can work over it it represents the entire document in the form of object and nodes whether it be elements or text or anything stored in the document the entire page content can be accessed or manipulated by JavaScript Dom is not used with JavaScript only other languages like python also uses dom dom was designed to be used independently to begin with dom there is nothing special you have to do different browsers have different implementation of the document object model every browser uses Dom to make the web page of the document accessible by JavaScript let's move on and see what is document object model with the help of an example I believe you guys have the basic knowledge of HTML and CSS a prerequisite for this course let's start things off with a basic HTML example here we have a code that consists tags like HTML head body heading tag Etc we have the HTML tag here the opening HTML tag and the closing HTML tag inside the HTML tag we have the head tag which contains the documents header part inside the head tag there is a title tag that contains the title of the web page then comes the body tag which contains a heading tag and two div tags with IDs as div 1 and div2 a div tag defines a particular section in the HTML document the ID used within the div tag it is an attribute basically that has to be unique within the document to make the element unique from other elements next up we have a paragraph tag with a class attribute within it CSS and JavaScript uses classes to select and access specific elements don't worry guys if you have no idea about it let us first see the output of this code before going to the document object model of this whole document so guys this is the output of the previous code we just came through here we can see the title of the web page as well as heading after it there were two different div tags used in the code here is the output of both the div tags the question here is where are those ID and class attributes seen in the output the answer to this question is there's nothing on this web page that can show both of them we can use them in our CSS file or through JavaScript to specify the containers in which they are used so we have concluded how a normal document works and how the browser interprets the HTML code but how JavaScript uses this code is a bit different that's where Dom comes into play when the actual HTML document is loaded in the browser another representation of that document is created known as document object model here's the model you can see on your screen each of the tags used in HTML document is correspondingly represented as object in the doll next starting from the HTML tag and covering all the other tags like head title body and few more the same hierarchy as there was in the HTML document goes with the document object model also document to object model is simply the same HTML document with different representation the reason behind this different representation is that it's easy for JavaScript to interpret this format JavaScript can't understand tags but it can understand these objects JavaScript can easily manipulate these objects using different functions which we will see in future while working on these function for example if you want to access the text present inside the heading tag you can do it by accessing The Heading tag with JavaScript you can also work on the style of this text with the help of JavaScript as well JavaScript uses the concept of nodes it can access nodes of the document object model there are many types of nodes present in the Dom the basic three types are element node attribute node and text node the element node consists of all the tags used in HTML document like the head tag and the body tag the attribute node contains the attributes used in HTML document by now I hope you have understood the concept of attributes so JavaScript can access these attributes as well and the user can work upon them as per requirements the text here in the HTML document that is simply it can also be accessed with the help of JavaScript it is the value of that particular element variables are named storage that a program can manipulate as the name suggests a variable is a value that can change according to conditions variables refers to those memory blocks inside the computer where we can store information let's suppose you want to store any value inside your computer so variable will represent the location of that value in simple terms variables are cups with stuff inside them and you can use that stuff later again and again according to the way you want to before the introduction of es6 or ecmascript we can say which is the updated version of JavaScript variables were declared using a single keyword only which is where we'll try to declare a few variables here we'll see how where keyword works so let's comment this thing first so let's declare a few variables let's suppose where a equals to 15 we will declare where B and the value of B will be 6 we will declare where C and the value of C would be a plus b so here we have defined three variables a b and c a is a variable with value 15 stored inside it and so is B the value of B is 6 but C is a variable that will contain the value of a plus b let's try to print this on browser document dot right and we will print the value of C save it and here you can see the value of C is 21. that's the correct answer so similarly you can also print a and b as well let's print a and b as well here what we will do we'll copy this line we'll paste it for a n will update this here as well so it won't create any confusion so here you can see the value of C is 21 the value of a is 15 and the value of B is 6. it shows the value of all the three variables we declared but with the introduction of es6 or ecmascript in 2015 two more ways were introduced to declare a variable these are let end const we shall discuss these two terms in the later part of this session let me show you how to declare a variable there are a few things you have to keep in mind while declaring a variable name here we have seen we use three variables a b and c that was an easy task to do but giving a variable any name like something other than a single alphabet so you have to keep a few things in mind while naming them start them with the letter underscore or a dollar sign you can't use any sign except underscore or dollar so if you are giving a variable name you can't use any other sign except the underscore or the dollar sign you can use these two signs only you can't use any other side you can't use a number in the starting apart from that let's suppose you want to give it a name as 9be you can't do that in JavaScript JavaScript won't allow you this if you try to save it it will throw you an error invalid or unexpected token so you can't do this in JavaScript there is no limit for the length of the variable name but you can't use reserved keywords in a variable name like let's try to create a variable with name as class class is a reserved keyword in JavaScript we'll save it and see here throws an error unexpected token class but you can use a class with capital c let's save it and here it will work fine why it works because JavaScript variables are case sensitive if we try to create a variable with same name Let's see we try to create a variable with where girl and another variable will be where girl with capital G this time JavaScript will treat these two variables differently these two are different variables for JavaScript as JavaScript is case sensitive when it comes to variables let's declare a few more variables let's remove it we'll declare a few more variable let's comment this part as well it will declare a few more variables suppose we declare a variable with keyword where and we'll name this variable as bikening where byte name and press enter if we leave this variable without assigning it any value the by default value will be undefined let's try to print the value of this variable right we will try to print the value of byte name save it here you can see the value it shows is undefined so the by default value of a variable if you do not assign it any value will be undefined let's try to give it a value let's suppose we try to give bike name we use equals to operator to assign it a value cosine let's suppose we'll assign it Yamaha semicolon and press Ctrl s to save this and here you can see the output as Yamaha you can also assign a value to the variable during declaration as we have done in the previous examples here we have assigned the variables value at the time of Declaration only let's move on to let end const so we will discuss let and Cones but first we will compare let with where let is also used to declare a variable just like where is used but there is a limitation to use let is not accessible outside the Block in which it is declared so we will use let here only let byte name equals and we will change this value as well we'll change it to Hero let's say save it and here you can see the output as hero but if we try to put this code inside a block let's suppose we put this code inside this block a pair of curly braces and we will again try to access document dot right we'll try to access bike name again from here from outside the block we try to access this save it and here you can see buying name is not defined it is an error in line 18. so what's happening here basically you can't access a let variable outside the scope you can't access it from here but it will work with where if we try to replace let with where and save it here you can see it says hero and hero because first it will interpret this method and then it will interpret this as well in case of where due to its limited scope let variables are used when there is limited use only like in for Loop or in while loop we will learn these Loop in future let will not allow you to redeclare any variable let's understand this with an example here's the code as well we have declared where bike name and we'll remove this and first we will try to do this with where let's suppose where bike name equals to TVs Control Plus s it says hero and TVs so the variable name the bike name is same in both cases here and here as well these are same but with where keyword you can do that let will not allow you to do this if we use let here in place of where we'll write let as here as well and we'll change the value as well we will give it as Kawasaki and let's suppose to rookie here save it see bike name has already been declared so that's what let won't allow you to do you can repeat the same light variable in different scope it won't create any problem but it will not allow you to redeclare any declared variable so let's move on to const we use const when there are values we don't want to change or that will never change basically so the keyword const is little misleading as it defines a constant reference to a value not the constant value we can't change the Primitive value but we can change the properties of constant objects let's write another piece of code for const keyword so let's declare a variable const X is equal to 5. comma Y is equal to 7 let's say fonts so here what we have done we declared a variable X and a variable y with value as 5 and 7 we declare it this time with const keyword and variable Z which is X Plus y we printed Z on the browser and it shows the value as 12 which is X Plus y 7 plus 5 is equal to 12. now what we will do const will let you do this but if you try to update the value of x let's suppose we try to update the value of x as x equals to X Plus 10. we'll print X this time document dot right X let's save this it will throw an error assignment to a constant variable in line 24 so here you want to update the value of x you can't do this with const keyword you can do this with let and where as well but you can't do this with const also const won't allow you to redecure any variable just like let so if you try to use const x again is equal to 10 save it so here it says identifier X has already been declared this thing you can do with cons the scope of const is the same as lead it can be used within the block where it is declared data types is an essential Concept in every programming language to work on any variable you should know its type it refers to the kind of data which is being stored inside a variable the type of variable is holding basically every programming language has its own set of data types which is unique in its own way we discussed earlier that JavaScript is a lightweight scripting language because we don't need to specify any data type in JavaScript after all all the variables in JavaScript are Loosely packed or we can say JavaScript is a dynamically typed scripting language we shall discuss these properties later in this video for now let me tell you about different data types present in JavaScript so JavaScript data types are divided into two categories primitive data types and non-premitive data types primitive data types are stored in stack whereas non-premitive data types they are stored in Heap I don't want you to go deep in these two terms as if you are new to programming so we'll leave it just keep one thing in mind that primitive data types are base data types whereas non-primitive data types are objects or we can say they are derived primitive data types they are further divided into five categories they are divided as numbers strings Boolean undefined and null non-primitive data types or complex data types we can say on the other hand they are divided into two parts arrays and objects we'll have separate videos on these topics for now let's discuss primitive data types to understand primitive data types much better let's declare a few variable here let's say we declare where X and give it the value as 16. will declare where Y and will give it value hello world we'll declare one more let's say where flag and the value will be true here we can talk about those properties of JavaScript which I mentioned earlier JavaScript variables are Loosely packed and JavaScript is dynamically typed scripting language these two points refer to the same thing here you can see we have defined three variables X we have defined variable X we have defined variable Y and flag as well the values for all three variables is different from one another see variable X is holding a value that is 16 variable Y is holding a value hello world which is a string so 16 is a number hello world is a string and variable flag is holding a value that refers to a Boolean value in place of true we can also write false here so what's happening here here you can see there is no data type if you are coming from a C plus plus background or a Java background this will be a little bit weird for you guys because in C plus plus and Java we used to do it like we will define an integer let let me show you so how we will Define integer in C plus plus or Java what we'll say we'll use int x equals to 5 or something like that we already had a data type for string as well we have carrying C plus plus but here in JavaScript we have no data type we are only using the where keyword that's what we call as Loosely typed this line means that you don't have to define the data type of the variable what happens in JavaScript is whatever the type of value you will pass to the variable the data type will change accordingly so you don't need to worry about if you are passing a number or if you are passing in string just relax just when you pass the value to the variable it will be determined automatically so these are the three basic primitive data types present in JavaScript which are number Boolean value and string so let's move on to the next one which is undefined it will Define a variable p and we'll leave it as it is so this variable P has an undefined data type it means that any variable which is already declared but has no value inside it it has an undefined data type I'll tell you a basic operator the type of operator we'll go through the operators in later videos but just try to understand the basic need and use it with me for now this operator will help you know the type of value a variable is holding see let's use it here we have declared a variable P we'll check the type of P so to use this operator you have to use it with document dot right now so we will do document.write and we'll use two brackets and inside it will write type of and whatever like we want to know the type of variable X let's suppose we'll write here x semicolon save it and you can see here it says number this means that this variable has a value which is a number similarly we will check for all the variables present here we'll check for every variable we'll check for y will check for flag and we'll check for p as well let's copy this and paste it three times and let's change the value here from X to Y in this line and from X to flag here and here we'll change it to p so we have done it we'll save it and see here it says number first variable y it says it's a string because you know hello world is a string it's a sequence of character for variable flag it says Boolean so it's defined as true or false and for variable P it's written here undefined with this we are left with only one primitive data type the null data type there's a difference between a null value and an undefined value undefined means lack of value whereas null means the absence of any value suppose you are using null as the value for any variable the type of operator will return this variable as an object but if you are not giving any value to this variable you are leaving it after declaration the type of operator will return undefined here's an example for this C will declare one more variable here we'll declare where num let's name this variable num and we will give it the value as null we will use document.write type of and we will check with the help of type of operator that what type of value the variable num is holding so let's give here num we are good to go press Ctrl s and C here it says it's an object so a null value will always be shown as an object we'll talk about the complex types or composite types in further videos we'll have separate videos for each of these types don't worry about it the term control statement is pretty self-explanatory and straightforward right we came across JavaScript statements in previous videos JavaScript statements are the instructions that tells the browser to perform specific actions control statements are also instructions and they govern the flow of control in a program so let's take a look at control statements with the help of an example let's suppose we have a piece of code that is n number of statements here let's say we have this code and so the conventional workflow will be it will first execute the first statement then second then third and so on till statement n right so this is the basic flow right from statement one till statement n and it will execute each statement in between however in real world the scenario is different like we don't write the code in same menu every time for example let's suppose you are in line 5 and you want to print this line 10 times so what should you do you can write this line 10 times or you can copy paste it right okay let's forget about 10 times let's suppose you have to use this code or we can say let's suppose you have to print this statement 100 times doing this like copy pasting it for 100 times or writing this statement for 100 times that's useless and unnecessary right so that's where control statements comes into picture we'll discuss them in a while let's assume another situation this time you want to make a choice based on certain conditions you can use conditional operators but then it has limitations right to tackle this problem we have control statements in JavaScript so these are the very basic reasons why we need control statements for performing a certain activity like if we want to perform a certain activity n number of times or if you want to make a certain decision making kind of scenarios in your program that's where we need control statements in JavaScript in JavaScript we have two different types of control statements depending upon what action we are performing so we have the conditional control statements and we have the iterative or we can say looping control statements talking about conditional statements as the name suggests we use conditional statements when we have to make decisions based on conditions when we have two choices or when we can say when we have two different conditions and we want to make choices accordingly so that's where we use conditional statements we have two different types of conditional statements the if else statements and the switch case talking about the iterative statements as the name suggests if you want to perform any action more than once or maybe n number of times instead of writing them again and again we use Loops so Loops are basically statements we use Loops to perform any activity n number of times with specific conditions so in JavaScript we have four different type of Loops we have for Loop while loop do while loop and foreign Loop so the for Loop while loop and do while loop you might have heard about them earlier because they are also present in other programming languages but this foreign Loop this is a new type of loop present in JavaScript we use foreign loop with objects we'll go through objects in upcoming videos and of course we'll be looking at each of these control statements in detail will have a particular video for each of these topic now let me introduce to you the break and the continue statement they are not the types of control statements but they do assist in other control statements the break is used to exit a switch statement or Loop like when used in a loop it breaks the loop and continues executing the code after it and on the other hand the continue statement breaks a single iteration when used in a loop when we use continuous statement in a loop it breaks a single iteration and it breaks the iteration only if the specified condition occurs and then it will continue with the next titration in the loop so the if else conditional statement is used whenever we work with condition it can be either a single condition or maybe more than one condition or multiple conditions we can work with so let's try to write a basic program with a single condition so then we'll move on to multiple conditions using the elsif statement so we'll create a new file today so I hope you guys know the importance of creating a separate file for every topic you know it will be easy for you to work to find out that separate file later if you want to revise that topic so here is the program where we have taken a variable X and the value of x is 10. so what we are doing in this program is we are checking if the value the variable X is holding that is value 10 and if the value is less than 10 or if the value is greater than 10. so we have only two conditions either the value can be less than 10 or the value can be greater than 10 or equals to 10 is so here in this program what we'll do we'll first we'll update this value as 8 so the variable X is holding the value 8. so to check the output let's save it and here you can see it says the value of x is less than 10. of course the value 8 is always less than 10 right so for 8 that's fine it will say the value is less than 10 and similarly if we do the same for let's say 11 save it now and see it says the value of x is greater than 10. so that's quite simple right but what if we are giving the value as 10 we know 10 is equals to 10 so save it now and see here you can see it says the value of x is greater than 10. this is happening because what we did we as we told The Interpreter to check the value if the value of x is less than 10. we didn't mention that if what to do if the value is equals to 10 so it will check for only X is less than 10 not for equals to 10 or greater than 10 so here what it is doing it is checking if the value is less than 10 so that it says okay let's print this statement if the value is less than 10 or if the value is not less than 10 or if the value is equals 2 or greater than 10 it will print the value of x is greater than 10. to avoid this type of misunderstanding we use an elsif statement so the concept of else if statement is the same as if statement but we are doing we are using multiple conditions right we are giving it more than one condition so how to use else if it's quite easy and the syntax is also similar to the if statement the only difference is that it contains an else before if so it's an else if so what we are doing is we are giving it a condition that else if x equals to 10. so now what it will do it will check for two conditions that if the value X is holding is less than 10 or equals to 10. and what we'll do we'll update it as so let's check the output now save and see here it says the value of x is equals to time right so I hope you guys are getting this the execution flow for this program will be like it will check for the first condition if x is less than 10 if yes it will print the value of x is less than 10. if no it will move on the to the following condition like under the else if statement it finds a condition that if x is equals to 10 it will check for it if yes if x is equals to 10 then it will print the value of x is equals to 10. or if not then otherwise it will move to else statement and print the value of x is greater than 10. we don't need to specify any particular condition for this you know because we have already specified the two conditions that if x is less than 10 or if x is equals to 10. now we'll take a look at some basic programs other than this one we'll take a look at a few more basic programs so here's the another program what we are doing here is we are taking a variable X and the value of x is 5. so what we are doing is we are checking if the number is an even number or an odd number thing you have to keep in mind is the logic to find whether a number is even or an odd number so to check uh whether a number is even you what we do we'll divide that number with two right but basically we want is we want the remainder as 0 when we use the modulus operator so what we'll do here we have written X mod 2 equals to equals to 0. so if the remainder is 0 then the number will be an even number because it is divisible by 2 else it will be an odd number so that's quite simple right let's save it and check the output for 5 it says odd number yeah 5 is of course an odd number right so that's for even and odd number so here we have with another program here it says we have a variable Y and the value of y is let's say eat and what we are doing here is we are checking if a number is positive or negative or zero so we have three different conditions either number can be positive or it can be a negative number Any number greater than 0 is a positive number right and any number less than zero is a negative number and the third one is a number zero it's neither positive non-negative so let's check for the number eight save it and see here you can see it is a positive number let's see for minus 2 save it now it says a negative number for 0 it will say 0. so these two programs are quite simple guys right the conditions are pretty simple we use modulus operator we used greater than or less than sign and that's quite easy to use right so let's move on to the next program which is a bit tricky than these two so what we'll do in our next program is we'll check if a number is positive or negative and at the same time we'll check for even an odd also if you are giving any number as input like let's suppose we are using 5 we'll check if the number is positive or negative and odd or even so we'll do this simultaneously let's move on to this program so there are two ways to check whether a number is positive or negative and odd or even so the two methods we'll discuss them one by one the first one here is to use nested if and another one is when we use logical operators along with the if else if statement so this one here you can see right in front of your screen is the nested if method so here you can see we have used the if statement we have given one more condition inside another if statement so first it will check whether a number is positive or not for X greater than 0 it will check if the number X is greater than 0 then if yes if it will find it that yes this number is greater than 0 then it will move on to the nested if and it will check for odd or even for odd number and even number it will check if it finds that the number is even it will print that the number is positive and even if the number is not even it will print the number is positive and odd so here you can see the difference but The Interpreter is doing is it will check for the number as positive and if the number is positive then it will move on to the nested if and check for the even or odd so if it finds that the number is even it will print positive and even otherwise it will print positive and odd then it will move on to the next condition which is for negative number if x is less than 0 then it will again move to the nested if and it will check for even and odd so if it finds that the number is even it will print negative and even otherwise it will print negative and odd and the last condition is for the number 0. let's try to find out the output of this and what we'll do we'll update the value of x as 8. so save it now here it says the positive and even so 8 is a positive number and even as well let's update the value of x as minus 5. save it now it says negative and odd number minus 5 is a negative odd number right so that's how it will check for positive or negative end odd or even so we are doing both the things simultaneously in a program we have an alternate method as well here you can see on your screen we have written a program and here we have taken a variable X the functioning of both the programs is same both of these program will check for positive or negative and odd or even so here you can see I have taken a variable X let's say the value of x is 7. it will check for X greater than 0 and x mod 2 is equals to equals to 0. so we have four different conditions right a number is greater than 0 that means a number is positive and even a number is positive and odd a number is negative and even a number is negative and odd and the final one is a number is 0. okay we have five conditions and we have to specify these four conditions here so here we you can see we are using the logical and operator this means it will print this statement let's suppose for this statement it will print this only if both the conditions are true right if the number if the value X is holding is both greater than 0 and an even number so if you try to find out the output now save it and see here it says number is positive and out so the number seven is greater than zero but the number 7 is not an even number that's why this line is not there on the browser it will print this line because the number is positive and odd right the switch case is another conditional control statement and just like the if else control statement there is a difference between the usage of if else and switch case statement now both if else and switch case works with conditions and we have to choose when to use switch case over if else switch case is generally preferred over the if else when there is n number of test cases present or we can say when we are working with a lot of conditions let's say we are working on a program and you ask the user for an input between 50 and 100 a numeric input basically and in the output we have to print the textual form of that number suppose if the user enters 75 right the output will be like this so what we are doing we we are taking a number from the user as an input and we are printing the textual form of that number right so we can use the if else or we can say else if control statement but the program will be so lengthy and not so clean also switch case is much more efficient than if else when it comes to execution time like if we have n number of conditions then using switch case is a better option we'll get to know why in a bit so let's move on to the programming part and today we'll write a program where we have to find the month in a year by accepting its number so we have 12 months in a year for example if we enter 4 then the output will be April and if we enter 8 then the output will be August because August is the eighth month of the year right so I hope you guys are clear with the question of course we can do this program with the help of if else statement but we discussed earlier that using IF else in such cases is not efficient right we can use switch case in this scenario so let's create a variable first let's say we are creating a variable where month and you can give any value to this variable from 1 to 12. you can provide it with any initial value so let's create a variable first let's say we are creating a variable where month and the value we are providing it one as the hardcore initial value for Simplicity again we are not taking the input from the user or from the browser to do so we have to first go through the Dom manipulations and we'll go through it in later videos so let's start with the switch case now the Syntax for switch case is quite simple just write down switch and pass the variable month so we have to check in this round bracket for the variable month because you know any value you are providing to month the switch will check the program accordingly so for now we have taken the value as one for month we can take any value like we can take 3 we can take 11 12 or any value other than 1 to 12 as well so whatever value you are providing to the variable you can provide the variable to the switch statement right so next up we have an open and curly braces for the body of the switch case we have to test for 12 different conditions inside this starting from 1 to 12 right so the syntax goes like this you have to write case and then the value month variable might hold like 1 2 3 and so on followed by a colon right so we have to write the value 1 and a colon not a semicolon but a column keep this thing in mind guys and below that we are going to write what we want when the value is 1 like what the output we want when the value is 1 so we have to write document dot right and whatever you want as the output like for one the first month is January so we are writing here January and a semicolon so if the value of the month is 1 you will get the output as January save it and here you can see the output is January let me increase the font size for this as well so here you can see the output is January right next we'll use a break statement if you guys remember we discussed the break statement in the control statements video right the break statement is not actually a type of control statement but it assists other control statements or we can say it helps us manage the control statements right what this statement does is once we are done with the output we get our output right once we are done with case 1 we get our output as January this break statement helps us to come out of the switch case so to understand this much better let's write here one more case so let's say we are writing here one more case as case two and the output will be document dot right the second month is February right and February we can write so we'll include one break here like will come in the first case and include a break statement so here's how you can write a break statement how you can include a break statement in your code so let's check the output now so for now it says January so if we don't include this break statement here when The Interpreter will execute this code and it will see that the case is 1 right so it will print January but it will print other statements as well so for example if we remove this break statement and save it now see you can see here the output as January and February January and February both are getting printed on the output so we need a break statement to break it here see the value is 1 and if we include break statement here the moment The Interpreter finds the answer the correct answer as January it will come out of the switch keys so I hope you guys are getting this similarly we'll write all the cases for all the months let me show you all the cases so here you can see on your screen that we have 12 different cases from 1 to 12 one for each month depending on the value the variable month is holding right the output will be June if the value is 6 and if we say 10 the output will be October and so on and so forth now the question here is what if we try to write a random value for the variable month by random value we mean that if we try to write any value other than these 12 values from 1 to 12 if if we leave these values then if we try to write another value like if we write here 13. so what will be the output now let's save it and see there is no output and there might be no error for this as well so if you try to check for an error go to inspect and check out see there's no error right so in that case we have one more case like we have default case so let me show you how to include default in your program what you have to do is write here default with a colon and right document dot right and let's suppose we are writing here wrong input what is happening is let's try to run this program First Press Ctrl s and now you can see it says raw input for value 13. so what is happening is the switch case will first check these 12 cases and any value other than 1 to 12 will get the output as wrong input it works the same as the else statement right analysis statement we don't need to specify any particular condition any condition other than the if condition or else if condition will fall inside the else statement it's not necessary to add default in your program it's just if you want to give the user a prompt that he has entered a wrong value so you must include this default case in your program every time by using switch case because it's quite useful you know okay so this is the complete program to find out the month by accepting its number so if you try six and save it now it will say June if you try 10 save it it will say October if we try 12 save it it will say December so I hope this is clear to you guys next up let's discuss about switch case in detail because the switch case in JavaScript Works differently from other languages like switch cases also present in C plus plus and Java but in JavaScript it is a bit different so in JavaScript switch case can accept numbers it can accept strings and Boolean values as well now let's have a look at how the switch case works with string values so here is an example of string values you can see the value variable month is holding is June right and you can see use this string in case as well so here you have to give the case as a string value right because we are using switch case statement with strings so the first case here is when the value will be June the output should be sixth month and when the value is July the output will be 7th month so let's check it out if this is working or not let's save this program and see for June it says sixth month and similarly we can check it for July as well let's check for July save it and see it says seventh month you can include the default case as well if you want to it will be similar like there's no difference for default case let me show you how will write here wrong input save it and now let's try to change the value here let's say we are using May save it and see it says wrong input what if we use a numerical value here let's try to use two save it now it says wrong input for 2 as well it will give you the output when the value is either June or July so any other value you try to use here it will give the output as wrong input in the same way it works for Boolean values as well let me show you how it works for Boolean values so what you have to do instead of 2 you have to give here a Boolean value let's suppose you are writing here true and for true you have to change the case as well for true you have to change the output as let's say for true it the output will be 1. okay and similarly for false the output should be zero and the output should be wrong input for any other case right so save it now and see here for true it says one the output you can see here is one and if you try to do the same for false like let's write here false and now try to check the output see here it says 0. you can see the output is correct right we will discuss uh our first iterative control statement that is the for Loop in JavaScript so iterative statements or looping statements we can say are used when we want to perform an activity multiple times or n number of times so we don't have to copy paste that code every time but we can use iterative statements using iterative statements will make a code clean and definitely more efficient so we have four different types of iterative control statements right we discussed it in the previous video let's move on to for Loop which is the first iterative control statement and we'll move on to the programming part directly so before we start one thing to keep in mind guys is that we use for Loop when we are clear with the number of iterations in advance so let's start with the first program in this program we will print the multiplication table of 10 from 10 into 1 to 10 into 10. let's start with coding first we write the four keyword and then we have three different parts we have the initialization which is separated by a semicolon next up we have the condition and finally we have the increment or decrement so this is the Syntax for for Loop next up we have the open and the closed curly braces for the body of for Loop we'll change these three values as these are not the actual values right or parameters for these three different parts of the loop are going to be different so let me comment this one so we'll what we'll do we'll leave it here only we'll change it from here so in the initialization part what we are going to do is we'll create a variable let's say we are creating a variable where a and the value of and the initial value of a will be 1. this initialization happens only one time when the for Loop begins we have to be careful about the condition we are going to use because sometimes what happens is the loop runs forever because of a wrong condition which will ultimately crash our program so in the condition what we have to do is we have to give a value as in for how long a for Loop should execute here in this case we want to print the table of 10 right we want to have 10 iterations so what it will do it will start from a equals to n and it will go till this final condition so let's suppose we are writing here a less than equals to 10. it will start from a equals to 1 and it will go till a less than or equals to 10. and next up we'll use the increment operator we want to increment the value of a by 1 every time right so we'll use increment operator a plus plus or we can say a equals to A plus 1 both are the same things right so here the condition will be like this for variable a equals to 1 a less than equals to 10 and a plus plus so here you can see the loop will execute from a equals to 1 till a equals to 10 and the value will will be increased by 1 every time because we have used the increment operator right next up the body of for Loop will go like so what we want to print here we want to print the table of 10 right so we'll use document dot right and inside document.right we'll use the H1 tag so what we want to do is we want to print the table of 10 right so we'll multiply 10 by a for every iteration the value of a will be multiplied by 10 and then it will be printed on the browser so we'll close the H1 tag here in the semicolon so here you can see we have printed 10 into a let's save it and check the output first and then we'll look at the execution flow of this program see here the multiplication table of 10 is printed on the browser you can see 10 20 30 40 so on and so forth till 100. so what is happening is firstly the for Loop is also known as the entry control Loop it means that the condition is checked initially the first time the for Loop runs we perform initialization only once so here the values stored at variable a is 1. initially the value is 1 next up it will check for a less than equals to 10 is a which is 1 is 1 less than equals to 10 then true the control will be shifted to document dot right and it will print 10 into the value of a is 1 right so it will print 10 here next thing it will go for the increment and the value of a will be changed to 2 from 1 1 plus 1 or we can say 1 equals to 1 plus 1 right so it will be 2. now next thing it will leave this now because the initialization happens only once now it will go for the condition directly now it will check for is 2 less than or equals to 10 if yes then again the control will be shifted here and it will print 10 into 2 because the value of a is 2 now and after that it it will print 20 here and after that the value of a will be increased to 3 because we have used a plus plus then it will check for 3 is 3 less than 10 and same thing will happen it will print 30 and so on and so forth till the value of a is 10. now if the value of a is 10 it will print 100 right and when the value is incremented it will become 11. so what will happen now it will check for 11 less than equals to 10. no we know that 11 is not less than equal to 10 right then it comes out of the loop and it will print nothing after that so this is the basic working of the for Loop we'll go through one more program wherein we'll print the odd numbers between 1 and 10. so what are odd numbers odd numbers are those numbers which are not divisible by two right so we have the odd numbers as one three five seven nine and we want to print them so the difference between each number is of two the one plus two plus two plus two till nine right so what we have to do is we have to write here a plus equals to 2 we have to increase the value of a by 2. and instead of writing here 10 into a because this time we don't want to print any multiplication table we want to print a number only right so we'll use a only save it and check the output it says 13579 so these are the odd numbers present between 1 and 10. keep one thing in mind that you have to give the condition wisely every time so next up we have the while loop like the for Loop while loop is also an entry control Loop which means that the condition will be checked first so the question here is how while loop is different from the for Loop if you guys remember when we discussed that we must know the exact number of iterations then only we can use the for Loop right so the while loop is preferred when we are not aware of the number of iterations or we can say we don't know if the condition will be true for a certain number of times we'll start with the programming part now and then we will discuss more about when to use while loop over for Loop so let's start with the program in this particular program we will print odd numbers up to a specific number let's say we want to print all the odd numbers up to 50. so we want to print all the odd numbers from 1 till 50 right we came across the same program in the previous video as well but this time we will use the while loop instead of for Loop so the Syntax for the while loop is relatively easy to use the code goes like we start with the while keyword then opening and closing round round brackets and finally the body of while loop in curly braces if you guys remember from the previous video wherein we use the for Loop we had three different parts right we had the initialization we had conditions and the increment decrement part here we have only one condition and until this condition holds true the while loop will be executed for example here we want to print all the odd numbers from 1 to 50 right so we'll first initialize a variable let's initialize a variable first let's say we have a variable X and the value of x will be 1. we used a 1 because 1 is the very first odd number right after that inside the condition what we want to do is we want to print the odd numbers up to 50. so while the condition will be like while X less than equals to 50. so the loop will go till X is less than or equals to 50. or we can say x less than 15 that depends on us if we want to check for 50 or not so the odd numbers will go like 1 and then we have 3 then we have 5 then we have 7 and up to 50. so the last odd number will be 49 so inside the while loop we will print the value of x so here we will print the value of x let's print it document dot right and inside this we will print the value of x inside the H1 tag suppose we try to run this program now it will go on an infinite Loop and the reason for this is we are not doing anything to increment the value of x just like in for Loop if you remember we had the initialization first we had the initialization here as well then we had the condition we have a condition here as well and then finally it has an increment or decrement part right so here we don't have that same increment or decrement part we have to do it separately so we'll increment the value of x here only so here we will write X plus equals to 2 or we can say it is same as x equals to X plus 2 you guys are aware of it right so the reason is simple because we want to go from 1 to 3 to 5 and so on that's why we use X plus equals to 2. we incremented the value of x by 2. save it here and let's check the output so here you can see it says one three five seven nine and so on and so forth till 49 so 49 is the last odd number before 50 because we are checking between 1 and 50 right so 49 is the last odd number let me show you how the program goes into an infinite Loop so for that what we have to do we will comment this whole line here let's check the output now save it and here you can see it is refreshing forever and this is basically how a program in an infinite Loop looks like the output of this program is the program will ultimately crash so what we have to do we have to open a new tab and then again we have to run the program with correct increment part so here you can see you can wait for it to become responsive or exit the page so here you can see we have all the odd numbers from 1 up to 50 and the last one is 49. coming back to the difference between the while loop and the for Loop we did the same program previously right using the for Loop so where to use while loop over for Loop so consider a scenario where we are taking input from the user and the input from the user is y we want to do something let's say we want to print something on the screen or if the input from the user is n we want the process to be stopped we can give the condition in the while loop which will go like when the character y becomes n the process will be stopped we'll go through one such program once we are done with the Dom manipulation part wherein we take the input from the user let's move on to the do while loop in JavaScript in the previous videos we have already discussed that both for Loop and the while loop are entry control Loop that means the conditions are checked first right but the do while loop is a bit different or we can say it is an exit control Loop wherein the condition is checked after the execution of the loops body thus an exit control loop executes at least once even if the test condition fails or we can say the condition is wrong the loop will execute once using the Dubai Loop is relatively easy it seems like we are giving the system a command to do something while the condition is something so let's start with the syntax now the syntax goes like this we write the keyword do and we have a pair of curly braces for the body of the loop and after that we have the while keyword and here we'll write the condition make sure you are using the semicolon after the while loop it's necessary while using do while loop keep this thing in mind so we have two parts in the do while loop the do part and the while part or we can say the condition part while part is the part where we write the condition so let's Define a variable first let's say we are using a variable we are using a variable X and the value of x will be 5. so here we have taken 5 as a random value you can take 1 as well now inside the condition part of the do while loop this is the condition part where we are using the while keyword so we'll give a condition let's say we are using while X greater than 5 it will check for the condition that if the value of x is greater than 5. or if the value of x is smaller than or equal to 5 it will come out of the loop in the do part we will write what we want to do let's say we want to print a single sentence here we write document.write and whatever sentence we want to write let's say we are using welcome to simply code so here you might be thinking that the condition is false but the condition will be checked after the first iteration in the do while loop so no matter what the condition is the first iteration will happen always so if we try to save this program and let's try to run this here you can see the output is welcome to Simply code a single line is printed what is happening here is although the condition we used was wrong but the condition will be checked only after the first iteration when the Dual Loop will perform this particular statement when the document.write will be performed after that it will check for the condition if x is greater than 5 or not if we use a 6 instead of 5. let's try to write here 6 instead of 5 and if we run this program now it will go into an infinite Loop because we are not performing the increment decrement operator here right as we have discussed in the previous videos the importance of increment decrement part so we need to do it here after the document.write part so what we'll do here we'll write x minus minus today we are using x minus minus and for the other two Loops we use the plus increment operator right so the x minus minus is the same as x equals to x minus 1. let's check the output now save it here you can see the output is still welcome to Simply code the execution flow of this program will be like it will first perform the iteration before checking the condition and it will print here welcome to Simply code for the first time when the loop will start executing it will first perform this statement and it will write here welcome to Simply code so then it will perform x minus minus means the value of x is now 5 because we are decrementing the value by 1. so when the value of x is 5 then it will check for the condition if x is greater than 5 or not so here we can see clearly X is not greater than 5 because x equals to 5 and it is equals to 5 right so it will come out of the loop let's make few changes in the code here suppose we use here 10 instead of 6 now and let's print the value of x as well it will be easy for you to understand so we'll print here x and we'll use a space so that it will be clear for you we'll use here the BR tag and now let's try to run this program here you can see the output goes from 10 to 6 and it prints welcome to Simply code every time right if you guys are wondering where we use the do while loop sometimes it may happen that even though the condition is false but we have to execute that command we use the do I Loop when we want the code to Output some sort of menu to the user or to generate the menu at least once we'll get to know about the do while loop in future videos when we create a program specifically for the Dual Loop this video is just a syntax demonstration we'll go through the examples of all the three Loops present in JavaScript so today we have three different problems for three separate Loops right we'll go through each of the problems and we'll discuss the execution flow for each Loop we'll go through so let's start this session with the first problem statement so the first problem statement goes like this so here we have to write a program to check whether a number is prime or not I hope you guys are aware of what prime numbers are right so a prime number is a positive number that is only divisible by 1 and itself for example 2 3 5 and we have 7 and 11 these are the first few prime numbers right if we take an example let's say we are taking an example of 7 so 7 is a number which is divisible by 1 and 7 only no other number can divide 7 right so here in this code we have to check whether up number is prime or not so let me take you through the code so here is the code to check whether a number is a prime number or not let me take you through this first so we have a variable number and the value of variable number can be any random value like any number you want to check if the number is prime number or not you can give that value to the variable number so here we have taken 83 next up we have a variable is prime whose value is a Boolean value right it can be true for a prime number or it can be false for a non-prime number so we have used comments in this program to make it easier for you guys to understand so here we have used the if statement to check if the number is 1 because we know that 1 is neither a prime number nor a composite number right so we have to check if the user enters the value one or if we are giving the value 1 we have to check for it so if user enters the value 1 it will print this statement that 1 is neither prime nor composite here in elseif we are checking if the value of number is greater than 1 or not so if the value of number is greater than 1 the control will be shifted to for Loop present inside the elsif statement right here you can see we have the for Loop here the control will be shifted to this for Loop so here you can see we have initialized the variable I and the initial value is set to 2 that's because any prime number is divisible by 1 as well right so it won't make any sense to include one here will start from 2 and we'll check until the value of I becomes half of the value of number so if we take an example of 10 we'll check until 5 because you know any number greater than 5 won't divide 10 right it's practically not possible so we'll check for number by 2 or we can say we'll check till 5 only and the value will be increased by 1 every time till now I hope you guys are aware of how to use for Loop and why we are using for Loop here we can do the same program using while loop as well but to make it more clear how to use for Loop we are doing this program with the help of for Loop so then we have the I plus plus or we can say we have increased the value of I by 1 after every iteration until the value of I becomes half of the number so the condition number percent I equals to equals to zero so here is the main condition to check if the number is divisible by I or not so the execution will be like if we are taking here a number 10 it will start from 2 and it will check if the remainder is 0 or not so if the remainder is 0 then the value of is prime will be changed to false and it will come out of the loop next it will check for the value of is prime if the value of S Prime is true or not here you can see if the value of S Prime is true then it will print n or we can say then it will print that the number is a prime number else it will print that the number is not a prime number if the value of is prime is false for example when we took the example of number as 10 so the value of S Prime will be changed to false because you know 10 divides by 2 is equals to 0 or we can say the remainder will be 0 so the value of S Prime will be changed to false and for false it will print number is not a prime number so at last we will check if the number is less than one if the number entered by the user or any other number we have taken like if we take here minus 5. so it will print the number is not a prime number Because by the usual definition of prime numbers any negative number cannot be a prime number that's a usual definition right so we have to keep this thing in mind and here in this else Loop we'll print that if any negative number is entered we'll make sure that the program gives the output that the number is not a prime number so let's try to run this program and check the output let's save this program and the output says 83 is a prime number as 83 is not divisible by any number except 1 and 83. for example if we take here any number which is divisible by so let's say we are taking 75 save it now and see it says 75 is not a prime number okay here's a spelling mistake it says 75 is a not prime number so here we'll correct this is so we are done with it and save it now now it says 75 is not a prime number s75 is divisible by numbers other than one end itself right it is divisible by 3 it is divisible by 5 15 and 25 as well all these numbers divide 75 basically so let's take a different value here let's say we are taking minus 7. let's change the value here as or we can take it as minus 75 let's save it now so it says the number is not a prime number or if we want to try for one as well let's take it as 1 and let's check the output now so it says one is neither prime nor composite number because we have given here the condition if number is equals to is equals to 1 then it will print that one is neither a prime nor a composite number you can try this program with the help of other Loops as well so let's move on to the second problem statement but before that let me take you through the same program using the while loop so here you can see we have used the file Loop for the same instead of for Loop here you can see we have used while I less than a number by 2 and we have given the increment condition here and we have initialized the value of I at the start of the program so if we try to run this program it will give us the same output there will be no change in the output so we can use while loop as well so we'll use the while loop in other program let's move on to the second problem statement so in this example we'll learn to write a program in JavaScript to check whether a number is an Armstrong number or not so we'll do this with the help of while loop let's have a look at how to implement this program before proceeding to the coding part let's have a look at what is an Armstrong number so an Armstrong number of three digits is in integer such that the sum of the cubes of its digits is equal to the number itself so for example 153 is in Armstrong number since 1 into 1 into 1 it means the cube of the digit 1 plus the cube of 5 that is 5 into 5 into 5 which is equal to 125 and the cube of 3 which is three threes are Nine and Nine threes are 27 so it will go like 125 plus 27 plus 1 so which is equal to 153 so an Armstrong number of three digits is an integer such that the sum of the cubes of its digits is equal to the number itself so here we have the code for the same this is the code to check whether the number is an Armstrong number or not so here we have taken a variable and the value is 153 the value of the variable number is 153 right because we already know that 153 is an Armstrong number there are few more numbers like 3 7 1 is also an Armstrong number next up we have taken a variable sum and the initial value of sum is 0. we have used the variable sum to store the value of the cubes and next up we have a temporary variable so that we can break a three digit number and we need the number after all this all this program all these loops and all will need the number we'll need the original number to compare it with the sum of the cubes which will be hold in sum so but we need to break the number as well right so we need a temporary variable to break it here we use the while loop and the loop will run until the value of variable temp is greater than 0. so the initial value of temp will be 153 here in this particular case the initial value will be 153 and the loop will run until the value of 153 is greater than 0. next up we have a variable remainder that stores the last digits value as we are dividing 153 by 10. so the reminder here will be 3 so the value save that variable remainder will be 3 for the first time then what will happen when we are updating the value of sum and the MU value of sum will be 0 plus 3 into 3 into 3 so 3 3's are Nine and Nine threes are 27 so the updated value of sum will be 27 next up we are removing the last digit from the number so for example we have here one five three and if we divide 1 5 3 by 10 the answer will be 1 5.3 that's why we are using here percent because what percent will do it will convert the float value into an integer so if we try to perform a simple divide in JavaScript like if we try to divide 153 by 10 it will give us 15.3 it will give us a float value but we want an integer value right so percent will change this value to the nearest integer so 1 5.3 the nearest integer will be 1 5 so the new value of temp will be one five then again this Loop will be executed and for this time the variable reminder will hold the value of 15 modulus 10 and the remainder will be 5 right so the new value of remainder is 5 and the value of sum is 27 plus 5 into 5 into 5 which is 27 plus 125 right so the new value of sum will be 152. and then again it will go to the temp and it will divide 15 by 10 and it will change the value to an integer so 1.5 will be changed to 1 and next up the final value of temp is 1 which is greater than 0 right so it will divide 10 by 1 and the reminder will be 1. so next up it will add 152 plus 1 into 1 into 1 that is 153 right and then it will divide 1 by 10 using the percent but this time the value will be 0 because there is no remainder right next up we'll compare the value of the sum and the number variable so the sum variable here it is holding the value as 153. we break this number into three different parts then we took the cube of these three number and added them so the final value of the variable sum is 153 and the initial value of number or we can say the value we gave to the variable number is 153 so right it will print here that 153 is an Armstrong number or if we use any other number instead of 153 let's suppose we are using 121 so it will print 121 is not an Armstrong number let's check out the output ones let's save it and see the output a is one five three is an Armstrong number so if we change the value of 1532 one two one so let's check the output now it says one two one is not an Armstrong number why because if we take the cube of each of the digit and we'll add them suppose the answer here will be 10 because the cube of 1 is 1 and the cube of 2 is 8 and the cube of the final one is 1 so 8 plus 1 plus 1 is equals to 10. so that's why one two one is not an arm strong number let's move on to our last problem statement where we'll use the do I Loop to find the factorial of a number so here is the problem statement where we'll have to write a program to find the factorial of a number so factorial of an integer is the product of an integer and all the integers below it or we can say before it till 1 so if we take an example of 5. so the factorial of 5 will be it will multiply each number before it if we take 5 the factorial will be 5 into 4 into 3 into 2 into 1. or if we don't include one that's totally fine so this program is pretty simple as compared to the previous two video so this is a small one too let me take you through this so here we have the program and here we have three variables right we have a variable I which is initialized as one then we have a variable n which is 5 and then we have a variable F whose value is 1 F is for factorial and n is for number we want to check the factorial of and I is for checking the condition so here what we will do we'll use a loop where if we for example if we are taking 5 then the loop will go from 1 into 2 into 3 into 4 into 5 from 1 to that number it's not like if we are using from 5 towards one but we are going from 1 towards five the answer will be same right because we are multiplying all the numbers in both the cases so here we took 5 as the number next up we have a variable F and the value of f is also one as you know so here we are using the do while loop for the first iteration it will perform this so the value of f for the first iteration will be f equals to F into I which means f equals to 1 into 1 which is one so the value of I will be increased and it will become 2 and now it will check for while 2 is less than equals to n yes 2 is less than n so it will again go up and it will update the value of F and the new value of of f will be 1 into 2 that is 2 then again the value will be increased and it will become 3 and then it will change the value of f as well if it will become 6 and the value of I will become 4 then it will check if 4 is less than 5 yes 4 is less than 5 and then it will multiply 4 with 6 because the value of f for 6 right so 4 into 6 it will become 24 and then finally the value of I will be 5 and it will check if the value of I is less than or equals to 5 right while I is less than equals to 5 yes that's true because now 5 is equals to 5 and it will again execute the loop and the value of f will be 24 into 5 which is 120 and then again the value of I will be increased now it will become 6 which is greater than 5 so it will come out of the loop and it will print the factorial of a number so let's save this program so the factorial of 5 is 120. because see here we have used the factorial of n n is 5 and the factorial is 120 so if we try to give any other number here other than 5 let's say we are using here 10 save it it says the factorial is three six two double eight double zero or it's 36 lakh 28 800 so if you try to multiply 10 into 9 into 8 into 7 so until 2 or we can say 1 the answer will be this you can check it you can Google it or you can go through it in your calculator for today's session the topic of discussion is how to become a back-end developer so if you're wondering how to become a backend developer what skills are required and what the responsibilities are then you're in the right place but let's wait for a while for more people to tune in I'd also like to thank all our viewers for actively participating in these sessions all right so uh whilst you're at it if you haven't subscribed to our Channel already make sure to hit the Subscribe button and the bell icon to never miss an update okay so I see a lot of people tuning in all right so I think we're good to begin now I'm sure all of you use social media applications now every time you click on a video scroll through a feed perhaps search for something the corresponding information is displayed on your screen now these applications provide an excellent user experience but how is this achieved you must know that every application comprises of two parts does the front end and then there's the back end the front end is what the user deals with and the back end is what makes this happen in other words the back end includes an application a server and a database the backend application fetches the data from the database and processes all client requests the result of this is made visible to the user so now the question arises who is a back-end developer a back-end developer's role is to focus on details like building an effective website architecture scripting and writing code that serves as a means of communication between the website's database and the browser and lastly to ensure data integrity and consistency so now let's look at the skills required to become a pack-in developer me it is vital for you to have good understanding of programming Concepts like data structures and algorithms this includes Stacks cues linked lists trees and graphs sorting algorithms and search algorithms next up is programming languages and Frameworks one of the most critical skills of a back-end developer is a depth of knowledge in back-end programming languages this includes Proficiency in JavaScript and its environments like node.js and express.js next is Java this language was particularly built from the ground up to be run on server side popular Frameworks include spring and Java server faces next up is python which is the most popularly used language today it is flexible and easy to use Python Frameworks like Django and floss are used for back-end development and lastly there's C sharp and its Frameworks like asp.net core and asp.net MVC other languages include Pearl PHP and Ruby now because back-end and front-end developers work so closely together it is also helpful to have a foundational understanding of front-end web languages like HTML and CSS now proficiency is essentially not only for performing daily tasks but also for working alongside front-end Developers for developing Solutions next we have database Management Systems a back-end developer writes code that is used to perform relational mapping to fetch data from the database some popularly used dbms or MySQL SQL server and postgresql next up is Version Control again popular ones are git and subversion they help manage the project files and keep track of the entire history of things that the developer is working on and lastly This Cloud hosting platforms these platforms allow you to deploy your product on the cloud service provider so that it can be accessed from the World Wide Web most popular ones are Amazon web services Google Cloud platform Heroku and Microsoft azure of course there are non-technical skills that are required of backend Developers those who choose this profession should be comfortable with analytical processes have well-developed problem solving capabilities be interested in emerging technologies have good communication skills and be able to work independently and sometimes as a part of a collaborative team now that you're familiar with the skills let's have a look at the responsibilities of a back-end developer first up is forming an understanding of the performance needs and goals of the website to develop effective successful Solutions development and management of application programming interfaces development of systems for websites to accept and securely store data such as those required for payment processing systems then there's writing code testing and development solutions for correlated issues then this organization of system logic other responsibilities also include development of site architecture using proper methodologies like agile scrum framework and also providing solutions to system problems lastly let's have a look at the salaries of a back-end developer the average salary of a back-end developer in the United States is around 102 000 US dollars per year the average salary of a back-end developer in India is around 7 lakhs 23 000 Indian rupees per annum in this session we're gonna cover the topic of what is angular sure all of you use mobile and web applications from social media to healthcare e-commerce and net banking these apps are used by billions of people across the course so the main reason we use these apps is that they offer seamless user experience and interface with how they developed to provide such reliability one of the Frameworks that is widely used to build such robust apps is angular so let's dive into the session now so here is a list of topics that we're going to be covering first up we'll see why angular was introduced then what is angular features of angular angular architecture advantages and limitations of angular the learning curve of angular and finally we look at some of the companies that deploy angular so without further delay let's begin why angular now JavaScript is the most commonly used client-side scripting language it is written in two HTML documents enabling interactions with web pages in many unique ways so as a relatively easy to learn language with almost pervasive support it is exceptionally well suited to develop modern applications but the question arises is Javascript ideal for developing single page applications that require modularity testability and other features perhaps not however we have a variety of Frameworks and libraries designed to help us with such thing with respect to front-end development angular and JavaScript together bring in structure and consistency to your web applications and also provide scalability and maintainability and angular is specifically developed for single page applications so now the question arises what exactly is angular angle angular is an old JavaScript framework written completely in typescript now it was primarily aimed to develop single page applications and is maintained by Google angular as a framework provides a few advantages while also providing a standard structure for Developers designed for web desktop and mobile platforms if you have a doubt here as to what exactly single page applications are let me help you with that now these single page applications are basically applications that get loaded just once so the main page gets loaded onto your browser so any further interactions does not lead to loading of subsequent Pages anything that has to be done further is just an addition to the already loaded page so these single page applications are primarily developed using angular moving ahead let's look at the features of angular we have four features that we're going to be discussing we have the document object model type script data binding and testing now let's look at them one by one now the document object model treats an XML or an HTML document as a tree structure now here every node in the tree structure defines an object representing a part of your document angular uses the regular Dom now let's suppose you've made 10 updates on a single HTML page so every time you make a change the corresponding Dom or the tree structure needs to be updated angular a lot of this entire tree structure of HTML tags moving on to our next feature we have typescript now typescript defines a set of types to JavaScript which helps you write JavaScript that is easier to understand now all the typescript code compiles down to basic JavaScript that can run smoothly on any platform now typescript is a mandatory for developing an angular application but it is highly recommended the main reason is highly recommended is that it offers better syntactic structure while making the code base easier to understand and maintain now typescript can be installed as an npm package now to do that you just have to run the command npm install hyphen G type script on your command prompt next up is data binding data binding is a process that allows you to manipulate web page elements using the web browser now it mainly employs Dynamic HTML and does not require complex scripting or programming it is used in web pages that include interactive components like calculators tutorials Games Etc now incremental display of a web page makes data binding extremely convenient when Pages contain a large amount of data when it comes to angular it uses two-way data binding so any changes made in the UI element is reflected in the corresponding model state and conversely any changes made in the model state are reflected onto the UI State this allows the framework to connect a Tom to the model data via the controller the last feature we're discussing is testing angular uses Jasmine to run its various tests the Jasmine framework allows various functionalities to write different kinds of test cases karma is a task runner for the tests that use a configuration file to set the startup reporters and testing framework so with that we've covered the features of angular so let's go ahead and understand the architecture of angular angular is a full-fledged MVC framework it provides a strong opinion on how the application should be structured and offers bi-directional data flow and updates the real Dom MEC short for model view controller is an architectural pattern that separates the application layer into model view and controller the model here relates to all the data related logic view on the other hand is used for UI logic of the application and controller is the brain of the setup now it is an interface between the model and view moving on let's look at the advantages of angular first up we have custom components angular allows you to build functionality along with rendering logic into reusable pieces data binding as discussed angular allows you to effortlessly move your data from your JavaScript code to the view and react to user events without having to write any code yourself dependency injection angular allows you to write modular services and have them injected wherever they are needed this greatly improves the testability and reusability of the same don't worry if you can't wrap your head around these topics we're going to discuss them further in the coming videos next Advantage is testing angular has been built from the ground up with testability in mind you can literally test every part of your application comprehensive angular is a full-fledged framework and provides out of the box solutions for Server communication routing and mocking lastly we have excellent browser compatibility angular is cross-platform and browser compatible an angular application can typically run on all browsers with chrome Firefox Safari and platforms like Windows Mac OS and Linux now many versions of angular have been released ever since its Inception all of these versions have added to the efficient working of the framework now here are two different versions released first up was angular 1. it was built on JavaScript and completely based on controllers next release was angular 2. now this Incorporated the component based approach wherein the entire UI was divided into several components and lastly integrated to give the final logic next was angular 4 it included route adaptation of angular CLI or command line interface 1.0 was introduced however not deployed in this release the angular CLI was optimized and commands like NG update and NG add were added the angular 7 release prompts were introduced which provided tips in CLI about the functions being used in angular 8 IV renderer and bazel were introduced and finally the most recent release was angular 9. now this came with the better framework and angular material now this completely switched to the IV renderer as a default compiler now that we've learned about the pros of using angular let's look at some of the limitations of angular first up is a steep learning curve now since angular is a complete full-fledged framework it becomes difficult for Learners to begin with you need to be acquainted with simple topics and then move on to more advanced topics to become proficient in this language next up is limited SEO auctions now angular offers limited SEO options and poor accessibility to search engine Crawlers if you were both and complex have a common issue faced by the angular Community is the verbosity of the framework it also poses to be complex compared to other front-end tools and lastly migration now one of the drawbacks of angular is poor migration now it becomes difficult Legacy code to angular style architecture also with each new release it is painful to upgrade and a lot of them are not Backward Compatible next up let's look at the angular learning curve now if you wish to learn angular you need to be acquainted with basic topics in angular some of them are directives modules decorators components Services dependency injection pipes and templates now once you've mastered your Basics you will want to go and understand more advanced topics such as change detection zones aot compilation and rx.js however the learning curve of angular is clear-cut in the beginning it could be a little intimidating but once you start using the tool becomes way more easier to comprehend and understand what is going on and lastly let's look at some of the companies that use angular today many top tier companies like Nike Forbes Google HBO Sony upwork among others readily deploy angular so moving on let's look at the prerequisites for angular first up we have node.js angular uses node.js as its base for a large part of its build environment so as a result to get started with angular you will need to have node.js installed on your environment so head to their official website and download the latest release for your corresponding operating system next up is the angular CLI now this command line interface is a tool that makes it easier to bootstrap and develop your angular applications now to install the latest version run the command npm install hyphen G at angular front slash CLI we gotta run this command on your command prompt and finally to confirm installation check for its version now the next thing that you will need is an IDE or a text editor to type your code now there are several Ides that you can choose from but in this series we've used vs code throughout so it is available on all platforms so go ahead and download it if you haven't already now moving on to the final part is the demo now that you have a basic understanding of angular and its prerequisites I think you're ready to create your first angular application so let's head to our vs code and begin here I've created a folder called angular on my desktop and opened it on my visual studio code so to create your app you need to open the terminal just go here and select new terminal and now type in the command Ng new and provide the name for your app so I'm just gonna say hello world so now this is going to create if you see yes so basically what happens is that when you run the command it will automatically generate a skeleton application under the folder that is Hello World in our case and it includes a bunch of files and installs all the necessary dependencies for the angular application so this could take a while so once you've created your application to run it first change the directory so let's say CD hello world and now use the command NG so now once it's compiled you need to go to your browser and type in localhost 4200 and once you do that you can see your UI you can see that the application has been loaded onto your browser and it says hello world app is running so this is how you create your application so let's go back to our vs code now as you can see here there are many files and folders that are created right so let's look at a few of them of course we can't explain everything but I'll brush through a few of them so the first mean component is basically the root component now the root component here is the index.html so here if you open the file and see it's a very small crisp code right but the most important thing in the file is this app Root element so what this does is it's basically the marker for loading your application code so this is extremely important so the next important file is the main.ts now this is a part of the bootstrapping piece all right so the index.html file is responsible for deciding which files are to be loaded correct the main.ts file on the other hand identifies which angular module is to be loaded when the application starts so this is just a brief explanation as to what they are doing next we have the app folder now here we have the app dot module.ts file now this application module file can be thought of as a core configuration of your application so here's where the source code starts from and moving on we have the app.component.ts these are all typescript files hence the extension TS now this file basically is the root component of your application and then we have the HTML file for the same which defines the appearance of what you can see on your browser so let me just change the message that is being displayed so I'll say hey welcome to this angular tutorial so let's save this and when we go back to our browser we can see the message hey welcome to this angular tutorial being displayed so like this we can make a simple change and then it gets rendered onto your browser so this was just a brief explanation of what happens in the background of your application first we'll get acquainted to what exactly angular components are then I'll help you create an angular component by showing a quick demo and lastly we'll learn about component decorator metadata but before we begin make sure to subscribe to our Channel if you love watching new and interesting technology videos also hit the Bell icon to never miss an update so what exactly are angular components now I'm sure everybody uses web applications and one of the most widely used applications is Gmail correct now to help you understand what components are consider them as Lego blocks now they basically are combined together to form the final application so in this case here we have the logo component then you have a sign in component an image component and then a create account component now all of these components generally don't affect the working of each other but however when embedded they Define the UI of your application so I hope you understood what components are so to go ahead let's discuss some of its common features now firstly they are the building blocks of an application generally you have a root component which is basically the app component and then it branches out into other components creating a hierarchy and these components are a subset of directives now don't worry about what deductives are because we'll cover them later on in the series but to give you an idea there are three types of directives you have the structural directives the attribute directives and the component directors only one component can be instantiated per element in a template now components are typically custom HTML elements and each of these elements can instantiate only one component now don't worry you'll understand this better when I show you the demo nextly a typescript class is used to create a component now this class is then decorated with the at component decorator Now The Decorator accepts a metadata object that gives information about the component now a component must belong to the NG module in order for it to be usable by another component or application and finally components control their runtime Behavior by implementing life cycle hooks so this was just a brief introduction to what amular components are now you will only be able to understand the working of components when I show it to you practically so let's head over to a Visual Studio code now here back in my vs code I've created a folder called angular demo within which I've created an angular application called demo components once executed the browser looks something like this so if you haven't watched our previous video on getting started with angular that is angular hello world I highly suggest you go through that video first it helps you create your first angular application so um now let's go ahead and create our first component now the command used to create our component is NG GC and your component name once executed it creates four different files now let's just see how this works on RVs code now what you can do is head to your terminal and type in the command Ng g c and provide a name for your component for example I'm gonna just call my component text component all right so what it does is that it creates four different files you can see you have four different files that have been created and finally it updates the file that is app.module.ts indicating that this new component has been created so here in your Source folder within which is an app folder and again here you can see that your four different files have been created first is the HTML file where you can Define all the code that you want for your component next you have the CSS file for your styling then you have the dot TS file which includes the component decorator and finally you have spec.ts which is basically a unit test file all right and then in your app.module.ts you can observe that the company that you've created that is text component has been imported that is what the message conveys here all right now let's go back to our app.component.html now this basically has all the corefair applications so let me just get rid of it and I'm just gonna display a basic heading saying hello welcome all right so let me save it and if you go ahead and look at your browser hello welcome messages displayed now let's go back to our component.html file and here let me provide a message [Music] let me say h 3 and let me display a message saying welcome to this tutorial on angular components all right now in your text component dot TS file which is your typescript file the selector mentioned here is app hyphen text component now go ahead and copy this and in your final component.html go ahead and create your custom HTML tag with the selector that you just copied now this indicates that the component that you just created that is the text component is being Incorporated in the final render so what happens is that whatever is defined in the component.html file is also being rendered in your final output so when I save this let's go ahead and check our browser you can see that the message welcome to this tutorial on angular components is displayed so this was a simple creation of a component now for this let's give it some styling so here go to your dot CSS file and provide some styling see for example here I just say text line and let me say Center and also in my app.companying.cs I'm going to give the same thing and see each one text align is Center all right so let me save this and there we go now we can also create multiple components and Define the tags in the app component now the components are executed sequentially so now let's create another component just to give you a brief insight into it let's say NG GC image component now here I'm going to be adding the simply learn logo so I'll show you how that works now you can see that a new component has been created with four files again so in my assets folder here I've added the logo so what I can do is back in my HTML file I can go ahead and create an image tag so first let me just display another message here just to avoid any confusion and let me say this is the image component [Music] and then let me say image Source equals so the source is basically assets [Music] slash logo dot PNG and class equals Center [Music] all right so you can also hit your CSS file and provide any sort of styling that you need so let me just say text align to be Center and then let's create a styling for the image and here I mentioned the code for the image so let's save this and from the dot CS file let's copy the selector and create a custom HTML tag in our final component.html file [Music] so there we go let's save this and check the output and there we go first the hello welcome message is displayed next you have the message displayed from the first component and then you have the second component so this is how you can create your own components and don't forget to incorporate these selectors into your final HTML file so moving on to our next topic component decorator metadata now as mentioned earlier the at component decorator accepts a metadata object that provides information about the component correct here is a list of properties of the metadata object first up is the selector now basically the selector is a CSS selector that identifies this particular component in a template now this corresponds to the HTML tag that is included in the parent component you can create your own HTML tag however the same has to be included in the parent component so to help you understand that better let's head back to our vs code and say for example in our text component here the selector says text component correct for the time being let's change it to say n component all right now when you save it and look at the browser the message is not displayed so what we can do is you can copy this selector and then include this here and now you can see that the same component has been rendered onto your output all right so the selector plays a crucial role in that next up we have the template now a template is an inline defined template for the view now the template can be used to provide some particular markup the markup could typically include some headings or paragraphs that are displayed on the UI next up we have template URL now it is the URL for the external file containing the template for The View so here you can see this is basically the external file that contains the template for the view next up you have Styles now these are also inline defined styles that can be applied to the components view so any code that you provide in the dot CSS file can also be included here next you have the style URLs now this is a list of URLs to your style sheets that are applied on your components View next up you have providers now this is again an array where certain Services can be registered for your component lastly we have animations as the name suggests these are animations that can be listed for your components first we'll understand what exactly dependency injection is then we'll understand the demerit or the drawback of not using dependency injection then we'll understand dependency injection as a design pattern and finally I'll help you understand the entire concept with the help of a demo so let's begin what exactly is dependency injection so let's consider this I'm sure you're aware that angular uses the concept of components the entire UI of the application is divided into several components now what have all of these components perform similar tasks be it accessing the database rendering images Etc now instead of writing the same piece of code for every component you could write the code once and then perhaps inject the same code into every component now this is supported by dependency injection now to give you a better example consider two classes A and B now let's assume that a uses the objects of Class B and normally in object oriented programming an instance of Class B is created so that a can access its objects with using dependency injection we move the creation and binding of dependent objects outside of the class that depend on them so dependency injection or di keeps the code more flexible testable and mutable also classes can inherit external logic without having to create on its own and lastly di benefits directives pipes and components next up let's have a look at the drawback of not using dependency injection now let's consider Class Postal details that is dependent on the number and the address class in the postal details class the Constructor creates copies of the number and address so when you instantiate a new postal details class the Constructor instantiates a unique number and address now although this looks simple there's a problem with this code let's assume that the number and address class Constructors now accept parameters when we change the numbers class the postal details class gets broken now to overcome this what we need to do is we need to pass parameter to the number Constructor so this applies to address as well the first drawback of using this traditional method is that the code is not very flexible anytime the dependencies change the postal details class needs to be changed as well and the second drawback is that the code is not suitable for testing once you instantiate the new postal details class you get the same number and address even if you change the number and address classes every time what if these classes are in turn dependent on other classes then it's going to be a chain reaction so to overcome this we make use of dependency injection now let's look at di as a pattern dependency injection as you all know is a coding pattern where a class receives its dependence he's from an external Source rather than creating them on its own so here in the above example we have moved the definition of dependencies from inside the Constructor to the constructor's parameters so the postal details class doesn't create the dependencies anymore it just consumes them so the postal dependencies class doesn't create the dependencies anymore so with that we overcome the drawbacks of not using Di so now that you know what exactly dependency injection is and how vital it is let's look at a simple demonstration to understand the concept better now services classes modules components all of these are benefactors of dependency injection so in the demo I'm going to be showing how dependency injection can be used with the help of services and injecting these Services into classes so the main thought behind this is normally components are used to ensure just a good user experience these components do not generally execute tasks so to execute these tasks we make use of services so a component can delegate tasks like fetching data from the server any network related issues ETC to a particular service and these Services can be made available to components now with the same thought what I'm going to be doing is I'll be creating a service that performs the task of displaying an employee list later we're going to inject the service into the class using dependency injection so let's head to our Visual Studio code for the demonstration all right so as discussed I'll have to first create a component that displays a button for the employee and then I have to create a service class and inject it into my component now this service holds the employee details such as name employee ID email ID Etc so first let's go ahead and create a component so here let me just type n g g c and the name of the component I'm providing is M info if getting your learning started is half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more so as you can you can print with four different files all right so the next thing we have to do is we have to create a service so to create that we make use of the command n g g s you can either give s or service and the service name I'm providing is records so let me just say records here all right here you can see two files are created there is a spect.ts file and the dot TS file all right so now the service contains all the employee data that needs to be displayed right so let's go ahead and write the data so first we're going to make use of three arrays I'm going to be displaying employee records for three employees so I'll have to create three arrays and provide certain information so let's go ahead and do that foreign creating is called info one for the first employee and I'm going to be passing information like name employee ID and the email ID so the arrays of type string and within which let me just mention the details I'm giving random information I'm just saying Adam Taylor and some random employee ID and let's say 80 at abc.net all right so I'm going to be creating three records so I'll just copy the same thing and paste for the rest too let's just change here provide a different name here and same for the last one and let me change the name of the array as well all right so with the agenda to retrieve this data in our component we make use of the method for the same right so this method Returns the employee data so let's go ahead and create this method I'm going to call it get info and then just say string and then this will just return this dot info one all right I'm going to be calling it get info one for better understanding same for the rest two as well I'm just gonna return different arrays here now that and lastly info three all right now in order to retrieve this information in our component we need three more arrays right three more arrays I will receive this data and let's go back to our component dot TS file here and then type in the following code so I've created three arrays again uh info received one two and three now what we need to do is we have to accept the information that is being sent from the service correct now as I mentioned services are implemented with the help of dependency injection so what we need to do is we'll have to first import the service into the component.ts file the key reason behind doing this is that when angular creates this component and instance of the service class is also made to perform the necessary tasks correct so let's go ahead and just import it here so I'll say import [Music] records services I'm sorry service from and let's say records.service all right and what we have to do next is that we must also declare this instance that is being created in the provider's area of the component all right so let's just say providers and then say records service all right now we've created the instance of this class right however to access this instance an object is also created so this object will in turn access the methods and variables of the service class so for that we have to create another object so let's do that here in our Constructor method let's say Constructor private foreign is called our service you can give a name of your choice and then I'm going to just say records service all right now this object will help me retrieve data from the service so let's go ahead and use this in order to get the employee details all right so I've created three different methods here get info from service class 2 1 and 3 and these methods will retrieve the data and add it to our array here that is info received all right and lastly we'll have to create an unordered list in our HTML file here we haven't added anything so let me get rid of this so now I have to create three different buttons for three different employees and when the user clicks on the button the data is retrieved from the service and then displayed on the UI right so as you can see I've created buttons for three different employees and then I've made use of a bootstrap class called list group info and then I've interpolated info which displays the contents of the info variable all right now in order to call the methods in the dot TS file we have to bind them with the button so since it is bound with the click event every time you click on the button the information is displayed so now the last thing we have to do is we'll have to create a custom HTML tag for the component and then add it to the main component so let's just do that let me copy this here and then in my app component.html let me get rid of this and then let me just create this I've just created the custom HTML tag for my component and now just to beautify the code I'll write a heading and let's say employee details and then I'll also add the simply learn logo say image source [Music] I've I've added the image here so let me just say logo dot PNG I've also added some styling to it all right so now let me just save this and have a look at the browser so here we go we have the logo here and then employee details heading and then we have three different buttons created that is employee one two and three and when I click on it the information of the employee is displayed the name the ID and their email address so yeah so this is how you can make use of dependency injection and inject a service class into a component dependency injection plays a crucial role in angular we'll understand what angular forms are then we'll look at the different types of form buildings supported by angular next up we'll get acquainted with features like form control and group control and we learn all of this with the help of a simple demo so without further Ado let's begin so what exactly are angular forms now I'm sure every application that you use comes with certain amount of form filling correct be it your login credentials or your sign up forms or any sort of registration forms Etc so forms are an integral part of a web application you need forms to update your profile or to enter sensitive information or also to perform any sort of data related tasks so now let's look at the different types of form building supported by angular first up angular supports two types of form building first you have the template driven approach and second you have the reactive approach now let's look at them one by one so talking about template driven approach in this method the conventional form tag is used to create forms so angular automatically interprets and creates a form object with the help of the directors Now controls can be added to the form using the NG model tag now multiple controls can be grouped using the NG control group module so it basically uses several module classes to provide controls now if you don't get this don't worry you'll understand better when I'm showing you the demo next up is Json values so form value can be generated using the form.value object form data is exported as Json values when the submit method is called lastly basic HTML validations can be used to validate the form fields in the case of custom validations directives can be used so arguably this method is the simplest way to create an angular form so moving on to the active approach now this approach is the programming Paradigm revolving around data flows and propagation of change now with reactor forms the component directly manages the data flows between the form controls and the data models now reactive forms are code driven unlike template driven approach reactive forms eliminate the anti-pattern of updating the data model by a two-way data binding so it does not use two-way data binding and typically a reactive form control creation is synchronous and can be unit tested with synchronous programming techniques so now let's go ahead and look at form control and form group so consider a typical form consisting of fields like name age and location now a form control is basically a class that enables validation of these fields for each input field an instance of this class is created now these instances help check the values of the field and see if they're either touched untouched dirty pristine valid invalid and so on so this allows you to check every field for the value it makes it easier to understand which Fields value is invalid or which field has not been entered Etc now moving on to form group so a form group class represents a group of controls a form can have multiple group controls the form group returns true if all the controls are valid and provides validation errors if there are any so I hope this was clear so moving ahead let's look at the demo to explain all of these features I'm sure it will become extremely clear once you look at the demo so for that let's head to our vs code so back in my vs code I've created a component called form component and I've also included the simply learn logo just to purify the appearance so once you execute the code this is what you're gonna see on your browser so you just have the logo at the moment the first thing we need to do is we'll have to import the forms module all right so oh uh but before we begin let me tell you what the use case is so we're going to be creating a user registration form which is going to include four fields that is the first name and last name email ID and the password all right so now let me show you how to import the forms module so in your main app.module.ts file you'll have to import forms module from angular forms all right and then in your Imports you'll have to just call it here all right so this is just a simple step and now once you're done with that let's go ahead and start our form creation so here in my component.html let's enclose the entire form within a div tag so here let me say div class as a container foreign within which let me just have one heading which says user registration all right and now let's go ahead and create our form so first let me just say form now I'm going to create a div class for every field so say div class equals form group I'll explain it to you a little later now first let's create a label so label tag for basically it's the first name so let me just say first name and the tag will basically have first name again all right and let me just break the line next we have the field so let's say input type is text name is first name and we have a class which is the form control class all right so this will have to do for all the other fields so let me just copy this and paste it like four times I'll also add the tag three for spacing let's do that here and finally we'll have the button so let's just add that here with a type subnet and let's just say submit on the button so now let's go ahead and change these values here so here let me just change it to last name here as well and here as well and in this case it is going to be email so let me just change it here and finally we have passwords so let's add that here all right so let's save this and just have a look at our browser so there we go we have our uh user registration form ready but I would like to uh align it to the center so let me just do that so here in my CSS file I'm just going to uh align all the div tags in the center and the label tag to the left so let me save this and look at the browser now and there we go we have our registration form with a logo so this is how you create a simple form now we'll have to add a directive called NG model now this directive when added into the input tag will provide form controls to every input field all right so here let's just go ahead and say NG model that is it so let me just copy this and paste it for every other field all right let me save this and back in my browser let me inspect and here you can see different types of classes like NG untouched NG pristine NG ballot are added right so this indicates that angular has recognized the form Tab and it has added these classes to the form as well as all the fields so this is achieved when you add the NG model directive in your input tag now back in my vs code now every form has an output property attached to it called NG submit all right so this property can be bound within a method that method called the submit method so once submitted this method is called right so once we click on the submit button this method has to be called so to include that we'll have to just save form NG submit equals submit [Music] all right so now we have to define the submit method in our component.ts file so here let me just go to our component.ts file and let me just get rid of unnecessary code here and let's define a function or submit and then here let me just console law form submitted all right so let me just get rid of this as well it's unnecessary here let's save this so what it means is that every time you click on the submit button this method is called all right so let's just have a look at the browser so first let's go to our console and when I click on submit it says form submitted all right so the next crucial step is to generate JavaScript representation now we'll have to make use of another directive called NG form that is assigned to a template variable okay so this JavaScript representation helps with validating all the fields so I'll help you understand that better so back in our HTML file let's just create a variable first let's call it login all right and say Ng form okay now the mg form object includes the JavaScript representation so now while you're calling the submit method you're going to pass login as a parameter so let's just say login here and in my ts file again let's just say login and along with it I want login to be displayed so I say login again so now let's save this and if you have a look at the browser let's click on submit and now here you can see the JavaScript representation So within form I can check for email or say first name and here for this field first name you can see different properties attached you can see invalid is it invalid or is it untouched which is true or are there any errors so this basically gives you all information about the particular field so we can make use of this feature to validate the information so we're going to learn about that in our next segment moving on to form validation one way to ensure that incorrect fields are not submitted is by disabling the submit button correct now apart from this you can also specify certain properties in your input tag for the corresponding input field now um let's say that the fields that now let's say that the fields can't be empty and the form only accepts names with the minimum length of 2 and the maximum length of seven all right so here in my input tag I just mentioned a required meaning this field cannot be empty and Min length 2 2 and max length to say seven all right so to check this let's go to our browser and here let me submit the form without filling the first name and evidently there has to be an error so when I submit it and I look here what's in forms and here controls and my first name you can see that an error is shown here it says require equals true that means that there is one error now you can make use of these form control objects you can leverage form control objects to ensure field validation and display a message whenever an error occurs right so to do that you need to access these objects like errors or invalid or touched all of these properties or objects need to be accessed for that we'll have to create a template variable and then this variable is assigned to this object so back in our vs code let's create a variable let me call it name and let's say NG model all right here the readable name receives the control object so here back in my browser when I submit again without the first name you can see that the invalid property is set to True correct so this helps us use this property to alert the user with the help of a simple if logic so back in my vs code let me create another div tag within which I mentioned NG if foreign so let's say ngf name which is our template variable name dot touched and name dot invalid is true right then I'm going to alert so I'm gonna make use of an alert here let's say alert Danger all right so in my CSS file I'll have to mention the simple styling for alert so here let me just say so we're gonna have the background color red for danger all right and here I'm gonna display the message invalid in bold foreign so now let's go back to our browser and check it so let me proceed without entering the last name it says invalid here so this was a simple demonstration to show you form validation of course you can modify the code depending on your requirement say suppose the length of the first name is too short then you can alert the user with a different message or uh suppose they have missed out on filling a form field then you can again alert the user so you can basically make use of the nested if condition right now just to help you understand that better let me just show it to you now back in my HTML file instead of invalid let me have another tag a paragraph tag within which I make use of NG if again now ngf name dot errors [Music] dot required is true then I display the message first name required all right and if the length of the first name is [Music] not 2. now if the length of the first name is less than 2 then I'm going to display another message so let me just say name dot errors dot Min length if this is true then I'm going to say sorry short first name all right so let's save this and have a look at the browser when I proceed without providing the name it says first name required but when I type in one character it says sorry short first name but if I type in another character it accepts so I hope this made you understand how form validation works so this was just a simple demonstration again now I highly recommend you explore these properties and play around with these objects uh trust me it's really fun so I hope this tutorial helped you out first let's have a look at the basics of routing now I'm sure that you've observed that the URL changes every time you click on a particular link or on an icon on the user interface correct now this basically indicates that you are navigating throughout the application now to achieve this navigation we use a mechanism called routing routing is essentially used to navigate through a website or a web application but how is it achieved in angular especially in angular routing plays a major role it is used to create a single page applications now these applications are loaded just once and new content is added dynamically applications like Google Facebook Twitter and Gmail are a few examples of single page applications the best part of using single page applications is that it provides an excellent user experience and you don't even have to wait for new pages to load which by extension makes single page applications extremely fast but how is this new content loaded enter routing now routing is the mechanism that as discussed earlier that is used to navigate through the application and load new content routing helps angular configure the route and the component that needs to be displayed now I'm sure you're going to understand the concept of routing better when you work on it Hands-On so in the demo we're going to be navigating to the login and the home pages of a web application with the help of routing so let's head to our Visual Studio code so basically the objective of our application is to navigate to home and the login pages so when I click on the login icon here it loads the login page and here you can see the extension slash login and similarly with home once you click on it some new information gets added and the URL changes with the slash home appended all right so this is the main objective of our application so to create it let's head back to our vs code all right so here I've created a folder called demo and underscore angular and I've created a file called demo routing now the first thing you want to do is open the index.html file and make sure that the base tag is added now although this is generally added when your app is created if it is not then add a base tag with href attribute which is set to a forward slash all right now this is generally done to tell angular to construct the URL while navigating with a forward slash all right and the next thing you want to do is open your app dot module.ts file and check if the app routing module has been imported if not go ahead and import it and then also mention it in your Imports array with that or the initial setup is done Now to create the nav bar the code that I'm going to be using is already explained in the previous video that is angular bootstrap I highly suggest you go through that video before watching this so uh the code is already available I'm just going to create a component and write the code for it and paste the code in it so let's do that let me say NG g c foreign [Music] this component is now created now here in my HTML file I'll just get rid of this and paste the code for the nav bar so here we go I've pasted the code for the navigation bar and back in my app.component.html file I'll just remove all The Unwanted code here and just specify the custom HTML tag for my nav bar so let me just create one here all right let me save this let me just run the application and see if it's displaying correctly all right so when I open the browser uh the navigation bar has been created along with these different options that's home about services and login all right and we also have the simply learn icon here all right now the next step is to generate the components to display the login page content and the home page content now again I have used bootstrap to define the user interface for these files you can easily find the code online just search for a bootstrap login templates and depending on your requirements you can choose the appropriate one so first let's create the components for by two files that is for the home component and the login component so let's go ahead and do that [Music] NG GC I'm just gonna call it login for my login component all right and then I'm gonna say nggc home for the home component all right so I'm just going to copy the code for the login component so back in my login.html file foreign okay also note that I've added the simply learn logo in my assets folder and then just provided the source for it here in my login component all right so next up is the home component and if you've seen the previous video that is angular bootstrap you might have seen that we created three different components that is intro courses and footer which included the content for the intro message for the courses and the photo message correct so here we're gonna just paste the code for all of these three and then just display it when the home button is clicked all right so what I'm going to do is I'll just paste it here [Music] so this basically has all the content one thing I want to tell you is that in the previous video we made sure that the code was written in three different components however for this I've just added all the code in the same component now I agree that this is not the best practice so if you want you can go ahead and create three different components and separate the code into these three components and just add the custom HTML tags in your home component I'm just hoping you're uh following me right now and also here in my assets folder I have added a video and the YouTube logo that needs to be displayed uh when the home icon is clicked all right so now that we've created the home and the login components the next step is to configure the routes for the application right so here you can see that we have a file called app routing module.ts file so here we have the routes and the router module that is imported and we also have a constant called routes which is strongly typed two routes from the router package all right now this array is used to define all the possible routes in the application now each route is basically an object with a path so here in my routes array I'm just going to go ahead and create the paths that is we have two different uh routes right one is for login and one is for home so I'm just gonna create a path object so let's say path sorry within curly braces I say path [Music] and then the path that I'm going to give is login this is basically what will appear uh on the URL all right and the component that needs to be navigated to is nothing but the login component so let me just say login component as you can see the login component has been automatically imported now same with uh the Home Path so let me just say but home and the component that needs to be rendered is the home component [Music] all right now the next step is to link these routes to a button in the navbar that is the home and the login button right so we're going to make use of the nav tag and an anchor tag for this you can see that we have a nav tag and an anchor tag which encloses the login and the home components all right now we're going to make use of two directives from the router package called router link and router link actor now these are specified within the anchor tag the router link basically holds the path to the page and the latter that is the router link active specifies one or more CSS classes that will be applied when the router link is active all right so to do that let me just add router link all right in our case it is home here and we're gonna have another director called router link active [Music] and we're just gonna say active here all right same for the login icon here and you just copy this [Music] and instead of home the path we created for this was login [Music] all right so this is how you can bind the route to your specific button on your UI now despite of all this how are we specifying where these components are to be displayed right the answer to this is using the router Outlet director now again this directive is available in the router package so we have to add that in our app component.html file so here just go ahead and type router Outlet all right so with that we've created a simple navigation bar which has different options that is home about services and Link and once the user clicks on the home icon it displays the content that is in the home component.html file and once the user clicks on the login component it displays the content in the login.html file all right it's as simple as that so now let's go to the browser and see if it executes correctly so all right we have the navigation bar and once I click on the home icon here all right yes we see that all the content has been loaded you can see we have uh the intro section we have the courses section and the footer section as discussed and in today's video we'll be learning all about react.js so let's jump in and see what's in store for us so we'll be covering topics on what is react why react features of react react prerequisites and its industry Trends let's go ahead and begin with what is react react is a JavaScript library used to build fast and interactive user interfaces for both web and mobile applications now one thing that makes react extremely powerful is the fact that it's open source any user can access its source code modify it and enhance it in a typical model view controller architecture react defines the view part of the application it is also responsible for how the app looks and feels fun fact react was built by Jordan walkie an engineer at Facebook now let's go ahead and see how react Works in real time consider a typical web application say Instagram the entire UI of the web page is divided into several components we have the search component a profile description component stories come component and a postless component these components make the code easier to debug and always remain discrete components also make development and maintenance of web applications faster as multiple developers can work simultaneously on different components of the same web application now let's see why react is so popular these days the ACT helps in creation of dynamic web applications it also provides performance enhancements now there are several performance enhancements like virtual Dom and one-way data binding we'll learn about these topics a little later in the video react uses reusable components now this helps decrease the development time react involves unidirectional flow of data react also has a small learning curve compared to other Frameworks like angular react is much easier to learn react can also be used for mobile applications react recently release an extension called react native that is used for developing mobile applications that are cross-compatible it also has dedicated tools for easy debugging now let's dive in to the features of react first let's understand jsx jsx is a syntax extension to JavaScript using jsx we can add HTML to the Javascript file all coding in react is done using jsx it also helps in making the code easier to understand and debug ultimately jsx is a combination of JavaScript and HTML now let's consider a small example cons simple here is a JavaScript notation H1 tags indicate HTML again the semicolon indicates JavaScript note that the semicolon is not mandatory however it's a good practice to include it moving on the next feature is virtual dom dom dom which is an acronym for data object model actually defines how documents are accessed and manipulated in a web page it represents the entire structure of the web page in the form of a tree now let's see how this actually works react creates a virtual Dom that is the exact copy of the real Dom traditionally whenever something changes in the web application all objects in the real Dom are updated this makes it extremely slow let's see how react counters this now consider two objects whose states have been changed react now compares the virtual Dom with the virtual Dom snapshot that was taken right before the update by comparing the new virtual Dom with the pre-update version react figures out exactly which virtual Dom objects have changed now react only updates those objects on the virtual Dom this makes a big difference when it comes to speed coming to the next feature performance react uses virtual Dom as discussed earlier virtual Dom impacts the speed of the web applications we also took an example of Instagram and learned how multiple components can affect the development time they help improve performance drastically the next feature is one-way data binding this means information Flows In Only One Direction One Way data binding is specifically used when information is displayed and not updated remember that the components of react are functional in nature that is they receive information through arguments and pass information via their return values the next important feature is extensions react has many extensions that we can use to create full-fledged front-end applications it provides server-side rendering which means that the application is rendered on the server rather than in the browser react native which is a react extension is used for developing mobile applications there are many other extensions that react provides for every scenario in web development now let's look at a few of them react native lets you build mobile applications using only JavaScript a react native app is a real mobile application and not just a web application running on your mobile devices thousands of applications like Facebook Instagram Pinterest Skype use react native the next popular react extension is flux flux is the application architecture that Facebook uses flux implements a unidirectional flow which makes it easier to understand what actually is going on now let's see how it works when we trigger an action the dispatcher will get notified the dispatcher receives actions and dispatches them to the stores a store is what holds the data of an application stores will register with the applications dispatcher so that they can receive actions data from stores is displayed in views actions define the internal API of your application they capture how anything might interact with your application the last feature of react is debugging react applications are easy to debug thanks to the large and active developer Community you can practically debug react calls within your browser now notice the small react extension icon at the top right corner this developer tool allows the user to inspect the code and also easily debug it moving on let's learn about the building blocks of react components state weight and props are the essential Concepts that one should know before implementing react they are the foundation on which react is built now what exactly are react components components are the building blocks of any react application react divides the user interface into multiple components wherein each component defines how a particular element is viewed in the application react components remain discrete and are processed independently another feature is reusability components can be reused multiple times across the application this reduces the development time consider the following code snippet a component is implemented as a JavaScript class having some State and a render method state is the data which we want the component to render the render method is responsible for how the UI looks and feels to the user the next concept is state state of a component is an object that holds some data this data influences the output of a component every time the state of an object changes the component is re-rendered onto the screen now let's see what props are props are short for properties allow us to pass arguments or data to components properties help make confidence more Dynamic it is important to Define all the properties their types and their default value props are passed to components in a way similar to that of HTML tag attributes now consider the following code Snippets this shows exactly how properties are passed to components also detailed illustrations on components props and state will be shown in the upcoming videos so stay tuned for that moving on let's go through some of the things that you should know before you can actually start working on react you should be familiar with programming Concepts like functions objects arrays and classes one should also have a basic knowledge of JavaScript and a familiarity with HTML don't worry if you feel like you're not good at them once you start working on them you'll get a good hang of it finally let's go through the impact of react on the I.T industry and get insights into the salaries of react developers statistics show that react developers earn way more than other web developers according to pay scale the average salary for a react developer in the United States is a whopping 91 000 US Dollars the average salary for a react developer in India is 7.25 lakhs per annum over the recent years react has gained immense popularity and is being adopted by many companies according to the data by Google Trends Riyadh has had a better growth scale compared to other Frameworks like angular and view statistics show that front-end developers have wholeheartedly adopted this lightweight framework foregoing other available options if you are scared and have a knack for front-end development react can help you gain fantastic career opportunities lastly talking about a few companies that use react devotionally we have Facebook Instagram Netflix Dropbox WhatsApp among others in today's video we'll be learning all about react installation on windows so without further Ado let's get started to set up the react development environment we need two things installed node and a text editor of your choice so let's begin by installing node.js we can head to the official node.js website say download node.js so here you can see the windows installer depending on your system you can either download the 32-bit version or the 64-bit version so I'm going to go ahead and click on the 64-bit version since it's already installed on my system I'm not again installing node you can follow the installation guidelines and download it once you're done with node installation you can go ahead and download a text editor of your choice so I'd suggest vs code so let's head to the vs code page say download vs code click on the first link and download the 64-bit version for Windows once you're done with the installation of both node and your text editor you can start creating your first react application so for that let's create a folder I'm creating it on my desktop while you can create it in any of your drives let's call it first react now open your command prompt now you can type in the path for the folder that you just created so say CD users first react now go ahead and type in the command npm install hyphen G create react app okay so this command installs all the necessary react.js modules now to check if the version is correctly installed you can type in create react app version so you can see the version here now let's continue and develop your react application type in the command create react app and you can give a name to your application so I say my app now this should take a couple of minutes okay once you've successfully created our application they say to begin by typing the following commands so let's do that save CD my app and npm start this should typically start your application and here we go all right you can also open your application in the text editor that you've downloaded so let's go ahead and open vs code vs code file open folder go to your desktop or the drive that you've saved your folder in first react my app and I say select folder so as you can see all your modules have been imported you can click on app.js and start editing in today's video we'll be learning all about the most basic infrastructure of react.js or components without delay let's begin and look at what's in store for us so we'll be touching on topics like what are components types of components nesting components higher order and pure components and a brief description about component life cycle all right to begin with what exactly are components components are the building blocks of a react application wherein each component represents a part of the user interface now to make it more understandable consider the Facebook home page the entire UI can be broken down into several elements say we have the credentials component the sign up component the image component and the logo component notice that each component adds something to how the home page looks alright reusability is one of the saline features of react components one component can be reused several times across the application and this improves the development speed components can also be nested one component can internally consist of several other components in its minimal form a component must Define a render method that specifies how exactly the application looks and feels a component can also receive properties from its parent components also you'll get a better understanding of all of these when we start working Hands-On so don't worry so moving on let's look at the different types of components first we have the stateless functional components and then we have the stateful class components now functional components are typical JavaScript functions that return HTML now they can be contained in a DOT JS or a DOT jsx file coming to class components these are regular ESX classes however it's mandatory that they contain a render method that in turn returns HTML they can also be contained in dot JX or a DOT jsx file okay then let's go ahead and build our first react application using components all right so I've opened my text editor that is vs code to build my application Also I suggest you watch the react installation on Windows video to help you get started the video briefly explains how to install node and how to start building your first react application in my case I've opened a folder called react component tutorial and here in my source folder I have app.js now app.js is the main component that gets rendered to the term let me show you that here in index.js you pass app.js which is a component that gets rendered to the reactor so app.js consists of several other components that can be nested so as you can see app.js is a functional component and before moving on let me get rid of all the unnecessary code so let me delete all of this and return an H1 tag that says hello welcome to Simply let me save it and if you look at the browser you'll have hello welcome to Centrelink now let's go ahead and display another message say H1 this video is about components let me save it and let me check the browser it gives you an error so jsx uses a conventional rule which states that all HTML tags have to be enclosed within a div tag so for example I say div and I enclose it so let me save and check my browser again here you go so multiple HTML tags have to be enclosed within the div tag moving on let's create a first functional component to do that I'll first create a folder in my source folder say components within that I'll create a file say functional component dot JS alright so the first thing have to do is import react so I say import react from yeah the general Syntax for a functional component involves the keyword function and say functional component now you say return an H1 tag or I've already used H1 tags so I'll say paragraph I say this is a functional component all right before explaining to you how these components are exported and imported let me show you the general Syntax for a class component so I create another file say class component dot JS I again import react from react the general notation is using the class keyword followed by the name of the class extending from the base class react.component so going ahead I say class class component extends react dot component now the key feature of a class component is the usage of a render method so I say render within braces I say return a paragraph tag saying this is the class component all right so moving on let's see how these components can be nested into the main component that is app.js components can be nested into the main component using Import and Export keywords so as the name suggests export feature is used to export a particular file or a module and import is used to import a particular file or module into the current existing module so we have two different types of exports you have default export and just export or named export so a default export is used to export just one object be it a function a class a variable from the file and there can only be one default export per file and when you're importing it you can specify the address and use the word import before it so let me show you how it works let's go back to our editor and then functional component and here I say export default and the name of the functional component that is functional com so let me save this and going back to my app.js I say import name of the function component that is functional comp from and I pass the path this components slash functional component also let me get rid of these unnecessary files here now let's define functional component in our app.js component so here I say functional com let's compile it and check our browser here it says this is a functional component moving on to my class component it's the same syntax here as well let's say export default name of my component and in my app.js I import it import class comp From the Path and again I'll have to Define it in my return method I save so let me compile it and check my browser it says this is the class component one unique feature of default export is that I can rename the file while I'm importing it so for example I can rename it as say FC and while I'm defining it I'll have to make sure I use the same naming conventions so I say FC again and when I check it it says this is the functional component there is literally no difference the next type of export is the named export or just export so a named export can be used to export multiple objects be it functions class Etc from a file now there can be several named exports from a single file one hack is that while you're importing it cannot be renamed so let me show you how this works okay so let's create another class in our class component so I'll just copy paste this let me give it another name say class comp 1 and then message that I want to display is hey I'm another class all right so when I'm exporting it I don't want default so let me take it off and say export here all right in my app.js while importing it I want to import both the classes so I'll include them within curly braces here I say class com comma class comp one and then again I Define it here class comp one let's compile it and run it and here we go here you can see hey I'm another class so we've successfully exported both the classes from the class component and imported it back in our app.js component one advantage of using named export is the fact that I can choose to import the classes that I want to now say for example I do not want to import class component here so let me take it off and here let me comment us now let's compile and see hey I'm another class the second class got imported while the first class I was defined earlier is not imported here all right so next up we have higher order and pure competence now I won't get into the nitty gritties of it because they're Advanced topics but to give you a brief Insight higher order components are basically functions that take in a component and return a new component the whole ideology behind higher order components is to facilitate the reusability of component logic okay so let's see how this works let's go back to our code editor let's create a component in our components folder let's call the component click dot JS all right so here we define a class I use this snippet rce here we go we get the entire format using the small snippet rce and here I'm going to make use of a button now see I use the tab button and I'll say clicked one time every time the user clicks on the button the value gets incremented so for this I'm going to use a variable say count and I'm going to use the concept of States so let's go ahead and Define our variable count and initialize it to zero so for that I'm going to use another snippet called R const and here this dot State equals my variable count initializing it to 0. so let's define the count variable in a render method so I say const count equals this dot state so every time we click on the button the count value has to get incremented right so we make use of an event called on click closed captioning not available [Music] state DOT count plus one okay and here we say count times all right so once this is done let's import our component in app.js so here again I say import click from components click and let's define it here so let's check our browser every time we click on the button the value gets incremented all right so let's go ahead and create another component say counter.js wherein every time the user hovers the mouse on the button the count value increases so let's go ahead and do that I say counter dot JS I'm again going to use the snippet rce to create a class component and here in my div tag I Define a button and say incremented to for now I say x so now let's go ahead and add the event save button on Mouse enter I'm gonna call the method this dot increment count okay so once you're done with that let's go ahead and Define the increment count method I'm going to copy the same code that I've mentioned in my click.js so I say copy this all right so one changes that I'll change the name of the method and call it increment count again let's define the count in our render method so I say const count equals this Dot and here I change X to now let's go ahead and import it in our app.js so I say import counter from components and counter and let's define it here all right let's save it and let's run the code okay so as you can see you see another button here incremented to 0 and every time I move my cursor on the button it increments mind you I'm not clicking I'm just hovering my mouse okay to learn how higher order components work we'll have to pass counter.js and click.js as parameters to give birth to an entire new component so for that let's go ahead and create another component for our SOC let's call it higher order dot JS okay so I say import react from react after that I say const updated component equals original component that's going to be an arrow function again and within curly braces I Define my class that is class say new component extends react dot component inside let's define find a render method that Returns the original component with a modification that is I want to type the user I want to append the user before the actual message is displayed all right so let's go ahead and close the tag and return new component and let's export this say export default updated component now we import higher order.js in our counter.js and click.js and pass these components as parameters so let's do that let's go to our counter.js and here I say import updated component from dot slash higher order component and here while exporting I say updated com and pass this as my parameter let's do the same to click.js here I import data.com from higher order component and here I pass this as a parameter now here in a higher order component we've defined a property name and initialized it to the user so we'll have to include this in our other components that's counter and click so let's do that and here right before incremented 2 I say this dot props dot knee let me save it let me do the same thing here and say this dot props dot name so if you go back to our browser here you can see it says the user clicked zero times and the user incremented to zero okay so this basically shows how react Implements reusability of components moving on our next topic is pure components now another way to create class component is by extending pure component from react pure component avoids unnecessary re-renders now how does it do it it does not implement the should component update method now you learn about this method a little later in the video now this method enables re-rendering of components to the Dom but if you are component on the other hand ensures a shallow comparison of states and props and checks if a re-render is actually necessary only then does it render to the Dom a react component can be considered pure if it renders the same output for the same state and props so let's take an example to explain pure components so let's go back to our vs code and create two component classes one for a regular component and the other for a pure component Now using this example I'll show you exactly how pure component is more helpful okay so let's create a pure component.js file I say pure com dot JS so here I'm going to use a snippet rpce that is going to create a pure component class let me get rid of this export and here in my div tag I'll display the text say I'm the pure component all right now let's go ahead and create a regular component I may call it regular component.js and here I'm going to use the snippet rce and the message that I want to display is I'm the regular component so to draw a comparison between the regular component and the pr component let's create a parent component for the two so let me create one here I'll call it parent component.js and this is again going to be a regular class component and here I display the message I am the parent component to change the state of the component we're going to make use of a Constructor so let's use the snippet or const and here let me create name you can give anything and I say simply learn now we make use of the component did Mount lifecycle method to set a time interval now don't worry about this we're going to learn about it a little later in the video so moving ahead I'm going to make use of the method and say component did Mount and here I say set interval the first argument is going to be an arrow function and the second will be the time interval and I'm going to be setting it to 3 seconds now within the arrow function I'll make use of the set State function to set the state of my property however I do not change the name I keep it simply on itself moving on let's import pure component and the regular component into our parent component and then pass name as a property so to do that first import pure com from Pure component and then I say import regular com from regular com.js and here let's say regular com name equals this dot state DOT name and I say pure component name equals this dot state DOT me now let's include the property name in both our regular and pure confidence so to do that let's just save this Dot drop dot name and here I again say this dot drop dot name and finally let's import parent component into our app.js component so here I say import parent come from okay and here let me Define parent.com so now if you look at the browser we have and the parent I am regular components simply learn and I'm the pure component simply gone we've got the result as expected now to check if the pure component is actually re-rendering or not let's include simple console.log statements so here I say CLG snippet and here I say your component render and in my regular component I do the same thing I say control DOT log regular component render now let's do the same in our parent component as well here I have to say parent component render all right so let's go back to our browser and inspect it in our console first the parent component gets rendered then the regular component and then the pure component after that for every three seconds only the pairing component and the regular component is rendered for the same state and prop the pure component is not re-rendered so in conclusion pure components optimize react codes and also improves performance so coming to the last topic component life cycle so basically combine life cycle explains the stages the component goes through the entire life cycle of a component can be divided into three parts we have mounting updation and unmounting so the first thing that gets invoked in the life cycle is component will mount it is invoked right before the initial rendering occurs then we have the rendering method now once a component is inserted into the Dom component did Mount gets involved coming to the next phase we have updation when a complaint receives props component will receive props gets invoked set state is called when the state of the property changes so every time there is a change react decides whether the next component State Should trigger a re-render or not to do that should component update method is called component will update is invoked right before re-rendering after re-rendering component did update is called that makes updates to the Dom and the last phase is unmounted component will unmount method does all the necessary cleanup and erases all the allocated memory and Cycles in our previous video we learned about react.js components in detail and now moving ahead let's learn about another striking feature of react.js called props props short for properties allow the user to pass arguments or data to components a pairing component can pass additional information to its children using props properties help make components more Dynamic props are passed to components in the ways similar to that of HTML track attributes now we'll look at this a little later in the video props in a component are read only and cannot be changed one thing to remember is that props are sent by the parent to the children components hence the children components cannot make any changes to these props now that we've learned about props in brief let's go ahead and create our application using props if you're new to this tutorial I suggest you go to the react installation and react competence video on our channel so back in my code editor that is vs code I've opened a folder called react props and now now I'm going to create a component a class component and I'll call it class props dot JS so let's create the class component I give rce the snippet and here I display a message saying an H1 tag basically [Music] all right now let me get rid of export here and import it in my app.js main component here I say import class props all right now we Define the class component in a render method [Music] all right now if we go back to the browser you see Hello Learners welcome to Simply learning now let's say we want to individually welcome every student instead of retyping the message for everybody we can pass their names as props now let's see how to do that now we pass the name as a property from the main component that is app.js to the child component and render this onto the browser so let's do that so here while I'm defining my child component I say name I save it and here in my child component instead of learners I say I use a keyword this dot crops dot name let me save it and if you look at the browser we'll have hello learner1 welcome to Simply learn now let's go ahead and welcome learner 2 and learner3 so I again say class props name equals learner 2. all right so if we save and look at the browser we'll have all the three Learners displayed on the browser we can also pass multiple props to the child component now say for example we want to welcome the student from a particular place so we say welcome learner1 from Place X so I can hear Define another property say place [Music] and say place similarly I can do it for the rest too say Place y now let's go back to our class props.js component and here say hello learner one from this dot props dot place let me save it and if you look at the browser now we have hello learner one from Place X Place Y and play Z we can also display whatever we want between the opening and closing tags when invoking a component now this is facilitated using props.children reserved keyword now let me explain to you how it's done with an example here let's split the self and closing tag into an opening and a closing tag and in between them let me display a message within the paragraph tag let me save and in my child component after my H1 tag let me use a paragraph tag and here let's use the reserved keyword this dot props top children so let's save it and now if you look at the browser you can here see the message displayed child component so prop stop children can be used when components do not know about their children ahead of time this is commonly seen in components like sidebar and dialog that represent generic boxes so let's go ahead and create a button tag and check again so here I'll split it and add a button tag and say click and let's check our browser here we go we get the output as expected all right we saw the usage of props for class components similarly we can use it for functional components so let's go ahead and create a functional component let me call it I say import react from react and then I say function function props and here I return an H3 tag I'll say this is functional component and I'll return another HC tag seeing hello learner so let me save this and let's export it export default function props and import it in our app.js again import function problem [Music] and here in our render method let's define it let me call function flop name let me give learner 4. and place say a let me close it and back in our functional component instead of learner I save props dot name let me save it now if you look at our browser it gives us an error it says props is not defined so let's go back to our code editor and pass props here to our functional component also let me Define hello props.name from props dot place let me enclose it within the div tag here [Music] let me save it and now if you look at a browser here we go we get the output as expected so let's begin and learn what exactly is a state in react typically a state is an object that stores the values of properties belonging to a component now these values can change over a period of time either via user interactions or network changes and the state helps facilitate this functionality every time the state changes react re-renders the component to the browser the state is initialized in the Constructor a state can also store multiple properties a method called set state is used to update the value of the state object now this function performs a shallow merge on the new and the previous state conventionally a shallow merge ensures that the previous state values are overwritten by the new state values moving on in our previous video we learned about props and although props and state dictate and control the behavior of a component they have significant differences so let's go ahead and draw a comparison between the two firstly props in a component are used to pass data and event handlers to its children while State on the other hand is used to store the data that has to be rendered on the web page props are immutable once said by the parent they cannot be changed State holds volatile data and can be changed over time props can be used in functional and class components while state is restricted to class components props are set by the parent component while a state is generally updated by event handlers now that we've learned all about State let's go ahead and build an application to see the working of State alright so in my code editor that is vs code I've created my application say State and here in my source folder I have my app.js file now here I'm going to get rid of all the unnecessary code that I'm not going to be using Also I suggest you go through the react installation on Windows video to help you get started with creating your first application so let's create our class component say class app extends react top component inside I have a random method that returns an HTML tag let's display a message welcome let's follow the jsx conventions and enclose all the HTML tags within the div tag so I say div class name equals app we also have to import the app.css file import app.css and so we save it and if you look at the browser we have welcome now let's beautify our code to do that let's add some styling so here in my app.js class component I say Styles equals and I say font style and I set it to say bold and I say color save teal and here in my H1 tag I say style equals this dot Styles so let me save it and if you look at the browser now we have welcome in teal and it's bold now let's go ahead and create a class component to understand state so first I create a folder and I call it components and inside this folder I create a class component and I call it newcomp dot JS and I use the snippet rce to create the class component to give you an insight into what we are doing today we'll display a message asking the user to subscribe to Simply once the user clicks on the Subscribe button we instruct them to click on the Bell icon and finally we display a thank you message now to do all of this we're going to make use of state and as mentioned earlier we initialize the state object in a Constructor so let's use the snippet R const to create a Constructor now in the state object we initialize a property let's call it message and we display a message saying subscribe to Simply learn now save it and here in our render method let's say class name equals app and let's create an H3 tag and within the tag I'll display the message so I save this dot state DOT message let's save it and now let's import it in our app.js component so I'll get rid of export here and here I say import new com from components and new account let's define it here and say new so we save it and look at the browser it says subscribe to Simply learn all right again to make our code look more presentable let's add in Styles so I'll just copy the same styles that I've added here and I'll paste them here and instead of bold I make it italic and I change the color to say purple and again in my H3 tag I Define style and initialize it to the store Styles so let me save it and now if you look at the browser it's in italic and it's in purple okay so moving ahead let's create a button that reads subscribe and once the user clicks on it the button should read subscribed and the message displayed above should instruct the user to click on the Bell icon to do that let's first create a button the message that I want the button to read is subscribe however this message gets changed once the user clicks on the button so instead of explicitly mentioning subscribe here I create a prop I say sub and I say subscribe here and back in my render method I say this dot state DOT sub so let's save it and if you look at the browser now you have a button which displays a message subscribe now once the user clicks on the button the message displayed should change to click on the Bell icon to never miss an update so let's create an event handler for that so here button on click I call another method and let's call the method button change okay so this method should update the state and change the message and sub values to do that we make use of a set State method now a state can be updated in response to event handlers server responses or prop changes now all the updation can be done using the set State method now this is the general syntax used by the method we'll however look at this further in the demo now the set State method conventionally enques all the updates made to the component State and instructs react to re-render the component and its children with the updated State now let's go back to our code editor and look at the working of this method now here I Define the arrow function button change if you are not familiar with arrow functions I suggest you read up on them and this is the general syntax and here I say this dot set State and inside I change my message to hit the Bell icon to never miss an update and myself sub-value changes to subscribed let's save this and now if you look at the browser when we click on the Subscribe button the message changes to hit the Bell icon to never miss an update so moving ahead let's use a Bell icon so that the user can click on it once he clicks on the image the image changes and a thank you message appears on the screen so for that I have two images I have Bell a and Bell B so I drag and drop both the images in my components folder alright now let's import these images into our newcom.js file here I say import Bell a from Bell a DOT PNG and again I say import Bell B from Bell B dot PNG all right let me save it to display the image on the screen we make use of the image tag now this tag has two attributes one is the source attribute that specifies the URL and the other is the alt attribute that specifies an alternate text for the image so here in my component I say I make use of a paragraph tag that will help display the image in the next line and then I use the image tag now since my image changes once it's clicked I have to define a property and pass the event handler click that will update the image so here before specifying The Source let's go back to our state and Define another property that is image URL and let's set it to Bell a since that is the image that I want to display first let me save it and here in my image tag I say Source equals this dot state DOT image URL and then we have the all tag and I do not want to display any message so I leave it as it is now let's save it and if we look at the browser we have a bell displayed however now let's change the dimensions of the bell I do not want such a huge bell so back in my vs code I Define style with width say 30 pixels and a height with again 30 pixels let me save this and now if you look at the browser we have a smaller icon so once the user clicks on this image the image changes and the message displayed here gets updated to do that we'll have to Define an event so let's go back to our vs code and here in my image tag let's say on click okay I Define a method say this dot image change and now we Define this method here as the image change I make use of an arrow function again and again I use the set State method I update the image so I say image URL is now set to Bell B and the message is updated to thank you happy learning so let's save this now and if we look at the browser we see the image and once clicked on it the image gets updated and the message changes so finally Let me refresh the browser once and show the full execution Let me refresh following the instructions let's click on the Subscribe button and now it says hit the Bell icon and once I do that the image updates and the message changes so what exactly is node.js now consider a scenario where a user interacts with a web application the user only interacts with the front end of the application but there's a lot of work that goes behind the scenes now in a web application there's a front end a server and a database the front end is developed using JavaScript and Frameworks like angular and react while the server is built on Java PHP or node.js and the backend database that stores the data usually consists of MySQL or mongodb so node.js is an open source cross-platform JavaScript runtime environment for running server-side applications it is used to develop i o intensive web applications like video streaming sites single page applications online chatting applications and other web applications it is used by large established companies and newly minted startups node.js was developed by Ryan Dal in 2009 and at the same time of this session its latest version is v13.3.0 now that we know what node.js is let's go ahead and look at why it was so prevalent in the field of web development here are a few points first up node.js is extremely fast being built on Google Chrome's V8 JavaScript engine its library is extremely fast in code execution node package manager has around 50 000 bundles for developers so whatever functionality is required for an application can be easily imported from npm all apis of node.js Library are asynchronous that is non-blocking it means a node.js based server never waits for an API to return data node.js dramatically reduces the processing time while uploading video and audio files it is also an open source platform and is easy for beginners for web development the above reasons more than justify the popularity of node.js platform and why it is being adopted by a large number of organizations and businesses today so now moving on let's familiarize ourselves with the parts of node.js node.js consists of several components now let's look at them one by one first up we have modules now modules are like JavaScript libraries which are used in a node.js application to include a set of functions now we can use required function with the parenthesis to include a module in a node.js application node.js application has many modules to provide basic functionality needed for a web application some of them could be HTTP util FS URL query string stream and zlib next up we have console the console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers now the console can print messages to STD out that print standard output messages and SCD air to print the error messages the next component is cluster now nodejs is built upon the concept of single threading programming a single instance of node.js runs in a single thread to take advantage of multi-core systems the user will sometimes want to launch a cluster of node.js processes to handle the load a cluster can be added to an application in this way here is a small code for you the next component is global now global objects in node.js are available in all modules now these objects are functions modules strings Etc some node.js Global objects are mentioned in the table you have dir name that is a directory name file name exports module and require the next component is error handling now node.js applications experience four types of Errors we have the standard JavaScript errors system errors user specific errors and assertion errors now errors in node.js are handled through exceptions now for example let's handle an error that would occur when we divide a number by zero now this error would crash the node.js application and so we should handle this error here's a small code for you next up we have streaming a stream is an abstract interface for working with streaming data in node.js streams are objects that let you read data or write data continuously there are four types of streams first one is a readable these are the types of streams from which data can be read writeable these are the types of streams to which data can be written duplex these are both readable and writable streams lastly we have transformed these streams can manipulate the data while it is being read or written moving on to the next component buffer the JavaScript language has no mechanism for reading or manipulating streams of binary data buffer is a module that allows handling streams that contain only binary data an empty buffer of length 10 can be created by this method next up we have domain domains provide a way to handle different i o operations as a single group domain module intercepts errors that remain unhandled there are two types of methods that are used for intercepting these errors firstly we have enter internal binding in this case the error emitter executes its code inside the arrow method next up is the external binding now here the error emitter is explicitly added to a domain via its add method the next component is the DNS the DNS module enables name resolution for example it is used to look up the IP addresses of host names DNS module is used to connect to a DNS server and perform neem resolution by using the method dns.resolve the DNS module is also used for performing name resolution without a network communication by using the method dns.lookup the next component is a debugger node.js includes an out of process debugging utility accessible via a V8 inspector and built-in debugging client this node.js debugger is not feature packed but supports simple inspection of code it can be used in the terminal by using the inspect keyword before the name of the Javascript file in order to inspect a file say myscript.js you can use the following method now that we are familiar with all the major parts of node.js let's go ahead and learn about the node.js Express framework Express is a flexible node.js web application framework that provides a wide set of features to develop both web and mobile applications you can assume Express as a layer built on top of the node.js that helps manage the server and the routes now let's have a quick look at some of the core features of Express framework it is used to design single page multi-page and hybrid web applications it allows setting up of middleware to respond to http requests it defines a routing table that is used to perform different actions based on the HTTP method and URL it also allows Dynamic rendering of HTML Pages based on passing arguments to templates now moving on let's take a quick example of a simple hello world program now this is developed using Express framework to gain a better understanding alright first up we have the WHERE Express now this is used to import Express framework into our node.js application now the app.get method is a callback function with parameters request and response the request object represents the HTTP request and has properties for the request query string parameters body HTTP headers Etc the response object represents the HTTP response that an Express app sends when it gets an HTTP request now the application will listen to the defined Port which in this case is 8081 and variables host and Port will contain the address and the port respectively lastly we have the console.log which is used to show the address and port in the command prompt so this is what the command prompt would look like and finally the output is displayed on the web browser Having learned about the Express framework now let's move on and look at the node.js use cases now it is no doubt that node stands out for its speed and intensive data exchange so top industry leaders like NASA PayPal Netflix among others incorporate node.js first up we have Netflix the world's leading internet television network with over 117 million users is one of the top companies that trusted their server services to node.js the reasons why the company chose to use node.js were application scalability and data intensive application now you must be wondering what application scalability is with basically the potential of an application to grow in time being able to efficiently handle more and more requests per minute and data intensive application allows millions of people to stream Netflix simultaneously next up is Walmart now Walmart is the world's largest company by Revenue with around 514 billion US Dollars according to the fortune Global 500 list in 2019. again the reasons why the company chose node.js were asynchronous IO and efficient handling of concurrent requests now asynchronous IO which is a form of input output processing allows other processing to continue before the transmission has finished node.js is able to efficiently handle concurrent requests with the use of thread pool and event cues Uber Uber is an American multinational ride hailing company offering services that include peer-to-peer ride sharing right service healing and food delivery the reasons why the company chose node.js were asynchronous i o quick iterations and active open source Community as mentioned earlier asynchronous IO permits other processing to continue before the transmission has finished now quick iterations now node.js is continually being updated and added new features that help in further Improvement in the performance of web servers and finally active open source Community resolves many problems that an organization May face in a particular scenario next up we have NASA now NASA as an independent agency of the United States federal government responsible for the civilian space program as well as Aeronautics and Aerospace research the reasons why the company chose node.js were reduced access times handling of data intensive tasks and the fact that the servers are active 24 7. now NASA has lots and lots of data and using node.js has really helped them in reducing the access times it is also continuously handling and working with large streams of data node.js is highly stable which helps in keeping the server active 24 7. next up we have PayPal now PayPal is an American company operating a worldwide online payment system that supports online money transfers as opposed to traditional methods like checks and money orders the reasons why the company chose to use node.js were the fact that node.js has extremely fast build times it allows tasks to be carried out with fewer lines of code when compared to other server Technologies like Java and PHP and node.js being data intensive efficiently handles a large amount of data next up is medium medium is a popular online publishing platform developed by Evan Williams and launched in August 2012. the main reasons why the company chose to use node.js were a data driven applications now these applications are ideal for being interfaced with node.js servers B to run a b tests now A B testing is essentially an experiment where two or more variants of a page are shown to users at random and statistical analysis is used to determine which variation performs better lastly node.js server maintenance is simpler than its counterparts moving on to the last topic of this session industry Trends now node.js developers are in demand across the globe since many companies are adopting JavaScript libraries according to Forbes it is one of the top 10 most in-demand jobs according to node Source the total number of node.js downloads increase by 40 in the last one year the use of node.js in production has increased dramatically since its release in 2010. with early adopters such as LinkedIn PayPal and Netflix among others node.js has seen an exponential increase in its use in web development the popularity of node.js is also accounted to JavaScript now since JavaScript is the most popular language as evidence from a survey conducted by stack Overflow in 2019 many developers can start working on node.js library with not much of a learning curve node.js developers are being offered better salary options than another web technology developers according to pay scale the average salary of a node.js developer in India is around 6 lakhs 13 000 rupees per year the average salary of a node.js developer across the United States is around 105 000 US dollars per year in this video we'll help you install node.js on your Windows system so without further Ado let's begin the first thing you need to do is download node.js from their official website so go ahead and type download node.js navigate to their official website and here you can see the 64-bit version so go ahead and download that once the download is done go ahead and run the downloaded node.js installer accept the license agreement keep the default settings as it is and then say install so with that we finish the installation process once node has been successfully installed the next crucial step is verification now this process ensures that node has been properly installed to do so we first open the command prompt and then type in a few commands to verify the successful installation we type in this command node hyphen V now this command Returns the version and if it Returns the version it means it has been successfully installed so here we go it Returns the latest version now the final step is to update the node package manager now this npm is bundled with node.js which consists of all the repositories and packages required for development purposes so to do that type in the command npm install npm hyphen hyphen Global now that we're done with the installation of node let's go ahead and Implement a small program for that we make use of a text editor in our case we've installed vs code so go ahead and download vs code once you're done with the installation this is what vs code looks like so go ahead and click on file and create a new file it's going to be a simple program where you're going to print a hello world message on the web browser to do that we make use of HTTP modules so node comes with built-in HTTP modules to transfer data across it so for that we make use of a require method we create a variable first say where HTTP equals require and just say HTTP within single quotes now the HTTP module can create an HTTP server that listens to the server ports and gives a response back to the client to do that we make use of the create server method so let's go ahead and type the code say http dot create server and in turn Elite consists of a function now the parameters of this function are request and response now the response is basically used to write to the client so we say response dot write and here we type in the message say hello world welcome to this tutorial once you're done with that you end the response so the server listens to a port number to display the message by default it listens to the port number 8080 so we keep that as it is and we end it save your file say demo.js maybe demo1.js and zc now to run the program you have to open the command prompt so open your command prompt and mention the path to your file so in our case it's our desktop saved on the desktop so CD desktop and now to run it say node demo one dot JS now you navigate to your browser and say localhost 8080 and here we go our message is successfully displayed so let's talk about the node.js architecture and understand why it's so good so to begin with uh node.js has what's called a single threaded event Loop architecture and this allows you to be able to handle many many concurrent clients at the same time it's just a very flexible way of being able to scale up your support for many clients and then in addition to that we have the JavaScript event based model along with the JavaScript callback mechanism that allows you to have this standard approach to being able to connect with and talk and discuss interactions between the client and the server it's good to have these kind of Standards where you're not using something that's unique to a specific framework or a specific technology and this just makes it so it's a more accessible for everybody so if we look at the actual node.js server itself everything centers around the the concept of the event Loop and the event Loop has a a an event queue an operation completed um fire request threaded pull and then it'll actually do the actual computation or the file system interaction all of this interconnects in a nice seamless Loop the great thing again with node.js is that it's not new technology it's been around for almost a decade it's very very well tried out many of the largest websites out there are runny node.js so let's now dig into each of the parts of the node.js architecture so let's talk about requests so the way that the request works is that you have your framework uh such as angular on the client and that will then send a request to the web server there's many ways that those requests can happen through web workers through forms and through other interactions but at some point a request is sent to the server and so these requests can be for data it can be for deleting data they can be for updating data they can be for interacting with Services as mentioned before but the goal is to have some kind of request now once that request actually hits the server and then we start actually getting into the queuing and threading process that centers around the event Loop and this is where node.js really excels because it's able to use that single threaded model to be able to manage from just even a few requests to tens of millions of requests so it receives the actual request and starts the event queue and this is where that single threading process starts is by queuing everything up appropriately and then it then maintains the thread within a pool so you have the queuing process as one action and then you have a threaded pull which manages those threads as well and then we have an event Loop which you know goes through as you receives and processes those requests and then finally what we're doing is we're actually then going to be interacting with a system and that could be a database it could be a cloud system it could be an API file system but we're interacting with something that's outside of the node.js server so the node.js server itself is doing some actions on the server but then it's also interact with things outside of its own server environment and so this talk a little bit about that workflow so requests come in they go into the event queue and they get spiraled through the event Loop and then we have a non-blocking operators which are going to be doing the input output polling such as KQ e-poll and other services and from there we're also going to be then interacting with a threaded pool and we're using the blocking operations to manage that threaded pull and that threaded pool is going to now then go outside of the server and interact with something beyond the server so whether that is a database or file system or API or microservice these are things that can be interacted with so let's go through what npm is so npm itself stands for the node package manager no great shakes there as the name says it's responsible for all the packages and modules that are bundled Within node.js so the notebook imagine itself really has two key functionalities now the first is that reply it is a central repository for all packages and modules which you can then search through online you can go to search.nodejs.org and you can find all of the package of modules that are out there the second is that it's also a command line or terminal line utility that allows you to install those packages so you can actually go through and you can see the version management and dependencies within those packages and you can actually can control the packages themselves so why would you use npm so npm is really useful for being able to extend the project you're working on so when you're building out a project one of the concepts I like to use is the concept of Lego bricks um big fan of Lego and what's great about Lego bricks is that they're all individually by themselves very small very specific functionality but if you actually get a whole collection of Lego bricks together you can build like crazy cool things so think of when you're working with the node package manager itself is that each of those individual pieces that you're working with each of those individual packages are their own Lego bricks and by themselves you can then edit and update and maintain that piece separately from the whole environment as long as your inputs and outputs they have really the piece where you snap the Lego in or when you connect the Lego to something else are interacted and open and well documented then you can actually then use those modules effectively throughout your project um so you can actually then be able to do that you can do Version Control on your codes and dependencies you can do testing very easily and then once you actually get to the point where you go yes I want to release um a new module you can do that effectively using npm and it will actually go through and do the actual deployment for you so let's go through the npm installation so the actual package manager itself is included with the installation of node.js so if you've installed and you're running node.js locally then you've already installed the package manager but you can also access it through command line or terminal window on your data server or in your server or via the cloud uh if you haven't now downloaded node.js uh here's the website where you can go down to install it and there's Windows and Mac versions of that code as well with the installers which allow you to get up and going very quickly you want to be able to run the installer and accept all the default settings uh just uh you know to begin with you want to kind of have the standard setup so that you are most familiar with the normal settings before you start getting to the point where you're a master and you're tweaking things um there is a way that you can open up the command window or The Terminal window and once you've actually installed node.js to verify that it's actually installed you can write the command node dash dash version and they'll actually then pull out the version of node.js that you have installed and then you'll be able to see that you've got it actually up and running and then you can also do the same thing for npm where you can do npm dash dash version and actually will then show you which version of the node package manager you have running so you can actually take it full advantage of that program and verify that it's actually up and running now as we're actually going to go ahead and actually run a demo of using npm and to do that I've got three windows in front of me right now so I have this window here which is my terminal window where I'll be doing all of my instructions then I also have a folder which shows where I'll be putting all of the files and then finally I'll actually have a text editor in this case I'm using vs code because it's free but you can use any text edit you like to be able to go in and show what the code that has been created by npm in the Json file so you can actually see what it looks like and then we'll modify it a little bit so first thing we want to do is we want to go ahead and create a new project file there so I'm gonna go in I'm just going to move into let's do change directory I'm going to the project folder and we'll see down here that we have an empty project folder but for this one I'm actually going to go ahead and I'm going to create a new directory in this one and I'm going to call this one simply learn and there we are we've created a new simply lamb folder and we are going to move into the simply lab folder and so we're now in the simply land folder there's nothing in that right now um so the first thing we want to do is we want to take uh go ahead and initialize this folder as a project folder for working with npm now to do this you will have to have already installed npm if you have node.js npm comes with it and if you want to see whether or not you have npm installed so you can just do npm Dash version and that will actually tell you what the version of npm you have installed is it also verifies that npm is installed so I've gone ahead and I've been able to validate that I have npm installed so what I'm now going to go ahead and do is I'm going to initialize this folder so to do that just do npm init and you'll see that the path is that we're already in the simply learn folder and then when you do that it's going to ask you some questions so what is the package name we're going to go with the defaults for right now and then I can show you how we can edit those in a little bit uh we're going to go with just say yes to all of these just by hitting return and you'll see here that we're going to create a new folder called a package.json folder this is the instructions that we have in the folder do you want to go ahead and create this we want to and it's going to go ahead and do that and we can see now in our folder here that we actually have package.json so if I go ahead and open this up with vs code here we are we can actually see what all the information is we can go ahead and we can actually go and update uh this metadata if we want to I'm going to leave it as is for right now because I want to show you a couple of other things so a lot of times when you're actually working with npm and the reason why you're using npm is that you want to take advantage of packages that are freely available in the open source community that are supported by node.js and one of those is a package called Express and express is a lightweight framework for building out web applications similar concept to angular or react.js I like using it and it's also a great way to be able to show how we can install this using npm so to install this you just start with the command npm and then you type install and then we type the name of the package and we hit enter and it goes ahead and what you'll actually see is a couple of things one is we have a dependency in our package above we also have so this is in our Json package that it's now dependency it's written in there we can also go in and under our node modules we actually see that we have let me scroll down we should see Express there it is Express now if we decide that we don't want to use um Express we can actually just come in and we can write command npm uninstall and type Express Oops I did a typo there so let's try that again npm uninstall Express and couple things can happen one is in our Json file the dependency for the express file has now been removed and we can also see that under arm node modules there are no extensions there so this is kind of cool this allows us to be able to see that we can easily add and remove packages so let's just go ahead and I'm going to install Express again sir install Express oops npm install Express all right so let's go ahead and it's installed Express now one of the things that often happen is that when you're working with a package the actual Json package so you'll receive this file and you want to be able to go ahead and install of the sub modules that come with it so and you can go through you can manually install like this or you can actually run an install command so you can actually install all of them at once I can just show you what that looks like because we're going to actually go ahead and simulate as if we're going to install bootstrap which is another popular framework and we're actually going to go with and then we'll save that and what we'll see is under the packages that bootstrap isn't listed in there we do have Express there it is right there so we now come over to our new command so we can actually write the command npm install and now site typo let's try that again let's do npm install okay it does help to save your file so let's go ahead and let's run npm install and when you do that what we'll now actually have is not just Express but we'll also see that bootstrap has also been added now I don't recommend that you use the star symbol which will install the latest version of bootstrap because you obviously haven't tested your application against that but it gives you an idea of and of what's happened here now if we want to we can actually go in here and we can see on in install bootstrap and it will actually remove that from your Json package so there we are that's how you work with using npm from getting started with a setup for a base initialization of your package going through to creating the first package being able to set up and control the naming convention for each of the items within the metadata that provides the instruction for the package how you then put in dependencies such as Express and bootstrap how you can install them and remove them and actually use do all of this through command line if you have any questions please let us know Jambo is a popular framework nowadays and you must have heard it almost every websites and web applications users Django and somewhere other further web development so in today's session we'll discuss what is Django framework let's start by discussing what is a web framework a web framework is a software framework that is created to support the development of dynamic sites web services and web applications it supports creation development and Publishing of the web applications and websites hi guys I'm Anjali from Simply learn now if you have been following our playlist on python by now you have probably completed all the basic concepts of python so today we'll use these basic concepts in creating a website using python again now this application is called Django and before we move into actually developing the website let's better understand what Django is so Django is a high level python web framework so when you compare Django to many of its other counterparts such as flask which also uses python it provides very limited freedom but then again this limited Freedom does mean that it makes development much faster and that is the goal of Django so if you are a complete beginner with web development and also start off with python this is the place to start so Django has a free and a paid version but since you are just learning how it works we can go for the free version in fact the paid versions only required when it's utilized by companies where they perform a lot of modifications to the point that it's actually unrecognizable now some of the companies which are using Django are Instagram bitbucket Pinterest and even NASA now there's another important thing that we need to understand about Django which is its design pattern so Django follows the MTV design pattern where MTV stands for model template view these terms may seem very remote to you right now and I don't think there'd be a point of me explaining what they are as of now so once we move on to the demo where I'll be teaching how you can create the web framework we can better understand how this design pattern works and with that we are finally ready to move into actually creating our website so there are certain prerequisites to Django to perform these open your command prompt so the first thing we need to ensure is that your system has python installed now of course if you are learning Django you probably already know Python and for this purpose you would have had python installed previously itself will just checked so type in Python version and if you do have python installed your version number will appear here now the other thing we need installed is PIP so once again pip would also be installed on your systems it comes with python itself and so yeah I have Pip 19.0.2 version now once those two things are done we'll move on to a virtual environment so a virtual environment is basically this environment that we create to isolate our application now this is necessary in Django because often we make applications we have completely built the application and now we do not want to touch them we do not want to create anything new we do not want to update any packages that are already being used so if you're creating a new application for which you need to update the packages we don't want the implementation of that to hamper with the implementation of a current application so this is why we completely isolate them so for that the first thing you do is you need to install the virtual environment wrapper we'll use the PIP command to install virtual EnV wrapper so if you're using any other systems such as Linux systems and then press enter but in case of Windows put a dash and win which signifies windows so I already have my virtual environment installed so now we have python we have our pip and we have the virtual environment now let's create a virtual environment so to create the virtual environment type in MK virtual EnV and the name for your virtual environment so previously I had made a virtual environment py1 this time I'll go with py2 and that should create your environment so virtual environment is created which is py2 and as soon as it's created you'll notice that now your commands start running in py2 so when you're creating an application the application itself is not created at this place it's just the environment files that's stored in here so now all this is done the final prerequisite is of course to have our web framework we need to install Django so let let's get to that we install Django so now that Django is installed we are finally ready to start our project so the command to run to start your first project Django Dash admin start project and followed by the name of your project so I'll just name my project the Django project so I just cleared my screen now if you go to this location where we created our project you'll see the project folder is created here and inside the folder there's yet another folder with the same project name and a manage file now this manage file is usually what we will be running to compile our programs and then within the folder you have certain python files so we'll open all this in our ID and I'll be using pycharm but you can go ahead with any other python ID in fact you can even use a notebook so you can select your project from here the panel on the left or you can opt for open browse through your folders and then select your project so the project we created just now is is the Django project which is this one so I'll open it and and your project will appear on the left side panel here you can see within it there's another folder with the same project name and there's the manage.py file now within this folder again there's another folder dot idea and then there is the init settings URL and the wsgi file although we won't be making changes or modifying any of these files so we'll check out what these files are one by one although we won't be making modifications to most of them the idea folder probably won't be existing in your project you can completely ignore that now we'll have a look at what each of these python files do so the first file which is the init file as you can see it's empty the reason is that the very presence of this file is only to inform that this package here this is not any ordinary folder it's a python package so you don't really need any content within this now the next file that we have here is the settings file so the settings file is essential configuration file this is modified only when your application goes into the real world other than that we just leave it as it is so some of the values that you would be modifying is for example the debug value now when the debug value is true which in our case it is whenever an error occurs in any of your code and you're trying to run that page all the errors appear on the page but now if you are putting your website into the real world you do not want that all your errors will be displayed on the page for obviously security reasons so then you can just change this value to false just before you upload your page next you have the URLs page as from the name it's very clear the URLs page is where you have your url stored so basically this file Maps the URL of a page to the function that the page will be performing so now you have the wsgi dot py code file so this page contains an application callable which the application server uses to communicate with your code and finally we have the manage.py page this is the page used to interact with your project so we never ever touch the manage.py page the settings page does change when your website goes into the real world the URLs page we will be actually modifying during the course of our project again the wsgy Dot py Page we leave it untouched so now that you know the basics of what each file already present does we can start our demo so before we start coding our website there's a dummy development server which is provided with Django so we'll just check that out first just go to your command prompt and move into the path of your project and then you just type python manage.py run server and as you can see here the development server has started and it's at Port 8000 so go to your browser open any browser of your choice localhost and at 8 000 port and as you can T here since we have installed our Django and we ran our server so our Django page has appeared here and it says that our installation worked successful so so far all good we can now start building our project so what website are we creating well I was thinking of a very basic website where you'll have the front page the first page would have probably like three four genres and within each honor you'll have a piece that is an article a novel or even a poem of that particular genre so the user gets to click the genre on the first page and the minute he or she does so we move on to the next page where we have our article within that genre displayed we'll also include a registration page just to see how that works with Django so before we move on guys I want to tell you that this tutorial will completely concentrate on how Django worked so we will not look much into the details of how our page is displayed that is we won't go in depth into HD ml CSS and so on but rather just stick to Django and its functionality and another thing that we need to know about Django before we start developing is that every page in Django is called an app so when you go to a website say Facebook for instance you have multiple tabs right so there's a tab for the profile you click on it and it immediately takes you to your profile now if this entire thing that is Facebook was built on Django then your profile would be one app and then there's another tab which takes you to your messages the page where all your messages are displayed that would be a second app so that's how Django works every small thing every component or every page of your website is an app and you need to ensure that you can describe exactly what an app does in one or two sentences so a page should not have multiple things happening on it if a page is for displaying messages that should be the sole purpose of the page so yeah that's the basic of apps and how they are a part of Django so how do we create this app just open your command prompt move on to the path where your project is stored now in here you'll type in the command to create your first app so that's python manage dot py start app and then the name for your app so I'll name my app genre so basically on my first page I want all my genres to be displayed and every article is put under a particular genre hence the name enter and your app should be created so I go back to my pycharm and as you can see here we have our app genre created in here now under this app there are more number of files so what do these files do we'll discuss that first well first is our migrations folder now inside this migration folder there'll be a number of files which will be created once we go through our project we'll see every time we execute a particular command a new file is inserted into the migrations folder so this basically connects your database with your source code and that might seem very complicated but actually Lee Django makes it extremely easy and then you have the admins page now this admin file or this admin page that Django provides is extremely useful so it's like the zummy admin page where you can actually go and you can view your entire database there in a very formatted way you have all the models that you created there you can insert more values you can delete values you can edit values which are already present so right now the admin page will not be existing there's no point of us going and checking it right now since we have not created any models yet again what is models I'll come to that too so that is the next file I'll be telling you about now if you have gone through object oriented programming python or Java or any other object oriented programming as a matter of fact you probably know the concept of classes now over here in our models file we create classes and each of this class is actually a model and by that we mean it's a database so when we create a class we have a number of attributes in this class and each of this attribute forms a column in our database so that is what will be happening here and once we create our class or what we call model that is when we can actually view the admin page and we'll see how this page is extremely helpful the next important page is the viewers page so guys if you remember initially I told you that Django has a design pattern which is the model view template where model is already discussed they are the classes template as you probably guessed is the look of the page so that's basically a HTML files and what brings the model and the template together that is the view so view adds the functionality now whenever you receive a request from the user for a particular URL view will describe the response for this request but view is not responsible for giving the response that is another file that we'll be creating as you'll see in some time so now when I go back to my web page sure there's no URL for this this is just a domain name but once we start creating our website the very existence of each web page is linked to a presence of a URL so that is exactly where we'll start building under a Django project folder we have this URLs page there's already a URL path present here it says admin which is as you guessed it's the URL to the admin page that is by default provided by Django and over here there's this another parameter so what this parameter is it's the response that is to be given for the request that you receive now just in this manner we need to add the URL for our first page which is going to be the genres page so I say path shown us and then in here I'll insert the action so I've not created any action yet so I don't know what to put in there either as of now but guys think about this so if our website has 10 pages does this mean that we'll have 10 different URLs going in here that would be quite half a sad wouldn't it so we need a more organized way of doing this and for that very purpose we will use genres the app as our base app so if from genres we are moving on to our second page so say our genres has our three genres which is fiction inspiration and something else so user clicks on fiction and this immediately takes the user to the second page where the content in fiction is displayed so then our second page should be a sub page of genre in a way and every other page that we move to from our first page should be the same so for this purpose what we can do is we'll go to a genres app the package will create another URLs file within journal and in this URLs file we'll Define the URL for a second page with reference to our genres URL so how is that done well the first thing you need to do is you must copy paste the statement here into our URLs page for this page we do not really need to import include so I'll remove that part out and I also need to Define my URLs pattern so copy paste this too but again admin is already defined there completely we do not require that now here we'll see if the user wants the page on us this is going to be my first page that is my front page so what will be the response to this the response will obviously be defined in our views page right now we have not created anything in our views page but we will soon and we will name the response for the URL join us as index since that is usually what the purpose of the front page is it's usually to display the index so we'll have view dot index and then following this we'll also give a name to this very particular call and the purpose of that I will explain later just name this index for now it's not view it's views and also we need to now import views okay so we Define that if the user goes to the space genre then we will be displaying whatever is defined under views.index of course we have not created that yet and we'll move on to that in a while now the problem is every request that is made by the user the first thing Django does is it checks the URLs page under your main project which is this page and under this page we have not defined the action for genres and it would be very repetitive to Define this again so what we do instead is we'll just include the file where we did Define the function for genres and that is genres dot URLs so the user gives a request for the genres page Django checks out this main URL speech it sees it matches the URL to this very particular pattern here and for that it knows that the response is to include the genres.url page so it includes this page and within this page we of course have the function or the response defined so now the next thing is is to create the response so now under this views file we'll create a view the first thing is we need to import the HTTP package the request is always HTTP and this time the response that we are providing is also a HTTP response we'll change this later because we'll need a more defined response but for now we'll stick to a very basic display on our first web page so let's import django.http import HTTP response and now we can define a function which will tell what response to provide for the particular URLs now here we say that if the user gives a request for this URL a response is views.index so within views we need to define a function named index So Def index and this one takes request as a parameter and returns a HTTP response and that response could be a Simple Text of course you can also have http General tags and just for the purpose of formatting so that our text looks pretty bold I'll put this into a header just say hello world so that's done this is the response that we'll be providing for that particular URL now the thing is we have this page here settings and in settings if you scroll down you'll see there's a list of apps which are installed and in this list our app genre is not mentioned so before we run our server We'll add our app to this list so that's done now go to your web page the one where you ran your localhost first and this time okay so my server's not running I need to start my server first type in your command python manage dot py run server and it says that there's no issue and a server is currently running so you go back to the page where we run a local host so the last thing we ran a local host currently your page would still be on that if you have not done any modifications I did a few in between since I got this page age now if you check out localhost again you'll see that there's an error this is because now we started defining the URLs in our URL page so when you don't give any URL as such Django checks out the two URLs defined here and sees hey what you typed in here whatever your request was does not match any of the URL patterns so now we want to check out the genres page and enter and as you see here hello world is displayed so of course this is a dummy page we need to do something way more we need to create a web page and that is what we'll get to okay so now that we viewed our dummy web page the next thing we need to do is actually populate this app with some data now to populate the app with data of course we need to first store the data and that is stored in a database so with Django you would have probably already noticed here this is file called sqlite3 so this is the database management system that comes along with Django it's already set up to be used just a small all command a small tweak that we require and everything will work perfectly fine so what this does is basically all the data that you enter through your model will work along with this so that means that there should be a communication between your sqlite and your source code now if I go back to the terminal where I ran my server you'll see here there's an error line which says you have 15 unapplied migrations and your project may not work properly right now what we designed worked right because we didn't have any data stored but from now on we will be storing data so we need to ensure that the migrations are done right and by migrations we mean that our database management that's sqlite is synced pretty well with our source code so first of all stop your server and now you run a command to do the syncing which is python manage dot py migrate and as you hit this command the syncing is happening so when you say that the migrations are complete what you actually mean is when Django looks at your installed apps this is an app that we created and we just added it a while back to this list of installed apps but everything else in here in this list was already present so these are some default apps with Django or this project in particular will already work with and many of these apps require to access some databases it could not do that until now but now that we've finished our migrations when Django checks out these apps and needs to run them it can easily access the database take whatever data is required from there and perform its functions again if we go back to a command prompt and run the server again you'll see that this time we do not get the error of the unapplied migrations so that is how you sync your database with your source code now once we create our models it means that we have added some new classes there are some new tables which are going to be added so again we need to perform the migration function which we'll look into later now let's get to creating our classes so as I mentioned earlier models are basically classes now there are two classes that we will be creating for this particular project the first class will have all these genres and the second class which will hold all the Articles so let's begin coding now my first class I'll call it collection and every class needs to import from Models dot model now within this class all we need to Define are its various attributes so I'll explain this again the class is basically a table and all your attributes of the particular class are the columns so the first thing is the collection name or the genre name now the collection name would be something like a fiction or inspiration or non-fiction could be anything and all these are strings so when you are inputting them so in Django basically that's the cache field type so you say models dot care field and a compulsory parameter here is you have to insert the max maximum length I'll give it 100 characters next thing we'll have a description for each genotype that again would be careful enter a max length give it 500 and then we'll also have an image or a cover for each of the collection or each of the genre so that would be a take call cover as in collection cover so this again will be a care field type as I'm going to enter the link for the image over here now the Links would be pretty large so I'd say a length of 1000 so that's our first class now we'll Define a second class which is for the particular articles or the pieces which are inside the collection so here we'll just go for one article within a collection and I'll name this class as piece as in a piece within a collection again this class 2 imposter models dot model and we will enter the column names now so every piece will have a title which would be the name of the page and that too would be of care field type give this a 200 and then all of these will have a particular type that is whether it's a book it's a novel it's a poem or it's a blog post that is what will go in a type variable next we'll have the artist name for a book that would be an author for a poem that would be a poet so we'll go for the general term which is artist the year it was published now the year would be an integer so we have a different field type here the integer field and that does not require a Max link and finally again for each piece you'll have a cover so I'll name that piece cover again we'll pass the link of an image here so care field with the max length of 1000 and yeah so our two models are created here class collection and class piece now once again we'll do the migration and what will happen is that the database will link with this model and then we can finally view the admin page and see what exactly that admin page is that we've been talking about all this while but before we move on we are missing out on something so we have our collection and we have each piece how do we link the piece with the collection well this is where the concepts that you probably learned in database is Gonna Come into use this is where we'll use a foreign key so although we are writing a code here this is exactly how a table in a database will be created so every item would have a primary key and now we are going to use foreign keys in a class piece to link each piece to a particular collection so if I say Dan Brown's book origin so that should be linked through the foreign key with our collection fiction so let's create our foreign key and I'll name it collection but this time with a small C models dot foreign key so to the foreign key you pass the table name to which you're making the reference first which is collection and then you pass on an action as to what will happen to a particular piece if the collection that it's linked to is deleted so what we want is if suppose fiction is deleted then automatically origin which is tied with fiction should also be deleted and that is called a Cascade delete so you say on delete models dot Cascade and now we are finally done creating our models so now that our models are created we know these particular models are created for our application or our app genre so you go back to the settings page and here we had previously inserted this app genre but back then it was not really required it was just that there is this other app that is not included in the default apps given by Django so let's put in the name there but now that we actually have a database associated with this app we need to specify this app in its complete structure that is the the configuration so if you go under genres and then there's this file apps and under apps you can see this class genre config copy this go back to settings so genre dot apps dot genreconfig so now when you run your server Django will check the list of installed apps and you'll be able to access the database associated with our newly created app too but there's more to it than that remember how previously we made migrations so we can link our database with the source code now we got to make those migrations again because now we created new models so every time you create a model or you make some changes to your models you always need to do your migrations and this time since our migrations is specific to a particular app the syntax is slightly different so you can also use this terminal down here it works just the same and python manage dot py make migrations and your app name enter and as you see it says the models collection and piece have been created now what this migrations exactly does is it converts these models that you have written in coded format into an SQL form so that's where your tables and everything stored and now if you check your migrations folder you'll see there's a new file under it that is a current migration that you attempted so now that the migrations are made you can finally run your project so once again an overall migrations so I'm back to my command prompt since the black background makes it easier to see the text break out of your server and we finished our migration so now we can run our server no issues and there's no error with the migrations either let's now check out a genre page of course it'll look the same because although we created our models what the models will be reflected in is the database the overall look of the page so far has not been changed so it's a same so I'll repeat that once again every time you make a change to your model or you add some new class to your model first run the migrations for that particular app that is python manage.py make migrations and your app name and then you run a migrations in general so that's python manage.py migrations and then you can run your server okay so our database is created but right now it's empty so next step is to populate a database for that again open a command prompt and now you need to enter into the sqls shell so the command for that is python manage dot py shell but before that I'll just go to the path where my project is stored and now in here I'll execute my command so once you get these three arrows you know that you have entered the shell and over here you can execute your SQL commands now before we input values into our tables what we need to do do is we have to import these tables because even within this project there are multiple number of tables there are some tables which were in there by default too so from genre dot models import collection come up piece which are the name of our tables and enter so our tables are now imported now first we'll populate our table collection okay so collection has three columns there's the collection name there's a description and there's a cover image so go back to your shell so we'll have an object here collection one which will be equal to collection so this would be the Constructor for our class collection and within this we'll insert our values so our first attribute is collection name and that's equal to fiction a second attribute is the description and we'll say enter the world of fantasies for the description of fiction and finally we have the attribute called cover which is the collection cover and in here I'll just enter the URL of an image I found online so that's it we have entered the values for our three attributes now press enter now let's view if this actually is stored in our database so for that you execute the command your table name which is collection Dot objects.all and it's empty so what's wrong we created an object in which we inserted all the values but then still our database seems to be empty so this is because so far this collection object that we created is only stored in our Shell's memory we have not actually committed this to the database so the command for commenting this to the database would be our object name which is called one dot save and once again we'll execute the command to check everything that's present in our database collection and now you can see finally that there is an object present and now we can also check the value of the various columns in our table collection for this particular object you can say call 1 dot collection name and gives you the collection name similarly you can also check its description now as I mentioned previously every object that you create in a table has a primary key associated with it so the primary key basically holds the uniqueness of that particular row so we can also check the primary key for a particular row or an object just go for call one dot PK and it says the primary key is one now the primary key is also known as the ID of the object so you can identify it as id2 again you'll get the value which is 1. now if you want to change the value of any of these columns that can also be done very easily on the shell so suppose I want to change the description say call 1 dot description and initially it was enter the world of fantasies I wanted to be well welcome to the world of fantasies so welcome to the world of fantasies and now if I check the value of call one dot description the value has changed so that's pretty simple isn't it now if you think this is simple there's a much much more simpler way of adding values to the database which we'll see just in a while and that is where we'll put in more objects we'll have a few more genres and we'll also add elements to our table piece so now we can look into how to create our admin page so now that we learned how to input or populate our database through the Shell let's go for the easier and the more efficient way which is through the admin now before we do that we need to create an admin and for that go to your command prompt out of the shell now in your command prompt type the command python manage dot py create super user okay so once you do that they'll ask you to create a username and we'll just go for admin since we are creating ourselves as the admin enter enter an email ID just go with admin123 at admin.com and a password so since this is not a production environment I'm gonna just bypass the password validation but if your website is going into the real world then make sure things are secure enough and our super user is created successfully so now we can go on to a browser and here we'll just type admin so this is our admin page you can see here there are two tabs groups and users but the main thing the main reason that we require the admin page does not seem to come out here we expected there to be our database tables present here so we can directly go and edit them or add some values to them but it's not there so what is missing is that we need to go back to our python page and over here go down to the admin file so here we need to add the models that we want to appear in the admin page basically we need to register those models with the admin page and for that the first thing we do is we have to import the model so from dot models import and our two classes are collection and piece so we have not added anything to our table piece yet we will later on but any how we'll just register both of them at one shot and you type in here admin Dot site dot register collection copy paste this and change the collection to piece which is our second table and that's it so with just these two lines of code you should have your collection and your P Stables appearing in the admin page now when I move back to the admin page and refresh this you'll see that our tables have appeared here click on collection and there's one collection object here click on that you can see the values of the attributes and through this admin page now I'll show you how you can add more objects so just press on Save and add another here we can enter our second collections name which in my case is inspiration and description would be be inspired to do more and for call cover which is the collection cover I have another link that I just took from the net save and we'll add one more so we'll have three collections now and our third collection would be horror the description let's say the fear is real although we hope it's not and finally we have the collection cover paste the link here save this too so now we have three objects under collection now as you see here all our collection objects just say collection object with the number in bracket in the similar manner when we were also going through our shell every time we executed the command collection.objects.org we got just the name collection object and a number but we want something more meaningful so when I look at this table of collections I know that the first one is the collection fiction the second one is the collection inspiration and so on so for that go back to your code so go under your models.py file and under the class collection we'll Define a special method which is double underscore Str now this is an overriding method that is this method already defined but the value returned by this method is not of much meaning to us as if now so now over here we'll return something that we actually want to see when we look at the objects in our table collection and what I want is I want a collection name to appear that would be quite clear as to what object is at which position so I say action return self dot collection name and that should do it now in the similar manner we can have the same function for piece 2 and for peace what we want to return is the title so that's it now if I go back to my admin page refresh this as you can see we have something much more meaningful under our table collection now the objects actually have a name well the objects don't actually have a name but we are displaying one of the attributes of the object and that gives more clarity as to what the object holds so now we'll start creating our views now as I mentioned earlier our website would be such that the first page that the user goes to is probably going to be the genres page which will have the URL genre slash and with nothing following it so the function for that particular URL or the response for that particular URL we defined in here in our URLs page under the genres app which is we'll be calling the index function in views that is this function now from that page there will be certain links and when the user clicks those links he or she can move to another web page and that is the web page where the particular article present inside our collection would be displayed so I'll just put down in comment what pattern of the URL we are matching for each of these path so the first one that we are matching is just genre followed by nothing now our next PATH would be genre followed by a number now this number one here is actually the ID of the collection that the user chooses so if the user chooses the collection fiction which is our first collection that has a primary key one so immediately the user should be sent to the next web page which is genre slash one where one represents the ID of the collection chosen by the user so now for path let's pass the expression that will match this particular URL and that Expressions actually just an integer number since the front part that is genre slash is already matched and this integer number we are going to store it in a variable because we'll require that variable later so you can just say int colon and collection ID now when you do this and Jonas ID so when you do this what happens is that this one gets stored in this variable genre ID and this pattern will match this URL now when this URL is matched what response do you want to give that is what you want to display on that particular web page that will be defined in another function we'll Define underviews we'll name it details for now of course details is not defined we'll do that in a while and give a name to this two which will be the same details so now we are able to recognize this URL what we need to do is next we need to Define details which will give a response to that URL so so go to your views page and you create your details function now what is displayed in this details function greatly depends upon the genre that is chosen by the user in the first page which is stored again in genre's ID so over here you pass not only the request but also genre ID and inside you'll return a HTTP response The Collection the genre ID is the HTML tags also need to be within the codes copy paste that in here have code here too and now one more thing we need to do is so genres ID is an integer but we cannot concatenate an integer with a string so we need to convert this to a string and that's it so let's go back to our web page and run this page so the first page which is genres displays hello world now if I enter genre slash one which is what we created new only from the code you see here the genre ID is one in a similar manner even if I enter 5 although we don't have a collection five and let's play the genre ID is five now these are dummy web pages so this kind of a display is fine of course once we actually start building our view which we will do very soon things will be more defined now let's get to actually creating a good view so what we want here is uh first of all we do not want to display any large text so let's delete that off we need to import our models because this is where our database is and of course we need to fetch information from our database to be displayed on our view so from dot models import collection and piece now in a index function what we'll do is we'll first collect all the objects from our table collection we'll have a variable which is all collection and then to collect all the the objects we'll use the same SQL command that we used so so that's collection dot objects so all your objects in the collection table will be stored in all collection now we'll store this as a dictionary so that we can iterate over these objects and display them one by one so we say context equal to all collection is the key and the value would be our variable all collection so that's done now we need to iterate over this so do we do that within our views itself but there's no point of doing that because while we are iterating over every object in our collection table we also need to display them in a certain format that means that we need these objects to be somehow embedded in a HTML file and this is where we create our very first HTML file for our first page which is the genres page so to create a HTML page inside jono create another package and you name this package templates now inside templates create another folder and give this package the name same name as your app name that is genre and now inside genre we can create a HTML file I'll name this file genre template so all our template or our HTML files will be in this path okay so before we actually develop the genre template HTML file we'll go back to our view and complete the section off so now what we are seeing is that we have a template we have a HTML file and that file will Define how we need to display the objects in our collection database or our collection table all we need to do here in our index function is actually pass these objects to our HTML file so for this we have a function render and before we actually use the function we need to import the library Django Dot shortcuts under which we have this function render this is already imported on top I'd not see that so I'll just remove that part out and now that you have the render function you use that to pass your object so what this render function does is basically we'll pass context to it it will type context with the template name that we pass and it will return a HTTP response object so you pass your request you pass the path to your template that is Geno slash templates slash genre slash genre template dot HTML so now you have passed your template to and finally the object which is context so that's pretty much all you need to do for your very first view under the views file now we need to develop our genres template so for our HTML file first thing we'll change the title let's display our app name so in this particular case since I'm making a dummy website I'm not giving it a name or anything just going with our app name okay so now we need to display our objects which have been passed from the views folder now the render function basically passes an object which is called object underscore list so we'll create a for Loop say collection in object underscore list so this way we can iterate through all the objects in our object list and now see this is an HTML file but this line of code here this is the python code so pretty often this will happen that you need to embed a python code within your HTML file so what you do is you insert your python code within curly brace followed by the percentage sign this will tell you compiler that hit although this is a HTML file this line here is actually a python instruction so now we are able to extract each genre in fact I'll name this variable as genre obj now we need to decide how exactly we want to display these objects so what I want is first I want the image of that particular collection or the genre to be displayed which is what I've stored in one of the variables and then just below the image I want the name of the genre to be displayed now this name should be clickable so that the minute the user clicks on it we can move on to another page and then just below the name I want the description for that genre to be displayed okay so first we have the image IMG source and in here I need to insert the link for that particular image so the link I actually already stored in my database as I showed we did that through the shell and then later on through the admin page too so how do we access that particular link well just like you would in a python code you can access it through the variable name and every time you are accessing or you're displaying just the value of a variable you insert the variable name within double braces so double braces and then Jonah obj dot call cover and now I'll give it some height and width to make it look a little more appealing we'll have minimal formatting here because the objective of this tutorial is not to show you how to write your HTML code but how Django works and next I'll have the name as I said this particular name would be clickable so inside href I will insert the URL of the page the user should be taken to once he clicks on the name so that URL is what we defined here okay so it's genre followed by the primary key or the ID of the category that he clicked so that would be genre slash and we stored it in genre ID so that's the link the user will be taken to and now the name that will be displayed and then after that finally we have the description to be displayed so that'll be in a H3 header again double braces because we are going to just print out the value of a variable and then after each object's details are displayed we'll break a line for better formatting what I'll do is I'll have all of this embedded within a div and have it aligned to the center so that's it we have created our HTML file here one more thing I'll just say end for so that's it our HTML file or our complete display for the first page has been created so once again I'll explain what will happen in the case of a first page only when the user enters the URL slash genre followed by nothing Django will first check this URLs page the main URL page it'll see the path has matched here and the action for this has been defined as you include the genres dot URL page so it goes to the genres.url page includes this and in this there's a function defined as a response for this particular URL a very well defined function which is in our views file so it goes to the Views file and in the viewers file we have completely defined our function index over here we collect all the objects in our collection table we convert that into a dictionary so that it's iterable then we pass it using the render function so the render function will take your template and it will tie that along with the context which is the dictionary and it will pass an object a response object to a HTML file this response object will be called object dot list and it is iterable so we'll iterate through the object we will display each object in a sort of formatted way and that is it and then the render function will pass this object all collection to our template and over here we will iterate over the all collection which is the dictionary and using this HTML code here we'll print out the objects in all collection in a formatted way so that's it and one more thing make a small correction back in the views file so initially I had inserted the entire path to genre template dot HTML so the thing with the render function is that it automatically knows that it must look into the templates folder so you have to only give the path after the template that genre genre template now let's go back to our browser and in here put in your url and there you go so that's our first web page you can see the image for our genre is here and then you have the name and then you have the description okay so that's redirecting us to a page where there's an error it says that this path is not found so when you look at these error guys you will understand better as to how the matching of the URL patterns take place first this URL pattern just this part after your port number that is checked against the URL in your main URL file that is Django projects.url file where we have defined just genre and then after that it will check the files that we included in the genres URL file that is genre followed by the the genre ID now we had defined a dummy page for this previously and that was being displayed too so I'll go back to the code and figure out what the error is the error is here of course I wrote owner ID which does not signify anything as such now because here we have this object genre obj that is where all the objects from The Collection table are stored one by one so what we actually need to access is the ID for genre obj now I'll go back to my browser so now I'm back to my browser and as you can see here we still have our front page click on fiction and yeah we got a dummy page back so now our next step is to design this page go back to your code and again designing the page means we need to start putting content into our details function now before we start designing this function we need to populate the piece table so again let's go back to our admin page We'll add the data through the admin page since that's much easier here you have peace and click on the add button first we'll add for fiction the title will give let's insert the book origin by Dan Brown so the artist would be done round and it's a novel and the year is 2017 that's a year of publication and for the peace cover I'll just put the book Origins front page cover I'll just put in the image here a link save and add another now for inspiration I'll put in the poem If and type would be poem artist is Rudyard Kipling Kipling with single P the year of publication would be 1895 and for the peace cover another link and finally We'll add one to horror the title would be the pet symmetry written by Stephen King and again this is a novel it's published in the year 1983. and then link and we save this so we are done for each of the categories of each of the genre we have added a single article so now that our table piece is also populated we can start designing the view for this so for our Details page let's start with removing this HTTP response here so first what we need to do is we need to extract the object that the user selected from our genres page so we say collection dot objects dot get PK equal to genre ID so what we're doing here is as you can see above we use the query collection.objects.org which returned all the objects in our table collection now here we are telling that okay I want just one object from my collections table and that particular object is the one whose primary key matches that stored in the variable genre dot ID and since genre dot ID is defined in this file and it's basically the ID of the genre that the user selected this will be a number either one two or three that is one for Fiction two for inspiration and three for horror so now that we got that object we will use this object C item to extract from a piece table so for that we say piece dot object dot filter and to this we pass and the category that we filter on is the collection and that is a foreign key so remember when we created our table piece we had a foreign key named collection so we're seeing if collection is equal to C item then extract that particular object from a table piece and then we will return this again through the render method pass the request and in here we'll have the path to an HTML file just like we did in the previous case but this time a different HTML file because we want to display this slightly differently and then finally we need to pass the context so we haven't created the context yet which we will now although this is just one item every time we are passing it through the render function you need to make a dictionary out of it so just copy paste this here name this P item pass in here P item and just now I did create a HTML file in the same path as before that is under templates you have the genre folder and under that I created a HTML file called detail template nothing's filled yet but now that we have created a file we can put in the path here so just copy paste this and change the genre to detail so that's done too now all we have left is to actually code the HTML file so I'll just copy paste this here and then make the required correction so in P item and this would be piece object you align its Center and piece obj is the cover we do not really need a href here so delete that part out because this is the final page we are not redirecting to any other page from here of course when you're building a complete web page this ideally when you click on the name of an article the article should open we wouldn't be including that part here though because it does not bring out any new functionality of Django peace obj and here so peace obj dot title Dash and then we'll print out the author or the artist name so peace obj dot artist and finally we can have the year also what this particular article is that is the type so that's pretty much it we'll change the title to [Music] so now that this is done we'll just end the for Loop also this is not call cover but now we're going to change it to piece cover and now we'll go back to our browser so this is a genre page refresh it once again and we'll click on one of the genres and yeah as you see the particular piece related to that genre gets displayed the patch Symmetry by Stephen King which is a novel published in the year 1983. so now we're back to our code and well our first Anna second page is designed it's working fine so now we are not going to create something new instead what is already created let's modify that now so far the functions that we wrote work just fine but Django provides this thing called generic classes or generic views what this does is it makes writing these functions extremely easy so now you have four lines of code the exact same thing can be done in like two or three lines of code in fact it's not just the easier method this is also recommended so I'll tell you how that is done first of all we need to import the generic package so from Django dot views import generic and now let's delete this entire thing so our first function is basically listing out all the objects in the table so you have multiple objects all of them are being listed out now this kind of a function would belong to a generic class so far I was defining functions now I'm speaking about class so is it a function or a class well it is a class it's definitely a class but I'll show you how this class is called as a function so first we'll finish writing the class now we have the class index and this particular Class Type is a list view because we are listing out objects now under this first we'll have a template name which is the path to our template and now to return our query set so previously we were always returning a dictionary now we can return a query set we have a function diff query set and under this we just say return collection dot objects dot all so the same query we were using previously but now we do not need to take the objects from the query and then convert them into a dictionary then pass it on using the render function we can simply do this one statement and all our objects will be sent to a template where now in the template so far we were seeing all collection because that is the key that we were using in our dictionary but that is no more we are not using the render function anymore when this query set passes an object it's received by the template file in a variable named object list so you replace your previous variable with object list and that is it with that we finished the method for displaying our first page now we'll move on to the second page so the second page is slightly different because this time we are not listing out multiple objects we just have one object and we are basically giving out the details of the object that means that this class which we'll still call details is a detailed view class so we say generic Dot detail View let's delete all of this first now the function of this detail view is basically to display the details of an object so what we need to do is first we need to define a model now our model is collection because we are receiving the primary key from the collection and each of this object actually is a part of a collection the object would not exist if the related or the counterpart genre of that object did not exist so a model is collection and our template name will be again the path so that genre detail template dot HTML and that's it so this is even smaller than our generic view now in a detailed template initially we had the name of the key in our dictionary again this time we don't have a dictionary pass so what is the value here well the value here would be collection dot piece underscore set dot all so this will return all the pieces related to that particular collection and everything in small this time now we are almost done go back to your views and you see this is a generic detail view now the thing about the detail view class is it always accepts one parameter go back to your URLs file as you are passing here a variable genre underscore ID of in type you don't need to do that anymore you can simply say PK and PK will be passed to this class and now that's the problem so here we were calling functions but now we have classes Define not functions anymore so we need to figure out a way of calling this class as a function so for that you just say as underscore view for both of these classes and that's it as simple as that now you can call your classes as a function and since you use the generic view now things have become so much more simpler much smaller our code looks very neat now let's go back to our browser go to our front page let's see if everything is displayed right yes it is so changes worked out just fine click on one of these tags and as you can see the page has loaded so much less code very few lines of code but things work just as fine as before so a web page is all built but let's add something new over here to make it look a little more like a website one of the most common things that you find in every website you go to is a navigation bar so let's add the navigation bar go back to your code now in here we need a navigation bar in both our pages so typically what you might think is the way to go about it is add the code for navigation bar in your genre template and detail template but as you know whenever you code repeatability is something that you should be always against minimum repeatability so instead what we do is under genre the same folder that has all our templates create another HTML file and name this base so this will be a base template and we will add the code for creating a navigation bar in here and then we'll just include this base in our other templates so first let's create our navigation bar now we'll be using bootstrap to create the navigation bar and every time you work with bootstrap the first thing you need to do is in your head section include these three links so if you have worked with bootstrap you've probably already know you need to go to the bootstrap website copy these links paste them here so you're basically able to access some style sheets which are stored in some other system and once that's done you can start building your navigation bar it's in your body you have nav class nav bar and navbar default so this is the class for creating your basic navigation bar but actually we'll go with inverse instead of default so this has a dark theme navigation bar it will look better on our white background website within this create a div tag of container fluid so basically what the container fluid does is that your navigation bar will occupy the entire page and will fit according to the page width now under this you have the navpa brand class and the first icon I want is my home okay so I put in home here and when I click on home whatever I want to be redirected to whichever page I want to be redirected to put the link for that or the URL for that in here and I'd like to be redirected to the genres page since that's our home page now other elements we can include in a navigation bar we put them as list elements so class navbar and we want these elements to the right of our navigation bar so we say nav bar right now I'm not going into the details of this since again this is not a part of the Django tutorial so we'll quickly just create the navigation bar now every element to the right will be listed out and I'll have a registration button so that will be under genre slash register now I have not created the view for this URL yet in fact this URL is not even identifiable yet but for now I'll just put that in and we'll run it all together and finally at the very right and corner of my navigation bar I want to display the username that is whichever user is currently going through my website now yeah right now we have not designed the features for all of this we don't have a registration form itself so a user does not mean anything to us right now but very soon I'll show you how you can create a registration form you can have users register to it so then this will start making sense so we'll say I like class and inhale the way you can extract the current user of your website is you say request dot user and that's it that's pretty much all we need right now just check all the tags again we have the navbar inverse which is the type the look of our navigation bar container fluid and here we actually need to specify that it's a header so we say div class navbar header well this would be closing right in the end so I'll just format this once and finally down here you insert two python statements you say block content uh content is a variable so you can have any other name here just say block content and then end block so why this I'll explain to you in a while so basically this entire part creates your navigation bar but you require this navigation bar to be present in multiple pages so here when you say block content and N Block it's basically the content that will fall in each of the pages so if I go to my genre template page I can simply include the base template here and then everything inside the genre template page all this instruction to actually create that page will come under a block so what we'll do here is we'll go to our template pages and here we will extend our base.html file so extends Jonah slash base dot HTML and then the body the instructions within the body will be the content of the block so you say block content and then end block now we do the exact same thing with our detail template so now this way we created a common base file for a navigation bar and the content for each of these templates will be by Tone included within this tag here so we'll have the navigation bar present for every page now when we move back to our browser you see the change here there is a navigation bar if you click on home will be redirected to a genre page and then click on one of the categories and you have been redirected to the next page the navigation bar is still present so we also have a user here currently the only user we created the super User it's the admin this will change soon once we start registering people so next step is to create a form where we can actually have users register so for our registration page the first thing we need to do is we need to create a URL and go in here let's copy this line so the recognizable URL would just say register so it would be genres slash register and that would call a views function called user form and we obviously haven't defined this class yet so yeah this is also going to be a class we are going to use the generic view to create this two it's going to be pretty simple but since it's a class we need to call it as a function so as view will still exist and we here we'll have user form but before we start actually creating a view for the registration page or writing a HTML file we need to create a blueprint for the form so why a blueprint for the form when we did not create a blueprint for our other Pages I'll tell you why but first we need to comment this particular line because it will result in an error and now we'll check out our admin page yes so this table here is what we'll be using to store our usernames so the tables already present here we'll just tweak it a little that is we'll take the username we'll take the email address and we'll take a password field all of these actually have a password if you click on them you can see here the password is hashed so these are the three fields that we'll collect from the user so we'll use the basic form just selecting exactly what we need so for that purpose we need to create the blueprint so to create the blueprint under genre create a python file calling it forms and now in here we'll import that table we just saw that database so we say django.com trip Dot auth dot models import user got two Imports here so and then we'll import the module forms okay so now we can create a class called user form which will import from s.model form and in here we'll have a class called meta So Meta basically means the definition or a description of your class so inside our class user form we'll have a description for our class and in the description we give a model name so model name is user because we'll be using that particular model I just showed you and then we'll specify the fields that we'll be using from this model because we are not taking all the fields we are going to ignore a few of them so we say fields create a list here and within the list we'll enter the name of the attributes that we'll be actually using for our particular form so we have username email and we'll take a password now unlike username and email password is not just any care field so over here we have to specify the password type so you say forms dot care field and within brackets you say widget equal to forms.password import so password input so from this your Django will know that here we basically need to take the hashed values and not just store what the user inputs as characters so that's it with that we have created the blueprint of our form next thing is we can actually go to the Views and begin writing they view the Class View for a form so the class to create a form would be called user form View actually before we proceed we need to import this so let's do that first import user form also need to import some other packages here we'll import a few packages for user authorization that's authenticate and login and now we can begin writing a user form view class so to use a form you you pass the object View and we also need to import a class for this so let's do that Django Dot views.gendrick import View okay so the first thing we need to define a class for this form and that would be the user form and once again a template for this form which will Define the Outlook this form has so you give a template name which is a variable name actually you can have any variable name here just something that makes sense now I don't have a template page already so I'm not as in I have not created another HTML file for the form specifically but I know that I'll be creating it the part genre slash and the name of the HTML file so that would be form template now the minute we are done writing this view I'll show you how we do the template that's just basic HTML codes I'm pretty sure you know how to work with that too now with forms there are two things there's the get method that is basically when the user wants a form so you give the user an empty form and there's a post method that is when the user puts in his or her details into the form so with our class with our generic classes these methods are already defined and within two three lines you can completely define the functionality of these so first is the get method to which we pass self and request now the first thing is you provide the form to the user and this form is empty so you say self dot form class and you pass nothing to this because as I mentioned earlier too the form is empty and now what you do is you return this object through the render function so basically when you do this the form is combined with the HTML file and an object is returned so basically when you do this what happens is as I mentioned earlier too the render function works in the same way it passes the object of the form the content of the form to the template and it basically sends out a HTTP request so that's your template name and then finally the form itself and as we did previously this will be a dictionary and that is the get function now we'll move on to the Post again you pass self and request now when the user enters the data and then hits the submit button that's when the post function will be called all the data will be stored in a particular data variable and that is what we will be defining in the first line so form equal to self Dot form class and request dot post so all your data will go into this post variable now the next thing that the post function has to do is check if the data entered by the user does make sense so for that you say if form dot is valid so if the form is valid save this data so you say form dot save so where exactly are we saving this well as I showed you previously uh Django provides this table for user this database for storing the users and the group users so that is exactly where we'll be storing the data received through this particular form now if the data is valid we can separate out the various Fields receive the cleaned format so first we have our username say username equal to form Dot cleaned data and that will be username and then you have the password so remember when the user entered the data itself it was stored in these fields but now we are getting a clean version of that data and storing it in this these variables username and password and now unlike how we can usually put the equal to sign and assign values to certain variables this kind of a process is not possible for passwords because passwords are not just storing some CAD field data it has a hash value I'll show you that once again so you see here you go to the users admin and if you check this out the password is not actually stored as just characters it's hashed using some algorithm and then it's stored so in this particular case we cannot say that password is equal to this value there's a certain function through which you pass the password such that it's stored in the required format so for that you see user dot set password and then you pass password variable and finally you see user dot save so guys over here actually we are saving the data in the Shell not in your database and once a data is cleaned and everything it is then that we are saving it into the database so that's why we have two safe statements here so now that the user has entered their data and they have hit the submit button we have saved the data in our database what's next well now what we want to do is we need to redirect the user to the index page basically once the user is done with the registration process there's no point of the user staying on the same page again so we redirect them to the index page now along with this we'll also combine login so if the user's password and username are authenticated and the user is an active status that means that the user has logged into our website so now we'll see how this is done Creator object new user and this object will hold a user if the username and the password that we pass here to this authenticate function is actually valid and they match that is the form of that is the form of pair so the username will be the variable username and password will be the variable password so if the new user does exist that is if new user is not null if the new user is not none we'll check the status of the new user so what is the status again I'll take you back to the database go to users well since we're in the middle of the code we cannot access this page but basically this database or this table which stores the usernames Has a Field called status which you probably would have noticed and next to the active user there's a green tick so if the user has that green tick if the user is active that means his session is in progress so it's basically like logging in so you say if new user dot is active you log in the user if you send request and the new user object and once the user has logged in to return the user to the index page and this is where you need to use a function redirect before we use that function we need to of course import it so here or redirect is within this same shortcuts Library we'll just add and redirect here so index Pages basically called genre so that's where the user will be taken now if this user is not authenticated that is there is some invalid data entered we basically give the user back a form an empty form give them another chance to fill it so for that we just copy paste this line here the render put that down there and that's it with that we are done creating a view for our user form now what we are left with is actually creating this HTML file so let's do that again go to genre your main folder and create a HTML file now remember what we named a HTML file in this view that's form template make sure the same name so let's start creating the form the first thing we do is for the form two we want to add the navigation bar so go to your go to any of your HTML files and copy out these lines here registration then you have the block content which is exactly where you'll be putting all your content that goes here and then we'll start and then we'll add the N block again copy paste that too okay so now we can start typing out a HTML code so first is a form tag now there's going to be a extremely simple straightforward form and now the thing with Django is whenever you're having a form an interactive form make sure to include this csrf token here so csrf stands for cross-site request forgery that can be sent actually from and it's a type of cross-site scripting attack that can be sent from malicious site through your visitors browser to your own server so to prevent this Django provides a very simple technique which is where you provide this csrf token now make sure you're always providing this whenever you have a post method and you're not redirecting or you're not using the URL of or you're not using an external URL because that means that your current page csrf token is being sent to an external web page and obviously that kind of a leakage would hamper the security okay so we'll be taking a username again email is also type text and finally the password and after all the fields you have finally the submit button and that's it so our HTML page is also ready now so now you need to move on to the URLs page and uncomment this because now we actually have a response also this is called user form view now I just stopped the server and run it again although it's not really necessary if you just go back to your page refresh it everything works fine okay now we will move on to our web page okay so home page is working fine just like before next you click on register and here's your form so as you can see here the navigation bar is present for the form tool now we'll create a new user name simply with the email ID simply one two three gmail.com and the password that's it now click the submit button and the minute we click the submit Button as you can see you got transferred back to the home page and in here if you see the right hand corner you'll notice that we had admin before but now it's simply so that is because we just now created a user simply and the minute you create a user by default that becomes the active user now to check this we will move on to the admin page and this is our landing page so now what happened is that since the other user that we newly created is the active user that means we got logged out of the admins profile and to view the admin page of course we need to be logged in as the admin so I log back in and as you can see here under the users group you'll notice we have a new user created simply with the following email ID so that's it guys hello everyone welcome to this video tutorial on SQL basics for beginners by simpler in this session we will learn about the database and the need for a database then we will transition to SQL and see some basic SQL queries after knowing what a SQL query is we will see the features in application superscript query and then we will have a hand on some of the basic SQL queries so hey everyone I am abisara from Simply learn and welcome to this video One SQL basics for beginners but before we begin if you love watching Tech videos subscribe to our Channel and hit the Bell icon to now miss an update let's start with database a database is a vast collection of data that is stored and retrieved electronically from a system in today's world data has become the new oil which has mandate companies and businesses to rely on an excellent database to store the vast amounts of data every millisecond the tech Giants are accumulating vast amounts of data that need to be stored the database comes with features to update and effortlessly manipulate data and not only that these database provider companies ensure the data to be safe and secure they also provide tools to extract useful information to help the companies make meaningful decisions after knowing about the database let's see how SQL communicates with the database to get desired results SQL stands for structured query language the structured query language is the standard language used by database operators and developers to carry out different operations from manipulating updating and retrieving data from relational databases now let us see how we write a basic query there's a customer table with columns customer ID customer name age gender date of purchase address item and price and we need to extract the customer ID and customer name from this table so we will write a query select customer ID comma customer name from customers semicolon when we will execute the query in MySQL workbench we will get the desired result that is the output table with customer ID and customer name this is how we write a query to extract the information from the database we'll see some more queries as the session proceeds now we'll see what the features of SQL are SQL lets you access any information stored in a relational database with SQL queries data is extracted from the database in a very efficient way the structured query language is compatible with all database systems from Oracle IBM to Microsoft and it doesn't require much coding to manage databases now we will see applications of SQL SQL is used to create a database Define its structure implement it and let you perform many functions SQL is also used for maintaining an already existing database SQL is a powerful language for entering data modifying data and extracting data in a database SQL is extensively used as a client server language to connect the front end with the backend the supporting the client server architecture SQL when deployed as data control language DCL helps protect your database from unauthorized access afternoon SQL with its features and applications let's go through some basic queries in SQL that is ddl data definition language DML data manipulation language DCL data control language TCL transaction control language ddl or data definition language consists of the SQL commands that can be used to define the database schema let's see ddl commands create command is used to create the database or its objects like table index function views store procedure and triggers drop is used to delete objects from the database truncate is used to remove all records from a table alter is used to alter the structure of the database DML or data manipulation language consists of the SQL commands that deals with the manipulation of data present in the database insert into command is used to insert data into a table update is used to update existing data within a table delete is used to delete records from a database table select this command helps you to select the attribute based on the condition described by the workloads tclo transaction control language these commands deals with the transaction within the database commit commands commit a transaction roll back command roll backs a transaction in case of any error occurs save point it sets a save point within a transaction set transaction it specify characteristics for the transaction dcn or data control language it consists of the command such as Grant and revoke which mainly deals with the rights permissions and other controls of the database system Grant command gives user access privileges to database revoke it will draw users access privileges given by using the grant command now we will have hands on some basic queries in my SQL work match if getting your learning started is half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more now we will see some basic queries executing in MySQL workbench so we'll start and first query we will run will be use sys that is the database this command is used to select the database in which we want to create or manipulate any data now we'll see another command that would create a table foreign foreign attributes to the customer table that would be the columns first would be the customer ID and we will act it it as a primary key The Next Step YouTube that would be customer name customer underscore name and its data type would be back here foreign within data type next attribute would be gender with character data type next we will add as date of purchase with date data type now we'll add another attribute that would be addressed with data type where care next we will write the attribute item that will be the item purchased with data type webcam next would be the price okay for price we will make it as float and let's shift this to next line and now we'll execute this command yeah you can see that the table is created now we have to insert values into it for that we'll write a command insert into customers values and I have all the records written in the notepad so I will copy these and paste it here these are 20 records like all the attributes they are in the order so we have written all the records in the order only like customer ID that will be one zero one customer name that would be Joseph age that would be 22 gender May rate of purchase this is the date of purchase address Pune item that is vegetable purchased price that is 80. so now we will run this command and all these records they would be inserted into the table and these are 20 commands 20 reports you can see insert into customer values the command has been executed and they have been inserted into the table now we'll see the table for that you will write the command select star from customers here you can see the table in the output grid okay I will make sure you will see the whole table with all the 20 codes yeah you can see all the 20 reports they have been inserted now you see another command and for that we would just get the output as customer ID and customer name in the output grid for that we'll write the command select customer ID comma customer name from customers semicolon and we'll run this command and we will get both the columns customer ID and customer name in our output grid now we'll see another command that would be dropped the drop command just removes the component from the database so we'll write drop table and table name that would be customers and semicolon and we will execute this command now the table has been removed from the database to verify whether the table has been removed from the database or not we will run a command select star from customers semicolon and execute this command and what we will get is Select start from customers error code table says customers doesn't exist the table has been removed from the database so that drop command worked here now we don't have any table that is the customer table has been dropped from the database so we have to create that table again so we'll go at the top k yeah and we'll create the table again and we'll insert all the reports again into the table include the commands have run now we will run this command to see whether the table has been created and the records have been inserted into the table or not both commands have worked now we'll see another command that would be truncate the truncate command just manages all the records from the table truncate table name semicolon and just run this command the command has been executed now we'll see yeah you can see that all the records from the table has been managed so the truncate command worked here now to carry other operations we have to insert all the records again into the table we'll do that will again go upwards and run this command insert into customers values and all the records and we'll execute this command and that command has been executed and all the records are again in the table so run this command and check it yeah you can see all the records then set it into the table now we'll see another command that would be alter alter command is used to update any record into the table you will see holder table name that is customers and now what we should do uh okay we'll drop the column H from the table so we'll write command group column age semicolon I will run this command the command has been executed and now we'll check whether the age column has been dropped or not select star from customers semicolon and we will execute this command yeah you can see the age column has been dropped off the table so the alter command has been executed successfully okay so now we'll see another thing uh like if you want to comment something during the execution you can do that just write two minus signs and the text this would be the command and you can also use slash start and let text inside it and start and Slash so this is also the comment section you can write comment with this syntax or with the syntax they both work now we'll see another command that would be update this is also used to manipulate data in the table to update any record into the table so we will write update table name that would be customers and but we should update okay we will update a record uh we'll change the customer name and address and we have the primary key as customer ID so we will use that so update customers set customer name equal to James comma and address equal to uh question where customer ID equal to one zero one okay you can see here in the table 1 0 1 customer ID the customer name is Joseph and the address is Pune we have updated command and we will execute it see okay okay we have an error here uh yeah that's correct we will execute this command where the command has been executed successfully and now we check the table with the command select star from customers semicolon you can see the row has been updated the customer name is James here and the address is Boston so the command has been executed successfully now we'll see another command that would be delete so delete command is used to delete any particular record for any particular row so we will write the command delete from customers where customer ID equal to one zero two semicolon so the second row that is with customer ID 102 that would be deleted when we'll execute this command now we'll check into the table yeah you can see the record has been deleted now you'll see distinct command that is used to return different values so we will write command select distinct and the column name for which we want different values to be in the output grid we would select address from customers and we will execute this command yeah these are the address so these are the cities in the address which are different and which are unique and we have get that through the distinct command now we will see minimum command minimum command is used to get the records or get the data that is minimum of all the data so for that we will write the syntax select minimum like Main in bracket we will write the attribute name or the column name for which we want the data to be minimum as less price this would be the attribute name from customers so we will execute this command and what we would see is that 60 would be the last price like the customer table they have the column price and in that we all we have all the prices and from that the minimum price is 60 and we have get it at less price similarly we have the maximum command to get the maximum amount from the column we will use the maximum command select Max in bracket to write the attribute name as Max price from customers and we'll execute this command and what we get is 3400 it's the maximum price from the price column now we'll see another command that would be count command it Returns the number of rows according to the query so we will run the query and see like how it works we'll write select count and the attribute name that would be a customer ID customer ID from customers semicolon and when we'll run this command we will get 19 as a result that is it counted the number of customer IDs that is 19 in the table now we'll see another command foreign select AVG and the attribute name for which you want the average from table name semicolon and we'll execute this command and we'll get the average of the price from the customers table now if you want to add up all the prices from the customer table you can use the command sum so how you will execute that command select sum in bracket we will write the attribute name that would be price from customers semicolon and we'll run this command I will get the sum of the prizes from the customer table now we'll see where command where command is used to filter records let's see through syntax so we will write select star from customers where address uh yeah we will where address equal to Pune semicolon and then we will run this command and yeah this is the taper we will get the records with addresses Pune so this is the functioning of where command now we'll see Group by command that is used to just group the number of rows that have the same values we will see it through the syntax like we will write select count attribute name that would be customer ID comma address from table name and group by accordingly with address now here the comma will not come here this is the command select count customer ID comma address from customers Group by address when we will execute this command yeah we will get this table that would be these are the different addresses and these are the number of times the number of persons who live in this address with the count with respect to customer IDs now we'll see having close with the help of an example only select count attribute name that will be customer ID comma address from table name that would be customers group y address having count customer ID greater than unit 3 view 44323 semicolon and then we will execute this command and you can see the output we have got through this command that is Group by command close this and when we have added having closed having count customer ID greater than 3 we just got the customer ID count with four now we'll see another command that is order by select star from table name that is customers and we will order this output by address semicolon we have got the output with respect to the address the address has been assigned alphabetically here so what exactly is mongodb it is a document oriented nosql database it was initially released in August 27 2009. mongodb replaces the concept of rows of conventional relational data models with something called documents it offers developers the flexibility to work with evolving data models since its document based mongodb allows embedded documents arrays and represents complex hierarchical relationships using a single record it is also schema free which means that the keys defined in the document are not fixed as a result massive data migrations can be ruled out but you must be wondering when there's something like SQL why is no SQL or mongodb used there are a few reasons why mongodb is widely used first up is flexibility mongodb's notion of documents that can contain sub-documents nested in complex hierarchies is really expressive and flexible flexible query model a user can selectively index some part of a document or a query based on attribute values regular expressions or ranges next up is native aggregation native aggregation allows its users to extract and transform data from mongodb and either load them in a new format or export it from mongodb to other data sources it makes it extremely compatible lastly as mentioned earlier the schema free model now applications get the power and responsibility to interpret different properties in different ways now that you know what mongodb is and why exactly it's used let's have a look at the characteristics of mongodb firstly it's a general purpose database now mongodb can serve heterogeneous loads and multiple purposes within an application again it has a flexible schema design document oriented approaches with non-defined attributes that can be modified on the Fly is a key contrast between mongodb and any other relational database next up is scalability and load balancing it's built to scale both vertically but most importantly horizontally using sharding an architect can share load between different instances and Achieve both read and write scalability when it comes to load balancing this happens automatically and transparently to the user by the sharp balancer again we have aggregation framework now mongodb offers an extract transform and load framework that eliminates the need for complex data Pipelines native replication now data will get replicated across a replica set without complicated setup security features both authentication and authorization are taken into account in mongodb next up is Json now Json is widely used across the web for front-end and API communication and as such it's easier when the database is also compatible with the same protocol lastly we have mapreduce now again mapreduce is an excellent tool to build data pipelines and mongodb uses map reduce readily now let's quickly have a look at the working of mongodb data is stored in documents with the help of key value pairs now the data is stored in the bson format at the back end mongodb converts Json data into a binary format known as bson mongodb also makes provision for nested data now all of these documents are stored in a collection these collections hold multiple documents and since mongodb is schema less the documents in one collection need not be similar now again these collections are stored in the entire mongodb database as mentioned earlier mongodb makes provision for nested data this makes fetching of data extremely efficient when compared to other databases now you must be wondering where exactly mongodb can be applied or used so let me help you with that several areas of Technologies use mongodb as their dbms currently some of them are Internet of Things mobile applications real-time analysis personalization and catalog management and content management now all said and done let's look at some of the companies that use mongodb currently companies like Toyota sap AstraZeneca Adobe Verizon Cisco Barclays and Google among others readily deploy mongodb as their database management system in this video I'm gonna help you install and set up mongodb on your Windows system you will have to navigate to the official mongodb website and here you can see software so go ahead and click on community server under software and you can see that the current version is 4.4.4 and the platform is Windows and make sure that the package is MSI all right now go ahead and press download so this could take a while all right so once it's downloaded go ahead and install it now since it's already installed on my system uh the installation process will be different but you just need to follow the steps there and finally install it so once you're done with the installation you can go to your C drive and here you can click on program files and you can see that mongodb is installed and inside of it you have the server folder and then you have the 4.4 folder and then you have the bin folder right so here you have the application that is your and the mongod applications both are executable files now the mongod file or the application is the daemin process now this is the background process that makes sure you retrieve the data from the database access the data so it does all the background tasks so after the installation now you need to create a path to this file by doing this you don't have to always go to the bin folder and then execute the file you can directly execute the file on your command prompt right so for that let's just go to our environment variables but before that let's just uh copy this path right and here under the user variable section click on path and say edit and go ahead and just paste it right I've already pasted mine so just go ahead and paste it and click on OK and say okay right so now you've created the path successfully now let's head to our Command Prompt and run the file so here you can just directly type since the path's already been created so just go ahead and say [Music] and here you can see that your server has been generated and with this you know that your in mongodb has been successfully installed and your server is up and running right so just for confirmation let's see if there are any databases and how much space they've occupied so you can right now just type show DBS and when you click on it it says admin config and localhost and all of it is zero so with that you have successfully installed mongodb on your system and it's up and running all right in this particular tutorial we will be learning what mongodb is all about and their advantages and some practical demonstrations so let's get started now so here in mogodb we would like to discuss about what is the mobile DB so as we know the mongodb is known to be called a traditional document based database okay which stores the data in a document okay nosql means it doesn't say like no to SQL instead it says not only SQL that means it is not only SQL but it is supporting the other approaches too okay so the document based where you talk about it actually represents the typical hierarchical relationship using the single records that means how the records are related with each other so that's how exactly it represents and it is a pure schema free environment so that you really do not need to have schema before you go and develop this program so it is a pure schemerless environment due to that it is giving you far more better flexibility when you talk about completely unorganized environment so what is nosql so the huge idea about a nosql so it is completely into the non-relational database like tradition if you see any non-relational database you talk about a typical nosql uh it's purely into the document base here nosql does not use any tables like in rows and columns a traditional rdpps approach if you see there they are using a complete table structure like they talk about columns they talk about rows and are all about so here in nosql it stores the relationship data in the documents so the different type of nosql databases are available like you talk about called document based you talk about key value base you talk about white column based and graph based different options are available for the nosql but the one which we are using it mongodb it is a purely document based database now here we would like to go ahead with some demonstrations like talking about like how mongodb installation works and the other aspects okay everyone so now we're gonna start working on the first option called mongodb installation okay see mongodb installation is very simple if you open a website and go for this website name called um download if you talk about mobile DB download you're gonna see the official website called mongodb Community download is available when you click here so you can see it is taking the current version to 4.4.6 Mac OS and by default detected my platform however you can select depends on which platform you have it and after that you will be clicking on this download okay so it will get ready for if you are from Windows I would say in this Windows you can select appropriate option like two options are available you can talk about MSI or talk about zip my recommendation is you can stick to the zip power portion because it won't start any mongodb Services behind the scene that is really helpful because you really do not want more videos to be there running unnecessary even if it is not required my situation is to stick to the zip file so here once the mongodb is there so you will be seeing that two files available inside of mongodb folder inside the bin so once you download the zip you will find two different type of files are available let me mention those so inside the bin folder you will see two files one is called mongod okay the other file which is available called Momo mongodb used to basically start the mongod server and the T Mobile is actually the client which will connect with the bombodi clear so if you are in Windows environment so once your Insight is bin folder of your zip file you will get the mongodb so you have to double click on this it will start a new command prompt so you do not need to do anything further just minimize this command prompt and go inside the bin folder again and click on the another binary file called so it will get start as a client okay since I am using the MacBook here the concept is little different about how mongodb can be used okay so this is just a basic way of how the mode is being used into your code okay everyone so now as we are in the Macbook so here to start mode we have a very special way to start with so here I'll start with my terminal and here I would like to paste on very simple command to start my mongodb database that is called mongod and after that you have to say hyphen iPhone DB path it is a place where your database will be starting and one more important thing I forgot to mention like would not start automatically inside your Windows machine unless inside your C drive you have to create a new folder name called data and under this you have to create a new fold in equal DB because automatically when the mode starts it looks inside the C drive data inside a DB folder there your all records will get stored so do not forgot whenever you're trying to use the mongod so you must make have you must have this particular fold structure in place in your local machine otherwise this is not gonna start every time you start your mongodb without this location it automatically terminates So to avoid those make sure that you have this data DB folder ready with you however you can also change the location of this particular folder structure for which we will discuss it little later on but as of now we can see I'm giving my location that is called hyphen iPhone DB path slash data DB I hit enter you can see now my mobile DB is starting now and since it's stuck so I have to start the new terminal now so here I open the another tab and type and the multi-type mode now you can see it is now connected with my mongodb and now it is ready that's the first thing you need to remember okay now to check which are the databases are available to you so you can just type show DBS so it will show you the number of databases which are already there inside your existing newly installed mongodb but you can go back and create new database too here you can see some databases are already present however you go back and create the new databases into your system and to create this database we have very simple option available here name call use simply DB if I say use simplydb it automatically creates this database and take you inside let's see now you can see you say you simply DB it automatically creates though it is not there but automatically takes you in while creating those okay so that means your current database name was simply DB so if you are not sure which database you are in we can just type DBS or DB show you that your current database is simply DB that's it so your database is set and we are all good to go ahead with our next level development hello everybody and welcome back in a previous videos you have seen like how to create a database and how to identify whether my database is there or not so if you remember previously we have created our database using use keyword so if I just see my databases which we have created is last time so how we can check this out we can say show space DBS okay so you can see we have a got database list but we do not have any database which we have created last time is registered here the quite surprising because when we have created our database it should be listed here but it is not let's do one more time I'm saying use uh asset DB and I'm saying switch to sldb now when I say once again show DBS so I still don't see my database is listed here there is a reason the reason is according to the momodb rule unless we have minimum one record or collection is stored inside my mongodb it really can't show in the list now I want to tell you about a few important things now here when we talk about called mongodb in this mongodb compared to the relational database here the table which is actually in rdbms it is called here it is called collection okay DB is still called DB here okay that means the database will be still called database but row what you use this word in a traditional rdbm is here it is known as called document if you remember I told you like it is a document based database so here every single record what you try to insert it is not called a typical row it is instead called a document so every table is called collection and every single row it is called document that's what exactly the difference is okay now here once it is ready we will go ahead and talk about our next feature now well we have to basically go and create a new collection okay so what you can say DB Dot create collection and here I can pass my collection name I can say demo collection so once it is done I can see it is collection is created in typical language I can say the table is created and now when I try to see same show DBS I can see my database is now listed okay that's how exactly it works so the very simplest way of how we use in my code well in our previous examples we have seen like how we can create a collection and we can give the name and I can see the details are listed when I say show DBS but there's a again another alternative option available where you can just do that without even saying DB dot create collection well if I want to create a collection I really don't need this particular functionality called create collection I can directly use this statement name called DB Dot DB dot SL udent dot insert and here we would like to add the property like a name and here we can say admin now what does that meaning is when you say DB dot SL student dot insert I'm gonna hit into it you can see this uninserted one and surprisingly when you try to say press enter you will see this SL student is not a collection which we have created earlier so what this line does this line not only create the collection for you but also add a record inside with this property called name because that is a mongodb and mongodb is always following the Json based structure and due to that it goes with the key in value pairs so DB is a predefined keyword SL student is a collection name insert is a command through which you are trying to insert the record now to check how many collections are there okay so we have one property call show collections when I say show collections I can list down those number of collections or else I can set tables in a typical rdbms language which are there added in my system so as a student in which I can see the record is inserted so if I want to confirm I can simply say DB Dot SL udent DOT fine find is a function through which I can list out those number of Records which are added I say find and you can see that the records are received at the same time when I say DB dot the name call Demo collection okay db.democollection dot find I'll find no record reason because this collection was created but there was no record which was inserted in but you will see when I write this command called SL student.insert it not only create a new collection for me but also insert the record into my table also called a collection that's where exactly it is giving you the advantage when you want the collections to be created along with the data this is the way how you can really do this clear but whenever you talk about DB dot create collection many people always think about what is the significance of having this DB dot create collection look DB dot create collection is having its own significance we never recommend this technique okay to create a collection because when you create a collection you always bring some restrictions some terminology which missed out whenever you talk about this line so having this DB dot create collection you can also offer some additional capping which is not possible when you use DB Dot collection inputation search so you might be thinking what those cappings you're talking about let me try to brief you when I say DB Dot create collection and here we are providing the first name call support student okay when I say student so after this student additional parameters what we can pass is this when I say capped colon true what we say cap coolant true so you are enabling the capping after that the next parameter I'm gonna pass that is known is called size in this size we are providing the size suppose I am saying 5 to 4 and also we are saying two double eight zero that is the size of 5 MB and here we are giving call Max colon 5 what exactly that meaning is see the meaning is very simple whenever we try to bring this great collection option so capping through means you are enabling the capping so what does that meaning is it is trying to say in this particular collection name called student maximum number of documents can be either five or less than five clear and the collective size of documents cannot be increased to more than 5 MB that means you're trying to say either by adding the total number of five records the collective size of five document will reach to 5 MB okay or else the maximum number of five documents can be is stored so whichever fills earlier you may have a total number of four documents which are pretty heavy and they reach to the size 5 MB and beyond that the next document won't be added or else you can have the five documents which has not yet even reached so any option will help you to achieve this so that's where exactly you can offer the capping but this is only possible when the user is trying to say DB dot create collection this option is not possible when you're trying to use this so that's the benefit of having this DB dot create collection and this is what we always recommend well now we would like to talk about our next feature here inside the same mongodb so we now know how to create a collection how to create a database and how to switch from one database to the other database now we will tell you like how to insert a document so far we have already seen how to insert a document inside the mongodb now we would like to also show you how we can insert the documents using multiple techniques so remember one thing MoGo TV comes with two different type of documents one is called relational document and second is called embedded document mostly while working with mongodb we always recommend you to use embedded documents because that helps you to scale up your application without any hurdle okay the embedded documents means what that means the uh I would say the parent record as well as the child records both stores in the same location fine so how exactly that is let's take a look about this example here we would like to insert some records by saying DB Dot student I do not have a student collection or I'm just telling you DB dot student Dot insert here we would like to add some records what I'm trying to say the registration number registration number I'm just saying uh one two three four you can give anything now the next one we will talk about call name this name we can say student one followed by the next one I'm talking about which course the student has registered so we can say course inside this course we would like to say the course name let's say course name we are given the course name called MCA okay followed by another property called duration okay I'm giving this duration is called three years like that after that this curly braces is closing that means see the idea is like you see the course is an embedded document because from course you have about few more properties like in course name and duration I am closing this and starting the another property and that is called address okay sorry let me remove from here and from address and address we can say one more curly basis and inside this address we can say City giving the name called what Bangalore the another one we are using that is called state [Music] um let me remove this state colon ke okay and the third property you are using that is what is called country here is saying IE that is called India so it is closing here okay and it is closing here so the inner document and how to document both are closed hit enter and now you can see the records are inserted one thing you might notice the course and the address these two are embedded documents and they do not have any primary key of its own instead the course and address both are directly dependent on the student object or the student database so I will say student have the registration number five and the primary key so the primary key will be associated with the most outer document and the inner documents are directly associate associated with them and now when I try to say DB Dot student dot find you can see now the records are fetched I can understand many of you are thinking every time while adding the record we do not add any object ID and here you might have observed and there also your option then what exactly that ID is now let me brief you this ID is nothing but a unique primary key your mongodb has offered you that means mongodb says whichever data you are inserting it so by default with every single document mogodb will associate this by default property called underscore ID which you can't even ignore however you can override I haven't provided any underscore ID is a property because this is a predefined property associated with every single mongodb document if you want to override it you can overwrite from this value to any value because if you do not pass any value this value will be automatically provided that is a typical hexadecimal value however if you want to override it you can override the value of underscore ID but you can't change the key name let's try with some another record so same record if I try to add go I'm using call student2 and here I'm saying one two three four five here if I want to override it I can just say underscore ID colon I can get the value called what one zero one this you need to remember for I'm overriding this value with 1 0 1 now adding it now records are added now let me call find now you see this time the records when I fetched so in this record the first record contains a default underscore ID in a second record it is the one which I have provided and remember one thing in mongodb you really can't offer any property other than underscore ID as a primary key here there is no concept of having the cons like a composite key which you used to do in Tradition rdbms here you have only underscore ID and this is the only property which you can override it else by default the new value will be given to you so this is the first way of how the insert document has been done we'll be telling you the another ways where the other documents are also added Okay so in the previous examples you have seen like how we can add the records but I also tell you there is another alternative options are available if you want to insert the records in a bulk that option is also possible in mongodb how we can do let's try to understand here here we would like to use one very simple concept called VAR my EMP equal to now starting with a typical object like this and after that I mean adding this and within this I'm adding the first property called EMP ID colon one after this okay now you can see it is not understanding because that is the challenge when we talk about call uh you know the logical part because you go with multiple lines it is not supporting however you have to follow the same lines now empid1 and we just give the second property called EMP name so amp ID just remove this I just say EMP ID and I say amp Name colon admin okay adding it here so first record here again I'm adding another one I will call EMP ID column two okay and now colon manager okay again foreign and colon okay added okay and this curly process is closing after this your square bracket is also closing and once it is done you come down and say DB Dot new EMP dot insert okay and here you pass the name of the object called my AFB and you can see now it is telling you n inserted three that is known called work insert we are inserting multiple records in a single shot see how easy it is for you okay now you simply use DB dot The Collection name is what your new AP dot find and you can see now all three records are inserted with its default object ID okay so that's is a really nice idea to have the ID to be provided okay remember this statement so you understood finally how we can add the records in a bulk going forward we will also talk about which is related to your update as well as delete in your upcoming demos okay but here that is the first thing which you realize it how we can perform those kind of operations in very very simple and straightforward manner okay everyone so now we have got three records with us and in case if I am planning to perform update on any of my records how will I do this now so we have a predefined functions available name called update function let's see how this update function can really work so we use this statement name called DB dot what is my collection name which is known as call a new EMP new EMP okay dot update okay so what I will do I will say DB dot new EMP Dot update here okay now when we talk about called update we have a statement available okay what is that that is called EMP ID we call EMP name so we say wherever the EMP ID is this I want to change what the name how can I do this now very simple uh to perform this what I would like to do now I want to basically add few more records to give you some more better idea uh you can see now here we have a call admin ID name so I just do one thing I just change the IDS one two three I just say four I say five message six okay and I call this again the three records are inserted now let me try to call find now we have total number of six records are available where admin is repeated manager is repeated QA is repeated now let me try to update the record okay now I want to say DB Dot new EMP eror Dot update here I would like to perform the property like in what uh name as an EMP name amp Name colon if I say admin okay so I just close that and I use another curly braces with dollar set that means you want to set the new value here we are giving EMP name okay what I want to do I say variable name is admin change to what foreign that name I want to change it close this close this and run now you can see it is saying n match to one and the record fields are updated like this let me check well here I will see uh the value called admin new is updated but I have one more admin called admin it is not changed and there is something which you need to notice what you need to notice is notice is like when you try to perform update so what mongodb does it starts from the top find the first record change the value or modify the value and come out from the loop it doesn't carry forward its search process for the next level of results and that is something which is I really want to do that so in case if you are planning to change those values multiple times so what you need to do let's take a look here in the similar example here we have a called name admin second property vehicle called manager let's try to say the managers are repeated twice we just want to change to new underscore manager and I want to update multiple values what I will do here I will put comma and say multi colon should okay same multicolon true that you want to say hey I want to update multiple search or multiple repetitions hit enter this time you can say it is saying and match to and modify 2 that means two records found and two records are modified let's check there we go we have got new manager is updated in both the location that's something which is really awesome because this is how you try to perform the multiple changes well in our previous examples you see like how we can perform the update part but we have a more beautiful feature available inside the mongodb and that is called how exactly we can perform absurd clear let's talk about absurd upset is a combinations of update and insert let me try to show you one magic here here when we talk about called update part you see now here we are trying to say uh this point yeah you see about multi-true we have used now here this multi-true is we're trying to update but let's talk about something called manager 2. enter now you can see it is saying no records formed clear now no records found but there's one concept available name called absurd absurd means if I try to perform up certain means if the records are not available it will insert the record I want to show you one simple example now here we are using multi Troop okay so as I can see we're using something called name and we're performing this update part so in this update part we are using this dollar set new manager so here rather than using multi-truth we are saying obstruction when I say up search rule so what happened now they say n matched 0 and up inserted 2 and modified with ID this that means when I try to call this find function you will be seeing now we have a god the another record has been added are we clear now as a new record so upsar does what upset says like if the records are found I will update it if it is not I will insert it that means if I try to call the same thing manage it to fine it is added as a new manager now if I just try to say uh not manage it to I will call QA give it and here we're saying EMP equal to new underscore QA and now you can see it is saying unmatched one and I've sorted zero and modified one so it is clearly telling you like hey I did not find any uh inserted part but yes I matched one record I found one record and the one record is updated now that is very very beneficial feature when you really want to perform absurd so that is a update plus insert very important feature that depends on the requirement if you want to add you can certainly add this so the way we have tried to add this upserted part we can also try to perform the delete part also okay so mongodb also helps you to perform the delete part and how you'll be trying to add it now let's try to understand here in my code if I were to perform any delete path I have this statement name called DB dot the option we are using it that is also collection name EMP sorry dot we have option name for remove in this remove we would like to offer the property okay and what we're talking about now here let's try to add the ID here or the name which you would like to import so I want to say like EMP name admin new so we just say p name okay and then scoreboard admin name okay EMP name admin name when I say remove we can see it is record removing the first record so you can see now the records are removed fine because there is only one admin name is available okay now in a similar way if I try to remove the property call uh new underscore manager new underscore manager hit enter now you can see the three records are removed so it's not like update which removes only one sorry update only one record it can also eliminate more than one records at the same time that's the benefit of remove so now you can see we have already implemented some records as I seen earlier like we have performed the delete part now when I try to say DB Dot new EMP dot find three records are available with me three four and six now when it comes to C in third part we have seen update part we have seen delete part we have seen now it's time to basically fetch the records so find function we've already seen But in find function we also have some conditions so called queries so in case if you want to limit the number of Records into your application you can also do that let's see DB Dot uh new EMP eror Dot find clear now so in find you can also pick up the specific records too like when I'm saying dot find and here we can just say name colon admin sorry here to put curly braces it says there is no record with the name called admin because it is the EMP name not a name so let me change back to now I can see it finds one record so like that you can also apply a condition okay enter your code now in a similar line if you really don't want to offer any condition okay but you want to limit the number of Records to be shown so you have this function available name call limit to 2 means only two records now you can see though I have three records but it is only showing me two records because I have limit those number of Records into my code also we can perform sorting in case if you want to perform the Sorting in ascending and descending out of that also you can also do so here rather than saying limit we just put this option name called sort and in this sort on which property you want to sort it that also you can mention so we can just say PMP name okay and using ascending button or descending order so you can just say um minus one well you got descending order hit now I can see it is showing the descending order now if I just say minus 1 if you just say 1 that is showing you in an ascending order so you can pick up the specific property we have on which you can tell it should be either on descending order or ascending order so that option really works very fine okay so that's like how you can perform the queries but remember one thing you can also search the records based on the embedded columns too because if you see in a previous records we have some records added okay that is let me try to say show collections our call SL student and student okay DB Dot Dot find okay you can see we have records which are embedded records now if you want to search the records based on their embedded properties like I'm talking about address this is one property name called City fine so if you would like to pick up those records these are also possible so how you can do this very simple so you say TV DOT student Dot find okay so inside this file you can provide the specific properties like my outermost property name is called what address so we are using this option called address Dot dot City so we say City are we clear colon I'm giving the city name called what Bangalore okay let me close this and that's it okay so we have to start passing another curly places here hit enter and you can see now I find two records because both the records belong to what Bangalore so I'm getting this City Bangalore with me that's really awesome like you can also pass the city accordingly a part of that we also have the other details also okay in which you can have the conditions based on less than greater than or whatever values you would like to make it is available and possible okay so that's how the conditions are satisfied so suppose if you would like to pick the users I'll be clear where the range which you would like to consider so those are also possible like you can see we have this property name called what empid3n6 I just want to pick up only those records whose ID is greater than what two so what I can say DB dot new EMP okay dot find and inside this file we can say the property okay so what's property we're using empid we are saying EMP ID here colon here we'll be using dollar GT GC stands for what greater than colon we are giving the value called what one okay close this right you can see your received three records three four and six in case if I just look forward for higher than five you will see only one record so greater than let's call GT okay same option if I just say LT you can see we have found two records so less than greater than okay so that's how exactly you offer it okay and also you can provide the condition so-called limit as I can say find empid the way we provide it so here I will not use less than okay instead I'll be providing another property let me show you what so here in empid whatever we have taken so let me try to take the property call file and here we are providing EMP ID and then we're using other curly braces and we're using Dollar in is very important property Dollar in Colon here you provide the details I'm saying uh inside so the properties three four six we are saying three comma 6. close this and you can see we got two records which matched with three and six that's the benefit of having this okay everyone so in our previous example we have already seen lot many activities this time we are trying to offer you something very interesting feature and that is known is called working with indexing see momodb is one of the most popular tool and one of the reason why it is very popular because it is having the facility of having indexing now what exactly the index does so friends main job of having this index is to basically give you the concept of like how uh one particular uh document which is huge document in case if you would like to perform any sort of indexing inside this how you will be applying this so to apply indexing into my code let's try to understand why index is really required without indexing and with indexing how will be making a difference into the code so to make it happen we would like to insert some records to confirm okay so what I will do is in Step number one previous records if I see I have got 46341 depends on what earlier records we had it so we had a call new EMP so DB dot new EMP dot find so we have total number of three records are available so it's okay we can have this three records with me now let me try to apply indexing without indexing if I want to find a result what outcome I'm gonna receive so to know about how much time it gonna be taking if if I have a got large number of records with me I'll be using this statement name called DB dot the name is called New EMP Dot explain and here I will be using one predefined functionality called execution starts execution starts okay now here after the execution starts you'll be using Dot fine we'll be using the first property here okay and what user would like to find it that you need to basically offer it so we are giving the name called EMP name colon with the name call QA okay let's close okay now when I pressed hit enter execution stats is a predefined functionalities which will tell me when the query was executed what exactly the query plan was hit enter and now you can see a lot of details are available with me like you can see pass query winning plan and everything one thing you need to Remember by default here when I try to run it says and return one Advance or need time total everything it is showing me but one important thing which you will see here is total number of documents is scanned so it is telling me total number of document examined is 3. clear now and return one that means one result is returned and the total number of documents examines three in order to find this record just imagine a use case here when I say total number of documents examine 3 in case if I ever got millions of records with me that means to search the record it will examine all the Millions number of Records to search the result which certainly gonna be taking huge amount of time and that's where exactly when you try to search the record fine when you have no indexing is available okay so you need to understand one important thing is by default index is applied on your underscore ID DB Dot new EMP um yeah DP dot newmp dot when I say DB dot new emp.getindex is a predefined function it tells me like hey by default index is applied or underscore ID that's the fact because by default index is applied on underscore ID not on the other properties so I need to identify which of the properties are required to be get indexes mongodb advantages it is supporting multi-column indexes and that's what exactly we would like to see so let's see in our next demo now we will try to apply indexing on our own property okay so to apply the index what we need to do we have to say DB Dot certainly we will be talking about called collection name call um new EMP Dot create index here you have to pass two things number one on which property you would like to apply okay and it has to be ascending or descending so I am trying to apply on EMP and I want the index to be applied on ascending order okay so here colon 1. hit enter you can see now it is telling me like uh number of indexes before 1 and number of indexes after 2 that means earlier index was available only on one particular property now it is applied on two properties if you want you can check now you can see there's another property is added called EMP underscore now if I try to execute a similar query which I executed earlier now you'll be seeing there's a different statistics all together here if I see in my code see it will tell you total document examined one see now earlier the number of document examined were 3 but since this index is applied not as telling me the total number of document examined is one so performance is certainly improved so to search your document it won't be searching the complete collections okay rather it will search what only that particular column in which it is actually applied for so that's the benefit in fact I would say when you will be using these kind of indexes into your code okay so hope we all are clear and understood about this concept so let's go ahead and get this implemented into our system well this is the first way of how the index can be applied so you can also apply index on multiple properties clear so that we will show you one by one how it is okay everybody so we have already seen in our previous example how we have applied indexes in our existing mongodb application so it is also a possibilities where we want to also apply the index on other number of properties too as you can see in our existing database okay an existing collection my collection name is new EMP which contains two different properties one is called EMP ID and second called EMP name just now we have applied index on our EMP name but in case if I want to apply index on EMP ID I'll be using the same technique okay let's try to apply index on the same so first of all get indexes I'm having this index applied on two different property now we would like to say DB dot create index and here in this DB dot create index we can just I will say DB dot collection name so our collection name is called New EMP new EMP dot create index first prep parameter is certainly the name of which property we are applying so here we are saying EMP ID and in this EMP ID we will just offer it has to be ascending or descending let me decide descending order so we're saying -1 okay now let's press enter and check the status okay now you can see earlier indexes which we have created that was two and now it turns to three so it is very clear that index is improving now let's check this out uh DB Dot newmp.getindexes now we have a total number of three indexes are available so you can apply index of n number of columns if you want okay at the same time the way we have created the index in case if I want to drop an index so we can also drop so what we can do DB dot new EMP dot drop index drop index and in this drop index we have to provide which particular index we would like to drop remember this point in case if you're planning to drop any sort of index so you need to provide which index so you should have that particular index name okay so here we are providing my index name so it should not be uh I would say the traditional name called EMP ID no it has to be EMP ID underscore minus 1 or so this should be the name I'm saying EMP name in case if you try this you see it is saying index not found with the EMP name because internally it maintains with this name let's try this out we say EMP name underscore one let's try and now you can see new index was 3 okay 1. okay now you can see we have a call empid and underscore ID so now we have only two indexes left there's no EMP name anymore this is how exactly you can drop the indexes so it is very simple and straightforward way of how in mongodb you can perform your activities hello everybody and welcome back in a previous examples of mobodb you might have considered we have used lot many operations in our last video we have seen how to utilize indexing into our code now in our next journey of our mongodb we will see how aggregation Works see in mogodb aggregation plays a vital role and aggregation comes with so many handy functions with mongodb which will help you to perform and to apply some very simple code Snippets into your ongoing uh I would say the requirement which can make your query so much seamless now we will see how this aggregation really works and to work on an aggregation we have taken some default database name called aggregate DB and here we have a called student as a by default collection in which we have some set of records are already added now if I just want to apply aggregation now I would like to tell you about what exactly the aggregation is see ideally when you talk about call aggregation okay so aggregation is nothing but a call aggregate like rdbms if you see typical aggregation there so the Unix command like you talk about shell pipeline means the possibility to execute an operation on some input and use that output as an input for the next command that means the output of one particular execution becomes an input for others so mongodb also supports same kind of concept in aggregation framework there's so many type of functionalities are available which we will see one by one into our next code okay now here we want to confirm about a few important things now here let me try to bring some of the important well-known I would say the functionalities of our aggregation framework first we use a term name called dollar project the project is basically designed for select specific specific Fields Donald project is designed to select one specific fields from a collection we used to talk about call what dollar match the match is responsible to filter out the operations are we clear now it is designed to filtering out the operations you talk about dollar group foreign dollar group so it does the actual aggregation fine we talk about call Dollar sort okay it basically sort the document okay like that there's so many operations that are available which we will see one by one in our aggregation Behavior now my first example the one which I want to execute I have a call student record with me which contains a student name look at the section and the marks and the subject on which subject the person or the student disappeared now here my first requirement is we want to filter data based on a Section 8 because students belong to different sections as you can see now it is they belong to the different section section A B C D so I just want to filter the data based on a section A okay so for filter out I would like to use dollar match let's see how it works so I just would like to filter out only those students who belong to the section A so how we would like to use it now I will say DB Dot student Dot aggregate and inside this we would like to use this square brackets and then curly braces and then use dollar match with this I would like to use another curly braces and I say section a okay and I close this close this close the square bracket close this okay so DB dot student dot aggregate aggregate should be always associate match is now the aggregate functionality section a hit enter and you can see now it lists down all those students who belong to the section 8. okay very simple and straightforward example now we would like to use the second example so we want to find out all the records where this section is a and we are using and operator Max is greater than 80 there are so many students who have a different marks like 1719 and whatever so we want to use both the conditions together so how are you going to be using this now remember not only the section A but also marks were greater than 80. so similar thing we have a call match okay after this match we are starting this curling braces okay so after this match we would like to bring and reset dollar and and again colon again we are starting this call bracket now okay we talk about what section A number one and after this the first curly braces we would like to use marks we say marks colon and once again we would like to start curly braces and here we use dollar GT that is called what a greater than colon 80. okay all are closed so you see like here we have got this square bracket and noun brackets so what else is left so we have a call 80 we are using another curly braces needs to be closed here and then square bracket okay and followed by again curly braces green curly braces again square bracket again round brackets okay let's see where it is going wrong so we're using this DB dot student.aggregate we'll use this yeah square bracket then curly braces then we use dollar match okay after the dollar match we are using another curly braces and we have a call and operator after this and we have a call this now square bracket then curly braces section A outer section is getting closed we are using another curly braces marks colon dollar GT okay and we are using what colon 80. after that we are closing this and using two more curly which is coil packet and this okay so this where exactly you can utilize that so DB dot student dot Aggregate and like this it will be able to get it now okay so in a previous example that was the only missing point was after this uh this dollar match we didn't apply this curly braces that was only missing point which was there and now we have applied another code is giving me this outcome and I have only one user who's scoring greater than 80. well that was the first thing which we have it now along with this I would like to go ahead and talk about few more things now I just would like to bring selective Fields not all the fields like as you can see we have a call student name section marks everything I'm getting it so I really don't want to bring all the properties from this document I would like to selectively take specific property so let's talk about how we can use this so we'll be using project you remember about project is responsible to select a specific record so I just use this statement name called DB Dot student okay dot aggregate we are using it now after that square bracket then curly braces now we are trying to say dollar project what you would like to use dollar project and colon we are trying to use student name okay colon okay remember one thing one means I want those zero means I don't want so whichever property will be enabling it by giving the one as a digit that means it is it is expected to be displayed so I'm saying one comma I'm saying section colon 1 okay and I'm also looking forward for marks colon one that's it so now you can see now I am once again picking up only those like student section and marks now if I go back and remove some properties like I only want student and section you can see I have only students and sections are used here if I just use this statement name call underscore ID column 0. now you can see only the names and sections are visible ID is not because I really don't want ID by default ID is shown but if I says 0 that means the ID will not be visible here so like that you can select The Columns or the properties accordingly that was the one way now one other thing I would like to use what if you want to find out the student name section and marks from student once again we want to find out this total name section and marks from the student collection where the section is a okay so here it will be the combinations of match as well as the project how we can use this let's take a look towards my implementation if you see the previous one what we have used here you remember about we have used this statement called aggregate match okay so now we would like to go back and utilize after this dollar match this is a curly basis I'm giving section colon a foreign a and after this I'll close this okay and close this again I'm opening it up by using this option call project dollar project we are picking up the project right now and here with this colon symbol we can use again and say student name thank you student Name colon we are using one comma section colon one and one Max colon one and now closing this now I can see I got those so the requirement was we want to find out the student name section and marks from student collection with a section is a so you are not only using the match okay but also using what the selective details like this you can implement it okay that's where exactly the projection really works so projection gives you lot many opportunities which you can utilize it for your own and also it comes with lot many predefined functions like in some AVG and all so let's talk about those functionalities too so this is the first thing which we have seen aggregations are taken place now in case if you would like to perform the group like if I want to find out a total marks Group by okay section like each and every section I would like to confirm the total marks in every section then how will I basically do that so let's try to get this example also so here let me try to go back and we will not be using match here because I would like to use the group part so after this curly braces we want to use dollar group okay that is called Group by rdbm is how you use it here we use this curly braces again here we are passing this underscore ID okay you have to provide underscore ID in a group because you cannot skip it that part you need to be always remember you really can't skip dollar ID whenever you're trying to talk about code group this is a compulsory field you need to have it after that Now using this section in this section we are saying dollar section because we would like to make it on a section basis after this closing and here we are using what total marks colon here curly braces again uh dollar sum okay colon on which we have I want to use in Mark so I can say dollar marks naming convention is very important because it is a JavaScript so it is a case sensitive okay then and you can see now section wide I'm able to get all the marks isn't this an amazing that's where exactly the aggregations are playing very important role while retrieving such kind of Records so hope you are clear about how we utilize this together so in a previous example we got it like how we are basically taking this marks in my application fine so we are clear about how we are picking that up but what in case if I would like to take a marks for the specific section so it is also possible so we'll be using the same group but only thing is what will be bringing the match between because here we are trying to get the all the section marks but if you would like to bring it only for the specific section we know it variable what we need to do so here before I talk about called dollar group we can use one more curly braces here okay so we can use this option called dollar match okay and here we are using this uh option called section A sorry here in dollar match we are giving this call section colon here beginning for closing this closing this followed by the other areas like in group which you want to start now so you can start with this curly braces hit enter and you can see now only the specific section we are able to receive the records and that's very simple now okay so that's where exactly you would like to perform and there's another option like in case if you would like to perform at an average suppose if you want to fetch the count of student in each section and total marks and average marks as well is so total marks as well as the average marks you want to get it so how are you able to take it now so it is very simple as you have seen earlier also into our code how you have taken called group underscore ID section talking about section total marks with the sum we are also using this after that we can also use the average Okay so this is we have taken group underscore ID sum so here on which we will start so when we say sum marks after that we can just put curly braces and we can just use count okay and uh after this we'll be using this colon curly basis and use dollar sub okay colon one okay and after that I'll put comma here and we use average and inside this average I will use in curly braces we can say dollar AVG okay colon of what dollar marks very simple so curly process is closed okay so total how many three curly braces will be closed one square bracket and all brackets and now you can see you got the average markings in each and every section so just imagine how easy it is for you to deal with the aggregations so aggregation seems to be very very simple approach provided by mobo TV that really create a difference of how the aggregation changes the way how you react to okay everybody so after going through uh the idea of like how we can utilize the concept of aggregation it's time to talk about like how when it works with mogodb mobile DB is properly known for I will say for replication that is called high availability and that feature comes by default with mongodb you really don't need to install any software for this because it is a built-in feature for the mongodb uh so when you download that it comes along with this so no additional configuration setup is really required when it comes to the mongodb part okay so let's get started and talk about how mobile DB can offer the replication see the idea behind the application is what the idea application is like you are replicating it okay so we talk about code replication you are replicating your data to wait the multiple Childs so here in Mobile DB we have one concept available okay that is known as master okay and slaves okay Master is one and there will be multiple sleeves okay so these slaves where your records are actually stored and this is the master which will be responsible to replicate the data to all its Childs when the request comes due to that in case I have one particular node fails so automatically the data will be taken from the other nodes that's the beauty of having this master and node slave process so to make this possible we have a very simple option available concept like call mongodb Atlas so there we can go and get our cluster ready so here we start with the concept name called DB Atlas let's search for momodb Atlas and here I see mongodb Atlas database as a service see this is a free tool it's the cloud environment where you really don't need to install mobodb in your local machine it is a cloud-based mongodb support which is free to use with a limited amount of space but yes for the testing purpose it is the best suitable so I can start with the start free or else I can say the login here okay from there onwards I can go ahead now it is getting ready now this is a place from where you can start working on your cluster see as I've told you like initially when you will be working on this mobile DB it will ask you to create a cluster initially okay since I already have a cluster with me okay so I really don't need to create it and as a free tier it will not allow me to have more than one cluster setup ready so if I say create a new cluster okay and I say by default AWS okay under my closed on this notification AWS you can select any other cloud provider and uh 8GB Ram Cloud backup cluster name you can see now it is taking me 0.54 per hour reason being because I already have a cluster with me hence more than one cluster is not allowed in a free tier cluster so I have to cancel this but you can go and create a cluster the way it was offered there so if you want to create you can just go ahead and do nothing just select by default AWS select your location okay give the name of the cluster you want to give anything you can give it here otherwise let it be the by default name cluster and say create cluster it will take a while minimum two to three minutes depends on the availability it creates a cluster for you and your cluster once it is ready it looks like that Okay so here in this application you have to go back and understand what is there any questions when I click on cluster zero you can see now here we have got three nodes available one is called primary node which is called Master as I suggested earlier and no viable called slaves automatically when the Clusters are created inside this mongodb by default it will be three node cluster where the one will be the primary and two will be secondary based on your package whichever you have taken it you can increase the number of nodes later on but as a free I am gonna get or I will be receiving total number of three nodes available here so record whichever will be stored it will get stored automatically in both the nodes secondary nodes and from the primary I can insert the record and secondaries I can read the records remember you can't insert records into the secondary so you can only insert a record only in your privacy course secondaries are not allowed to insert so this is your replica set okay these are the nodes which are available to you so when you click on this primary here you will see it is telling you node whatever no data available no data available nothing is there because I haven't stored any records as such so I just go back to my cluster so initially I would like to go back and create few things now okay I would like to go back and set up few initial things at a time of creating the cluster because when you cluster is created clear now so in that point of time no setting is configured you have to do few settings now first setting is you have to put it and remember the steps First Step will be your network access so in network access you have to go and you have to say add IP address and in this add IP address you have to select this option from which location you would like to accept only those IP addresses will be whitelisted otherwise what you can do you can see here in my options I have given 0.0.0 that means all IP addresses are acceptable so all IP addresses are used okay so this you have to enable it otherwise you won't be able to get this network access from any third party locations next you have to talk about call database access which is required for you to create a new user there are already some new users are created but it is recommended that you to go and create a new users here okay so you can go back and add a new user so by default it is username and password is given so you can go back and create a new user when I say add user you can give the username as well as the password as per your own convenience so new user I'm going to create a title is called SL okay user and here we're giving call admin one two three so SL user admin123 remember this will be the username and password I'm saying add user new user is automatically added as a user every one two three so once you have provided this network access database access next you have to create a new data so what you need to do when you go back to your statement okay network access database access it will ask you like you want to create a new database so I just go back to my project zero will be on an option equal collections you have to go back and create a new collection here now it is retrieving the list of databases now you can see there are already some collections are there my DB is one of the database which is there demo DB is there not many databases are there so you can go back and create some new database and connect through so if I just create database I already have a simple learn DB with me user app is already given collections are created so creating a database in correction is very easy if I give you the quick demo I say create database give the collection name call SL demo okay and give the username call EMP resslew employee like say create now you can see SL1 create it is there with me so there is no record right now and once it is there ready so remember asset demo and employee I'll go back to my uh code again project zero and from here I can say connect because I want to connect it so to connect it from because your mongodb is already there so you want to connect it through so to connect it through here very simple option available you can just click on this correct option multiple options are there through share connect your third party application of the mongodb compass so since I already have a shirt with me so Mac OS I have this Mac OS with me so you can just use this line okay so if you have a window you can select your window since I have this Mac OS I'm selecting this line but I need to replace with this you can see this username okay and you have to give the username here I will I'll selected this I open my terminal okay and this is I'm just closing this I'm opening up other terminal here since I want to correct to the mobile shell now so what I need to do here in this I'll just paste that the command which I have it now username is you remember I told you you call some users which you have already created let's check here SL user I see Excel user I hit enter It'll ask me the password so I've given the password admin and now you can see it is connecting with me to this particular see now see it is connecting me to this a particular replica set you can see in a logs it is telling you very clearly okay saying that it is a username 4.2 and you can see it is correcting with your sharp cluster the cluster which is created and this is where exactly I have it with me so I'm connecting with this environment so primary is there if I just want to go back and say show collections so I can go back and create a new collection here okay so it's up to you now by default collection which is her employee so I can say DB Dot employee Dot insert and now here we can just add name okay now you can see some exception is raised so you understand foreign s are added into my primary cluster so if I just go back and go back to my project zero where we have got collections here you will be getting the SL demo employee loading the documents if it takes time to get this but this is where exactly you see the records will be stored okay so that's where exactly it works fine for all of you so we have this record okay so when I say show collection so we have a call employee when I say TV DOT employee Dot find so I can see we have got new collection name called this is added right now okay so like this you have got the first connection established and the records has been inserted hey everyone my name is ishan and I welcome you all to this session in this session we will have a look at the basics of GitHub before diving deep into the subject let's first have a look at a use case the used case we will consider today is that the world's largest Sporting Goods retail brand decathlon decathlon has 1600 stores spread in 52 countries with around 100 000 employees the IIT team of GitHub consists of 1000 members that helps decathlon to bring its Shoppers journey to their devices so here we will first see the problems that they faced and then we shall see how did they sort out that problem in the beginning decathlon worked on the data center with the help of a VPN and using a VPN was a huge challenge in terms of workflow visibility and avoiding redundancies so the first problem is how to maintain workflow visibility and avoid redundancies then since there are so many stores located at so many different places hiring of developers seem to be a difficult task as a physical workplace was always needed so the second problem is how would they hire developers now let's see how did decathlon solve these two problems one after the other in the first case the entire decathlon shifted from any other remote repository to GitHub GitHub turned out to be an amazing open source Community as the code became more visible across the organization and now anybody could contribute to it then let's talk about the second case for hiring the Developers as we know GitHub is an open source community so it helped in collaboration with any developer all over the world the potential developers could now contribute to benefit the global community now the question arises what made this contribution possible so the major contribution role was played by the Version Control System this was just a single case amongst many others there are many organizations that have benefited from GitHub now when we have realized how GitHub has revolutionized the market let's start learning more and more about GitHub as we move forward let's have a look at what is Version Control System Version Control System are the software tools that helps in recording the changes made to the files by keeping a track of modifications done to the code there is one repository and each user has their own working copy the changes are committed to the repository which are possible to be seen by others the two most important things to make changes visible are you commit and they update as we discussed it is a system that keeps a track of different versions of a file and hence a specific version of a file can be called whenever needed this makes the collaboration amongst developers easy and also provides the members of the team to work on the latest version of the file moving forth let's see what is git now when we have learned Version Control System the next thing we need to know is what is git git is the most commonly used version control system that helps in tracking changes made to the files hence we may have a record of all the changes that have been made to a file and we can also revert back to a specific version git simplifies the process of software development with the help of easy source code management git is not only helpful and popular among developers but also helps non-technical people to keep a track of all the files they have been working on get further helps in the process of collaboration and permits changes made by multiple people to all be merged into a single source then git automatically merges the changes so two people or two different sources can even work on different parts of the same file and later on merge those changes without losing each other's work this is specially useful when the projects are really big and many people are involved in it now when we know what is version control system and basics of Git it is time for us to jump on the topic what is GitHub GitHub is a service hosted on the web where all the projects are stored every project on GitHub has its own repository and its unique URL git provides a graphical interface to store the files and helps team members to coordinate on the project from anywhere GitHub provides several access control and collaboration features like wikis and basic task management tools for every project let's now have a look at the features of GitHub the first feature we will see is easy project management GitHub help project managers and developers to coordinate better on the project the work can be easily tracked and updated which makes sure that the project is on schedule and as entitled second feature is increased safety with packages the packages on GitHub can be published as desired they can be published privately or within a community or can also be published publicly the packages can be easily downloaded from the GitHub to use and reuse them next feature is the effective team management now as all the team members can stay updated with all that's happening on the project so this helps them in staying organized and well coordinated the pull request and other modification tools make sure that the team focuses on the code moving on the next feature is improved code writing with the help of GitHub the quality of code has significantly increased now with the help of gitpool command one can review improve and propose new codes along with that suggestions or modifications may be discussed before changing the original code the next feature is increased code safety GitHub uses code ql which is the industry's leading semantic code analysis engine this tends to find risks in the code which other tools tend to miss the last feature we shall see is easy code hosting as the name suggests the codes and documentations are hosted in one place we also know that there are thousands of repositories on GitHub so each repository has their own set of tools to release and host the code finally let's have a look at the competitors of GitHub there are several competitors in the market here we have just put the most common ones first is at least in bitbucket then comes fog bugs followed by surround SCM and gitlab then we have buddy and finally followed by Beanstalk this session we are going to understand who a full stack developer is what are his desired skills the amount of money he makes on an average per year and finally I'll help you build a resume for your future endeavors first let's understand who a full stack developer is everybody uses social media applications the main reason we use them is that they provide excellent user experience and interface these apps work pretty seamlessly all thanks to full stack developers a full set developer is associated with creation of a product from its start to finish heat assigns the front end and the back end of an application while ensuring its efficiency reliability and other crucial features now that you have a basic knowledge of Water full stack developer does let's look at some of the desirable skills of a full stack developer first up for the front-end development you should have a good understanding of HTML and CSS HTML short of hypertext markup language governs the appearance of text and images on the screen it formats the text as headings paragraphs or pop-ups CSS on the other hand is a styling sheet it helps with beautifying the content on your screen in the form of font size colors and spacing next crucial necessity is Javascript it is a powerful client-side programming language mainly used for enhancing user interaction with the application it offers several libraries and Frameworks like react angular View and jQuery you need to be proficient in one or more of these tools next up we have Version Control a worship control basically records all the changes made to file over time so that you can recall them at any point in time most predominantly use Target and GitHub get us a free and open source distributed Version Control System designed to handle everything from small to very large projects with speed and efficiency on the other hand GitHub is a repository that provides a user interface for git which provides features like Fork pull and merge moving on to backing skills basic knowledge of node is essential notice the hottest JavaScript runtime environment around right now used by a ton of applications and libraries if you're writing applications for the server node.js you need to be familiar with the environment next up is python python is used for several reasons when it comes to full stack developers the most common one being the fact that it is better readable than other languages like C C plus plus or Java it is easy to learn and does not require a lot of coding it also comes with many libraries and Frameworks and has a thriving Community for Developers Django is a high-level python framework that performs actions like authentication database migration and URL routing among others finally the backend skills would require having good knowledge of dbms some of the commonly used databases are Cassandra mongodb and Oracle database you should be able to update the databases and retrieve information as and when needed a full stack developer needs to possess some basic soft skills as well first up is creativity the developer must understand the objectives of the project and should create a product that engages the target audience next up we have strategic planning planning is a critical phase in any development life cycle the developer should possess the aptitude to strategically plan the design development and implementation phases this helps streamline the process next up we have analytical skills as the name suggests it's crucial to analyze the information and make decisions so as to maximize efficiency now these are skills that one develops when they are exposed to but a good sense of understanding is required problem solving skills are again crucial to predict any errors and develop a bug free application from the business perspective as well problem solving skills play a significant role in ensuring the smooth conduction of tasks and finally we have time management skills the developer must be able to meet the deadlines while ensuring proper execution of his tasks moving on let's look at the full stack developer's salary in India the average salary of a full stack developer is about 5 lakh 90 000 rupees per annum in the U.S the average salary of a full stack developer is around 75 000 US dollars now if you wish to make a career as a full stack developer or wish to look out for better opportunities a good resume is key first let's look at a sample resume for a fresh graduate first up is personal information mention your name and contact information moving on to summary write a few lines about yourself and skills that you are proud of make sure you keep the section brief and to the point next go ahead and provide the links to your LinkedIn profile GitHub repository and blogs if any in the next section mention the projects you have worked on write a sentence or two about the objective of your projects moving on to internships mention the name of the company you have interned for along with your role responsibilities and the time duration again ensure that you keep it short and simple this adds credibility to your profile you can also go ahead and mention the university you are graduating from and your final graduate score lastly mention your skills this is an important section since you will be judged based on your skills you can first mention all the technical skills that you're confident about mention some soft skills and extracurricular activities that you participated in now let's look at a sample resume for an experienced developer the personal information Remains the Same however in summary you can mention your years of experience and your designation in the previous company go ahead and provide the links to your LinkedIn profile GitHub repositories and other links you feel worth mentioning moving on to experience clearly mentioned the name of your previous company your tenure and the designation mention the responsibilities Your Role came with make sure that you don't over exaggerate use short powerful words like developed designed managed and supervised mention any awards or recognitions you have received this adds a lot of credibility to your resume you can also provide your academic information like the name of your University the year of graduation and your graduate school finally talking about skills prioritize them according to the job requirement and mention them in the non-technical skills section you can mention a few soft skills that you are proud of if need be you can also mention a scenario where they came in handy if you wish to mention some other Hobbies or activities go ahead and mention them having said all this it is vital to not lie on your resume make sure the information you provide is accurate and not misleading so first of all you will understand how to add programming projects to a resume and then we will go through different types of projects like portfolio project web scrapping projects API based projects games e-commerce Etc we'll go through each of these projects and understand why these projects are important so having Web projects on your resume whether you are new to coding or a seasoned programmer emphasizes your technical skills and experience to companies while helping you stand out from the crowd this tutorial will teach you all you need to know about choosing and presenting programming projects on your resume so let's first understand how to add programming projects to your resume so the recruiters and hiring managers don't have much time to go through the entire resume so in order to make them notice the best projects you have worked on you have to include them in proper place in the resume you can include technical projects in your work experience section so that the hiring managers can see them when they examine your resume also if you have the prior employment experience include your programming projects in the extra experience box you can mention the description of the projects the Technologies you have used while creating the project and your responsibilities and achievements for the project you must include the most important technical project you have worked on and can also use the relevant resume keywords in your programming resume listing relevant programming projects allow you to get passed through applicants tracking systems so use proper resume keywords by carefully reading each job description and adapting your resume achievements and experience to meet the particular qualifications that firms are seeking for so this was about how to add the programming projects in your resume now let's go ahead and have a look at some projects that we can add in the resume which will increase your chance of selection during the recruitment process so now let's go ahead and have a look at some projects to add in resume so first would be portfolio project so one of the easiest projects to start with is a portfolio project it enables you to demonstrate your abilities and create a personal website that is as simple as and as complex as you choose if you create a personal portfolio that you can immediately show on the website it will be easier to deliver and showcase programming work to recruiters including portfolio projects on your resume can be especially valuable if you apply for a creative field such as design writing or marketing in these fields a portfolio can provide a tangible example of your work now next project to add in your resume is web scripting companies will be impressed if you demonstrate your Mastery of web scrapping to scan and capture data from a website web scrapping is a practice of obtaining information and content from a website it is especially prohibited to do this for publicly unavailable domain including web scrapping skills on your resume can be a valuable asset particularly if you are interested in careers in data analysis data mining or software development web scrapping can be useful tool for collecting and organizing data from a variety of sources python web scrapping projects are popular among beginners these days our Channel already includes a python web scrapping tutorial you can check that tutorial the link will be added in the description box next we have API based project as a web developer using search inputs is an important skill to have so consider adding an API to your list of programming projects API or application programming interface which is an intermediate between software that allows two apps to interact with one another apis provide an easy way to retrieve and distribute data within and across companies there are a lot of apis available on the internet including twitters API Amazon API and various other apis creating an API based project allows you to manipulate data understand client server architecture and obtain data from HTTP servers it is necessary to have basic programming knowledge to create this type of project and it will take around two to three weeks to complete this project now before moving forward let me ask you a quick question according to you what was the main reason for Twitter to lay off so many employees do let us know in the comment section below you can take your time now coming to the next project that you must have on your list games so games are an excellent way to demonstrate your knowledge of basic concepts and algorithms including games on your programming resume may demonstrate your knowledge of logic data structures and algorithms a game project can showcase various skills such as programming Skills game design skills graphic design skills and project management skills not only that using game engine software such as Unity Visual Studio or Unreal Engine you can modify or develop an original game with unique 3D characters and story lines overall a game project can be an excellent addition to your resume because it showcases various technical talents in great demand in the gaming business it can also be a great opportunity to demonstrate your creativity and passion for a game development next project on our list is chatbot chat Bots are extensively utilized to save time on the recurring conversation on corporate website smartphones applications and social media Pages a chatbot is a piece of software that mimics human communication or chatter via text or voice interactions to make one you can use a popular programming language such as python Java or PHP these are significant commercial projects and the recruiting manager would like to learn more about you now coming to the next project which is an e-commerce project so the majority of the websites and application with which we interact are and e-commerce platforms and e-commerce websites is one that allows you to buy things online some examples of e-commerce website is Flipkart Amazon zomato OU big basket growfers Etc including an e-commerce project on your resume can be a perfect way to demonstrate your technical skills and experience working on a complex project depending on the specific Rule and responsibilities an e-commerce project can showcase a range of skills such as web development skills ux design skills project management skills and business skills also so this was all about projects to add in the resume if you have any doubts regarding this video you can put them in the comment section so what's your opinion on our list feel free to let us know if you missed out on something important now we are heading towards HTML interview questions now here are a few questions like what is an attribute in HTML so you can consider the attribute are the properties that can be added into the HTML tag and that changes the way the tag behaves or it is displayed okay so you can see here you have a call Button okay so attributes are added right after the name of the HTML tag so button is an element for me it's not an attribute okay so what is the market in HTML file so Mark is something which keep on rotating okay let's say for scrolling down the text Page or the text on the web page Mark is used sometimes you might have seen when you want to display some very important information okay which needs to scroll at the bottom or also right after specific period of time you always use Marquee it is one of the very very old element available under the HTML page so it Scrolls the image top left right center automatically everywhere so you always use Marquee tags for rotating it so the next is what is the semantic in HTML see semantics are htmls are nothing but a call another coding style Okay so when you talk about a semantics so they are basically reinforcing the meaning of the contents like typically you have seen we are using div and span tag but a different span tag really don't make sense to us as an HTML reviewer unless I go inside those and get to know about what they're really doing it so semantics are nothing but these are the standard tags are we clear so you can see like here like bold tag is not useful for the Bold statement as well as the italic tag is useful for what for the italic tag so instead of we are using strong and EM tags are we clear now so this makes more sense to us now the next thing is how do you display a table in an HTML web page so obviously we have a got table tag and under the table tag I can or align the complete layout of my web page because of table head table body table row table columns there are multiple different type of elements which are available okay which are the part of table it's just to basically align the content in a proper format so what is SVG okay so SVG is basically known as a kind of a graphic which is written in a typical XML language the svgs are the high quality Graphics which doesn't tear off when you basically grow and increase or Zoom so normally what happens if image you talk about jpeg images after Beyond certain point the pixel get deteriorated but here in SVG it never happens so you go to any level when you want to zoom and you're gonna get accurate contents at any point of time okay so these vector graphics are really typically 2D base diagrams and give you the X and Y coordinates in a regular systems next how do you separate a section of text in HTML to separate the sections of text in HTML we always use what either br we always use block code or else we use what a paragraph tag so BR means anyways it's separate out a text and break the current line paragraph is used to again write a paragraph of text in the block codes is used to define the large quotated sections okay next is how do you create the nested web page in HTML so obviously we have a different type of options that are available like an iframe okay you need to say page within a web page okay so we can create a page within a web page with using iframe so there's a very very common questions we used to receive at a time of interview okay the difference between ordered list and unordered list so audit list will give you the different ways to display the data in German format in numeric digits or else you can talk about like in alphabetical order but the unordered list it completely unordered you don't get any options like in order list okay so the audit list start with ol and unordered list starts with UL okay so we have already seen the difference between order list and unordered list now it's time to talk about our another Tapper type of interview questions which is regards to your CSS now in thesis interview the first question they always ask you like how do you add CSS styling in HTML so we are different ways to include number one we have a called inline CSS where we use the element and within that we try to add a CSS content that is called inline CSS second is called external style sheet okay where you can just use as a secondary or the you know external CSS file and this include it into your existing HTML page okay that is the additional file which you write it in the CSS and you include it in HTML and third is called which is the internal style sheet which you write it within your HTML but the only difference happens when you talk about external it is reusable across multiple web pages now the different type of CSS selectors which are available so we have a different selectors like a universal selector which is available where you use asterisk sign and select all the elements and offer the common style second we talk about element type selector where you have the specific element name into your mind and you offer that particular type of selector ID selector is responsible to select the particular element within having the proper ID class director which starts with a DOT class okay and having the class name we talk about decidance selector so in deciding selector you basically try to select all the elements which are the part of that okay so you are selecting this container and under that all the child elements of the box okay so we're talking about like in what of your decident selector we talk about called child combinator so in this case you are basically trying to select all those which is a child of this container so you are using this greater than symbol of container dot box okay so selecting all those which are having the child name called Box available then you're talking about a general sibling selectors with this Tinder sign and finally we talk about like an attribute selector where you have a proper attribute available to you okay so these are known as call a general CSS selectors followed by we have a next question like in what is SAS lesson stylus friends these are the advanced level of CSS used in the industry so we talk about like it what is a SAS which we talk about like in statically awesome style sheet so we also have a similar type of option like in less and many more okay so it says about the SAS saying that it is a systematically awesome style sheet it is basically taking the complete CSS to the next level so that is a third party website but once again it is very awesome CSS which can offer you the mathematical functions as well as the reusability you talk about less okay so we talk about linear style sheet where you can see all statements which starts with at the rate sign there it says every single variable start with the dollar sign then you talk about stylus it is also flexible CSS so it doesn't use at the rate or dollar for any defining variables we can just directly use this with the name okay and use it at any point of time so these are the three very popular new or next Generation CSS so explain box sizing property like how you can offer the property for the Box sizing so here so box sizing property actually defines how to basically Define height and the width of the box which are calculated so you talk about a term name called content box you talk about padding box and you talk about border box typically we use three different type of box content padding and Border box in a Content box these are a default width and the height which can apply to the elements content which are there under the content box okay padding box are here you talk about the dimensions which are added to the Box elements of the content padding third which is available called border box so here the dimensions added to the content padding and the Border now what are the different way to hide the element in a CSS so we have a different way either we can use display none that means whatever is there inside a Dom it won't be visible to you second option is visibility hidden that is another property through which you can eliminate the visibility but the thing is like it is not visible to the user but this element is added to the Dom and takes up the space but in display none it doesn't load in a Dom so somewhere to when you want to talk about performance display none is anytime better and second chord position absolute so this can be made to appear outside the screen so three different options are available next option what does that important CSS mean so the important keyword actually indicates that the highest precedence and it overrides the Cascade properties okay so like as you can see here we have a call paragraph where we have a color called important and this is one ID name called thing color called Green so when I talk about PID equal to what thing so it automatically tried to override the highest precedence okay now what are the CSS Sprite CSS Sprites is a technique where you can basically take uh larger image okay download in a single shot and try to cut down to the pieces and utilize the way you always want okay so if you're using this small small images separately okay so to load those images independently you would be making multiple HTTP calls which can be an overhead so it is good to basically download this a lengthy image in a single shot clear and utilize them as per your convenience within your application so it is used to minimize the loading time of your web page by combining multiple smaller picture into the single image okay that's what the CSS bytes are so which property is used to underline and strike through and the overline text so we have this option textile textile text decoration text transform okay so the text decoration so the text decoration is the one which will be helping you to achieve this okay everyone so our next example is towards focus on JavaScript interview questions now here we have few questions that are available like what are the various data types in JavaScript so JavaScript contains different type of JavaScript data types like if you think about all different types which are there generally byte short intelong float double character Boolean these are all different type of data types are supported inside a JavaScript okay now going ahead what is the Callback in JavaScript so the Callback means is a function okay that is passed with another function as an argument on a parameter okay so what is the Callback callback means don't call me I will call you clear so the idea is like you are passing the function itself is in parameter to the another function because the JavaScript is known to be called non-blocking which never wait for the code to finish it continues to move on and due to some reason if your function it's taking some time to you know uh execute so JavaScript won't wait for that particular function to finish so you use callback to prevent such Behavior okay that's called a JavaScript callback now what is the difference between function declaration and function expression see this is called function declaration and you talk about a function expression function declaration is just to declare a separate statement within a main JavaScript code and you can be called before the function is defined okay it gives you the better readability where the function expression are always created inside the expression okay and it is created when the execution Point reaches it are we clear and it is used when there is a need of for a conditional Declaration of a particular function now what do you understand about the cookies in a JavaScript so it is one of the very very common question cookies are the one which is created by the servers stored in a client side which is responsible to store all the necessary client activities so that the browser or the application give the better recommendation to the user okay so it is just a a small text file which is stored in a browser itself okay it won't to record something about a user activity you always put it like that and you can also Define the expiry time for the cookies okay as per your convenience to decide how long the cookie wants to be there inside your browser if you do not offer any time spent by default he will get lost immediately the moment the browser closed next what are the closures in JavaScript so closures are the JavaScript is a feature where the inner function has an access to Outer functions variables and the properties okay so you can consider a closure has a three scope chains number one it has an access to its own scope that is defined within its curly braces second it has an access to the variable of the outer function and also has an access to the global variables now the closure is a JavaScript features as I told you like which is has an access to the outer functions variable simple example I can give it to you is a function which is known as called inner function and there is a function defined on the top is an outer function so it is having all the functionalities axis of the outer function inside it now what are the Imports and export in JavaScript so import and exports in a JavaScript is a very very common way how in Java you use the term name call import a package but in JavaScript it is little different unless you export something you can't import it okay so if you want to access any of your files Properties or methods outside of your file you always use the statement of Import and Export so here you can see you have got one property like an sqrt which you are exporting it and you have one function which is called Square this is another function called you can say d i AG which you're exporting it and importing it just the way you always want so that is how it is importing and exporting what is the difference between undefined Undeclared and null in a JavaScript see undefined means a variable that is declared but the value has not been assigned yet that is called undefined Undeclared means like it is a null first of all we talk about null null means it is an assignment value that we can assign to any variable that is meant to contain no value and Undeclared means the variables are not declared and do not exist in a program okay that is called what Undeclared how to remove the duplication from the JavaScript array so you basically needs to use the standard filter methods okay this is basically responsible to help you to analyze whether we have some duplicates available or not so we'll be using using filter methods okay so these are basically what is called array and the current element and the index of current element and by using the for Loop it is an empty array is used for the storing all the repeated elements okay so these are known is called a typical JavaScript discussion which we have taken place multiple questions are there which we have already answered okay everyone so we will go ahead with the next set of interviews which is related to your angular so angular is as popular as I can react okay so there are some questions which are usually asked like what is the data binding okay so the data binding is actually the process which allows the application okay to have some data associated with your HTML page from your typescript classes or the vice versa okay so the data binding is the one through which you bind the data okay so you can see here it says like angular uses two editor binding when the changes happens in a model it will be affected in a view and whether changes happens review it will affect the model also so it is used to typically keep the model and view in sync with each other to have the data interchange what is the typescript typescript is a typical I would say a language which is used by angular okay to develop angular component Services pipes decorators and multiple things it is a superset of JavaScript and it supports JavaScript libraries and apis it is a pure object oriented in nature uses object oriented principles better development time fast to load and additional features to the JavaScript for sure okay what is an aot compilation how it is different from jit aot stands for ahead of time compiler which is converting all angular and HTML and typescript code into the JavaScript code during the build phase before the browser downloads and run the code Okay so aot is far more faster and light weighted in the size just in time compiler is a by default compiler Okay so it is a process where the compiling computer code is the machine code during the execution of runtime so this ensures the faster rendering the browser it also known is called Dynamic compilation are we clear so when you want to develop this aot compiler you always use hyphen hyphen aot okay so here you always use charity compiler because that is a by default compiler you use when you say NG build next what are the pipes in angular so pipes means that they are the decorators they never change their default value but just for the representation purpose they change the values okay to look more better the way they always want okay so pipes are ready-made or else it can be customized created angular also comes with lot many predefined pipes okay like it comes with the pipe symbol here okay so you can change the pipes together it can be provided with some arguments at the runtime with the colon sign okay now you pass the input you put the pipe and get some result with some decorated outcome now you can see the pure pipes uses the pure functions clear so this pipe doesn't use any internal State and the output Remains the Same as long as the parameters pass to stay the same angle calls the pipe only when it detects the changes in the parameters being passed a single instance of the pure pipe is used throughout the all components okay so this is how you see how the pipes are being used so we have defined the pipe okay which is the value called true and false for the pure and giving the class by implementing pipe transform so you can see here the impure pipes for the say for every chain detection actually happens in an angular and impure is called alveolar with regards to the changes in the input fields okay they will be calling every time so multiple pipe instances are created for the C for these pipes and push pass to these pipes can be mutable by default all pipes are pure only if you want to make it impure you always say like pure colon true or pure colon false now what are the promising observables in angular see promises it is a typical JavaScript object okay it it emits a single values at a time they execute immediately after the creation and not cancelable they are pushed error to the child promises okay where the observables are only executable when subscribed to them they won't call unless you subscribe to them using subscribe methods so they help perform operations like it for each filter and retrieve and everything when you unsubscribe this they won't get called and won't listen anymore what are the form controls and the form groups see the form controls and form groups these are two predefined objects comes with your angular so these all text boxes from you take the input it may be radio buttons it may be the drop down it may be the check boxes are called form controls okay so form controls is a class that enables the validation for every single input class whichever you are creating it now so they check the values which are touched untouched or the dirty clear now we talk about called form group they are basically forming a group which under which you have a call relevant Fields joined together are called what a form group okay so form group class represents a group of controls like you talk about address contains city state and pin code these all three can be together called as a form group okay so the form group class basically returned true if all controls are basically what the valid okay and they are designed to provide all the necessary validation errors what is the eager and what is a lazy loading okay so eager loading means what it is a default module loading strategy followed in an angular Eagle loadings are used before the application starts these are typically useful for the small scale applications lazy loading however is designed for dynamic loads of features only on demand this makes your application far more faster so in a bigger application we really don't make easy eager loading because it hamper the performance and you want only when the client asks you want to use lazy loading what existing interpolation in angular see string interpolation is written under the double curly braces it is a typically One Way binding where you get the data from the typescript classes and display directly over your browser it denotes with the curly process and it always display the data comes from the component to the view well let's go ahead with the next area that is called working with reactors interview questions now as we know it react.js is as important as like an other tools which you've already has seen so what is the jsx here jsx called JavaScript syntax extension okay so this syntax extension to the JavaScript in react.js is in the way how you express to bind JS and HTML together to result a j6 content so by using j6 you can write a structure in the same file that contains the JavaScript code that is something more Innovative way because of that react.js is creating a more buzz in a market so j6 actually helps making code more easy to understand and debug can avoids a lot of boilerplate code okay inside the Dom structure now the next thing is what is the virtual Dom see the virtual Dom is representing a Dom in a memory okay that is called virtual Dom so manipulating the real Dom is much more slower and costly Affair okay because you need to repaint the Dom over and over the period of time when the user changes few things so when the state change virtual Dom changes and only the objects which are in real term okay update instead of updating the entire object so that makes your page to be load far more faster okay so in Virtual Dom what happens this is the real Dom this is a virtual Dom so the orange color portions which you're seeing that is basically the changes which has been made okay these are called Changed object okay so virtual Dom is basically compare it's to the previous state and understand which area it needs to send for the updates and avoid the other areas okay that's what this virtual Dom really works so what are react extension react extensions are many like you talk about like in flux it is a third party tool which is responsible to attach the State Management feature you talk about react native which is responsible to develop the hybrid mobile applications in JavaScript so these are two very popular and there are many more which are available okay so like to talk about architectural support you talk about server side rendering okay so Redux and there are lot many other tools are also available so what is an event in react and how you're going to create that so react is basically offering the ideas of handing the event very fairly easy so let me talk about clicking anything you talk about taking your mouse somewhere so these kind of options generate an event so for that we typically say alert and you click on this render you click on this button in a curly braces you call the function to trigger to event now what are the components in react so friends react components are nothing but a call View okay like a complex view can be divided into the smaller portions a complex UI can be distributed further to create more better and reusable views clear so it splits the user interface into the independent pieces of code which can be developed and joins later on okay so that's how you define the component in and react so in angular and react in both the areas the word component is very much used so the component meaning is very simple you talk about a view so what is the state in a react so state is react is nothing but is the one which identify what was and what is now okay if it stores the value for the specific period of time with changes and react is basically detecting those so it is changing because of some actions either taken by the users or by the applications okay so keep tracking about all those States what it was there like in I'm talking about an incrementing encounter so that is also the state a variable there okay so the state object is always initialized in the Constructor so it can contains the multiple properties so this dot set state is used to change the value of the state object and set state is responsible to perform the shallow merge between the new state and the previous state now the state holds the data that a component renders to the web page certainly because every time the state changes so it needs to be stored somewhere so this is how the state is accessed as you can see this example here in the Constructor we are defining the super props and the state has been initialized and you're rendering the states there are three different steps are involved initialize the state render the state and update the states what is the higher order component and pure component react higher components are the component which are typically a function okay that takes a component and return a new component to you by manipulating few things they're basically designed for the reusing okay so the higher the components are typically a function that takes a component and return a new component okay so to in order to perform some reusability a pure components are the components okay is a variation of rear component that doesn't that does a shallow comparison of props and State okay shallow comparison basically checks what the equality are we clear now so that's what the main job going ahead what do we Implement and how do you implement react routing so to implement a react routing react routing also comes with inbuild uh react modules and that particular module to import it so here we Define the react modules by offering the route path where you have a call left hand side is the name and the right hand side is a component which you would like to deliver it now hello this is Matthew and we're going to be going through some of the simple questions that you would be asked during a node.js interview what we're going to do is we're actually going to break out the section into three key areas that'll be beginner questions there will be intermediate questions and advanced questions and the expectation is as you go through this video is that these questions could be pushed together as you're going through the interview kind of think of it like this is if you've answered the beginner questions that you would get asked at the beginning of the interview with confidence and Surety then the client is going to then jump to those intermediate Advanced questions quite quickly and they're looking for people who can help them serve and solve their problems at that more intermediate advanced level so let's just get started so the first question you're probably going to be asked is you know you know what is node.js you know do you know what it's for and essentially node.js is and one of the most popular if not the most popular uh open source cross-platform JavaScript programs and it allows you to build out web applications that run on the server it's extremely flexible it allows you to implement a lot of solutions outside of just the the core programming runtime and it allows you to build Solutions extremely quickly in an open source mindset for devops it is used essentially for creating client-sized web applications we'll see this later on and you may want to talk a little bit about using express.js and how you can build out apis uh to work with node.js and connecting to databases such as mongodb and that is also really good for being able to store a data intensive applications that are asynchronous and event driven in their model and this is important when you're talking about creating applications that can scale rapidly so you can then ask be asked you know how does node.js work well node.js itself is actually built on the V8 engine and the V8 JavaScript engine is the same engine that runs JavaScript in your Chrome web browser extremely fast it allows for high output and non-blocking uh through your i o input outputs and is is single threaded event Loop so you're going to be a van asked you know where can you use node.js and and the reality is the applications for node.js keep expanding but there are some core applications that you can work with node.js right now so such as web applications distributed system and network applications uh probably referencing the web applications is a really good starting point because here you can actually talk about maybe some examples that you've done where you're building out some of these web applications indeed one of the things that you want to be consistently doing and peppering your answers with is examples of work that you have done now it doesn't matter if those examples are purely experimental or training examples that you've done the fact that you've actually worked with node.js and created a distributed system or a web application is really valuable because it shows that the person that you're meeting with that you have knowledge and understanding and practical experience of applying the theory of working with new Js with the practice of working with node.js so we asked about you know and essentially the i o refers to the transfer of data in and out of a system and that's really it you know there's a reason why Google calls that conference i o it's the transfer of data in and out of our brains at that conference the application is same here it's about moving data in and out of systems through using node.js and that every um event can be tracked and whether it's on a physical device a network or files within a system again it's input and output so let's go through and you know you're going to be asked Yoko and you explain the difference between front end and back-end development and this is a question that I can ask a lot when I'm meeting with clients and you know people get really confused about what is the difference between front-end and back-end developments um bottom line front end is what gets resolved inside of your web browser or the app on your mobile device backend is what gets resolved essentially um what we call the the back office or server-side applications but that's becoming more and more synonymous for what gets running the cloud so web applications um really get a lot of the functionality of a web application gets run in the front end and I think with CSS HTML5 uh client-side JavaScript so we can get right in the front end everything else such as connecting to a database gets run behind the scenes in the back end and so you know anything that's going to have like Graphics is going to be on the front end apis are going to be run on the back end and then just finally some of the scripting languages are using on the front end so HTML CSS JavaScript those are all Common Core scripting languages that you would use you can use Frameworks such as angularjs and react.js or View and those would be a front-end Frameworks uh back-end Frameworks will include Java PHP Python and node.js are some of the back-end Technologies you'd also throw in their dot net as well I mean it's just the whole you know Litany of front-end and back-end Technologies and Frameworks that you can use and this is a actually a good point to kind of explain the experience you have outside of just working with node.js but other technologies that you've been working with that potentially that the client is also using so another question you're going to be asked when you're looking at node.js is you know can you tell me about npm and so when somebody asks you what is npm the first thing you're going to respond is do you mean node package manager and the reason why you want to respond like that is so you want to qualify their question with understanding that you know what they're talking about but you want them to verify that and so node packet manager is npm and it's responsible for packaging all of your modules that you're working with in node.js and we have a whole series of videos that we've done on node.js and every single one of them includes references to npm so you're going to be asked you know so okay you tell me um what it is you know can you go into a little bit more um details you know you can provide two main functionalities and so one of them is being able to manage online repositories of modules and packages um so you can go to like search.nodejs.org and you can find a packages that you can install Into Your solution such as express.js and it also provides a command line utility that allows you to manage your packages very quickly through terminal window or command line I use vs code a lot Visual Studio code and it has a command line utility built right into it that allows me to interact with npm so what are some of the modules in node.js and so you know modules um in node.js they're essentially like JavaScript libraries so you can think of some of the JavaScript libraries that you may have used the functionality is somewhat the same but they're designed for node.js and to run on the server and there are ways in which you can go ahead and create some of those modules so for instance if we're creating a web server you can actually use the require commands to be able to require that the server be there so the example we have on the right hand side shows that we really do need to have HTTP which is a web server and we require that to be installed and so that if you're running that npm package it will actually install the HTTP server and then you can actually write some code to actually then listen on the localhost port 2000 for where you'll be running your app education and there are just you know there's a whole bunch of modules that I come with node.js right out of the gate and here are some of the modules that you have and we also referenced that just earlier one HTTP is a core module for running a web server uh you have a utility function that is useful for developers to assess features within your node.js project you have a URL module for any URL passing you'd be doing and you also have a stream which allows you to be able to stream data in and out of your system and be able to manage how that's been worked and then zlib which allows you to compress and decompress files so that you can keep your storage of files um to a minimum so a question you're going to be asked is you know why is node.js being preferred over backend Technologies such as Java and PHP and particularly gyro it's a very mature stable language it's been around for more than 20 years you know PHP runs some of them the most powerful and largest websites out there such as Facebook so why would you use node.js well the first response is kind of a gimme but it is really fast and if you watched any of the videos that we've done on node.js building out Solutions and developing the solutions you'll see just how fast it is the second is the really kind of the secret sauce with node.js is the node package manager and no package manager allows you to install additional functionality such as Express or as a database into your solution really quick clean and there's over 50 000 bundles available for node package manager if you're building out a real-time application that's data intensive and you need to have apis quickly developed then node.js is another great it's really the great solution for you it allows you to build out these Solutions really quickly and there is a easy synchronization between the server and the client due to the code base and then finally because the structure of node.js is Javascript if you are making the pivot from being a front-end web developer to node.js it's just going to make it a lot easier for you to pick up node.js because you have that common language of JavaScript and on top of that JavaScript is the world's most popular scripting language so let's talk about some of the differences between angular node.js and so the reason why this question may come up is the person interviewing you is seeing whether or not you do know the difference between a front-end framework and a back-end framework and this is one of those questions where you can go well there are differences but the differences are because they complement each other so angular is a front-end development framework whereas node.js is a server side and framework are the differences though between the actual Frameworks themselves is that angular is written in typescript which is a modification of JavaScript node.js is written in C and C plus plus anger is used for building out single play client-side web applications and so that's a keyword there is client-side whereas node.js is about building out fast and scalable server-side Network applications uh so uh again the two complement each other uh angular splits web applications into the MVC and model view control components whereas node.js generates a lot of database crazy it does more than that as well but you can think of node.js as that glued to your database so let's talk a little bit about when you're connecting to a database with node.js and so you're going to probably asking what is um the most popular database used with node.js and there are a couple um mongodb is largely the most popular nosql cross-platform database MySQL is also very popular and that's a more traditional relational database you would go with mongodb for really more modern solutions when you're looking at creating an application that's going to really scale into just managing masses and masses of data that has to be created read updated and deleted very very quickly for some of the other popular libraries that you use for node.js Express JS is a very popular one and I really like working with express.js allows me to build out web applications really quickly more importantly it allows me to build out apis very quickly and which you know apis are essentially web applications themselves but being able to do that very quickly with a framework like express.js is very useful uh Mongoose is an application that makes connecting to a database really easy so here is an example of express.js which is a in itself really a flexible but a solution that you can do lots with and Mongoose which is a more focused solution which allows you know to you make it easier to connect to your databases so you know what are the pros and cons of working with node.js there's lots of ways we explain this earlier on that you can actually build out applications that run on the cloud why would you you know what's are the pros and cons so a pro is that node.js is extremely fast at processing thing and event based model uh it really is fast I can't is if you have something that is a very heavy computational task it's not so good at that now I will caveat that this is that node.js is getting better all the time and so you might have to be provide an example of what a very heavy computational task is and that may be uh calculating a risk on an insurance application against many many variables that maybe something that's seen as computationally very heavy but what you can do in that example is you can offload the task to another a solution that's designed for it and use apis to pass the data back and forth Pro JavaScript is used for building out your applications with node.js great lots of people know JavaScript a restriction and again this is evolving as JavaScript itself evolves is that when you do a callback you may end up doing lots of nested callbacks if you're doing something that's very complicated again another way around the con and so this is one of the things that I always look for is if you have a blocker or a barrier how do you get around that barrier and so for instance when you're talking uh to your recruiter you can say look the reason why I use node.js is that it's fast it's event but it's driven I can use JavaScript there are some challenges and but what I do to get around those challenges are and that's where you can say that you know you may run the complex script off and you may write that in net or Java or PHP and then use an API to do the response back into node.js so you get the benefits of Both Worlds but minimize the investment in having to manage a complex environment such as Java versus a relatively simple environment with node.js the node package manager makes it extremely easy to access just an awful lot of functionality with over 50 000 packages there's a package for that so from being able to have a a tool that creates unique identifiers that you might need to have for generating content that gets posted into a database through to to being able to connect to databases through you know to running so many different solutions and the npm package manager with its access to so many different packages makes it great for getting access to all that content now Khan is working with relational databases with node.js isn't as easy as a nosql database now you can do it and there are ways around that and what I would do when this question comes up is always kind of pivot to say hey this is how you can actually then get around building out that application Pro for node.js designed for streaming huge amounts of data in and out a con is that node.js is single threaded and so it can be CPU intensive but again there are ways around that and a good way around that is scaling Your solution and elastic environment such as the cloud so what is the command used to import an external library and so to import an external Library the command is the require command so an example we have here is uh you can assign a variable and the variable is going to be for HTTP and you're going to then require the HTTP service and that means that the application itself won't run unless the external Library the HTTP library is installed okay so those were our introductory uh questions for node.js this kind of pivot and take a look at the intermediate questions that you would be asked so what does event driven programming mean so event driven programming means that if something happens something else will happen in response so for instance if you click a mouse that Mouse click is an event that means something has to respond to that event just think of it as cause and effect it's just the basic motion of physics so that's what event driven programming means you also look at it as a callback function so that when an element is executed something will happen in response so what is an event Loop in node.js so an event Loop in node.js is when you do an asynchronous call and what that essentially means is that you are sending out data and then a non-blocking input output from node.js is pulling data back in what is an event emitter in node.js so an event meta has really two areas of focus one is that it manages uh the classes that hold all the objects within your event and we have an example of this on the right hand side and then whenever an event actually is thrown the functions are then called on that event synchronously so for instance we have in our example on the right hand side we create an event and then we have the functions and they're executed in a series from that event so let's talk about the API functions in node.js so there's two types uh one is an asynchronous non-blocking function and the second is a synchronous blocking function and the difference between the two of them is asynchronous is that there is no structure to the order if I have the API is resolved synchronous means that when the feedback from the API is received you have to execute the response in a series for how the response is sent to you so what is a package Json file so the package Json file is at the heart of our node.js package when we actually will initialize a solution a folder to be in node.js package you'll find that the package itself holds all of the metadata that's particular to the project you're working on such as project name version requirements it is you have to have it installed in the root of the directory for the project and again look at any of the videos that we have on node.js we do have demonstrations within those videos that actually then go through and break out how to create that root package and you'll see how you can actually then go ahead and update the instructions or the metadata within the package so here we have an example of what that metadata looks like so again this kind of continues that question of what is a packet Json file and you may be asked you know what is the metadata and why is it important and the metadata is a basic Json collection of pairing of a key details such as name version description and then and the custom version that you put so for instance under name you could create a name for your project there can't be any spaces what is the version and the description and what is the main or starting path and for the solution typically that would be index.js but it could be anything.js but index.js is typical simply because index.html is the starting point for a typical web application so how would you use a URL module in node.js so with the URL module what it allows you to do is really two things one is that it provides the resolution passing of a URLs for Utilities in your application and then it allows you to extend your module with built-in Solutions and split up the web address into a readable format so in this example we have the URL and the response it would would give for that URL which would then be a year and month and it'll be in a readable format so it would read out as 2020 and then the month so what is express.js and you've heard me mentioned this a couple of times in the video and we actually have a separate video on express.js um I would express.js is a web application framework that allows you to build out Web Solutions for both mobile and traditional desktop right inside of node.js so it's very easy to use and being able to install and web.js is as simple as requiring Express to be installed in the example that we have here on the screen it's a full solution of showing how to actually build out a solution with web.js so in this example you start off the first two lines required Express to be installed and the store comes from node packet manager then we have a simple application that will then send to the browser window a hello world message confirming that Express is up and running and then the third block of content starting with virus server actually will Define the port where your application is going to run so in this instance the port is going to run on localhost and the port will be Port 8081 and so you can actually go to localhost colon 8081 and when you do that that will trigger the Apple application that will forward up the message hello world and it's all coming from express.js so what are streams in node.js so streams are objects that allow you to read and write data continuously back and forth within your application and there's really four different types of streams there's readable writable duplex and transform the readable one strength for which data can be read uh the writable streams that you can actually write to a duplex is a stream where it is both readable and writable and transform our streams that can be manipulated the data while it is being read or written so how do you update and delete a dependency so say for instance we want to install uh something like Express so if you wanted to install Express what you would do is you would just write them inside of your project you want to go to terminal window and write in the command npm install Express if you want to update the dependencies within your node package manager to update all of them all you have to do is write the command npm update all dependencies and then if you want to explicitly uninstall a dependency such as express.js that's using the uninstall command and so that would again be going to terminal window and you would type npm uninstall Express and again it's really easy to create a simple server in node.js that will run a simple command the HTTP service is actually built into node.js you don't need to use express.js I typically use express.js when I want to do a web server because typically what I find is that I will want to go and do something more complicated but if you want to do something that illustrates just the core functionality within node.js you can actually just require the core HTTP service that actually comes as part of node.js and then you can actually then go ahead and tell it to create a service and then to write in plain text I command or text string such as this case it'll be hello world and that would pop out and then the final line is to then listen that if you go to a web browser that's on port127.0.01 or localhost and go to Port colon 8080 once you actually go to that that will trigger this application and you'll get the text hello world pop up on your screen so explain synchronous and non-blocking apis in node.js so all the apis in node.js are asynchronous which means that they are non-blocking which means you can run them continuously and scale around that which is just fantastic it's one of the reasons why node.js can scale so fast and the eighth means that the apis can return data send data after it's been called and really increase the efficiency of events as they are triggered Within node.js so how do you implement async and node.js and so the example that we have on the left hand side allows us to trigger async and it's using the async function and as you can see in this example it's actually something that can be done very quickly in this example we're actually making a command to logo host and an app that's running on Port 3000 and then depending on what we get if there's an error message and then we'll have error message go to the console log which is the terminal window and if we get a response to an application then we'll actually get a positive response which would be fetched response so again very quick and easy that you use the async function to be able to build out and you to get your asynchronous code so what is the purpose of module exports so a module export is a way to encapsulate your the entire code for a solution in a single package and a single file and then you can then share that with other developers so you're all working from the same environment so that wraps up our full course on full stack development for 2023. we hope you had a lot to learn and if you have any suggestions or doubts please write them down in the comment section below thank you so much for tuning in today and happy learning hi there if you like this video subscribe to the simply learned YouTube channel and click here to watch similar videos turn it up and get certified click here