JS Wedding Planners Design Document

Running head: JS WEDDING PLANNERS DESIGN DOCUMENT
JS Wedding Planners Design Document
Name of the Student:
Name of the University:
Author note:

2
JS WEDDING PLANNERS DESIGN DOCUMENT
Table of Contents
DESIGN DOCUMENTAION...................................................................................................3
Design Decisions....................................................................................................................5
Logic Application...................................................................................................................5
Development..........................................................................................................................6
Home.html..............................................................................................................................6
Testing and validation..............................................................................................................18
Cross-browser Testing.........................................................................................................18
Google Chrome....................................................................................................................18
The video section and the table is perfectly aligned and visible..........................................18
Microsoft Edge.....................................................................................................................20
HTML Validation.................................................................................................................22
CSS validation......................................................................................................................23
Deployment..............................................................................................................................23

3
JS WEDDING PLANNERS DESIGN DOCUMENT
DESIGN DOCUMENTAION
Home page: This is the landing page for the website. The website audience is to be greeted
on this page using a beautiful carousel and welcome message.
About Us page: As the name suggests, this page is meant store and display all details about
the website. The page is meant to produce visual and audio elements to grab the attraction of
the audience. A video player is used here, to produce more authentic and attractive
information to the audience. The page will also have a time table for the business’ opening
hours.
Services page: This will be the service elaboration page for the website. Here, all the
services that the website offers will be enlisted and described. The services will be both

4
JS WEDDING PLANNERS DESIGN DOCUMENT
graphically and textually represented. A special card view will be presented to these images
and informative sections. The card view will allow the users to have a cool shady look to
their interface whenever they hover over these sections.
Contact Us page: This is the page that the users will use to communicate with the company.
The users will be required to fill in the contact us form and click on submit to enrol for a
query. The message will be forwarded to the website stakeholders along with the other
necessary user details that he or she fills in. This page also has a special map area where the
user can get directions and location of the company’s office.

5
JS WEDDING PLANNERS DESIGN DOCUMENT
Design Decisions
Most importantly, each of the pages have been designed to carefully serve the purpose
of both a business-informative website and also an attractive and interactive website. The use
of various graphical images, videos and slideshows have added glitters to the website. The
Navigation bar at the top of the page is a crucial design element that has been implement. It is
necessary for the users to be able to navigate between the pages, from whichever page that
they will to. Also, the currently visited page is highlighted on the nav-bar for the better
understanding of the users.
The #FFF and #00F has been used as the primary colour combination for the entire
website, with contrasting #000 font colours. The use of the White colour added greatly to the
theme of the business, that is marriage. Furthermore, the Sans-Serif fonts have been used in
bold for clear elaboration of the textual contents and headings.
Logic Application
The Contact Us page uses JavaScript codes to check if all the inputs are valid and
properly entered by the user at the time of submitting. This check makes sure that the back-
end will not receive any erroneous data from the website, which may otherwise lead to
system failure or improper data collection and access. The website communicates with the
user regarding such errors with the help of the Alert option.

6
JS WEDDING PLANNERS DESIGN DOCUMENT
Development
Home.html
<!DOCTYPE HTML>
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Wedding Planners</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Style.css">