Web Development Full Course | Web Development for Beginners [2025] | Web Developer Course | Edureka

Key Takeaways

Hello everyone and welcome to the web development full course. Your complete guide to becoming a full stack web developer. This course takes you from the basics of HTML, CSS and JavaScript to advanced concepts like React, NodeJS, Express and RESTful APIs. You will build real world projects, learn to create responsive web apps, and explore modern frameworks and tools used by today's top developers. You will also dive into deployment and back-end integration and explore AI in web development and cuttingedge frameworks. Whether you're starting from scratch or looking to upgrade your skills, this course equips you with everything needed to build and deploy fullfeatured web applications. So before we get started, please like, share and subscribe to Edureka's YouTube channel and hit the bell icon to stay updated on the latest tech content from Idureka. Also check out Edureka's fullstack developer course that equips you with the skills to develop both front end and back-end components of modern web applications. You will gain hands-on experience with technologies like HTML, CSS, JavaScript and powerful serverside frameworks while building real world projects that prepare you for one of today's most in demand roles. So check out the course link given in the description box below. Now let's get started with our first topic that is what is fullstack web development. Imagine building a website like Instagram. As a fullstack developer, you create both what users see like profiles and feds and the behind the scenes stuff like storing data and handling interaction. You handle everything from making it look good to making sure it works smoothly for users. By understanding both the front end, what users see and the back end how everything works behind the scene, you can create a website that not only looks good but also runs smoothly and is easy for users to use. So being a fullstack developer means being able to build a complete and user-friendly social media platform from start to finish. So what is fullstack web development? Fullstack web development refers to the practice of building both the front end that is the client side and the back end which is the serverside components of a website or web application. In other words, fullstack developers are proficient in both the technologies that power what users see and interact within their web browsers as well as the technologies that handle data storage, user authentication and server side processing behind the scene. So what does a fullstack web developer do? A fullstack developer is responsible for handling both the front end and backend development of a web application or website. The role involves an front-end development that is creating the user interface UI and user experience UX that users interact within their web browsers. This involves writing HTML, CSS and JavaScript code to design and implement the visual aspects of the website or application. For example, implementing a responsive design that adjusts to different screen sizes or adding interactive features like drop-down menu or sliders come under frontend development. Now let's understand the main task of a front-end developer in detail. First we have user interface design. Webpage layout structure and aesthetics are created using HTML, CSS and JavaScript. This involves developing user interfaces that are visually appealing, easy to navigate, and responsive to the variety of devices and screen sizes. Next, user experience design. It involves optimizing web page usability and accessibility to provide users with a seamless and enjoyable experience. Friended developers concentrate on things like site navigation, interactive elements, form usability, and overall user engagement. Next, front end development. Writing code to implement web page design and functionality which includes HTML for content structure, CSS for styling and layout and JavaScript for interactive and dynamic behavior. Front-end developers use frameworks and libraries such as React, Angular, Vue.js to speed up development and improve user experience. Next, cross browser compatibility. They ensures that web pages render consistently and function properly across all web browsers and devices. Friended developers test and troubleshoot browser compatibility issues to ensure a consistent experience for all users. Next, performance optimization. Optimizing webpage performance by reducing load times, file sizes, and code. Front-end developers use techniques like code splitting, lazy loading, and image optimization to boost website performance and user experience. Next, moving on to back-end development. Building the serverside logic and database interaction that power the application behind the scene. Fullstack developers uses the serverside language like JavaScript with NodeJS, Python, Ruby, PHP or Java along with the frameworks like ExpressJS, Django, Ruby on Rails, Laravel or Springboard to handle tasks such as data storage, user authentication and serverside processing. So now let us understand the main task of a back-end developers in detail. And first we have serverside development. Writing code to implement serverside components, logic and functionalities in programming languages such as JavaScript with NodeJS, Python, Ruby, PHP or Java. And data processing, business logic implementation and serverside routting are some of the tasks that backend developers handle. Next, database management. Designing, implementing and managing databases to store and retrieve data effectively. Backend developers use database management systems such as MySQL, Postgress SQL, MongoDB and radius to securely and effectively store and manage data. Next, API development developing applications programming interfaces to facilitate communication between a web application front and backends. So back-end developers create and implement restful or graphql APIs that expose data and functionality to client side applications. And next we have authentication and authorization. Implementing user authentication and authorization mechanisms to secure access to protected resources and data. Backend developers handle task such as user authentication, password hashing, session management and role based access control. Next, performance optimization. Optimizing the performance and scalability of serverside components to handle increasing traffic and workloads. Backend developers use techniques such as caching, load balancing, and database indexing to improve performance and responsiveness. And for a better understanding, let's take a look at a simple table breakdown of both front end and backend technologies. First let us go through the front-end technologies and the language used by the front-end developers is JavaScript frameworks and libraries that are used are ReactJS which is a JavaScript library for building a user interface developed by Facebook. It allows developers to create a reusable UI components. And next, Angular, a TypeScript based framework for building single page application developed by Google. And it provides a comprehensive solution for front-end development. Next, Vue.js, a progressive JavaScript framework for building user interface known for its simplicity and ease of interaction. Next, jQuery, a fast and featurerich JavaScript library for DOM manipulation. event handling and animation. It simplifies front end and development task. Next, we have Bootstrap, a popular CSS framework for building responsive and mobile first website and it provides pre-esigned UI components and layouts. Next, SAS or less CSS prep-processes that extend the capability of CSS with the features like variables and nested rules making stylesheets more maintainable and scalable. And at last we have Typescript, a supererset of JavaScript that adds static typing and other features to improve developers productivity and code quality. And next moving on to the serverside technology. The backend developers use the languages such as JavaScript with NodeJS. That is the NodeJS is a runtime environment that allows developers to run JavaScript on the server side. It enables building scalable and high performance web applications. And the next language is Python. A versatile and easy to read programming language often used for web development due to its simplicity and rich ecosystem of libraries and frameworks. And the next language is Ruby, a dynamic and object-oriented programming language known for its simplicity and developer friendly syntax. It is commonly used with the Ruby on Rails framework. And next, Java. A widely used object-oriented programming language known for its portability and scalability. It is often used with frameworks like Spring Boot for web development. And next we have PHP, a serverside scripting language designed for web development. It is known for its ease of use and extensive support for web development task. Next, moving on to frameworks and libraries. If back-end developers use ExpressJS, a minimalist web application framework for NodeJS. It simplifies serverside development with features like rooting, middleware, and template engines. Next, Django, which is a highle Python web framework that encourages rapid development and clean fragment design. So, it includes building features for authentication, database, OM, and templating. Next, Ruby on Rails, a fullstack web application framework for Ruby. It follows the conventions over configuration principle and emphasizes developer productivity. Next, Springboard, an opinionated framework for building production ready Java applications. It provides a comprehensive sort of tools and features for web development. And then we have Laravel, a PHP web framework known for its elegant syntax and expressive syntax. It simplifies common tasks like rooting, authentication and database management. And then moving on to database management systems. And the backend developers use MongoDB NoSQL, a document-oriented NoSQL database known for its flexibility and scalability. It stores data in JSON like documents and is often used for agile development and data inensive applications. Next, MySQL and Postgris SQL relational database management system that is RDBMS that uses structured query language for data manipulation and retrieval. They are widely used for transactional applications and complex data models. Next, Firebase a realtime database service provided by Google. It offers cloud hosted NoSQL databases and back-end services for building mobile and web applications. Next, moving on to the popular web development stacks. The main stack includes MongoDB, ExpressJS, Angular, and NodeJS. Next, the M stack comprises MongoDB, ExpressJS, ReactJS, and NodeJS. And next, the lamp stack features Linux, Apache, MySQL, and PHP. And then the Django stack combines Django, Postgress SQL, N GenX and G Unicorn. Now let's shift our focus to explore the differences between front end, backend and full stack development. The front-end development focuses designing the user interface and experience for a website or app. Whereas the backend development focuses on developing and managing serverside logic and database interaction. Whereas the first time development combines both front end and backend development. And next moving on to the technologies. Languages used in front-end development are HTML, CSS and JavaScript. And the languages used in the backend development are JavaScript, NodeJS, Python, Ruby, Java, etc. And the fullstack development requires proficiency in both front end and backend technologies. Next, responsibilities. Front-end development responsibility includes designing and implementing visual aspects to ensure responsiveness and accessibility. Whereas the back-end development requires the responsibility of writing server side code, maintaining databases and implementing authentication. And the full stack development involves in designing, building and maintaining both client side and serverside components. And let us now see some of the examples. Example of a front-end development is designing web page layouts and developing interactive elements. And the example for back-end development is writing server scripts and managing database queries. And the example for full stack development is building entire web application handling both client and server aspects. Now let's have a look at the advantages of fullstack development. Fullstack developers can handle both front end and backend task. They can manage the entire development process allowing for faster turnaround times and hiring a fullstack developers can be less expensive than hiring separate front end and backend developers. They can effectively communicate with other team members making collaboration easier. Next, a full stack developers can quickly learn new technologies and adapt to changing project requirements. They take ownership of projects from beginning to end ensuring accountability and they excel at troubleshooting and problem solving because they understand both sides. Hope you now have a good understanding of a full stack web development including the languages, frameworks and libraries. [Music] Let's start by looking at the current market demand for web developers in India. The IT industry is booming with web development leading the way. So currently there are over 1.5 million web developers in India and this number is growing by 20% annually. According to the recent data available on LinkedIn, there are over 10,000 job openings for front-end developers, over 21,000 for back-end developers, and over 15,000 for full stack developers. And it's not just in India. The demand is strong globally as well. In the USA, according to the data available on Indit, there are over 1,800 jobs for front-end developers, over 1,900 jobs for back-end developers, and over 3,000 jobs for fullstack developers. Now is the perfect time to start your learning journey and get a job as a front-end, backend or fullstack developer. Now that we have discussed the market demand, let's examine what web developers actually do. So the primary roles and responsibility of a web developer includes website designing, website performance, website maintenance and collaboration with designers. Now let's look at the website design process. So the web designing process begins with requirement gathering which means web developers collect the requirements from the stakeholders including the feature and design preferences. After gathering requirements, developers create SRS documents and proceed to develop prototypes of the projects. based on those requirements and after developing a prototype developers move on to the final step which is developing a project and the next responsibility of a web developer is to ensure the website performance. Let's see some practices that web developers does to ensure the performance of the website. First optimize image size. So web developers ensures that images are properly sized and optimized for the web so they load quickly without affecting the website quality. Next, browser caching. Developers set up caching so that when user revisits the website, it loads quickly. The last one is test on different devices. So, web developers test the website on various devices and browsers to make sure it performs well on each device. The next responsibility that web developers have is a website maintenance. So, let's see some basic steps performed by web developers for website maintenance. First, updating content. So web developers keep the website content fresh by regularly updating text, images and other elements to ensure the site remains relevant and engaging. Next is the website backup. Developers regularly make backups to protect the website data. So if something goes wrong, they can restore the site to a previous state. And the last one is security updates. So developers install updates for any software or plugins used on the site to protect it from security threats. And the next responsibility of web developers is to collaborate with designers. So now let's see a few basic reasons for their collaboration. First share design prototypes. Developers review and discuss design mockups or prototypes provided by designers to understand the visual and functional aspect of the website. Next is discuss layout and structure. So developers collaborate on how the design will be translated into functional website. The last one is ensure design consistency. Developers work with designers to ensure that design elements like fonts, colors, and spacing are consistent across different pages and devices. Before starting with our road map, let's examine the job description of a web developer associate. So this is a job description for the web developers designation in Accenture. This job description is for entry-level web developer. So the company requirements include HTML 5 which is the latest version of HTML and JavaScript. In this role you need to solve routine problems. So you need to have a good understanding of these skills. So let us now move forward and learn what skills we need to master to become eligible candidates for such roles. First we will start the front-end development road map. The skills that we will cover in the front-end development road map are HTML, CSS, JavaScript and front-end frameworks. Now let's take an overview of HTML. HTML stands for the hypertext markup language. That means it is not a programming language but a markup language. A markup language is used to present the content on the web page. Why? A programming language is used to write instructions for the computer. HTML is a static language and it doesn't change dynamically. All the data and information remain static in nature and they stay the same unless someone manually changes them. HTML structures web content which means it organizes content on a web page by specifying aspects such as headings, paragraphs and links. HTML also manages the layout of text, media and images like for example the placement of pictures and video elements. Now let's have a look at how HTML works. So now we are using the Visual Studio Code editor. So first let us create an HTML file. So let us name something as first dot HTML. And now in this file I'll first create an HTML tag because anything that you are going to write inside the HTML document will be inside the HTML tag. So now inside the HTML tag I will create a heading using the H tag and then a paragraph using the P tag. So let's write something inside it. And now it's time to run our code. So as you can see on the screen the code inside the HTML tag is displayed on the web page. So what I'm trying to say here is that tags are necessary in HTML for every specific purpose. So you can also say HTML is a website skeleton and it provides the website structure but doesn't add any styling to make it attractive. Now to provide style to the website, we need to move on to the CSS. So CSS stands for cascading stylesheets. It's what makes your website look stylish by handling colors, fonts and layouts. So CSS ensures consistent styling. That means if there is any change in the style at one place, it gets updated everywhere. Next is responsive design. CSS helps your website look great on any devices from phones to desktop. And with responsive design, your layout adapts to different screen sizes. Next is improves performance. CSS improves performance by separating style from content, making your pages load faster and run more smoothly. Now let us have a look at what is the contribution of CSS to any website. I have created one project using HTML, CSS and JavaScript. So here is the project that I have created and this is a CSS file attached to this page. Now I will run this and let's look at the output. So here you can see that everything is in proper shape and size. The navigation bar is functional and the functionality like the hover effects has been added to the items. So all of this is done using CSS. Now let's go through the code again. And what I'll do here is I will unlink the CSS file from this page. So here I have unlin the file. Now let's look at the output. And here you can see the navigation is not at all in its place and the image doesn't have any structure or size. So this page without styling just looks like a skeleton of the website. So now it is clear how and why CSS is important for the website development process. Having covered HTML and CSS, we now move on to the JavaScript. So let's have an overview of JavaScript. A few basic features of JavaScript includes interactivity. So JavaScript makes the website interactive. It allows users to click, fill out forms, and engage with the website content. Next is dynamic content. JavaScript allows real-time updates in content without reloading the page which keeps the website fresh and responsive. Next we have client side processing. JavaScript runs in the user's browser speeding up task like form validation and interactions without constant server request. And the last one is it improves UX. So, JavaScript enhances user experience with features like animations and real-time updates which makes the website more engaging and enjoyable. Now let's quickly see how JavaScript works. So again I will take you to my website and through the website we will understand the basic functions of JavaScript which is validation. So here I'm on my register page which has the three section the username, email and password. So let's say I have entered my username and password but without entering my email and if I hit the register button. So you can see that I'm getting the popup that says please fill out this field. Now this is because JavaScript form validation has been applied to this form. So after you hit the register button, JavaScript will validate the form you have filled out in every required section and only allow you to register. So this is the basic function of JavaScript. So we create and add many functions to our applications to make them responsive and attractive. Now let me enter the email and let's see the output. So as you can see on the screen you will receive a message saying your registration was successful. So again this is another function on JavaScript called the alert function that we have added to our website. So I hope you now have an idea of what JavaScript is and how it can make your website interactive and responsive. Now having covered HTML, CSS and JavaScript, we will move on to the front-end frameworks and libraries. Front-end frameworks provide pre-built components that make it easier to create complex user interfaces. So let's have a look at some trending frameworks. Now first is React. Meta developed React in 2013 and is a powerful library that's been adapted by major companies like Facebook and Instagram. So next is Angular. Google created Angular in 2010 and it's another framework trusted by big names such as PayPal and Samsung for building dynamic web applications. Then we have Vue which IU introduced in 2014 and has been adapted by big companies like Microsoft and Apple. There are so many front-end frameworks in the market but you cannot start learning every framework at a time. To make it easy for you, I have done some research about the most used frameworks. Here is the data from Stack Overflow and it represents the most used frameworks currently. Here you can check that ReactJS is leading its way and as I mentioned before, ReactJS is also used by well-known companies like Facebook and Instagram. So this concludes our learning of front-end development. Now let's move to the backend development road map. In the backend development road map, you will start your learning with serverside languages such as JavaScript, NodeJS, Python or PHP. So these languages are essential for handling business logic, processing data and managing server operations. Now here I would like to add a point. So so many people think NodeJS is a programming language. Actually it is neither a programming language nor a framework. NodeJS is a runtime environment for JavaScript. So in simple language NodeJS helps JavaScript run on the server side. So once you have a good knowledge of serverside languages, the next step is to learn about backend frameworks. Backend frameworks like ExpressJS for NodeJS, Django for Python, and Ruby on Rails for Ruby will streamline your development process and help you build applications efficiently in less time. After you comfortable with back-end languages and frameworks, you will move on to the databases. Databases store, retrieve and manage the data of any web applications. Now, databases are of two types, relational and non-reational databases. In relational databases, having a good understanding of MySQL would be helpful. In non- relational databases, start with MongoDB and then move on to Postgra SQL. Alongside this core skills of backend development, you also need to understand APIs. APIs allows software to communicate with each other and API development is key to connecting your front end with back end. After API, mastering version control are also essential for web developers. So for example, Git helps you manage changes in your code while GitHub allows you to collaborate with others and store your code online. Now let's take a look at the salary expectation of web developers. The data that I'm going to discuss here has been taken from glass door and paycape. So as a web developer in India at the entry level with 0 to two years of experience, you can expect to earn between 5 to 7 lakhs per year. And as you gain more experience, let's say 2 to 7 years and become a mid-level professional, your salary can increase to 7 to 15 lakhs annually. So for those with over 7 years of experience, expert level roles can offer anywhere from 15 lakhs to 25 lakhs or more per year. And in the USA, entry- level web developers can earn around $85,000 per year. Mid-level professionals with two to seven years of experience can come in salary of around $120,000 annually. In comparison, senior level developers with over 7 years of experience can earn $150,000 or even more per year. Now that we have explored the potential career paths with the salaries. So now let's talk about how you can get there. And one of the best ways to fast track your journey is through a recognized certification. And that's where Edureka comes in. Now let's explore these certifications one by one. Edurea's HTML certification training focuses on teaching the fundamentals of HTML covering how to structure web pages, create headings, paragraphs, list, links, and manage media like images and videos. It's perfect for beginners looking to build a strong foundation in web development. Next, Edure's CSS certification training will teach you the essential of CSS, including how to style web pages, control layouts, and apply colors, fonts, and animations. It's ideal for beginners aiming to enhance the visual design and responsiveness of their websites. Next, we have a JavaScript certification training course. Edurea's JavaScript certification training will teach you the core concept of JavaScript, including syntax, DOM manipulation, event handling, and the basic programming logic. It's perfect for beginners looking to add interactivity and dynamic functionality to their websites. And then we have Edureka's ReactJS certification training, which will teach you the fundamentals of React, including component-based architecture, state management, JSX, and handling events. It also provides live instructorled classes making it ideal for developers looking to build dynamic high performance web applications with realtime guidance. Following to this we have Edureka's Angular certification training which will teach you the fundamentals of Angular including components, directories, services and routing. It also provides live instructor-led classes making it ideal for developers looking to build robust single page web applications with expert guidance. Next, Edureka's Web Developers Masters Program is a comprehensive structured learning path designed to equip you with the skills needed to become a fullstack web developer. The program covers key technologies such as HTML, CSS, JavaScript, jQuery, Angular, NodeJS, ExpressJS, and MongoDB. It also includes training in version control with Git front-end frameworks and backend development. The program offers hands-on projects and real-time guidance to ensure a deep understanding of web development from front end and back-end perspectives making it ideal for career growth. Also, Edurea's fullstack developer course is designed to provide comprehensive training in both front-end and back-end development. The course covers essential technologies such as HTML, CSS, JavaScript, NodeJS, ExpressJS, MongoDB, and React with a focus on building dynamic high performance web application. It includes hands-on project and real world scenarios to enhance practical skills. The program features live instructor-led classes allowing students to interact directly with the experts and receive immediate support. This course is ideal for aspiring developers looking to master the full stack web development and advance their careers. [Music] Why you should consider learning web development? So the first thing is it is easy to learn. Web development tools and technologies are designed to be friendly and easily accessible for beginners. With numerous online resources, tutorials and communities, you can quickly start building your website and a web application even if you have no career experience. The second thing is flexible work environment. Web development offers a highly flexible work environment. You can work from anywhere whether it's home, a coffee shop or while traveling. This flexibility is ideal for those who value work life balance and prefer to set their schedules. And the next is high salary package. Web developers are high in demand and this demand translates into high salary packages. The average salary of a web developer in India is about 10 to 12 lakhs perom and the average salary of a web developer in USA is about $120,000 perom. The next thing is freelance opportunities. Web development opens up numerous freelance opportunities. Whether you want to work on project part-time or build a full-time freelance career, there is a vast market for web development services. And next on we have creative and fun. Web development is a perfect blend of creativity and skills. It allows you to express your creativity through design and problem solving while building a interactive and engaging website. The process of creating something from scratch can be highly satisfying and enjoyable. Understanding the reasons of learning web development is just the beginning. Now let's see what web development actually is. Web development is a process of creating and maintaining website and web applications that user interact with on internet. To understand web development, let's have a look on two familiar example. And the first one is Amazon. On Amazon everything including responsive design, navigation bar, product listing, shopping cart, wish list cart and search bar are result of web development. These features are designed to create seamless shopping experience for the users. Now similarly on YouTube the navigation sidebar, subscription button, playlist creation, live streaming, video player, search bar all are brought together to life through web development offering a interactive and smooth user experience. So this is why web development is so important. It is used to create applications like Amazon and YouTube. If you want to build your web application, learning web development will be your first step. So now that we know what web development is, let's see how it works. Web development involves two key components. The first one is front end. Front end is the part user interacts with directly through web browsers. It includes all the visual elements you see on the website such as button, text, and images. Next, we have backend. Backend is what happens behind the scenes. It involves web servers where all the websit's data and files are stored. Business logic which processes request and handles the application's operation. Database where all the essential information is stored. And together these back-end components ensure the website functions smoothly and can handle the user request efficiently. Now that you understand web development, let's move on to the core technologies that makes it possible. First on we have HTML. HTML stands for hypertext markup language. It is a backbone of any website. It structures the content by defining elements like heading, paragraph, images, links. Basically, it forms the skeleton of the web page. Then on we have CSS. CSS stands for cascading stylesheets. It is responsible for website's look and feel. It controls the layout, color, fonts, and overall visual appearance. allowing you to create visually appealing and responsive designs. And next on we have JavaScript. JavaScript adds interactivity to your website. It enables dynamic features like animation, form validation, and interactive element making the website more engaging for the users. Now without any further delay, let's set up our developing environment so you can start working on your first HTML program. So there are so many code editors in market. But the code editor that we are going to work on is Visual Studio Code. So to download Visual Studio Code, you just have to visit the official website of Visual Studio Code. And after that you have to just click on the download link. In case you are using Mac, you can download from this link. But we are using Windows. So I'll just click on this link. After clicking on that link, my download process has started. So after the file gets downloaded, we are just going to click here and then we are going to click on I accept the agreement and then next. So this basically is the address of your visual studio code. Just let it be as it is and click on next. Next. And here we are going to click on create a desktop icon and open with code. Open with code. Then next. And then the last step is to install Visual Studio Code into our system. So the installation process has started. So here I can see that installation has been completed. We are just going to click on the finish button and that will launch our Visual Studio Code. So now we have successfully downloaded our Visual Studio Code. So now that we have installed Visual Studio Code, the next step is to install extension into our VS code. So for installing extensions in our VS code, we just need to click here and then we are going to search for extensions. So these extensions will help you to run HTML, CSS and JavaScript code in your VS code. So I have been using VS code for such a long time now. So these extensions are already installed in my VS code. I'll just show you. So the first extension that you need is live server. So this live server basically will help you to run your HTML and CSS code in your VS code. I'll just show you how to install. So after you'll click on live server, you'll get something like this. And you just need to click on install. And after installing this go live button will be added to your VS code. That's it. Just like that we are going to add auto close tag. So basically autoc close tag will help you to close the HTML or XML code automatically and after this you need to add auto rename tag. This will also help to rename the HTML pair tag and after this you're going to add ESLint. So this ESLint will basically help JavaScript to run into your VS code. And after this let us add code formatter. So this is the code formatter that we are going to add. This will basically format the code and increase the readability of a code in VS code. And we are going to add HTML and CSS support. So we are going to add this extension as well. So for now let's you know move on to creation of file into our visual studio code and these extension would be enough for now and for creating a file in your visual studio code first thing that you need to do is you need to add one folder in your VS code. So for adding a folder you just need to click on file open folder and we can just select any folder from our desktop or anywhere in our PC and we can also create a new folder. So what I'm going to do is I'm going to create a new folder here. So this new folder would be basics. That's it. Select folder and this basics folder has been opened in my VS code. So after opening a folder into our VS code first of all we are going to create one file in our folder. So to create a file inside a folder we are just going to click here and we are going to choose a name for our file. We are going to give it as first HTML. So our HTML file has been created. And next we are going to create a CSS file sty I I'll just give style dot CSS. So now CSS file has been created. And then we are going to create a JavaScript file as well. So we are going to give it as a script.js. That's it. So this is how you create HTML, CSS and JavaScript file into your folder. So the steps are you first need to add a folder in your VS code and inside that folder you're going to create multiple files. That's it. Now quickly just see how HTML works. So I'll just show you the code. I'll just run one single code. So let me write one heading. That's it. And you're going to save your code with Ctrl S. And then you're going to click on go live. Here you can see your web page. And this is the content that I wrote inside my web page. That's it. And this is how your Visual Studio Code functions. Now let us look at the overview at the basics of HTML and then we'll again come to our Visual Studio Code and we'll learn how to run HTML codes. So now just quickly understand the basics of HTML. So we use tags in HTML for every specific purpose. So now we'll just quickly see what are some basic tags in HTML. First one we have is HTML tag. So any of the content that we want to include to our web page will be written inside the HTML tag. Right? And after that we have head tag. Inside the HTML tag first of all we are going to create head. And in head tag we basically mention all the headers of our web page. For example title. So we use title tag to give title to our web document. We'll just practically see this within a minute. And after that we have this body tag. So apart from head section, apart from header, we need to include every specific thing. Everything that we need to see on our web page, we are going to include it in body section. So inside the body section, we use heading to give heading to our web page. And after heading, we use paragraph to write any paragraph in our web page. And that's it. These are some basic tags in HTML. And now we'll just go to our Visual Studio Code and we'll practically apply these tags. So we are just going to delete it. And from initial we'll understand what are the tags that are essential. So the first tag is dock type HTML. We basically use dock type HTML tag to tell the browser that the type of document we are writing is a hypertext markup language type. That's it. This is the use of dock type HTML tag and after dock type HTML we'll open our HTML tag. So as I have told you everything that we are going to write will be included in the HTML tag. So inside the HTML first tag we are going to create is head tag. Inside the head tag we are going to mention the title of our web page with the help of title tag. Right? So now inside the title tag I'm going to give the title my web page. That's it. And one more thing that we do inside our head tag is we link our CSS file to our HTML file. For that we use link tag. So link area stylesheet. This is basically written to tell that the document that we are linking is a stylesheet. And after this we are going to give the address of the stylesheet. So we are just going to mention the name and which is style dot CSS. That's it. This is the sign to close the tag. And we have successfully linked our HTML file with CSS file. That's it. Just save the document with control + S. Move to the web browser. Refresh it. And the heading has been gone because I have removed it. Now again we'll go to our Visual Studio Code. We'll just create. So one thing we did not see. So this is basically the title of the web page. You'll provide a title and that will be appeared here. So this is the use of the title tag. So after the head tag, what we are going to do? We are going to create the body section. So inside the body section we write headings, paragraphs, links, images and everything. First of all we'll see heading. So for heading we use H tag and H tag varies from H1 to H6. We are going to see all of them. So we are going to write this is my heading. Right? We'll just copy this heading and we are going to paste it. That's it. And I'm going to change it to H2, H3, H4, and H5 and H6. That's it. I have written my heading from H1 to H6. And Ctrl S. And we'll move to our web page. So here you can see H1 to H6. H1 being the biggest and H6 being the smallest. So this is how heading tags work and after this we'll see the example of paragraph tag. So here paragraph has been included. So these are some basic tags which you include in your body section which are heading tags and paragraph tags. So after learning heading tags and paragraph tags we are going to learn about link tag. So to provide link in HTML we use anchor tag and it is representing using a. So first of all I'll write my paragraph. I'll write here visit and after that I'm going to open my anchor tag and I'll give the reference. So inside this we are going to mention our link. I have just pasted my link and after this I'm going to close my anchor tag. So here we are going to write something visit let's say edure that's it ctrl s and here it is so the link has been created I'm clicking on the link and I have been redirected to the edure website. So that's it. This is how you use link tag. This is how you use anchor tag in HTML. So after learning anchor tag in HTML what we are going to do we are going to learn how to add image. So here I'm going to give heading image example. So first of all what I'm going to do I'm going to copy one image link. So I have copied one image example. Now let us learn how to add any image. So for that we use img tag and we give source to that image. Inside src we are going to give the link of the image. This is the link that I have copied. And after that we are going to give it a alt attribute. So alt attribute is basically given just in case your image is not loading. So instead of your image that all attribute text will be shown on the website. So that's it. We are going to close the image tag. Ctrl S again and example. So this is the image that I have provided inside my link. So we can see the image. Now let us just take an example how all attribute works. So what I'm going to do is I'm going to remove the image and save. So here we can see a cat because I have provided cat as my all attribute. Again here I can see my image. So that's how you provide image using HTML. So the next thing in HTML that we are going to learn, we are going to learn the creation of list. So again what we are going to do is we are going to provide a heading. So list example that's it and then let us create a list. So to create a list I'm going to use ul. UL stand for unordered list. Likewise if you want to create ordered list you are going to use o. So inside ul li stands for list items. So we give list items name inside li tag. So we are going to give three list items. That's it. And then Ctrl S. And the output the list has been created. Here you can see. Now let me give you an example of ordered list. Just Ctrl Ctrl V. And what we are going to do? We are going to change here control S. So this is the example of ordered list. You can see here 1 2 3 and in unordered list you can see the dots or pointers. So after ordered list we have description list. So description list is represented using DL and inside this we give DT which stands for description terms. So we are going to give term one and then inside this we are going to give DD. So DD stands for definition description and inside this what we are going to do we are going to write something definition of term one. That's it. And again just copy this control S. Now let us look at the output. So this is how description list works. So these are the three types of list in HTML. Audited list, unordered list and description list. So after covering list in HTML, we are going to move on to tables. how to create tables in HTML. So for that we are going to create one section. Section tag basically improves the readability of the code. So with the section tag what we are going to do first of all we are going to give a class to our section tag. So the purpose of giving class is that it will group the multiple elements that share the same style or the behavior. So we basically give classes to the components and elements of HTML just to target them into CSS file. So I'm giving the class let's say tables section. That's it. Closing the section. And now we'll create a table in HTML. So for that first we'll give a heading table example. That's it. Now after this I'll just format document. We'll just use this. So my document has been formatted just because I have this extension in my VS code. So that's it. After giving heading we are going to start the creation of table. We are going to use table tag. Inside the table tag we are going to create a table row. Right? So inside the table row we are going to mention DH which stands for table header. We going to provide table header as course. Right? th and duration of the course let's say then one more header let's say instructor that's it these are three headers of my table after that we are going to create one more table row so for that just copy this and paste it three times so just change the content inside it. HTML and one more we are going to create a section for JavaScript. That's it. Ctrl S and let us look at the output now. So you can see the table has been created. Further we can style this table as we want inside the CSS file. So now you know how to create a list, how to create a table inside HTML document. So the next thing that we are going to learn is how to create boxes. So this is the most important part because whenever we are going to make a project, a form or anything in HTML, we are going to need this you know creation of division, creation of class, creation of boxes. So we'll just quickly see how to create boxes. For that quickly create a section and then give it a class. let's say flexbox container and inside this for creation of one division I'm going to use divv and again we are going to give a class to our division so what we are going to write is flex items that's it and After this let us give a heading. We did not close this div. Inside this div we are going to give a heading. So the heading that I'm going to give is this is flexbox. Again I want to format my document. So we'll just go format the document. That's it. And after this what we are going to do is we are going to give one paragraph. So and that is it. The division will get closed. So to make one or two more division like this just copy this code paste it two times. That's it. The class is same for all the division. So this is how if I'll style one div then the styling technique will be applied to the three divs. So just I'll just change the content. This is flexbox one 2 and three. That's it. So the division is closed. The section is closed. Save the document and look at the output. So this is flexbox 1 2 and 3. So we are going to see the styling and then there will be a major difference in our web page. Our web page is currently looking like this. And now we'll move on to CSS and then we'll see the difference what it makes to our web page. So now we are done with learning basic tags of HTML. And now what we are going to do, we are going to learn a bit about styling and then we'll style this page only. the page we have created right here. We are going to style this page only. And after that what we'll do, we'll just apply our HTML and CSS skills and we'll create a form using HTML and CSS. And inside that form, we are also going to include some JavaScript functions like form validation and calculation and everything. So our first project will be creation of a form using HTML, CSS and JavaScript. And after that what we are going to do we are going to create one full-fledged project using HTML and CSS JavaScript. So let us now move forward and learn about CSS. So now let's start with CSS. CSS basically stands for cascading stylesheets and allows us to control how HTML elements looks on the web page. So the syntax structure of the CSS is very simple. The first thing we write is a selector. Then we provide a curly braces and inside the curly braces we mention the property and the value. So this is basically called the declaration and again after the semicolon we can again write the property and then we can give a value to it and at last we have to just close the curly braces. So after CSS syntax comes the CSS selectors. So CSS selectors are of different types like attribute selector, element selector, class selector, ID selector and universal selector. But among these all class selectors and ID selectors are used the most. So class selector is used to apply style to multiple elements that share the same class. So you just use dot followed by a class name. For example, if you have a class name button, you are just going to use dot, right? You are just going to use dot followed by the class name, right? And then comes the ID selector. After class selector comes the ID selector. So ID selector is used when you want to apply style to a unique element on the page. Each element should have a different I