Website Development for InspireMe Organization: A Comprehensive Report

Desklib provides solved assignments and past papers to help students succeed.

Part A

Contents
Introduction......................................................................................................................................2
Designing.........................................................................................................................................3
Development....................................................................................................................................8
Testing...........................................................................................................................................16
Home page:................................................................................................................................16
About us:....................................................................................................................................17
Contact us:.................................................................................................................................18
Video:........................................................................................................................................19
Video page:................................................................................................................................20
Set up.........................................................................................................................................20
References......................................................................................................................................23
Figure 1: Home page.......................................................................................................................4
Figure 2: About us screen................................................................................................................5
Figure 3: Contact us screen..............................................................................................................6
Figure 4: Video screen.....................................................................................................................7
Figure 5: Available Videos screen...................................................................................................8
Figure 6: Home screen code1..........................................................................................................9
Figure 7: Home screen code 2.......................................................................................................10
Figure 8: About us screen code.....................................................................................................11
Figure 9: Style.css code1...............................................................................................................12
Figure 10: Style.css code 2............................................................................................................13
Figure 11: Contact us screen code.................................................................................................14
Figure 12: Video screen code........................................................................................................15
Figure 13: Available video screen code.........................................................................................16
Figure 14: Screenshot of Chrome browser....................................................................................17

Figure 15: Screenshot of Internet explorer....................................................................................18
Figure 16: About us page on Chrome............................................................................................18
Figure 17: On internet explorer.....................................................................................................19
Figure 18: Contact us on Chrome..................................................................................................19
Figure 19: On Internet Explorer....................................................................................................20
Figure 20: Videos..........................................................................................................................20
Figure 21: Videos page..................................................................................................................21
Figure 22: Step 1............................................................................................................................21
Figure 23: Step 2............................................................................................................................22
Figure 24: Step 3............................................................................................................................22
Figure 25: Step 4............................................................................................................................23
Figure 26: Step 5............................................................................................................................23

Introduction
The report contains a description of the work that is performed on the given scenario that is
based on website development for the InspireMe organization that uploads the videos for the
people who miss the sessions. The website is created by using Html, CSS, and Javascript, the
screenshots are provided in the report. The overall website contains the Home screen, About us
screen, Contact us screen, Videos screen that will direct the user to the Videos that are present on
another screen. Therefore, the overall website contains 5 different pages.

Designing
For the designing part, there are some wireframes that were created and the screenshots are
attached here:
Home Screen
Figure 1: Home page

About screen
Figure 2: About us screen
Contact Screen

Figure 3: Contact us screen
(Johnson et al., 2015)
Videos Page

Figure 4: Video screen
Videos available screen

Figure 5: Available Videos screen
(Meloni, 2016)

Development
The code through which the overall website is created is given below:
Figure 6: Home screen code1

Figure 7: Home screen code 2

Figure 8: About us screen code