SBSB5212 FULL STACK DEVELOPMENT

UNIT 1 INTRODUCTION TO WEB DEVELOPMENT 9 Hrs.

Introduction to web development – HTML – structure and semantics – elements, attributes,

and forms – Styling with CSS – selectors, properties, layout – Introduction to JavaScript –
variables, data types, operators, control structures, functions – Form validation

Introduction to web development

Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It
is the creation of an application that works over the internet i.e. websites. Web development
is typically broken down into 3 core areas: Frontend, Backend, Full Stack Development.

Frontend Development
The Face of the Web. The part of a website where the user interacts directly is termed as front
end. This involves designing the structure, layout, and behavior of the website It is also
referred to as the ‘client side’ of the application.
Frontend Technologies
 • HTML: HTML stands for HyperText Markup Language. It is used to design the front
end portion of web pages using markup language. It acts as a skeleton for a website
since it is used to make the structure of a website.

• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style
our website.

• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to

our website.

• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers
(IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and
Phones).

Frontend Frameworks/Libraries
• React.js : A popular JavaScript library for building dynamic, component-based user
interfaces.

• Angular : A full-fledged framework for building single-page applications (SPAs), with

features like two-way data binding and dependency injection.

• Vue.js : A progressive JavaScript framework that is flexible and can be used for
building both simple and complex user interfaces.

Backend Development

The Backbone of the Web. Backend is the server side of a website. It is part of the website
that users cannot see and interact with. It is the portion of software that does not come in
direct contact with the users. It is used to store and arrange data.
Server-side Programming Languages and Frameworks

• PHP: PHP is a server-side scripting language designed specifically for web

development.

• Java: Java is one of the most popular and widely used programming languages. It is
highly scalable.

• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.

• Node.js: Node.js is an open source and cross-platform runtime environment for

executing JavaScript code outside a browser.

• Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose programming

language.
• C# : C# is a high-level, general-purpose programming language developed by
Microsoft.

Backend Languages Backend Frameworks

PHP Laravel, Wordpress

Backend Languages Backend Frameworks

Java Spring, Hibernate

Python Django, Flask, Python PIP

Node.js Express

Ruby Ruby on Rails

C# .NET

Databases

• MySQL
• PostgreSQL

• MongoDB

• MariaDB

• SQLite

APIs (Application Programming Interfaces)

• RESTful API's

• GraphQL

Full Stack Development

Full-stack development refers to the practice of developing both the frontend and backend of
a website or web application. Full-stack developers have a deep understanding of both areas
and can build end-to-end solutions.
Full Stack Technologies:

• MERN Stack : MongoDB, Express.js, React, Node.js

• MEAN Stack : MongoDB, Express.js, Angular, Node.js

• JAMstack : JavaScript, APIs, Markup

• Django Stack : Django, MySQL/PostgreSQL, HTML/CSS/JavaScript

• Spring Boot Stack : Spring Boot, MySQL/PostgreSQL, Java

• LAMP Stack : Linux, Apache, MySQL, PHP

• LEMP Stack : Linux, Engine-X, MySQL, PHP

Databases

In web technology, a database is a structured collection of data that is stored electronically

and accessed via a web application. It serves as the backend component where data is stored,
managed, and retrieved. Databases can be relational (like MySQL, PostgreSQL) using
structured tables and SQL for queries, or non-relational (like MongoDB, CouchDB) which
store data in flexible, document-oriented formats. They enable web applications to handle
dynamic content, user data, transactions, and more by providing efficient storage, retrieval,
and manipulation capabilities. Database management systems (DBMS) are used to interact
with the database, ensuring data integrity, security, and performance.

1. Relational Databases

A relational database stores data in tables, similar to a spreadsheet, where each table has rows
and columns. The rows hold individual records, and the columns define the data attributes.
Tables can be linked to each other through special keys, allowing related data to be
connected.

• Postgre SQL : PostgreSQL is a powerful, open-source relational database that

supports advanced SQL features and complex queries. It handles structured data,
ensures ACID compliance, and is known for its reliability and extensibility.

• MariaDB : MariaDB is an open-source relational database that evolved from MySQL,

offering improved performance, security, and features. It supports SQL queries, ACID
compliance, and is highly compatible with MySQL.

• MySQL : MySQL is an open-source relational database management system that uses

SQL for managing structured data. It’s known for its reliability, ease of use, and
performance, widely used in web applications.

2. NoSQL Databases

A NoSQL database stores data in a flexible, non-tabular format, unlike traditional relational
databases. Instead of using tables with rows and columns, NoSQL databases might use
documents, key-value pairs, wide-columns, or graphs to store data. This allows them to
handle large amounts of unstructured or semi-structured data efficiently. They are designed to
scale easily and manage big data applications.

• Mongodb : MongoDB is a NoSQL database storing data in JSON-like documents. It

handles unstructured data, supports powerful queries, and scales easily across servers,
making it popular for flexible, scalable applications.

• Cassandra : Apache Cassandra is an open-source NoSQL database that is used for

handling big data. It has the capability to handle structure, semi-structured, and
unstructured data.
• Redis : Redis is an in-memory NoSQL database known for its speed. It supports
various data structures like strings, hashes, and lists, making it ideal for caching, real-
time analytics, and messaging.

Top skills typically associated with full-stack developers:

Front-End Development:
• Proficiency in HTML, CSS, and JavaScript.

• Experience with front-end frameworks and libraries such as React, Angular, or Vue.js.

• Ability to create responsive and visually appealing user interfaces.

Back-End Development:

• Competence in server-side scripting languages such as JavaScript (Node.js), Python

(Django, Flask), Ruby (Ruby on Rails), PHP, or Java.
 • Knowledge of server-side frameworks and tools.

• Understanding of databases and data storage technologies (e.g., MySQL, PostgreSQL,

MongoDB).

Database Management:

• Ability to design and interact with databases efficiently.

• Skill in writing queries and ensuring proper data storage and retrieval.

Server Environment:
• Knowledge of server setup, configuration, and management.

• Familiarity with web servers like Apache or Nginx.

Version Control/Git:

• Proficiency in using version control systems, particularly Git, for code management
and collaboration.

APIs (Application Programming Interfaces):

• Experience working with APIs to facilitate communication between the front end and
back end or integrating third-party services.

Web Development Tools:

• Familiarity with development tools for testing, debugging, and performance

optimization.

Deployment and Hosting:

• Ability to deploy applications to servers or cloud platforms and manage the hosting
environment.

Full-stack developers are valued for their versatility and the ability to contribute to different
stages of the development process. They play a crucial role in small to medium-sized
development teams and startups where having individuals with a broad skill set can be
particularly advantageous. However, it's important to note that as technology evolves, the
definition of a "full-stack" developer may change, and the specific technologies and skills
required may vary based on the industry and project requirements.

What are the benefits of the full stack?

The concept of full-stack development comes with several benefits, making it an appealing
approach for both developers and organizations involved in software development.
Here are some key advantages of the full-stack approach:
Versatility:

• Full-stack developers can work on both the front-end and back-end of a project,
providing a versatile skill set. This versatility allows them to contribute to various
aspects of the development process.

End-to-End Understanding:

• Full-stack developers have a holistic understanding of the entire web development

process, from designing user interfaces to implementing server-side logic and
managing databases. This comprehensive knowledge can lead to more effective
problem-solving and decision-making.
Efficiency in Small Teams:

