PURNEA COLLEGE OF ENGINEERING, PURNEA

An INTERNSHIP REPORT on
( WEB DEVELOPMENT )
UNDERTAKEN

INVIGO INFOTECH

Submitted in partial fulfillment of the requirements for the award of Degree of

BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE & ENGINEERING
( 19 May 2025 to 28 June 2025 )

Submitted by : Submitted to :
NAME :- GAUTAM KUMAR THAKUR Prof. RAJU KUMAR
( H.O.D. of CSE & AI )
Reg. No. :- 22151131022
Semester :- 5 th
Branch :- CSE(AI)
Session :- 2022 – 26

Internal Examiner : External Examiner :

INTERNSHIP CERTIFICATE
 DECLARATION

I GAUTAM KUMAR THAKUR hereby declare that I have undertaken

2 Weeks online as well as 4 Weeks offline internship training program at
“ INVIGO INFOTECH ” During a period from 19th May to 31th May, 2025
online and from 1st June to 28th june, 2025 offline in partial fulfilment for
the award of the Bachelor of Technology in Computer Science &
Engineering from Purnea college of Engineering, Purnea, by Bihar
Engineering University, Patna. The work which is being presented in the
internship report submitted to Department of Computer Science & Engineering
from Purnea College of Engineering, Purnea is an authentic record of training
work.
I also declare that neither this internship nor any part of this internship
has been submitted elsewhere for award of any degree.

Submitted by : Submitted to :
NAME :- GAUTAM KUMAR THAKUR Prof. RAJU KUMAR
Reg. No. :- 22151131022 ( H.O.D. of CSE & AI )
Semester :- 5th
Branch :- CSE(AI)
Session :- 2022 – 26

Internal Examiner : External Examiner :

 ACKNOWLEDGEMENT

I am grateful to (INVIGO INFOTECH) trainings for

giving me opportunity to carry out the project work in the
area of console-based portal designing during my
training. I would like to also thank my institute, PURNEA
COLLEGE OF ENGINEERING, PURNEA for giving
permission and necessary administrative support to take
up the training with INVIGO INFOTECH trainings.

Deepest thanks to our Trainers

(INVIGO INFOTECH) team for their guidance,
monitoring, constant encouragement and correcting
various assignments of ours with attention and
care. They have taken pain to go through the project
and training sessions and make necessary
corrections as when needed and I am very grateful
for that.

GAUTAM KUMAR THAKUR

(Reg. No: - 22151131022)
 ABSTRACT

WEB DEVELOPMENT was the main objective of this

internship. To develop a web-based application or software there are
several programming languages that are in use. Some of them are only
used for the frontend and backend design of the software. For example-
HTML3, HTML4, HTML5, CSS, etc.

There are also some other programming languages that are

used to develop the dynamic functions of the software or
application. For example-PHP, Java etc. Nowadays there are also
some framework's that use vastly. Frameworks are basically
structured programming by using Model, View, and Controller. It is
also called as MVC. If we develop web-based application that is very
useful for us because we can access it from anywhere of the world. It
is very helpful for our daily life. That is why I choose subject of my
internship is WEB DEVELOPMENT".

Working with INVIGO INFOTECH. added huge

experiences in my upcoming career. Solving real life problems was
another key issue. This report takes us through all the details of
WEB DEVELOPMENT knowledge and experience gathered during
this internship period.
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

19/05/2025 Monday Introduction to Web development

1st WEEK

20/05/2025 Tuesday Introduction to Html

21/05/2025 Wednesday Tags of HTML

22/05/2025 Thursday Use of HTML Tags

23/05/2025 Friday Introduction HTML Body

24/05/2025 Saturday HTML Attributes

DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

26/05/2025 Monday HTML Text Formatting and Semantics

27/05/2025 Tuesday Heading design

2nd WEEK

28/05/2025 Wednesday Create a Button & input tag

29/05/2025 Thursday Lists

30/05/2025 Friday HTML Project 1

DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

02/06/2025 Monday HTML Images and Media

03/06/2025 Tuesday Contact Form Design

3rd WEEK

04/06/2025 Wednesday HTML Table

05/06/2025 Thursday HTML Project 2

06/06/2025 Friday Introduction to CSS

 DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

