AMITY SCHOOL OF ENGINEERING

Practical Training Project

On
Website Development

Guided By:

Submitted By:

Mrs. Sheetal Sharma

Deepansh Pandey

Dept. Computer Science

A12405212013

ASE

Roll no - 2013
CSE 5A (ASE)

ACKNOWLEDGEMENT

I would like to thank my Faculty Guide Mrs. Sheetal Sharma, at the department of
Computer Science for her advice throughout the development of my project. Her patience,
enthusiasm, responsibility and meaningful guidance helped me very much in directing this
project to its final destination.
I would also like to thank my family, for their constant support without which this project
wouldnt be complete.

Deepansh Pandey
A12405212013
B.Tech (CSE)
Batch of 2012-2016
ASE, Noida

ABSTRACT

The website Pandeypriya has been developed for a north india based company
Pandeypriya E Solution in an effort to make it more attractive and dynamic. The company
website has been developed using HTML to structure the content, CSS for styling the
content and JAVASCRIPT for animation. We developed the website at the domain named
www.pandeypriya.com. This website is well designed and has a proper arrangement of
links and images so that the browser may easily access through the website.

TABLE OF CONTENTS

ABSTRACT.....................................................................................................i

Chapter 1: INTRODUCTION.................................................................................................1
Chapter 2: MATERIALS AND METHODS..........................................................................2
2.1 - Software Requirements
2.2 Methodology

Chapter 3: RESULT ...................................................................4

Chapter 4: DISCUSSIONS AND CONCLUSION.................................................................5
Appendix......

INTRODUCTION

The purpose of our project is to build a dynamic website. For this we have worked on
learning basics of html, css and javascript. During our project, we contacted Pandeypriya E
Solutions for building their website. Pandeypriya E Solutons is a north Indian company
that is specialized in data entry, Data Processing, Data extracting, Web promotion, product
entry, software development and much more. They are promoted by professional expertise
in both the domestic as well as international projects. They provide high quality services to
their clients at reasonable cost and complete the work in given time frame. The company
old website is based on HTML 4.0 and has no customer support facility and animations in
it. We decide a design and start working on building website. The company domain has
been purchased from godaddy and site hosting service is from 3ix. We have used HTML,
CSS and JAVASCRIPT for building their website.
HTML is used to design the building blocks of the website which gives a structure to the
content. It allows the images and links to be embedded into a single form and many tags
have been used to make the website more dynamic, individualistic and attractive. It allows
to make web pages which can be used to represent an individual, a specific group or the
whole community. It is used for professional and personal use.
CSS is the cascading style sheets which defines the look up and the layout of the text and
the images present in the content. It helped to gain control the presentation of the pages
without even changing the html. Different properties were use that affected the display of
the content under this section. It responsible for the design of the webpage, what we see on
a website is because of css, it defines the style ie. Margins, font,color etc.
JAVASCRIPT is used by us for animation. It affects the behavior of the HTML web pages.
It allows user interaction, communication and also help in document alteration. The syntax
has the java language. It is responsible for making our page eye catching. Using java we
have put sliders, google maps, live chats in our website.

MATERIALS REQUIRED

The software requirements for this project are as follows:

1. Notepad
2. Dreamweaver
3. Filezilla
Domain brought from http://in.godaddy.com/
Further used languages are:
1. HTML
2. CSS
3. JAVASCRIPT

METHODOLOGY

The index page:

The index page is the starting of the website whenever someone enters a domain name. The
user is automatically directed to the index page so using css. We have made the page look
eye catching as it represents the whole website.

The home page:

The home page is the main starting of website so we have put scrolling effect using
javascript to make page look more attractive. We have added portfolio, images to make the
main page contain all necessary information about the company.

The Portfolio page:

We have put all work experience and customer reviews under this page. The customer
reviews is the most important thing that will encourage other clients to provide projects to
company. We have put special enlarging effect using css in this page.

The service page:

We have described all the services provided by the company with all strategies. We have
also provided PayPal one click payment option in these web pages.

The about us page:

The about us page described about all details, qualification, ideology and reasons to choose
the company. We have subdivided the into who we are where company information is
given and why us where reason to choose company is given.

The contact us page:

It contains all relevant information about how to contact company. Here all office address
and phone numbers are provide and a half page google map. A customer query form is also
put on this page which emails all detail to company email id.

THE CASCADING STYLE SHEETS

body {
margin:0px;
font-family:"Open Sans";
background-color:#FFFFFF;
font-size:14px;
color:#666666;
}
h1,h2,h3,h4{
color:#000000;
}

a{
outline:none;
color:#000000;
text-decoration:none;
}
a img {
margin-top:0px;
display:block;
}

p{
font-size:14px;
line-height:24px;
letter-spacing:0.05em;
color:#959595;
float:right;
}
pa{
color:#666666 ;
}
#header {
background-color:#EAEAEA;
height:100p%;
margin:0;
width:100%;
z-index: 99;
font-size:16px;
}
#header div {
margin-left:100px;
overflow:hidden;

}
#header div a#logo {
display:inline;
float:left;
}
#logo
{
height:100px;
width:200px;
float:left;
position:relative;
}
.navbar {
margin-top:40px;
height: 100px;
padding: 0;
margin-left:240px;
position: absolute;
}
.navbar li

