TITLE

A Short Term Training Report

Submitted to
Mewar University, Chittorgarh
Towards the partial fulfillment of
The degree of
Bachelor of Technology
In
Computer Science & Engineering

Session: 2024-2025

Guided By:To:
Submitted Submitted By:
Mr. B.L. Pal Ayush Kumar Shukla
Post COURSE: B.Tech
HOD MUR2201537
Computer Science & Engineering

Guided By:
Ms. Smruti
IT Trainer
CTTC Bhubaneshwar

Faculty of Engineering & Technology

Department of Computer Science & Engineering
Mewar University
Chittorgarh (Raj.)

1
 Acknowledgment
I would like to express my sincere gratitude to all those who contributed to the
successful completion of this training report. My deepest thanks go to Ms. Smruti for
their invaluable guidance, support, and expertise throughout the training period. Their
insightful feedback and encouragement greatly enhanced my learning experience.

I am also grateful to Mewar University for providing the opportunity and resources
necessary for this training. The practical knowledge and skills acquired have been
instrumental in my professional development. Special thanks to my colleagues and peers
for their collaborative spirit and assistance, which made the training environment both
productive and enjoyable.

Additionally, I appreciate the support from my HOD Mr. B.L. Pal , who have been a
constant source of motivation and encouragement. Their understanding and patience
during this time were greatly appreciated.

Thank you all for your unwavering support and contributions. This report would not
have been possible without each of you.

Sincerely,

Name :- Ayush Kumar Shukla Date: 28/08/2024

Enr. No. :-MUR2201537

2
 MEWAR UNIVERSITY
CHITTORGARH, RAJASTHAN
Department of Computer Science & Engineering

ABSTRACT

Web design plays a crucial role in today's digital landscape. A well-designed

website creates a lasting first impression, providing a seamless user experience.
Interactive and visually appealing design elements boost user engagement.
This report summarizes the key takeaways and outcomes of our web design
training program, which equipped us with the skills to create visually appealing,
user-cantered, and functional websites. The training covered HTML, CSS, Java
Script, responsive design, and industry best practices, resulting in improved
knowledge, skills, and portfolio projects.

This training covers the fundamentals of visual design, user experience (UX), and
front-end development. Learn to craft engaging online experiences using HTML,
CSS, Java Script, and industry-leading tools.

This report also includes a project aimed to design an efficient e-kart website that
streamlines cosmetic shopping experience for male customers. Using a user-
cantered design approach and HTML/CSS/JavaScript technologies, a responsive
and interactive website was developed by my group which has 8 members
including me. Key features include a intuitive product categorization, and
seamless user-experience. The website offers benefits such as easy product
discovery, personalized product recommendations, and seamless checkout
process.

The training report concludes by highlighting the training's effectiveness, my

learnings, and web design capabilities of how to design accessible, and responsive
websites that captivate audiences. This training equipped us with the expertise to
bring your web design vision to life.

3
In the present scenario of industrialization; particularly in the engineering field, requirements of
specialized tools, dies, jigs, fixtures, moulds, gauges and other precision components are
indispensable. Simultaneously demand for quality Tool makers, Tool & Product Designers,
Skilled manufacturers, PLC & Industrial Automation engineers and Maintenance Engineers is
also growing rapidly. Central Tool Room & Training Centre (CTTC), Bhubaneswar is one of
such training, production, design and consultancy Centre established in technical cooperation
program between Govt. of India & Govt. of Denmark to meet the above requirements. The
excellent infrastructural facilities like land, building etc. have been contributed by Govt. of
Orissa. Training activities started in 1991 and Tool production in 1995.

CTTC is unique in imparting industry oriented long- & short-term training programs on
CAD/CAM, Tool Design & Manufacturing, Tool & Die Making, CNC Programming &
Machining, Machine Maintenance, CCNA, Industrial Automation, VLSI, Hardware &
Networking Management, ITI (Machinist/Welder) etc. CTTC believes in PRACTICE MAKES
PERFECT.

