E-PROJECT DOCUMENTATION

PROJECT TITLE:

KIDS ZONE

PROJECT TEAM

1. Student792181 STEPHAN RAZA

2. Student791920 MUHAMMAD YOUNUS DARS
3. Student786260 MALIK SHAHARYAR
4. Student789951 HAFIZ MOHAMMAD SHAHZAD AKHTER KHAN
5. Student789558 ABDUL FAREED
 Page 2 of 18

INDEX

CERTIFICATES
ACKNOWLEDGEMENT
INTRODUCTION
PROBLEM STATEMENT
WEBISTE SNAPSHOTS
CODING
SITEMAP
TASKSHEET
HARDWARE / SOFTWARE
REQUIREMENTS
 Page 3 of 18

1. CERTIFICATES

This is to certify that Stephan Raza, Muhammad Younus Dars,

Malik Shahariyar, Shahzad Khan, Abdul Fareed have successfully
completed the designing and development of “KIDS ZONE” for the
eProject of first-semester and submitted to APTECH Computer
Education.

Issued by: _______________ Dated:______________

 Page 4 of 18

2. ACKNOWLEDGMENT

First of all, we thank God for enabling us to complete our first-semester

E-Project namely, the Kids Zone.

We are very much thankful to our respectable teachers Ms Momal Turk

and Sir Anas who not only helped us in understanding the methodology
of this e-project but also guided us at every step wherever we got stuck.
They oversaw all our activities during all the process with keen interest
and also benefitted us with their creative ideas.

We are also grateful to our class-fellows, colleagues, parents and family

members who always encouraged and supported us both morally and
technically at every step to accomplish it successfully. Their appreciation
and support has made it possible for us to complete and submit our task
on time.

We are also thankful to APTECH SFC, Karachi administration who were

so kind to us in making Labs available for us inside the premises to work
on the e-project even after the class timings whenever we requested.

The credit of our success goes to them all undoubtedly.

Thank you!
 Page 5 of 18

3. INTRODUCTION
The Kids-Zone is an online place of learning and fun for toddlers. It has
been designed in such a way that it not only catches the attention but
also opens many doors to the kids that they feel themselves in a
fairyland. We have provided huge stuff for them which starts from
learning ABC. The entire website is also as easy to navigate as ABC.

It has been divided into 5 sections i.e. English, Maths, Science, Drawing
and Games. The English section includes lessons on ABC, Days Name,
Months name, Colors name, nursery rhymes etc. The English section
has been designed in order to help the kid(s) learn and enhance his/her
English vocabulary.

The Maths section includes counting with or without words, times table,
addition, subtraction, multiplication, division, shapes, time, money and
measurement lessons. This section is supported by JavaScript to create
interactive mathematical activities by taking input from the user and
validating the given input by showing results of correct or incorrect.

The Science section comprises of information related to the scientific

reasoning of a kid's life. A kid's exploration starts right from his/her
own surrounding objects and pictures or even him/herself. Therefore,
this section begins with basic concepts of science like what is science
and vocabulary related to animals, birds, flowers and parts of body
names.

The Drawing section is all about drawing objects. The Kids Zone not
only offers the kids ways to learn better drawing methods but also
provides them with tools to practise what they learn side by side. Thus,
an online resource for drawing and coloring has been provided. Many
 Page 6 of 18

coloring pages are also available for downloading, printing and doing
just on a single click.

The Games section is an online portal of educational games designed

especially a leisure as well as learning resource. The kids enter this
section and find many games which are not only there to entertain them
but also remind those lessons and also put into practice which they just
learned while navigating throught the pages of the Kids Zone.

The Kids Zone Team has put together their skills and efforts to make
this great resource available online. Please feel free to recommend this
site to your friends. There is a feedback page at the end, please
remember to give your comments, suggestions and queries throught it.
We'll be more than glad to get in touch with you!
 Page 7 of 18

