Document Object Model aka DOM is the way we can represent a web page in terms of a JavaScript like Object. This object has many properties and methods which can be manipulated to make runtime changes in a page. Events like click of a button, press of a keyboard button or any animations - there are many use of DOM programming. In fact JS programming + DOM API makes you real front-end developer. As you can use JS to manipulated the DOM (or indirectly the webpage HTML or CSS )

#1. UnderStanding DOM - Theoretically

#2. Getters & Setters - getElementById, ClassName, TagName, querySelector innerHTML, attributes, setAttribute, style properties

#3. Event handler, addEventListener, removeEventListener

#4 createElement, removeChild, appendChild

#5 Menu using DOM & Animations using DOM

#6 BOM and extra properties

#7 Animation using scrollTo

This project deals with creating a beautiful website landing page only using basic HTML and CSS. We will also make the page mobile responsive and add some DOM scripts later on.

#1 Creating The Menu

We start this series with designing a Top Menu navigation bar which has clickable menu items. We are using flex layout throughout this site - also in this menu. Later in series - we will add more features to this menu like – responsiveness and making it stick to top.

#2 Layout Design using Flex

Here we are design initial Hero section of page using simple concepts of flex layout. We will also see how to embed an image and how to make a SVG style pattern in this section.

#3 Card Layout Design  

In this video we will learn about creating a Card styled layout - an image at top and description at bottom. We will again use flex based layouts to accomplish this.

#4 Pricing Table Design

Pricing tables are found on any kind of product sites - where you can select various price plans. Such tables are useful for side by side comparison for customers. We will again use some flex layout with HTML lists to make such pricing tables.

#5 Testimonials Section Design

In this section we will design a simple testimonials section with a simple image of user and their comments about the site.

#6 Subscribe Section Design

#7 Footer Design

Every site has a footer which hold lots of information about site content, policy and contacts information. Footer as name suggests sticks to bottom of site. We are making this footer and adding some SVG patterns also.

#8 Refactoring the CSS

Till now we have developed the site in a very rudimentary manner. In this video we will clean up some code and make you understand how to write better and reusable CSS.

#9 How to use Font Awesome

Font awesome is very popular ICONs library which is used in many site globally. They have all kind of icons for websites, brands, navigations etc.  You can enhance the user experience using these icons. In this video, we will explain how to install it, use it and find the icons you need for your site.

#10 Fixed Header

In this video we will make our menu stick to top of screen , even if we scroll to bottom of page. This helps user to navigate easily through site without going to the top.

#11 Make Image slider using CSS animations

In this interesting video, we will clear an image slide (logo slider) with help of only CSS animations. This is very powerful way to use CSS. Such sliders can be used without Javascript. Javascript sliders can make your site very slow - but these slider don' have any big impact on performance of site.

#12 CSS transform effects

You might have already know the CSS transform property :

• Rotate
• Translate
• Scale

We will use those properties to create interesting effects in our site , which can improve the user experience.

#13 Make site responsive using Media Queries

Creating a website only for desktop browser is not a good strategy these days, as most of users are accessing the website on mobile browsers. However, your design might not work best on mobile as it is. In this video we will use CSS media queries to make your site responsive.

This is complete full-stack developer course for free and provided in Hindi Language.

We are using MERN stack to learn the complete stack. Course includes - HTML/CSS, JS,Bootstrap, React, Nodejs/Express and MongoDB. However you can learn fundamentals of MEAN stack (Angular) or MEVN Stack (Vue) with help of this course - which has a lot of things common to this course. This complete course is divided in several small courses and projects. Here is the complete list of courses, which are part of this package :

