Development and Deployment of a Responsive E-commerce Website

Desklib provides past papers and solved assignments. This project details the creation of a women's fashion e-commerce website.

Web application development

Table of Contents
Introduction...........................................................................................................................................4
Design Documentation..........................................................................................................................5
Home Page........................................................................................................................................5
About Page........................................................................................................................................7
Product Page......................................................................................................................................9
Contact Page....................................................................................................................................12
Development.......................................................................................................................................14
Home Page......................................................................................................................................14
About Page......................................................................................................................................16
Product page....................................................................................................................................18
Product (short) page.........................................................................................................................19
Contact Page....................................................................................................................................21
Testing.................................................................................................................................................22
On chrome.......................................................................................................................................22
On Internet Explorer........................................................................................................................23
HTML Validation..................................................................................................................................24
Deployment.........................................................................................................................................25
Design Principle..................................................................................................................................27
Color Scheme......................................................................................................................................28
Responsive Images..............................................................................................................................29
Appendix.............................................................................................................................................32

List of figures
Figure 1: Browser Home page...............................................................................................................5
Figure 2: Tablet Home page..................................................................................................................5
Figure 3: Smart phone Home page........................................................................................................6
Figure 4: Browser About Page..............................................................................................................7
Figure 5: Tablet About page..................................................................................................................7
Figure 6: Smart Phone About page........................................................................................................8
Figure 7: Browser Product page............................................................................................................9
Figure 8: Tablet Product page..............................................................................................................10
Figure 9: Smart Phone Product page...................................................................................................11
Figure 10: Browser Contact page........................................................................................................12
Figure 11: Tablet Contact Page...........................................................................................................13
Figure 12: Smart Phone Contact page.................................................................................................14
Figure 13: Code for home page 1.......................................................................................................14
Figure 14: Code for home page 2........................................................................................................15
Figure 15: Home page of website........................................................................................................15
Figure 16: Home page of website 2.....................................................................................................16
Figure 17: Code for about page 1........................................................................................................16
Figure 18: Code for about page 2........................................................................................................17
Figure 19: About page of website........................................................................................................17
Figure 20: Code for product page 1.....................................................................................................18
Figure 21: Code for product page 2.....................................................................................................18
Figure 22: Product page of website.....................................................................................................19
Figure 23: Code for product (short)1...................................................................................................19
Figure 24: Code for product (short) 2..................................................................................................20
Figure 25: Product short page of website.............................................................................................20
Figure 26: Code for contact page 1......................................................................................................21
Figure 27: Code for contact page 2......................................................................................................21
Figure 28: Contact page of website.....................................................................................................22
Figure 29: Testing on chrome 1...........................................................................................................22
Figure 30: Testing on Chrome 2..........................................................................................................23
Figure 31: testing on Internet explorer 1..............................................................................................23
Figure 32: Testing on internet explorer 2.............................................................................................24
Figure 33: HTML Validation1.............................................................................................................24
Figure 34: HTML Validation2.............................................................................................................25
Figure 35: HTML Validation3.............................................................................................................25
Figure 36: Step 1.................................................................................................................................26
Figure 37: Step 2.................................................................................................................................26
Figure 38: Design 1.............................................................................................................................27
Figure 39: Design 2.............................................................................................................................27
Figure 40: Color Scheme......................................................................................................................28
Figure 41: Home Responsive...............................................................................................................29
Figure 42: About Responsive...............................................................................................................30

Figure 43: Product Responsive............................................................................................................31
Figure 44: Contact Responsive............................................................................................................32

Introduction
The below assignment is based on the development of the website. In the given assignment first,
need to develop the website by using CSS & HTML. After the developing the website, required to
create the mock-ups by using the balsamic. Then, make documentation for explaining the different
features of the website like Home page, Contact page, about page & Product page. This website is
based on the online shopping for women’s as it consist of many products for women’s. At the end of
this assignment required to attach the website.

Design Documentation
Home Page
This part explains the designing of the documentation of the website that is developed. This part
contains the screenshot of the mock-ups.
Figure 1: Browser Home page
The Home page consist of navigation bar (Home, about, product & contact), Heading, Image & Video
player. Label for (follow us on ) & symbols of Facebook, instagram, twitter & LinkedIn.

Figure 2: Tablet Home page
This Home page is of Tablet, it consist of Heading, Image , Video player & navigation bar (Home,
about, product & contact). Used Symbols of Facebook, instagram, twitter & LinkedIn & Label for
(follow us on).

Figure 3: Smart phone Home page
This Home page is of Smart phone, it contains the headings, images, video player & navigation bar
(like Home, about, product & contact). It also contains the symbols of Instagram, Twitter, Facebook
& LinkedIn & Label for follow us.
About Page
Figure 4: Browser About Page

This About page is of browser, it contains the navigation bar (includes Home, About, Product &
Contact), Headings, About the product, & dummy content that is table for the timing of opening the
website & label for follow us on , symbols of Facebook, Instagram, Twitter & LinkedIn.
Figure 5: Tablet About page
This about page is of Tablet.

Figure 6: Smart Phone About page
This about page is of smart Phone.

Product Page
Figure 7: Browser Product page
This product page is of browser, it contains the navigation bar (includes Home, About, Product &
Contact), label for follow us on , symbols of (Facebook, Instagram, Twitter & LinkedIn), Products
headings, images for product.

Figure 8: Tablet Product page
This product page is of Tablet.