Full stack web development refers to the process of building web applications

that encompass both the frontend (client-side) and backend (server-side)

components, along with the underlying infrastructure.

A full stack developer is someone who is proficient in working with both the

frontend and backend technologies, as well as databases and deployment

processes.

Frontend Development:

• HTML (HyperText Markup Language): The standard markup

language for creating web pages and web applications.

• CSS (Cascading Style Sheets): Used to style the HTML elements

and define their appearance on the web page.

• JavaScript: A versatile programming language that enables

interactive and dynamic behavior on web pages. It is essential for

adding interactivity, handling events, and manipulating the DOM

(Document Object Model).

2. Frontend Frameworks and Libraries:

• React.js: A popular JavaScript library for building user interfaces,

developed by Facebook. It allows for the creation of reusable UI

components.
 • Angular: A comprehensive JavaScript framework maintained by

Google for building web, mobile, and desktop applications.

• Vue.js: A progressive JavaScript framework used for building user

interfaces, known for its simplicity and flexibility.

3. Backend Development:

• Server-side Languages: Languages like JavaScript (Node.js),

Python (Django, Flask), Ruby (Ruby on Rails), Java (Spring Boot),

and PHP (Laravel) are commonly used for server-side development.

• Web Servers: Software that handles incoming HTTP requests from

clients (web browsers) and serves responses. Examples include

Apache, Nginx, and Microsoft IIS.

• Databases: Storing and managing data is a crucial aspect of backend

development. Relational databases like MySQL, PostgreSQL, and

SQLite, as well as NoSQL databases like MongoDB and Firebase,

are commonly used.

4. Backend Frameworks and Libraries:

• Express.js: A minimalist web framework for Node.js that simplifies

building web applications and APIs.

 • Django: A high-level Python web framework that encourages rapid

development and clean, pragmatic design.

• Flask: A lightweight Python web framework that provides flexibility

and simplicity for building web applications.

5. Database Management:

• SQL (Structured Query Language): A language used to

communicate with relational databases for querying, updating, and

managing data.

• ORMs (Object-Relational Mappers): Libraries that abstract

database interactions by mapping database tables to objects in code.

Examples include Sequelize for Node.js and SQLAlchemy for

Python.

6. Version Control and Collaboration:

• Git: A distributed version control system used for tracking changes

in code, collaborating with team members, and managing project

history.

• GitHub, GitLab, Bitbucket: Platforms that host Git repositories

and provide additional features like issue tracking, code reviews, and

continuous integration.

7. Deployment and DevOps:

 • Deployment Platforms: Services like Heroku, AWS (Amazon Web

Services), Google Cloud Platform, and Microsoft Azure provide

infrastructure for deploying web applications.

• Containerization: Technologies like Docker and Kubernetes

facilitate the packaging and deployment of applications in isolated

containers, making deployment more consistent and scalable.

• Continuous Integration/Continuous Deployment (CI/CD):

Practices for automating the testing, building, and deployment of

code changes, ensuring a smooth and efficient development

workflow.

Full stack web development requires proficiency in both frontend and backend

technologies, as well as a good understanding of databases, version control,

deployment processes, and best practices for building scalable and maintainable

web applications.

HTML (HyperText Markup Language) is the standard markup language used to

create and structure content on web pages. Here are the basics of HTML:

1. Document Structure: HTML documents are structured using elements

enclosed within tags. The basic structure of an HTML document includes:

html
<!DOCTYPE html> <html> <head> <title>Title of the Document</title>

</head> <body> <!-- Content goes here --> </body> </html>

• <!DOCTYPE html>: Defines the document type and version of

HTML.

• <html>: The root element that encapsulates the entire HTML

document.

• <head>: Contains meta-information about the document, such as the

title, character encoding, and links to external resources.

• <title>: Defines the title of the document, which appears in the

browser's title bar or tab.

• <body>: Contains the main content of the document, including text,

images, links, and other elements.

2. Elements and Tags: HTML elements are represented by tags enclosed in

angle brackets (<>). Each tag typically has an opening tag, content, and a

closing tag. Some elements are self-closing and don't require a closing tag.

Example:

html

<p>This is a paragraph.</p>

<img src="image.jpg" alt="Image Description">

<a href="https://www.example.com">Link Text</a>

• <p>: Defines a paragraph.

• <img>: Inserts an image.

• <a>: Creates a hyperlink.

3. Attributes: HTML tags can have attributes that provide additional

information about the element. Attributes are specified within the opening

tag and typically consist of a name and a value.

Example:

html

<img src="image.jpg" alt="Image Description">

<a href="https://www.example.com" target="_blank">Link Text</a>

• src: Specifies the source (URL) of the image.

• alt: Provides alternative text for the image.

• href: Specifies the URL of the linked resource.

• target="_blank": Opens the linked document in a new browser tab.

