HTML Tutorials for beginners in Hindi

This course has fundamentals  of HTML 5, we will cover  web page structure,  VS Code development environment,  important  Tags, Attributes in HTML. This course is a small course for beginners of web design or web development. This course avoids any unnecessary tags which are not used in everyday work of developer.

#1 Setting up the Environment 🚀

We begin this course by setting up our environment first. We will need a few things to start :

1. VSCode IDE : This code editor developed by Microsoft is completely free and ideal for anyone for development. It is very lightweight and simple - but can be extended to full power using a set of extensions.
2. NodeJS environment : In modern web development world JavaScript is the key language and we need an environment which can compile JS. Node is such an environment. More importantly with this installation we get a package-manager NPM. This NPM or Node Package Manger will help you install any-kind of web development library which is based on JS.
3. Chrome Browser : We need a standard browser to start web development. Chrome is the most used browser and more importantly it is developed by Google. As Google rules the world of internet, its browser is most suitable for any kind of development for masses. Firefox is also an alternative, if you want a completely open-source version.

#2 HTML Basic Page Structure

In this part we learn how to make a basic HTML page. What are the key elements of HTML page and how they are placed in code. We will check many of key HTML Tags, attributes here :

1. Head and Body
2. Anchor Tags
3. Headings
4. Images

#3 Chrome DevTools - Elements Tab

Chrome Developer Tools or DevTools are a set of tools provided in chrome browser which can help you do a lot of things like :

1. Checking a what inside a sites code (HTML / CSS)
2. What data site is sending or receiving (Network)
3. Code debugging (JS)
4. Checking performance of your page in terms of CPU
5. Checking SEO

As a developer you will need to learn all these tools to be efficient and detect problems in your code. We will discuss very first Tab of this toolset which is Elements Tab. As the name suggests - it deals with elements in your HTML page. You can easily check why an element is not properly aligned, why it is so big or have a lot of white space etc. We will later learn more tools in other courses.

#4 HTML Lists

HTML list are very important elements to be learned for a web developer. As a list can be used to show many type of  items like :

1. Menus
2. Shopping Cart items
3. Chat messages
4. Friend Lists
5. Posts or Comments

List can be used wherever you consider a group of things. Like Facebook feed can be a list of post item (but it is more complex - so we may use DIV instead.) Any non-complex collection can be represented as a list. Your Whatsapp messages can be represented as list. or any mobile menu.

#5 DIV and SPAN

DIVs are most used tags, undoubtedly. As they serve a generally purpose container to group things and also to style them easily using CSS. Spans are similar to DIVs but with some variations.

#6 INLINE and BLOCK elements

Block elements are elements which takes a full width space in page and generally the next element comes only in next line ( If you have coded in other languages consider them as having newline operator \n).  In case of Inline elements, they are quite adjustable and only take the place which is required to show their content.

#7 HTML forms - input boxes

Forms are the way you can interact with websites. Without forms you can't Google or Login to Facebook( or even a create an account). You can't post a message or type a comment. All inputs on web are generally done using FORMs. You may have some exceptions to this these days where you can use some JS techniques.

In this part we will learn about how to make different kind of input boxes in HTML

1. Text-boxes
2. Password boxes
3. Checkbox
4. Radio button
5. Selection dropdown
6. Text Area

#8 HTML forms - using Name and Value

HTML forms as you have learned in previous part are used to capture the data from users. But how you label your data, so you can properly send it to other end (Server). How someone will know that  ABC is your name and XYZ is your School. This differentiation will be done by the name attribute.

#9 HTML forms - GET and POST

Final Destination 😶 of data is Server - where you want to process or store the data. How you send this data differs in many ways. There are 2 most common ways to send form data to Server :

1. Using GET method : this is used in case where there is nothing to Hide and Data is simple. Like google search
2. Using POST method : this is used in case where you hide the data and also if data is complex. Like creating new account on a website

#10 Chrome DevTools  - Network Tab

As you have gained knowledge of how to transfer data from forms to server, you can check how the data is being sent OR what data is being sent. Here we can use the Network Tab of Chrome DevTools to check this. Also Network Tab can be used in various other situations :

1. Exploring how much data is being transferred (Size of Site in Bytes)
2. How many requests to Server are made.
3. Is there a connectivity issue with Server or some other libraries ?

#11  Difference between ID and CLASS attributes

As we come to end of basic HTML lessons, we will now move into CSS world. And CSS world requires you to pick elements of HTML. To pick an element there are 2 ways :

1. Pick a specific element : Using ID (which is unique to only 1 element)
2. Pick a group of elements : Using Class (which can be reused on many elements)

Next Up :  CSS Tutorials for Beginners in Hindi