### Basics of HTML5 Introduction:

HTML5, the fifth version of the Hypertext Markup Language, is the latest standard for structuring
content on the web. It builds upon its predecessors with new features and improvements. Key aspects
include:

- **Semantic Markup:** HTML5 introduces semantic elements like `<header>`, `<nav>`, `<section>`, and
`<article>`, providing a more meaningful structure to web documents.

- **Multimedia Support:** Native support for audio and video elements (`<audio>` and `<video>`),
reducing the need for third-party plugins and enhancing the user experience.

- **Canvas:** The `<canvas>` element allows dynamic rendering of graphics and images directly within
the browser, facilitating interactive and visually rich content.

- **Improved Form Controls:** HTML5 introduces new input types, such as `<input type="email">` and
`<input type="url">`, along with attributes like `placeholder` and `required`, enhancing form handling
and validation.

- **Local Storage:** The `localStorage` API enables web pages to store data locally on the user's device,
providing a more efficient way to manage client-side data.

### Features of HTML5:

1. **Semantic Elements:**

- **Header (`<header>`), Nav (`<nav>`), Section (`<section>`), Article (`<article>`), Footer

(`<footer>`):** These elements provide more context to the content, aiding in better document
structure and improved accessibility.
2. **Multimedia:**

- **Audio (`<audio>`), Video (`<video>`):** Native support for embedding audio and video content
without relying on external plugins.

3. **Canvas:**

- **`<canvas>` Element:** Allows for dynamic rendering of graphics and images using JavaScript,
making it ideal for interactive applications and games.

4. **New Form Elements:**

- **Input Types (`<input>`):** New types like email and url (`<input type="email">`, `<input
type="url">`) provide specialized input fields for improved user experience and validation.

5. **Local Storage:**

- **`localStorage` API:** Enables web pages to store data locally on the user's device, reducing the
need for server-side storage for certain types of data.

### Form New Elements in HTML5:

HTML5 introduces new elements and attributes to enhance form handling:

1. **Placeholder Attribute:**

- The `placeholder` attribute provides a hint to users about the expected format or value within a form
field before they input their data.

2. **Required Attribute:**

- The `required` attribute is used to specify that a form field must be filled out before submitting the
form, helping to ensure important information is provided.
### Semantics in HTML5:

HTML5 emphasizes semantic markup to improve document structure and accessibility:

1. **Semantic Tags:**

- Elements like `<article>`, `<section>`, and `<aside>` convey the meaning and structure of content,
making it easier for developers, browsers, and assistive technologies to understand the document's
hierarchy.

2. **Aria Attributes:**

- HTML5 supports Accessible Rich Internet Applications (ARIA) attributes, which can be added to
elements to enhance accessibility for users with disabilities, providing additional information about the
structure and purpose of elements.

3. **Document Outlining:**

- Improved sectioning elements contribute to a clearer document structure, aiding in better readability
and maintainability of web pages.

Details of the `<canvas>`, `<video>`, and `<audio>` tags:

### `<canvas>` Element:

The `<canvas>` element in HTML5 provides a drawable region through JavaScript. It is commonly used
for rendering graphics, animations, or other visual content dynamically on a web page.

- **Attributes:**

- `width` and `height`: Specifies the dimensions of the canvas.

- **Example:**
 ```html

<canvas id="myCanvas" width="300" height="150"></canvas>

```

- **JavaScript Usage:**

- The canvas is manipulated using the JavaScript `CanvasRenderingContext2D` interface, which provides
methods for drawing shapes, text, and images.

- **Example:**

```javascript

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';

ctx.fillRect(10, 10, 100, 50);

```

- **Common Use Cases:**

- Drawing charts, graphs, and visualizations.

- Creating animations and games.

### `<video>` Element:

The `<video>` element is used for embedding video content directly into HTML documents. It supports
various video formats and provides controls for playback.

- **Attributes:**

- `src`: Specifies the URL of the video file.

 - `width` and `height`: Define the dimensions of the video player.

- `controls`: Adds standard playback controls (play, pause, volume, etc.).

- **Example:**

```html

<video width="320" height="240" controls>

<source src="example.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

```

- **Fallback Content:**

- Content between the `<video>` tags serves as fallback text for browsers that do not support the
`<video>` element.

- **JavaScript Interaction:**

- JavaScript can be used to control the video player programmatically, adjusting playback, volume, etc.

### `<audio>` Element:

The `<audio>` element is used to embed audio content in HTML documents, allowing users to play audio
directly on a web page.

- **Attributes:**

- `src`: Specifies the URL of the audio file.

- `controls`: Adds standard audio controls (play, pause, volume, etc.).