4. Common Elements: HTML provides a wide range of elements for

structuring content, including headings, paragraphs, lists, tables, forms,

and more.
 • Headings: <h1> to <h6> for defining headings of varying

importance.

• Paragraphs: <p> for defining paragraphs.

• Lists: <ul>, <ol>, <li> for unordered and ordered lists.

• Tables: <table>, <tr>, <th>, <td> for creating tables.

• Forms: <form>, <input>, <textarea>, <button> for creating

forms.

5. Comments: Comments in HTML are used to add notes or annotations

within the code that are not displayed in the browser.

Example:

html

<!-- This is a comment -->

6. Whitespace and Indentation: HTML is not sensitive to whitespace or

indentation, but using proper indentation improves readability and

maintainability of the code.

7. Semantic HTML: Semantic HTML elements provide meaning to the

content they encapsulate, making it more accessible and understandable for

both humans and machines.

Example:
html

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

HTML Elements:

HTML (HyperText Markup Language) elements are the building blocks used

to create web pages. Each element represents a specific structure or content within

the page.

Heading Elements (<h1> to <h6>): Heading elements are used to define

headings of different levels of importance, with <h1> being the highest and

<h6> the lowest.

Example:

html

<h1>This is a Heading Level 1</h1>

<h2>This is a Heading Level 2</h2>

<!-- ... -->

<h6>This is a Heading Level 6</h6>

1. Paragraph Element (<p>): The <p> element is used to define paragraphs

of text.
Example:

html

<p>This is a paragraph.</p>

2. Link Element (<a>): The <a> element is used to create hyperlinks to other

web pages, files, or locations within the same page.

Example:

Html

<a href="https://www.example.com">Visit Example</a>

3. Image Element (<img>): The <img> element is used to insert images into

the web page.

Example:

html

<img src="image.jpg" alt="Image Description">

4. List Elements (<ul>, <ol>, <li>): HTML provides elements for creating

both unordered lists (<ul>) and ordered lists (<ol>), with list items

represented by the <li> element.

Example:

html
<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

<ol>

<li>First Item</li>

<li>Second Item</li>

<li>Third Item</li>

</ol>

5. Division Element (<div>): The <div> element is a generic container that

can be used to group and style content or layout sections of a web page.

Example:

html

<div> <p>This is a paragraph inside a div.</p> <img src="image.jpg" alt="Image

inside a div"> </div>

6. Span Element (<span>): The <span> element is an inline container used

to apply styles or manipulate specific portions of text.

Example:

html

<p>This is <span style="color: blue;">blue</span> text.</p>

7. Form Elements (<form>, <input>, <textarea>, <button>): HTML

provides elements for creating forms to collect user input.

Example:

html

<form action="/submit" method="post">

<input type="text" name="username" placeholder="Enter your username"><br>

<input type="password" name="password" placeholder="Enter your

password"><br>

<textarea name="message" placeholder="Enter your message"></textarea><br>

<button type="submit">Submit</button>

</form>

These are just a few examples of HTML elements. HTML offers a wide range of

elements for structuring content, creating interactive features, and styling web

pages. Understanding how to use these elements effectively is fundamental to

web development.
HTML Attribute

o HTML attributes are special words which provide additional information

about the elements or attributes are the modifier of the HTML element.

o Each element or tag can have attributes, which defines the behaviour of

that element.

o Attributes should always be applied with start tag.

o The Attribute should always be applied with its name and value pair.

o The Attributes name and values are case sensitive, and it is recommended,

that it should be written in Lowercase only.

o You can add multiple attributes in one HTML element, but need to give

space between two attributes.

An attribute is used to define the characteristics of an HTML element and is

placed inside the element's opening tag. All attributes are made up of two parts: a

name and a value −

• The name is the property you want to set. For example, the paragraph

<p> element in the example carries an attribute whose name is align,

 which you can use to indicate the alignment of paragraph on the

page.

• The value is what you want the value of the property to be set and

always put within quotations. The below example shows three

possible values of align attribute: left, center and right.

Syntax

<element attribute_name="value">content</element>

Example

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1> This is Style attribute</h1>

<p style="height: 50px; color: blue">It will add style property in element<

/p>

<p style="color: red">It will change the color of content</p>

</body>
 </html>

HTML Attributes

• All HTML elements can have attributes

• Attributes provide additional information about elements

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like: name="value"

Some of the Attributes:

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page

the link goes to:

Example

<a href="https://www.yahoo.com">Visit yahoo</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute

specifies the path to the image to be displayed:

Example

<img src="img_viswa.jpg">

There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.

2. Relative URL - Links to an image that is hosted within the website. Here, the

URL does not include the domain name. If the URL begins without a slash, it will

be relative to the current page.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify

the width and height of the image (in pixels):