1. HTML Fundamentals Course in Hindi [ 11 Videos ]
2. CSS Fundamentals Course in Hindi [ 23 Videos ]
3. BootStrap Framework Course in Hindi [ 10 Videos ]
4. JavaScript Fundamentals Course in Hindi [ 46 Videos ]
5. ES6 Fundamentals Course in Hindi [ 6 Videos ]
6. ReactJS Fundamentals Course in Hindi [ 13 Videos ]
7. NodeJS/ Express Fundamentals Course in Hindi [ 11 Videos ]
8. MongoDB/Mongoose Fundamental Course  in Hindi [ 1 Video]
9. Complete Web layout Design in HTML/CSS - Landing Page Designing [ 13 videos ]
10. DOM Programming [ 7 Videos ]
11. Complete E-Commerce Design in BootStrap [ 10 Videos]
12. React  Project with Redux / Firebase [ 10 Videos ]
13. React Mini Projects [ 4+ projects ]
14. Complete MERN Stack Projects [ Upcoming ]

In Addition to these we have multiple practise assignment and project available on our site in Projects Section.

More to be updated soon.

ES6 (or ECMAScript 6) is new standard of JS . This course covers - let, const, arrow functions, destructuring, rest params, higher order functions. We also have included some later versions also like ES7. This course is recommended after our JS course.

#1  LET and CONST

VAR has lots of issues in javascript related to scope of variable. It lead to lot of programming mistakes in past, as common as duplicate variable declaration and overwriting of values un-intentionally. However new keywords LET and CONST help us a lot to avoid such programming disaster.

#2  Arrow Functions

Arrow functions are new style of writing functions which are intended to just return a value. Also arrow functions don't create a new function scope. This makes writing these much easier in case of a callback function.

#3  Template Literals  

Template literal or String literals are way to declare variable inside a text. This is much easier than old style of concatenation of strings. You can write a long text and embed as many variables as you like without issues of formatting.

#4  Default Parameters  

Default params are way by which a function can take default value of argument. It is specially useful in making program efficient, where some common value is already passed in like value of  PI, e or some some global constants.

#5  Spread Operators  

Spread operators are a way to spread properties of an object without a loop. By doing this you can make a collection of all properties and use them to initialise new objects. Also it provides easier way to copy without leaving a reference or deep copy.

#6  Rest Parameters  

Rest params are ways to make number of argument as variable. Hence you can pass as many variables as you like in a functions. The arguments will be collected like an array automatically. This help us to make more generalised functions for N number of arguments. Like Sum of N number, Average of N numbers etc.

Next Up : ReactJS Tutorials for Beginners in Hindi

This course covers MongoDB - Setup, Architecture, Command Line queries. Also talks about Mongoose ODM with CRUD functions. (and POSTMAN tool)

MongoDB is a NoSQL database. You might be familiar with SQL databases like MySQL. However knowledge of those is not required to learn MongoDB. We will also learn a ODM (Object Document Mapper) called Mongoose.  Mongoose helps us to code in JS and directly accessing MongoDB without learning MongoDB core queries.

#1  Installing MongoDB

We will check how to install Mongo Community Server  and also how to install mongo client. As MongoDB is a client server based system (just like any other database service) - we will understand MongoDB stores data and its basic architecture.

This course contains NodJS basic environment setup with NPM. It also covers Express JS - REST API, Middle-wares, Request and Response systems.

NodeJS is a JavaScript compile environment. It made possible to execute JS outside the browser. As a reason now many backend side code is written on frameworks based on JS. We will ExpressJS as main framework to learn NodeJS concepts here. As ExpressJS is minimal Framework to learn NodeJS , it is easier to use it without a lot of extra code.

#1 Node JS Setup

We will setup NodeJS environment in this video, this will also include the NPM installation which is a Node Package installer.

#2 Node JS - Server Architecture

Node Server or any server has many concepts which needs to be understood before one starts programming on backends. A Server has many such entities :

• Request Object (HTTP Request from browser)
• Response Object (HTTP Response from browser)
• API calls  (Endpoints/ Server Hooks)
• Middle-wares

#3 Simple Web Server using Express JS

Express is de-facto standard for web server in Node kind of environment. One can easily make a web-server using small programming. In this video, we will create a simple Web Server on your local computer. This server is not very useful but gives any idea of server as a - continuous running program to send responses to browser.

#4 Express JS - Serving Static Files