- **Example:**
 ```html

<audio controls>

<source src="music.mp3" type="audio/mp3">

Your browser does not support the audio tag.

</audio>

```

- **Fallback Content:**

- Similar to `<video>`, content between the `<audio>` tags serves as fallback text for unsupported
browsers.

- **JavaScript Interaction:**

- JavaScript can be used to control the audio player, allowing for dynamic changes in playback.

- **Common Use Cases:**

- Background music for web pages.

- Podcasts and other audio content.

These tags contribute to a richer multimedia experience on the web, providing the ability to incorporate
graphics, videos, and audio seamlessly into HTML documents.

### Introduction to Scalable Vector Graphics (SVG):

Scalable Vector Graphics (SVG) is an XML-based vector image format introduced by the World Wide
Web Consortium (W3C). SVG is designed to describe two-dimensional vector graphics in a concise,
portable, and scalable way. Here are key aspects of SVG along with an example:
- **XML-Based Format:**

- SVG is based on XML, making it a human-readable and machine-readable format. SVG documents can
be created and edited with text editors or generated dynamically with scripting languages like
JavaScript.

- **Vector Graphics:**

- SVG represents graphics as a set of geometric shapes such as paths, circles, and rectangles rather than
pixels. This ensures that the images are scalable without loss of quality, making them suitable for various
display sizes.

- **Browser Support:**

- Most modern web browsers support SVG, allowing for the inline embedding of SVG code directly into
HTML documents. This enables the creation of interactive and dynamic graphics within web pages.

- **Scalability:**

- SVG images can be scaled to any size without loss of quality. This is particularly useful for responsive
web design and applications where images need to adapt to different screen sizes.

- **Example: Simple SVG Drawing:**

```xml

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

```

- This SVG code draws a red circle with a black border on a 100x100 canvas.

- **Interactive Features:**
 - SVG supports interactivity and animation through JavaScript. Elements can be manipulated, and
events can trigger dynamic responses, creating rich user experiences.

- **Text Support:**

- SVG allows the inclusion of text elements, making it versatile for creating not only graphics but also
text-based content within the same document.

- **Accessibility:**

- SVG images are accessible and can be styled using CSS. This makes them suitable for creating visually
appealing and inclusive designs.

- **Integration with HTML:**

- SVG images can be embedded directly into HTML documents using the `<svg>` tag. They can also be
referenced as external files, allowing for efficient code organization.

In summary, SVG is a versatile and scalable graphics format that offers a wide range of possibilities for
creating interactive and visually appealing content on the web. Its XML-based structure, scalability, and
support for interactivity make it a powerful choice for web developers and designers.

In the context of HTML5, version compatibility refers to the ability of web pages or
applications to function consistently across different web browsers and devices, despite potential
variations in how these platforms interpret and support HTML5 features. HTML5, being a standard for
structuring and presenting content on the web, aims to ensure a consistent and reliable experience for
users across various environments.

Here are some key aspects of version compatibility in HTML5:

1. **Cross-Browser Compatibility:**
 - Different web browsers may have slight variations in their implementation of HTML5 features.
Ensuring cross-browser compatibility involves writing code that works consistently across popular
browsers like Chrome, Firefox, Safari, and Edge.

2. **Feature Support:**

- HTML5 introduces new elements, attributes, and APIs to enhance web development. However, not
all browsers support every HTML5 feature, and some features might be supported in newer versions of
certain browsers. Developers need to be aware of feature support and consider fallbacks or polyfills for
browsers that lack support.

3. **Progressive Enhancement:**

- The principle of progressive enhancement is integral to version compatibility. It involves building a

baseline experience that works across all browsers and then adding enhancements for browsers that
support more advanced features. This approach ensures that the core functionality is available to all
users.

4. **Use of Modern DOCTYPE:**

- HTML5 introduces a new Document Type Definition (DOCTYPE), `<!DOCTYPE html>`, which signals to
browsers that the document adheres to the HTML5 standard. Using the correct DOCTYPE helps
browsers render content consistently and avoid compatibility issues.

5. **Responsive Design:**

- Responsive web design is crucial for version compatibility, especially considering the diversity of
devices and screen sizes. Using techniques like media queries, developers can create layouts that adapt
to different screen dimensions, providing a seamless experience on desktops, tablets, and smartphones.

6. **Testing Across Devices and Browsers:**

- Regular testing across multiple devices and browsers is essential to identify and address compatibility
issues. This can involve manual testing as well as automated testing tools to ensure a wide coverage of
testing scenarios.
 Chap 2
The architecture of CSS (Cascading Style Sheets) involves the structure and organization of styles to
apply consistent and visually appealing presentation to HTML documents. Here's a brief overview of key
components in the architecture of CSS:

1. **Selectors:**

- Selectors define which HTML elements the styles should be applied to. They can target elements
based on their type, class, ID, attributes, or relationships with other elements.

2. **Properties and Values:**

- CSS properties define the visual styles of selected elements, and each property has a corresponding
value. For example, the `color` property can have a value like `red` or `#00ff00` to specify the text color.

3. **Rules:**

- CSS rules consist of a selector and a declaration block. The declaration block contains one or more
property-value pairs enclosed in curly braces. This structure defines how the selected elements should
be styled.

```css

selector {

property: value;

```

4. **Style Sheets:**

- Style sheets are documents containing CSS rules. There are three main types of style sheets:

- **Inline Styles:** Applied directly to individual HTML elements using the `style` attribute.
 - **Internal Styles:** Defined within the `<style>` tag in the `<head>` section of an HTML document.

- **External Styles:** Stored in separate CSS files and linked to HTML documents using the `<link>`
tag.

5. **Cascading:**

- The term "cascading" in CSS refers to the order of priority when conflicting styles are applied. The
cascade is influenced by factors like specificity, importance, and source order. Styles defined later in the
document, or with higher specificity, take precedence.

6. **Specificity:**

- Specificity determines which rule takes precedence when multiple rules apply to the same element. It
is calculated based on the type of selector used and the number of ID, class, and element selectors.

7. **Box Model:**

- The box model defines how elements are rendered on the page, specifying content, padding, border,
and margin. Understanding the box model is crucial for layout and spacing in CSS.

8. **Flexbox and Grid Layout:**

- Flexbox and Grid Layout are modern CSS layout models that provide powerful tools for creating
complex and responsive page layouts. Flexbox is designed for one-dimensional layouts, while Grid
Layout is suitable for two-dimensional layouts.

9. **Vendor Prefixes:**

- Vendor prefixes are used to handle experimental or browser-specific CSS properties. They ensure
that certain styles are applied only in specific browsers during periods of transition or non-standardized
feature implementation.

10. **Media Queries:**

- Media queries enable responsive design by allowing styles to be applied conditionally based on
characteristics such as screen width, device type, or resolution. This ensures a consistent user
experience across different devices.

Understanding and effectively utilizing these components contribute to creating well-organized,

maintainable, and responsive styles in CSS.
CSS Modules is not a feature of CSS3 itself, but rather a technique used in modern web
development to modularize and scope CSS styles for individual components or modules within an
application. CSS Modules are commonly used in conjunction with tools like Webpack, Rollup, or Parcel
to bundle CSS files alongside JavaScript modules.

Here's an overview of CSS Modules and how they work:

1. **Local Scope:**

- CSS Modules provide local scope for styles, meaning that class names and selectors defined in one
module do not clash with those defined in other modules. This helps prevent unintended style overrides
and makes it easier to manage styles in large applications.

2. **Automatic Class Naming:**

- When using CSS Modules, class names defined in CSS files are automatically transformed during the
build process to ensure uniqueness. This transformation typically involves appending a unique identifier
to each class name, which is generated based on the file name or some other identifier.

3. **Importing Styles:**

- In JavaScript modules, CSS Modules are imported like regular modules using `import` statements. The
imported styles are then referenced in JSX or HTML using the imported class names.

4. **Accessing Styles in JavaScript:**

- CSS Modules allow developers to access individual styles or entire style objects directly in JavaScript.
This enables dynamic styling based on application state or user interactions.

5. **Composition and Inheritance:**

- CSS Modules support composition and inheritance of styles, allowing developers to create reusable
style components and extend existing styles with additional properties.
6. **No Global Scope:**

- By default, CSS Modules do not leak styles to the global scope, reducing the risk of unintended side
effects and conflicts with styles from third-party libraries or other parts of the application.

Here's a simple example of how CSS Modules are used:

```css

/* styles.module.css */

.button {

background-color: #007bff;

color: #fff;

padding: 0.5rem 1rem;

border: none;

.primary {

font-weight: bold;

```

```javascript

// Button.js

import React from 'react';

import styles from './styles.module.css';

const Button = ({ children, primary }) => {

const buttonClassName = primary ? styles.button + ' ' + styles.primary : styles.button;

return (

<button className={buttonClassName}>

{children}

</button>

);

};

export default Button;

```

In this example, `styles.module.css` contains CSS styles defined using CSS Modules syntax. The `Button`
component imports these styles and applies them dynamically based on the component's props. This
ensures that the styles are scoped locally to the `Button` component and do not interfere with styles
else where in the application.

