Web Development Project Report: RPTN Website Design and Implementation

Desklib provides past papers and solved assignments for students. This report details the RPTN website development.

Web Development {RPTN}

Table of Contents
Design Documentation...................................................................................................................................4
Development................................................................................................................................................17
Testing & Validation....................................................................................................................................25
Browser Compatibility:............................................................................................................................25
Screenshots:.............................................................................................................................................29
HTML Validation....................................................................................................................................31
Deployment:.................................................................................................................................................32
Design Principle...........................................................................................................................................34
Color Scheme...............................................................................................................................................34
Responsive Images:.....................................................................................................................................36
Appendix:.....................................................................................................................................................41
Figure 1: Home page interface in browser form............................................................................................5
Figure 2: Home page interface in tablet form................................................................................................6
Figure 3: Home slide interface in mobile form..............................................................................................7
Figure 4: About page interface in browser form............................................................................................8
Figure 5: About page interface in tablet form................................................................................................8
Figure 6: About page interface in mobile form.............................................................................................9
Figure 7: Product page interface in browser form.......................................................................................10
Figure 8: Product page interface in tablet form...........................................................................................11
Figure 9: Product page interface in mobile form.........................................................................................12
Figure 10: Contact page interface in browser form.....................................................................................13
Figure 11: Contact page interface in tablet form.........................................................................................14
Figure 12: Contact page interface in mobile form.......................................................................................15
Figure 13: Product description page interface in browser form..................................................................16
Figure 14: Product description page interface in tablet form......................................................................17
Figure 15: Product description page interface in mobile form....................................................................18
Figure 16: CSS code of website...................................................................................................................19
Figure 17: Index page code of website web page........................................................................................19

Figure 18: Index interface of website..........................................................................................................20
Figure 19: CSS code of website...................................................................................................................20
Figure 20: About page code of website.......................................................................................................21
Figure 21: About interface of the website....................................................................................................21
Figure 22: CSS code of website...................................................................................................................22
Figure 23: Product page code of this website..............................................................................................23
Figure 24: Product interface of this website................................................................................................23
Figure 25: CSS code of the website web pages...........................................................................................24
Figure 26: Contact page code of this website..............................................................................................24
Figure 27: Contact interface of this website................................................................................................25
Figure 28: Product description code of the website.....................................................................................25
Figure 29: Product description interface of the website..............................................................................26
Figure 30: Footer code of this website.........................................................................................................26
Figure 31: Footer output of this website......................................................................................................26
Figure 32: Firefox browser..........................................................................................................................27
Figure 33: Firefox browser..........................................................................................................................27
Figure 34: Google chrome...........................................................................................................................28
Figure 35: Google Chrome browser............................................................................................................28
Figure 36: Internet explorer browser...........................................................................................................29
Figure 37: Internet explorer.........................................................................................................................29
Figure 38: Home interface...........................................................................................................................30
Figure 39: About Interface...........................................................................................................................30
Figure 40: Product Interface........................................................................................................................31
Figure 41: Contact Interface........................................................................................................................31
Figure 42: Product Description Interface.....................................................................................................32
Figure 43: HTML Validation.......................................................................................................................32
Figure 44: HTML Validation.......................................................................................................................33
Figure 45: HTML Validation new...............................................................................................................33
Figure 46: XAMPP server download process..............................................................................................34
Figure 47: XAMPP server services..............................................................................................................34
Figure 48: Design principle of product interface.........................................................................................35
Figure 49: Color Scheme.............................................................................................................................36
Figure 50: Home responsive interface.........................................................................................................37
Figure 51: About responsive interface.........................................................................................................38

Figure 52: Product Responsive interface.....................................................................................................39
Figure 53: Contact responsive interface......................................................................................................40
Figure 54: Product details responsive interface...........................................................................................41

Design Documentation
The design documentation of this assignment will contains the wireframes of each and every
webpages of this created website. There are different wireframes will be described including
browser form wireframe, tablet form wireframe and mobile form wireframe also. Each and every
web browser will be having annotation also to describe the functionality and the reason of
choosing particular label of button.
Home Screen Wireframes:
The given wireframes about the home screen of the website. The home page of this website
contain a banner images and a video also to give more efficiency to the website. The
programming language which is used is HTML and CSS. Three different wireframe is given
including browser form, tablet form and mobile form also.
Figure 1: Home page interface in browser form

Figure 2: Home page interface in tablet form

Figure 3: Home slide interface in mobile form
About screen wireframe:
The given wireframe is about the about interface of this website. The about page of this website
contain the some description about the website and opening timing in a table form. There are
also three different form of wireframe available.

Figure 4: About page interface in browser form
Figure 5: About page interface in tablet form

Figure 6: About page interface in mobile form.
Product screen wireframe:
The given wireframe is about the product page of this website. This page contains the different
product available in with some particular information also. There are also three different form of
wireframe is given.

Figure 7: Product page interface in browser form

Figure 8: Product page interface in tablet form

Figure 9: Product page interface in mobile form.
Contact screen wireframes:
The given wireframe is about the contact screen of this website. In the contact page there are a
feedback form available including address and map integration also. There are also three
different wireframe available.