Vision

To become Internationally Acclaimed Centre of Excellence in the area of Design, Development

& Manufacturing of Quality Tools & Components, Project Consultancy & Skill Development.

Mission

Promote Growth & Development of Micro, Small & Medium Enterprises through
Technological & Skilled Manpower Support.

Guided By:
Mrs. Ritu Maity
Course Co-ordinator
MSME TOOL ROOM, Bhuvneshwar

4
5
6
 TABLE OF CONTENTS

Chapter 1

Introduction...........................................................................................................................9

1.1 Web
Designing…………………………………………………………………………………………
……………………….9

1.2 Some related

terms………………………………………………………………………………………………
…………….9

HTML................................................................................................................................9-15

1.3 HTML Introduction...........................................................................................................9

1.4 HTML Documents.......................................................................................................9-10

1.5 HTML Elements..............................................................................................................10

1.6 HTML Attributes.............................................................................................................11

1.7 HTML Lists................................................................................................................11-13

1.8 HTML Table...............................................................................................................13-14

1.9 HTML Forms...................................................................................................................14

1.10 HTML Tags...................................................................................................................15

Chapter 2

CSS...................................................................................................................................15-20

2.1 CSS Introduction..............................................................................................................15

2.2 CSS Selectors....................................................................................................................16

2.3 CSS Opacity......................................................................................................................17

2.4 CSS Backgrounds........................................................................................................17-18

7
2.5 CSS Borders......................................................................................................................18

2.6 CSS Margin and Padding.............................................................................................19-20

Chapter 3

Java Script...........................................................................................................................20-31

3.1 Java Script Introduction.....................................................................................................20

3.2 Java Script Variables.........................................................................................................21

3.3 Java Script Operators............................................................................................................... 21-24

3.4 Java Script Data Types.............................................................................................................24-25

3.5 Java Script Conditional Statements.................................................................................25-27

3.6 Java Script Loops.............................................................................................................27-29

3.7 Java Script Functions........................................................................................................30

3.8 Java Script Events.............................................................................................................31

3.9 Java Script Verification & Validations.............................................................................31

Chapter 4

Project Report................................................................................................................32-38

4.1 Introduction...............................................................................................................32

4.2 Project Aim & Objective............................................................................................32

4.3 Requirement Analysis....................................................................................................32-33

4.4 Coding & Testing….......................................................................................................33-34

4.5 Result & Discussion…...................................................................................................34-38

Chapter 5

8
5.1 References…...................................................................................................................38

9
 Chapter 1
Introduction

1.1 Web Designing:

Web design involves creating the visual layout of a website, focusing on user
experience, graphics, and overall look. Front-end development, on the other hand,
involves implementing the design into a functional website using coding languages
like HTML, CSS, and JavaScript.

1.2 Some related terms:

HTTP- It is used to load webpages using hypertext links.

WWW- WWW stands for World Wide Web, which is an information system that
allows users to share content over the internet. It’s also known as the web or W3.

Web Page- A web page (or webpage) is a document on the Web that is accessed in a
web browser.

Website- The collection of webpages is called website.

Server- It is a computer program or device that provides a service to another computer

program and its user

HTML

1.3 Introduction

HTML stands for Hyper Text Markup Language. HTML is the standard markup
language for Web pages. It describes the structure of a Web page. Consists of a series
of elements. HTML elements tell the browser how to display the content.

1.4 HTML Documents

All HTML documents must start with a document type declaration:

10
<!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

1.5 HTML Elements

An HTML Element is a collection of start and end tags with the content inserted
between them. HTML elements are building blocks of web pages, representing
different types of content such as headings, paragraphs, links, and images.

<tagname > Contents... </tagname>

11
1.6 HTML Attributes

HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element. Each element or tag can
have attributes, which defines the behaviour of that element. The Attribute should
always be applied with its name and value pair.

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style=”height: 50px; color: blue”>It will add style property in element</p>
<p style=”color: red”>It will change the color of content</p>
</body>
</html>

