Web Development Full Course 2026 | Web Development Tutorial | Web Developer Course | Simplilearn

Key Takeaways

[Music] Hey everyone, welcome to our web development full course by simply learn. Web development is in high demand right now and with companies from all the industries, they're looking for talented developers to create and manage their websites. So there are tons of career opportunities and along with some pretty impressive salaries as well. But even with that, all the cool AI tools out there, it's important to have a strong understanding of the basic web development. If you're looking forward to enroll in this field, in this course, we will walk you through everything you need to know from developing the front end and back end like HTML, CSS, JavaScript, NodeJS, MongoDB, and many more. We'll also show you how to blend AI and genai in web development. You'll learn how to use AI to make your development process more efficient, create better experience, and optimize your code. And by the end of this course, you'll not only be able to build a web app from scratch, but you will be able to use AI to level up your development skills. So guys, let's get started. Before we move on, here's a quick information. If you're ready to take your development skills to the next level, our Microsoft AI powered fullstack developer program is designed to make you job ready in just 6 months. Now imagine being able to build dynamic scalable user experience using React, NodeJS, Express, MongoDB also while leveraging cuttingedge AI tools like chat, GPT and copilot to supercharge your code. And the best part is you'll earn official certification from Microsoft which will give your resume a significant boost. The program is designed for people who want to get hands-on with coding and understand the full process of developing a modern web app. Plus, you will have access to Git portfolio which is perfect for showcasing your work to potential employees. One of the best part of the program is the AI powered job assistance. You'll get optimizing your resume, LinkedIn profile, mock interviews, and prepare for the real thing and even the custom job opportunities tailored to your skill set. The demand for AI powered fullstack developer is growing rapidly and companies are looking for people who can combine traditional coding with cuttingedge AI tools. So what are you waiting for? Hurry your pen and enroll now and you can find the course link below. So let's begin by understanding what web development is. A web development involves building and maintaining website and other web applications. A web developer is expected to convert a web design into a website. They're responsible for how a website or web application looks and functions from its user interface and page layout to back-end systems for gathering data. So, a lot goes into building a website. There are several tools, frameworks, and packages that help create web applications. HTML, CSS, JavaScript are the basic languages required to develop a website. JavaScript offers several frameworks and libraries like React, Angular and Vue. JavaScript and its environment like NodeJS and ExpressJS. Node is an open-source crossplatform runtime environment that allows developers to create serverside tools and JavaScript applications. Knowledge of the basic command line like npm node package manager is essential. But I'm sure you're aware of all this. So what's going to be new? Well, according to experts, there are four major future trends in web development. So let's start and decode them one by one. First up is TypeScript. TypeScript is a supererset of JavaScript and is an object-oriented programming language. In simple terms, it is just JavaScript with other impressive additional features. Typescript supports all JavaScript libraries and frameworks. With an increase in code complexity, JavaScript had to fulfill the requirements of OOP. Hence, that lead to the introduction of TypeScript. Typescript helps with quicker code development, thus improving performance. There are a few improvements with TypeScript that give it an upper hand over JavaScript. Only at the time of development does TypeScript bring out compilation issues. This reduces the chances of mistakes occurring at runtime. A property of TypeScript is that it is strongly typed or enables static typing. Static typing allows type correctness to be checked at compilation time. In JavaScript, this isn't possible. TypeScript is nothing but JavaScript and some additional features i.e. ES6 features. Some of these features are interfaces, generics, namespaces, null checking and access modifiers. Typescript supports intellisense which provides active hints as the code is added. So considering all these advantages, TypeScript is something that will be widely adopted by teams across the globe. Next up is web assembly. Web Assembly is a new way to run on the web. Web Assembly or WASM is the second universal programming language that all web browsers can understand and run. However, you're not going to be writing scripts in web assembly yourself. It's a low-level assembly language designed to be very close to compiled machine code and very close to native performance. What this means is practice is that JavaScript is no longer the only language you can run on the web. Web browsers can run any language now if that language has a web assembly compiler. Even traditional desktop languages like C++ and Rust can be compiled down to WASM with relative ease. WM currently runs in 94% of users browsers with IE UC browser and Oprah mini spot being the main things holding it back as per usual. However, it's backed by developers from Mozilla, Microsoft, Google and Apple and support in modern browsers is fast moving. Next up we have package managers. packages. A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing software packages for a computer's operating system in a consistent manner. It typically maintains a database of software dependencies and version information to prevent software mismatches and missing prerequisites. npm is the package manager for the node JavaScript platform. It puts modules in place so that node can find them and manages dependency conflicts intelligently. It is extremely configurable to support a wide variety of use cases. YAN is another package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as exciting workflows while operating faster, more securely and more reliably. Lastly, we have JavaScript dialects. Compiler to JavaScript. There are many JavaScript dialects like coffecript, dable, typescript and swely that offers better features that JavaScript and ultimately compile to JavaScript. It is likely that these languages will be the future. There are several other predictions like better appreciation for web standard, less client work and more focus on personal projects and the need to know more languages. Regardless, the future of web development looks more promising than ever. If you wish to make a career as a web developer, start now. So, here are the topics that we're going to be discussing. So first we'll see what full stack development is, who is a fullstack developer, then we'll move on to the responsibilities and then we'll dive into the detailed road map and then also let you know about the salaries of fullstack developers and finally how you can get certifications. All right. Now what exactly is fullstack development? Now consider a web application let's say 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 feed. 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 fullstack development. So I hope you understood what exactly fullstack development is. So moving on, let's see who a fullstack developer is. Now basically a fullstack 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 backend frameworks like NodeJS 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 fullstack developer does, let's look at some of his responsibilities. Now 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 backend architecture to ensure the smooth functioning of fetching and updation. Next up is to design database and servers. Now databases and servers must be resilient to any outages and must maintain consistency. Next up is crossplatform 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 plan 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 fullstack developer. Moving on, let me explain to you a simple road map of how to go about to become a fullstack developer. So this road map basically shows you the prerequisites and skills one should have to become a successful fullstack developer. All right. So let's go ahead and begin with tools and software. So now the first and the most rudimentary requirement is a text editor. Now the most widely used editor is VS code. It is free, opensource 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 stylesheet 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, asyncate, DOM 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 on all of these topics. React, Angular, Vue 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, Vue and Angular. Over the last couple of years, React has gained immense popularity followed by which Vue is 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 NodeJS. Now this is basically an open-source cross-platform runtime environment that allows developers to create serverside tools and applications in JavaScript. Now node is typically used to create realtime applications with two-way connections wherein 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 in basic command line like npm that is node package manager is also essential. So this was a simple overview on NodeJS. Moving on to other backend 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 fullstack development, Django is a clear winner. Now it is a highlevel 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'd 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 chatbots. 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 fullstack developers. Now according to pay scale, the average salary of a fullstack developer in India is around 5 lakhs 90,000 rupees peranom. The average salary of a fullstack developer in the US is around 75,000 peranom. All right, so moving on to the fun part. Let's go ahead and look at a simple quiz. Now, here is the 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, V. 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 simple 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 SimplyLearn website. And here you can see a few options. You have the fullstack Java developer masters program. You have the fullstack developer.net masters program. And you also have fullstack web developer mainstack 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 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 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 back-end 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. 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 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, C#, 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. session 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 Vue. 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 a 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'll be as 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 is the 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 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 NodeJS resulting in the development of a completely new web application including front end and the back end. 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 fullyfledged 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 is regularly updated resulting in constantly improved performance and addition of new features. In terms of performance, it was pegged 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 React and Angular, let's now go ahead into Vue and learn a bit more about Vue.js library. Now, what exactly is Vue? Vue is 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 it's bit faster when compared to Angular which is a complete web application solution. Vue.js is commonly referred to as Vue and pronounced as Vue.js or Vue is rightly so. Now why should you learn Vue? Any beginner web developer can easily understand Vue and start building their own web user interfaces like React. Vue also uses virtual DOM resulting in better performance and it also uses the component- based code design promoting code reusability and code readability. Vue.js 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 salary trends 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 generous 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 lak 6,000 rupees perom. The average salary of a front-end developer in United States is $76,929 perom. 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 NexJS, 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 a 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 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 programmer for software development. Just like Photoshop makes it easier to edit for in the same way IDE makes it easier for a programmer to write code. The number of IDE 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 opensource 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 go. 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 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 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 extensions. 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 project 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 byside 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 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 dot CSS over here. Now we are going to link this with a 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 e