09/06/2025 Monday Ways to Include CSS in HTML

10/06/2025 Tuesday CSS Selectors

4th WEEK

11/06/2025 Wednesday CSS Box Model

12/06/2025 Thursday Display and Positioning

13/06/2025 Friday Flexbox

DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

16/06/2025 Monday Font Family and Font Style

17/06/2025 Tuesday Padding

5th WEEK

18/06/2025 Wednesday CSS Project 1

19/06/2025 Thursday CSS Project 2

20/06/2025 Friday Introduction to JavaScript

DATE DAY NAME OF THE TOPIC / MODULE COMPLETED

23/06/2025 Monday Overview of JavaScript

24/06/2025 Tuesday Introduction of React JS

6th WEEK

25/06/2025 Wednesday Overview of React JS

27/06/2025 Friday Final Project

28/06/2025 Saturday Final Project

 Table of content

Page
Internship Certificate provided by the Institute ………... (01-03)
Declaration ..…………………………………………………. (04-04)
Acknowledgement ………………………………………….... (05-05)
Abstract ……………………………………………………….. (06-06)
Weekly report …………………………………………………. (07-08)
Table of Contents …………………………………………….. (09-09)

H L ............................. (10-19)
.................................. (20-27)
B ........................ (28-31)
Jv ....................... (31-36)
J ....................... (36-39)
....................... (40-46)
MODULE 1 :- HTML
Introduction:
HTML (HyperText Markup Language) is the standard markup language used to create web
pages. It provides the structure of a webpage, allowing you to define and organize content such
as text, images, and links. HTML is not a programming language; it's a markup language that
tells the browser how to display the content.

Objective:

• Build Web Page Structure: Create the basic framework of websites using HTML
elements.
• Enable Browser Communication: Understand how browsers display HTML
content.
• Integrate with Other Technologies: Work with CSS for styling and JavaScript for
interactivity.
• Improve SEO: Use HTML to optimize content for search engines.
• Enhance Collaboration: Communicate effectively with web development teams
and manage CMS content.
• Empower Creativity: Customize and experiment with web designs.

Basic Structure of an HTML Document :-

An HTML document is structured in a hierarchical format, starting with the <!DOCTYPE html>
declaration, which defines the document type and HTML version. Below is an example of a
basic HTML document structure:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text on my webpage.</p>

</body>

</html>

Understanding The Code:-

• <!DOCTYPE html>: Declares the document type as HTML5.

• <html>: The root element that contains all the content on the page.
• <head>: Contains meta-information about the document, such as the title, character
encoding, and links to external files (e.g., CSS).
• <title>: Sets the title of the webpage, which appears on the browser tab.
• <meta charset="UTF-8">: Specifies the character encoding for the document, ensuring
that text is displayed correctly.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures
that the webpage is responsive and scales appropriately on different devices.
• <body>: Contains the main content of the webpage that is visible to the user.

HTML Attributes:-
HTML elements can have attributes that provide additional information about the element.
Attributes are placed within the opening tag and usually come in name/value pairs like
name="value". Common attributes include:

• id: Provides a unique identifier for an element. Example: <div id="header">

• class: Assigns one or more class names to an element for styling purposes. Example: <p
class="intro">
• src: Specifies the source file for an image, video, or script. Example: <img
src="logo.png">
• href: Defines the URL of a link. Example: <a href="https://www.example.com">Visit
Example</a>
• alt: Provides alternative text for images, which is displayed if the image cannot be
loaded. Example: <img src="photo.jpg" alt="A beautiful scenery">

Text Formatting and Semantics:-

1. Headings (<h1> to <h6>):

• Used to define headings, with <h1> being the most important (usually the main title)
and <h6> the least.

• Example:

<h1>Main Heading</h1>

<h2>Subheading</h2>

2. Paragraphs (<p>):-

• Used to define a block of text as a paragraph.

• Example:

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

3. Text Formatting Tags:

• Bold (<b>): Makes text bold. Example: <b>Bold Text</b>

• Italic (<i>): Makes text italicized. Example: <i>Italic Text</i>

• Strong (<strong>): Emphasizes text with strong importance (often rendered as bold).
Example: <strong>Strong Text</strong>

• Emphasis (<em>): Emphasizes text (often rendered as italic). Example: <em>Emphasized