• In smaller development teams or startup environments with limited resources, having

individuals who can handle multiple aspects of development is highly beneficial. Full-
stack developers can take on a variety of tasks, reducing the need for specialized
roles.

Effective Communication:

• Full-stack developers can communicate more effectively between front-end and back-
end teams, as they have experience working on both sides. This can lead to better
collaboration and a smoother development process.

Faster Development:

• With the ability to work on both front-end and back-end tasks, full-stack developers
can streamline the development process. This can lead to faster iteration cycles and
quicker delivery of features.
Adaptability to Technology Changes:

• Full-stack developers are often more adaptable to changes in technology. As the

technology landscape evolves, having a broad skill set allows developers to easily
transition to new tools and frameworks.

Reduced Dependencies:

• Organizations with full-stack developers may have fewer dependencies on external

teams or specialists for specific tasks. This can result in more autonomy and faster
decision-making.

Broader Career Opportunities:

 • Full-stack developers can pursue a variety of roles within the software development
field. They have the flexibility to work on different types of projects and can adapt to
evolving industry trends.

Cost-Efficiency:

• In certain scenarios, having a smaller team of full-stack developers may be more cost-
effective than maintaining separate front-end and back-end teams. This is especially
true for smaller projects or startups with budget constraints.
Holistic Problem Solving:

• Full-stack developers, due to their end-to-end understanding, can approach problem-

solving more holistically. They can consider the entire application architecture and
make decisions that optimize the overall performance and user experience.

While the full-stack approach offers these advantages, it's important to note that
specialization in specific areas of development is also valuable. The choice between full-stack
and specialized roles depends on project requirements, team structure, and the goals of the
organization.

HTML:

HTML stands for Hyper Text Markup Language. It is the standard language used to create
and structure content on the web.

• HTML is a markup language, not a programming language, meaning it annotates text

to define how it is structured and displayed by web browsers.

• It forms the building blocks of all websites and is complemented by CSS for style and
JavaScript for interactivity.

In a nutshell, HTML is all about organizing and displaying information on a webpage. We

can think of it as the bones or structure of a webpage.

Basic HTML Code Example

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>
 <h1>Welcome to My Webpage</h1>

<p>This is my first paragraph of text!</p>

</body>

</html>

5 common reasons to learn HTML:

1. Build Websites: HTML is the basic building block for creating any website. Learning
HTML can help you pursue a career in web development.

2. Customize Content: Allows you to edit or tweak web pages, emails, or templates to
fit your needs.

3. Understand how the web works: Helps you grasp how the internet works and how
web pages are structured.
4. Employment Opportunities: According to Bureau of Labor Statistics projects that
employment for web developers will grow 16% between 2022-2032, which is much
faster than the average across all occupations.

5. Learn Easily: HTML is beginner-friendly, making it a great first step into the world
of coding and technology

Features of HTML

• It is easy to learn and easy to use.

• It is platform-independent.
• Images, videos, and audio can be added to a web page.

• Hypertext can be added to the text.

• It is a markup language.

HTML Element and HTML Tag

HTML Element and HTML Tags are related but distinct. An HTML element is the complete
structure, including the opening tag, content (if any), and the closing tag (if applicable).

On the other hand, A tag is the actual keyword or name enclosed in angle brackets (< >) that
tells the browser what kind of content to expect.

Example:
HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all
web pages are created.

• <!DOCTYPE html> – This is the document type declaration, not a tag. It declares
that the document is an HTML5 document.
• <html> – This is called the HTML root element. All other elements are contained
within it.
• <head> – The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front end of a webpage. Typical
elements inside the <head> include:

o <title>: Defines the title displayed on the browser tab.

o <meta>: Provides information like the character set or viewport settings.

o <link>: Links external stylesheets or resources.
 o <style>: Embeds internal CSS styles.

o <script>: Embeds JavaScript for functionality.

• <title> – The title is what is displayed on the top of your browser when you visit a
website and contains the title of the webpage that you are viewing.

• <h2> – The <h2> tag is a second-level heading tag.

• <p>– The <p> tag represents a paragraph of text.

• <body> – The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front end.

Note:
▪ Character Setting: Specifies how text characters are encoded and displayed, often
using <meta charset="UTF-8">.
▪ Viewpoint (Viewport): Defines how a page's layout and content adapt to different
screen sizes and resolutions, set with <meta name="viewport

Example Program

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Viewport Example</title>

</head>

<body>

<h1>Responsive Design</h1>
<p>This page adjusts to your device's screen size.</p>
</body>

</html>

History of HTML

HTML (Hyper Text Markup Language) is the standard language used to create web pages. It
has evolved significantly since its inception, incorporating features to meet the needs of
modern web development. Below is a brief history of HTML:
1. Early Development

• 1989: Tim Berners-Lee, a physicist at CERN, proposed the idea of a global hypertext
system, which led to the development of HTML.

• 1991: The first version of HTML was introduced, containing only basic tags like <p>,
<a>, <img>, and <h1>.

2. HTML 2.0 (1995)

• Standardized by the Internet Engineering Task Force (IETF).

• Included features for basic document formatting and structure.

• Supported forms for user input.

3. HTML 3.2 (1997)

• Developed by the World Wide Web Consortium (W3C).

• Introduced elements like <font> for styling text.

• Support for tables and scripting through JavaScript was added.

4. HTML 4.01 (1999)

• Introduced three versions: Strict, Transitional, and Frameset.

• Improved support for multimedia, scripting, and accessibility.

• Widely adopted for dynamic web applications.

5. XHTML 1.0 (2000)

• A stricter and cleaner version of HTML 4.01, following XML syntax rules.

• Encouraged well-formed documents but was less flexible for developers.

6. HTML5 (2014)

• Introduced by the W3C and WHATWG to address modern web needs.

• Focused on multimedia support, semantic elements, and better performance.

• Emphasized responsiveness and cross-platform compatibility.

Latest Version: HTML5.3

While HTML5 remains the base standard, updates are continuously made by WHATWG
(Web Hypertext Application Technology Working Group). HTML is now treated as a "Living
Standard," meaning it evolves continuously without major version numbers.
Key Features of HTML5 (and beyond):
 1. Semantic Elements:

o Tags like <header>, <footer>, <article>, and <section> improve document

structure.

2. Multimedia Support:

o Native support for audio (<audio>) and video (<video>).

o Eliminates the need for plugins like Flash.

3. Canvas and SVG:

o <canvas> element enables 2D graphics and game development.

o Support for scalable vector graphics (SVG).

4. Form Enhancements:

o New input types like email, date, number, etc.

o Built-in form validation attributes.

5. Geolocation API:

o Allows websites to access the user's location.

6. Responsive Design:

o Incorporates the <meta name="viewport"> tag to adapt web pages to different

screen sizes.

7. Web Storage:

o Replaces cookies with localStorage and sessionStorage for storing data on the
client side.

8. Improved Accessibility:

o ARIA (Accessible Rich Internet Applications) roles integrate better support for
screen readers.

Future of HTML

The web community continues to enhance HTML, focusing on features such as:

• Improved performance and reduced page load times.

• Enhanced privacy and security standards.

• Support for advanced technologies like Web Components and Virtual Reality (VR).
5 key uses of HTML are:
 • Creating web page.

• Integrating CSS and JavaScript

• Accessing web content

• Semantic markup
• Cross-platform compatibility

