A REPORT OF ONE MONTH TRAINING

at

[PREROGATIVE GROUP OF INSTITUTES]

SUBMITTED IN PARTIAL FULFILMENT OF THE REQUIREMENT FOR

THE AWARD OF THE DEGREE.

BACHELOR OF TECHNOLOGY

(COMPUTER SCIENCE AND ENGINEERING )

JUNE-JULY, 2024

SUBMITTED BY:

PAWAN SINGH BISHT

2203523

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

GURU NANAK DEV ENGINEERING COLLEGE LUDHIANA

(An Autonomous College Under UGC ACT)

1
 GURU NANAK DEV ENGINEERING COLLEGE, LUDHIANA

CANDIDATE'S DECLARATION

I am Pawan Singh Bisht hereby declare that I have undertaken one month training at

Prerogative Group of Institutes during a period from 17th June, 2024 to 17th July, 2024

in partial fulfilment of requirements for the award of degree of B.Tech (Computer

Science) at GURU NANAK DEV ENGINEERING COLLEGE, LUDHIANA. The

work which is being presented in the training report submitted to the Department of

Computer Science at GURU NANAK DEV ENGINEERING COLLEGE,

LUDHIANA is an authentic record of training work.

Signature of the Student

The one month industrial training Viva - Voce Examination of ____________________

has been held on ___________________ and accepted.

Signature of Internal Examiner Signature of ExternalExaminer

2
 ABSTRACT

This report outlines the four-week training program on web development, designed to provide

participants with foundational skills in HTML, CSS, and JavaScript. The training aimed to equip

learners with the necessary tools and techniques for creating modern, interactive websites. Over

the course of the program, participants were introduced to the core concepts of web development,

beginning with HTML for structuring web content, followed by CSS for styling and layout

design, and culminating in JavaScript for adding interactivity and dynamic functionality. The

training was structured to balance theoretical understanding with hands-on exercises, allowing

participants to build and refine their web development skills progressively. By the end of the

training, participants were expected to have the competence to develop simple yet functional web

pages, implement responsive designs, and integrate basic interactive elements using JavaScript.

This report highlights the training process, the learning objectives, methodologies, and the overall

outcomes achieved by the participants.

3
 ACKNOWLEDGMENT

I would like to extend my deepest gratitude to Mr. Somin Dey for providing continuous

guidance, valuable feedback, and expert advice throughout the course of this training project.

Your insights and mentorship were instrumental in shaping the development of the desktop

assistant and ensuring the success of this project.

I am grateful to Prerogative Group of Institutes for offering the opportunity to gain hands-on

experience in software development and automation. The resources, infrastructure, and

supportive environment provided by the institution were crucial for the practical implementation

of my learning.

A special thanks to my family and friends for their constant motivation and encouragement

during the training period. Their unwavering support gave me the strength to overcome

challenges and complete the project on time.

4
 ABOUT THE COMPANY

Established in the year 2017, PreroGative is a premium organization which connects learners

Globally to educate them.

PreroGativeTM Group of Institute is a Non-Profit Organization registered under the Societies

Registration Act, 1860. It is an I.S.O 9001:2015 certified organization by IAF (eiaci),

Authorised Study Centre of Ministry of MSME Govt. of India (UDYAM), Approved by

Ministry of

Electronics & Information Technology (MeitY) and own the registered Trademarks from the

Ministry of Commerce and Industry (GOI). We provide a platform to all of you, especially to

students who have a common vision to gain knowledge and to do something in his/her life. Our

Team is working with a clear and straight objective to make people, mainly students, to rise by

providing them with proper or essential guidance and by connecting at the gross-root level with

everyone and try to provide technical education to as many people as possible. This is a team of

all strugglers who have faced many challenges in their life and now evaluate or achieve this

position. Everyone has industrial and educational experience. We are coming with many new

projects and creative ideas for the growth of the students and try to change the way of thinking

of students regarding programming.

5
CONTENTS

