Personal Portfolio Website

Muhammad Furqan Ghafoor

Student ID: 43567
Table of Contents
Concept Map

CSS Planning

The CSS layout plan

2 The CSS text plan

Navigation Map (Logical)

Structure Chart (Physical)

Storyboards

Homepage ‐ index.html

Resume page‐ resume.html.html

Skills page ‐ skills.html

Contact page ‐ contact.html

Cricket page ‐ cricket.html

Photography page‐ photography.html

Web skills page‐ webskills.html

Kings music signup form‐ kings_music.html

Web issues page ‐ web_issues.html

Testing Procedures
 Concept Map
Navigation left menu

Phone

Email contact
Look and feel
internet sites
Accomodaion
Resources

Home

Audience Where it starts

content
Personal Place I call home

Contact
CSS Planning
The layout of every page is done. The layout is divided up into several sections, these
sections will be specified in an external CSS style sheet imported into each page on the site.

 container
 outline
 header
 navList
 centerText
 supportingText
o Why
o What
o How container
 News
 footer

header

navList News
centreText

SupportingText

SupportingText

SupportingText

Footer

Outline

This type of a model allows maximum flexibility of the site as each section can be
modified with updated requirements.
THE CSS TEXT PLAN
Enovation- Font Family Colour/Special Size Align
external.css Text Characteristics
#header As content background-color: width:100%; left
#F5DEB3;
color: #A0522D;
font-size: 140%;
background-repeat: no-
repeat;
background-image:
url(../images/cover.jpg);
padding: 20px 20px 20px
135px;
#footer As content font-size: 90%; width:100%;
text-align: center;
padding: 10px;
background-color:
#FF7F50;
clear:both;
#content Verdana, background-color: width:60%;
Arial, #FFF8DC;
Helvetica, color: #000000;
sans-serif padding: 20px 20px;
overflow: auto;
#news As content float: right; width:
font-size:0.8em; 150px;
padding: 40px 5px
10px 10px;
background-color:
orange;
h1 Verdana, margin-bottom: 30px; left
Arial, color:#FFFFFF;
Helvetica,
sans-serif
h2 Verdana, color: #869DC7; left
Arial,
Helvetica,
sans-serif
#nav As content float: left; width: left
width: 150px; 150px;
 font-weight: bold;
letter-spacing: 0.2em;
a:link As content color: #FFFFFF
a:visited As content color: #EAEAEA;
a:hover As content
color: #808080;
background-color:
#EAEAEA;
#wrapper As content margin: 0 auto; width: 50%;
width: 50%;
min-width: 990px;
background-color:
#F4A460;
color: #000066;
#floatright As content float: right;
margin: 10px;
 Navigation Map (Logical)

HomePage

Home Where It Starts Place I Call home Contact

 Structure Chart (Physical)

Description: Homepage
Content: Explains about my personal information.
Interaction: Navigation bars, images and lists.
Navigation: One navigation list is installed and other
links that comes in paragraph are also
installed.

Title Homepage-index.html SCREEN ID: 1.0 DATE: 28/09/2019

ELEMENTS
header

Graphics: There are many graphics used in this page

nav centreText News
with the use of CSS .
List

Text: This page provides the personal information

about me and my lifestyle.

Footer

Audio/video: No audio or video is installed in this

website

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists are also inserted
in it for better interaction with the user.
 Description: Resume page
Content: Explains about my resume that is my skills
and abilities.
Interaction: Navigation bars, images, table and lists.
Navigation: One navigation list is installed.

Title .html SCREEN ID: 2.1 DATE: 28/09/2019

ELEMENTS
header

Graphics: There are many graphics used in this page

nav centreText News
with the use of CSS .
List

Text: This page contains my resume.

Footer

Audio/video: No audio or video is installed in this

website

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists are also inserted
in it for better interaction with the user.
 Description: skills page
Content: Explains about my skills and abilities.
Interaction: Navigation bars, images and links.
Navigation: One navigation list is installed.

Title .html SCREEN ID: 2.2 DATE: 28/09/2019

ELEMENTS
header

Graphics: There are many graphics used in this page

nav centreText News
with the use of CSS .
List

Text: This page contains my skills and hobbies.

Footer

Audio/video: No audio or video is installed in this

website

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists are also inserted
in it for better interaction with the user.
 Description:
Content: Explains about my skills and abilities about
cricket.
Interaction: Navigation bars, images and links.
Navigation: One navigation list is installed.

Title cricket page-cricket.html SCREEN ID: 2.3 DATE: 28/09/2019

ELEMENTS
header

Graphics: There are many graphics used in this page

nav centreText News
with the use of CSS .
List

Text: This page contains information about cricket.

Footer

Audio/video: No audio or video is installed in this

website

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists are also inserted
in it for better interaction with the user.
 Description: Contact information
Content: Contact Details
Interaction: Navigation bars, images and links.
Navigation: One navigation list is installed.

Title Contact page-contact.html SCREEN ID: 2.4 DATE: 28/09/2019

ELEMENTS
header

Graphics: There are many graphics used in this page

nav centreText News
with the use of CSS .
List

I
Text: This page contains contact details. It contains
links to call, email.

Footer

Audio/video: No audio or video

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists.
 Description: Photography page
Content: Explains about my web skills.
Interaction: Navigation bars, images and links.
Navigation: One navigation list is installed.

Title .html SCREEN ID: 2.5DATE: 28/09/2019

ELEMENTS
header Testing Procedu
Graphics: There are many graphics used in this page
nav centreText News
with the use of CSS .
List

Text: This page contains information about racing.

Footer

Audio/video: No audio or video

Notes : This page consist of header, footer, navigation bars and news portal. Images and lists.

Testing procedure for this Website is as follows.

 Validation of Files
 All XHTML pages will be validated using XHTML 1.0 Transitional
 All CSS files will be validated using CSS validator online.

Test “Look and Feel” of site on different browsers

 Internet Explorer edge (Windows 10)
 Mozilla Firefox
 Chrome (Google)
 Safari
Test all hyperlinks on site
 All internal links (site navigation)
 All external hyperlinks.