Advantages of HTML

1. Simple and Easy to Learn

o HTML has a straightforward syntax that is easy for beginners to understand

and implement.

2. Free and Open-Source

o HTML does not require any licenses, making it accessible to everyone.

3. Cross-Platform Compatibility

o HTML works on all major platforms and browsers, ensuring wide usability.

4. Lightweight and Fast

o HTML pages are generally lightweight, leading to faster loading times
compared to other technologies.
5. Flexible and Extensible

o HTML can be combined with other languages like CSS and JavaScript to
create dynamic and visually appealing websites.
6. Wide Range of Tools and Resources

o Ample support through documentation, forums, and tutorials makes learning

and troubleshooting HTML easier.

7. Responsive Design Support

o With modern HTML5, developers can easily create responsive and mobile-
friendly websites using the <meta viewport> tag and other features.

8. Built-in Multimedia Support

o HTML5 supports audio, video, and graphics natively through <audio>,

<video>, and <canvas> elements, eliminating the need for third-party plugins.

9. Search Engine Optimization (SEO)

o Proper use of semantic HTML tags improves a website's visibility in search

engines.
 10. Browser Independence

o HTML is supported by all major web browsers, ensuring compatibility.

Disadvantages of HTML
1. Static Nature

o HTML alone is static and cannot create dynamic, interactive web pages
without the help of JavaScript or server-side technologies.
2. Limited Styling Options

o While HTML supports basic formatting, complex designs require CSS for
proper styling.

3. Verbose and Repetitive

o Writing HTML code for large projects can become verbose (expressed in more
words than needed)and repetitive without tools like templating engines.

4. No Logic or Programming Capabilities

o HTML lacks the ability to handle logic or perform calculations; it depends on

other languages like JavaScript for such functionality.

5. Compatibility Issues with Old Browsers

o While modern browsers support HTML5 features, older browsers may not
fully support them, requiring fallbacks or polyfills.

6. Security Risks

o Improper HTML usage, such as failing to escape input, can lead to security
vulnerabilities like Cross-Site Scripting (XSS).

7. Not Suitable for Complex Applications Alone

o HTML cannot handle advanced functionality required by complex web

applications, which require backend programming.

8. Maintenance Challenges

o Without proper structuring and documentation, maintaining large HTML

codebases can become difficult.

9. Dependency on Other Technologies

o To create fully functional websites, HTML must be paired with CSS,

JavaScript, and server-side languages, increasing development complexity.

10. Lack of Error Handling

 o Browsers often ignore HTML errors silently, which can lead to inconsistencies
in rendering.

Differentiate between block-level and inline elements in HTML.

In HTML, block-level and inline elements are ways to structure web pages. Block-level
elements start on new lines and take up the full width of the page. Inline elements do not start
on new lines and only take up the space needed by their content.

1. Block-Level Elements

• Display Behavior: These elements start on a new line and take up the full width
available (by default), stretching to the left and right as far as they can.

• Content: Block-level elements typically contain other block-level elements, inline

elements, or a mix of both.

• Common Examples:

o <div>

o <p>

o <h1> to <h6>
o <ul>, <ol>, <li>

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

• Use Case: Used to structure the layout of a webpage or define distinct sections.

2. Inline Elements

• Display Behavior: These elements do not start on a new line and only take up as
much width as necessary. They flow along with the text or content around them.

• Content: Inline elements typically contain text or other inline elements.

• Common Examples:

o <span>
o <a>

o <img>

o <strong>, <em>, <b>, <i>

o <label>

• Use Case: Used to style or format parts of content within a block of text or to insert
smaller elements.
Key Differences

Feature Block-Level Elements Inline Elements

Line Behavior Start on a new line Stay on the same line

Width Occupy full width by default Occupy only necessary width

Content Can contain block or inline elements Only contain inline elements

Examples <div>, <p>, <h1> <span>, <a>, <img>

Example program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Block vs Inline Elements</title>

<style>