Topics Page no.

Certificate by Company 1

Candidate’s Declaration 2

Abstract 3

Acknowledgement 4

About the Company 5

Chapter 1 : Introduction to web development 8-13

1.1 Introduction 8

1.2 Understanding web development 8

1.3 Core technologies 9

1.4 Frontend vs Backend 10

1.5 Essential tools for web developers 11

1.6 Future Prospects in Web development 12

1.7 Conclusion 13

Chapter 2: Training Work Undertaken 13 - 35

2.1 HTML 13

2.2 CSS 21

6
 2.3 JavaScript 30

Chapter 3: Overview of the Western Point Website 40 - 46

3.1 Overview 40

3.2 Tech Stack 40

3.3 Functionality 41

3.4 Working 43

3.5 Features 44

3.6 Conclusion 46

Chapter 4: Conclusion and Future Scope 47 - 49

4.1 Conclusion 47

4.2 Future Scope 48

7
CHAPTER 1: INTRODUCTION TO WEB DEVELOPMENT

1.1 Introduction

In the digital age, web development plays a critical role in creating and maintaining the online

presence of businesses, individuals, and organisations. It involves building and maintaining

websites or web applications that run on internet browsers, combining various technologies and

frameworks to create a seamless user experience. This chapter will introduce the foundational

concepts, the different layers of web development, and the basic technologies involved.

1.2 Understanding Web Development

Web development encompasses a range of tasks and skills aimed at building a functional,

userfriendly website or application. Websites are divided into two main types:

● Static Websites: These display the same content to all visitors and are generally used

for informational purposes. They’re built using only HTML and CSS, lacking user

interactivity.

● Dynamic Websites: These websites can display different content and provide

interactivity based on user input or actions, often involving backend technologies like

PHP, Python, or JavaScript for data handling.

Web development can be divided into three primary stages:

8
 1. Frontend Development: The part of the website visible to users, often referred to as the

client-side. It includes HTML, CSS, and JavaScript to structure, style, and add

interactivity to the page.

2. Backend Development: The server side of the website that handles data processing,

storage, and retrieval. Technologies like PHP, Node.js, and SQL are used in this layer to

manage data and server requests.

3. Full Stack Development: A combination of both frontend and backend development,

where a developer has skills in building and managing all parts of the web application.

1.3 Core Technologies in Web Development

1.3.1 HTML (Hypertext Markup Language)

HTML is the foundation of any webpage, defining the structure and content. It organizes

elements using tags (e.g., <div>, <h1>, <p>) to display text, images, videos, and links.

HTML5, the latest version, introduced new elements like <header>, <footer>, and <section> to

improve semantic structure, making it easier for search engines to understand the content.

1.3.2 CSS (Cascading Style Sheets)

CSS is used to style and layout web pages, controlling aspects like colors, fonts, and

positioning of elements. CSS also makes websites responsive by adapting the layout to fit

different screen sizes. Techniques such as Flexbox and Grid Layout provide powerful ways to

arrange elements on the page without relying on complex HTML structures.

9
1.3.3 JavaScript

JavaScript is a scripting language that enables interactive features like form validation,

animations, and dynamic content updates. As the most popular language in web development,

JavaScript is essential for creating a dynamic, engaging user experience. Additionally,

JavaScript frameworks like React, Angular, and Vue streamline the process of building

complex frontend applications.

1.3.4 PHP (Hypertext Preprocessor)

PHP is a server-side scripting language commonly used to build dynamic websites. It allows

developers to interact with databases, manage user authentication, and handle form data.

Combined with HTML, PHP creates a seamless link between the frontend and backend,

especially for applications requiring user input and data processing.

1.4 Frontend vs. Backend Development

1.4.1 Frontend Development

Frontend development, or client-side development, focuses on the visual aspects of a website

and how users interact with it. HTML, CSS, and JavaScript form the backbone of frontend

development, each playing a specific role:

● HTML structures the content.

● CSS styles and arranges the layout.