4. PROBLEM STATEMENT
The www.kids-Zone website is designed for the Kids (Toddlers) for
Learning ABC’s in more creative way. The website includes the ABC with A
for …., B for….Also it includes some nursery rhymes with images so that
child can grasp more easily. One two three till 100 with an without spellings,
some basic calculation of addition and subtraction. Prayers, Galleries of basic
animals, plants, fruits, games colors, Sunday-Mondays and so on.

Requirement Specification:
The Web site is to be created based on the following requirements.
1) Home page must be designed by including various interactive
images like of a child say prayer, brushing teeth, drinking milk and so on.
2) Navigation links must be included and must be designed in an
interactive way so as to become more user friendly for the kids.
3) Font sizes must be selected appropriately thinking about the end
users.
4) Navigation must be made user friendly.
5) Menus can be included such as :
- ABC.s
- abc.s
- 123….
- Table of 2, 3,4, 5
- Some nursery rhymes with relevant images.
- Basic colors
 Page 8 of 18

- Some animals
- Some Veggetables
- Sunday, Monday…
- January, February
- Addition (here allow the end user to enter the value and
message must be prompted whether correct ans or incorrect)
- Subtraction (here allow the end user to enter the value and
message must be prompted whether correct ans or incorrect)
6) Look and feel must be made user friendly.
7) Uniformity and Navigation must be made smooth throughout the
website.
 Page 9 of 18

5. WEBSITE SNAPSHOTS
Homepage
Page 10 of 18

Maths
Page 11 of 18

Games
Page 12 of 18

Feedback
 Page 13 of 18

6. CODING
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Homepage | Kids Zone</title>

<!--------- CSS Links --------->

<link href="css/navigation.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="engine1/slider-style.css" />
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
</head>

<!--------- Body --------->

<body id="index">
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">

<!--------- Header --------->

<div id="header">
<a id="header_logo" href="index.html"><img class="logo" src="images/logo.png"/></a>

<!-- Start Main Navigation -->

<ul id="menu" class="topmenu">
<li class="topmenu"><a href="index.html" style="height:24px;line-height:24px;"><img
src="images/nav/home.png"/>Home</a></li>
<li class="topmenu"><a href="aboutus.html" style="height:24px;line-height:24px;"><img
src="images/nav/info.png"/>About Us</a></li>
<li class="topmenu"><a style="height:24px;line-height:24px;" href="english.html" ><img
src="images/nav/eng.png"/>English</a>
<ul>
<li><a href="eng/abc-capital.html"><img src="images/nav/aqua_1_50.png" />Capital
ABC</a></li>
<li><a href="eng/abc-small.html"><img src="images/nav/aqua_1_50.png" />Small
abc</a></li>
 Page 14 of 18

<li><a href="eng/abcwithpictures.html"><img src="images/nav/aqua_1_50.png" />ABC with

Figures</a></li>
<li><a href="eng/days.html"><img src="images/nav/aqua_1_50.png" />Days of
Week</a></li>
<li><a href="eng/months.html"><img src="images/nav/aqua_1_50.png" />Months</a></li>
<li><a href="eng/colors.html"><img src="images/nav/aqua_1_50.png" />Colors</a></li>
<li><a href="eng/prayers.html"><img src="images/nav/aqua_1_50.png" />Prayers</a></li>
<li><a href="eng/nurseryrhymes.html"><img src="images/nav/aqua_1_50.png" />Nursery
Rhymes</a></li>
</ul>
</li>
<li class="topmenu"><a href="maths.html" style="height:24px;line-height:24px;"><img
src="images/nav/math.png" alt="Maths"/>Maths</a>
<ul>
<li><a href="maths/counting.html"><img src="images/nav/aqua_1_50.png" />1 to 100
counting</a></li>
<li><a href="maths/times-table.html"><img src="images/nav/aqua_1_50.png" />Learn
Tables</a></li>
<li><a href="maths/add.html"><img src="images/nav/aqua_1_50.png" />Addition</a></li>
<li><a href="maths/subtract.html"><img src="images/nav/aqua_1_50.png"
/>Subtraction</a></li>
<li><a href="maths/multiply.html"><img src="images/nav/aqua_1_50.png"
/>Multiplication</a></li>
<li><a href="maths/divide.html"><img src="images/nav/aqua_1_50.png" />Division</a></li>
<li><a href="maths/shapes.html"><img src="images/nav/aqua_1_50.png" />Shapes</a></li>
<li><a href="maths/time.html"><img src="images/nav/aqua_1_50.png" />Time</a></li>
<li><a href="maths/money.html"><img src="images/nav/aqua_1_50.png" />Money</a></li>
<li><a href="maths/measure.html"><img src="images/nav/aqua_1_50.png"
/>Measurement</a></li>
<li><a href="maths/calculator.html"><img src="images/nav/aqua_1_50.png" />Online
Calculator</a></li>
</ul></li>
<li class="topmenu"><a href="science.html" style="height:24px;line-height:24px;"><img
src="images/nav/sci.png"/>Science</a>
<ul>
<li><a href="sci/whatisscience.html"><img src="images/nav/aqua_1_50.png" />What is
Science</a></li>
<li><a href="sci/animals.html"><img src="images/nav/aqua_1_50.png" />Animals</a></li>
<li><a href="sci/birds.html"><img src="images/nav/aqua_1_50.png" />Birds</a></li>
<li><a href="sci/flowers.html"><img src="images/nav/aqua_1_50.png" />Flowers</a></li>
 Page 15 of 18