Text</em>

• Underline (<u>): Underlines text. Example: <u>Underlined Text</u>

4. Lists:

• Unordered List (<ul>): Creates a bulleted list.

o Example:

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

• Ordered List (<ol>): Creates a numbered list.

o Example:

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>
5. Blockquotes (<blockquote>):

• Used for quoting a section of text from another source, usually indented.

• Example:

<blockquote>

This is a quoted paragraph.

</blockquote>

6. Line Breaks (<br>) and Horizontal Lines (<hr>):

• Line Break (<br>): Inserts a line break within text, moving content to the next line.

Example: Line 1<br>Line 2

• Horizontal Line (<hr>): Creates a horizontal line, often used to separate content
sections.

Example: <hr>

HTML Links and Navigation:-

1. Creating Links (<a>):

• The <a> tag is used to create hyperlinks, which can link to other web pages, files, or
sections within the same page.

• Example:

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

2. Anchor Tags and Named Anchors:

• Anchor Tags: The <a> tag is also used for creating named anchors within a page,
allowing users to jump to a specific section.
 • Named Anchors: Assign an id attribute to an element, and then link to it using the #
symbol.

• Example:-

<a href="#section1">Go to Section 1</a>

HTML Images and Media:-

1. Inserting Images (<img>):

• The <img> tag is used to embed images into a webpage. This tag is self-closing and
requires a src attribute to specify the image source.

• Example:
<img src="image.jpg" alt="Description of the image">

2. Image Attributes:

• alt (Alternative Text): Provides a text description of the image, which is displayed if the
image fails to load and is used by screen readers for accessibility.

o Example: <img src="logo.png" alt="Company Logo">

• title: Displays additional information about the image when the user hovers over it.

o Example: <img src="logo.png" alt="Company Logo" title="Our Company Logo">

• width and height: Specify the dimensions of the image in pixels or percentage.

o Example: <img src="logo.png" alt="Company Logo" width="200" height="100">

3. Adding Videos and Audio (<video>, <audio>):

• <video>: Embeds a video player into the webpage

• Example:
 <video width="320" height="240" controls>

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

Your browser does not support the video tag.

</video>

• <audio>: Embeds an audio player into the webpage.

Example:- <audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

4. Embedding Content (<iframe>):

• The <iframe> tag is used to embed another HTML document, video, map, or any other
content from an external source into the current page.

• Example:-

<iframe src="https://www.example.com" width="600" height="400"

title="Example Site"></iframe>

HTML Tables:-
1. Creating Tables (<table>, <tr>, <td>, <th>):

• <table>: Defines the table.

• <tr>: Defines a table row.

• <td>: Defines a table data cell.

• <th>: Defines a table header cell, usually bold and centered.

• Example:
<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

</tr>

</table>

2. Table Headers (<thead>, <tbody>, <tfoot>):

• <thead>: Groups the header content.

• <tbody>: Groups the body content.

• <tfoot>: Groups the footer content, typically for summary or totals.

3. Spanning Rows and Columns (rowspan, colspan):

• rowspan: Allows a cell to span multiple rows.

o Example: <td rowspan="2">Spans 2 Rows</td>

• colspan: Allows a cell to span multiple columns.

Example: <td colspan="2">Spans 2 Columns</td>

GAUTAM KUMAR THAKUR
Reg.No: 22151131022
HTML Forms
1. Form Elements (<form>, <input>, <textarea>, <select>, <button>):

• <form>: Defines the form and its submission method.

• <input>: Used for various types of user input fields.

• <textarea>: Defines a multi-line text input area.

• <select>: Creates a drop-down list.

• <button>: Defines a clickable button.

Project:-

GAUTAM KUMAR THAKUR

Reg.No: 22151131022

2. Input Types (text, password, email, number, etc.):

• text: Single-line text input. Example: <input type="text">

• password: Hidden characters for passwords. Example: <input type="password">

 • email: Validates email addresses. Example: <input type="email">

• number: Numeric input with optional min/max values. Example: <input type="number"
min="1" max="10">

3. Labels and Fieldsets (<label>, <fieldset>):

• <label>: Associates a label with a form element for better accessibility.

o Example: <label for="name">Name:</label> <input type="text" id="name"