● JavaScript adds interactivity and dynamic features.

10
To improve efficiency and user experience, developers often use frameworks like Bootstrap for

CSS and libraries like jQuery or React for JavaScript. These tools streamline common tasks and

simplify code.

1.4.2 Backend Development

Backend development, or server-side development, powers the logic and database interactions

of a web application. It typically involves:

● Server-Side Languages: PHP, Node.js, Ruby, or Python to process requests and

perform logic.

● Databases: MySQL, PostgreSQL, and MongoDB store user data, like login credentials

and other information.

● Server Management: Handling the configuration and maintenance of the server

infrastructure that hosts the website.

Backend developers focus on functionality, ensuring that users' requests are correctly processed

and that data is accurately stored and retrieved. The backend is crucial for applications with user

accounts, data storage, and interactive features that require dynamic content.

1.5 Essential Tools for Web Developers

Web development relies on a variety of tools to streamline and optimize the coding process:

● Text Editors and IDEs: Text editors like Visual Studio Code, Atom, and Sublime Text

provide a coding environment, while Integrated Development Environments (IDEs) like

WebStorm or Eclipse offer advanced debugging and workflow features.

11
 ● Version Control: Git is a version control system that tracks code changes and allows

collaboration among developers. GitHub, GitLab, and Bitbucket are popular platforms

for hosting Git repositories.

● Browser Developer Tools: Built into browsers like Chrome and Firefox, developer

tools help debug HTML, CSS, and JavaScript code directly on the webpage, making

troubleshooting more efficient.

● Frameworks and Libraries: CSS frameworks like Bootstrap and Tailwind CSS speed

up the design process, while JavaScript libraries and frameworks like jQuery, React, and

Angular simplify scripting and application building.

● Testing Tools: Automated testing tools like Selenium and Jest help identify and resolve

bugs and issues in both frontend and backend code, ensuring that the application runs

smoothly.

1.6 Future Prospects in Web Development

Web development continues to evolve rapidly, with new frameworks, libraries, and practices

emerging regularly. Some trends in web development that are shaping the industry include:

● Progressive Web Apps (PWAs): These applications combine the accessibility of web

pages with the functionality of native apps, allowing users to access them offline and

install them on devices.

● Single Page Applications (SPAs): SPAs, built with frameworks like React and Vue,

enhance user experience by loading content dynamically within a single page rather than

reloading entirely.

● Responsive and Mobile-First Design: With the increase in mobile users, responsive

and mobile-first design has become a standard, ensuring a smooth experience across

devices of all sizes.

12
 ● AI and Machine Learning: AI tools are increasingly integrated into websites for

personalization, search enhancements, and chatbots, improving user engagement.

These trends point to the continuous growth and adaptability required in web development,

emphasising the need for developers to stay updated on the latest tools and best practices.

1.7 Conclusion

Web development is an ever-expanding field, providing the tools and technologies necessary to

create websites and applications that are central to today's digital experience. By understanding

the basics of HTML, CSS, JavaScript, and PHP, and their roles in frontend and backend

development, a foundation is set for further exploration and specialization. This chapter has

introduced core concepts in web development, preparing the groundwork for more advanced

topics in building, deploying, and maintaining websites and applications.

13
 CHAPTER 2 TRAINING WORK UNDERTAKEN

2.1 HTML

2.1.1 Basic Structure of HTML Webpage

The HTML code contains some sections such as DOCTYPE, meta tags, head, and body. All

the tags that we include in an HTML file, needs to be first opened and then closed by angular

brackets. Let us now understand different sections one by one.

● Doctype HTML- Doctype HTML justifies that it is a HTML document. So, we

are defining specifically for a browser to understand that it is an HTML

document. To understand more about the type of documents, you can visit here.

● <html lang= “en”> - It is the opening part of the HTML tag that tells us the

language of the document is in English.

● <head> - Head contains all the meta-tags in it which is used to describe the