.block-element {

background-color: lightblue;

padding: 10px;

margin: 10px 0;

.inline-element {
background-color: lightcoral;

padding: 5px;

</style>

</head>
<body>

<h1>Block vs Inline Elements</h1>

<!-- Block-level Elements -->

<div class="block-element">I am a block-level element (div). I start on a new line and
occupy the full width.</div>

<p class="block-element">I am another block-level element (p). I also start on a new

line.</p>

<!-- Inline Elements -->

<span class="inline-element">I am an inline element (span).</span>

<span class="inline-element">So am I! Notice we are on the same line.</span>

<a href="#" class="inline-element">I'm an inline link element!</a>

<p>

Inline elements can also be inside block-level elements, like <strong class="inline-
element">this strong tag</strong> within this paragraph.

</p>

</body>
</html>

Output:
_

Semantic tags and examples.

Semantic tags in HTML are elements that clearly describe their meaning to both the browser
and the developer. These tags provide better structure, readability, and accessibility to a
webpage. Here's an overview of commonly used semantic tags with examples:

1.<header>

Represents the introductory content or a container for navigation links.

<header>
<h1>Welcome to My Website</h1>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>
</nav>

</header>

2.<footer>
Represents the footer of a document or section, typically containing copyright info, links, or
contact details.
<footer>

<p>&copy; 2025 MyWebsite. All rights reserved.</p>

<nav>

<a href="#privacy">Privacy Policy</a> | <a href="#terms">Terms of Service</a>

</nav>

</footer>

3.<article>
Represents self-contained content, such as a blog post or news article.

<article>

<h2>Understanding Semantic HTML</h2>

<p>Semantic HTML enhances accessibility and SEO by giving meaning to content.</p>

</article>

4.<section>
Defines a thematic grouping of content, typically with a heading.

<section>

<h2>Features</h2>
<p>Our product offers exceptional performance, scalability, and reliability.</p>

</section>

5.<nav>

Represents a section of navigation links.

<nav>

<ul>
<li><a href="#services">Services</a></li>

<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>

</ul>

</nav>

6<aside>
Represents content related to the main content, such as a sidebar or callout.

<aside>
 <h3>Did You Know?</h3>

<p>Using semantic HTML can improve your site's SEO!</p>

</aside>

7.<main>
Represents the main content of a document, excluding repeated elements like headers or
footers.

8.<main>
<h1>About Our Company</h1>

<p>We specialize in innovative technology solutions.</p>

</main>

9.<figure> and <figcaption>

Represents a figure (like an image) with a caption.

<p>The most important part is <mark>semantic HTML</mark>.</p>

10.<time>
Represents a specific time or date.

<p>Published on <time datetime="2025-01-24">January 24, 2025</time>.</p>

Benefits of Semantic HTML

Accessibility: Easier for screen readers to interpret.

SEO: Helps search engines understand content structure.

Maintainability: Clearer code for developers.

_____________________________________________

Sample Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Semantic HTML Example</title>

<style>

body {
 font-family: Arial, sans-serif;

margin: 0;

padding: 0;

line-height: 1.6;
}

header, footer {

background-color: #333;

color: white;

text-align: center;

padding: 1em 0;

}
nav ul {
list-style: none;

padding: 0;

nav ul li {

display: inline;

margin: 0 10px;

}
nav ul li a {

color: white;

text-decoration: none;

main {

display: flex;

padding: 20px;
}

aside {

width: 25%;
 padding: 10px;

background: #f4f4f4;

margin-right: 20px;

}
article {

width: 75%;

figure {

text-align: center;

margin: 20px 0;

}
footer nav {
margin-top: 10px;

</style>

</head>

<body>

<header>

<h1>Welcome to My Blog</h1>
<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#articles">Articles</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>
</header>

<main>
 <aside>

<h2>About Me</h2>

<p>Hi, I'm a web developer who loves creating semantic and accessible
websites.</p>

<h3>Quick Links</h3>

<ul>

<li><a href="#latest">Latest Articles</a></li>

<li><a href="#popular">Popular Posts</a></li>

</ul>

</aside>

<article>

<section>

<h2>Featured Article</h2>
<p>In this article, we discuss the importance of <mark>semantic HTML</mark> in
modern web development.</p>
<figure>

<img src="example.jpg" alt="Semantic HTML Example" width="300">

<figcaption>Figure: A representation of semantic HTML.</figcaption>

</figure>

<p>Semantic HTML improves accessibility, search engine optimization (SEO), and

code maintainability. It's essential to use tags like <mark>&lt;header&gt;</mark>,
<mark>&lt;footer&gt;</mark>, and <mark>&lt;article&gt;</mark> for better structure.</p>

<p>Published on: <time datetime="2025-01-24">January 24, 2025</time></p>

</section>

</article>

</main>

<footer>
<p>&copy; 2025 My Blog. All rights reserved.</p>
 <nav>

<a href="#privacy">Privacy Policy</a> | <a href="#terms">Terms of Service</a>

</nav>

</footer>
</body>

</html>

Output:

__________________________________________________________________________

The purpose of the <form> tag in HTML.

The <form> tag in HTML is used to create a form for collecting user input. It serves as a
container for various input elements such as text fields, checkboxes, radio buttons, submit
buttons, and more. Forms are primarily used to send data to a server for processing.

Key Attributes of the <form> Tag:

1.action: Specifies the URL to which the form data will be sent.
2.method: Defines the HTTP method to be used when submitting the form (GET or POST).

3.enctype: Specifies how the form data should be encoded when submitting it to the server
(e.g., application/x-www-form-urlencoded or multipart/form-data).
Sample Program:

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

Output

Definition and Usage

The enctype attribute specifies how the form-data should be encoded when submitting it to
the server.

Note: The enctype attribute can be used only if method="post".

___________________________________________________________________________

Syntax of an HTML Attribute

An HTML attribute provides additional information about an element. It is specified inside

the opening tag of an element and consists of a name-value pair.

Syntax:

<element-name attribute-name="attribute-value">Content</element-name>

element-name: The name of the HTML element (e.g., <a>, <img>, <div>).

attribute-name: The name of the attribute (e.g., href, src, alt).

attribute-value: The value assigned to the attribute.

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you should follow while
using attributes with HTML elements:
1.Attributes are optional; you can use them to provide additional information about an HTML
element.
2.Attributes have name and value pairs, but some of the attributes do not require any value;
those are known as Boolean attributes.

3.An HTML element can have multiple attributes, and they should be separated by spaces.
4.Attributes should always be written with the opening tag.

5.All HTML elements can have attributes except a few like <head>, <title>, <script>, etc.

6.W3C recommends using attributes in lowercase and keeping the value in quotes.
Styling with CSS

What is CSS?

CSS stands for Cascading style sheets. It describes to the user how to display HTML
elements on the screen in a proper format. CSS is the language that is used to style HTML
documents. In simple words, cascading style sheets are a language used to simplify the
process of making a webpage.

CSS is used to handle some parts of the webpage. With the help of CSS, we can control the
colour of text and style of fonts, and we can control the spacing between the paragraph and
many more things. CSS is easy to understand but provides strong control on the Html
documents.CSS is combined with HTML.

Advantages of CSS

Here are the following advantages of CSS, such as:

o Faster page speed: It has a faster page speed than other code's page speeds. With the
help of the CSS rule, we can apply it to all occurrences of certain tags in HTML
documents.

o Better user experience: CSS makes a webpage very attractive to the eyes. Also, CSS
makes it user-friendly. When the button or text is in a proper format, it improves the
user experience.
 o Quicker Development time: With the help of CSS, we can specify the format and
style the multiple pages into one code string. In cascading style sheet, we can make a
duplicate copy of several website pages.
If we make a webpage, it has the same formatting, looks, and feel, so with the help of
the CSS rule for one page, and it is sufficient for all the pages.

o Easy Formatting changes: In CSS, if we need to make changes in the format, it is

very easy; we only need to change the one-page format it will automatically apply to
the other pages of CSS.
There is no need to correct individual pages in a CSS style sheet. If we fix a CSS style
sheet, it will automatically update the other CSS style sheet.

o Compatibility: Compatibility is very important in today's age. If we create any

webpage, it should be very responsive and user-friendly. CSS is used with Html to
make webpage design responsive.

Using CSS
CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section

• External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
Output:

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>
Output:

External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

Output:
CSS Selectors
CSS provides various types of selectors to apply styles to HTML elements. Below are the
most commonly used selectors along with examples:

1. Universal Selector (*)

• Applies styles to all elements on a page
*{
margin: 0;
padding: 0;
}
2. Element (Type) Selector
• Targets specific HTML tags.
p{
color: blue;
}
3. Class Selector (.)
• Targets elements with a specific class.
.highlight {
background-color: yellow;
}
<p class="highlight">This is a highlighted paragraph.</p>
4. ID Selector (#)
• Targets a single element with a unique ID.
#main-header {
font-size: 24px;
}
<h1 id="main-header">Welcome to My Website</h1>
5. Group Selector (,)
• Applies the same styles to multiple elements.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
div p {
color: green;
}
<div>
<p>This paragraph inside a div will be green.</p>
</div>
7. Child Selector (>)
• Selects direct child elements.
div > p {
color: red;
}
<div>
<p>This paragraph will be red.</p>
<span>
<p>This paragraph will NOT be red.</p>
</span>
</div>
CSS provides various types of selectors to apply styles to HTML elements. Below are the
most commonly used selectors along with examples:

1. Universal Selector (*)

• Applies styles to all elements on a page.
css
CopyEdit
*{
margin: 0;
padding: 0;
}

2. Element (Type) Selector

• Targets specific HTML tags.
css
CopyEdit
p{
color: blue;
}

3. Class Selector (.)

• Targets elements with a specific class.
css
CopyEdit
.highlight {
background-color: yellow;
}
html
CopyEdit
<p class="highlight">This is a highlighted paragraph.</p>

4. ID Selector (#)
• Targets a single element with a unique ID.
css
CopyEdit
#main-header {
font-size: 24px;
}
html
CopyEdit
<h1 id="main-header">Welcome to My Website</h1>
5. Group Selector (,)
• Applies the same styles to multiple elements.
css
CopyEdit
h1, h2, h3 {
font-family: Arial, sans-serif;
}

6. Descendant Selector (Space )

• Selects elements inside another element.
css
CopyEdit
div p {
color: green;
}
html
CopyEdit
<div>
<p>This paragraph inside a div will be green.</p>
</div>

7. Child Selector (>)

• Selects direct child elements.
css
CopyEdit
div > p {
color: red;
}
<div>
<p>This paragraph will be red.</p>
<span>
<p>This paragraph will NOT be red.</p>
 </span>
</div>
<h1>Heading</h1>
<p>This paragraph will be orange.</p>
<p>This paragraph will not be affected.</p>

8. Adjacent Sibling Selector (+)

• Selects an element that is immediately after another.
h1 + p {
color: orange;
}
<h1>Heading</h1>
<p>This paragraph will be orange.</p>
<p>This paragraph will not be affected.</p>
9. General Sibling Selector (~)
• Selects all siblings after a specified element.
h1 ~ p {
color: purple;
}
<h1>Title</h1>
<p>First paragraph (purple).</p>
<p>Second paragraph (purple).</p>
10. Attribute Selector ([attr])
• Selects elements based on attributes.
input[type="text"] {
border: 1px solid black;
}
<input type="text" placeholder="Text Input">
<input type="password" placeholder="Password Input">
11. Pseudo-Classes
• Target elements in a specific state.
a:hover {
 color: red;
}
<a href="#">Hover over this link</a>
12. Pseudo-Elements
• Select parts of an element.
p::first-letter {
font-size: 24px;
}
<p>First letter will be larger.</p>
Example Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Example</title>
<style>
/* Universal Selector */
*{
font-family: Arial, sans-serif;
}

/* Element Selector */
h1 {
color: blue;
}

/* ID Selector */
#main-content {
background-color: lightgray;
padding: 10px;
}
/* Class Selector */
.highlight {
background-color: yellow;
}

/* Group Selector */
h2, h3 {
color: darkgreen;
}

/* Descendant Selector */
div p {
color: red;
}

/* Child Selector */
div > span {
color: purple;
}

/* Adjacent Sibling Selector */

h2 + p {
font-weight: bold;
}

/* General Sibling Selector */

h2 ~ p {
text-decoration: underline;
}

/* Attribute Selector */
 input[type="text"] {
border: 2px solid black;
}

/* Pseudo-Class Selector */
a:hover {
color: orange;
}

/* Pseudo-Element Selector */
p::first-letter {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This paragraph is bold because of the adjacent sibling selector.</p>
<p>This paragraph is underlined because of the general sibling selector.</p>

<div id="main-content">
<p>This paragraph inside div is red.</p>
<span>This span inside div is purple.</span>
</div>

<p class="highlight">This paragraph is highlighted.</p>

<input type="text" placeholder="Type something...">

<a href="#">Hover over this link</a>
</body>
</html>
Output

CSS Box Model: Definition and Components

The CSS Box Model is a fundamental concept in web design and development. It defines
how the elements on a web page are structured and how space is distributed around
elements. Understanding the Box Model is crucial for controlling layout and spacing in your
web pages.

The Box Model describes the rectangular boxes generated for elements in the document
tree. Each element in HTML is represented as a box, and this box consists of several
components that define its size, padding, borders, and margins.

Components of the CSS Box Model

1. Content:

o This is the actual content of the box, such as text, images, or other HTML
elements.
 o The size of the content area is determined by the width and height
properties.

o Example: If you set width: 200px; and height: 100px;, the content area will be
200px by 100px.

2. Padding:

o Padding is the space between the content and the border. It creates space
inside the box, around the content.

o Padding is transparent and doesn't have any color unless you set the
background color on the box.

o You can define different padding for each side (top, right, bottom, left) using:

padding-top, padding-right, padding-bottom, padding-left

o Example:

padding: 10px;

3. Border:

o The border is a line surrounding the padding (if any). It is placed between the
padding and margin.

o Borders can be styled with width, color, and style (solid, dashed, dotted, etc.).

o Example:

border: 2px solid black;

o You can also control borders individually for each side (top, right, bottom,
left):

border-top, border-right, border-bottom, border-left

4. Margin:

o Margin is the outermost space around the element. It is the space between
the element's border and its neighboring elements.

o Margins are transparent and are used to create distance between elements.

o You can define different margins for each side:

margin-top, margin-right, margin-bottom, margin-left

o Example:

margin: 20px;
Box Model Visualization

To visualize the CSS Box Model, imagine it as a series of nested boxes:

+----------------------------+

| Margin |

| +------------------------+ |

| | Border | |

| | +------------------+ | |

| | | Padding | | |

| | | +------------+ | | |

| | | | Content | | | |

| | | +------------+ | | |

| | +------------------+ | |

| +------------------------+ |

+----------------------------+

1. Content: The inner part where the actual content like text or images are placed.

2. Padding: Space around the content, inside the border.

3. Border: Surrounds the padding (if present) and separates it from the margin.

4. Margin: The outermost space, creating distance between this element and others.

How the Box Model Affects Layout

The total width and height of an element are calculated by adding the content width,
padding, border, and margin.

• Total Width:

Total Width = content width + left padding + right padding + left border + right border + left
margin + right margin

• Total Height:

Total Height = content height + top padding + bottom padding + top border + bottom border
+ top margin + bottom margin
Box Model Example

Here’s an example of how the Box Model is applied to an HTML element with CSS:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Box Model Example</title>

<style>

.box {

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid black;

margin: 30px;

background-color: lightblue;

</style>

</head>

<body>

<div class="box">This is a box model example!</div>

</body>

</html>

In the example above:

• Width is 200px (content area).

• Padding adds 20px on each side (making the content area effectively 240px wide).

• Border adds 5px on each side (making it 250px).

• Margin is 30px around the entire box.

So, the total space taken up by the element will be:

• Total Width: 200px (content) + 20px (left padding) + 20px (right padding) + 5px (left
border) + 5px (right border) + 30px (left margin) + 30px (right margin) = 310px

• Total Height: Similarly, you can calculate the total height.

Box-Sizing Property

The box-sizing property allows you to control how the width and height of an element are
calculated.

• Default: The default box-sizing value is content-box, meaning the width and height
only apply to the content box, and padding/border are added outside of this.

• Alternative: box-sizing: border-box; includes padding and borders inside the width
and height calculation.

Example:

.box {

box-sizing: border-box;

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid black;

With box-sizing: border-box, the total width remains 200px, including the padding and
border.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

 • JavaScript on the client side is directly executed in the user's browser. Almost all
browsers have JavaScript Interpreter and do not need to install any software. There is
also a browser console where you can test your JavaScript code.

• JavaScript is also used on the Server side (on Web Servers) to access databases, file
handling and security features to send responses, to browsers.

Why to learn JavaScript?

1. Versatility: JavaScript can be used to develop (using ElectronJS) websites, games

(Using Phaser and Three.js), mobile apps (using React Native), and more.

2. Client Side: JavaScript is the main language for client-side logic and is supported by
almost all browsers. There is a big list of frameworks and libraries like React
JS, Angular JS, and Vue JS.

3. Server-Side: With runtime environments like Node.js and Frameworks

like Express.js, JavaScript is now widely used for building server-side applications.

4. Machine Learning: With Libraries like Tensorflow.JS, JavaScript can be used to

develop and train machine learning models. Please refer to ML in JS for details.

JavaScript is a versatile, dynamically typed programming language used for interactive web
applications, supporting both client-side and server-side development, and integrating
seamlessly with HTML, CSS, and a rich standard library.
 • JavaScript is a single-threaded language that executes one task at a time.

• It is an Interpreted language which means it executes the code line by line.

• The data type of the variable is decided at run-time in JavaScript that’s why it is
called dynamically typed.

“Hello, World!” Program in Browser Console

A “Hello, World!” program is the simplest way to get started with any programming
language. Here’s how you can write one using JavaScript.

<html>

<head></head>

<body>

<h1>Check the console for the message!</h1>

<scrip t>

// This is our first JavaScript program

console.log("Hello, World!");

</script>

</body>

</html>

In this example

• The<script> tag is used to include JavaScript code inside an HTML document.

• console.log() prints messages to the browser’s developer console. Open the browser
console to see the “Hello, World!” message.

“Hello World” Program in Server Console

• We can also print the “Hello World” program directly into the console terminal
without embedded it into HTML. Create an index.js file and add the code to it.
/*

This is a multi-line comment.

It can span several lines.

*/

console.log("Hello, World!"); // Prints Hello, World! to the console

In this example

• console.log(): The console.log() method is used to print messages to the browser’s

developer console. Open the console (usually with F12 or Ctrl + Shift + J) to see the
message “Hello, World!” displayed.

• Comments in the Code:

o Multi-line Comment: The /* */ syntax is used to write a comment spanning

multiple lines.

o Single-line Comment: The // syntax is used for short, inline comments, like
the one explaining the console.log function.

Key Features of JavaScript

• Client-Side Scripting:JavaScript runs on the user’s browser, so has a faster response

time without needing to communicate with the server.

• Versatile: JavaScript can be used for a wide range of tasks, from simple calculations
to complex server-side applications.

• Event-Driven: JavaScript can respond to user actions (clicks, keystrokes) in real-

time.

• Asynchronous: JavaScript can handle tasks like fetching data from servers without
freezing the user interface.

• Rich Ecosystem: There are numerous libraries and frameworks built on JavaScript,
such as React, Angular, and Vue.js, which make development faster and more
efficient.

Client Side and Server Side nature of JavaScript

 • Client-side: Involves controlling the browser and its DOM, handling user events like
clicks and form inputs. Libraries such as AngularJS, ReactJS, and VueJS are
commonly used.

• Server-side: Involves interacting with databases, manipulating files, and generating

responses. With Node.js and frameworks like Express.js, JavaScript is also widely
used on the server side.

• Imperative Programming: Focuses on how to perform tasks, controlling the flow of

computation. It includes approaches like procedural and object-oriented
programming, often using constructs like async/await to handle actions.

• Declarative Programming: Focuses on what should be done rather than how it’s
done. It emphasizes describing the desired result, like with arrow functions, without
detailing the steps to achieve it.

Applications of JavaScript

• Web Development: JavaScript adds interactivity and dynamic behavior to static

websites, with popular frameworks like AngularJS enhancing development.

• Web Applications: JavaScript powers robust web applications,

leveraging APIs, React, and Electron to create dynamic user experiences like Google
Maps.

• Server Applications: Node.js brings JavaScript to the server side, enabling powerful
server applications and full-stack development.

• Game Development: JavaScript, combined with HTML5 and libraries like Ease JS,
enables the creation of interactive games for the web.

• Smartwatches: Pebble JS allows JavaScript to run on smartwatches, supporting apps

that require internet connectivity.

Limitations of JavaScript

• Security Risks : JavaScript can be used for attacks like Cross-Site Scripting (XSS),
where malicious scripts are injected into a website to steal data by exploiting elements
like <img>, <object>, or <script> tags.
 • Performance : JavaScript is slower than traditional languages for complex tasks, but
for simple tasks in a browser, performance is usually not a major issue.

• Complexity : To write advanced JavaScript, programmers need to understand core

programming concepts, objects, and both client- and server-side scripting, which can
be challenging.

• Weak Error Handling and Type Checking : JavaScript is weakly typed, meaning
variables don’t require explicit types. This can lead to issues as type checking is not
strictly enforced.

Variables and Datatypes in JavaScript

Variables and data types are foundational concepts in programming, serving as the building
blocks for storing and manipulating information within a program. In JavaScript, getting a
good grasp of these concepts is important for writing code that works well and is easy to
understand.

Variables

A variable is like a container that holds data that can be reused or updated later in the
program. In JavaScript, variables are declared using the keywords var, let, or const.

1. var Keyword

The var keyword is used to declare a variable. It has a function-scoped or globally-scoped

behaviour.

var n = 5;

console.log(n);

var n = 20; // reassigning is allowed

console.log(n);

Output

20
The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same
scope.

let n= 10;

n = 20; // Value can be updated

// let n = 15; //can not redeclare

console.log(n)

Data Types

JavaScript supports various datatypes, which can be broadly categorized into primitive and
non-primitive types.

Primitive Datatypes

Primitive datatypes represent single values and are immutable.

1. Number: Represents numeric values (integers and decimals).

let n = 42;
let pi = 3.14;

2. String: Represents text enclosed in single or double quotes.

let s = "Hello, World!";

3. Boolean: Represents a logical value (true or false).

let bool= true;

4. Undefined: A variable that has been declared but not assigned a value.

let notAssigned;

console.log(notAssigned);

Output

undefined

5. Null: Represents an intentional absence of any value.

let empty = null;

6. Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

7. BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.

let bigNumber = 123456789012345678901234567890n;

Non-Primitive Datatypes

Non-primitive types are objects and can store collections of data or more complex entities.

1. Object: Represents key-value pairs.

let obj = {
name: "Amit",
age: 25
};

2. Array: Represents an ordered list of values.

let a = ["red", "green", "blue"];

3. Function: Represents reusable blocks of code.

function fun() {
console.log("GeeksforGeeks");
}

JavaScript Operators

JavaScript operators are symbols or keywords used to perform operations on values and
variables. They are the building blocks of JavaScript expressions and can manipulate data in
various ways.

There are various operators supported by JavaScript.

1. JavaScript Arithmetic Operators

Arithmetic Operators perform mathematical calculations like addition, subtraction,

multiplication, etc.
const sum = 5 + 3; // Addition

const diff = 10 - 2; // Subtraction

const p = 4 * 2; // Multiplication

const q = 8 / 2; // Division

console.log(sum, diff, p, q);

Output

8884

• + adds two numbers.

• – subtracts the second number from the first.

• * multiplies two numbers.

• / divides the first number by the second.

2. JavaScript Assignment Operators

Assignment operators are used to assign values to variables. They can also perform
operations like addition or multiplication before assigning the value.

let n = 10;

n += 5;

n *= 2;

console.log(n);

Output

30

• = assigns a value to a variable.

• += adds and assigns the result to the variable.

• *= multiplies and assigns the result to the variable.

3. JavaScript Comparison Operators

Comparison operators compare two values and return a boolean (true or false). They are
useful for making decisions in conditional statements.

console.log(10 > 5);

console.log(10 === "10");

Output

true

false

• > checks if the left value is greater than the right.

• === checks for strict equality (both type and value).

• Other operators include <, <=, >=, and !==.

4. JavaScript Logical Operators

Comparison operators are mainly used to perform the logical operations that determine the
equality or difference between the values.

const a = true, b = false;

console.log(a && b); // Logical AND

console.log(a || b); // Logical OR

Output

false

true

• && returns true if both operands are true.

• || returns true if at least one operand is true.

• ! negates the boolean value.

5. JavaScript Bitwise Operators

Bitwise operators perform operations on binary representations of numbers.

const res = 5 & 1; // Bitwise AND

console.log(res);

Output

• & performs a bitwise AND.

• | performs a bitwise OR.

• ^ performs a bitwise XOR.

• ~ performs a bitwise NOT.

6. JavaScript Ternary Operator

The ternary operator is a shorthand for conditional statements. It takes three operands.

const age = 18;

const status = age >= 18 ? "Adult" : "Minor";

console.log(status);

Output

Adult

condition ? expression1 : expression2 evaluates expression1 if the condition is true, otherwise

evaluates expression2.

7. JavaScript Comma Operator

Comma Operator (,) mainly evaluates its operands from left to right sequentially and returns
the value of the rightmost operand.

let n1, n2
const res = (n1 = 1, n2 = 2, n1 + n2);

console.log(res);

Output

• Each expression is evaluated from left to right.

• The final result of the expression is the rightmost value.

8. JavaScript Unary Operators

Unary operators operate on a single operand (e.g., increment, decrement).

let x = 5;

console.log(++x); // Pre-increment

console.log(x--); // Post-decrement (Output: 6, then x becomes 5)

Output

632

• ++ increments the value by 1.

• — decrements the value by 1.

• typeof returns the type of a variable.

9. JavaScript Relational Operators

JavaScript Relational operators are used to compare its operands and determine the
relationship between them. They return a Boolean value (true or false) based on the
comparison result.

const obj = { length: 10 };

console.log("length" in obj);
console.log([] instanceof Array);

Output

true

true

• in checks if a property exists in an object.

• instanceof checks if an object is an instance of a constructor.

10. JavaScript BigInt Operators

BigInt operators allow calculations with numbers beyond the safe integer range.

const big1 = 123456789012345678901234567890n;

const big2 = 987654321098765432109876543210n;

console.log(big1 + big2);

Output

1111111110111111111011111111100n

• Operations like addition, subtraction, and multiplication work with BigInt.

• Use n suffix to denote BigInt literals.

11. JavaScript String Operators

JavaScript String Operators include concatenation (+) and concatenation assignment (+=),
used to join strings or combine strings with other data types.

const s = "Hello" + " " + "World";

console.log(s);

Output

Hello World
 • + concatenates strings.

• += appends to an existing string.

12. JavaScript Chaining Operator (?.)

The optional chaining operator allows safe access to deeply nested properties without
throwing errors if the property doesn’t exist.

const obj = { name: "Aman", address: { city: "Delhi" } };

console.log(obj.address?.city);

console.log(obj.contact?.phone);

Output

Delhi

undefined

• ?. safely accesses a property or method.

• Returns undefined if the property doesn’t exist.

What are JavaScript operators?

JavaScript operators are special symbols used to perform operations on operands, which can
be values or variables. They allow you to manipulate data and perform computations.

What are the different types of JavaScript operators?

The main types of JavaScript operators include:

• Arithmetic Operators

• Assignment Operators

• Comparison Operators

• Logical Operators

• Bitwise Operators

• String Operators
 • Conditional (Ternary) Operator

• Type Operators

• Comma Operator

• Unary Operators

JavaScript- Control Flow Statements

Control flow statements in JavaScript control the order in which code is executed. These
statements allow you to make decisions, repeat tasks, and jump between parts of a program
based on specific conditions.

1. Decision-Making Statements

JavaScript if Statement

The if statement executes a block of code only if a specified condition is true.

const age = 18;

0if (age >= 18) {

console.log("You are an adult.");

Output

You are an adult.

• Checks if age is greater than or equal to 18.

• Logs "You are an adult." if the condition is true.

JavaScript if...else Statement

The if...else statement provides an alternate block of code to execute if the condition is false.

const score = 40;

if (score >= 50) {

console.log("You passed.");

} else {

console.log("You failed.");

Output

You failed.

• It will log "You passed." if the score is 50 or more.

• Otherwise, logs "You failed."

JavaScript if...else if...else Statement

The if...else if...else statement is used when you want to handle multiple conditions.

const temp = 25;

if (temp > 30) {

console.log("It's hot.");

} else if (temp >= 20) {

console.log("It's warm.");

} else {

console.log("It's cold.");

Output

It's warm.

• Checks if the temperature is greater than 30, logs "It's hot."

• If not, checks if it's between 20 and 30, logs "It's warm."

 • Otherwise, logs "It's cold."

2. Loops

JavaScript for loop

The for loop continuously execute a block of code to a set number of times.

for (let i = 1; i <= 5; i++) {

console.log(i);

Output

• Initializes i with 1 and checks if i <= 5.

• Executes the console.log statement and increments i by 1 in each iteration.

• Stops the loop when i exceeds 5.

JavaScript while loop

The while loop repeats a block of code as long as the condition is true.

let i = 1;

while (i <= 5) {

console.log(i);

i++;

}
Output

• Starts with i = 1 and checks if i <= 5.

• Logs the value of i and increments it by 1 after each iteration.

• Stops the loop when i exceeds 5.

JavaScript do...while loop

The do...while loop executes the block of code at least once before checking the condition.

let i = 1;

do {

console.log(i);

i++;

} while (i <= 5);

Output

• Executes the console.log statement once, even if the condition is false.

 • Continues looping until the condition i <= 5 is no longer true.

To read more about it follow article - JavaScript Loops

3. Branching Statements

JavaScript return Statement

The return statement is used to end the execution of a function and optionally return a value
to the function caller.

function add(a, b) {

return a + b;

const res = add(5, 3);

console.log(res);

Output

In this example

• return n1 + n2 ends the function and sends the sum of a and b back to the caller.

• The returned value is stored in the result.

JavaScript break Statement

The break statement is used to exit a loop or switch statement prematurely.

for (let i = 1; i <= 5; i++) {

if (i === 3) break;

console.log(i);

Output
1

• It will log 1 and 2 to the console.

• Exits the loop when i equals 3.

JavaScript continue Statement

The continue statement skips the current iteration of a loop and proceeds to the next one.

for (let i = 1; i <= 5; i++) {

if (i === 3) continue;

console.log(i);

Output

• It will skip logging when i equals 3.

• Logs 1, 2, 4, and 5 to the console.

4. Switching Statements

JavaScript switch Statement

The switch statement evaluates an expression and executes a block of code based on
matching cases. It provides an alternative to long if-else chain.

const day = "Monday";

switch (day) {

case "Monday":
 console.log("Start of the week.");

break;

case "Friday":

console.log("End of the workweek.");

break;

default:

console.log("It's a regular day.");

Output

Start of the week.

• Checks the value of day and matches it to a case.

• Logs "Start of the week." if day is "Monday".

• Logs "End of the workweek." if day is "Friday".

• Logs "It's a regular day." if no cases match.

Uses of Control Flow Statements

Control flow statements are backbone in programming for

• Decision-Making: To execute specific blocks of code based on conditions (e.g., if,

if...else).

• Branching: To exit loops or skip iterations (break, continue).

• Looping: To repeat tasks (for, while, do...while).

• Switching: To handle multiple conditions effectively (switch).

Java Functions:

A function in JavaScript is a block of reusable code designed to perform a specific task.

Functions help organize and modularize code, making it easier to read, debug, and reuse.
Types of Functions in JavaScript

1. Named Function - A function with a specific name.

A named function is a function that has a specific name and can be called anywhere
in the script. It is defined using the function keyword followed by a name.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Named Function Example</title>

<script>

// Named function definition

function displayMessage() {

document.getElementById("output").innerHTML = "Hello! This is a named

function.";

function addNumbers(a, b) {

let sum = a + b;

document.getElementById("result").innerHTML = "Sum: " + sum;

</script>

</head>

<body>
 <h2>JavaScript Named Function Example</h2>

<!-- Button to call named function -->

<button onclick="displayMessage()">Click to Display Message</button>

<p id="output"></p>

<!-- Button to call function with parameters -->

<button onclick="addNumbers(10, 20)">Calculate Sum</button>

<p id="result"></p>

</body>

</html>

Output:

2. Anonymous Function - A function without a name, often assigned to variables.

An anonymous function is a function without a name. It is usually assigned to a

variable or used as an argument in higher-order functions.
Key Characteristics of Anonymous Functions:

No function name.
Usually assigned to variables.
Can be used as callbacks (e.g., in setTimeout or event listeners).

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Anonymous Function Example</title>

<script>

// Assigning an anonymous function to a variable

let showMessage = function() {

document.getElementById("output").innerHTML = "Hello! This is an

anonymous function.";

};

// Anonymous function with parameters

let multiplyNumbers = function(a, b) {

let product = a * b;

document.getElementById("result").innerHTML = "Product: " + product;

};

</script>

</head>

<body>
 <h2>JavaScript Anonymous Function Example</h2>

<!-- Button to call anonymous function -->

<button onclick="showMessage()">Click to Show Message</button>

<p id="output"></p>

<!-- Button to call function with parameters -->

<button onclick="multiplyNumbers(5, 4)">Calculate Product</button>

<p id="result"></p>

</body>

</html>

Output:

3. Arrow Function - A shorter syntax introduced in ES6.[ ES6 is the 6th version of the
ECMA Script programming language. ECMA Script is the standardized name for
JavaScript. ECMA stands for European Computer Manufacturers Association]
Advantages of Arrow Functions:

Shorter syntax.
No need for the function keyword.
return is implicit if the function has a single expression.
Does not bind its own this (useful in object methods and callbacks).

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Arrow Function Example</title>

<script>

// Arrow function to display a message

const showMessage = () => {

document.getElementById("output").innerHTML = "Hello! This is an arrow

function.";

};

// Arrow function with parameters

const addNumbers = (a, b) => {

let sum = a + b;

document.getElementById("result").innerHTML = "Sum: " + sum;

};
 // Arrow function with implicit return (single expression)

const multiplyNumbers = (a, b) =>

document.getElementById("product").innerHTML = "Product: " + (a * b);

</script>

</head>

<body>

<h2>JavaScript Arrow Function Example</h2>

<!-- Button to call arrow function -->

<button onclick="showMessage()">Click to Show Message</button>

<p id="output"></p>

<!-- Button to call function with parameters -->

<button onclick="addNumbers(10, 5)">Calculate Sum</button>

<p id="result"></p>

<button onclick="multiplyNumbers(4, 3)">Calculate Product</button>

<p id="product"></p>

</body>

</html>

Output:
 4. Immediately Invoked Function Expression (IIFE) - A function that runs as soon as
it is defined.

An IIFE (Immediately Invoked Function Expression) is a function that executes

immediately after being defined. It is commonly used to avoid polluting the global
scope and for encapsulation.

Key Features of IIFE:

✔ Executed Immediately – Runs as soon as it's defined.

✔ Encapsulation – Prevents variable conflicts by keeping variables inside the
function.
✔ No Global Pollution – Does not affect the global scope.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>IIFE Example in JavaScript</title>

</head>

<body>

<h2>JavaScript IIFE Example</h2>

<p id="message"></p>

<p id="greeting"></p>

<p id="sum"></p>

<script>

// Run script only after the page is fully loaded

window.onload = function() {

// Simple IIFE that runs immediately

(function() {

document.getElementById("message").innerHTML = "Hello! This is an IIFE

executing immediately.";

})();

// IIFE with parameters

(function(name) {

document.getElementById("greeting").innerHTML = "Welcome, " + name + "!";

})("John");

// Arrow Function IIFE

(() => {

console.log("IIFE with Arrow Function Executed!");

})();
 // IIFE with a return value

let result = (function(a, b) {

return a + b;

})(10, 20);

document.getElementById("sum").innerHTML = "Sum: " + result;

};

</script>

</body>

</html>

Output:

Simple Example:[using all the functions]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>JavaScript Functions Example</title>

<script>

// Named Function

function showMessage() {

alert("Hello! This is a JavaScript function.");

// Function with Parameters

function greetUser(name) {

document.getElementById("output").innerHTML = "Hello, " + name + "!";

// Arrow Function

const changeColor = () => {

document.body.style.backgroundColor = "lightblue";

};

</script>

</head>

<body>

<h2>JavaScript Functions Example</h2>

<button onclick="showMessage()">Click Me</button>

<button onclick="greetUser('John')">Greet User</button>

<button onclick="changeColor()">Change Background Color</button>

 <p id="output"></p>

</body>

</html>

5-Mark Questions

HTML: Structure and Semantics

1. Define the structure of an HTML document with an example.

2. Differentiate between block-level and inline elements in HTML.

3. What are semantic tags? List three examples.

4. Explain the purpose of the <form> tag in HTML.

5. Write the syntax and an example of an HTML attribute.

CSS: Selectors, Properties, and Layout

6. What are CSS selectors? Provide examples of three types of selectors.

7. Define the box model in CSS and its components.

8. What is the difference between inline, internal, and external CSS?

9. Write a CSS rule to center-align a paragraph within a <div>.

10. Explain the purpose of the position property in CSS with an example.

JavaScript: Basics and Form Validation

11. Define variables in JavaScript with an example.

12. Differentiate between var, let, and const in JavaScript.

13. What are JavaScript operators? Provide examples of three types.

 14. Explain the purpose of if...else control structures in JavaScript.

15. Write a basic JavaScript function to validate if a text input field is empty.

16-Mark Questions
These require detailed explanations, code examples, and diagrams (where applicable).

HTML: Structure and Semantics

1. Explain the structure of an HTML document in detail with a labeled example.

2. Discuss the importance of semantic HTML elements. Write examples for <header>,
<footer>, <article>, and <section>.

3. Describe HTML forms in detail. Include examples of input elements like text, radio
buttons, checkboxes, and submit buttons.

CSS: Selectors, Properties, and Layout

4. Explain the various types of CSS selectors (e.g., class, id, group, descendant) with
examples.

5. Discuss the CSS box model in detail. Explain how padding, border, and margin affect
layout.

6. Explain the differences between flexbox and grid layout in CSS with examples. Write
a sample code to design a simple web page layout using both.

JavaScript: Basics and Form Validation

7. Explain data types and variables in JavaScript with examples. Highlight the
differences between primitive and non-primitive data types.

8. Write a detailed note on control structures in JavaScript (if, switch, for, while) with
examples.

9. Explain the role of functions in JavaScript. Write a program to calculate the factorial
of a number using a function.

10. Create a JavaScript program to validate a registration form. Include checks for name,
email, password, and phone number fields.

Example Questions with Combined Concepts

1. HTML + CSS: Create a simple web page with a header, a navigation bar, and a form
using HTML. Style it using CSS to create a visually appealing layout. (16 Marks)
2. HTML + JavaScript: Design an HTML form for user login. Write JavaScript code to
validate the username and password fields. (16 Marks)

3. CSS + JavaScript: Explain how JavaScript can manipulate CSS styles dynamically.
Write a program to change the background color of a <div> when a button is clicked.
(16 Marks)