In websites, there are many things which are Static - Images, CSS, JS files and even HTML files. These files are not manipulated on server side - hence the name static files. Hosting of these files is very easy as they need to be put on a public folder, this folder can be accessed over the net using a browser.

#5 Express JS - Build REST API

For dynamic part if websites, we need to download data from server and prepare the web page accordingly. Server APIs or Endpoints is a popular way to download some server info directly via some server URLs. These URLs are exposed to outside world (hence name Endpoints) - one can query on these URLs/APIs to have the required data from the server. In this video we will see a simple version of such APIs - built on ExpressJS.

#6 Node JS - Configuring environment vars

We can built some environment variables in node environment. Environment variable can make it easy to configure server without changing the code. Also make server more flexible and secure by putting some info of credentials outside the server code and inside Node Memory.

#7 Express JS - get Data using Query String

This video will show example of GET method (GET API)  using query strings. Query string is simplest method to send some data to server, using data embeded in URL. You will often find this style of data exchange in Search engine pages like Google.

#8 Express JS - get Data using Request Params

This video will show example of GET method (GET API)  using request params. Query parameter are another way of embedding data in URL path which can only be used by server. This style is used in various dynamic website which has various products or pages of same design but different data (e.g. facebook profiles).

#9 Express JS - get Data using Request Body

This video shows how to send some data to a Server in POST request, which uses HTTP request body to carry some data. This is most used technique to send form data to server. Also any kind of complex data or file can be embeded in body of request and sent to the server.

#10 NodeJS Middlewares

A Server's basic pathway includes sending data to Endpoints, but before or after that a Server can pass request data through various functions - which are called middle-wares. We can write our own middle-wares, but a lot of them are available freely. Like middleware for session management, cookie parsing, body parsing, authentication, logging requests data.

#11 Nodemon

Nodemon is an external terminal based software which can be used to run a Node based application continuously, and with auto reloading features - which can detect any changes in your code and reload server.

Next Up : MongoDB Tutorials for Beginners in Hindi

This course has fundamentals of React JS - Class and Functional components, Props and States, JSX, lifecycle events, events handling,  Data flows.

React JS is a very simple and small framework designed for frontend web developer. The good thing about this framework is its simplicity and how with a simple knowledge of JS you can make react components. In this series we will understand the very fundamental concepts of React. After this basic course you might need to work on a simple project to understand all concepts in action.

#1 What is React JS ?

In this video, we will briefly have a look at simple react application - to understand what can be created using a React JS based application. This video is just for demonstration purpose and many of the key concepts will be explained in later videos of this course.

#2 React JS - Functional Components

Functional components are easiest way to create components in React. These days more and more developers are using functional components to create any kind of reusable components. We will understand the concept of props also in this video.

#3 React JS - JSX

JSX is an XML-like syntax extension to ECMAScript, or you can say HTML style version of JavaScript. This helps developer to build JS components but having a mind-set of HTML developer. Remember JSX is not HTML but looks like it, hence it has lot of differences from writing a HTML.

#4 React JS - Default Props & PropTypes

Default Props and PropTypes are ways to restrict how props are entered in a component. Default props are used to provide default values in case we are not providing a value. PropTypes restrict data types which can be passed to props.

#5 React JS - Event Methods

Event handing is an HTML concept which is very similar in JSX also. Here in this video we will find how you can bind a function to an event of a HTML element. Using events we can pass useful information to the function.

#6 React JS - Class Components

Class components are more complicated than Functional components, they follow the ES6 class notation. We have to initialise a constructor and other functions just like a class. However class is more organised for a complex component which may house a lot of useful functions and states.

#7 React JS - State

State is a useful Object in ReactJS which store information related to various data states of a component. Without states a component is said to be pure component. A stateless component or functional component is very simple but has no memory of its own. A Stateful component has its own memory and can hold different states of UI.

#8 React JS - Parent to Child data flow

When you have a Component which is inside another React component, we call this relationship Parent-Child relationship. Parent component is the outside component and Child component is the inner one. When we send some data from parent to child - its is mostly sent via Props. This is also called the downward data flow and very useful in most of the cases.