1.7 HTML List

An HTML list is a record of related information used to display the data or any
information on web pages in the ordered or unordered form.
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
</ul>

12
 <h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li
</ol>
</body>
</html>
Ordered List Type Attribute with Value

Type Descriptions

This will list the items with

type=”1″
numbers (default)

This will list the items in

type=”A”
uppercase letters.

This will list the items in

Type=”a”
lowercase letters.

This will list the items with

Type=”I”
uppercase Roman numbers.

This will list the items with

Type=”i”
lowercase Roman numbers.

Unordered Lists Style Types

13
Values Descriptions

This value sets the list marker to a bullet

disc
(default).

This value sets the list marker to a

Circle
circle.

This value sets the list marker to a

Square
square.

None This value unmarks the list of items.

1.8 HTML Table

HTML tables allow web developers to arrange data into rows and columns.
A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds_Futterkiste</td>
<td>Maria_Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro_comercial_Moctezuma</td>
<td>Francisco_Chang</td>
<td>Mexico</td>
</tr>
</table>

th stands for table header.

14
Tr stands for table row.

Td stands for table data.

1.9 HTML Forms

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.The HTML
form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc.
<body>
<form>
Enter your name <br>
<input type=”text” name=”username”>
</form>
</body>

Tag Description

<form> It defines an HTML form to enter inputs by the used side

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

15
1.10 HTML Tags

Tag Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<audio> Defines embedded sound content

<b> Defines bold text

<body> Defines the document’s body

<br> Defines a single line break

<button> Defines a clickable button

<col> Specifies column properties for each column within a

<colgroup> element

<i> Defines a part of text in an alternate voice or mood

<img> Defines an image

<input> Defines an input control

Chapter 2

CSS

2.1 Introduction

CSS (Cascading Style Sheets) is a language designed to simplify the process of

making web pages presentable. It allows you to apply styles to HTML documents,
describing how a webpage should look by prescribing colors, fonts, spacing, and
positioning. CSS provides developers and designers with powerful control over the
presentation of HTML elements.

16
2.2 CSS Selectors

The selector points to the HTML element where the CSS style is to be applied. The
CSS property is separated by semicolons. It is a combination of the selector name
followed by the property: value pair that is defined for the specific selector. let us see
the syntax and how we can use the CSS to modernize the website.

Element Selector Selects HTML elements based on their

tag names.

Id Selector Targets an HTML element with a

specific id attribute.

Class Selector Selects elements with a particular class

attribute.

Universal Selector Selects all elements on the page.

Group Selector
Selects all elements on the page.

17
2.3 CSS Opacity

The opacity in CSS is the property of an element that describes the transparency of
the element. It is the opposite of transparency & represents the degree to which the
content will be hidden behind an element.

The opacity property is used in the image to describe the transparency of the image.
The value of opacity lies between 0.0 to 1.0 where a low value represents high
transparency and a high value represents low transparency. The percentage of opacity
is calculated as Opacity% = Opacity * 100.

<style>
.forest {
opacity: 0.5;
}
</style>

2.4 CSS Background

The CSS background property is a shorthand for setting multiple background

properties in one declaration, including background color, image, position, size,
repeat, origin, clip, and attachment. This property is essential for customizing the
visual appearance of elements.

Background
Property Description

CSS Background- The background-color property in CSS is used to specify

color Property the background color of an element.

CSS Background- The background-image property is used to set one or more

image Property background images to an element.

CSS Background- The background-repeat property in CSS is used to repeat

repeat Property the background image both horizontally and vertically.

The background-attachment property in CSS is used to

CSS Background- specify the kind of attachment of the background image
attachment Property with respect to its container.

18
Background
Property Description

CSS Background- In CSS body-position property is mainly used to set an

position Property image at a certain position.

CSS Background- The background-origin is a property defined in CSS which

origin Property helps in adjusting the background image of the webpage.