CSS Framework is a pre-prepared library that contains different styles and templates
that help to standardize the steps for designing and developing, along with enhancing the
process of designing and styling web pages by providing the leverage to expedite the
Developers. CSS frameworks tackle the challenge of responsive design, seamlessly adapting
layouts to diverse screen sizes.
Why to use CSS Frameworks?
CSS framework provides various features like efficiency, responsive design, cross-browser
compatibility, customization, and community support. CSS framework is used to write CSS
code more efficiently. Most of the time writing CSS code from scratch is quite time-
consuming and it takes a lot of time to debug. CSS frameworks are built with pre-designed
components and pre-coded utility classes useful overall development process by reducing the
time writing CSS from scratch.
How to Choose the Right CSS Framework for a Project?
 Project Requirements: Choose the framework according to the nature of your project.
First, understand what kind of project you are going to develop. A small website, a simple
landing page, or a large-scale application such as an e-commerce platform because some
frameworks are comprehensive and provide many features, while others are lightweight
with fewer features and useful for small projects.
 Performance: Check the file size of the framework, a smaller file size increases the load
time of the web page and enhances the performance of the website.
 Community and Support: Choose the framework that has large and active community
support, you can be updated on all the updates and have a good amount of resources
such as documentation, tutorials, etc that are useful throughout the development
process.
 Responsiveness: If the project requires a responsive design then choose a framework that
supports a mobile-first approach for development. The built-in grid systems, utility
classes, and responsive pre-designed components are useful.
 Browser Compatibility: Ensure that the framework has been tested and is compatible
with major browsers to avoid cross-browser compatibility issues.
Benefits of CSS Frameworks
 Efficiency: CSS frameworks are always on top when time is a concern since you do not
need to write code from scratch there is a pre-designed set of codes that will help
developers simply integrate into their applications which helps to save lots of time with
pleasing design.
 Browser Compatibility: There is always a challenge in how the website looks on different
browsers but CSS frameworks are designed after various testing across various browsers
which reduces extensive debugging.
 Responsiveness: Most CSS frameworks provide a feature of responsiveness when you use
their utility classes or components.
 Community Support: Most of the popular CSS frameworks have large community support.
Popular CSS Frameworks
The most popular CSS Frameworks are given below:
Current Version
CSS FrameWork And Release Date Description Application

CSS Framework is a CSS Framework is a Strong Community,

pre-prepared library pre-prepared library provides Pre-
that contains different that contains designed Layouts and
has Responsive
styles and templates different styles and
Features.
that help to templates that help
standardize the steps to standardize the
for designing and steps for designing
developing, along with and developing, along
enhancing the process with enhancing the
 Current Version
CSS FrameWork And Release Date Description Application

of designing and process of designing

styling web pages by and styling web pages
providing the leverage by providing the
to expedite the leverage to expedite
Developers. CSS the Developers. CSS
frameworks tackle the frameworks tackle
challenge of the challenge of
responsive design, responsive design,
seamlessly adapting seamlessly adapting
layouts to diverse layouts to diverse
screen sizes. screen sizes.

It can be easily
customizable. It has a
feature of utility
classes and is popular
for mobile-first
design

Why to use CSS Why to use CSS It has Large

Frameworks? Frameworks? community support.
Provide components
that can very easily
make web pages
beautifully in very
little time.

CSS framework CSS framework Provide the feature

provides various provides various of responsiveness.
features like features like
efficiency, responsive efficiency, responsive
design, cross-browser design, cross-browser
compatibility, compatibility,
customization, and customization, and
community support. community support.
 Current Version
CSS FrameWork And Release Date Description Application

CSS framework is used CSS framework is

to write CSS code used to write CSS
more efficiently. Most code more efficiently.
of the time writing Most of the time
CSS code from scratch writing CSS code from
is quite time- scratch is quite time-
consuming and it consuming and it
takes a lot of time to takes a lot of time to
debug. CSS debug. CSS
frameworks are built frameworks are built
with pre-designed with pre-designed
components and pre- components and pre-
coded utility classes coded utility classes
useful overall useful overall
development process development process
by reducing the time by reducing the time
writing CSS from writing CSS from
scratch. scratch.

Provide the feature

of responsiveness. It
is Cost-effective.

How to Choose the How to Choose the Easy to learn and

Right CSS Framework Right CSS Framework integrate on the web
for a Project? for a Project? pages. Based on
reusable components
and utilities.

Project Requirements: Project Provide the feature

Choose the Requirements: of responsiveness.
framework according Choose the Easy to learn and
integrate on the web
to the nature of your framework according
pages via CDN links.
project. First, to the nature of your
 Current Version
CSS FrameWork And Release Date Description Application

understand what kind project. First,