#9 React JS - Child to Parent data flow

When you have a Parent-Child relationship of components, and you want to share data from inner Child component to Parent components - it is called an Upward data  flow. It is less easy and intuitive to make this flow, but sometimes it is required that child components send their data up to the parent which might be managing the state. This kind of interaction is possible by sending functions as downward data and receive their calls in upward direction.

#10 React JS - Event Object and Handling

We have seen how to bind events to React components, In this video we are looking at additional data sent by these events (in form of Event Object). This can be used in various interaction specially handling data in forms.

#11 React JS - LifeCyle Methods

LifeCycle methods are ways to control - how a particular logic can be executed during life of a components (creation, loading in view, unloading from view). This can be helpful to automate lot of initialisation tasks and cleanup tasks.

#12 React JS - Children Props

Children Props are special props which can contain a complete set of JSX/ HTML as part of the props. This can help in components which use their inner HTML part for execution purpose - and make such components more flexible.

#13 React JS - Using Forms and Values

Using forms might be one of most common work of any developer. In this example we will see how to handle and get the data from a simple form in React Js applications.

Next Up :  NodeJS/ExpressJS Tutorials for Beginners in Hindi

This course covers more than 50 topics related to JS - basic programming, data types, loops, objects, JSON, Array and String methods, deep copy etc.

Javascript is the programming language of Web browser, there is no other major language which you can use to program the browser. It is very important to have a good understanding of Javascript language specially if you want to work on front-end (Client side) of web, there are many popular framework which can be used for complex JS projects - like React and Angular. JavaScript is also being used in Back-end (Server side) using environments like NodeJS. Concepts of basic JS remains the same wherever you are using the code.

#1 What is JavaScript, where is it used ?

#2 JavaScript variables

#3 JavaScript Data types

#4 Arithmetic Operations in JS

#5 Logical Operations in JS

#6 String Concatenation

#7 JavaScript Dynamic Type Conversions

#8 Using Escape Characters

#9 Length of String

#10 String Methods - indexOf / charAt

#11 Functions in JavaScript

#12 What is Hoisting in JavaScript ?

#13 JavaScript Arrays

#14 JavaScript Arrays Methods - Push/Pop

#15 JavaScript Arrays Methods - Splice

#16 JavaScript Arrays Methods - Slice

#17 JavaScript Arrays Methods - Join/Concat/Reverse

#18 JavaScript Arrays Methods - 2D Array

#19 JavaScript Objects

#20 JavaScript Object Access - Array Notation

#21 Nested Objects

#22 Objects - delete keyword

#23 What is JSON ?

#24 Javascript Control Statements - If/Else

#25 Javascript Switch Cases

#26 Javascript Truthy/Falsy Values

#27 Strict Equality Operator

#28 JS Conditional Statements (Ternary Operator)

#29 JS typeof method

#30 Type Conversions

#31 Strings - Split Method

#32 String - Change Cases

#33 Immutability of String in JavaScript

#34 Immutability of String in JavaScript

#35 Method chaining in JavaScript

#36 Callback functions in JavaScript

#37 JavaScript Timer methods

#38 JavaScript Math functions

#39 Scope of Variable in JavaScript

#40 For Loop in JavaScript

#41 For OF Loop in JavaScript

#42 While Loop in JavaScript

#43 Object Constructor Methods

#44 Reference Assignment in JavaScript

#45 JavaScript - Shallow Copy

#46 JavaScript - Deep Copy

Next Up : ES6 Tutorials for Beginners in Hindi

This course covers Bootstrap fundamentals - Grid Systems, Responsive designs, naming of classes, spacing systems and various UI components.

Bootstrap is a most popular CSS library globally. Every web designer must have understanding of bootstrap fundamentals as most other libraries also follow the same set of fundamentals. Hence learning bootstrap also makes you familiar with many of fundamentals of web designing.

#1 BootStrap Setup