The background-clip property in CSS is used to define how

CSS Background-clip to extend the background (color or image) within an
Property element.

2.5 CSS Border

A CSS border is a line that surrounds an HTML element, providing a visual

separation between the element and its surroundings. Borders can be styled in various
ways, including adjusting their width, color, and style. The basic properties used to
define borders in CSS are border-width, border-style, and border-color.

element {
border: 1px solid black;
}

Property Description

border-style Determines the type of border (e.g., solid, dashed, dotted).

border-width Sets the width of the border (in pixels, points, or other units).

border-color Specifies the border color.

border-radius Creates rounded corners for elements.

19
2.6 Margin and Padding

Margins, as defined by the CSS margin property, create spaces around an element,
setting it apart from neighbouring elements.

Margin Properties

margin-top: Sets the top margin of an element.

margin-right: Sets the right margin of an element.

margin-bottom: Specifies the margin at the bottom of an element.

margin-left: Determines the width of the margin on the left side of an element.

margin: 40px 100px 120px 80px;

CSS Padding

An element's padding is the space between its content and its border.
The padding property is a shorthand property for:
 padding-top
 padding-right
 padding-bottom
 padding-left
If the padding property has four values:
 padding:10px 5px 15px 20px;
o top padding is 10px

20
 o right padding is 5px
o bottom padding is 15px
o left padding is 20px
If the padding property has three values:
 padding:10px 5px 15px;
o top padding is 10px
o right and left padding are 5px
o bottom padding is 15px
If the padding property has two values:
 padding:10px 5px;
o top and bottom padding are 10px
o right and left padding are 5px
If the padding property has one value:
 padding:10px;
o all four paddings are 10px

Chapter 3

Javascript

3.1 Introduction

JavaScript is a cross-platform, object-oriented scripting language used to make

webpages interactive (e.g., having complex animations, clickable buttons, popup
menus, etc.).
There are also more advanced server side versions of JavaScript such as Node.js,
which allow you to add more functionality to a website than downloading files (such
as realtime collaboration between multiple computers).

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello
JavaScript";

JavaScript Can Change HTML Styles (CSS)

document.getElementById("demo").style.fontSize = "35px";

JavaScript Can Hide HTML Elements

document.getElementById("demo").style.display = "none";

21
JavaScript Can Show HTML Elements
document.getElementById("demo").style.display = "block";

3.2 Javascript Variables

Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

 Automatically
 Using var
 Using let
 Using const

Automatically

x = 5;
y = 6;
z = x + y;

Using var

var x = 5;
var y = 6;
var z = x + y;

Using let

let x = 5;
let y = 6;
let z = x + y;

Using const

const x = 5;
const y = 6;
const z = x + y;

3.3 Javascript Operators

JavaScript operators are symbols that are used to perform operations on operands.

22
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Arithmetic Operators

Operato Description Example

r

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus 20%10 = 0
(Remainder)

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

JavaScript Comparison Operators

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

23
 >= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Logical Operators

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-else.

, Comma Operator allows multiple expressions to be evaluated as single statement.

24
 delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

3.4 Javascript Data type

JavaScript has 8 Datatypes

String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object

The Object Datatype

The object data type can contain both built-in objects, and user
defined objects:

Built-in object types can be:

objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and

more.

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";

25
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

3.5 Javascript Conditional Statements

JavaScript conditional statements allow you to execute specific blocks of code based
on conditions. If the condition is met, a particular block of code will run; otherwise,
another block of code will execute based on the condition.

Conditional
Statement Description

if statement Executes a block of code if a specified condition is true.

Executes a block of code if the same condition of the

else statement
preceding if statement is false.

Adds more conditions to the if statement, allowing for

else if statement
multiple alternative conditions to be tested.

Evaluates an expression, then executes the case statement that

switch statement
matches the expression’s value.

Provides a concise way to write if-else statements in a single

ternary operator
line.

Nested if else Allows for multiple conditions to be checked in a hierarchical

