Web Development Project: Unique Wears E-commerce Website

Desklib provides past papers and solved assignments for students. This project details e-commerce website development.

Web Development

Table of Contents
Introduction.................................................................................................................................................3
Design Documentation................................................................................................................................4
Development...............................................................................................................................................7
Testing & Validation..................................................................................................................................15
Browser Compatibility:..........................................................................................................................15
Screenshots:..........................................................................................................................................17
HTML Validation:...................................................................................................................................19
Deployment...............................................................................................................................................20
Appendix...................................................................................................................................................23
Figure 1: Home Interface Annotated Slide..................................................................................................5
Figure 2: About Interface Annotated Slide..................................................................................................5
Figure 3: Product Interface Annotated Slide...............................................................................................6
Figure 4: Contact Interface Annotated Slide................................................................................................7
Figure 5: Product Description Interface Annotated Slide............................................................................8
Figure 6: First process to link page and import CSS files..............................................................................9
Figure 7: Define page headings and footer..................................................................................................9
Figure 8: Home Interface...........................................................................................................................10
Figure 9: Defining website content and creating tables............................................................................10
Figure 10: About Interface.........................................................................................................................11
Figure 11: Providing product images.........................................................................................................11
Figure 12: Product Interface......................................................................................................................12
Figure 13: Creating Feedback Form...........................................................................................................12
Figure 14: Map Integration process...........................................................................................................13
Figure 15: Contact Interface......................................................................................................................13
Figure 16: Product description code..........................................................................................................14
Figure 17: Product Description Interface...................................................................................................14
Figure 18: Creating contact form...............................................................................................................15
Figure 19: Order Interface.........................................................................................................................15
Figure 20: Google Chrome.........................................................................................................................16
Figure 21: Google Chrome Browser...........................................................................................................17
Figure 22: Internet Explorer......................................................................................................................17
Figure 23: Home Slide................................................................................................................................18
Figure 24: About Slide...............................................................................................................................18
Figure 25: Product Slide.............................................................................................................................19
Figure 26: Contact Slide.............................................................................................................................19
Figure 27: Product Description Slide..........................................................................................................20
Figure 28: Order Slide................................................................................................................................20

Figure 29: HTML Validation.......................................................................................................................21
Figure 30: HTML Validation Interface........................................................................................................21
Figure 31: Download XAMPP Server..........................................................................................................22
Figure 32: XAMPP Servers services start...................................................................................................23
Figure 33: Website running on localhost...................................................................................................23

Introduction
The given assignment is basically based on the implementation of the website development. In
this assignment the website will be implemented. The given assignment is having two different
section first one is based on the development process and the second one is based on the
documentation of the above created website. The documentation is having different aspects
like design documentation, development, testing and validation, deployment. Each and every
aspect of the website development process is successfully described in this report. The
wireframe, screenshots and the code also attached in this report of this website development
assignment. In the appendix section the website is successfully attached.

Design Documentation
In this section the design documentation of the created website is described. This section is
containing annotated diagram or wireframes of the created website.
Home Page:
Figure 1: Home Interface Annotated Slide
This is home page wireframe mockup annotated image. This page is having a banner image with
an attractive user interface. Each and every page is properly linked in this developed website.
The annotated signs successfully describes the working and the functionality of this home
interface.
About Page:

Figure 2: About Interface Annotated Slide
This is about page wireframe mockup annotated image. This slide is having menu bar with some
content that describe the working and the purpose of the website. This page is having an
opening hour table and in this table the working hours of this shopping website is given. The
annotated signs successfully describe the working of this about page.
Product Page:
Figure 3: Product Interface Annotated Slide
This is product page wireframe mockup annotated image. This interface is having three
different product image of men, women and children also. There is menu bar also exist. Each

and every images is successfully connected and working properly. The annotation describe each
section of this product page.
Contact Page:
Figure 4: Contact Interface Annotated Slide
This is contact page wireframe mockup annotated image. This slide is having a feedback form,
address and map integrity. The user can give their feedback by using this contact page. The map
integrity is successfully implemented in this website’s contact page. The annotated signs
successfully describe each and every section and the working of this contact page.
Product Description Page:

Figure 5: Product Description Interface Annotated Slide
This wireframe define product description page having product images with name and the price
of the product. The annotated signs is having full description of the used images, content and
other.
Development
In this section the development part of the assignment will be describe. The website is created
using HTML, CSS and JavaScript only. As given in the assignment brief there is only frontend
part is implemented of this website. Each and every page is successfully linked in this website.
In the section the screenshot of the created website and the code is given.

Figure 6: First process to link page and import CSS files.
Figure 7: Define page headings and footer

Figure 8: Home Interface
Figure 9: Defining website content and creating tables

Figure 10: About Interface
Figure 11: Providing product images

Figure 12: Product Interface
Figure 13: Creating Feedback Form