Checkout this video about installing Bootstrap 4 using various methods like NPM and direct injection of CDN link.

#2 BootStrap - CSS Components

There are lots of in-built CSS components in bootstrap library. Like :

• Buttons
• Navigation Bars
• Alerts
• Fancy Lists

You can learn more components in this video. In built components help designer to create good UI which is also responsive on various platforms.

#3 BootStrap - Forms

Forms are used for user input in any kind of web page. An account signup page / a facebook post creation/ a google search box - anything can be created using a form. Knowing form elements is essential of any web developer. Bootstrap provides many form elements in very nice UI and responsive designs.

#4 How to make Responsive Grid ?

Making website to behave properly on various screen is main challenge of a designer. Apart from it even for a single size how to place elements in a particular distance can be difficult. It can be huge task to make site work on both mobile and web. Bootstrap has a very popular Grid system which can help us to design elements of 1 or more screen sizes.

#5 BootStrap - Flex Layout

Flex is a popular and new way of arrange elements according to a flexible layout. It doesn't work according to px or percentage rules. Arrange element in vertical or horizontal styles can be very easy if you can understand flex layout. Bootstrap flex is based on CSS flex - difference is - you can  apply Bootstrap classed instead of writing own flex css.

#6 BootStrap - Flex & Grid Examples

In a continuation of previous videos we are providing some example of how to apply flex and Grid layout in a website.

#7 BootStrap - Offsets

Offsets are blanks spaces on sides of elements. They can provide a proper spacing between elements.

#8 BootStrap - Spacing : Margin and Padding

Spacing is something based on CSS Box Model, you might have seen that in our CSS videos. You can adjust margins and paddings for spacing. However in Bootstrap there is an easy way to use pre-defined margin and padding for various combination - without writing your own CSS.

#9 BootStrap - Utilities

Bootstrap has some general utilities for designing. Like predefined colors, background colors, sizes, image shapes etc.

#10 BootStrap - Project Example

In this simple project we are applying some Bootstrap Classes to make this page more responsive and better designed.

Launching Soon a Responsive E-commerce Site Design using BootStrap

Next Up :  JavaScript Tutorials for Beginners in Hindi

This course covers  fundamentals of CSS -  adding CSS to HTML, various selectors, specificity, important properties, layout designs, flex, animations and more.

Learning CSS is one of most rewarding experience for a designer. CSS is very simple language to learn. However, there are so many properties a newbie can be overwhelmed initially. You have to understand that you can't learn every properties at a time. One should be focused on most important and most used properties of CSS initially.

#1 What is CSS ?

In this part of tutorial we check how experience of user changes by adding to a simple HTML page. you may not understand all properties of CSS in this part. It is just a demo to show you power of CSS. Don't worry we will learn all these properties in next videos of this series.

#2 Learn CSS Selectors

One of the most important part in CSS is to select right elements to Style. You want to style an image, or a para, or all images or something in page - you need some way to select that part of page. CSS selectors are simply the way to select one or many element at a time - using some kind of pattern matching. Do you recall ID and CLASS from HTML course ? They will be super useful to understand the concepts given in this video.

#3 How to Attach CSS to HTML page

How we can attach an external CSS file to any HTML page ? This question will be answered in this video. The power of external CSS is un-matchable. You can use many standard design libraries available on internet and attach to your HTML page.

#4 CSS : Specificity

How CSS will decide which CSS properties to apply on an image, if you have 2 or more definitions available. Which means all these are matching the ID or CLASS but changing same property of element. Which should be given higher priority and what are the rules ? Check out the video here

#5 Chrome DevTools - How to change CSS

Sometimes you want to adjust things little bit to left or right, or may be top ? How you decide how the element will look like without write and saving and reloading the code again and again. You can use DevTools Elements Tab to change CSS also and see the live changes. Checkout this video to understand this concept.

#6 CSS : Color Codes

What blue is the Facebook Logo ? You need to have various combination of Red/Green/Blue to make a color on web. This is represent using HEX values with RR (red) GG (Green) BB (Blue) values given in #RRGGBB. Check out this video to know more.

