Website Development Project

This project report documents the development of a website focused on music, movies, and food. The report details the problem statement, research conducted on similar websites (including examples like streetfoodcinema.com, eatseehear.com, and austin360.com), technology selection (HTM...Read More

Table of Contents
1. PROBLEM DESCRIPTION.................................................................2
2. RESEARCH......................................................................................2
3. TECHNOLOGY SELECTION AND SITE ARCHITECTURE.......................2
4. LOW FIDELITY PROTOTYPE.............................................................4
5. DEVELOPMENT PLAN.....................................................................5
6. TESTING PLAN................................................................................5
7. SITE EVALUATION..........................................................................6
8. DEPLOYMENT................................................................................ 6

Problem Description
Nowadays everyone wants good entertainment and food and they can spend a lot
of money for that. So on this website everyone can explore the the content of the
website, in this website there are three sections and that are music, movies and
food. In today’s world everyone loves to listen music and always waiting for the
best music in music section user can able see the latest music with its description.
Same process in the movies section where user can see the latest movie with its
description. In food section there is list of foods that are in trends right now. Those
user who are obsessed with the food and entertainment will be archetypal user of
this site. This site will be helpful for those person who are fond of music, movies
and foods because they will get the latest data on these thing on this website.
Research
The first website that I access is http://www.streetfoodcinema.com/ this site is all
about watchind movies with the food. In this there is no logo image is present over
there and there is header section. The layout of the site is in movie ticket form
where on each ticket there is description of each movie with its food items.
The second site on which I go though is http://www.eatseehear.com/ in this site the
color used black, white and orange. In this site the content is align is the vertical
form. Each section contain a movie and its description.
The next site which I access is http://www.austin360.com/ in this site it does
contain all the three section that I will use in my website and that are music,
movies and food. The site contain the text of advertisement and related material
from both the sides.
Technology Selection and Site Architecture
The component that are visible on a web page is made by the html and we can do
styling of these elements with the help of css. The latest version of the html is
html5 and I used tags of html5 to build the website and to styling I used the css3.
My website layout consist of header section in which there is logo image and the

navigation bar under which there is image slider and this is common to all pages
and there is content below of all these. I used the tags of html5 and css3 to make
the website responsive that is user can able to explore the website on all kind of
device and all size. And the website will be able to access on all the popular
browser.

Low Fidelity Prototype

Above image is the prototype of the website that I will follow to create my
website. In all the site that I access to get the idea of my website design all of the
website contain the header section so I put the header section into in which there is
company logo on the right side and navigation bar on the left side, and with the
help of this navigation bar user can navigate between the pages of the site. Below
the header section there is image slider which make the website interactive which
is also very necessary because user comes more often to the site which are much
interactive.
Development Plan
To create the whole website we have to move step by step means we have to create
one page then another we cannot build all the pages simultaneously. First I create
the home page and on home page I create header section and in header section I
put the company logo on right side and navigation bar on the left side. On home
page I decided to put image and the related text. I use the images that I put in the
image tag and text which I put in the paragraph or heading tag as per the font size
of the requirement. I will also use the table tag to set the data in ordered manner.
Then there is different pages in the website that are music, movies, food and
contact page and in all of the pages are designed in a specific manner and that is
above there is header which is common in all the pages and below of that content
of the page that will be vary according to the page.
Testing Plan
As my website contain html, css and js code so all the testing should have to done
on this. After completing the we have run the website on the browser and then test
its all aspects like color, font , images etc. My website is front end only there is not
any backend work has been done on this so testing should be done like all the
images have bee call properly or not. The code of html and css should be well
defined and should be used as per the rule. Another testing should be done that the
website should run on all the popular browser because as we don’t know which
user will use which browser so it be properly run on all the modern browser. One

more point of testing is that the website should be responsive and run on all size of
device.
Site Evaluation
In my website there is use of javascript to validate the html forms, there are two
forms i my website, by using appropriate form validation with javascript I evaluate
my website because in that way user can enter only appropriate details. First form
is on the home page in which user have give its first name, last name and select
from the given list that from where the user will heared about us, to validate this
form a javascript function checks that the name enter by the user only contain
alphabets. The second form is contact form in which there is multiple fields of user
personal details like in the text box in which user have to enter its email the
javascript function checks that the email entered by the user is appropriate email
format. So I found this optimal solution to ease of the user and the admin in that
way when user fill the wrong detail a error message will show and after which user
can modify the details.
Deployment
To made the website online that is it will be part of world wide web we have to
buy a host and that host will provide a url on which url my website will be shown.
To do this first we have to create my website fully and then upload it on the server.
The common technique of SEO are onpage and offpage. In onpage SEO first we
choose the keywords on which we have to work , the keywords is chosen in a way
that these keywords should present on the head section and the body of the code
and these keyword should be related to the website. Off Page SEO is used to
increase the position of website on that particular keyword , in off page seo we do
the article submission on the other website and in article we use that keywords
frequently.