of project you are understand what kind
going to develop. A of project you are
small website, a going to develop. A
simple landing page, small website, a
or a large-scale simple landing page,
application such as an or a large-scale
e-commerce platform application such as an
because some e-commerce platform
frameworks are because some
comprehensive and frameworks are
provide many comprehensive and
features, while others provide many
are lightweight with features, while others
fewer features and are lightweight with
useful for small fewer features and
projects. useful for small
projects.

Performance: Check Performance: Check

the file size of the the file size of the
framework, a smaller framework, a smaller
Lightweight
file size increases the file size increases the
framework. Provide
load time of the web load time of the web the feature of
page and enhances page and enhances responsiveness.
the performance of the performance of
the website. the website.

Community and Community and This framework is

Support: Choose the Support: Choose the Cost-effective having
framework that has framework that has a small community
and easy to
large and active large and active
understand.
community support, community support,
 Current Version
CSS FrameWork And Release Date Description Application

you can be updated you can be updated

on all the updates and on all the updates
have a good amount and have a good
of resources such as amount of resources
documentation, such as
tutorials, etc that are documentation,
useful throughout the tutorials, etc that are
development process. useful throughout the
development
process.

Responsiveness: If the Responsiveness: If

project requires a the project requires a
responsive design responsive design
then choose a then choose a
framework that framework that
supports a mobile-first supports a mobile- Based on reusable
approach for first approach for components. It can
development. The development. The easily work with Less
built-in grid systems, built-in grid systems, and Sass.
utility classes, and utility classes, and
responsive pre- responsive pre-
designed components designed components
are useful. are useful.
 Current Version
CSS FrameWork And Release Date Description Application

Browser Browser
Compatibility: Ensure Compatibility: Ensure
that the framework that the framework
Easy to learn and
has been tested and is has been tested and
integrate on the web
compatible with major is compatible with pages. Skeleton is
browsers to avoid major browsers to Mobile friendly.
cross-browser avoid cross-browser
compatibility issues. compatibility issues.

Benefits of CSS Benefits of CSS Small in size, cost-

Frameworks Frameworks effective, and easy to
learn.

Efficiency: CSS Efficiency: CSS

frameworks are frameworks are
always on top when always on top when
time is a concern since time is a concern
you do not need to since you do not need
write code from to write code from
Easy to learn and
scratch there is a pre- scratch there is a pre-
integrate on the web
designed set of codes designed set of codes pages. This
that will help that will help framework is Cost-
developers simply developers simply effective.
integrate into their integrate into their
applications which applications which
helps to save lots of helps to save lots of
time with pleasing time with pleasing
design. design.

Browser Browser Some automatic

Compatibility: There is Compatibility: There features make this
always a challenge in is always a challenge framework more
powerful like the
how the website looks in how the website
 Current Version
CSS FrameWork And Release Date Description Application

on different browsers looks on different

but CSS frameworks browsers but CSS
are designed after frameworks are
various testing across designed after
dark mode enabled
various browsers various testing across feature.
which reduces various browsers
extensive debugging. which reduces
extensive debugging.

Responsiveness: Most Responsiveness: Most

CSS frameworks CSS frameworks
Provide the feature
provide a feature of provide a feature of
of responsiveness.
responsiveness when responsiveness when Integrate easily based
you use their utility you use their utility on components and
classes or classes or utility classes.
components. components.

Advantages of CSS Framework

 Fast Development: CSS frameworks provide pre-designed components and utility classes
that are useful for writing code fast with tight deadlines.
 Responsive Design: Many CSS frameworks are built with a responsive design approach
that works well on all screen sizes.
 Cross-browser Compatibility: Frameworks are tested across multiple browsers, to ensure
the appearance and behaviour. This will save developers time in resolving browser-
specific issues.
 Community Support: There are many popular CSS frameworks that have large and active
community support that helps developers resolve their issues through documentation,
tutorials, blogs, etc.
Disadvantages of CSS Framework
 Big File Size: If the project prioritizes the performance then it can be impactful to load the
entire CSS framework in a project, and it may result in a slow loading time.
 Limited Customization: While using CSS frameworks they can limit the customization it
may require the custom design overriding or modifying the default styles which can be
time-consuming and impacts code readability.
 Learning Curve: Learning any new CSS framework is always challenging and time-
consuming.
 Dependency: When you use the CSS framework the project becomes dependent if the
changes happen in the framework or become outdated then it can impact the project.

Selectors and Pseudo Classes:

Sure, let's break down Selectors and Pseudo-classes in a simple way:

**Selectors:**

Selectors are like filters for HTML elements on a webpage. They help you pick and style specific
elements. It's like saying, "I want to style all paragraphs" or "I want to style only the headings."

For example:

- If you want to style all paragraphs, you'd use the selector `p`.