contents of a website. Meta means providing information about information.

Therefore, meta tags are used to define the keywords and descriptions on our

website. Head also contains the title of the website and all the external files like

14
 CSS and JavaScript that we link to it.

● <body> - Body contains all the contents of the webpage in it. However, in the

beginning, our website may look a little uglier but after including stylesheets it

will start looking attractive.

Various Meta Tags

● It simply means that the characters that are used will be of UTF-8. It declares the page’s

character encoding. It should contain a standard IANA MIME name for character

encodings. Moreover, authors are encouraged to use UTF-8.

2.1.2 Headings and Paragraph

Headings in HTML are essential for structuring content, providing an organized and accessible

layout for web pages. They act as titles and subtitles, helping users and search engines identify

the main points and the flow of the content. By using headings, you can break down information

into manageable parts, making it easier for readers to navigate through a page.

Types of Headings

HTML provides six levels of headings, from <h1> to <h6>, each representing a different level

of importance:

1. <h1>: The highest and most important heading, usually reserved for the main title of the

page or article. It’s generally recommended to use only one <h1> per page.

2. <h2>: Typically used for section titles, like main topics or subsections under the main

title.

15
 3. <h3>: Suitable for subtopics or headings under <h2> sections.

4. <h4>, <h5>, <h6>: Used for deeper sub-levels, providing additional breakdowns within

a topic. <h6> is the smallest heading and is rarely used except for highly detailed

structuring.

Each heading level helps create a visual hierarchy, indicating relationships between topics. This

not only improves readability but also enhances SEO by helping search engines understand the

structure and main points of the page.

Paragraph

The <p> tag in HTML is used to define paragraphs, which are blocks of text designed to hold

information in a readable format. Each paragraph element automatically adds some space above

and below, helping separate it from other elements on the page.

16
Using paragraphs is essential for organizing content, as it allows text to be broken down into

digestible sections. This makes the information easier to read and follow. The <p> tag is typically

used for sentences or blocks of text that expand upon the ideas presented in headings, providing

more details, explanations, or descriptions within each section.

2.1.3 Links

Links are created using the <a> tag with the href attribute:

17
2.1.4 Images

Images are added using the <img> tag, which is self-closing and requires the src and alt

attributes:

2.1.5 Lists

There are two types of lists in HTML: ordered and unordered.

● Unordered List: Uses the <ul> tag with <li> for list items.

● Ordered List: Uses the <ol> tag with <li> for list items.

18
2.1.6 Tables

Tables are created using the <table> tag, with <tr> for table rows, <th> for table headers, and

<td> for table data:

2.1.7 HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in

the opening tag.

Common Attributes:

● href: Specifies the URL for links.

● src: Specifies the path for images.

● alt: Provides alternative text for images.

● title: Adds extra information about an element, often displayed as a tooltip.

19
Example of using attributes:

2.1.8 HTML Forms

Forms are used to collect user input. The <form> element wraps all input elements. Common

input types include text fields, checkboxes, radio buttons, and submit buttons.

Example of a Simple Form:

Explanation:

● <form>: Wraps the form elements. The action attribute specifies where to send the form

data, and the method attribute specifies how to send it.

● <label>: Associates a text label with a form control.

● <input>: Defines various types of user input (text, email, etc.).

20
2.1.9 HTML Comments

Comments can be added in HTML to explain code or leave notes. They are not displayed in the

browser.

2.1.10 Semantic HTML

Semantic HTML uses elements that convey meaning about the content they enclose, making it

easier for browsers and search engines to understand the webpage structure.

Examples of Semantic Elements:

● <header>: Defines a header for a document or section.

● <footer>: Defines a footer for a document or section.

● <article>: Represents a self-contained piece of content.

● <section>: Defines a section of related content.

Example:

21
2.2 CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and

layout of HTML documents. CSS allows you to apply styles to web pages, including colors, fonts,

spacing, and positioning of elements. By separating content (HTML) from presentation (CSS), it