{
height:auto;

width: 200px;
float: left;
text-align:center;
list-style:none;
font: 'Open Sans',Arial, Helvetica, sans-serif;
}
.navbar a {
padding: 0px 0;
color:#000000;
display:block;
}
.navbar li:hover, a:hover{background-color:#999999; color:#ffffff;}
.navbar li ul

{
display:none;
height:auto;
padding: 0px;
}

.navbar li:hover ul

display:block;
}
.navbar li ul li {background-color:#EAEAEA; }

.navbar li ul li a

{
text-align:justify ;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
border-left: 1px solid #CCCCCC ;
border-right: 1px solid #CCCCCC;
}

.select {
color:#FFFFFF;
background-color:#999999;
}
#body {
margin:0 auto 97px;
min-height:1440px;
padding:38px 29px 0;
width:1300px;
}
#testi.start h2{
margin-left:120px;
}

#testi.start div{
margin-top:10px;
MARGIN-LEFT:100PX;
text-ALIGN:justify;
}
#guru.over{
padding-top:30px;
margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#soft.content{
padding-top:30px;
margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#data.content{
padding-top:30px;

margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#seo.content{
padding-top:30px;
margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#seo.content img{
margin-left:400px;
}
#seopack.content img{
margin-left:100px;
margin-top:30px;
}
#seopack.content form{
margin-left:700px;

margin-right:200px;
padding-bottom:30px;
}
#virt.content{
padding-top:30px;
margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#virt.content table{ border-collapse:separate; border-spacing: 2px; }

#webd.content{
padding-top:30px;
margin-left:100px;
text-align:justify;
margin-right:100px;
padding-bottom:30px;
}
#about.detail {

padding-top:30px;
padding-bottom:30px;
margin-left:100px;
margin-right:100px;
text-ALIGN:justify;
}
#why.us table{
padding-top:30px;
margin-left:100px;
margin-right:100px;
text-align:justify;
padding-bottom:30px;
}
#bottom_mask.mask2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 99;
background: url(../img/bottom_mask.png) no-repeat center top;

}
#googleMap{
width:100%;
height:520px;
}
#contacttext.lony h1{
text-align:left;
margin-left:100px;
margin-top:20px;
}
#contacttext.lony img{
width:100%;
height:2px;
margin-left:100px;
margin-right:100px;
margin-top:0px;
}
#form.fill .chalu table{
margin-left:40px;
margin-top:0px;
}

#footer {
background:url(../img/footer.png) repeat-x;
width:100%;
height:150px;
}
#footer p{
color:#000000;
}
#footer.contact table{
width:940px;
padding-bottom:10px;
}

RESULT
Thus the final website of PANDEYPRIYA E SOLUTION is shown below:
1. The index Page

2. The home page:

3. The portfolio page:

4. The service page:

5. About us page:

6. Contact us page:

DISCUSSION
As discussed above, a website is a collection of web pages containing information, images,
links. Lastly, we are able to create a website for the company named PANDEYPRIYA E
SOLUTIONS using HTML for structuring the content, CSS for providing style to the web
page and JAVASCRIPT used for making the HTML web page for animation.
Therefore, these features make the website more attractive and more dynamic than before
with much more features included in the developed website.
Thus the website above has been well designed and helps the browser to access easily
throughout the website without any complications. The new website has been developed in
HTML 5.0 and have latest feature like customer chat,

customer query form, sliders,

magnifying texts and pictures , fading text. These effects had made the website to look
more attractive and eye catching. The new website will allow more interaction opportunity
to the customers.

CONCLUSION AND RECOMMENDATION

Website - Pandeypriya E Solutions is a website designing project where we have used

HTML, CSS and JAVASCRIPT to add more attractive features to it.
Pandeypriya E Solution is a north Indian company that is specialized in fields like data
entry, website designing, HTML promoting, Data Processing, Data extracting, Web
promotion, copywriting, product entry and many more. There is a requirement of more
dynamic and eye catching website for the company. We worked hard and researched a lot
on various latest technology updates like parallax scrolling, Google maps, live chat etc.
These things made the website look attractive. This website was aimed to be easily
accessible by the browser and compatible with all the devices. The problem during this
practical training taught us a lot about things that we can never learn from a book.

FUTURE IMPLICATIONS

In Website - Pandeypriya E Solution website we have added different type of features

like different designs of cascading style sheets and animations using JavaScript. We would
surely try to design more better and eye catching website and upgrade more features in
website we develop in future. We think there is great scope of website designing. We
would try to discover different features of website so that more dynamic website can be
designed. We would also try to develop our own built features that can be used to sell to
other companies. We can develop our own songs and shopping website.

REFERNCES
1. Black Book for HTML5
-

Covers CSS3, JavaScript, XML, XHTML, PHP and jQuery

2. Blog and posts

-

https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/. Here we learn about

making parallax scroll which is used on our home page.

3. Website
-

http://www.w3schools.com/html/

http://www.w3schools.com/css

http://www.codecademy.com/
These websites are used to learn some codes and running small codes.

4. Google
5. Forums
-

http://www.htmlforums.com/ where some similar problems we are facing

already discussed which help us to save lots of time.

6. Pandeypriya
-

The data provided by the company that is to be put on their site. They also
helped up financially by paying the cost of domain and hosting.

7. Godaddy.com
-

The domain Pandeypriya.com has been bought from this domain seller.