- If you want to style all headings, you'd use `h1`, `h2`, and so on.

**Pseudo-classes:**

Pseudo-classes are special keywords you add to selectors to style elements based on their state or
position. It's like saying, "I want to style the link that is being hovered over" or "I want to style
the first list item."

For example:

- `:hover` is a pseudo-class that styles an element when it's being hovered over.

- `:first-child` is a pseudo-class that selects the first child element of its parent.

Combining selectors and pseudo-classes, you can be very specific about which elements you
want to style and when you want to style them. It's a way of adding extra conditions to your
styling rules.

Simple example to understand how selectors and pseudo-classes work in CSS.

**HTML:**

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="styles.css">

<title>Selectors and Pseudo-classes Example</title>

</head>

<body>

<h1>Welcome to my website!</h1>

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

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

<a href="#" class="link">Hover me! </a>

</body>

</html>

**CSS (styles.css):**

/* Selector Example */

p{

color: blue;

/* Pseudo-class Examples */
li:first-child { /*here li have first-child pseudo class

font-weight: bold;

a:hover {

text-decoration: underline;

color: red;

In this example:

1. The `p` selector styles all paragraphs with a blue color.

2. The `li:first-child` pseudo-class styles the first list item within an unordered list by making its
text bold.

3. The `a:hover` pseudo-class styles the link when it's being hovered over, giving it an underline
and changing its color to red.

These are basic examples, but they illustrate how selectors and pseudo-classes can be used to
target specific elements and define their styles.

Colors, Background Images, and Masks:

1. **Colors:**

- In web development, colors are used to style the text, backgrounds, borders, and other
elements on a webpage.

- Colors can be specified using different methods such as named colors (e.g., "red"),
hexadecimal codes (e.g., "#3498db"), RGB values (e.g., "rgb(52, 152, 219)"),

- Example: `color: blue; ` or `background-color: #3498db;`

2. **Background Images:**

- Background images are used to set an image as the background of an HTML element.

- This can be applied to various elements like the entire page, a section, or a specific div.
 - Properties like `background-image`, `background-repeat`, `background-size`, and
`background-position` are commonly used to control how the background image is displayed.

- Example: `background-image: url('background-image.jpg');`

3. **Masks:**

- Masks are used to modify the visibility of elements by applying a mask to them. Masks are
often used in combination with background images to create effects.

- The `mask-image` property is commonly used, and it can be set to an image, a gradient, or
other values.

- Masks are particularly useful for creating gradient fades, transitions, or revealing parts of an
underlying image.

- Example: `mask-image: linear-gradient (to bottom, transparent, black);

These three aspects, colors, background images, and masks, are fundamental tools for web
designers and developers to create visually appealing and dynamic web pages. They provide the
means to control the aesthetics and presentation of content on a website.

Example where we use colors, background images, and masks to style different elements.

**HTML:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="styles.css">

<title>Colors, Background Images, and Masks Example</title>

</head>
<body>

<header>

<h1>My Awesome Website</h1>

</header>

<section class="main-content">

<p>Welcome to my website! This is the main content section.</p>

</section>

<div class="image-container">

<!-- This is an empty div to show the background image -->

</div>

</body>

</html>

**CSS (styles.css):**

/* Colors Example */

header {

background-color: #3498db; /* Blue background color */

color: white; /* White text color */

padding: 20px;

/* Background Images Example */

.image-container {

background-image: url('background-image.jpg'); /* Replace with the actual image path */

 background-size: cover;

height: 300px;

/* Masks Example */

.main-content {

background-color: #ecf0f1; /* Light gray background color */

padding: 20px;

mask-image: linear-gradient(to bottom, transparent, black); /* Gradient mask */

In this example:

1. The `header` has a blue background color (`#3498db`) and white text color.

2. The `.image-container` has a background image that covers the container and adjusts its size
(`background-size: cover`).

3. The `.main-content` section has a light gray background color (`#ecf0f1`) and a mask applied
using a gradient (`linear-gradient`). The mask creates a fading effect from transparent to black,
revealing the background color.

Chap 3
**Introduction to Node.js:**

Node.js is an open-source, server-side runtime environment built on the V8 JavaScript engine. It

allows developers to use JavaScript for server-side scripting, enabling the development of
scalable and high-performance web applications. Unlike traditional server-side technologies,
Node.js is event-driven and non-blocking, making it well-suited for building real-time
applications, APIs, and micro services.

**How Node.js Works: **

1. **Event-Driven and Non-Blocking:**

 - Node.js is designed to be event-driven, allowing developers to create asynchronous code.
This means that operations like reading or writing to the file system or making network requests
can be performed without waiting for the operation to finish. Instead, callbacks or Promises
handle the completion of these operations.

2. **Single-Threaded Event Loop: **

- Node.js operates on a single-threaded event loop. The event loop is a continuous process that
listens for events and executes callback functions when an event occurs. This single-threaded,
non-blocking architecture is highly efficient for handling many simultaneous connections.

3. **V8 JavaScript Engine: **

- Node.js uses the V8 JavaScript engine, which is developed by Google for the Chrome
browser. V8 compiles JavaScript code into machine code, making it faster to execute. This
engine is known for its high-performance capabilities, and Node.js leverages it to execute
JavaScript on the server side.

4. **npm (Node Package Manager):**

- Npm is the package manager for Node.js. It allows developers to easily install, manage, and
share third-party libraries or packages. The Node.js community has a vast ecosystem of open-
source packages, enabling developers to leverage existing solutions for various functionalities.

5. **Modules: **

- Node.js follows the Common-JS module system, allowing developers to modularize their
code. Modules encapsulate functionality and can be easily reused across different parts of an
application. Node.js also provides a set of core modules for common tasks like file I/O,
networking, and more.

6. **Scalability: **

- Node.js is known for its ability to handle a large number of concurrent connections
efficiently. It is particularly well-suited for building scalable, real-time applications, such as chat
applications, online gaming platforms, and streaming services.

In summary,
 1. Node.js is a powerful and flexible platform that brings JavaScript to the
server side.

2. Its event-driven, non-blocking architecture and the use of the V8 engine

contribute to its efficiency and scalability, making it a popular choice for
building modern web applications.

**REPL in Node.js:**
REPL stands for "Read-Eval-Print Loop." It is an interactive programming environment that
allows you to enter commands, have them executed immediately, and see the results. Node.js
comes with a built-in REPL environment that makes it easy for developers to experiment with
JavaScript code and test small snippets without creating full-fledged scripts or applications.

Node.js REPL working as follow:

1. **Accessing the REPL:**

- To start the Node.js REPL, open your terminal or command prompt and type `node`. Simply
running the `node` command without any arguments launches the REPL.

Bash / terminal type below command directly

> node

2. **Input and Output:**

- In the REPL, you can type JavaScript expressions or statements, and they will be immediately
evaluated and the result will be displayed.

javascript or command given below

 >2+3

3. **Multi-Line Commands:**

- You can enter multi-line commands by using the continuation ellipsis (`...`). Press `Enter`
twice to signal the end of the command.

javascript or command given below

> const message = "Hello, "

> const name = "Node.js"

> message + name

'Hello, Node.js'

```

4. **Underscore Variable (`_`):**

- The underscore (`_`) variable in the REPL stores the result of the last operation. This allows
you to use the result in subsequent commands.

javascript or command given below

> 10 * 2

20

>_+5

25

5. **Special Commands: **

- The REPL provides some special commands prefixed with a dot (`.`). For example, `.help`
displays a list of available commands.

Javascript or command given below

> .help

6. **Exiting the REPL:**

 - To exit the REPL, type `.exit` or press `Ctrl + C` twice.

Javascript or command given below

> .exit

**Npm (Node Package Manager):**

npm, which stands for Node Package Manager, is the default package manager for Node.js. It is
a command-line tool that allows developers to discover, install, and manage third-party packages
or libraries in their Node.js projects. Here are key aspects of npm:

1. **Package Management:**

- npm manages packages, which are reusable blocks of code that developers can include in
their projects. These packages could be libraries, frameworks, or tools created by other
developers and made available for public use.

2. **Installing Packages:**
- Developers can install packages in their Node.js projects using the `npm install` command
followed by the package name.
For example: npm install package-name
- This command downloads and installs the specified package and its dependencies into the
project's `node_modules` directory.

3. **Package.json:**
- The `package.json` file is a crucial part of a Node.js project. It contains metadata about the
project and lists its dependencies. Developers can create and maintain this file manually or use
`npm init` to generate it interactively.–

4. **Global vs. Local Installation:**

- Packages can be installed globally (accessible system-wide) or locally (limited to a specific
project). The `-g` flag is used for global installation:
npm install -g package-name
- Local installation is the default behavior.
Node.js, modules are a fundamental concept that allows developers to organize their code
into reusable and maintainable pieces. Modules help in structuring large-scale applications by
breaking them into smaller, self-contained units. Let's explore how modules work in Node.js:

Creating a Module:

A module in Node.js is simply a JavaScript file. It encapsulates related functionality and

variables, making it easier to manage and share across different parts of an application.

Example: **myModule.js** <= File Name

JavaScript
// myModule.js
const greet = (name) => {
console.log (`Hello, ${name}! `);
};

const multiply = (a, b) => {

return a * b;
};

module.exports = {
greet,
multiply
};
```

In this example, `myModule.js` exports two functions (`greet` and `multiply`) using
`module.exports`.

Using a Module in another file:

To use a module in another file, you need to require it using the `require` function. This
makes the exported functionality available in the current file.

Example: ** app.js **
```javascript
// app.js
const myModule = require('./myModule');

myModule.greet('Alice'); // Outputs: Hello, Alice!

const result = myModule.multiply(3, 4);
console.log(result); // Outputs: 12
```

In `app.js`, we use `require` to import the `myModule` module. Now, we can access the `greet`
and `multiply` functions as part of the `myModule` object.

Core Modules:

Node.js provides a set of built-in core modules that can be used without explicitly installing
them. For example, the `fs` module provides file system functionality.

Example:
```javascript
// Using the built-in fs module
const s = require('fs');

s.readFile('example.txt', 'utf8', (err, data) => {

if (err) {
console.error(err);
return;
}
console.log(data);
});
```

Module Patterns:

There are different patterns for organizing and structuring modules. The CommonJS pattern is
the one typically used in Node.js, as demonstrated in the examples above. However, other
patterns, such as ES7 modules (`import` and `export` syntax), are also supported in more recent
versions of Node.js.

Already install ES7 Package in VS code during at time of Pract no. 1

### Benefits of Modules in Node.js:

1. **Encapsulation:** Modules encapsulate functionality, preventing naming conflicts and

providing a clear structure to thse code.

2. **Reusability:** Modules can be reused across different parts of an application or even in

different projects.

3. **Maintainability:** Breaking down a large application into modules makes it easier to

maintain and update specific parts without affecting the entire codebase.

4. **Dependency Management:** Modules help manage dependencies by specifying which

functionalities are needed in each file.

Web Server Creation:

To create a basic web server in Node.js, you can use the built-in `http` module. Here's a simple
example of how you can create a web server:

JavaScript
// Importing the http module
const http = require('http');

// Creating the server

const server = http.createServer((req, res) => {
// Setting the response header
res.writeHead(200, {'Content-Type': 'text/plain'});

// Sending the response

res.end('Hello, World!\n');
});

// Listening to a port (e.g., 3000)

const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});

Here's a breakdown of what's happening in the code:

1. We import the `http` module, which comes built-in with Node.js.

2. We create a server using http.createServer(). This method takes a callback function that gets
executed whenever a request is made to the server. This callback function takes two parameters:
`req` (the request object) and `res` (the response object).
3. Inside the callback function, we set the response header using `res.writeHead()`. In this
example, we're setting the status code to 200 (which means "OK") and the content type to
`text/plain`.
4. We send the response body using `res.end()`. In this example, we're sending the text "Hello,
World!\n".
5. We specify the port number (e.g., 3000) that the server should listen to using `server.listen()`.
6. Once the server is running and listening to requests on the specified port, we log a message to
the console indicating the server is running.

To run this code, save it in a file (e.g., `server.js`) and then execute it using Node.js:
Use following command to run program using terminal
node server.js
```
O/p => see below
After running the server, you can visit `http://localhost:3000` in your web browser, and you
should see the text "Hello, World!" displayed on the page.

Events:
In Node.js, the `events` module provides an EventEmitter class that allows you to implement and
handle events in your applications. Here's a basic example demonstrating how to use events in
Node.js:

JavaScript
// Importing the events module
const EventEmitter = require('events');
// Creating a custom event emitter
class MyEmitter extends EventEmitter {}

// Creating an instance of the custom event emitter

const myEmitter = new MyEmitter();

// Registering an event listener for the 'greet' event

myEmitter.on('greet', () => {
console.log('Hello, there!');
});

// Emitting the 'greet' event

myEmitter.emit('greet');

// Registering an event listener with arguments

myEmitter.on('greetWithName', (name) => {
console.log(`Hello, ${name}!`);
});

// Emitting the 'greetWithName' event with an argument

myEmitter.emit('greetWithName', 'John');
```

Here's a breakdown of what's happening in the code:

1. We import the `events` module and create a custom event emitter by extending the
EventEmitter class.
2. We create an instance of our custom event emitter.
3. We register an event listener for the 'greet' event using the `on()` method. When the 'greet'
event is emitted, the callback function associated with it will be executed.
4. We emit the 'greet' event using the `emit()` method.
5. We register another event listener for the 'greetWithName' event, which takes an argument
representing the name of the person to greet.
6. We emit the 'greetWithName' event with an argument ('John' in this case), and the callback
function associated with it will be executed with the provided argument.

When you run this code, you should see the following output:

```
Hello, there!
Hello, John!
```