enhances the maintainability and flexibility of web designs.

Key Features of CSS:

● Separation of Content and Presentation: CSS allows web developers to separate the

structure of a document from its visual presentation.

● Responsive Design: CSS enables the creation of designs that adapt to various screen

sizes and devices.

● Consistency: Styles can be applied uniformly across multiple pages, ensuring a

consistent look and feel.

2.2.1 Basic CSS Syntax

CSS is written in a specific syntax that consists of selectors and declarations.

22
 ● Selector: Targets the HTML element(s) to apply styles.

● Property: The CSS property you want to change (e.g., color, font-size).

● Value: The value you want to assign to the property.

2.2.2Selectors

CSS selectors are patterns used to select the elements you want to style.

Types of Selectors

● Universal Selector: Targets all elements.

● Element Selector: Targets specific HTML elements.

23
 ● Class Selector: Targets elements with a specific class, denoted by a period (.).

● ID Selector: Targets an element with a specific ID, denoted by a hash (#).

● Attribute Selector: Targets elements based on attributes.

Grouping Selectors

You can group selectors to apply the same styles to multiple elements:

2.2.3 CSS Box Model

The CSS box model describes the rectangular boxes generated for elements in the document

tree, consisting of margins, borders, padding, and the actual content.

24
Box Model Breakdown

● Content: The inner area where text and images appear.

● Padding: The space between the content and the border, which is transparent.

● Border: The area surrounding the padding, which can be styled.

● Margin: The outermost space around the border, separating the element from others.

Example of Box Model:

2.2.4 CSS Positioning

CSS positioning allows you to control the placement of elements on a web page.

Types of Positioning

● Static Positioning: The default positioning; elements are positioned according to the

normal flow of the document.

25
● Relative Positioning: Positioned relative to its normal position.

● Absolute Positioning: Positioned relative to its closest positioned ancestor.

● Fixed Positioning: Positioned relative to the viewport, remaining fixed when scrolling.

● Sticky Positioning: Acts like relative positioning until it reaches a specified scroll

position, then it behaves like fixed positioning.

26
2.2.5 CSS Colors

CSS allows you to set colors using various methods:

Color Formats

● Named Colors: Use predefined color names.

● Hexadecimal Colors: Use hex codes (e.g., #RRGGBB).

● RGB Colors: Use the RGB color model.

● RGBA Colors: RGB with an alpha channel for transparency.

27
2.2.6 CSS Fonts and Text Styles

CSS allows you to customize fonts and text styles for better readability and aesthetics.

Font Properties

● Font Family: Sets the font of the text.

● Font Size: Sets the size of the text.

● Font Weight: Sets the thickness of the font.

● Text Color: Changes the color of the text.

Text Decoration

You can apply text decorations like underline, overline, and line-through.
28
2.2.7 CSS Layout Techniques

CSS offers various techniques for creating layouts.

Flexbox

Flexbox is a one-dimensional layout model that allows you to align and distribute space among

items in a container.

Example of Flexbox:

Grid

CSS Grid is a two-dimensional layout system that allows for more complex layouts.

Example of CSS Grid:

29
2.2.8 Responsive Design

Responsive design ensures that web pages look good on all devices by adapting to different

screen sizes.

Media Queries

Media queries allow you to apply styles based on device characteristics, such as screen width.

Example of a Media Query:

2.2.9 Conclusion

CSS is an essential part of web development that allows you to control the presentation of web

pages. By mastering CSS, including selectors, properties, positioning, and responsive design

techniques, you can create visually appealing and user-friendly websites. As you continue to

learn, practice applying these concepts to build your own styles and layouts, enhancing your web

development skills.

2.3 Javascript

2.3.1 Introduction to JavaScript

JavaScript is a dynamic programming language that brings interactivity to web pages. While

HTML defines the structure and CSS styles the appearance, JavaScript enables actions, such as

30
form submissions, dynamic content updates, and animations. JavaScript is essential for creating

interactive and engaging web experiences.

Key Features of JavaScript:

● Interactivity: Adds actions like clicking, hovering, and scrolling.

● Client-Side: Executes within the browser, reducing server load.

● Cross-Platform: Works across different operating systems and browsers.

2.3.2 Linking JavaScript to an HTML Page

To use JavaScript in an HTML document, you can add it directly within <script> tags in the

HTML file or link to an external JavaScript file. This allows your JavaScript code to interact

with the HTML elements on the page.

Adding JavaScript Inline

Place the JavaScript code inside <script> tags in the HTML file, usually within the <head> or

<body> section.

31
Linking an External JavaScript File

Create a separate .js file and link it to your HTML file using the <script

src="filename.js"></script> tag. This keeps JavaScript code separate from HTML, improving

organization.

2.3.3 JavaScript Basics

Writing JavaScript

JavaScript code can be written directly within an HTML file or in a separate file. Inline scripts

are placed within <script> tags in an HTML document, or you can link an external .js file.

Example of Inline JavaScript:

32
In this example, JavaScript changes the content of the <h1> element with id="gree ng".

Basic Syntax

JavaScript code follows a similar syntax to other programming languages, using:

● Variables: Store values

● Functions: Group reusable code

● Operators: Perform operations

Example of Declaring a Variable and a Function:

2.3.4 Variables and Data Types

Variables store data that can change over time. JavaScript uses three keywords for variables:

var, let, and const.

33
Variable Declaration

● let: Allows reassignment.

● const: Constant, cannot be reassigned.

Data Types in JavaScript

● String: Text data, e.g., "Hello"

● Number: Numeric values, e.g., 42

● Boolean: True or false, e.g., true

● Array: A collection of values, e.g., [1, 2, 3]

● Object: Collection of key-value pairs, e.g., {name: "John", age: 30} Example of

Using Data Types:

34
2.3.5 Functions in JavaScript

Functions allow you to encapsulate code and run it whenever needed. Function

Declaration

Calling a Function

Anonymous Functions and Arrow Functions

Arrow functions provide a shorthand for writing functions:

2.3.6 JavaScript Events

JavaScript responds to events (e.g., clicking a button, submitting a form) to create interactivity.

Event Handling

You can assign functions to events:

35
Common Events

● onclick: Triggered when an element is clicked.

● onmouseover: Triggered when the mouse hovers over an element.

● onload: Triggered when the page loads.

2.3.7 Control Structures

JavaScript uses conditional statements and loops to control code flow. If-Else

Statement

For Loop

Loops help repeat code.

2.3.8 JavaScript Objects

Objects in JavaScript store related data and functions.

36
Creating an Object

Accessing Object Properties

2.3.9 DOM Manipulation

The Document Object Model (DOM) represents the HTML structure. JavaScript can modify

the DOM to change content, styles, and structure dynamically.

Selecting Elements

● getElementById(): Selects an element by its ID.

● getElementsByClassName(): Selects elements by class.

● querySelector(): Selects elements using CSS selectors.

37
Changing Content

You can modify HTML content using JavaScript:

2.3.10 JavaScript Arrays and Methods

Arrays in JavaScript hold multiple values and come with built-in methods.

Array Declaration and Methods

Array Iteration

Using a loop to iterate over array elements:

2.3.11 JavaScript in Web Development

JavaScript is essential for enhancing the user experience on websites. Combined with HTML

and CSS, it creates responsive and interactive web applications, bringing life to static pages. With

frameworks like React, Vue, and Angular, JavaScript extends functionality, enabling the

development of single-page applications (SPAs) and complex user interfaces.

38
2.3.12 Conclusion

JavaScript is a foundational web language that powers dynamic content, interactivity, and rich

features on websites. Understanding JavaScript’s syntax, data types, control structures, DOM

manipulation, and events allows developers to build dynamic, responsive websites and

applications that engage users effectively.

39
 Chapter 3 : Overview of Western Point Website

3 1. Overview

The Western Point website is an e-commerce platform designed to showcase and sell a variety of

fashion items and clothing for men. It features seasonal promotions, trending products, and

ongoing sales. The website is structured to provide an engaging and user-friendly experience for

online shoppers, with a clean and organized design. It includes various sections such as home,

categories, product listings, customer reviews, about the company, and contact details. The

primary goal of Western Point is to present the latest fashion trends and offer products to

customers at competitive prices while ensuring a smooth online shopping experience.

3.2. Tech Stack:

The website is built using a combination of front-end web technologies:

40
  HTML5: The core markup language for structuring the content of the website. It defines

the layout, navigation, and overall structure of the website.

 CSS3: For styling the web pages, ensuring a responsive, modern, and visually appealing

design. Custom styles are applied for layout elements like banners, buttons, product grids,

and typography.

 Font Awesome (CDN): Used to integrate scalable vector icons for user interface elements

like search icons, heart icons (for favorites), and social media buttons.

 Boxicons (CDN): Another icon library used for incorporating additional icons for social

media links and other UI elements.

 Responsive Design: The website layout adapts to different screen sizes and devices,

including mobile, tablet, and desktop, providing an optimal viewing experience.

The backend technology stack and database are not explicitly mentioned in the HTML provided,

but we can assume that it may use a typical stack for e-commerce platforms such as PHP or

Node.js along with MySQL or MongoDB for data management (this would be part of a full-stack

implementation, not covered in the provided code).

3.3. Functionality:

The main functions and features of the website include:

41
 Navigation Bar: At the top of the page, there’s a navigation bar with links to different

sections of the site: Home, Sale, Products, Reviews, About, and Contact.

 Product Listings: Under the Trending Products section, the website displays multiple

rows of products, each with a product image, name, price, availability, rating, and a heart

icon for adding to favorites.

 Banner: A large banner section displaying a seasonal offer ("Autumn Winter 2024") with

a call-to-action button, guiding users to the contact page for inquiries.

 Heart Icons: Allow users to "like" products, presumably saving them to a favorites or

wish list.

 Ratings: A star-based rating system provides a visual representation of product quality or

customer feedback, with the option for half-stars.

 Sale and New Labels: Each product is labeled with its status, such as "New" or "Sale,"

to provide information on availability and promotions.

 Search and Cart Icons: The header includes a search icon (though the search

functionality is not implemented in the HTML provided) and cart icon (presumably for

checkout).

 News/Updates Section: The website includes an updates section where the latest news

and seasonal sale promotions are highlighted. This section features brief articles with

images, titles, and summaries.

42
  Footer Section: The footer contains essential information such as company details,

contact information, links to support pages (e.g., Size Guide, Privacy Policy), social

media links, and a subscription form for updates and discounts.

3.4. Working:

The website’s working process primarily involves interaction with the following components:

1. Homepage: When a user visits the website, they are presented with a homepage

containing a seasonal banner, a list of trending products, and links to other sections.

2. Product Display: Clicking on a product will likely lead the user to a detailed product

page (though the detailed pages are not shown in the provided HTML). The product

display includes an image, price, and a brief description.

43
 3. Shopping Features: Users can potentially add items to their cart or save them to their

wish list (using the heart icon). The functionality for adding items to the cart or a checkout

system would typically be implemented in the back end (using JavaScript, PHP, or

another language).

4. News Updates: The New Updates section showcases the latest trends, seasonal sales, and

updates about the brand. Clicking on "Continue Reading.." would take the user to a more

detailed blog or article page.

5. Footer Links: The footer includes quick links to various sections of the website,

including social media profiles, customer support, and company information.

3.5. Features:

The website offers several key features:

 Responsive Design: The website adjusts its layout according to the device screen size,

making it accessible on desktops, tablets, and mobile devices.

 Product Catalog: A well-organized catalog of trending fashion products, with the option

to display information such as product availability ("New", "Sale") and prices.

44
 Ratings and Reviews: Each product has a rating system where customers can rate

products with stars, helping other shoppers make informed decisions.

 Wishlist/Favorites: Users can mark products as favorites by clicking on the heart icon.

This feature, though not fully functional in the provided HTML, is often used to save

products for future purchase.

 Social Media Integration: The footer includes links to the company’s social media

accounts (Facebook, Instagram, Twitter, YouTube, LinkedIn), encouraging customer

engagement through multiple platforms.

45
  Search and Cart Icons: While the search functionality is not fully developed in the

current HTML, it indicates a feature for customers to search for products on the site. The

cart icon suggests a shopping cart functionality, likely implemented in the back end.

 Seasonal Sales and Promotions: The website promotes sales during different seasons

(Winter, Autumn, Summer), showcasing the latest discounts and offering promotions like

"contact us" for more information.

 Subscription Form: The footer section has a subscription form where users can sign up

to receive updates, discounts, and promotions directly to their inbox.

3.6 Conclusion:

The Western Point website provides a sleek, modern e-commerce platform that highlights fashion

products for men, offering them in a way that engages users with seasonal updates, promotions,

and a clean design. The combination of a structured navigation bar, featured products, and a clear

call-to-action ensures that users can easily browse and shop online. While the website currently

lacks full functionality for product transactions, with back-end implementation, it could serve as

a fully operational e-commerce store. The site’s use of modern UI elements like icons, responsive

design, and product rating systems adds value to the customer shopping experience.

46
 Chapter : 4

4.1 Conclusion

The four-week summer training in web development provided a comprehensive introduction to

building and deploying web applications using core web technologies—HTML, CSS, JavaScript,

and PHP. Through this training, I gained a solid foundation in the essential tools and techniques

required for web development. Each session was structured to introduce new concepts and

gradually build up my understanding, from creating basic static web pages to implementing more

interactive and dynamic features.

This training enabled me to develop practical skills through hands-on projects and assignments,

including designing layouts, styling elements, creating user interactions, and understanding

server-side scripting. By the end of the training, I successfully created and deployed a fully

functional School Webpage, which serves as a tangible outcome of my learning. This project

allowed me to apply my newly acquired skills in a real-world context, enhancing my confidence

and proficiency in web development.

Overall, this training has been a valuable stepping stone in my journey toward becoming a web

developer. It has equipped me with a strong foundation and sparked a keen interest in exploring

more advanced aspects of web technologies.

Future Scope

Building on the knowledge and skills acquired during the training, I envision several areas for

further learning and improvement:

1. Advanced JavaScript Frameworks:

47
 ○ Learning JavaScript frameworks such as React, Angular, or Vue would enable

me to create more dynamic and responsive applications with improved

performance and maintainability.

2. Backend Development:

○ Diving deeper into server-side programming using technologies like Node.js or

PHP frameworks (e.g., Laravel) would allow me to handle more complex

database interactions, user authentication, and real-time data updates.

3. Responsive and Adaptive Design:

○ Mastering responsive and adaptive design techniques will help in creating

websites that provide an optimized user experience on various devices and

screen sizes.

4. APIs and Integration:

○ Understanding how to work with APIs and integrate third-party services (such as

social media, payment gateways, and maps) will expand the functionality of

future projects.

5. Database Management:

○ Developing skills in database management systems such as MySQL or

MongoDB would enhance my ability to design and manage data-driven

applications.

6. Version Control:

○ Gaining proficiency in version control tools like Git beyond GitHub Pages will

improve collaborative capabilities and version tracking.

7. Web Accessibility and SEO:

48
 ○ Learning about web accessibility standards and search engine optimization

(SEO) will help in designing websites that are inclusive and have better visibility

in search engines.

By pursuing these areas in the future, I hope to build upon the foundational knowledge gained

from this training and progress toward creating more complex and impactful web applications.

This training has been an important first step, and I am excited to continue exploring the vast

field of web development.

49