HTML CSS Full Course 2025 | HTML CSS Tutorial | Web Development Course | HTML CSS | Simplilearn

Key Takeaways

[Music] Hey everyone, welcome to the HTML full course by Simply. HTML is the backbone of the web. Every website, every app interface and every web-based platform relies on HTML to structure content and deliver experience. Now, if you want to create web pages, applications or even step into full stack development, HTML is your starting point. In this course, you will learn everything from the fundamentals of HTML tags, attributes, elements to building form, stable, multimedia content, and semantic markup for accessibility and SEO. You'll also get hands-on practice to create clean, responsive, and professional web pages. The exciting part is the career potential. HTML is the foundation for web development and mastering it open doors to front-end development, web design, full stack careers and by the end of this course, you won't just know HTML, you will be ready to build real world websites from scratch. So guys, hit that like, subscribe, and let's dive into the HTML full course together. Before we move on, if you're interested in growing your career in full stack development, then the full stack Java Developer Master program is a great way for you to start. This is a 7-month live online and interactive program with comprehensive learning with hands-on experience with top tools that leverage front- end, middleware, and backend Java web development technologies. This program provides Simply Learn's job assisting you get noticed by top hiring companies. The greatest asset of this program is at the end of this course you will be honored with a course completion certificate. The advantage of this program is you will gain industry relevant skills in frontend, backend, version control, angular, SQL, software testing and a lot more. So whether you're switching careers or upskilling, this course is a great way for you to start. So guys, hurry up and enroll can find the course link below. Hey everyone, I'm sure you're all aware that every application that we use today has something called the front end which is the user interface and the back end which is the software that accesses data for us and finally we have the database to store the data. Now these three together form something called as the full stack. So hi guys, welcome to this video on what is full stack by simply learn. But before we begin, if you haven't subscribed to our channel already, make sure to hit the subscribe button and the bell icon to never miss an update. So, here's what's in store for you. First, we'll have a look at what front-end development is. Then, we'll see some of the front-end languages. Then, we'll move on to some front-end libraries and frameworks. Then we'll see what back-end development is, understand some of the popularly used back-end languages and frameworks. And finally, we'll have a look at the database. So now what exactly is front end? Every time you open a website, it has several UI components. And once you click on a particular icon, say sign in in this case, you get navigated to the sign-in or the login page. Right? So what happens is that all of these items facilitate navigation and utility. These are collectively called as the front end. So the front end is the visible part of the website or the web application which is responsible for user experience. The user directly interacts with the front- end portion of the website or the web application. So now let's have a look at some of the front-end languages. So I'm sure you've heard of HTML, CSS and JavaScript. So these are collectively called the front-end languages. When it comes to HTML, it defines the structure of websites and formats the web pages. It also defines text documentation. So let's look at a simple example. So here I've made use of the H1 tag which is the heading tag in HTML and I've displayed the message hello welcome. So correspondingly my website displays the same message. So HTML is responsible or it defines what is being shown on the website. Next up is CSS. Now CSS is a stylesheet that allows you to alter and style different web components be size, font, spacing, etc. It makes the content on the website look more decorative. Correct? So now if you have a look at the code here, I've added some styling. I've changed the font style to itallic. I've made the text bold and I've changed the color to red. And again, correspondingly all the changes are seen on the website. Moving on, we have JavaScript. Now, JavaScript is a very powerful client side scripting language and it is mainly used for enhancing the interaction of a user with the web page. So again if you have a look at the code here I've created a form wherein the user can enter their name and I've also displayed the message please enter your name. As a result an input box is made available where the user can type in their name. Now this is facilitated by JavaScript. So as I mentioned earlier it is used to make web pages interactive and bring the web applications to life. So next let's have a look at some front-end frameworks and libraries. Now most of these are JavaScript frameworks and libraries. First we have React, then there's Angular, there's Vue, there's jQuery and then there's Bootstrap. Now all of these help develop the front end of the application. However, when it comes to React, Angular and Vue, it's not necessary that you must know everything to create a website. One of them will be sufficient. However, the usage of React is on the rise and most of the developers prefer using React. jQuery and Bootstrap are also powerful frameworks that can be used to create interactive web pages. Now that you know what front-end development is, you must be wondering how the data is being fetched and how this data is being presented in front of you on your screen. Correct? Now, this is all facilitated by the back end of the application. So, let's understand what back-end development is. Now backend basically refers to the serverside development of the application. It is responsible for managing all the database with the help of queries and APIs. So every time the user makes a request, it queries the database and retrieves the data from the database and presents it to the user. And lastly, it ensures data consistency. So now let's have a look at some back-end languages and frameworks. Firstly we have Node. Node and ExpressJS are packages provided by JavaScript. Then there's Python which is a very popularly used language. Python frameworks like Django and Flask are popularly used to create the back end of applications. Then there's Java and Java provides Spring and Java server faces which are also used for backend development. Then there's C which provides frameworks like ASP.NET Core and ASP.NET MVC and other popularly used back-end languages are PHP, there's Pearl and Ruby. Database is the collection of interrelated data which helps in efficient retrieval, insertion and deletion of data from database and organizes the data in the form of tables, views, schemas, reports. Now some of the commonly used database management systems are MySQL, there's PostSQL, there's Microsoft SQL Server, there's Oracle database and then there's MongoDB. But how can we at simply learn help you? If you wish to make a career as a fullstack developer, then a certification will come in handy. For that you could head to our official website and look for fullstack development courses. Now we offer the fullstack Java developer masters program. We also provide the post-graduate program in fullstack web development and we also provide the fullstack web developer mainstack masters program. You can go ahead and click on the program and have a look at the overview. If this suits your requirements, you can go ahead and purchase the course. >> If getting your learning started is half the battle, what if you could do that for free? Visit SkillUp by SimplyLearn. Click on the link in the description to know more. Mobile and web applications are something that we practically can't live without. From ordering food to booking flight tickets to making important bank transactions, these apps have made our lives easier. To cope with the changing demands with respect to user experience and security, web development needs to take a robust and efficient approach. This video tells you what the future of web development will look like. 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 backend 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 WSM with relative ease. WM currently runs in 94% of users browsers with IE U 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 fullstack 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 I'll 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 fullsack 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. 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 sty sheet which is used to decorate your entire application. It is used to define the appearance of the content say in terms of shape, color, size, spacing, etc. Next up is JavaScript. Now this is the most widely used front-end language and enhances the interaction with the web page. Now you might want to brush up your knowledge on simple concepts like arrays, functions, objects and loops. You can also learn ES6 features like callbacks, promises, 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 View 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 a quiz question. Which of the following is not a JavaScript framework or a library? Option A, React. Option B, Angular, option C, Pandas, or option D view. So, let us know your answer in the chat section. One lucky winner will get a voucher. So, I'll keep this on the screen for a while. Mind you, which of the following is not a JavaScript framework or a library? So, comment your answer immediately. All right. So, moving ahead, let me tell you how 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'll look at the different types of web development. Going ahead, we'll look at what front-end development is and understand what exactly back-end development is. And lastly, we'll be comparing the two on the basis of languages, libraries, and frameworks, skills, job roles, and salary. So now let's begin by understanding what web development is. Web development is the process of creating a website on the internet. It refers to the non-design aspects of a website such as creating features and functionality using programming, markup, and scripting languages. Developers concentrate on the technical aspects of web development such as architecture, programming, application integration, and graphics. Now let's look at the different types of web development. Now web development could include the front end and the back end. Now together they form something called as full stack development. Now I'm sure you're wondering what they actually mean. So let's go ahead and understand them. Let's begin by understanding what front-end development is. Now front-end development is the part of the website that codes and creates front- end elements of a website which are features that are directly viewable and accessible by the client. Now essentially a front-end developer is in charge of everything you see be styling, graphics, text, alignment, navigation, colors, etc. and he attempts and he attempts to improve the user experience to make it as seamless as possible. Now these front-end developers also contribute to the overall design and aesthetic along with debugging. Responsiveness and performance are the two main objectives of front-end development. Then what exactly is backend development? You guessed it right. Now web development that occurs at the back end of programs is accurately termed as back-end 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 backend developers create code that allows database and an application to communicate with each other. Essentially, a back-end developer handles what you don't see. They are in charge of the back end of the website, which includes servers, databases, and applications. So, now that you have a brief understanding of what front-end development is and backend development is, let's go ahead and compare the two. So we'll be comparing the two based on five different features that is languages, libraries and frameworks, skills, job roles and salaries. Now let's begin with languages. Now front-end development typically includes coding using languages like HTML, CSS and JavaScript. Now as you all know HTML is a markup language that is standardized system for tagging text files to achieve font color graphics and hyperlinks. Now CSS is used to format the layout of these web pages and JavaScript is used to create interactive elements on the web page. When it comes to backend the languages include Python, Cash, Java, Pearl, PHP, Ruby and some JavaScript. Now, Java in particular was built from ground up to run on the server side. So, Java is extremely useful. Python is also one of the most popularly used languages and C# language is the preferred architecture for back-end programming in Windows environments. Now, talking about libraries and frameworks, front-end libraries and frameworks include ReactJS, Angular, Vue, jQuery and Bootstrap. While talking about back-end frameworks, we have ExpressJS, Node, Spring, Django, Flask, JSF, ASP.NET and .NET, MVC. Now, front end and back-end developers work very closely. So, it's helpful to have a foundational understanding of front-end developer technologies like HTML and CSS as well. Moving on to skills. Now, front-end developers are in charge of bringing visual elements to a website as well as interactive elements such as navigation, buttons, and anything else that improves overall usability. HTML, JavaScript, and CSS are frequently used to ensure that a site's visual 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, back-end 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 back end, 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 JJS 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 our web pages to host videos, images and other applications. It also facilitates navigation within web pages or between websites through hypertext. Hypertext refers to the links present in any website to connect different web pages and create a whole website. HTML has a lot of use cases. Web development. HTML code is used to design how a browser displays webpage elements such as text, hyperlinks, and media files. Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks. Web documentations. HTML makes it possible to organize and format documents similarly to Microsoft Word. Moving on to the installation part, HTML does not require any special software to work. If you have Notepad installed in your system, that's enough to start using HTML. The best part about HTML is its ease of use. Let's move on to the editors part now and we'll then download a particular editor for a complete HTML playlist. An editor or IDE which stands for integrated development environment is a software application that comprehends facilities to a programmer for software development. Just like Photoshop makes it easier to edit photos. In the same way IDE makes it easier for a programmer to write code. The number of idees present in the market today is huge. Some of these editors are Notepad++, Atom and VS Code. These editors are free to use. On the other hand, editors like Sublime are free but with some limitations. To access all the features of Sublime, we have to go for the premium version for the license and then we can use it for software development. My personal choice for an editor is the Visual Studio Code. There's a reason behind using VS Code as an editor. Let me tell you a few advantages of VS Code over other editors. First of all, it is free to use as it is open-source software. So, we can get it at no cost. It supports multiple programming languages. There's nothing like we need any web support or work on different editors for different programming languages. We can use VS code for different languages as well. Extensions are also one of the main reason behind using VS Code. Suppose we want to use a programming language. It does not support. All we have to do is to add an extension and we are good to it. Also does not affect the editor's speed as it runs as a different process. Besides all these properties, one main key factor behind using VS Code is its availability in different platforms like it is available for Mac, Linux and Windows. So I think there are enough features we have discussed till now. There are many more features that we'll discuss while installing and working with VS Code. Let's start with the installation part. Now the installation process for VS Code is pretty simple. Just go to Google and write here VS Code. Press enter and the next page which will open will show us the results. Click on the first link over here. And we are here at the website of VS Code. Right now you can see the download button in front of your screen. You can click on it and you can download the stable version for your operating system from here only or you can go to the other download button present at the top right corner of your screen. Click on the button over here. So you can see here we have all the extensions as well. These are the top extensions. We have to download them inside VS code once the downloading part overs. So here you can see the download starts. Now sit back and relax until the download finishes. Once the download completes, open the setup file from your downloads and it will take us to the license agreement page. Now agree over here, click on next and it will take us to the browser part. So here what we have to do is we have to choose a location for the VS code file to locate. So you can choose any location. So for now I'm clicking on next over here. Now you can see we have a different folder. So we can click on browse and then select it and then click on next. So here we can see we have some additional features. So what we'll do is we'll create a desktop icon. Now you can see other options as well. So click on them as well. Click on next. And now click on install. The installation will start. Once we are done with the installation part, click on finish and the VS code will start automatically. Fine. So here you can see we have the welcome page over here. What we can do is we can open a folder from here. So if you have any folder, so what we can do is we can open it from here. Now what we'll do is we'll create a new file. So here you can see we are in a file. What we have to do is we have to save this file. Now so click on file, click on save. And now we can save this file at any place or any location we can 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 extension. So these are the features VS code provides us. And below here we have the accounts option and the settings option. What we can do from here is we can change the font size and different settings. Right now the next button we are going to discuss is the extensions button. Here we can find many extensions given by the VS code studio community. They are free to use. So for now we'll use these two or three extensions. So what we can do is we'll click on HTML CSS support. So you can see I have already installed these extensions over here. So then we have JavaScript and TypeScript nightly and the live server extension. So this extension is pretty important the live server one and the HTML CSS support. You can leave the JavaScript and TypeScriptly for now. So we have to install these two extensions for now. So I have already installed it. You can install them in your computer. Now the next thing we have to do is so we can start writing our code here on I already told you that while saving any file make sure that we are saving that file with a HTML extension. So what we have to do here is we have to put an exclamation mark over here and press enter. And you can see we have the basic HTML code which we'll need in almost every we can simply start with it if we have basic computer knowledge. We got you covered if you are a newbie to HTML. Please stay connected with us and you guys will understand HTML in a very fun and exciting way. Before we go through the different tags present in HTML, let's discuss what a tag is. A tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page. After using a tag in an HTML file, the browser decides how to render or display the content on the screen. The list of tags present in HTML is pretty huge. We'll go through some basic tags in today's video and we'll go through the remaining tags while working with them. So let's start with the most basic tag we have in HTML. You can see here we have a basic program written over here. All the tags mentioned over here are mandatory for all HTML programs. The first thing we have here is the doc type as HTML. You can see it over here. We have written dock type HTML. So this is not an HTML tag but an instruction for the system about the type of document. Basically we are telling the system that this is going to be an HTML document so that all the browsers can know that this particular document is an HTML document and work accordingly. The next tag we have here is the HTML tag. You can see the HTML tag starts from here and goes till end. Right? We have ended this HTML tag at the end of our HTML document. Now this tag is necessary for all HTML documents. If you are working on an HTML document, then this tag is what we are going to need. The HTML tag represents the root and the end of the whole document. This is a container tag that contains all the other tags within it. So this tag is pretty mandatory in all HTML document. Now the next tag we have here is the head tag. You can see the head tag over here and the ending of this head tag is present over here. We have certain tags present inside this particular tag. Now you can see that this head tag contains meta tags and the title tag. Right? You can see the meta tag over here. We have three meta tags and then we have a title tag as well. Now the meta tags doesn't appear on the page itself but only in the pages source code. Meta tags are essentially little content descriptors that help search engines what a web page is all about. Now the next tag we have here is the title tag. The title tag is used to define the title of a web page. Basically, we write the name of a web page inside this tag. For example, if we see here, the title of a web page is document form. If we change the title of this HTML document and write here something like first document. Fine. Now save the program. Open it with live server. Now you can see it over here that the window name is changed to first document. there's no change in the web page itself. So what we are going to do is we are going to reduce the size of a VS code and the browser. We are going to keep them side by side here so that any changes we made in this HTML document are reflected in the web browser. Other tags we can use inside the head tag are the style tag, the script tag and the link tag. Now the link tag is used to link any external CSS file to a HTML page. we have to provide the source of that file and then any styling changes we make in that particular file will get reflected in the web 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 our HTML document. For that what we have to do is we have to write here link. So this is the tag. Now we have to write here real and we have to write here stylesheet. Fine. Now the next thing we have to do is to provide the source code of this particular file. So for that we are going to use href. Href is going to be style dot css. Now close this link tag. Now this rail tag over here specifies the relationship between the current document and the link document. Now you can see it over here we have this real as stylesheet. This means that this particular file is a stylesheet and we are going to use this for styling purposes. Another important tag we have inside the head section is the script tag. This tag is used to declare or use any script within the HTML document. Basically used for JavaScript. So it's not necessary to use this tag within the head section only. We can use it anywhere but for now we are going to use it inside the head tag. The syntax is also easy. We have to write it like script src. Now src is going to be the file name. So let's add another file over here. We'll write first dot js. So this will tell the browser that this particular file is a javascript file. So we are going to write here inside this. Now we are going to write first js. Now we have to define the type as well. So type is going to be text and the file is a JavaScript file. So we'll write here JavaScript. Fine. Now close this tag and the script tag will closes automatically. You can see it over here. Fine. The script tag is closed. Keep one thing in mind that we have to close the script tag every time. But the link tag is not necessary to close. The next tag we are going to discuss is the body tag. The body tag defines the document's body. Now you can see it over here. If we go back to HTML page, you can see the body tag over here. Now the body element contains all the content of an HTML document such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There can only be one body element in an HTML document. Any tag we are going to use within the body tag is going to define the structure of a web page. Now the next tag we are going to use is the heading tag. There are six different types of heading tags starting from H1 and goes to H6. H1 refers to the most important heading and H6 refers to the least important. The font size of H1 is the largest and the font size of H6 is the smallest among all. So let's use them all here. What we'll do is we'll write here H1. Now inside this H1 we'll write this is heading one. Save the program and you can see it over here. We have a heading in a web page which says this is heading one. Similarly we have the H2 tag as well. So if we write here H2 and inside this if we write this is heading two. Save the program. You can see the change in the font size. You can see the difference over here. The font for H1 is greater and the font for H2 is a bit smaller than H1. Similarly we have H3 and for H3 we are going to write here this is heading say three. Fine. Then we have H4 as well. So we are going to write here H4 and inside this we are going to write this is heading four. Fine. Similarly we have H5 and H6 as well. So we are going to mention them first here. So we'll write here this is heading five and finally we have H6 which is used for heading six. So we are going to write here this is heading six. Fine. Save the program and you can see the difference in all the headings over here. The size for H1 is the largest and the size for heading six is the smallest. We can use any of these headings according to our needs. Similarly, we have the paragraph tag as well in HTML. It is used to write a paragraph or any content within the web page. The syntax is simple. We have to use the P tag for that. So, if we write here P and now inside this paragraph tag whatever thing we'll write. So, let's say we are writing here this is a first HTML document. Fine. Now save this program and you can see it over here. We have some text present in the web browser. Right? So these are the most basic HTML tags we discussed in today's video. As we said the list of tags is large and we'll discuss them while working with them. So please go through these tags on your own and let us know if you face any issue. We have already discussed about tags in the last video. We came across several important tags in the previous video like the HTML head and the body tags. A simple definition of tags states that a tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page. After using a tag in an HTML file, the browser decides how to render or display the content on the screen. Right? Now, keeping this definition in mind, the definition of an element in HTML states that an HTML element is the collection of a start tag, its attributes, an end tag, and everything in between the tags. Right? So, an HTML element is basically a collection. Let's understand this with the help of an example. What we'll do is we'll write over here inside the body of this HTML document we'll write P. Fine. Now this paragraph tag over here is an example of a tag. It has opening tag and a closing tag. So this whole thing is a tag. This paragraph is a tag over here. Now if we add an attribute to this tag like an ID or a class. So what we'll do for that? We'll write here let's say ID is equals to param 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 content of this tag. So this is the content present inside whole tag and then we have the end part of a paragraph tag. So this represents the end part. Right? So the combination of these four things is known as the HTML element. Now let's talk about the case sensitivity of HTML tags. So HTML tags are not case sensitive. So you can see we have paragraph tag over here with small P present inside angular brackets. What we can do is we can write here capital P as well. So these two things are pretty same. So let's write something inside this as well. So let's say we are writing here this is paragraph 2. Fine. So this is the content present inside this paragraph tag with capital P inside angular brackets. Now save the program and you can see we have two paragraphs over here. The first one says this is a paragraph and the second one says this is a paragraph 2. So what we have to do is we have to remove a from here. Save it now. And now it says this is paragraph 2. Fine. So I hope you guys got that HTML tags are not case sensitive. Fine. Now let's move ahead and we'll now discuss empty elements in HTML. Most HTML elements have a start tag and an end tag that indicate where the element begins and where it ends. For example, we have this paragraph tag over here. This is the start of this paragraph tag and this is the end part, right? So, this indicates that this paragraph tag ends over here. Now, there is a group of elements that are exceptions to this rule. So these elements are called empty or void and only have a start tag since they have no content present inside the tag. So they must not have an end tag in HTML. Example of empty elements are like the break tag. We have we have image link and many more such tags. The list is quite long. So what we'll do is we'll add an image using the image tag. So image tag is basically an empty element. So we'll use that particular element and you guys will understand what empty elements are. So as mentioned earlier that empty elements do not require any closing tag. So what we'll do is we'll write here inside angular brackets.g is the tag name. Then we'll write here src. So src over here is attribute. We'll discuss attributes in upcoming videos. So inside this we'll provide the path of our image. Let's say we have this image present inside images folder which is a folder present in a system. So where we are saving all our HTML programs. So the next thing we'll write here is alt. Alt stand for alternate. So if the image is not shown over the browser then the alternate text will be shown. So let's say we are writing here image one. Now we'll close this image tag. So that's all. We don't have to close this particular image tag. We don't have to write here like this. So you can see we don't have to write here like this anything. So if we not write it over here that's fine because image element is an empty element. So let's save the program and you can see we have an image over here in the browser. So the image size is quite large. What we'll do is we'll reduce the site. So we'll write here this for now. We'll discuss all these things in the upcoming videos. So don't worry about it for now. You can see that we have an image over here. So this is our image. This particular image is what we have added using the image tag. So this is done. Now the last thing we'll discuss in this video is the nesting of elements. Nesting means we can use the tag or element within another element. For example, you can see we have a paragraph over here. So this is a paragraph which says this is paragraph 2. Let's add some more things over here. So let's say we are writing over here HTML stands for hypertext coupl fine and save the program so this is the paragraph over here you can see let me increase the size of our browser a bit so now I think you guys can see it much better now what we'll do is we'll use a particular element or tag within this paragraph tag. So let's say we want this HTML to be cursive and bold in nature. So what we'll do over here is we'll use the B tag over here. So B stands for bold. So what we'll do next is we'll cut HTML from here and we'll paste it inside this B tag. Now save the program and you can see HTML is bold in nature. Right? Similarly, what we can do is we can nest one more tag inside this bold tag. So what we can do is we'll write here I now we have to put this HTML inside both these texts save this program and you can see the HTML is cursive in nature now. So you can see we have three different tags or we can say we have two different tags inside a particular tag. This is known as nesting of elements. So we can do it with HTML as well. I hope you guys must have got an idea about what HTML elements are and how elements are different from tags in HTML. In the last part, we came across HTML elements. We saw the difference between HTML tags and elements. Now that we already have an idea about elements, let's discuss what attributes. Let me write the basic syntax of an HTML element over here first. So what we'll do is we'll write over here. Let's use the paragraph tag. So we are writing over here this is a basic example of elements in HTML. Fine. I hope you guys must have got an idea about what this is. This is actually a basic HTML element. We have nothing else over here. Just a simple example of HTML element. An element consist of a start tag and ending tag and the content within the tag. Right? So this particular thing is an element. Now attributes in HTML refer to the additional properties or characteristics of an element. For example, if we write here, let's suppose we are writing over here. Let's say we are writing over here ID as paralle. Fine. Now save this program. And you can see over here that we have a paragraph which says this is a basic example of elements in HTML. Now we have this whole element with id as par one or we can give any id of our choice. Now this ID is unique for this particular element. For now you don't have to worry much about this ID or any other attribute. Just focus on what attributes are. We are going through the working of attributes basically. So we can use the ID of this attribute to style this particular element. So basically this ID attribute defines what this HTML element is. we have to use the style tag element or we can say we have to use the style element for styling this particular paragraph. You will understand it once we go through the tag. So let's do it over here. What we'll do is we'll use the style tag over here. So we'll write here style. You can see this is a style element. Basically it has start tag, it has ending tag. Now we'll write some content inside this particular tag. So let's say we are writing over here hash par one. Now inside this what we'll do is we'll define some styling properties. So let's say we are writing over here background color is red and we'll write here color. So this color here refers to the font color basically. So we'll write here blue. Now save this program and you can see the paragraph in a browser is changed. So what we did here is inside this style element we access this particular ID. So ID is unique for each element. We'll discuss it later on. So basically this particular paragraph tag has an ID named par. So we are using that particular ID. Then we have some CSS properties. So these properties are used to style a particular element. So we have used it over here. You can see it over here. If I zoom out a bit in the browser, you can see the background color of this whole paragraph is red and the font color is blue. Fine. What we want to say here is this ID over here is basically an attribute. It is used to identify or change a particular element. We have many attributes present in HTML. So we'll go through some of them. Let's say we are adding an image over here. So let's add an image. And you guys will understand about HTML attributes here as well. So we'll write here img. So this is basically an empty element. We have discussed it in the previous part wherein we went through HTML elements. Now what we'll do is we'll write here src. Now src is also an attribute. This attribute is used to provide the system with the source of a image. So if we go back to this particular HTML folder. So here we have a HTML folder. You can see we have a folder here named as images and we have an image present inside this particular folder. Right? So what we have to do is we have to provide this path inside a HTML file. So what we are going to do here is we are going to get back to VS code and inside here we'll write images. So this is our folder name and we have a file name HTML.png present inside that particular folder. So src is the attribute and this particular thing is the value of our attribute. Right? Now the next thing we are going to do here is we are going to write here alt. Now inside this alt let's say we are writing html over here. Now this alt attribute is used when we add an image on. So basically what happens is when we add an image to a web browser sometimes what happens is the image is not shown over the browser. So in that case the alternate text will be shown. So if this particular image is not shown in the browser then this particular text will be shown. So let's save this program. We'll open a web browser here side by side as well. You can see that this particular image is present over here in a web browser. The size of this image is quite large. We can change the size in two different ways. We can either use the ID attribute here as well and then use that particular attribute in the styling tag or CSS file to change the size of this image or we can simply use the height and width attribute in the image tag over here. So that's the simple one. So what we are going to do is we are going to write here height. Height is an attribute. We have to define the height in pixels. So we have written over here 300 pixels. Save the program. And you can see the height of this image is 300 pixels. Same thing goes for width as well. If we write here width and if we define the width as 300 pixels as well. Save the program. And you can see now the height and width of this particular image is 300 pixels. Right? So guys, this is all about the basics of attributes in HTML. I hope you guys understood this. We'll go through each attribute while working on those attributes in the upcoming videos. So don't worry about it if we haven't covered all the attributes over here. We'll go through them in the upcoming videos. Before we move on and discuss the different formatting tags in HTML, let's understand what formatting is. Formatting refers to the process of making the text present on a web page more appealing to the user. For example, let's say we want to add a heading in a HTML document and for that we want a specific font size. Let's say we want to add a heading with a bigger font size. For this purpose, we have the heading tag present in HTML which provides us with six different font sizes with H1 being the tag with the greatest font size and H6 with the smallest one. We have already discussed it in in the previous videos as well. Now we need to make sure which font size we want and we can use the heading tag accordingly. Let's understand this with the help of an example. Let's suppose we are working on a web page wherein we want a heading. So let's say the heading is what is HTML? We want the font size to be bigger. So simply we'll write here H1. We have already mentioned it that H1 has the biggest font size of all the six heading tags. Right? So inside this we'll write what is HTML. So let's suppose this is the heading. Now on saving the program you can see here on the browser that we have a heading with larger font size. So what we can do for now is we'll remove this heading from here. Now save it. And you can see we have only one heading as of now. We have the heading as what is HTML. We can also write a paragraph after this heading tag that will explain what HTML is using the paragraph tag. So let's do it over here as well and you guys will understand it much better. So here we are going to use the break element. So this is basically an empty element used in HTML for line break. So what we are going to do is we are going to put it over here. So this is the tag BR tag or break tag we can say. Now what we are going to do is we are going to write here inside the paragraph tag HTML stands for let's write it in capitals. We'll write here hypertext markup language. Fine. So here we have paragraph that says HTML stands for hypertext markup language. Now what we want to do is we want to add another heading to this web page which will define the uses of HTML. So basically what we are doing is we are going through the sizes of heading text. So we want another heading let's say over here. Now the main heading of our web page was what is HTML and we want it to stand out among all the headings present in our web page. That's why we use the H1 tag for that heading. Now for the next heading or for the new heading, we'll have a little bit smaller size than the main heading. So what we are going to do is we are going to use the H2 tag or the H3 tag for that. So let's use the H3 tag for now. We'll write over here H3. So basically we are going to write it after a BR tag. So we are going to use the BR tag over here or the break tag we can say. Now we are going to write here uses of HTML. Fine. Now save the program and you guys can clearly see the difference in font size of both the headings. Let me zoom in a bit here in the browser. So now you guys can see it much better. The there's a difference in the size of heading one and heading three. Right? So this difference is what we are talking about. There are six different sizes for a heading tag in HTML. We can use any of these heading tags according to our need. Figure out which one of these six tags is best suitable for your web page and use them. Simple and easy. Let's move ahead and we'll now discuss some more formatting tags present in HTML. Let's move ahead and we'll now discuss some more formatting tags present in HTML. The next tag we are going to discuss is the bold tag. This tag is used to make the text bold or strong. So there are two different tags for the same task. For making the text bold, we can either use the bold tag or simple B tag. We can say the other tag we can use is the strong tag. The functionality of both tags is similar. So we'll use them side by side so that you guys can see the difference or they are basically same. So what we are going to do is we are going to write here after this BR tag we are going to write here B. So B stand for bold tag. Now we are going to write something in here. So let's say we are writing over here. Now again after BR tag we are going to use the strong tag. Fine. We'll write same thing here. The content will remain the same. So we are going to write HTML over here. Now here we used both tags with similar content present inside them. Save the program. And you can see we have two similar outputs here on our web page. The outputs are exactly similar. The working of both the tags is the same. Right? Now let's recall the nesting of elements in HTML from the previous video. We have said earlier that we can use an element within another element in HTML. We are going to nest this bold tag inside our first paragraph tag. It means that we are going to nest this bold tag over here. So what we are going to do is we are going to use bold tag inside the full form or we are going to put the full form of HTML inside the bold tag. Fine. So save it. And you can see we have hypertext markup language written over here in the browser in bold. Right? It looks better than the previous one. Just like the bold tag, we have two more text present in HTML to make the text on screen look more appealing to the user. The italic tag and the underline tag. Now you guys must be thinking that these three formatting techniques are also present in Microsoft Word. You're right. These three tags are present in both MSWord and HTML. The working is also same. So let's use these tags here once. What we are going to do is we are going to use these tags over here only. So we are going to put this hypertext markup language inside three different tags. So we are going to put them inside italic. We are going to put them inside bold and we are going to put them inside underliners. So we are going to do this over here. Now you can see the nesting of elements over here. If I zoom in a bit on visual studio code you can see we have a paragraph tag then we have three tags present inside it. So we have bold tag, we have italic and underline. So this is called nesting of elements. Now save this program and you can see the text over here. We have hypertext markup language in italics. It is underlined and it is bold in nature. Right? The next tag we are going to use is the delete tag. We have two different tags present for this task as well. Let's say we want to put a line through the center of any text crossing it out. Basically, let's say that this text is not relevant. Fine. So, let's go through an example. First, what we are going to do is we are going to use the break tag over here. And now, after this break tag, we are going to use a paragraph tag. We are going to write a paragraph. So let's say we'll write here I would like to have a cup of okay cup of coffee. Fine. Save it. And you can see we have this paragraph or sentence over here on the browser. Now what we want is we want to delete this particular word or we can say we want to put a line through it. Fine. So what we are going to do is we are going to write here strike fine we are going to put coffee inside this strike tag because we want this particular word to cut and then let's say we are writing over here t fine so save it now and you can see it over here it says I would like to have a cup of coffee has a line over it and then we have written tea so you guys can understand the meaning of this sentence by yourself I can use this tag anywhere according to our needs. We can achieve this same thing with the help of the delete tag as well. What we have to do is we have to write here in place of strike. What we are going to do is we are going to copy this piece of code from here. We are going to paste it here. Now instead of strike we are going to write here delete. So del this is the tag and we are going to close this tag as well. Now we are going to write coffee inside it and save the program. And you can see we have the exact same output with this tag as well. Fine. Another tag we have in HTML for formatting is the mark tag. Now the mark tag in HTML is used to mark any particular text. The text will be highlighted with yellow color. For example, let's say we are writing something over here or we can just paste this again and we are going to remove this part. Now we want to mark the word coffee let's say. So what we are going to do is we are going to write here mark this is the tag and inside this tag we are going to write coffee let's say fine save the program and you can see it over here we have this sentence which says I would like to have a cup of coffee and coffee is highlighted over here right so this is the mark tag and we can use this tag for formatting now the last tag we are going to discuss in today's video is the font tag the font is an inline element used to change font sizes, font colors and font styles of the text in a web page. This element has its own attributes. So the three attributes we can use are size, color and face. Fine. Size is used to change the font size of the text. We can write values between 1 and seven with one being the smallest and seven being the largest font. Exactly opposite to the heading. So you can learn it that way. Color refers to the font color. We can simply write the name of the color or we can use the hexadesimal values for colors. The hexadesimal numbers are specified according to the RGB value for each color. The last thing we have is face. Face refers to the font style. The default HTML font is Times New Rome. We can use any font style of our choice using this attribute. So let's use this tag over here and you guys will understand it much better, I guess. So what we'll do is we'll write here let's say we are using a paragraph tag. So we'll write something over here. Let's say I prefer. Now we are going to use the font tag over here. So this is a tag. You can see it in red color. Now we have three different attributes right? So the first attribute we have is size. So we'll write here inside size. Let's say the size of this font is four. Then we have color. So color defines the font color. So let's say the font color we want is red. And then we have the face. So let's say we want the font style to be vdana. And we'll write something over here. Let's say we are writing this over red. Fine. Now save the program. And you can see it over here. It says I prefer red. Fine. So let's complete this sentence. What we are going to do is we are going to write something after this font tag as well. So let's say we are writing over here red over blue. Save the program. And you can see it over here that we have this particular sentence which says I prefer red over blue. So let me increase the size of VS code so that you guys can see it clearly. So here you can see we have this paragraph tag then we have written inside it I prefer and we have kept this red word inside a particular element font element basically this font element has three different attributes size color and face now let's change the size of this to six for now and we'll check the output save the program and you can see red over here is quite large in size Right? It looks different. So I hope you guys got this. Formatting an HTML document is mostly done using CSS. But now HTML also allows us to format our documents using different tags. Basic formatting we can say. So formatting is making the web page more appealing using these particular tags. So the list of formatting tags present in HTML is quite long. We can't discuss all of them here. But if you use any of those tags in the upcoming videos then surely we'll discuss them over there on. Now the task for you guys is to use these formatting tags and let us know if you find any difficulty in using them. In HTML a phrase tag is used to give structural meaning to a block of text. What does that mean? Let's try to understand this with the help of an example. We'll first take a paragraph for this example. A small one maybe. So let's do it here. What we'll do is we'll write here P. So we are going to use the paragraph tag. Let's write something over here. So let's say we are writing over here hello everyone. Then I'll write this is caution and let's suppose we are writing over here please subscribe to a YouTube channel. Fine. Save this. And you can see here that we have the same paragraph here on the browser. Now what we said earlier about the phrase tags is they are used to give structural meaning to a block of text. Right? So here we have a paragraph and we want to provide meaning to a block of text. Let's say we want to put some emphasis on the word YouTube over here. Fine. We want this word to stand out differently from the rest of the paragraph. For this task, we have the emphasize tag in HTML. The syntax for this tag goes like this. So what we'll do is we'll cut this sentence into two different parts so that it will be easy for you guys to understand. Now we have the emphasize tag in HTML. The syntax is pretty simple. What we have to do is we'll write over here. So we are going to make changes inside this particular paragraph tag only. So we are going to use the emphasis tag over here. So what we have to do is we have to cut the word YouTube from here and we have to paste it here. Now the syntax is so simple. We have a two-word tag. So it says em. It stands for emphasis. Now save the program and you can see here in the browser you can see the difference. Basically the word YouTube stands out from the rest of the words present in the paragraph. To lay some more emphasis on the word YouTube, we can use the title attribute. Now title attribute will be used inside the emphasis tag. So let's do it here once. So what we are going to do is we are going to use the title attribute over here. So let's say the title says check a YouTube channel. Fine. So let's break it a little more. So here you can see we have these three lines. So inside this paragraph tag what we are doing is we are using the emphasis tag and inside that emphasis tag we are using the title attribute. Fine. On saving the program you can see nothing changes over here on the browser. To witness the change here we have to take our mouse cursor over YouTube and you can see we have a small pop-up here that contains the value of a title attribute. Let me zoom in a bit here. So here you can see on taking the mouse cursor we have this small pop-up with the value of a title letter. Right. Another thing we can do for this task is we can add a link over here on the word YouTube. We'll discuss it in the upcoming videos when we'll go through text links in HTML. So you guys will understand it much better then. Now you guys may have a question in your mind that we can do this exact same thing with formatting tags as well, right? Yes, of course we can do that. But formatting refers to the process of molding the text for a better look and feel of the text. While phrase tags are used to provide meaning to a block of text, it's not necessary that if a tag falls under the category of formatting text, then it can't be a phrase tag. The difference lies in the purpose of using that particular tag. I hope you guys are getting it. The next tag we are going to discuss is the mark tag. We have already discussed this tag in the formatting tags as well. So let's discuss it one more time. The mark tag in HTML is used to mark any particular text. The text will be highlighted with yellow color. So we have discussed it previously. Now what we are going to do is we are going to copy this piece of code. So we are going to copy the whole paragraph from here and then we'll paste it here. Now instead of using the emphasis tag we are going to use the mark tag over here. Fine. So we are going to change the tag name from emphasis to mark for the opening and closing tag. Save it now. And you can see we have another paragraph over here which is almost the same or which is exactly the same. It says hello everyone. This is Kosh. Please subscribe to our YouTube channel. Now the thing to notice here is the word YouTube. It is highlighted in yellow color. Right? So the title attribute will work same over here as well. If we put our mouse cursor over the word YouTube, you can see we have this popup with the same title value. Right? So one thing to notice here is the title attribute is basically the differentiator between the formatting tags and the phrase tags. It means that the tag remains the same but the way of using it defines the purpose. So let's move ahead and we'll now discuss the abbreviation tag in HTML. The word abbreviation in general terms refers to the short form of a word. That's it. We have the answer here. If you're using any abbreviation for any word, we want the user to know that this particular word has a special meaning. Then we can use the abbreviation. So the syntax goes like this. What we will do is we'll again use the same paragraph and we'll paste it over here again. So what we are going to do is we are going to remove this empty space from here so that you guys will be able to see the whole code or as much code as possible. So what we are going to do now is we are going to use the abbreviation tag. Fine. So we'll remove this piece of code from here. We have to put this over the word YouTube. So what we are going to do is we are going to write here abbreviation and inside there we are going to write y. So this is the short form of YouTube basically. Now save the program and you can see that we have another paragraph but there's no difference over here as of now the word is simple. There's it's not standing out basically right. So this is because while using the abbreviation tag we must necessarily use the title attribute along with this tag. So let's do it here. We have to write here title and we have to write here YouTube because YT stands for YouTube. So we are going to write here YouTube. Now save the program and you can see here that the abbreviation YT is now underlined with a dotted line. Fine. This indicates that the word YT is used as an abbreviation here and the user will know that something is different over here. On taking the mouse cursor over it, you can see we have the value of a title attribute. You can see it says YouTube. So this is basically the short form of YouTube. YT over here. Now the next tag we are going to discuss is the address tag. This tag is used to display the address in the web browser. The content is written within the opening and closing address tag is considered as an address in HTML. So this is the address we generally use. Fine. Not an IP address or nothing else. The general address we use for our location or for a address. So let's use this tag over here. We'll write here address and this is the tag. Now inside this tag we are going to write YouTube office let's say. Then we have 1 2 3 street. So this is going to be the street name for our address. Then we have let's say sector. So let's say the sector is 456 and then we have the place name as NOA and the country name as India. Fine. So this is an address and let's save the program. You can see here the difference in the browser. The address tag over here has a different font. This tag is used to indicate that this particular block of text is an address. So you can see it over here. This is our address. Now if you want to see it clearly let me remove these three paragraphs from here. Save the program now. And you can see we have address over here. So if you want to write it in different lines. So what we can do is we can use the break tag over here. Then over here again save the program. And you can see we have the address over here. The font is different. That's the only difference between address tag and other tags. The next tag we are going to discuss is the short quotation tag. This tag is used to add double quotes within a sentence. The syntax is simple. So what we'll do is we'll write something over here. Let's say we are writing over here paragraph. We are writing over here. Let's say again please subscribe to a. Now we want the word YouTube inside double quotes. Right? So for that we are going to use the quotation tag. This is the syntax. We have to write simple Q and we have to put the word YouTube inside it. And then we'll write here channel. And we have to put a space over here. Save the program. And you can see it says please subscribe to a YouTube channel with YouTube present inside double quotes. Fine. So the last tag we are going to discuss in today's tutorial is the code tag in HTML. This tag is used to represent programming code in HTML. The text will look like we have any code from a programming language. For example, we'll write here code. This is the tag. Now inside there we'll write let's say we are using a for loop in JavaScript. So we'll write here for i is equals to zero. Then we have I less than three. So let's give some spaces over here. And then we have I ++. Fine. Then after this we have inside here console.log and we are going to print hi. Fine. So if you are new to this language just ignore it. It's just a simple piece of code from JavaScript. So save it now and you can see we have this code over here. Now what we are going to do next is we are going to use break tag over here first. Then we'll understand it. Fine. So we are going to use the BR tag here again and here again. Fine. Save it now. And you can see the code now. You can see we have the same output on the browser as the text present in VS Code. The font is exactly the same. So this represents a piece of code in HTML. We can use the code tag for that. So guys, these are some of the basic phrase tags we discussed in today's video. As we mentioned earlier that the list is quite long for all these tags. We'll discuss them in future whenever we use them. I hope you guys got it. Till now we have covered different types of tags present in HTML. We came across the formatting tags and the phrase tags present in HTML. In the last part, we also covered the differences between these tags. Apart from all the differences these tags have, they are still similar in one aspect. That is these tags are used to change the appearance of a web page. Whenever we use these tags, we change the look and the feel of a web page. Now, the meta tag is a bit different from these tags. This tag does not impact the appearance of a web page. It is used in the head section of the HTML document and does not require any closing tag to work. What this tag does is it give information about the data we have on a web page. Meta refers to metadata. Metadata means data about data. For example, if we have a website that provides the user with some data, it can be any kind of data and the user can go through it to gain some information. But the information about the data present on a website is given by metadata only. What does it mean to provide data about data? For example, if you go to Google and search for a keyword. Now, how Google works is it goes through the keywords present in any particular website and then shows the user that particular website. Those keywords here refer to metadata and we have to put them inside meta tags in HTML. The description we get while searching for a website is also present inside the meta tag of any HTML document. Basically what we are trying to say is this tag is used to give essential information about any particular web page. Meta elements can be used to include name value pairs describing properties of HTML documents. For example, if you want to put any keyword for a web page, the name attribute inside the meta tag will contain the keyword and the value attribute will contain the actual keyword name. There's no closing tag needed in meta elements because these elements contain information within attributes only. We can use multiple meta tags for different information. An interactive web page cannot be created with just this structure. So you will employ aiding technologies like JavaScript and CSS to bring interaction and beauty to your HTML respectively. That's where CSS comes into picture. Making web page pages attractive is made easier with the help of CSS often known as cascading style sheets. The style and experience of a web page are handled by CSS. The color of the text, the font style, the spacing between paragraphs, the size and arrangement of columns, the background pictures or colors used, layout designs, differences in display for various devices and screen sizes, and a variety of other effects can all be controlled using one single language, which is CSS. Although CSS is simple to grasp and learn, it offers strong control over how an HTML document is presented to the user. It depends how you are presenting your HTML document, how you are styling it because the user will get an impression on the first view itself. CSS is most frequently used in association with HTML or XHTML as markup languages. Now when it comes to front- end web development of any web page, the three most widely used technologies are HTML, CSS and JavaScript. HTML is used to create the structure of a web page. CSS makes it look more attractive to the user by adding styles to it. And JavaScript adds interactivity to the web page. So let's move ahead and now we'll discuss the advantages of using CSS. The first one is timesaving. CSS is a time-saving since you can create it once and reuse it across a number of HTML pages. There's a style available for each HTML document or we can say each HTML element that you can select and apply to as many different websites as you desire. If you utilize CSS instead of manually writing HTML tag attributes each time, pages load faster. You can only you only need to create one CSS rule per tag and it will be applied to every instance of that element. So quicker download times results from less code. Simple maintenance. To make a modification that affects all elements on all web pages, just modify the stylesheet. Everything will update instantly. Also CSS provides a great range of characteristics than HTML so that you can provide a considerably better styling experience. CSS provides a considerably wider range of properties as well than HTML. So can you can give your HTML page a much better look than you can use using HTML attributes better styles than HTML. Now stylesheets enable the material to be optimized for multiple types of devices allowing for multiple device compatibility. Different versions of a website can be displayed for printing or for handheld device devices like PDAs and cell phones by using the same HTML document. So let's move ahead and now we'll understand how CSS actually works. A browser must merge the content of a document with its style information before displaying it. It goes through several steps to process the document which we have outlined here. Remember that this is a greatly simplified explanation because different browsers will perform the procedure differently when a browser loads a web page. But this is what usually takes place in a browser. The browser starts loading HTML. Example, it receives it from the network. It transform the HTML into a document object model. In the computer's memory, the document is represented by the document object model. In the same time, it also loads CSS as well. Most of the resources that the HTML document links to including embedded images, videos, and even connected CSS are subsequentially fetched by the browser because it is handled a little later in the process. We are not discussing JavaScript here to make things easier for you guys. The browser parses the CSS that was fetched and groups the various rules according to the type of selectors they use such as element, class, ID, and so on. It determines which rules should be applied to which document object model nodes based on the selectors. It discovers and applies the appropriate styles to each node as needed. This immediate step is called render tree. So this is the creation of DOM tree. After the rules have been applied to it, the render tree is organized in the manner in which it should look. The screen displays the pages visual repres representation. This stage is called painting. So guys, this is how CSS actually works on a web page. I hope you guys must have got an idea about what CSS is and why one should use CSS on a web page. We'll dive deeper into all CSS concepts in the upcoming videos. So we'll go through all the CSS aspects one by one. CSS uses a color values to specify the colors on a page. They can be specified using predefined color names, hex or RGB format. There are nearly 140 standard color names. Hexodimal is a six-digit representation of a color. The first two digits are represents a red value. The next two are green value and the last is a blue value. All the other colors can be created using the combination of these three colors. There are several websites available where you can know the hex value of the different shades of color. As you can see, the black color is signified by hashtag and the six zeros. The red is # FFF and the four zeros followed by it. The RGB color value is specified using the RGB property. This property takes three values. One for red, green, and blue. The value can be the integer between 0 to 225 or a percentage. As you can see, the black color is signified by 0 0, the red by 255 0, the blue by 00 255, and the green by 0 255 0. Now let's move to an example to understand how we can add the colors to our page. In this example, we will see how we can add colors in different ways to our HTML. So, we are on the Sublime Text editor. As you can see, we have the standard bullet ready with an H2 and a paragraph on our page. Open the style tag and make the font size of the paragraph to 25 pixels so it is clearly visible. Let's start by adding colors to our text just by color names. HTML supports nearly 140 standard color names. We'll make the color of the paragraph green. For that, just type color and set the color to green. As you can see, our paragraph is changed to green. Let's try one more. This time we will add the color red. Just refresh. As you can see the color is now changed to red. There are nearly 140 HTML standard colors that is supported by the web browser. You can also add colors using the RGB format. There are many websites available to know the RGB or hex value of the desired color. One such is htmlcourse.com. As you can see in the htmlcourse.com, we have the hex value and the RGB value of the desired color. Let's try one. We'll add this color with the RGB value 171, 229, and 27 to our paragraph. So for that, just type RGB and the color code you want. As you can see, the color is not changed to our RGB value. Let's try one more. This time we'll use this RGB value to our text. You can see the color is changed to a desired value. In this way, you can use the RGB format to change the colors. The next way is using the hex values. Hexim is a six representation of a color. The first two digits are red, next one, two are green, and the last are the blue value. Let's see how you can use the hex values. As you can see, the hex value for this color is # 31787F. We'll use this value to our text. To add the hex value, you have to use the hashtag followed by the color code. You can see that color is changed to a hex value. Let's try one more. You can see the hex value for this color is # F14 A07. Just copy the desired value to your file. You can see the color changes. You can also add color borders to our heading. Do that. Just mention the border style along with the color code. We'll add the border color red to our H2. Now you can see we have the border around our H2. I hope you have understood how to use the color values to a web page. There are mainly three ways by which you can add the colors to your web page. They are hex, RGB values and the color names. In the last two sessions, we have discussed what is CSS and the CSS color property. In this session, we'll discuss how you can set the background image on your web page. We'll see the several properties related to background image and how you can use them to customize the image around the web page. So without further delay, let's get going. So let's begin by discussing about the background property of the CSS. The background image property specifies an image to use as a background of an element. The background is defined in the body element of the HTML code. To add a background image on an HTML element, use the HTML style attribute and the CSS background image property and mention the path of the image inside the URL attribute. There are several properties of the background that are used to define the image on a page. Some of the common ones are background image, background repeat, and background position. By default, the image is repeated so it covers the entire element. Let's switch to the text editor and see how we can add the background image to our page. So, we are on the sublime text editor. Let's start by opening a style tag. The background image is always set on the body tag. So, type body and open the curly braces. The background image is always set on the body tag. So, open the body tag with curly braces and start typing background image. Use the URL value of the background image to set the path of the image. Make sure the image is in the same folder as of the HTML file. Here we have our file nature 3.jpj. So mention the path inside the double quotes. Save the file and let's see how it looks on a web page. As you can see, we have the image on the web page. Let's format this image a little bit. We'll start by setting the background size. So, type background size. And there are three values to the background size. First one is auto. It will set the image as it is. Save the file. And let's see how it looks on a page. As you can see, the size of the image is as same of the original size. The color value will set the image size that will be fit to the web page. As you can see the image is set to the whole web page. We can also set the image size to manual. Let's say we want the image size of width 500 pixels. So now as you can see the width of the image is 500 pixels. Next we will set the background repeat property. There are three values to background repeat. First is no repeat. With the no repeat value, the images will not be repeated on a page. Now, as you can see, the images are not repeated. Second is repeat X. It will set the images to be repeated on the X-axis. As you can see, the images are now repeated on the X-axis. Similarly, repeat the images on the Y-axis. As you can see, the images are not repeated to the y-axis. And there's a default value repeat, which will repeat the images on the web page. So, let's keep it to cover. So, let's keep the background size to cover and set the background repeat to no repeat. Let's save the file and look it on a web page. Now, as you can see, the image is fully fit to the web page. Let's add a text above our image to see how it looks like. So, I'll add a paragraph tag and type some random text here. Let's set the text color to red and align it to center. I'll type P and open the curly braces. I'll set the color to red and I'll set the text align to center. Let's save the file and see how it looks on a page. As you can see, we have a text above our image which is centrally aligned and the text color is red. In this video, you will learn what are CSS selectors and what are their different types. So, let's start by discussing the agenda for this tutorial. So in this tutorial we will learn what are CSS selectors and what are their different types. We will also look at an examples to how to work with CSS selectors. So what are CSS selectors? CSS selectors allow you to select and style HTML elements. Selectors are used to find elements based on their ID, classes, types, attributes, value of attributes and much more. Let's discuss the most common selectors. There are several different types of CSS selectors. The most common of them are CSS element selectors, CSS ID selector, CSS class selector, CSS universal selector and CSS group selectors. So what is a CSS element selector? The element selector selects element based on the element name. This is a CSS selector. It means it will select all the P elements on the page. It will style all the P elements to the central array having blue color. This is a CSS selector. It is set to P. This means it will select all the P elements on the page. It will style all the P elements to be center aligned having blue color. Let's look at what it looks on a page. So as you can see all the elements are centrally aligned with a text color blue CSS ID selector. The ID selector uses the ID attribute of an HTML element to find a specific element. An ID should be unique within the page. So you should use the ID selector to find a single unique element. To find an element within a specific ID, use a hash character followed by the ID of the element. So here we have used the hash paran. So all the rule will be applied to the HTML element with ID equal to par 1. So this is an ID selector. It will be applied to all the HTML element with ID is equal to par 1. As you can see, it is applied to the element having the ID paran. All the other element are defaultly styled. CSS class selector. The class selector finds the element with a specific class set by the HTML class attribute. To select an HTML with a specific class, use a period character followed by the name of the class. So this style will be applied to all the elements having the class name class one. This is a class selector. It is denoted by a period symbol. All the elements having a class name class one will be styled with centrally aligned and color blue. As you can see the element having the class name class one is styled and all the other elements are set to default. CSS universal selector. The universal selector selects all the elements on a page. The universal selector is assigned by a star character. The universal selector selects all the elements on a stylesheet. As you can see it is denoted by a star mark. All the elements inside our web page will be centrally aligned and the color will be set to blue. As you can see all the elements are centrally aligned and the colors are set to blue. CSS group selector. In stylesheets, there are often elements using the same style. To minimize the code, you can group selectors. To group the selectors, separate each selectors with a comma. Here we have grouped selectors for H1, H2, and P. So, style is applied to H1, H2, and P elements only. It is better to group the selectors to minimize the code. Here we have grouped selectors P, H2, and H3. So, style will be applied to only elements having P, H2, and H3. As you can see, so all the element of P, H2 and H3 are centrally aligned and colored to red. Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways. But every box has a content area and optional surrounding padding, border, and margin areas. The following diagram demonstrates how the content padding, border and margin CSS properties determine how much space an element can take on a web page. The content area consists of content like text, images or other media. It is bounded by the content edge and its dimensions are given by the content box width and height. The border area is the area between the box padding and margin. Its dimensions are given by the width and height of the border. The margin area consists of spaces between the border and the margin. The dimensions of the margin area are the margin box width and margin box height. It is useful to separate the element from its neighbors. The padding area is the area that includes the element's padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding box and the height of the padding box. Now let's jump to an example to understand the box model better. So we are on the sublime text editor. To get started I have created a box theme simply background color pink. The font size is set pixel and we have set the border to zero solid green. Let's see how it looks on our page. So as you can see we have a box named simply learn with background going all the way to the end. I have also removed all the padding and margin from the page so that the boxes are pushed just at the corner of the page as you can see. Let's start by adding a padding of 20 pixel to the box. If you save the file, you can see the box increased by 20 pixel from all the sides. Padding occurs inside the background of an element. It goes around the content of the element. Most of the buttons inside the CSS is designed using padding so that the background of the button becomes wider than the actual text. The next thing we can do is change the border of the element. If you change this border size to 15 pixel, we will get a nice solid background of color green. The border goes around the padding of our element. So we have the 20 pixel of padding around our content and 15 pixel of border around the padding which is around the content. Now we'll see the working of the margin. If we add 30 pixel of margin to our element, you can see the spacing on the outside of our border. So let's add the 30 pixel margin and refresh. You can see the spacing on outside of the border. Margin is used to space two elements apart from each other. Now let's change these values to see the difference. Let's make the margin 40 pixels. We'll make the padding 30 pixels and let's keep the border 20 pixels and make it color red. This is 40 pixels. Let's observe the changes. So as you can see our border now has a red background. The padding is 30 pixel. The margin is 40 pixel. Let's inspect the elements to understand it better. By clicking on inspect you can see the different styles. Here in the computer tab you can see the box model. This is your content area. Uh this is the padding area. This is a border and this is the margin area. We have the margin of 40 pixels around the border. So you can when you click on this area you can see the margin gets highlighted. The border area gets highlighted of 20 pixels. This is the padding and this is the content. You can change the size of the content by adding the height and width. So let's try adding height and width. We'll give the height 50 pixels and we'll give the width also 50 pixels. Just save the file. Now when you refresh you can see the content area 15 to 50. What is a flexbox? Flexbox also called flexible box model is basically a layout mode or model that provides an easy and clean way to arrange the items within a container. If you are using a CSS for a while, you must have used the old block model where you assign width in terms of percentage or fixed width and then use the float to arrange the items on the page. Suppose for example you want to arrange three boxes in a row. Then you have to enter everything manually from width, height and to padding. Flexbox can do all these things with ease. Some of the concepts of flexible box model is the ability to alter the item width and height to best fit in the containers available in the free space. Flex model is direction agnostic which is different from the box model which is vertically biased and the inline which is horizontally biased. Flexbox works for both. Flexbox is more effective in a small scale layouts. So here are the main properties of the flex. Okay. So let's jump to some code and learn how these flex properties work. Okay. So we are on the sublime text editor. To get started, let's add a div inside a body here. And we'll give a class of flexbox container since this will be the container where all our flexbox item will reside. Then inside this container we will add another div and give it a class flexbox item and one more class flexbox item one which will help us to understand which items we are referring to when we style our elements individually. Let's just save the file and see how it looks on a page. Now if you save the file, you can see we have the box because I have already applied some of the styles to these flexbox items. Let's just see the styling. So you can see we have the items styled just a basic styling so that we get the box on our web page. Now let's just copy these and add two more flexbox items. And you will see we have two more boxes on our page. Just copy and paste them below. Give them the class name flexbox item two and flexbox item three. Just save the file. Now you can see we have three boxes on the page. Now to create a flex container, we will add display flex to our flex container. And this is how we create a flex box container. So here we will just add display flex. Just save the file. Now you can see all the items are in the same height and they are all in the same row. You will also notice that if we shrink our browser, the items adjust themselves accordingly to fit within the browser. Now if you want to style the elements on the main axis, we will use the property justify content inside a flexbox container. Let's make it a center. Save the file. Now you can see that all the elements are in the center of the page. Another thing we can do is if you want our layout to have a spaces between the elements, we will set the justify content to space between. You can see all the items are now evenly spaced. If you want to lay out your items on the crossaxis, we will use the align items property. The default value for this is stretch. If you want to keep the size of our items, we will use the center and then all our items will be center vertically. Before flexbox, aligning the items vertically inside the container was nearly impossible. With flexbox, you can do it easily. Now you can see the items are aligned vertically inside the container. Now let's just delete everything and we'll just keep the display flex. Now if you want to have a column layout instead, we will use the flex direction and change it to column. Flex direction column. Now if you refresh the page, you will see all the items are shown up in a column. Now we can start talking about the different properties that can be applied to our different flexbox items as opposed to flexbox container items. The flexbox container is only for laying out and spacing between your items as well as the positioning of your item inside the container. The actual flexbox item properties are used to override those item properties or to apply different sizing to these element. Now, if you want our first item that it does not shrink when we shrink our browser, we'll set the flex shrink to zero to our first item. So, we'll set the flex shrink to zero. Now if you go back to the page and try to shrink this, you'll see the first item remains the same. It does not shrink. Now in the same way you can set the items to grow in proportion with the web browser. Suppose we want our flexbox item to to grow with the as the page grow and cover all the empty spaces. So we'll set this flex grow to one. Now you will see the all the empty spaces are taken by the second item. Let's say we want the second box to be the center of the container instead of stretching to full height. We can use the align self property and set it to center. Now you will see that the align property overrides the align content property of the container. You can see it is centrally aligned. So this is all you need to understand and get started to work with the flex boxes. I hope you guys enjoyed this video and learned something new about the flexbox and how you can use the flexbox to create the dynamic layout for your site. What is a grid? A grid is a set of intersecting horizontal and vertical lines defining the rows and columns. And what is a grid layout? So CSS grid layout is the most powerful layout system available in CSS. It is a two-dimensional system meaning it can handle both columns and rows unlike flexbox which is largely a one-dimensional system. You work with grid layout by applying the CSS rules to both the parent element which became the grid container and the elements children which become the grid items. The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer between parts of a control-built HTML primitives. You can see this is a basic layout of a grid system. Like tables, grid layout enables an author to align elements into columns and rows. However, many more regular layouts are either possible or easier with CSS grid than they were with tables. For example, a grid containers child element could position themselves. So they actually overlap and layer similar to the CSS positioned elements. So here are the features of the CSS grid layout. They are fixed and have flexible track sizes. You can create a grid with fixed track sizes using pixels. For example, this sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages with the new FR unit designed for this purpose. You can place the items into a precise location using the grid line numbers, names, or by targeting an area of the grid. The grid also contains an algorithm to control the placement of items not given an explicit position on the grid. You can define an explicit grid with a grid layout. The grid layer specification is a flexible enough to add additional rows and columns when needed. Features such as adding as many columns that will fit into a container are included. It also gives you control of overlapping content. More than one item can be placed into a grid cell or area and they can partially overlap each other. This layering may then be controlled with the Z index property. So here are the basic terminologies you should know to work with the grid system better. The grid line is a dividing line that make up the structure of the grid. They can either be vertical or horizontal and resides on either side of rows and columns. A grid column is a space between two adjacent vertical grid lines. The size of a grid column is determined by the grid template columns property. On the other hand, a grid row is a space between two adjacent horizontal grid lines. Its size is determined by a grid template rows property. The grid cell is the single unit of a CSS grid. And in grid design, a gutter is basically the width of the space between columns. A gutter margin is a white space formed by the adjoining inside margins of two facing pages in a book or a space between columns on a page. So with this, let's now move on to the hands-on demo and see how the grid system works in actual world. >> If getting your learning started is half the battle, what if you could do that for free? Visit skill up by simply learn. Click on the link in the description to know more. So we are on the sublime text editor open with a project with some basic background styles and nothing inside the body. You can see this is a basic background style we have pre-applied just to have a good look of the box model. We'll start by creating a container and wrapping our grid items in it. So let's create a grid and give it a class name grid container. And inside of it, we'll put our different grid items. So, we'll just create different grid items and give them a class grid item followed by a class number they belong to. So that we can easily distinguish between them. Just copy paste this five times. So we'll have the five elements on our page. Let's save the file and see how it looks on the page. So you can see we have the different grid items on the screen. So that are easy for us to visualize. We have not applied any styles to them other than the visual style. So we'll go back to our code. Let's go back to the CSS styling sheet. So to create the grid, we'll open our stylesheet. We need to display grid on our grid container. So we'll select our grid container and send the display to grid. If you save now, you will see nothing changes. This is because the grid itself doesn't define any rows and columns for us to work with. It just they give the alignment properly. Therefore, by default, it looks just exactly the same. To make the grid look actually grid, what you need to do is define columns and rows for a grid. So to do this, you will use a set grid template and set the column if you want to set the size of the column. Uh we'll set the size to 100 pixel and 150 pixel. Now if you refresh, you have the 100 pixel column on the left and a 150 pixel column on the right. And then the grid captures our next row. But what if we want a box to flexible size themselves according to the items inside of them? Here we'll use a fraction in it. Instead of a 150 pixel column, we want one fraction of our size. And instead of 100 pixel, we want the two fractions of our size. So we'll just replace with two fractions and this with one fraction. Now if you save the file and go back to the page you will see that the items on our left here in the first column are twice as large as the item on the second column. And that's because of the FR units we have defined. You can see the difference in the sizes. The item one is the twice of the size of the item two. Another thing you can do is with columns is use repeat. Suppose you want four columns of a size 100 pixel wide. You can just write repeat command and inside of it how many times you want to repeat the size. So we'll just delete this and use the repeat. We'll set the number of times we want to repeat and the size of the columns. Now if you save the file you will see we have a four columns of 100 pixel wide. We can do the same things for row. Just set the grid template rows and define the size you want. Now you can see we have a symmetric size all around our container. If you don't know how large your grid is going to be, you can use the grid auto rows and this will determine the size of all the rows that is added after the template rows. Suppose we want all our rows to be 100 pixels. So we'll just delete the grid template rows and set the grid auto rows to 100 pixel. Now you can see all the rows are now 100 pixel tall. Let's change our column back to 100 pixel and 150 pixels so that it will be easier for us further. We'll just delete this grid auto rows. Now we'll talk about the spacing of the rows and columns apart from each other. We can do this with the help of the grid gap property. Grid row gap will give some spaces between the rows. Similarly, the grid column will give you the spaces between the columns. Now you can see the gaps between the rows and columns. Now we want the same value for both the columns. You can use the grid grab property and mention the space. We'll just delete these two and instead of it we will use just the grid gap and set the size to 20 pixel. Now you can see the evenly spaces between the rows and the columns. This is all you need to know about the sizing of the different columns and rows. Now let's talk about the positioning items within its grid cells. So for horizontal positioning we could use the justify items and we can set that to center. So that centers the each item within the cell. By default, it is set to stretch. You can also set it to start or end or space around. We will leave this to center. To vertically position the content, we could use the align items. The align items also accept the same values. We can set it to center. You can also set this one to start or end. Just we'll keep this to center as well. You can also align the entire grid within the container. So let's get rid of these to just demonstrate them in a proper manner. We can use the justify content and that will align the content horizontally within the container. You can also set this to start or to end. Just set this back to center. To align the content vertically, we could use the align content. And the align content also accepts the same value. We can set it to center. First start. If you inspect the elements, you can see they are aligned centrally between the container. We'll just close this. Okay. So, this is everything you need to know to get started with the grid layout. Grid works very similar to the flexbox, but it allows you to much in terms of laying your elements because of its 2D nature. Here you can see we already have the HTML file with us. In this video tutorial, we are going to create the structure of a form with the help of HTML and then we are going to style it with the help of CSS. So before we begin with the programming part, let's discuss what is a form. Basically forms are very essential part of any website. It is a way to take users input and process the data acquired from the user. The form offers controls for almost every use of an application. With the help of form controls and several form fields, we can take small as well as large input data from the user and then we can use that data. You guys must have seen it in different websites where we have login and signup forms. So in login form what we usually do is we enter a email and a password or a mobile number and a password a combination of any of them and then the website allows us to open a account on for that particular website. On the other hand on a signup form we need different type of data we need name we then we have to put a a that's where CSS comes into picture. CSS is used to style a form and it will make a form look more interactive to the user as well. So without any further delay, let's start with the programming part and we'll create a basic form with the help of HTML and CSS in this video. So don't worry, we'll create some more forms in the coming videos. So we'll in this particular video we'll see how CSS is used along with a form. So here you can see we are in the HTML part of a form. So we'll create a form first. So the most basic element HTML element to create a form is the form element. Now we are going to take some unordered list or the ul element. Now we are going to take the alli. So you as you guys all know ul and alli both elements are used in combination always. So let's label the form. So we'll write label for we'll take certain parameters and we'll write here name. Fine. This is going to be the name. We'll write here name. Save it and just refresh the page. So here you can see we have the name present on a web browser. So the next thing we are going to do is we are going to create some more input fields. Right? So to create an input field, we have to use the input element always. So we'll write here input. We have to define type. Type is going to be text. And then we have to put a name. Name is going to be ID. So ID is going to be the name and then we'll write here user name. Fine. So here you can see we have an input box. Let me just increase the size a bit. So here you can see we have a input box with name as the label and then we have an input box. So similarly we'll create some more input elements first. So we'll just paste them here for four times. So you can see we have four different placeholders. So just let's just remove this one and we are going to keep it simple for this particular video. So we'll write here label for mail. Then we are going to take email from the user. So we'll write here email and input type is equals to we'll write here email. ID we'll also mention is mail let's say and name we are going to write here user email. Fine. So save it. Here you can see now we are going to do the same for another one. So here what we'll do is we'll write here message. So we are going to label this as message. We are creating another input field. So we'll write here input type is equals to okay just let's just do one thing. Let's just remove this input tag from here. And we are going to use the text area in place of it. So we'll write here text area id as let's say message and then we have to write here name user message fine close it and the text area is done so here you can see we have a text area as well we have two input fields and a text area so we are going to create a form out of it fine so we have all the HTML elements now what we are going to do is we are going to create a we are going to style this form basically so before that let me just create a button as well. Okay. So, we'll write here button type is equals to submit. And we'll write here submit. Fine. Save it. And here you can see we have a button as well. So, let's move to the CSS part of this form now. So, what we are going to do is we are going to style this form with the help of CSS. Now we already have the structure of a form. So to style this form we are going to use certain ids or we can say elements name or whatever we want to use we can just use them. So first of all we are going to center the form on the web page. So we are going to let me just show you in this way. So here you can see we have all the HTML elements present on the left side of our web page. So we are going to center them first. So we are going to put them here. For that we are going to use basic CSS. So we'll write over here margin. Margin is going to be zero and auto. Zero for up and down, auto for left and right. So then we are going to write here width. The actual width of our form. So let's say the actual width is going to be 400 pixel. Then we'll write here padding. Padding we are going to write is 1 m. And then we'll write here border. Border is going to be 1 pixel. Solid. And let's use any color for this form. So let's just write here this save it. So here you can see we have a border the border of our form. So here you can see our form is present at the center of our web page. It looks different from what we had in our HTML part. Right? So we have a border the all the elements are present at the center. Let's style it more. Then we are going to define the border radius. Border radius is going to be let's say 1 m. Save it. And here you can see the curved border. And we'll write here background color. Background color give any. Let's use beach. So here you can see this background looks nice for this form. So we actually we are actually done with the outer styling of our form. We have a form here. Now what we are going to do is we are going to style these elements as well. So we'll write over here ul and list style type. So we are going to remove these bullet points from here. So we'll write over here none for the first. And here you can see all the bullet points are gone. Then we are going to write here padding is zero and margin is zero. Fine. Save it. So here you can see we are done with the unordered list. Now we are going to write here form li and we are going to do it for every list element. So we'll write it here like this. We are going to give margin top to every list element. So we are going to give margin top to every element. So let's say the margin top is going to be 1 m. So here you can see it's equal for each element. So the top margin is also 1 m. Then we have a difference of 1 m between each input field. Right? So that's how it works. Now we are going to style the label. So we are using a HTML element name. Right? So here you can see. Now what we are going to do is we are going to align uh all the labels. Fine. So we'll write here display as okay inline block. Save it. And here you can see then we'll write here width as 90 pixels. Save it. So here you can see the width. It started taking the form of a form. the shape of a form basically. Then we'll write here text align to the right. Okay, here you can see. Now what we are going to do is we are going to take a input element and text area together. So we'll write here text area as well. So we need to make sure that all the text field have the same font settings by default. So what we'll do is we'll write here font 1M and we are going to use sense serif here. Fine. Let's just write something over here. And now save the program. And here you can see so the font size is changed. And the next thing we are going to do is we are going to give uniform text field size as well. So we are going to write here width as 300 pixels and then we have box sizing property. Box sizing we are going to write here border box. So here you can see all the boxes are of same width. So here you can see the form looks nice now. And the next thing we are going to do is we are going to write here border as one pixel solid. And let's use this color. Save it. And here you can see the border changed. Now what we can do is we can also use the focus property of CSS to focus on every input box. But we are not going to do it right now. So the next thing we are going to do is we are going to write some code for the text area and we are going to align it vertically. So we are going to write here vertical align as top. And here you can see the message is now present at the top. It looks nice. And we are going to give height as well to the text area as 5m. And here you can see the text area is a little bigger in size when compared to name and email. Now what we are going to do is we are going to write here dot button. We are going to align the button with the within the text field. So we'll write over here padding padding left. Basically we are going to declare it as 90 pixels. And here you can see it looks nice. And let's just use 95 pixels here maybe or we can use 93. Yeah, it looks aligned right. So it the button is done. And we are going to just use the button element here. Margin left 0.5 m. Save it. And yeah the form is we are done with the form. So this is the basic CSS form. So HT we used HTML to create the structure and then we use CSS to make it look a bit more interactive than it was with the help of CSS. So don't worry guys, we can do a lot of things with CSS. We can make a web uh we can say form look more interactive way more interactive than we can even think. CSS is actually interesting. We can do a lot of things with this form as well. But this time what we are doing is we are going to see how CSS is basically applied to a form to make it look more attractive to the user. So the background color and all plays a vital role in making a form look attractive to the user. So discussing talking about how actually a form works. So here you can see we have three different input fields. We have name, email and message. Just write name over here. Okay. And just let's write here caution and a message submit it. And here you can see it says please include an at the rate in the email address because here in HTML we have used the type as email for this input box. So how actually a form works? We create the structure of a form with the help of HTML. Then we use CSS to style the and make it look more attractive to the user. And then at the end JavaScript is used to validate that particular form. But now HTML also provides some sort of validation to any form with the help of type and some other attributes. So here we haven't used JavaScript till now. So what will happen if we are going to create a full-fledged form with back end and front end both we'll take input from the user we'll submit it and the data will be sent to the server and then we can retrieve any data from the server or we can submit the user data to the server as well. So HTML, CSS and JavaScript together comes together to actually create a form. This time we are done with the HTML and CSS part. We have created a form and we have styled it with the help of CSS. JavaScript was developed in the year 1995 by a person named Brendan Ike. Brendan was working for Netscape Communications while he developed JavaScript in 10 days. There were a few changes in the name of JavaScript. Initially it was Mocha which was later changed to live script and then it finally became JavaScript. The start of JavaScript wasn't that good as so many developers who were using Java at that time. They considered JavaScript as a language for designers and non-engineers. No one ever knew that this small side scripting language would have a great future. Today more than 90% of the websites out there they are using JavaScript somehow. Many of you guys gets confused with Java and JavaScript. Let me clear it for you that both Java and JavaScript they are different languages. They have almost nothing in common. Many people say that JavaScript was named after Java as a part of a marketing strategy to gain wider acceptance and recognition. In 1995, Java was a buzzword when JavaScript was developed. That's why they renamed JavaScript after Java. Let's move on to what is JavaScript. Have you guys ever been through a website where you can see images that slides automatically? One such website is Amazon. The homepage of Amazon where we can see different types of ongoing sales is an example of JavaScript. In layman language, JavaScript is a lightweight scripting language used to make web pages more interactive and more lively. Earlier when JavaScript was developed, it was only a side scripting language to do basic tasks like you can add pop-ups in your web page or you can make your web page more interactive. Nothing more than that. But now the whole scenario has changed. With the help of JavaScript, we can create applications as well. If we talk about applications, let's take an example. Let's suppose we want to create an app. We can create it in Android or in iOS. But we have to learn few different languages to create those apps. For Android, we have to learn Java and XML. And Swift, we have to learn for iOS. But with the help of JavaScript, you can create hybrid applications which can work on any platform without any problem. Tech giants like Google, PayPal, Amazon and YouTube, they are using JavaScript these days. The evolution of JavaScript in the past few years was unbelievable. Suppose you want to create a single page website. Everyone of us is familiar with Gmail. Let's suppose. So Gmail is a single page website which looks more like a desktop software than a website. So Gmail is based on angular.js. It is a popular framework by Google which is free of cost and it is totally based on JavaScript. Now let's go over some of the features of JavaScript. These features are actually why it is considered that using JavaScript is advantageous over other languages. So let's start some of these points. JavaScript is not a proper programming language. Indeed, it is a scripting language which works in the runtime environment just like Python. So there are few other languages like C++ and Java. They need a compiler to work. But with JavaScript, you don't need a compiler. Once you are done with the script, it will interpret and show you the output in the browser directly. Next up is lightweighted. JavaScript can provide programming facility to some extent. In JavaScript, you don't need to specify any data type or return type which helps in making development more quicker. That's why it is known as lightweighted. JavaScript is both client side as well as serverside technology. Clientside technology runs on the user's computer whereas the server side technology runs on the web browser. Initially when JavaScript was introduced, it was introduced as a clientside technology. But with the introduction of Node.js JS in 2009. One can now work in the back end as well. There is a way to validate the user's data before sending it to the web server and we can do that with the help of JavaScript. The data will be checked for correct form and value. All we have to do is start a loop, give it the condition to check the data. JavaScript is also platform independent. Although originally designed to work on browsers only, but now it is a platform independent language. It means once you are done with the script you can use it on any browser or platform without any problem. JavaScript is an object based scripting language although many programmers do not consider JavaScript as a true object-oriented programming language due to its lack of class concept. It does support other features of object-oriented programming like it supports encapsulation, it supports polymorphism and also it supports prototypal inheritance. The last but not the least feature of JavaScript is case sensitive. So when it comes to keywords, identifiers, names and functions. JavaScript differentiates between capital and lowerase letters. We have to keep this in mind while programming. Now I will quickly go over some of the JavaScript applications where JavaScript is currently being implemented. First one that comes to every person's mind is web development. It was also the main motive behind developing JavaScript. We have technologies like Angular. We have Node.js. We can create beautiful web pages. Also, JavaScript can be used along with HTML and CSS to make those static looking web pages more engaging. If we talk about other applications of JavaScript, we can use it in app development either mobile app or web app. Like we took the example before that how hybrid apps made with the help of JavaScript can take over traditional Android and iOS app. One of the most important and unique application of JavaScript is in smart watches. The Bengal.js is an open-sourced smartwatch powered by JavaScript. Gordon Williams, the man who is currently working on this project. It is said that this new open-sourced stack built around JavaScript will replace the onboard firmware soon. The next application of JavaScript is client side validation. As we discussed earlier, JavaScript is used to validate the user data whether the user's input is correct or not by cross-checking it with the given condition. Like the user wants to enter in your website and you want it to be a user with at the rategmail.com in his email id. So you will give that condition to JavaScript and it will cross check it with the user's information. like when the user will try to enter in your website, it will check that if at the rategmail.com is there or not in the user's email id. So it can validate the user also. Apart from that, one more application of JavaScript is game development. JavaScript can be used to make fullyfledged 2D or 3D games using different libraries. Although most JavaScript game development focuses on creating games used in browsers only. Let's start this video with the introduction to DOM. DOM stands for document object model. It is an API for HTML and XML documents which helps JavaScript to understand what is there written inside the HTML document. API stands for application programming interface to understand API better. Let's take an example of a restaurant. Imagine yourself in the restaurant. You are sitting at the table with a menu. The chef in the kitchen is also part of the system. The waiter here works as a messenger between you and the chef. That's what API does. It works as a moderator between JavaScript and the HTML document. DOM defines the whole HTML document in a hierarchical form to make it understandable for JavaScript so that other JavaScript functions can work over it. It represents the entire document in the form of object and nodes whether it be elements or tags or anything stored in the document. The entire page content can be accessed or manipulated by JavaScript. DOM is not used with JavaScript only. Other languages like Python also uses DOM. DOM was designed to be used independently. To begin with DOM, there is nothing special you have to do. Different browsers have different implementation of the document object model. Every browser uses DOM to make the web page of the document accessible by JavaScript. Let's move on and see what is document object model with the help of an example. I believe you guys have the basic knowledge of HTML and CSS a prerequisite for this course. Let's start things off with a basic HTML example. Here we have a code that consists tags like HTML, head, body, heading tag etc. We have the HTML tag here, the opening HTML tag and the closing HTML tag. Inside the HTML tag, we have the head tag which contains the document's header part. Inside the head tag, there is a title tag that contains the title of the web page. Then comes the body tag which contains a heading tag and two div tags with ids as div one and div two. A div tag defines a particular section in the HTML document. The ID used within the div tag. It is an attribute basically that has to be unique within the document to make the element unique from other elements. Next up we have a paragraph tag with a class attribute within it. CSS and JavaScript uses classes to select and access specific elements. Don't worry guys if you have no idea about it. Let us first see the output of this code before going to the document object model of this whole document. So guys, this is the output of the previous code we just came through. Here we can see the title of the web page as well as heading after it. There were two different div tags used in the code. Here's the output of both the div tags. The question here is where are those ID and class attributes seen in the output. The answer to this question is there's nothing on this web page that can show both of them. We can use them in our CSS file or through JavaScript to specify the containers in which they are used. So we have concluded how a normal document works and how the browser interprets the HTML code. But how JavaScript uses this code is a bit different. That's where DOM comes into play. When the actual HTML document is loaded in the browser, another representation of that document is created known as document object model. Here's the model you can see on your screen. Each of the tags used in HTML document is correspondingly represented as objects in the DOM like starting from the HTML tag and covering all the other tags like head, title, body and few more. The same hierarchy as there was in the HTML document goes with the document object model also. Document object model is simply the same HTML document with different representation. The reason behind this different representation is that it's easy for JavaScript to interpret this format. JavaScript can't understand tags but it can understand these objects. JavaScript can easily manipulate these objects using different functions which we will see in future while working on these functions. For example, if you want to access the text present inside the heading tag, you can do it by accessing the heading tag with JavaScript. You can also work on the style of this text with the help of JavaScript as well. JavaScript uses the concept of nodes. It can access nodes of the document object model. There are many types of nodes present in the DOM. The basic three types are element node, attribute node and text node. The element node consists of all the tags used in HTML document like the head tag and the body tag. The attribute node contains the attributes used in HTML document. By now I hope you have understood the concept of attributes. So, JavaScript can access these attributes as well and the user can work upon them as per requirements. The text here in the HTML document that is simply it can also be accessed with the help of JavaScript. It is the value of that particular element. Variables are named storage that a program can manipulate. As the name suggest, a variable is a value that can change according to conditions. Variables refers to those memory blocks inside the computer where we can store information. Let's suppose you want to store any value inside your computer. So variable will represent the location of that value. In simple terms, variables are cups with stuff inside them and you can use that stuff later again and again according to the way you want to. Before the introduction of ES6 or ECMAScript we can say which is the updated version of JavaScript variables were declared using a single keyword only which is where. We'll try to declare a few variables here. We'll see how where keyword works. So let's comment this thing first. So let's declare a few variables. Let's suppose where a equals to 15, we will declare where b and the value of b will be six. We will declare where c and the value of c would be a + b. So here we have defined three variables a, b and c. a is a variable with value 15 stored inside it and so is b. The value of b is six. But C is a variable that will contain the value of A + B. Let's try to print this on browser document.right. And we will print the value of C. Save it. And here you can see the value of C is 21. That's the correct answer. So similarly, you can also print A and B as well. Let's print A and B as well here. What we'll do? We'll copy this line. We'll paste it for a and we'll update this here as well. So it won't create any confusion. So here you can see the value of C is 21, the value of A is 15 and the value of B is six. It shows the value of all the three variables we declared. But with the introduction of ES6 or ECMAScript in 2015, two more ways were introduced to declare a variable. These are let and const. We shall discuss these two terms in the later part of this session. Let me show you how to declare a variable. There are a few things you have to keep in mind while declaring a variable name. Here we have seen we used three variables A, B and C. That was an easy task to do. But giving a variable any name like something other than a single alphabet. So you have to keep a few things in mind while naming them. Start them with a letter underscore or a dollar sign. You can't use any sign except underscore or dollar. So if you are giving a variable name, you can't use any other sign except the underscore or the dollar sign. You can use these two signs only. You can't use any other sign. You can't use a number in the starting. Apart from that, let's suppose you want to give it a name as 9B. You can't do that in JavaScript. JavaScript won't allow you this. If you try to save it, it will throw you an error. Invalid or unexpected token. So, you can't do this in JavaScript. There is no limit for the length of the variable name. But you can't use reserved keywords in a variable name. Like let's try to create a variable with name as class. Class is a reserved keyword in JavaScript. We will save it and see here it throws an error unexpected token class. But you can use a class with capital C. Let's save it. And here it will work fine. Why it works? Because JavaScript variables are case sensitive. If we try to create a variable with same name. Let's see. We try to create a variable with where girl and another variable will be where girl with capital G. This time JavaScript will treat these two variables differently. These two are different variables for JavaScript as JavaScript is case sensitive when it comes to variables. Let's declare a few more variables. Let's remove it. We'll declare a few more variable. Let's comment this part as well. We'll declare a few more variables. Suppose we declare a variable with keyword where. And we'll name this variable as bike name. Where bike name and press enter. If we leave this variable without assigning it any value, the by default value will be undefined. Let's try to print the value of this variable. Right? We will try to print the value of bike name. Save it. Here you can see the value it shows is undefined. So the by default value of a variable if you do not assign it any value will be undefined. Let's try to give it a value. Let's suppose we try to give bike name. We use equals to operator to assign it a value to assign. Let's suppose we'll assign it Yamaha. Semicolon and press control + S to save this. And here you can see the output as Yamaha. You can also assign a value to the variable during declaration as we have done in the previous examples. Here we have assigned the variables value at the time of declaration only. Let's move on to let and const. So we will discuss let and con. But first we will compare let with where. Let is also used to declare a variable just like where is used. But there is a limitation to use let. Let is not accessible outside the block in which it is declared. So we will use let here only. Let bike name equals and we will change this value as well. We'll change it to hero. Let's say save it. And here you can see the output as hero. But if we try to put this code inside a block. Let's suppose we put this code inside this block. A pair of curly braces. And we will again try to access document dot write. We'll try to access bike name again from here from outside the block. We try to access this. Save it. And here you can see bike name is not defined. It is an error in line 18. So what's happening here? Basically you can't access a let variable outside the scope. You can't access it from here but it will work with where. If we try to replace let with where and save it here you can see it says hero and hero because first it will interpret this method and then it will interpret this as well in case of where. Due to its limited scope let variables are used when there is limited use only like in for loop or in while loop. We will learn these loop in future. Let will not allow you to redeclare any variable. Let's understand this with an example. Here's the code as well. We have declared where bike name and we'll remove this. And first we'll try to do this with where. Let's suppose where bike name equals to TVS control + s. It says hero and TVS. So the variable name the bike name is same in both cases here and here as well. These are same but with where keyword you can do that. Let will not allow you to do this. If we use let here in place of where we'll write let as here as well and we will change the value as well. We will give it as Kawasaki and let's suppose Suzuki here. Save it. See bike name has already been declared. So that's what let won't allow you to do. You can repeat the same let variable in different scope. It won't create any problem but it will not allow you to redeclare any declared variable. So let's move on to const. We use const when there are values we don't want to change or that will never change basically. So the keyword const is little misleading as it defines a constant reference to a value not the constant value. We can't change the primitive value but we can change the properties of constant objects. Let's write another piece of code for const keyword. So let's declare a variable const x is equal to 5 comma y is equal to 7. Let's say const. So here what we have done we declared a variable x and a variable y with value as five and seven. can be declared this time with con keyword and a variable zed which is x + y. We printed zed on the browser and it shows the value as 12 which is x + y. 7 + 5 is equal to 12. Now what we will do? Const will let you do this. But if you try to update the value of x, let's suppose we'll try to update the value of x as x = x + 10. We'll print x this time. document.right x. Let's save this. It will throw an error. Assignment to a constant variable in line 24. So here you want to update the value of x. You can't do this with const keyword. You can do this with let and where as well. But you can't do this with const. Also const won't allow you to redeclare any variable just like let. So if you try to use const x again is equal to 10 save it. So here it says identifier x has already been declared. This thing you can do with const. The scope of const is the same as let it can be used within the block where it is declared. Data types is an essential concept in every programming language. To work on any variable you should know its type. It refers to the kind of data which is being stored inside a variable. The type of variable is holding. Basically, every programming language has its own set of data types which is unique in its own way. We discussed earlier that JavaScript is a lightweight scripting language because we don't need to specify any data type in JavaScript. After all, all the variables in JavaScript are loosely packed or we can say JavaScript is a dynamically typed scripting language. We shall discuss these properties later in this video. For now, let me tell you about different data types present in JavaScript. So, JavaScript data types are divided into two categories. Primitive data types and non-primitive data types. Primitive data types are stored in stack whereas non-primitive data types they are stored in heap. I don't want you to go deep in these two terms as if you are new to programming. So we'll leave it. Just keep one thing in mind that primitive data types are base data types. Whereas non-primitive data types are objects or we can say they are derived. Primitive data types they are further divided into five categories. They are divided as numbers, strings, boolean, undefined and null. Non-primitive data types or complex data types we can say on the other hand they are divided into two parts arrays and objects. We'll have separate videos on these topics. For now let's discuss primitive data types to understand primitive data types much better. Let's declare a few variable here. Let's say we declare where x and give it the value as 16. We'll declare where y and we'll give it value hello world. We'll declare one more. Let's say where flag and the value will be true. Here we can talk about those properties of JavaScript which I mentioned earlier. JavaScript variables are loosely packed and JavaScript is a dynamically typed scripting language. These two points refer to the same thing. Here you can see we have defined three variables X. We have defined variable X. We have defined variable Y and flag as well. The values for all three variables is different from one another. See variable X is holding a value that is 16. Variable Y is holding a value hello world which is a string. So 16 is a number. Hello world is a string. And variable flag is holding a value that refers to a boolean value. In place of true we can also write false here. So what's happening here? Here you can see there is no data type. If you are coming from a C++ background or a Java background, this will be a little bit weird for you guys because in C++ and Java, we used to do it like we'll define an integer. Let let me show you. So how we will define integer in C++ or Java. What we'll say? We'll use int x= to 5 or something like that. We already had a data type for string as well. We have car in C++ but here in JavaScript we have no data type. We are only using the where keyword that's what we call as loosely typed. This line means that you don't have to define the data type of the variable. What happens in JavaScript is whatever the type of value you will pass to the variable the data type will change accordingly. So you don't need to worry about if you are passing a number or if you are passing in string just relax just when you pass the value to the variable it will be determined automatically. So these are the three basic primitive data types present in JavaScript which are number, boolean value and string. So let's move on to the next one which is undefined. We'll define a variable P and we'll leave it as it is. So this variable P has an undefined data type. It means that any variable which is already declared but has no value inside it. It has an undefined data type. I'll tell you a basic operator. The type of operator. We'll go through the operators in later videos but just try to understand the basic need and use it with me. For now this operator will help you know the type of value a variable is holding. See let's use it. Here we have declared a variable P. We will check the type of P. So to use this operator you have to use it with document.right. Now so we'll do document.right and we'll use two brackets and inside it we will write type of and whatever like you want to know the type of variable X. Let's suppose we'll write here X semicolon. Save it. And you can see here it says number. This means that this variable has a value which is a number. Similarly, we will check for all the variables present here. We'll check for every variable. We'll check for Y. We'll check for flag. And we'll check for P as well. Let's copy this and paste it three time. And let's change the value here from X to Y in this line. And from X to flag here. And here we'll change it to P. So we have done it. We'll save it and see. Here it says number first. Variable Y it says it's a string because you know hello world is a string. It's a sequence of character. For variable flag it says boolean. So it's defined as true or false. And for variable P it's written here undefined. With this we are left with only one primitive data type the null data type. There's a difference between a null value and an undefined value. Undefined means lack of value. Whereas null means the absence of any value. Suppose you are using null as the value for any variable. The type of operator will return this variable as an object. But if you're not giving any value to this variable, you are leaving it after declaration. The type of operator will return undefined. Here's an example for this. See, we'll declare one more variable here. We'll declare where num. Let's name this variable num. And we will give it the value as null. We'll use document.right type of and we will check with the help of type of operator that what type of value the variable num is holding. So let's give here num. We are good to go. Press control + s and see. Here it says it's an object. So a null value will always be shown as an object. We'll talk about the complex types or composite types in further videos. We'll have separate videos for each of these types. Don't worry about it. In this session, we will have a look at the basics of GitHub. Before diving deep into the subject, let's first have a look at a use case. The use case we will consider today is of the world's largest sporting goods retail brand, Decathlon. Decathlon has 1,600 stores spread in 52 countries with around 100,000 employees. The IT team of GitHub consists of 10,000 members that helps decaplon to bring its shoppers journey to their devices. So here we will first see the problems that they faced and then we shall see how did they sort out that problem. In the beginning decathlon worked on the data center with the help of a VPN and using a VPN was a huge challenge in terms of workflow visibility and avoiding redundancies. So the first problem is how to maintain workflow visibility and avoid redundancies. Then since there are so many stores located at so many different places, hiring of developers seemed to be a difficult task as a physical workplace was always needed. So the second problem is how would they hire developers. Now let's see how did Decathlon solved these two problems one after the other. In the first case, the entire decathlon shifted from any other remote repository to GitHub. GitHub turned out to be an amazing open-source community as the code became more visible across the organization and now anybody could contribute to it. Then let's talk about the second case for hiring the developers. As we know, GitHub is an open-source community. So, it helped in collaboration with any developer all over the world. the potential developers could now contribute to benefit the global community. Now the question arises what made this contribution possible? So the major contribution role was played by the version control system. This was just a single case amongst many others. There are many organizations that have benefited from GitHub. Now when we have realized how GitHub has revolutionized the market, let's start learning more and more about GitHub. As we move forth, let's have a look at what is version control system. Version control system are the software tools that helps in recording the changes made to the files by keeping a track of modifications done to the code. There is one repository and each user has their own working copy. The changes are committed to the repository which are possible to be seen by others. The two most important things to make changes visible are you commit and they update. As we discussed, it is a system that keeps a track of different versions of a file and hence a specific version of a file can be called whenever needed. This makes the collaboration amongst developers easy and also provides the members of the team to work on the latest version of the file. Moving forth, let's see what is git. Now when we have learned version control system, the next thing we need to know is what is git? Git is the most commonly used version control system that helps in tracking changes made to the files. Hence, we may have a record of all the changes that have been made to a file and we can also revert back to a specific version. Git simplifies the process of software development with the help of easy source code management. Git is not only helpful and popular among developers but also helps non-technical people to keep a track of all the files they have been working on. Git further helps in the process of collaboration and permits changes made by multiple people to all be merged into a single source. Then git automatically merges the changes. So two people or two different sources can even work on different parts of the same file and later on merge those changes without losing each other's work. This is especially useful when the projects are really big and many people are involved in it. Now when we know what is version control system and basics of git, it is time for us to jump on the topic what is GitHub. GitHub is a service hosted on the web where all the projects are stored. Every project on GitHub has its own repository and its unique URL. Git provides a graphical interface to store the files and helps team members to coordinate on the project from anywhere. GitHub provides several access control and collaboration features like V keys and basic task management tools for every project. Let's now have a look at the features of GitHub. The first feature we will see is easy project management. GitHub helps project managers and developers to coordinate better on the project. The work can be easily tracked and updated which makes sure that the project is on schedule and as entitled. Second feature is increased safety with packages. The packages on GitHub can be published as desired. They can be published privately or within a community or can also be published publicly. The packages can be easily downloaded from the GitHub to use and reuse them. Next feature is the effective team management. Now as all the team members can stay updated with all that's happening on the project. So this helps them in staying organized and well coordinated. The pull request and other modification tools make sure that the team focuses on the code. Moving on, the next feature is improved code writing. With the help of GitHub, the quality of code has significantly increased. Now with the help of GitPull command, one can review, improve and propose new codes. Along with that, suggestions or modifications may be discussed before changing the original code. The next feature is increased code safety. GitHub uses CodeQL which is the industry's leading semantic code analysis engine. This tends to find risks in the code which other tools tend to miss. The last feature we shall see is easy code hosting. As the name suggest the codes and documentations are hosted in one place. We also know that there are thousands of repositories on GitHub. So each repository has their own set of tools to release and host the code. Finally, let's have a look at the competitors of GitHub. There are several competitors in the market. Here we have just put the most common ones. First is Atlacian Bitbucket. Then comes Fug Bugs followed by Surround SCM and GitLab. Then we have buddy and finally followed by Beantock. This session we are going to understand who a fullstack developer is, what are his desired skills, the amount of money he makes on an average per year, and finally I'll help you build a resume for your future endeavors. First, let's understand who a fullstack developer is. Everybody uses social media applications. The main reason we use them is that they provide excellent user experience and interface. These apps work pretty seamlessly. All thanks to fullstack developers. A fullstack developer is associated with creation of a product from its start to finish. He designs the front end and the back end of an application while ensuring its efficiency, reliability, and other crucial features. Now that you have a basic knowledge of what a fullstack developer does, let's look at some of the desirable skills of a fullstack developer. First up for the front end development you should have a good understanding of HTML and CSS. HTML short of hypertext markup language governs the appearance of text and images on the screen. It formats the text as headings, paragraphs or popups. CSS on the other hand is a styling sheet. It helps with beautifying the content on your screen in the form of font size, colors and spacing. Next crucial necessity is JavaScript. It is a powerful clientside programming language mainly used for enhancing user interaction with the application. It offers several libraries and frameworks like React, Angular, Vue and jQuery. You need to be proficient in one or more of these tools. Next up, we have version control. A version control basically records all the changes made to file over time so that you can recall them at any point in time. Most predominantly used are Git and GitHub. Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. On the other hand, GitHub is a repository that provides a user interface for Git. It provides features like for pull and merge. Moving on to backend skills, basic knowledge of node is essential. Node is the hottest JavaScript runtime environment around right now. Used by a ton of applications and libraries. If you're writing applications for the server NodeJS, you need to be familiar with the environment. Next up is Python. Python is used for several reasons when it comes to fullstack developers. The most common one being the fact that it is better readable than other languages like C, C++ or Java. It is easy to learn and does not require a lot of coding. It also comes with many libraries and frameworks and has a thriving community for developers. Django is a highle Python framework that performs actions like authentication, database migration and URL routing among others. Finally, the backend skills would require having good knowledge of DBMS. Some of the commonly used databases are Cassandra, MongoDB, and Oracle database. You should be able to update the databases and retrieve information as and when needed. A fullstack developer needs to possess some basic soft skills as well. First up is creativity. The developer must understand the objectives of the project and should create a product that engages the target audience. Next up, we have strategic planning. Planning is a critical phase in any development life cycle. The developer should possess the aptitude to strategically plan the design, development, and implementation phases. This helps streamline the process. Next up, we have analytical skills. As the name suggests, it's crucial to analyze the information and make decisions so as to maximize efficiency. Now, these are skills that one develops when they're exposed to. But a good sense of understanding is required. Problem solving skills are again crucial to predict any errors and develop a bug-free application. From the business perspective as well, problem solving skills play a significant role in ensuring the smooth conduction of tasks. And finally, we have time management skills. The developer must be able to meet the deadlines while ensuring proper execution of his tasks. Moving on, let's look at the fullstack developer salary. In India, the average salary of a fullstack developer is about 5 lakh 90,000 rupees peranom. In the US, the average salary of a fullstack developer is around $75,000. Now, if you wish to make a career as a fullstack developer or wish to look out for better opportunities, a good rumé is key. First, let's look at a sample ré for a fresh graduate. First up is personal information. Mention your name and contact information. Moving on to summary. Write a few lines about yourself and skills that you are proud of. Make sure you keep the section brief and to the point. Next, go ahead and provide the links to your LinkedIn profile, GitHub repository, and blogs if any. In the next section, mention the projects you have worked on. Write a sentence or two about the objective of your projects. Moving on to internships. Mention the name of the company you have interned for along with your role, responsibilities, and the time duration. Again, ensure that you keep it short and simple. This adds credibility to your profile. You can also go ahead and mention the university you're graduating from and your final graduate score. Lastly, mention your skills. This is an important section since you will be judged based on your skills. You can first mention all the technical skills that you're confident about. Mention some soft skills and extracurricular activities that you participated in. Now let's look at a sample resume for an experienced developer. The personal information remains the same. However, in summary, you can mention your years of experience and your designation in the previous company. Go ahead and provide the links to your LinkedIn profile, GitHub repositories and other links you feel worth mentioning. Moving on to experience. Clearly mention the name of your previous company, your tenure, and the designation. Mention the responsibilities your role came with. Make sure that you don't overexaggerate. Use short, powerful words like developed, designed, managed, and supervised. Mention any awards or recognitions you have received. This adds a lot of credibility to your resume. You can also provide your academic information like the name of your university, the year of graduation and your graduate score. Finally, talking about skills, prioritize them according to the job requirement and mention them. In the non-technical skills section, you can mention a few soft skills that you're proud of. If need be, you can also mention a scenario where they came in handy. If you wish to mention some other hobbies or activities, go ahead and mention them. Having said all this, it is vital to not lie on your resume. Make sure the information you provide is accurate and not misleading. >> So first of all, we will understand how to add programming projects to your resume and then we will go through different types of projects like portfolio project, web scrapping projects, API based projects, games, e-commerce, etc. We'll go through each of these projects and understand why these projects are important. So having web projects on your resume, whether you are new to coding or a seasoned programmer, emphasizes your technical skills and experience to companies while helping you stand out from the crowd. This tutorial will teach you all you need to know about choosing and presenting programming projects on your resume. So let's first understand how to add programming projects to your rum. So the recruiters and hiring managers don't have much time to go through the entire rum. So in order to make them notice the best projects you have worked on, you have to include them in proper place in the rumé. You can include technical projects in your work experience section so that the hiring managers can see them when they examine your resume. Also, if you have the prior employment experience, include your programming projects in the extra experience box. You can mention the description of the projects, the technologies you have used while creating the project and your responsibilities and achievements for the project. You must include the most important technical project you have worked on and can also use the relevant réumé keywords in your programming rum. Listing relevant programming projects allow you to get pass through applicants tracking systems. So use proper rum keywords by carefully reading each job description and adapting your rum achievements and experience to meet the particular qualifications that firms are seeking for. So this was about how to add the programming projects in your resume. Now let's go ahead and have a look at some projects that we can add in the rumé which will increase your chance of selection during the recruitment process. So now let's go ahead and have a look at some projects to add in rum. So first would be portfolio project. So one of the easiest projects to start with is a portfolio project. It enables you to demonstrate your abilities and create a personal website that is as simple as and as complex as you choose. If you create a personal portfolio that you can immediately show on the website, it will be easier to deliver and showcase programming work to recruiters. Including portfolio projects on your resume can be especially valuable if you apply for a creative field such as design, writing, or marketing. In these fields, a portfolio can provide a tangible example of your work. Now, next project to add in your resume is web scrapping. Companies will be impressed if you demonstrate your mastery of web scrapping to scan and capture data from a website. Web scrapping is a practice of obtaining information and content from a website. It is especially prohibited to do this for publicly unavailable domain including web scrapping skills on your resume can be a valuable asset particularly if you are interested in careers in data analysis, data mining or software development. Web scrapping can be a useful tool for collecting and organizing data from a variety of sources. Python web scrapping projects are popular among beginners these days. Our channel already includes a Python web scrapping tutorial. You can check that tutorial. The link will be added in the description box. Next, we have API based project. As a web developer, using search inputs is an important skill to have. So, consider adding an API to your list of programming projects. API or application programming interface which is an intermediate between software that allows two apps to interact with one another. APIs provide an easy way to retrieve and distribute data within and across companies. There are a lot of APIs available on the internet including Twitter's API, Amazon API and various other APIs. Creating an API based project allows you to manipulate data, understand client server architecture and obtain data from HTTP servers. It is necessary to have basic programming knowledge to create this type of project and it will take around 2 to 3 weeks to complete this project. Now before moving forward, let me ask you a quick question. According to you, what was the main reason for Twitter to lay off so many employees? Do let us know in the comment section below. You can take your time. Now coming to the next project that you must have on your list, games. So games are an excellent way to demonstrate your knowledge of basic concepts and algorithms. Including games on your programming rum demonstrate your knowledge of logic, data structures, and algorithms. A game project can showcase various skills such as programming skills, game design skills, graphic design skills, and project management skills. Not only that, using game engine software such as Unity, Visual Studio, or Unreal Engine, you can modify or develop an original game with unique 3D characters and story lines. Overall, a game project can be an excellent addition to your resumeumé because it showcases various technical talents in great demand in the gaming business. It can also be a great opportunity to demonstrate your creativity and passion for a game development. Next project on our list is chatbot. Chat bots are extensively utilized to save time on the recurring conversation on corporate websites, smartphones, applications, and social media pages. A chatbot is a piece of software that mimics human communication or chatter via text or voice interactions. To make one, you can use a popular programming language such as Python, Java or PHP. These are significant commercial projects and the recruiting manager would like to learn more about you. Now coming to the next project which is an e-commerce project. So the majority of the websites and application with which we interact are an e-commerce platforms. An e-commerce websites is one that allows you to buy things online. Some examples of e-commerce website is Flipkart, Amazon, Zumato, Oyo, Big Basket, Growers etc. Including an e-commerce project on your resume can be a perfect way to demonstrate your technical skills and experience working on a complex project. Depending on the specific role and responsibilities, an e-commerce project can showcase a range of skills such as web development skills, UX design skills, project management skills, and business skills also. So, this was all about projects to add in the réumé. If you have any doubts regarding this video, you can put them in the comment section. So, what's your opinion on our list? Feel free to let us know if you missed out on something important. >> Now we are heading towards an HTML interview questions. Now here are a few questions like what is an attribute in HTML. So you can consider the attribute are the properties that can be added into the HTML tag and that changes the way the tag behaves or it is displayed. Okay. So you can see here you have a call button. Okay. So attributes are added right after the name of the HTML tag. So button is an element for me. It's not an attribute. Okay. So what is a mark in an HTML file? So mark is something which keep on rotating. Okay. Say for scrolling down the text page or the text on the web page mark is used. Sometimes you might have seen when you want to display some very important information. Okay. which needs to scroll at the bottom or else the right after specific period of time. You always use marquee. It is one of the very very old element available under the HTML page. So it scrolls the image top, left, right, center automatically everywhere. So you always use marku tags for rotating it. So the next is what is a semantic in HTML? See semantics are HTMLs are nothing but a call another coding style. Okay. So when you talk about a semantics, so they are basically reinforcing the meaning of the contents. Like typically you have seen we are using div and span tag but the div and span tag really don't make sense to us as an HTML reviewer unless I go inside those and get to know about what they're really doing it. So semantics are nothing but these are the standard tags. Are we clear? So you can see like here like bold tag is not useful for the bold statement as well as the italic tag is useful for what? For the italic tag. So instead of we are using strong and em tags. Are we clear now? So this makes more sense to us. Now the next thing is how do you display a table in an HTML web page. So obviously we have got table tag and under the table tag I can or align the complete layout of my web page because of table head, table body, table row, table columns. There are multiple different type of elements which are available. Okay, which are the part of table. It's just to basically align the content in a proper format. What is SVG? Okay. So, SVG is basically known as a kind of a graphic which is written in a typical XML language. The SVGs are the highquality graphics which doesn't tear off when you basically grow and increase or zoom. So, normally what happens GIF image you talk about JPEG images after beyond certain point the pixel get deteriorated. But here in SVG it never happens. So you go to any level when you want to zoom and you're going to get accurate contents at any point of time. Okay. So these vector graphics are really typically 2D based diagrams and give you the X and Y coordinates in a regular systems. Next, how do you separate a section of text in HTML? To separate a sections of text in HTML, we always use what? either BR or else we use block code or else we use what a paragraph tag. So BR means anyways it separate out the text and break the current line. Paragraph is used to again write a paragraph of text and the block quotes is used to define the large quoted sections. Okay, next is how do you create the nested web page in HTML. So obviously we have a different type of options that are available like an iframe. Okay, you mean to say page within a web page. Okay, so we can create a page within a web page with using iframes. This is a very very common questions we used to receive at the time of interview. Okay, the difference between ordered list and unordered list. Uh so ordered list will give you the different ways to display the data in Roman format in numeric digits or else you can talk about like an alphabetical order but the unordered list completely unordered you don't get any options like an ordered list. Okay. So the ordered list start with O and unordered list starts with ul. Okay. So we have already seen the difference between ordered list and unordered list. Now it's time to talk about our another type of type of interview questions which is regards to your CSS. Now in CSS interview the first question they always ask you like how do you add CSS styling in HTML. So we are different ways to include number one we have a call inline CSS where we use the element and within that we try to add the CSS content that is called inline CSS. Second is called external stylesheet okay where you can just use as a secondary or the you know external CSS file and just include it into your existing HTML page. Okay, that is a additional file which you write it in a CSS and you include it in HTML. And third is called which is a internal stylesheet which you write it within your HTML. But the only difference happens when you talk about external it is reusable across multiple web pages. Now the different type of CSS selectors which are available. So we have a different selectors like an universal selector which is available where you use asterk sign and select all the elements and offer the common style. Second we talk about element type selector where you have the specific element name into your mind and you offer that particular type of selector. ID selector is responsible to select the particular element with having the proper ID class selector which starts with a dot class. Okay. and having the class name. We talk about descendant selector. So in descendence selector you basically try to select all the elements which are the part of that. Okay. So you are selecting this container and under that all the child elements of the box. Okay. So we're talking about like in what of your descendant selector we talk about called child combinator. So in this case you are basically trying to select all those which is a child of this container. So you are using this greater than symbol of container.box. box. Okay. So, selecting all those which are having the child name called box available. Then you're talking about a general sibling selectors with this tender sign. And finally, we talk about like an attribute selector where you have a proper attribute available to you. Okay. So, these are known as called a general CSS selectors. Followed by we have a next question like in what is SAS less and stylus. Friends, these are the advanced level of CSS used in the industry. So we talk about like it what is a SAS which we talk about like in a statically awesome style sheet. So we also have a similar type of option like in list and many more. Okay. So it says about the SAS saying that it is a systemactically awesome stylesheet. It is basically taking the complete CSS to the next level. So that is a third party website but once again it is very awesome CSS which can offer you the mathematical functions as well as the reusability. You talk about less. Okay. So we talk about linear stylesheet where you can see all statements which starts with add the rate sign. There in SAS every single variable start with a dollar sign. Then you talk about stylus. It is also a flexible CSS. So it doesn't use at the rate or dollar for any defining variables. We can just directly use this with the name. Okay. And use it at any point of time. So these are the three very popular new or next generation CSS. So explain box sizing property like how you can offer the property for the box sizing. So here so B box sizing property actually defines how to basically define height and the width of the box which are calculated. So you talk about a term name called content box. You talk about padding box and you talk about border box. Typically we use three different type of box. Content padding and border box. In a content box these are the default width and the height which can apply to the elements content which are there under the content box. Okay. Padding box are here you talk about the dimensions which are added to the box elements of the content padding. Third which is available called border box. So here the dimensions added to the content padding and the border. Now what are the difference way to hide the element in a CSS. So we have a different way either we can use display none that means whatever is there inside the DOM it won't be visible to you. Second option is visibility hidden. That is another property through which you can eliminate the visibility. But the thing is like it is not visible to the user but this element is added to the DOM and takes up the space. But in display none it doesn't load in a DOM. So somewhere to when you want to talk about performance display none is anytime better. and second called position absolute. So this can be made to the appear outside the screen. So three different options are available. Next option what does that important CSS mean? So the important keyword actually indicates the the highest precedence and it overrides the cascade properties. Okay. So like as you can see here we have a call paragraph where we have a color called important and there's one id name called thing color called green. So when it talk about P ID equal to what thing so it automatically try to override the highest precedence. Okay. Now what are the CSS sprite? CSS sprites is a technique where you can basically take uh larger image okay download in a single shot and try to cut down into the pieces and utilize the way you always want. Okay. So if you're using this small small images separately. Okay. So to load those images independently you would be making multiple HTTP calls which can be an overhead. So it is good to basically download this uh lengthy image in a single shot clear and utilize them as per your convenience within your application. So it is used to minimize the loading time of your web page by combining multiple smaller picture into the single image. Okay, that's what the CSS sprites are. So which properties used to underline and strike through and the overline text. So we have this option text style text type text decoration text transform. Okay. So the text decoration. So the text decoration is the one which will be helping you to achieve this. Consider this. Back in 1991 there was only one website in existence. Fast forward to today there are over 1.8 billion websites on the internet. Web development has surely come a long way. It's not just about the numbers. It's about how it transformed our lives. From basic HTML pages, we now have dynamic web pages that power businesses, healthcare, and education. Plus, it made knowledge accessible to billions globally. With responsive design, we can browse seamlessly on any device. And when it comes to web development projects, they are the driving force behind innovation and progress. Constantly pushing the boundaries and shaping the world as we know it. They provide the playground for creativity and practicality, making web development not just about the past and the present, but also about the future. So here we are with another video on top 10 web development projects for 2024. Whether you are a beginner, an intermediate level web development enthusiast or an advanced level web developer, we have got you covered here. Hey everyone and you are already watching Simply Learn. Before we start with the top 10 web development projects for 2024, remember to subscribe to our channel because we bring the best videos for you daily. Also, hit the bell icon to never miss any updates from Simply Learn. Do you guys know that the average salary of a fullstack developer in the United States goes around $97,000 perom with additional cash benefit? Moving on to the top 10 web development projects. We have divided this video into three parts. The first part is for beginners. Moving on to the first project for beginners, we have a personal portfolio website for beginners. Creating a personal portfolio website is an excellent starting point. You must become familiar with fundamental web development technologies like HTML, CSS and JavaScript. Learning part to create. You should start by learning HTML, CSS and JavaScript through online tutorials and courses. The first step is to design your portfolio layout using HTML and CSS focusing on responsive design principles. Add interactivity with JavaScript such as creating a navigation menu or interactive sections. Practice by building and refining your portfolio over time. At the end, host your portfolio using GitHub pages for free hosting or Netlify for additional features. Moving on to project number two, we have a basic blog building. A basic blog is a great way to progress from the basics to more practical web development skills. You'll need to expand your toolkit to include Node.js and ExpressJS for the back end. You should start by learning HTML, CSS, and JavaScript basics. Develop the front end of your blog using HTML and CSS. Then set up a server using NodeJS and create restful routes with ExpressJS for your blog posts. Implement features like creating, editing, and deleting blog posts. And consider storing data in a JSON file or a simple database. To make your blog accessible to others, deploy it on platforms like Heroku or a similar hosting service. The next project we have for beginners is a to-do list app. A to-do list app is a simple yet effective project for beginners. It reinforces HTML, CSS, and JavaScript skills while introducing the concept of data persistence. Path to create this project is you should start studying HTML, CSS, and JavaScript fundamentals. Then design a simple to-do list interface with HTML and style it with CSS. Implement basic to-do list functionality with the help of JavaScript and use JavaScript to save and retrieve task data from local storage. This project helps solidify your understanding of user interfaces and basic data management. Moving on to intermediate projects. These projects are for people who possess a decent knowledge of HTML, CSS, and JavaScript and know the basics of back-end technologies. The first project we have in this category is an e-commerce website. Creating an e-commerce website is a challenging yet rewarding intermediate level project. This project introduces technologies like ReactJS, NodeJS, ExpressJS, and of course, MongoDB. Start by building the front end with ReactJS, crafting product pages, and implementing a shopping cart. Develop a restful API using NodeJS and ExpressJS to handle user authentication, and manage product data stored in a MongoDB database. Consider implementing features like user reviews, ratings, and order history to enhance the user experience and then deploy your e-commerce site to a hosting platform like Heroku for public access. And if you want to master the art of MS stack web development, then simply learns professional certificate program in fullstack web development in collaboration with IIT Madras is surely the right option for you. With this program, you'll learn concepts of data structures and algorithms. Gain hands-on experience working on the front end and backend technologies to become a successful software developer. You'll also gain exposure to over 10 plus tools, frameworks, and 20 plus real world projects via an immersive learning approach led by live virtual classes, access to integrated labs, master classes from IIT faculty, and job assist services to enhance your career prospects. For admission to this program, candidates should have a bachelor's degree with an average of 50% or higher marks and candidates with more than one year of experience are preferred. So what are you waiting for? Check out the link mentioned in the description box for more details. Moving on to the next project, we have a weather application. The weather app project combines front-end development skills with API integration. You'll use HTML, CSS, JavaScript, and ReactJS to create a user-friendly weather application. The first step is to begin by designing an intuitive user interface for entering location information and displaying weather data. Utilize ReactJS to fetch and present weather information from a public weather API. For example, open weather map. For an extra challenge, incorporate geoloccation features to automatically detect and display the user's local weather conditions. The next project we have on our list is a social media dashboard. An intermediate level project. The social media dashboard introduces you to ReactJS and state management with Redux. Design a dashboard interface composed of ReactJS components that display social media metrics and analytics. Manage the application state with Redux to ensure a smooth user experience mainly when dealing with real-time data updates. You can also integrate charting libraries or create custom graphs to visualize data trends. This project is ideal for those looking to deepen their knowledge of ReactJS and state management. The last intermediate level web development project we have is an online quiz platform. The online quiz platform is an intermediate level web development project that involves building a dynamic website where users can participate in quizzes on various topics. Design a user-friendly interface for registration. login and quiz taking. Implement user authentication, restful API for quizzes and secure database storage. Allow users to select quizzes by topic and difficulty. Deploy the platform on a hosting service for user engagement. These are the projects you should consider creating and adding to your ré if you are an intermediate level web developer to make your réumé stand out of the crowd. Moving on to advanced level projects. Talking about the advanced level web development projects. For advanced level web development projects, you should master both front- end and backend skills. The first project we have in this category is a realtime chat application. An advanced project. The real-time chat application drives into realtime communication and websocket technology. Design a user-friendly chat interface with ReactJS components and create a websocket server using NodeJS and socket.io bio to enable realtime messaging. Implement user authentication and private messaging feature for a complete chat experience. Hosting this project may require more advanced server deployment techniques. The next project we have in this category is a content management system. Building a content management system or CMS is an ambitious advanced project encompassing various web development technologies. Create a CMS with ReactJS for the admin panel, providing users with the ability to create, edit, and manage content. Develop a restful API using NodeJS and ExpressJS to handle data storage and retrieval, possibly using a MongoDB database. Implement role-based access control to differentiate between administrators and content creators. This project provides hands-on experience with complex application architecture and user management systems. Moving on to the third advanced level web development project and the last project for this video. We have a progressive web application. Convert an existing web app into a progressive web app to improve performance and offline usability. Use HTML, CSS, JavaScript, ReactJS and service workers. Enhance your app to meet PWS standards, ensuring cross device compatibility. Implement service workers for offline caching. Optimized for speed and installability, offering users a reliable experience even offline, this project delves into advanced web development techniques and keeps you updated on modern trends. These web development projects cater to various skill levels from beginners to advanced developers. So, so choose a project that aligns with your current skill level and gradually challenge yourself with more complex tasks. So let's take a minute to hear it out from our learners who have experienced massive success in their careers with simply learn. >> Finishing the course led to personal recognition and opened the door for even more artificial intelligent projects and it came with a significant pay raise might I add. >> Hi I'm Phil. I'm 61 years old and last year I skill was simply a poster program in cyber security. I'm happy to tell you that I was able to clear and pass my CISSP and CCSP certification exams on the first attempt after taking the course. >> We decided to take a course in DevOps from Simply Learn. >> The course proved to be very beneficial for both our careers. >> Yeah, I got a promotion after the course >> and I got hired by a new company. >> At first, I tried to learn from YouTube and then apply for new job but I couldn't crack it. Then one of my friends had suggested I go for a certification course with simple enough. My overall experience with simply done was very good. Within a few days, I got three callbacks. Two were project management machines and one was in data science field. I successfully changed my career from software development to digital marketing and simply learn presented the perfect route. I chose Simply Learn because of its tremendously high waiting to be rated as one of the best education portal online worldwide is surely promising. I switched to a new role as a digital marketing manager. With this, my skill upgrade