#7 CSS : Text Properties

How to change Text is one of the most important skill to learn in CSS. As most of content on web is text and you have many variations - Heading, title, italics and underline.

#8 CSS : Font Properties

Font styles are used to vary style like - comic fonts, formal fonts, stencil like font or different ones. If you see Google logo they have written Google in a particular font which has become the brand. Just by changing this style you can do a lot of magic.

#9 CSS : Width, Height and Overflow

CSS width and height properties help you control the dimensions of elements on HTML page. This becomes very important in many cases where you only have limited space available on your site. These properties can be in fixed pixels(px), percentage(%) or em/rem which are more responsive way. Overflow controls how the content inside a HTML element behaves, if the content is more than the given space. Can it overflow, or hide or a scrollbar appears. Checkout the video to know more.

#10 CSS : Background property

CSS background properties are way to put a colored background OR a picture in background. Backgrounds can be full-width, can be tiled, or may covering the whole area. Also you can specify where the background should align to. All these things you can explore in this video.

#11 CSS : Box Model

Every element in HTML is not just the part which you see on screen (example a text or image), it is also some spacing and border - which are in many case invisible. These spacing and border are very important to understand for a designer to understand - how to design a perfect layout. In this video we explain the CSS Box model which is a very crucial point to understand layout designing.

#12 CSS : Box Shadow

Sometimes we have seen a small shadow below the pictures or Button on a web page. How an object can cast a shadow & how to control size and location shadow ? We will answer these question in this video.

#13 CSS : Border Radius

How a rounded-rectangle is made rounded on corners ? How will you make an image circular ? you can find the answers in this video of CSS border-radius.

#14 CSS : Opacity

If you want to make something transparent or little translucent (an image or a text) - you can use the opacity property of CSS to adjust level of transparency.

#15 CSS : Pseudo-Classes

Pseudo classes are not actual classes. They are temporarily created during a state such as when you are hovering on a button (:hover). Such classes are useful to program the behaviour of CSS according to such state changes. Like when you want to change color of a button on hovering or making a list more interactive

#16 CSS : Transform Properties

One can perform many kind of transformation using only CSS. Like rotation of things, translation of things in linear directions, scaling up or down few things on your page. These things can be combined with some events or states to show some animated effects also.

#17 CSS : Position - Absolute

HTML elements can behave in various manner according to their arrangements. One of popular arrangement is Absolute -  where you can specify absolute position according to the parent container. The element will conform to this arrangement and you can precisely position that element with respect to parent.

#18 CSS : Position - Fixed

In fixed positioning you can make some element Fixed with respect to Parent element/ even body element. This is very commonly used in menu or popup/chat - which remain fixed in viewport even when you are scrolling.

#19 CSS : Position - Relative

In relative positioning you can adjust according to your neigh-boring HTML element and adjust relative to them- in any particular direction.

#20 CSS : Display

Display property is used to change way HTML element will appear in page. It can become Block element - which occupies full length, or Inline (occupy space as big as element) or may be None - which makes the element disappear.

#21 CSS : Flex-box

One of the most popular display property is Flex. As flex is relatively new in CSS world - it is not understood by most of the developers. However it is much fun to learn and once you can apply it. You can arrange various element in horizontal/vertical direction according to your will. It is, as name suggests, very flexible way to arrange multiple elements in your web page.

#22 CSS : Advanced Selectors

We have seen till now simple selector but if you want to specify relation like - direct parent, sibling , next element only. These kind of selections you can make using some advanced CSS selectors.

#23 CSS : Pseudo Elements (::after / ::before)

Pseudo elements are dummy elements which can be put directly before or after an HTML elements. These are mostly useful to insert some design in each element of a collection like a List (sometime dynamically after list creation)

#24 CSS : z-index

z-index is an element which is useful to arrange one element on top or other/or below other. With z-index you can make the 3D experience in 2D browser world and arrange things in z-axis.

Video releasing Soon.

More Videos To Be Released......

Next Up :  BootStrap 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