Example

<img src="img_viswa.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an

image, if the image for some reason cannot be displayed. This can be due to a

slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

<img src="img_viswa.jpg" alt="viswa with a mother face">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size,

and more.

Example
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the

language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>

<html lang="en">

<body>

...

</body>

</html>

Country codes can also be added to the language code in the lang attribute. So,

the first two characters define the language of the HTML page, and the last two

characters define the country.

The following example specifies English as the language and United States as the

country:

<!DOCTYPE html>

<html lang="en-US">

<body>

...
</body>

</html>

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over

the element:

Example

<p title="I'm a tooltip">This is a paragraph.</p>

HTML Formatting

• HTML Formatting is a process of formatting text for better look

and feel.

• HTML provides us ability to format text without using CSS.

• There are many formatting tags in HTML. These tags are used to

make text bold, italicized, or underlined.

• There are almost 14 options available that how text appears in

HTML and XHTML.

In HTML the formatting tags are divided into two categories:

 o Physical tag: These tags are used to provide the visual appearance to the

text.

o Logical tag: These tags are used to add some logical or semantic value

to the text.

Element Description
name

<b> This is a physical tag, which is used to bold the text written
between it.

<strong> This is a logical tag, which tells the browser that the text is
important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in

HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not

supported in HTML5)

<sup> It displays the content slightly above the normal line.

 <sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional
unit.

<small> This tag is used to decrease the font size by one unit from base
font size.

HTML Links

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a

little hand.

Note: A link does not have to be text. A link can be an image or any other

HTML element!
HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which

indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL

address.

<a href="https://www.mits.ac.in/">Visit mits.ac.in!</a>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple

• An active link is underlined and red

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or

more list elements. There are three different types of HTML lists:

• Ordered List or Numbered List (ol)

 • Unordered List or Bulleted List (ul)

• Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default.

It is known as numbered list also. The ordered list starts with <ol> tag and the list

items start with <li> tag.

<ol>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ol>

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also

known as bulleted list also. The Unordered list starts with <ul> tag and list items

start with the <li> tag.

<ul>

<li>Aries</li>
 <li>Bingo</li>

<li>Leo</li>

<li>Oracle</li> </ul>

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and

XHTML. It is also known as definition list where entries are listed like a

dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary,

list of terms or other name-value list.

The HTML definition list contains following three tags:

• <dl> tag defines the start of the list.

• <dt> tag defines a term.

• <dd> tag defines the term definition (description).

<dl>

<dt>Aries</dt>

<dd>-One of the 12 horoscope sign.</dd>

<dt>Bingo</dt>

<dd>-One of my evening snacks</dd>

 <dt>Leo</dt>

<dd>-It is also an one of the 12 horoscope sign.</dd>

<dt>Oracle</dt>

<dd>-It is a multinational technology corporation.</dd>

</dl>

HTML Table:

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>

<tr>

<th>Company</th>

<th>Contact</th>
 <th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.
 <table>

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

</table>

A table cell can contain all sorts of HTML elements: text, images, lists, links,

other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

<table>

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>
 <tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

You can have as many rows as you like in a table; just make sure that the number

of cells is the same in each row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the

<th> tag instead of the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>

<tr>

<th>Person 1</th>

<th>Person 2</th>
 <th>Person 3</th>

</tr>

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

HTML Table tags:

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

 <td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for

formatting

<col> Specifies column properties for each column within a

<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Table Borders:

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:

table, th, td {

border: 1px solid black; }

HTML Table Padding & Spacing:

HTML tables can adjust the padding inside the cells, and also the space between

the cells.

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th,

