PROJECT REPORT
OF
ADVANCED WEB DEVELOPMENT
SUBMITTED IN PARTIAL FULFILLMENT OF THE DEGREE
OF
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
Submitted by:Diljeet Kaur Rollno.:12201011
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
PUNJABI UNIVERSITY
1
Table of Contents
TOPIC PAGE NO.
Abstract ......................................................................................................................................................... 2
CHAPTER1 INTRODUCTION .................................................................................................................. 4
Introduction................................................................................................... Error! Bookmark not defined.
HTML .......................................................................................................................................................... 15
CSS-Cascading Style Spresdsheet...................................................................... Error! Bookmark not defined.
JavaScript ..................................................................................................... Error! Bookmark not defined.
OF ............................................................................................................................................................................... 1
ABSTRACT............................................................................................................................................................... 3
CHAPTER 1 INTRODUCTION ............................................................................................................................ 5
SemanticHTML:...................................................................................................................................................... 7
CommonHTMLTags: ............................................................................................................................................. 7
CHAPTER2............................................................................................................................................................. 16
Frontend of E-Shop Website — Project Report ............................................................................................... 20
1. Introduction ........................................................................................................................................................ 20
2. Objectives ............................................................................................................................................................ 20
2
3. Tech Stack & Libraries ..................................................................................................................................... 20
4. Key Frontend Features ..................................................................................................................................... 21
5. Information Architecture / Pages .................................................................................................................... 21
6. UI Components & Reusable Patterns ............................................................................................................. 21
ABSTRACT
The E-Shop Website is a responsive and user-friendly web interface designed to provide a
seamless online shopping experience. It serves as the client-side component of an e-commerce
platform, allowing users to browse products, view detailed descriptions, add items to the
shopping cart, and proceed to checkout. Developed using modern web technologies such as
HTML, CSS, and JavaScript, the frontend focuses on delivering an intuitive design, smooth
navigation, and dynamic content updates for enhanced user engagement.
The project aims to replicate the core functionalities of a commercial e-commerce site while
maintaining simplicity and performance. Key features include product listing pages, search
and filter options, shopping cart management, and responsive design for accessibility across
devices. The frontend communicates with a backend (API or server) to fetch and display real-
time product data and manage user actions efficiently.
By implementing principles of modern web design and interactive UI development, the E-
Shop Frontend project demonstrates the practical application of web technologies in building
scalable and visually appealing online marketplaces. It provides a foundation for further
integration with backend systems for order management, user authentication, and payment
gateways.
3
4
CHAPTER 1 INTRODUCTION
Topic–Web development
WebdevelopmentistheworkinvolvedindevelopingawebsitefortheInternet(WorldWide
Web)oranintranet(aprivatenetwork).Webdevelopmentcanrangefromdevelopingasimple single
static page of plain text to complex web applications, electronic businesses, and social
network services. A more comprehensive list of tasks to which Web development commonly
refers, may include Web engineering, Web design, Web content development, client liaison,
client-side/server-side scripting, Web server and network security configuration, and e-
commerce development. Web development teams can consist of hundreds of people (Web
developers)andfollowstandardmethodslikeAgilemethodologieswhiledevelopingWebsites.
Smaller organizations may only require a single permanent or contracting developer, or
secondaryassignmenttorelatedjobpositionssuchasagraphicdesignerorinformationsystems
[Link]
domain of a designated department. There are three kinds of Web developer specialization:
frontend developer, back-end developer, and full-stack developer. Front-end developers are
responsible for Behavior and visuals that run in the user browser, while back -end developers
[Link],theindustryhasboomedandhas
become one of the most used technologies ever.
5
HTML
HTML stands for Hypertext Markup Language. It is a standard markup language for web page
creation. It allows the creation and structure of sections, paragraphs, and links using HTML
elements(thebuildingblocksofawebpage)suchastagsandattributes. HTMLhasalotofuse cases,
namely:
Webdesigning:DevelopersuseHTMLcodetodesignhowabrowserdisplayswebpageelements, such as
text, hyperlinks, and media files.
Internetnavigation:Userscaneasilynavigateandinsertlinksbetweenrelatedpagesandwebsites as
HTML is heavily used to embed hyperlinks.
Web documentation: HTML makes it possible to organize and format documents, similarly to
[Link]’salsoworthnotingthatHTMLisnotconsideredaprogramminglanguageasit can’t
create dynamic functionality, although it is now considered an official web standard. The World
Wide Web Consortium (W3C) maintains and develops HTML specifications, along with
[Link],consistingofasetof tags and
attributes. HTML elements are the building blocks of a web page. A tag tells the
web
browserwhereanelementbeginsandends,whereasanattributedescribesthecharacteristicsofan element.
Thethreemain partsof anelement are:
Openingtag–[Link] opening and
closing angle brackets. For example, use the start tag <p> to create a paragraph.
Content–thisisthe outputthatotherusers see.
Closing tag–thesameastheopeningtag,butwithaforwardslashbeforetheelementname. For example,
</p> to end a paragraph. The combination of these three parts will create an HTML element:
<p>This is how you add a paragraph in HTML. </p> Another critical part of an HTML element is
its attribute, which has two sections – a name and attribute value. The name identifies the
additional information that a user wants to add, while the attribute value gives further
6
[Link],HTMLisamarkuplanguagewhichisusedforcreatingattractivewebpages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is made
of many HTML tags and each HTML tag contains different content.
SemanticHTML:
SemanticHTMLtagsprovidemeaningtothecontentwithinthem,improvingaccessibilityand SEO.
Examples include:
<article>:Representsa self-containedpieceof content.
<section>:Representsasectionof content.
<header>:Representsintroductorycontentoragroupofintroductoryelements.
<footer>:Representsthefooterforthenearestsectionorarticle.
CommonHTMLTags:
<html>:Therootelement ofanHTML document.
<head>:Containsmeta-informationaboutthedocument,suchastitle,charset,andlinksto
stylesheets.
<title>:Sets thetitleofthedocument,shown inthebrowser'stitlebarortab.
<meta>:ProvidesmetadataabouttheHTMLdocument(e.g.,characterencoding,viewport
settings).
<link>:Linksexternalresourceslike stylesheets.
<script>:LinksorembedsJavaScript.
<body>:Contains thecontent ofthe HTMLdocument that is visible to users.
<header>:Definesintroductorycontentor agroupofintroductoryelements.
<nav>:Definesnavigationlinks.
<main>:Representsthe dominantcontentofthedocument.
<article>:Representsa self-containedpieceof content.
<footer>:Representsthe footerofthedocumentor section.
<h1>,<h2>, ...,<h6>: Defineheadings ofdifferent levels.
<p>:Definesaparagraph.
<a>:Definesa hyperlink.
<img>:Embedsanimage.
<ul>,<ol>,<li>:Defineunordered andorderedlists.
<table>, <tr>,<td>,<th>:Definetablesandtable elements.
7
<form>:Definesan HTMLform foruserinput.
<input>,<button>:Defineformcontrols.
HTML Attributes:
Attributesprovideadditional informationabout HTML elements.
Theyarealwaysspecifiedintheopening [Link] include:
id:Specifiesauniqueidentifierforanelement.
class:Specifies oneor moreclass names for anelement,used forstyling with CSS.
style:ProvidesinlineCSSstyles.
href:Specifies theURL for hyperlinks.
src:Specifiesthesourceforimagesorscripts. alt:
Provides alternative text for images
8
CSS-CASCADING STYLE SHEET
CSSstands for [Link] and
formatting of a document written in markup language. It provides an additional feature to
[Link] also be
used with any kind of XML documents including plain XML, SVG and XUL. CSS is used
alongwithHTMLandJavaScriptinmostwebsitestocreateuserinterfacesforwebapplicationsand user
interfacesfor [Link] canbeusedfor very basicdocumenttextstyling
— for example, for changing the color and size of headings and links. It can be used to create a
layout — for example, turning a single column of text into a layout with a main content area and a
[Link] links in
this paragraph for specific examples.
FeaturesofCSS:
CSSsavestime:YoucanwriteCSSonceandreusethesamesheetin multipleHTMLpages.
Easy Maintenance: To make a global change simply change the style, and all elements in all the
webpages will be updated automatically.
Search Engines: CSS is considered a clean coding technique, which means search engines won’t
have to struggle to “read” its content.
SuperiorstylestoHTML:CSShaveamuchwiderarrayofattributesthanHTML,soyoucangive a far
better look to your HTML page in comparison to HTML attributes.
OfflineBrowsing:CSScanstorewebapplicationslocallywiththehelpofanolinecache. Using this we
can view o line websites.
9
CSSSyntax:
CSScomprisesstylerulesthatareinterpretedbythebrowserandthenappliedtothecorresponding elements in
your document. A style rule set consists of a selector and declaration block.
Selector: AselectorinCSSisusedtotargetandselectspecificHTMLelementstoapplystylesto.
Declaration:AdeclarationinCSSisacombinationofapropertyandits1011corresponding value.
Selector -- h1
Declaration--{color:
blue;font size:12px;
The selector points to the HTML element you want to style. The declaration block contains one or
more declarations separated by semicolons. Each declaration includes a CSS property name and a
value, separated by a colon
TYPESOFCSS:
10
CSSProperties:
font-family:Setsthefontfor text
font-size:Setsthesizeof the font.
text-align:Alignstexthorizontallywithinitscontainer(left,right,Center,justify).
colour:Sets thecolourof the text.
background-colour:Setsthebackgroundcolourofanelement.
display:flex:Defines aflex container. 13
justify-content:Alignsflexitemsalongthemainaxis(flex-start,Center,space-between,
space-around, space-evenly).
align-items:Alignsflexitemsalongthecrossaxis(flex-start,enter,baseline,stretch).
z-index:Specifiesthestackorderofpositionedelements.
CSSBox Model:
width,height:Sets thewidth andheight ofan element.
margin:Sets thespacearoundan element, outsideits border.
padding:Setsthespace betweentheelement'sborderanditscontent
11
JAVASCRIPT
JavaScript is a widely used client-side scripting language or the computer programming language
which is mainly for internet browsers. Generally, JavaScript codes are written into HTML pages.
Whenever the user requests an HTML page, JavaScript codes added into the page hit the web
[Link],JavaScript
isoneofthesimpleandeasiestlanguagesthatcanbelearnedbyanyoneeitherfreshersorlateralsor college
students. The only prerequisite is the genuine will and interest to do website designing and web
development.
FeaturesofJavaScript:
[Link],
[Link]
properties and methods just like other objects. They can be passed as arguments in other functions.
Can handle date and time. Performs Form Validation although the forms are created using HTML.
No compiler is needed.
BasicsofJavascript:
Syntax:JavaScriptsyntaxissimilartootherprogramminglanguages,withvariables, functions,
and control structures like loops and conditionals.
Variables: Use var, let, or const to declare variables. let and const are block-scoped, while
var is function-scoped.
12
DataTypes:Includesprimitiveslikenumbers,strings,booleans,null,undefined,and symbol.
Objects and arrays are non-primitive types.
Operators: Arithmetic (+, -, *, /), comparison (==, ===, !=, !==, >, <), logical (&&, ||, !),
etc.
FunctioninJavascript:
A JavaScript function is defined with the functionkeyword, followed by aname, followed by
parentheses().Function names can contain letters, digits, underscores, and dollar signs (same rules
asvariables).Theparenthesesmayincludeparameternamesseparatedbycommas: (parameter1,
parameter2, ...)The code to be executed, by the function, is placed inside curly brackets: {}
SelectorsinJavascript:
InCSS,selectorsarepatternsusedtoselecttheelement(s)youwanttostyle.
GetElementById:[Link] element.
GetElementsByClassName:Selectsallelements [Link]
HTMLCollection.
GetElementsByTagName:Selectsallelementswithaspecific [Link]
HTMLCollection.
QuerySelector:[Link] element.
QuerySelectorAll:Selectsallelementsthatmatch [Link] staticNodeList. Eventsin
Javascript:
EventsinJavaScriptallowyoutorespondtouserinteractionsandotheractionswithinthebrowser. You can
attach event listeners to HTML elements using the addEventListenermethod. You can remove
event listeners using the removeEventListener method. The function passed to
removeEventListenermustbethesameastheonepassedtoaddEventListener. For example:
Theuser selects,clicks, orhovers thecursorovera certain element.
13
Theuser chooses akey on thekeyboard.
Theuserresizesorclosesthebrowser window.
Aweb pagefinishes loading.
Aformis submitted.
Avideo isplayed, paused,orends.
Anerroroccurs. SomeofthecommonEvents are:
Onclick:Handlesclick events.
Onmouseover:Firedwhenthemousepointermovesoveranelement.
Onsubmit:Whenthe usersubmitsthe form.
ApplicationsofJavaScript:
Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do
this in 1995. By using AngularJS that can be achieved so easily.
Server Applications: With the help of [Link], JavaScript made its way from client to server and
[Link] is the most powerful on the server side.
Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5
canvas, and make the sound more effective also can be used [Link] library. 17
Machine Learning: This JavaScript [Link] library can be used in web development by using
machine learning.
Web Applications: With technology, browsers have improved to the extent All detailed view is
justaclickaway,[Link]
Interfaces (APIs) that provide extra power to the code. The Electron and React are helpful in this
14
[Link],in-browserJavaScriptisableto:AddnewHTMLtothepage,changethe
existingcontent,[Link],runonmouseclicks,pointermovements,key presses.
Send requests over the network to remote servers, download and upload files(so-called
AJAXandCOMETtechnologies).Getandsetcookies,askquestionstothevisitor,showmessages.
Remember the data on the client-side (“local storage”).
15
CHAPTER2
ABOUT PROJECT
Steps to Install Visual Studio Code on Windows
Step1:VisittheOfficialWebsiteoftheVisualStudioCodeusinganywebbrowserlike Google
Chrome,Microsoft Edge, etc
Step 2: Press the “Download for Windows” button on the website to start thedownload of the
Visual Studio Code Application.
Step3:Whenthedownloadfinishes,thenthe VisualStudioCodeIcon appearsinthe downloads folder.
16
Step4:ClickontheInstallericontostarttheinstallationprocessoftheVisualStudioCode. Step 5:After the
Installer opens, it will ask you to accept the terms and conditions of the Visual Studio Code. Click on
I accept the agreement and then click the Next button.
Step6:[Link] the
location. Then click on the Next button.
17
Step7:Then itwillask [Link] ontheInstall button.
Step8:AfterclickingonInstall,itwilltakeabout1minutetoinstalltheVisualStudioCode on your device.
18
Step 9:After the Installation setup for Visual Studio Code is finished, it will show a window like
this below. Tick the “Launch Visual Studio Code” checkbox and then click Next.
Step10:Afterthepreviousstep,[Link]
youcancreateanewfileintheVisualStudioCodewindowandchoosealanguageofyours to begin your
programming journey!
19
E-SHOP-WEBSITE
Frontend of E-Shop Website — Project Report
1. Introduction
The frontend of the e-commerce website is the user-facing layer that provides product
discovery, browsing, purchase flow, and account management. It is developed using modern
web standards (HTML5, CSS3, JavaScript) and aims to be responsive, accessible, and
performant. The frontend interfaces with backend APIs for product data, authentication, cart
and orders.
2. Objectives
Provide intuitive, fast product browsing and search.
Allow secure shopping cart and checkout interactions.
Deliver responsive layouts across devices (mobile → desktop).
Ensure accessibility (WCAG best practices) and cross-browser compatibility.
Keep UI components reusable and maintainable.
3. Tech Stack & Libraries
Markup / Styling: HTML5, CSS3 (Sass optional)
Layout / UI framework: Flexbox / CSS Grid and optionally Bootstrap CSS
Interactivity: Vanilla JavaScript (ES6+) or React (if SPA is required)
State & API: Fetch API / Axios for REST calls
Build tools (optional): npm, Webpack/Vite
Icons & Fonts: Google Fonts, Font Awesome / Heroicons
Accessibility: ARIA attributes, semantic HTML
Note: choose React if your project requires dynamic client routing or complex state. For a
simple multipage site, HTML/CSS/JS is sufficient.
4. Key Frontend Features
Home page with featured products and banners
Product listing (category pages) with filtering and sorting
Product detail page with gallery, reviews, specifications
20
Shopping cart with quantity updates & subtotal calculation
Checkout form (shipping/payment) — client-side validation
User authentication (login/signup), profile & order history
Admin pages (optional) for product CRUD (if included)
Search with suggestions and keyboard accessibility
Responsive behaviour and progressive enhancement
5. Information Architecture / Pages
1. Home — hero banner, featured categories, trending products, offers.
2. Category / Product Listing — grid of product cards, filters (price, brand, rating),
pagination/infinite scroll.
3. Product Detail — title, price, images, description, add to cart, related products.
4. Cart — list of items, qty controls, coupon input, subtotal, proceed to checkout button.
5. Checkout — address form, shipping options, payment method selection, order
summary.
6. Authentication — login, register, reset password.
7. User Dashboard — order history, profile edit, saved addresses.
8. Admin (optional) — product management, order management, analytics.
6. UI Components & Reusable Patterns
Header: logo, search box, nav links, user icon, cart icon with badge.
Footer: links (about, contact, policies), newsletter signup.
Product Card: image, title, price, rating, add to cart button.
Filter Sidebar: collapsible sections for attributes.
Modal: for quick product preview or login.
Form Elements: accessible inputs, select, radio buttons with validation messages.
21
HTML Code of E-Shop Website:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="[Link]
crossorigin="anonymous"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>E-Commerce Website</title>
<!-- Font Awesome Library -->
<link rel="stylesheet" href="[Link]
awesome/6.2.1/css/[Link]" />
<!-- <link rel="stylesheet" href="css/[Link]" /> -->
<!-- Css -->
<link rel="stylesheet" href="css/[Link]" />
<!-- -->
</head>
<body>
<header>
<a href="[Link]" class="logo"><img src="img/[Link]" alt="" class="logo" /></a>
<nav>
<ul id="navbar">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="[Link]">Blog</a></li>
<li><a class="active" href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li id="lg-bag">
<a href="[Link]"><i class="fa fa-bag-shopping"></i></a>
</li>
<a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
</ul>
</nav>
<div id="mobile">
<a href="[Link]"><i class="fa fa-bag-shopping"></i></a>
<i id="bar" class="fas fa-outdent"></i>
</div>
22
</header>
<!-- ===================== -->
<!-- P-Header Section -->
<!-- ===================== -->
<section id="page-header" class="about-header">
<h2>#KnowUs</h2>
<p> Lorem ipsum dolor sit amet, consectetur </p>
</section>
<!===========================-->
<!-- ===================== -->
<!-- About Section -->
<!-- ===================== -->
<section id="about-head" class="section-p1">
<img src="img/about/[Link]" alt="">
<div>
<h2>Who We Are?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris] nisi ut aliquip ex ea
commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id
est laborum.</p>
<abbr tittle="">Create stunnig images with as much or as little control as you like
thanks to a choice of basic
and creative modes.</abbr>
<br><br>
<marquee bgcolor="#ccc" loop="-1" scrollamount="5" width="100%">Create stunnig
images with as much or as little
control as you like thanks to a choice of basic and creative modes.</marquee>
</div>
</section>
<!-- ===================== -->
<!-- About Section -->
<!-- ===================== -->
23
<section id="about-app" class="section-p1">
<h1>Download Our <a href="#">App</a></h1>
<div class="video">
<video autoplay muted loop src="img/about/1.mp4"></video>
</div>
</section>
<!-- ===================== -->
<!-- Features Section -->
<!-- ===================== -->
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>xHappy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/[Link]" alt="">
<h6>F24/7 Support</h6>
</div>
</section>
<!-- ===================== -->
<!-- Newsletter -->
<!-- ===================== -->
<section id="newsletter" class="section-p1 section-m1">
24
<div class="newstext">
<h4>Sign Up For Newsletters</h4>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email adress">
<button class="normal">Sign Up</button>
</div>
</section>
<!-- ===================== -->
<!----- Footer -------->
<!-- ===================== -->
<footer class="section-p1">
<div class="col">
<img src="img/[Link]" alt="" class="logo" />
<h4>Contact</h4>
<p><strong>Adress:</strong> Ismailia,Egypt</p>
<p><strong>Phone:</strong> 0101010101010</p>
<p><strong>Hours:</strong> 10:00am -11:00pm, Sat -Thu</p>
<div class="icon follow">
<h4>Follow US</h4>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About Us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign In</a>
25
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="img/pay/[Link]" alt="" />
<img src="img/pay/[Link]" alt="" />
</div>
<p>Secured Payment Gateways</p>
<img src="img/pay/[Link]" alt="" />
</div>
<div class="copyright">
<p>© 2022, Web Development Project - Group18</p>
</div>
</footer>
<!--
==================================================================
========================================== -->
<script src="[Link]"></script>
</body>
</html>
[Link]
26
[Link]
[Link].
27
[Link]
[Link]
28
Java Script Code
const bar = [Link]("bar");
const close = [Link]("close");
const nav = [Link]("navbar");
if (bar) {
[Link]("click", () => {
[Link]("active");
});
}
if (close) {
[Link]("click", () => {
[Link]("active");
});
REFERENCES
GitHub:For Taking reference for js
Google : valuable coding example
Youtube:varioustutorialandGuidesonwebdesigning
Chatgpt : For Error detection
29
30