name="name">

• <fieldset>: Groups related form elements, often with a legend.

MODULE 2:- C.S.S

Introduction:-
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML or XML (including various XML languages like SVG or XHTML). CSS
controls the layout, colors, fonts, and overall visual design of web pages. Here’s an introduction
to CSS.

What is CSS?

CSS stands for Cascading Style Sheets. It allows web developers to separate content from
design, making it easier to manage and maintain the look and feel of a website.

Key Features of CSS:

1. Separation of Concerns: CSS separates the content of the webpage (HTML) from its
presentation, making it easier to update the design without changing the content.

2. Consistency: By using CSS, you can ensure that the styling is consistent across multiple
pages of a website.
 3. Responsive Design: CSS supports responsive design techniques, allowing web pages to
adapt to different screen sizes and devices.

4. Flexibility: CSS provides a wide range of properties and values to control the
appearance of web elements, from colors and fonts to complex layouts.

Basic CSS Syntax:

CSS syntax consists of selectors and declarations. Here’s a basic structure:

selector {

property: value;

property: value;

• Selector: Targets the HTML element(s) you want to style.

• Property: Specifies the style attribute you want to change (e.g., color, font-size).

• Value: Defines the value for the property (e.g., red, 16px).

Ways to Include CSS in HTML:-

• Inline CSS: Directly within an HTML element using the style attribute
• Internal CSS: Inside the <style> element in the HTML <head>.
• External CSS: In a separate .css file linked to the HTML document using the <link>
element.
1. CSS Selectors:
Selectors are patterns used to select the HTML elements you want to style. Some common
selectors include:

• Element Selector: Selects elements by their tag name (e.g., p, div).

• Class Selector: Selects elements by their class attribute (e.g., .classname).
• ID Selector: Selects a unique element by its id attribute (e.g., #idname).
 • Attribute Selector: Selects elements based on an attribute or its value (e.g.,
[type="text"]).
• Pseudo-class Selector: Selects elements in a specific state (e.g., :hover, :first-child).

2. CSS Box Model:

The CSS box model describes the rectangular boxes generated for elements in the document
tree. Each box consists of:

• Content: The actual content of the box (e.g., text, images).

• Padding: Space between the content and the border.
• Border: A border surrounding the padding (if any).
• Margin: Space outside the border, creating distance between the element and other
elements.

3. Display and Positioning

Display:

The display property specifies how an element is displayed on the web page. It affects the
layout and visibility of elements. Common values include:

• block: The element takes up the full width available and starts on a new line (e.g., <div>,
<p>). Block elements can have width and height properties.
• inline: The element only takes up as much width as necessary and does not start on a
new line (e.g., <span>, <a>). Inline elements do not accept width and height properties.
• flex: The element is a flex container, allowing the use of Flexbox layout techniques.
Flexbox enables complex layouts with flexible items.
• grid: The element is a grid container, enabling the use of Grid Layout techniques. Grid
Layout allows for creating complex grid-based designs.

Position:

The position property defines how an element is positioned in the document. Common values
include:

• static: The default positioning. Elements are positioned according to the normal flow of
the document. top, right, bottom, and left properties have no effect.
• relative: The element is positioned relative to its normal position. You can use top, right,
bottom, and left to adjust its position.
 • absolute: The element is positioned relative to the nearest positioned ancestor (i.e., an
ancestor with a position other than static). If no such ancestor exists, it is positioned
relative to the initial containing block.
• fixed: The element is positioned relative to the viewport. It remains in place even when
the page is scrolled.
• sticky: The element toggles between relative and fixed positioning depending on the
user's scroll position. It is positioned relative to its nearest scrolling ancestor and
becomes fixed when it reaches a defined position.

Float and Clear:

• float: Moves an element to the left or right, allowing other content to flow around it.
Common values are left, right, and none. It is often used for wrapping text around
images.
• clear: Controls the behavior of elements that follow a floated element. Common values
are left, right, both, and none. It specifies whether an element should move below
floated elements.

z-index:

• z-index: Specifies the stack order of positioned elements (elements with a position value
other than static). Higher values are stacked on top of lower values. This property is
used to control the overlapping of elements.

4.Flexbox
Flex Container Properties:

• display: flex;: Defines the container as a flex container, enabling flexbox layout for its
children.
• flex-direction: Determines the direction of the flex items inside the container. Common
values are:
o row: Items are arranged in a row (default).
o column: Items are arranged in a column.
o row-reverse: Items are arranged in a row, but in reverse order.
o column-reverse: Items are arranged in a column, but in reverse order.
• justify-content: Aligns flex items along the main axis (the direction defined by flex-
direction). Common values are:
o flex-start: Aligns items to the start of the container.
o center: Centers items.
o space-between: Distributes items with space between them.
 o space-around: Distributes items with space around them.
o space-evenly: Distributes items with equal space between and around them.

Flex Item Properties:

• align-self: Overrides the align-items property for a specific flex item. It allows the item
to be aligned differently along the cross axis (perpendicular to the main axis). Common
values are auto, flex-start, flex-end, center, baseline, and stretch.
• flex-grow: Defines the ability of a flex item to grow relative to the other flex items inside
the flex container. A value of 1 means the item will grow to fill available space. A value
of 0 means it will not grow.
• flex-shrink: Defines the ability of a flex item to shrink relative to the other flex items
inside the flex container. A value of 1 means the item will shrink if necessary. A value of
0 means it will not shrink.

These properties provide powerful tools for creating responsive and complex layouts with
Flexbox.

5. Grid Layout
Grid Container Properties:

• display: grid;: Defines the element as a grid container, enabling the use of grid layout
properties for its children.
• grid-template-columns: Specifies the number and size of columns in the grid container.
You can use values like pixels, percentages, or fr (fractional units) to define column sizes.
Example:

grid-template-columns: 100px 200px 1fr;

This defines a grid with three columns: 100px, 200px, and the remaining space.

• grid-template-rows: Specifies the number and size of rows in the grid container.
Example:

grid-template-rows: 50px auto 200px;

This defines a grid with three rows: 50px, auto height, and 200px.
 font-display: swap;

6. Colors and Backgrounds

Color Properties:

• color: Sets the color of the text. Example:

color: #333;

• background-color: Sets the background color of an element. Example:

background-color: lightblue;

Gradients:

• linear-gradient: Creates a gradient that transitions between colors in a straight line.

Example:

background: linear-gradient(to right, red, yellow);

• radial-gradient: Creates a gradient that transitions from the center outward in a circular
or elliptical shape. Example:

background: radial-gradient(circle, red, yellow);

Background Images:

• background-image: Sets an image as the background of an element. Example:

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

Opacity:

• opacity: Sets the transparency level of an element. Values range from 0 (completely
transparent) to 1 (completely opaque). Example:

opacity: 0.5;
7. Animations and Transitions
CSS Transitions:

• transition-property: Specifies the CSS property to which the transition effect is applied.
Example:

transition-property: background-color;

• transition-duration: Defines the duration of the transition. Example:

transition-duration: 0.5s;

CSS Animations:

• @keyframes: Defines the sequence of frames in an animation. Example:

@keyframes slide {

from { transform: translateX(-100%); }

to { transform: translateX(0); }

• animation-name: Specifies the name of the @keyframes animation.

• Example:

animation-name: slide;

• animation-duration: Defines the length of time for the animation to complete. Example:

animation-duration: 2s;

Transformations:

• rotate: Rotates an element. Example:

transform: rotate(45deg);

• scale: Scales an element. Example:

 transform: scale(1.5);

• translate: Moves an element from its original position. Example:

transform: translateX(50px);

8. Responsive Design
Media Queries:

• @media: Applies styles based on the characteristics of the device, such as screen width.
Example:

@media (max-width: 600px) {

body {

background-color: lightgrey;

}}

Responsive Units:

• em: Relative to the font-size of the element (or the parent element if used on font-size).
• rem: Relative to the root element’s font-size.
• vw: Relative to the viewport width (1% of viewport width).
• vh: Relative to the viewport height (1% of viewport height).

Flexible Layouts:

• flex: Use Flexbox for creating flexible and responsive layouts.

• grid: Use CSS Grid Layout for creating complex grid-based layouts.
MODULE 3 :- BOOTSTRAP
Introduction:-
• Bootstrap is a free front-end framework for faster and easier web development

• Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins

• Bootstrap also gives you the ability to easily create responsive designs

Why Use Bootstrap?

Advantages of Bootstrap:

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap

• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and

desktops

• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework

• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,

Firefox, Internet Explorer, Edge, Safari, and Opera)

Installation Methods
You can include Bootstrap in your project using various methods:

1. CDN (Content Delivery Network):

This is the simplest method and doesn’t require you to download any files.

You include Bootstrap directly from a CDN in your HTML file.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
2.npm (Node Package Manager):

If you are using a build system or package manager like npm, you can install Bootstrap via npm.
This method is suitable for projects that use a build tool like Webpack or Gulp.

Installation Command:

npm install bootstrap

1. Grid System:-
• .container:

o A responsive fixed-width container. It has max-widths set at various breakpoints

(e.g., 576px, 768px, 992px, 1200px). It centers the content and adds padding.

• .container-fluid:

o A full-width container that spans the entire width of the viewport. It does not
have fixed max-widths and adjusts fluidly.

• .row:

o A wrapper for columns. It uses negative margins to align columns with the grid
system.

• .col, .col-{breakpoint}-{number}:

o Columns inside a row. Columns automatically resize based on the number

specified (e.g., .col-md-6 for 6 columns out of 12 on medium and larger screens).

• .col-{breakpoint}-{size}:

o Defines column width for different breakpoints. For example, .col-lg-4 makes the
column span 4 of the 12 columns on large screens.
2. Typography:-
• Headings (.display-{1-4}, .h1, .h2, etc.):

o Predefined classes for headings of different sizes and importance. .display-1 to

.display-4 provide larger headings.

• Text Alignment (.text-left, .text-center, .text-right):

o Aligns text within its container. .text-center centers the text, while .text-left and
.text-right align text to the respective sides.

• Text Color (.text-primary, .text-secondary, .text-success):

o Changes text color based on predefined color classes.

• Text Utilities (.font-weight-bold, .font-italic, .text-nowrap):

o Applies font weight, italicizes text, or prevents text from wrapping.

3. Colors:-
• Background Colors (.bg-primary, .bg-secondary, .bg-success):

o Sets the background color of an element based on predefined color classes.

• Custom Colors and Themes:

o You can customize Bootstrap’s default color palette by overriding Sass variables
or adding custom CSS.

4. Forms:-
• Form Controls (.form-control):

o Styles input fields, textareas, and selects with a consistent appearance.

• Form Groups (.form-group):

o Groups related form controls together with margin and padding adjustments.
MODULE 4 :- JAVASCRIPT
1.Introduction to JavaScript:
JavaScript is a high-level, interpreted programming language primarily used to create
interactive and dynamic content on the web. It enables developers to manipulate the DOM
(Document Object Model), handle events, and perform asynchronous operations, making it
essential for modern web development. JavaScript can run in the browser, providing a seamless
user experience, or on the server side using platforms like Node.js.

JavaScript in the Browser vs. Node.js:

• In the Browser:

o JavaScript is embedded in web pages and executed by the browser's JavaScript

engine (e.g., V8 in Chrome, SpiderMonkey in Firefox).

o It allows for DOM manipulation, event handling, and communication with web
servers via AJAX or Fetch API.

o Typical uses include validating form inputs, creating interactive UI elements, and
making asynchronous network requests.

• Node.js:

o Node.js is a runtime environment that allows JavaScript to be used on the server

side. It uses the V8 JavaScript engine and provides additional modules and APIs
for server-side functionality.

o It’s commonly used for building web servers, handling file operations, and
performing backend tasks.

o Node.js features an event-driven, non-blocking I/O model, making it efficient for

handling multiple connections simultaneously.

Setting Up Your Development Environment:

 1. Text Editor or IDE:

o Visual Studio Code (VSCode): Popular and feature-rich, with extensions for
JavaScript development

o Sublime Text: Lightweight and fast with a clean interface.

o Atom: Customizable and open-source, suitable for various programming

languages.

2. Web Browser:

o Ensure you have a modern web browser (e.g., Google Chrome, Mozilla Firefox)
with developer tools for debugging and testing JavaScript code.

3. Node.js (Optional for Server-side Development):

o Download and install Node.js from the official website. This will also install npm,
the Node.js package manager, which is useful for managing project
dependencies.

4. Setting Up a Basic Project:

o Create a project directory.

o Inside the directory, create an index.html file for HTML content and a script.js file
for JavaScript code.

o Link the JavaScript file in your HTML using:

<script src="script.js"></script>

With this setup, you’re ready to start writing and testing JavaScript code in your chosen
environment.

2.Basics Of Javascript:-
Variables:

• var: Function-scoped, allows re-assignment.

 var x = 10;

• let: Block-scoped, allows re-assignment.

let y = 20;

• const: Block-scoped, cannot be re-assigned.

const z = 30;

Data Types:

• Primitive Types:

o String: Represents text.

let str = "Hello";

o Number: Represents numeric values.

let num = 42;

o Boolean: Represents true or false.

let isTrue = true;

o Undefined: A variable without an assigned value.

let undef;

o Null: Represents no value or an empty value.

let empty = null;

o Symbol: Unique identifiers.

let sym = Symbol('id');

• Object Types:

o Objects: Collections of key-value pairs.

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

o Arrays: Ordered lists of values.

let arr = [1, 2, 3];

o Functions: Blocks of code designed to perform tasks.

function greet(name) {

return `Hello, ${name}`;

Operators:

• Arithmetic Operators: Perform mathematical operations.

o +, -, *, /, %

let sum = 5 + 3; // 8

• Comparison Operators: Compare values.

o ==, ===, !=, !==, >, <, >=, <=

let isEqual = (5 === 5); // true

• Logical Operators: Combine boolean values.

o && (AND), || (OR), ! (NOT)

let result = (true && false); // false

• Assignment Operators: Assign values to variables.

o =, +=, -=, *=, /=

4.Control Structures:-
Conditional Statements:

• if: Executes a block of code if a condition is true.

 if (condition) {

// code to execute

• else if: Provides an additional condition to test if the if condition is false.

if (condition1) {

// code if condition1 is true

} else if (condition2) {

// code if condition2 is true

• else: Executes a block of code if none of the preceding conditions are true.

if (condition) {

// code if condition is true

} else {

// code if condition is false

Loops:

• for Loop: Repeats code a specified number of times.

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

// code to execute

• while Loop: Repeats code while a condition remains true.

MODULE 6 :- REACT JS
1. Introduction:
Provide a brief introduction to React.js, including its history, the problem it aims to solve, and
its significance in modern web development.

Example: React.js is a popular JavaScript library developed by Facebook for building user
interfaces, particularly single-page applications where a responsive and dynamic experience is
essential. Introduced in 2013, React has revolutionized how developers build and manage
complex UIs by emphasizing component-based architecture.

2. Overview of React.js:

Discuss the fundamental aspects of React.js.

• History and Evolution: Trace the development of React from its inception to the
present.

• Key Contributors: Mention significant figures and organizations behind React.js.

• Comparison with Other Libraries/Frameworks: Briefly compare React with other

popular libraries/frameworks like Angular and Vue.js.

3.How to Install React:

Explain the installation process for setting up a React project.

Using Create React App:

Create React App is a tool that sets up a new React project with a sensible default
configuration. To install React using Create React App, follow these steps:

Install Node.js and npm:

o Before setting up React, ensure you have Node.js and npm installed on your
system. You can download them from the official Node.js website.
 Install Create React App Globally: Open your terminal or command prompt and run:

npx create-react-app my-app

This command creates a new directory called my-app with a React boilerplate.

Navigate to Your Project Directory:

cd my-app

Start the Development Server:

npm start

4.Core Features
• Component-Based Architecture:

o React's component-based structure allows developers to build encapsulated

components that manage their own state and can be composed to create
complex UIs. For example, a Button component can be used in various parts of
an application, each with different styles or functionalities.

o Example: Functional components are simple functions returning JSX, while class
components provide more features like lifecycle methods. Both can be used to
create reusable UI elements.

• Virtual DOM:

o The Virtual DOM is a lightweight in-memory representation of the real DOM.

React uses it to optimize updates by calculating the difference between the
current and previous states and only applying necessary changes to the real
DOM.

o Benefit: This approach reduces the number of direct manipulations of the real
DOM, leading to improved performance and faster rendering of updates.
MODULE 6:- FINAL PROJECT
An e-commerce project typically involves creating an online platform where users can browse,
select, and purchase products or services. Here’s a high-level overview of what an e-commerce
project entails:

1. Project Overview:-

• Purpose: To build an online store that allows users to browse products, add them to a
cart, and complete purchases.

• Target Users: Consumers looking to buy products online, and administrators managing
the store.

2. Key Components:-

• The user interface of the online store, including product pages, cart, checkout, and user
accounts.

• Pages: Home, Product Listing, Product Details, Cart, Checkout, User Login/Signup, User
Profile.
• Features: Responsive design, search functionality, product filters, shopping cart
management.

3.Implementaion Of Project:-
1. Set Up Environment: Install necessary tools and frameworks (e.g., React for frontend,
Node.js ) and configure the development environment.

2. Design UI/UX: Create responsive and intuitive user interfaces for product listings, cart,
checkout, and user accounts using HTML, CSS, and JavaScript.
Explanation:-

• Imports: The code imports various components and pages, including navigation,
routing, and context providers.

• App Component: The main component of the application.

o Context Provider: ShopContextProvider wraps the application, providing a

context for managing shop-related state.

o Router Setup: BrowserRouter manages routing, and Routes defines the different
routes for the application.

o Routes:

▪ / renders the Shop page.

▪ /men, /women, /kids render ShopCategory with different banners.

▪ /product/:productId renders the Product page with a specific product ID.

▪ /cart renders the Cart page.

▪ /wishlist renders the Wishlist page.

 ▪ /login and /signin render Login and Signup pages, respectively.

o Footer: The Footer component is displayed at the bottom of the page.

The App component sets up the main structure and routing for the application, ensuring that
different pages and components are displayed based on the URL.
Here’s Glimpse Of My Project :-
Header:-

Footer:-
Product Section:-

Cart:-
SignUp Page:-
 Reason For Choosing Web Devlopment
Choosing web development can be driven by several reasons:

1. Creativity and Innovation: Web development allows you to build creative and innovative
web applications, combining design and functionality to deliver engaging user
experiences.

2. High Demand and Career Opportunities: The demand for skilled web developers is
continuously growing, offering numerous job opportunities and career growth in various
industries.

3. Versatility: Web development covers a wide range of technologies and skills, from front-
end design to back-end programming, making it a versatile field that allows you to
specialize in various areas.

4. Remote Work Flexibility: Web development is a field that often allows for remote work,
providing flexibility in where and how you work.

5. Constant Learning: The field is ever-evolving with new tools, frameworks, and best
practices, offering continuous learning opportunities and keeping the work interesting.
 FUTURE SCOPE OF WEB DEVLOPMENT
The future scope of web development is vast and promising, with several key trends and
advancements shaping the industry:

1. Progressive Web Apps (PWAs): PWAs offer a native app-like experience on the web,
and their popularity is expected to rise as businesses seek to deliver fast, reliable, and
engaging user experiences across devices.

2. AI and Machine Learning Integration: Web development will increasingly incorporate AI

and machine learning to create smarter, more personalized user experiences, such as
chatbots, recommendation engines, and predictive analytics.

3. Voice Search Optimization: With the growing use of voice-activated assistants like Siri,
Alexa, and Google Assistant, optimizing websites for voice search will become crucial,
impacting how content is structured and delivered.

4. Cybersecurity: As cyber threats become more sophisticated, there will be a greater

emphasis on building secure web applications. Developers will need to focus on data
protection, encryption, and secure coding practices.

5. Web 3.0 and Decentralized Applications: The evolution of the web towards Web 3.0,
with a focus on decentralization, blockchain technology, and distributed applications
(dApps), will open new opportunities and require developers to learn new technologies.

6. Increased Demand for Web Accessibility: Ensuring that websites are accessible to all
users, including those with disabilities, will continue to be a priority, driven by both legal
requirements and the goal of creating inclusive digital experiences.

7. 5G and Faster Internet Speeds: The rollout of 5G will enable faster load times and richer
web experiences, pushing developers to create more complex, interactive, and data-
heavy applications without compromising performance.

These trends suggest that web development will continue to be a dynamic and evolving field
with a strong demand for skilled professionals who can adapt to new technologies and trends.