td {

padding: 15px;

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-

right properties:

Example

th,
td {

padding-top: 10px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 40px;

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-

spacing property on the table element:

Example

table

border-spacing: 30px;

HTML Frames:
 HTML frames are used to divide your browser window into multiple

sections where each section can load a separate HTML document.

A collection of frames in the browser window is known as a frameset.

The window is divided into frames in a similar way the tables are

organized: into rows and columns.

Syntax:

< frame src = "URL" >

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use

frames in your webpages −

• Some smaller devices cannot cope with frames often because their screen

is not big enough to be divided up.

• Sometimes your page will be displayed differently on different computers

due to different screen resolution.

• The browser's back button might not work as the user hopes.

• There are still few browsers that do not support frame technology.
The <frame> tag is no longer recommended as it is not supported by HTML5.

Instead of using this tag, we can use the <iframe> or <div> with CSS to achieve

the similar effects.

Creating Frames:

• To use frames on a page we use <frameset> tag instead of <body> tag.

• The <frameset> tag defines how to divide the window into frames.

• The rows attribute of <frameset> tag defines horizontal frames

and cols attribute defines vertical frames.

• Each frame is indicated by <frame> tag and it defines which HTML

document shall open into the frame.

Example

Following is the example to create three horizontal frames −

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames</title>

</head>

<frameset rows="10%,80%,10%">

<frame name="top" src="/html/top_frame.htm" />

 <frame name="main" src="/html/main_frame.htm" />

<frame name="bottom" src="/html/bottom_frame.htm" />

<noframes>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

This will produce following result –

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

1 cols

specifies how many columns are contained in the frameset and the size of

each column. You can specify the width of each column in one of four

ways −

• Absolute values in pixels. For example to create three vertical

frames, use cols="100, 500,100".

• A percentage of the browser window. For example to create three

vertical frames, use cols="10%, 80%,10%".

• Using a wildcard symbol. For example to create three vertical

frames, use cols="10%, *,10%". In this case wildcard takes

remainder of the window.

• As relative widths of the browser window. For example to create

three vertical frames, use cols="3*,2*,1*". This is an alternative to

percentages. You can use relative widths of the browser window.

Here the window is divided into sixths: the first column takes up

half of the window, the second takes one third, and the third takes

one sixth.

2 rows
 This attribute works just like the cols attribute and takes the same values,

but it is used to specify the rows in the frameset. For example to create

two horizontal frames, use rows="10%, 90%". You can specify the height

of each row in the same way as explained above for columns.

3 border

This attribute specifies the width of the border of each frame in pixels.

For example border="5". A value of zero means no border.

4 frameborder

This attribute specifies whether a three-dimensional border should be

displayed between frames. This attrubute takes value either 1 (yes) or 0

(no). For example frameborder="0" specifies no border.

5 framespacing

This attribute specifies the amount of space between frames in a frameset.

This can take any integer value. For example framespacing="10" means

there should be 10 pixels spacing between each frames.

HTML Blocks:

1. HTML blocks plays a very crucial role in creating a logical and

semantic layout of a web page.

 2. They help to organize the content into meaningful sections and make it

easier for browsers, search engines, and site visitors to understand the

structure and meaning of different parts of the web page.

3. In HTML, the blocks are enclosed by various elements, such as <div>,

<p>, <table> and so on.

4. All the HTML elements can be categorized into two categories

namely Block Level Elements and Inline Elements.

Block Elements

Block level elements appear on the screen as if they have a line break before

and after them. A few block elements are listed below −

• Paragraph tag

• Heading tag

• List tags

• Blockquote tag

• Horizontal Rule tag

They all start a new line on their own, and anything that follows them appears on

the next line.

Example

In this example, we are going to use some of the block level elements.

<!DOCTYPE html>

<html>

<head>

<title>HTML Iframes</title>

</head>

<body>

<h3>Block Level Elements in HTML</h3>

<p>This line will appear in the next line after Heading. </p>

<hr />

<p>This line will appear after Horizontal Line. </p>

</body>

</html>

Inline Elements

Inline elements, on the other hand, can appear within the same line and

do not start a new line on their own.

Some common inline elements are as follows:

 <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>,

<ins>, <del>, <code>, <cite>, <dfn>, and <var>.

For example;

<!DOCTYPE html>

<html>

<head>

<title>HTML Iframes</title>

</head>

<body>

<h3>Inline Elements in HTML</h3>

<!-- Using <b> tag -->

<p><b> This paragraph is bold. </b></p>

<!-- Using <i> tag -->

<p><i>This is an italic paragraph. </i></p>

</body>

</html>

HTML Layouts
 • HTML layouts provide a way to arrange web pages in well-mannered,

well-structured, and in responsive form or we can say that HTML layout

specifies a way in which the web pages can be arranged.

• Web-page layout works with arrangement of visual elements of an HTML

document.

• Web page layout is the most important part to keep in mind while creating

a website so that our website can appear professional with the great look.

• You can also use CSS and JAVASCRIPT based frameworks for creating

layouts for responsive and dynamic website designing.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:
 • <header> - Defines a header for a document

or a section

• <nav> - Defines a set of navigation links

• <section> - Defines a section in a document

• <article> - Defines an independent, self-

contained content

• <aside> - Defines content aside from the

content (like a sidebar)

• <footer> - Defines a footer for a document or

a section

• <details> - Defines additional details that the

user can open and close on demand

• <summary> - Defines a heading for

the <details> element

Techniques for Creating HTML Layouts

There are several techniques to create multi-column layouts in HTML:

 • CSS Frameworks (like Bootstrap): Speed up layout design with pre-built

components and grid systems.

• CSS Float Property: A classic way to position elements, but be aware of

how it interacts with normal document flow.

• CSS Flexbox: Ideal for dynamic layouts, easily adjusting content across

different screen sizes.

• CSS Grid: Create complex, two-dimensional layouts with ease.

HTML is the foundation of web pages and is used for webpage development by

structuring websites and web apps.