statement manner.

26
1. Using if Statement

if ( condition ) {
// If the condition is met,
//code will get executed.
}

2. Using if-else Statement

if (condition1) {
// Executes when condition1 is true
if (condition2) {
// Executes when condition2 is true
}
}

3. else if Statement

if (1st condition) {
// Code for 1st condition
} else if (2nd condition) {
// ode for 2nd condition
} else if (3rd condition) {
// Code for 3rd condition
} else {
// ode that will execute if all
// above conditions are false
}

4. Using Switch Statement (JavaScript Switch Case)

switch (expression) {
case value1:
statement1;
break;
case value2:
statement2;
break;
. . .
case valueN:

27
 statementN;
break;
default:
statementDefault;
};

5. Nested if…else

if (condition1) {
// Code block 1
if (condition2) {
// Code block 2
} else {
// Code block 3
}
} else {
// Code block 4
}

3.6 Javascript Loop

For Loop in JavaScript

A for loop in JavaScript repeatedly executes a block of code as long as a specified

condition is true. It includes initialization, condition checking, and iteration steps,
making it efficient for controlled, repetitive tasks.

JavaScript While Loop

The while loop executes a block of code as long as a specified condition is true.

28
while (condition) {
Code block to be executed
}

Javascript Do-While

A Do-While loop is another type of loop in JavaScript that is similar to the while
loop, but with one key difference: the do-while loop guarantees that the block of code
inside the loop will be executed at least once, regardless of whether the condition is
initially true or false .

do {
// code block to be executed
} while (condition);

While Loop Do-While Loop

It is an entry condition It is an exit condition looping

looping structure. structure.

Irrespective of the condition

The number of iterations
mentioned in the do-while
depends on the condition
block, there will a minimum of
mentioned in the while block.
1 iteration.

The block control condition is The block control condition is

available at the starting point available at the endpoint of
of the loop. the loop.

3.7 Javascript Functions

A function in JavaScript is a reusable block of code that performs a specific task. You
define it once, and then you can run (or “call”) it whenever you need that task done in
your program.

function functionName(Parameter1, Parameter2, ...)

{

29
 // Function body
}

Why Functions?
 Functions can be used multiple times, reducing redundancy.
 Break down complex problems into manageable pieces.
 Manage complexity by hiding implementation details.
 Can call themselves to solve problems recursively.

Function Invocation
 Triggered by an event (e.g., a button click by a user).
 When explicitly called from JavaScript code.
 Automatically executed, such as in self-invoking functions.

Function Definition

A function definition is sometimes also termed a function declaration or function

statement. Below are the rules for creating a function in JavaScript:
 Every function should begin with the keyword function followed by,
 A user-defined function name that should be unique,
 A list of parameters enclosed within parentheses and separated by commas,
 A list of statements composing the body of the function enclosed within curly
braces {}.

function calcAddition(number1, number2) {

return number1 + number2;
}
console.log(calcAddition(6,9));

Function Expression

It is similar to a function declaration without the function name. Function expressions

can be stored in a variable assignment.

const square = function (number) {

return number * number;
};
const x = square(4); // x gets the value 16
console.log(x);

3.8 Javascript Events

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

30
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.

With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

Example
<button onclick="document.getElementById('demo').innerHTML
= Date()">The time is?</button>
Common HTML Events

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and browser
actions:

 Things that should be done every time a page loads

 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data

3.9 Java Script Validation

31
Java Script helps us perform Client side validation, before input is sent to a web
server.

Example:
If a form field (firstname) is empty, this function alerts a message, and returns false,
to prevent the form from being submitted:

function validateForm() {
let x = document.forms["myForm"]["firstname"].value;
if (x == "")
{
alert("Name must be filled out");
return false;}}

Chapter 4
Project Report

4.1. INTRODUCTION

The web design project namely “Menz Mart” is an e-kart front end project
assigned to our group (a group of 8 people) during our training at CTTC
Bhuvneshwar which object to design an e-kart website particular to men’s
cosmetics, i.e. various top men’s cosmetic brand products at one place.