<li><a href="sci/vegetables.html"><img src="images/nav/aqua_1_50.png"

/>Vegetables</a></li>
<li><a href="sci/fruits.html"><img src="images/nav/aqua_1_50.png" />Fruits</a></li>

<li><a href="sci/bodyparts.html"><img src="images/nav/aqua_1_50.png" />Body

Parts</a></li>
</ul>
</li>
<li class="topmenu"><a href="drawing.html" style="height:24px;line-height:24px;"><img
src="images/nav/draw.png"/>Drawing</a>
<ul>
<li><a href="drawing/basics.html"><img src="images/nav/aqua_1_50.png" />Basics of
Drawing</a></li>
<li><a href="drawing/drawpictures.html"><img src="images/nav/aqua_1_50.png" />Draw
Pictures Online</a></li>
<li><a href="drawing/coloring.html"><img src="images/nav/aqua_1_50.png" />Coloring
Online</a></li>
<li><a href="drawing/downloads.html"><img src="images/nav/aqua_1_50.png"
/>Downloads</a></li>
</ul>
</li>
<li class="topmenu"><a href="games.html" style="height:24px;line-height:24px;"><img
src="images/nav/aqua_1_34.png"/>Games</a></li>
<li class="toplast"><a href="feedback.html" style="height:24px;line-height:24px;"><img
src="images/nav/mail.png"/>Feedback</a></li>

</ul>
<!-- End Main Navigation -->
 Page 16 of 18

7. SITE MAP

Capital ABC Small abc Pictures Days

Cat
Months Colors Prayers Rhymes

Counting Tables Addition Subtraction Multiplication

Division Shapes Time Money Measurement Calculator

What is Sci Animals Birds

Flowers Vegetables Fruits Body Parts

Basics Draw Coloring Downloads

Online
 Page 17 of 18

8. TASK SHEET

E-Project: Kids Zone

S.No. Task Days Team mate Status
Stephan Raza
Mohd. Younis Dars
1 Analysis 3 Hafiz Shehzad Khan Done
Malik Shehriyar
Abdul Fareed
2 Designing 5 Stephan Raza
English: Hafiz Shehzad
Maths: Stephan Raza
3 Data Development 15 Science: Abdul Fareed Done
Drawing: Mohd. Younis
Games: Malik Shehriyar
Stephan Raza
4 Testing 2 Done
Abdul Fareed
5 Documentation 1 Stephan Raza Done
 Page 18 of 18

9. HARDWARE / SOFTWARE
REQUIREMENTS

Hardware
• A minimum computer system that will help you access all the tools in the courses
is a Pentium 166 or better
• 64 Megabytes of RAM or better

Software
• Notepad/HTML editor
• Dreamweaver
• IE 5.0/ Netscape 6.0