MERN Stack Development Full Course 2026 | Web Development Tutorial For Beginners | Simplilearn

Key Takeaways

Imagine [Music] building buffer website and applications that do from scratch. Welcome to simply learns mer stack development full course. In this course you will become a full stack developer mastering both the front end and back end of web development. Fullstack developers are in high demand and this course is designed to give you the skills and knowledge to excel in this fast growing field. We'll start by diving into essentials of full stack development and guide you every step of the way from HTML, CSS and JavaScript to mastering flexbox, grid layout and other important concepts. You gain the expertise to build dynamic websites and as we progress we will introduce to JavaScript to DOM and how to interact with it. You'll also learn back-end development and frameworks like Angular, React, NodeJS, and Django, creating a strong foundation for both frontend and back-end development. And to make your journey even more efficient, we will show you how AI through tools like GitHub Copilot can help you write smarter, faster code. And with the demand for full stack developers growing rapidly, now is the perfect time to get started. Let's dive right in. Now before we comments, here's a quick information. If you are interested in becoming a fullstack developer, then Simply Learn's AI powered fullstack developer program is the perfect opportunity for you. This 9-month course will help you master essential technologies like React, NodeJS, MongoDB, and Java with hands-on experience in over 60 projects. You'll also learn to integrate AI tools to enhance your development process and test your applications with live interactive classes from industry experts. You will work on real world projects and gain a Microsoft certification to boost your CV. Plus, Simply Learn offers AI powered job assistance including customized rums, LinkedIn profile optimization and mock interviews. So, are you ready to get started? What are you waiting for? Hurry up and enroll now and you can find the course link below. Hey guys, I'm sure you all have heard about phrases like web development, full stack development, front end and backend 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 backend 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'll 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 styling, graphics, text, alignment, navigation, colors, etc. And he 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 backend development? You guessed it right. Now web development that occurs at the back end of programs is accurately termed as backend development. Now this back-end development covers serverside 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 customerf facing services and programs. Now back-end 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. They 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 backend 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 back end, the languages include Python, Cash, Java, Pearl, 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 language is the preferred architecture for back-end programming in Windows environments. Now talking about libraries and frameworks, front-end libraries and frameworks include ReactJS, Angular, Vue, jQuery and Bootstrap. While talking about back-end frameworks, we have ExpressJS, Node, Spring, Django, Flask, JSF, ASP.NET and .NET MVC. Now, front end and backend 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 side 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 back-end development. Now backend developers deal with back-end languages and frameworks like Java, Ruby on Rails etc. Now backend 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 backend languages and frameworks like Django, NodeJS, ExpressJS 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 backend 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, fullstack developer, and a UI developer. Talking about backend, there's back-end developer, Java developer, fullstack developer, DevOps engineer, software engineer, and an iOS developer. And lastly, let's look at the salaries offered to these front end and backend developers. In India, the average salary of a front-end developer is around 6 lak rupees peranom while a back-end developer earns about 7 lakh rupees peranom. In the US, a front-end developer earns around $100,000 peranom while a back-end developer earns about $121,000 peranom. Today we will be covering topic how to learn coding using Gemini. So now let's move onto the Gemini prompt. So this is our screen of Gemini. Okay. So here first I will write hey Gemini I want to learn coding. So it will give us some basic prompts. So it gave like learning to code is a fantastic reason and it's a valuable skill that can open doors to many opportunities. So here is a path right. So first find your motivation then pick your first language then explore online resources then in online resources there are some categories like online courses, video tutorials, coding websites practice consistently and you can build project or you can join the community. Okay. So here now I last give me some beginner friendly coding languages. Okay. So here it gave like Python, JavaScript, Scratch. I don't know which language is Scratch. If you are entirely into coding or even introducing coding to children, Scratch is a fantastic option. Okay. So here is Python, JavaScript or you need more, you can ask more languages, right? It will provide you more basically you can ask anything uh to the Gemini. So here are the more Ruby, C, Swift, HTML and CSS. So uh we will take HTML because HTML is a foundation language for new web pages or web development you can say or you can choose any of the languages you want. So here I will write give me study plan to learn learn SD ML language right. So now it will provide us a proper week uh wise study plan. So here you can okay I can ask phase two phase one. So what I will do I will stop it and I will ask to give me week wise study plan. Okay. So here is a quick info for you. If you want to switch careers with AI and ML then try giving simply learn postgraduate program in AI and machine learning from Mi University in collaboration with IBM. This course teaches in demand skills such as machine learning, deep learning, NLP, computer vision, reinforcement learning, generative AI, prompt engineering, Jubet and many more. So don't forget to check out the course link from the description box below and the pin comments. So here you can see so here is the week by week HTML study plan beginner to building website. So this plan offers a more structured approach with dedicated activities for each. So week one foundations of HTML in which activities are the understand the core concept of HTML like hypertext mark HTML full form and its role in web development right some resources are there and video tutorial you can watch and website is there like week two coding your first web page okay set up simple text editor for or a free code editor like visual code studio code right and resources from here you can that let me ask I want I want weak wise topics right because I don't want to go in every uh particular website or resources it gave okay so here are the topics what is HTML weak to coding your first topics like HTML coding writing page structure elements and attributes okay then topics into HTML elements ments like list, tables, forms in V3 and in V4 uh you will deep dive into CSS right and here I will write uh provide price. Okay, because I want a particular like paragraph tag or BR tag is there. Then heading tags are there. So I want that with all the tax name. Right? This is how you can learn HTML. Okay? Or you can choose any of your preferred language. Right? Now you can see see one HTML basics and essential tags like HTML tag, head tag, body tag, heading tags and this is paragraph tag right and here week two concepts uh writing basic HTML code adding comments. Okay, then list tables and images how you can add lists using this uh tag and for the table TR and TD tag rows and cells. Er means table rows and table. Okay. Then ul unordered list and ordered list. And week three this is a form input table. Then week four intro dash to CSS then you will learn CSS right. So here if you want to learn let's take heading tag. So give me brief introduction of heading tags in HTML. Right? So it will give some brief introduction or how you can apply uh this heading tags to your particular script HTML script or HTML index sheet. You can see see this is how you can uh this is a brief introduction of purpose of this heading tag. Heading tags define the structure and the hierarchy of headings within your web page. Then the types are H1 to H6 according to the size you can say and the structure search engines and the browser. And this is example see with example you just you can just copy code and you can paste it to your visual code studio or whatever the ID you are using. Right? The best strategy is use only one H1 tag for the main heading for your web page because H1 tag is the bigger one. Okay. So this is how you can learn wise or any coding languages. So now I want give me basic website code. Okay. So it will give me basic website code for the HTML or you if you want to learn C++, C or Java, you can ask anything to Gemini. It will give you the see. So here is an example of basic website code. So you can just copy it and you can paste it to your particular file, document file or visual code studio. See here is a let's break down the code dock type HTML. This is a dock type HTML. It is used for this is the inline declares the document type as a HTML. Then HTML tag here is the HTML tag. Right? So this tag is not root element of the particular HTML document. So head tag is there. Title Y title. This tag define the title displayed on the browser tab. Browser tag is this. Here you can see the Gemini is here like this. Like the body then H1 tag then B tag then A tag hyperlink tag. Right? That image you can insert for using IMQ tag. then source file src right or what if you want to learn any uh coding program so here I am to C++ language and I want code on how to find all numbers even numbers. Okay. So it will give you the code how you define odd and even numbers or you can do if you have any codes so you can copy paste here and you can debug it right you can also do that. So here you can write see absolutely here's the C++ code to find odd and even number see nothing you have to do just you have to just copy it and you can paste it to your ID and you can run it okay so here you can see the explanation see hash include IO stream that this line includes the IO input output stream header file which provides input and output functionality in C++ see using name is std. So here you can see this statement avoids repeatedly using std before standard library elements like see out and see in see out means output and input for this then int main is there in number then enter in integer prompts the user to enter in particular. Okay. So this is how you can learn any coding using Gemini. Whether you are a beginner or you are you are an expert with a particular language, you can learn anything. >> Website architecture. Website architecture basically defines the design and structure of a website. A website contains two important parts. The front end and the back end. 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 exist somewhere in the website and the server is known as the back end 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 back-end development. Few of them are JavaScript frameworks like NodeJS and Nex.js, Python frameworks like Django, Ruby frameworks like Ruby on Rails, C++ frameworks like Apache and many more other technology. 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 worldwide 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 connect 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 webpage 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 programmer 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 idees present in the market today is huge. Some of these editors are Notepad++, 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's 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 write 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'm 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 other 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 say. 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 here 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 TypeScript nightly and the live server extension. So this extension is pretty important the live server one and the HTML CSS support. You can leave the JavaScript and TypeScriptly for now. So we have to install these two extensions for now. So I have already installed it. You can install them in your computer. Now the next thing we have to do is so we can start writing our code here on I already told you that while saving any file make sure that we are saving that file with a 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 that 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 a tag is. 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 doc type as HTML. You can see it over here. We have written dock type 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 end. 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 document. Now the next tag we have here is the head tag. 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 tag. The title tag is used to define the title of a web page. Basically, we write the name of a web page inside this tag. For example, if we see here, the title of a web page is document form. If we change 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's 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 a 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 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 dot 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 stylesheet. 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 tag. 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 real as stylesheet. This means that this particular file is a stylesheet and we are going to use this for styling purposes. 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 head tag. 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 js. 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 tag 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 tag 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. 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 one. Save the program and you can see it over here we have a heading in a web page which says this is heading one. Similarly we have the H2 tag as well. So if we write here H2 and inside this if we write this is heading two. 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 say 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 four. Fine. Similarly we have H5 and H6 as well. So we are going to mention them first here. So we'll write here this is heading five and finally we have H6 which is used for heading six. So we are going to write here this is heading six. 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 for heading six is the smallest. We can use any of these headings according to our needs. 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 we'll 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 browser. 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 the 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 end tag, 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 par one. 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 tag. 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 here 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 tag. This whole thing over here is the starting tag. Then we have attribute. So ID here is the attribute. Then we have the content of this tag. So this is the content present inside whole tag. 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 2. 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 a paragraph and the second one says this is a paragraph 2. So what we have to do is we have to remove a from here. Save it now. And now it says this is paragraph 2. 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 tag 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 end tag in HTML. Example of empty elements are like the break 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 tag. 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 tag. So what we'll do is we'll write here inside angular brackets.g is the tag name. Then we'll write here src. So src over here is attribute. We'll discuss attributes in upcoming videos. So inside this we'll provide the path of our image. 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 tag. 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 over here 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 this 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 2. Let's add some more things over here. So let's say we are writing over here HTML stands for hypertext coupl 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 tag. 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 bold. 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. Right? Similarly, what we can do is we can nest one more tag inside this bold tag. 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 tags or we can say we have two different tags inside a particular tag. 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. 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 HTML. Fine. I hope you guys must have got an idea about what this is. This is actually a basic HTML element. We have nothing else over here. Just a simple example of HTML element. An element consist of a start tag and ending tag and the content within the tag. 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 as paralle. 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 id as par one or we can give any id 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 tag. So let's do it over here. What we'll do is we'll use the style tag over here. So we'll write here style. 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 tag. So let's say we are writing over here hash par one. 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'll discuss it later on. So basically this particular paragraph tag has an id named param. 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 red and the font color is blue. Fine. What we want to say here is this ID 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 a 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 code and inside here we'll write images. So this is our folder name and we have a file name HTML.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 on. So basically what happens is when we add an image to a 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 a 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 tag 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. Same thing goes for width as well. If we write here width and if we define the width as 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 here. 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 a 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 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 hypertext markup language. 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 web page was what is HTML and we want it to stand out among all the headings present in our web page. That's why we used the H1 tag for that heading. Now for the next heading or for the new heading will have a little bit smaller size than the main heading. 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 tag. So we are going to use the BR tag over here or the break tag we can see. Now we are going to write here uses of HTML. Fine. Now save the program and you guys can clearly see the difference in font size of both the headings. Let me zoom in a bit here in the browser. So now you guys can see it much better. The there's a difference in the size of heading one and heading three. Right? So this difference is what we are talking about. 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 them. 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 tags present in HTML. The next tag we are going to discuss is the bold tag. This tag is used to make the text bold or strong. 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 tag. 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 bold tag. 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 tag. 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 them. 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 tags 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 bold tag inside our 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 bold 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 bold tag, we