This project is a result of our learnings at training and a testimonial of our

training effectiveness.

4.2. Project Aim & Objective

The Aim & Objective of this will be achieved after completion of this
project are discussed ahead in this chapters. The aims and objectives are
as follows:

o Create a responsive website for good first impression.

o A well-designed LOGIN-SIGNUP page.
o A navigation bar to navigate through the website.
o An interactive Home Page with recent trending products.
o A shop page with all the categories of men’s Grooming products.

32
 o A about us and service page to let customer know our credibility.
o A contact us page for customer support.
o A Cart page and checkout page where one can easily submit their
orders.

4.3. Requirement Analysis

HARDWARE REQUIREMENT

o Amd Ryzen 5 12th generation is used as a processor because it is faster

than other processors and provide reliability and stability for longer
runtime. By using this processor, we can keep on developing our
project without any worries.

o 16GB RAM is used as it will provide fast reading and writing

capabilities and will in turn support in processing.

SOFTWARE REQUIREMENT

o Operating system:- Windows 11 is used as the operating system as it is

stable and supports more features and is more user friendly.

o Development tools & Programming languages:- HTML is used to write

the whole code and develop web pages with CSS, JavaScript for styling
work.

o Platform:- Visual Studio Code is used for overall coding as it is

convenient to use and Git is used to manage the code at one place.

JUSTIFICATION OF SELECTION OF TECHNOLOGY

o HTML:- Hypertext Markup Language is the standard markup language

for documents designed to be displayed in a web browser. It can be
assisted technologies such as CSS and scripting languages such as
JavaScript.

o CSS:- Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup

33
 language like HTML.

o JavaScript:- JavaScript is a programming language that conforms to the

ECMA Script specification. JavaScript is high-level, often just-in-time
compiled, and multi-paradigm. Curly bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions.

BOOTSTRAP:- Bootstrap is a free and open-source CSS framework directed at

responsive, mobile-first front-end web development. It contains CSS and JavaScript-
based design templates for typography, forms, buttons, modals navigation, and other
interface components.

4.4 Coding and Testing

Coding:
1. HTML Development:
o Create the structural framework of the web application using
HTML.
o Implement semantic HTML elements to ensure meaningful and
accessible content.
2. CSS Styling:
o Apply CSS to style the web application, including layout, color
schemes, typography, and responsive design.
3. JavaScript Functionality:
o Develop JavaScript code to add interactivity and dynamic behavior
to the web application.
Testing:
1. Unit Testing:
o Test individual components of the web application to ensure they
work as intended. This might include checking form inputs,
interactive elements, or JavaScript functions.
2. Cross-Browser Testing:
o Verify that the web application performs consistently across
different web browsers (e.g., Chrome, Firefox, Safari, Edge).
3. Responsive Testing:
o Test the application on various screen sizes and devices to ensure it
is responsive and displays correctly on mobile, tablet, and desktop
screens.

34
4. User Acceptance Testing (UAT):
o Gather feedback from actual users to ensure the application meets
their needs and expectations. Make adjustments based on user
feedback.

4.4. Result & Discussion

Login page

Home page

Shop/Category page

35
 About Us page

Service page

Contact Us page

36
 Cart page

Product Page

Checkout Page

37
CONCLUSION

The website has been computed successfully and was also tested
successfully by taking "Manual Test Cases". It is user friendly, and
has required options, which can be utilized by the user to get the
desired results. This website named “Menz Mart” is developed
using HTML, CSS, JS as front end. The goals that are achieved by
the website are:

 User Friendly.
 Responsive and credible
 Fast & well- Designed.
 Simplified and Accessible.

Chapter 5
38
References

Websites:

Geeksforgeeks: https://www.geeksforgeeks.org
Javatpoint: https://www.javatpoint.com
W3schools: https://www.w3schools.com

Others:

CTTC Faculty Notes

39