COIT20268 Responsive Web Design Portfolio: House of Cards (2018)

This portfolio documents the development of the 'House of Cards' website for the COIT20268 Responsive Web Design course. It includes mock-ups and actual implementations of the home, section, and article pages, detailing the use of images from the resource folder, fixed navigation with menus like 'Home,' 'Greeting Cards,' and 'About,' and a light green, white, and grey color scheme. The portfolio also covers website navigation through a flowchart, the implementation of a business hours page in tabular form, and a feedback page collecting user details. Test cases and user feedback are presented, highlighting the positive reception of features like Google Maps and image transitions. The report concludes with a summary of the project's learning experience, particularly in CSS design and implementation.

COIT 20268 - Responsive Web Design (RWD)
(Term 1 – 2018)
Portfolio 2
Student Name:
Student ID:
Module Tutor:
Contents
1 | P a g e

Report.............................................................................................................................3
Portfolio 2.1....................................................................................................................3
Portfolio 2.2....................................................................................................................7
Portfolio 2.3....................................................................................................................9
Portfolio 2.4....................................................................................................................9
Portfolio 2.5..................................................................................................................10
Portfolio 2.6..................................................................................................................11
Summary......................................................................................................................12
References....................................................................................................................12
2 | P a g e

Report
Portfolio 2.1
Home Page Mock-up
The Home page mock-up is showing above and the exact Home page is as follows-
3 | P a g e

4 | P a g e

Section Page
The Section page mock-up is showing above and the exact Sections page is showing
below. The section page will contain the information about specific types of cards like
Playing Cards or Greeting Cards etc.
5 | P a g e

Article Page
The Article page mock-up is showing above and the exact Article page is showing below. The
Article page will contain the information about specific cards like Birthday Card etc.
6 | P a g e

Portfolio 2.2
The images that are used in the website are only the images of Resource folder. No
image is used in the website from outside. The navigation is fixed in all the pages
with following menus-
- Home
- Greeting Cards
- Playing Cards
- Postcards
- About
- Contact
- Feedback
The color combination that is used in the website is light green, white and grey like below-
7 | P a g e

The color combination is very nice in the website. All images are having border and there is
same style of headings. All headings are pink in color.
Every image has attributes- src, title etc. that are vry important for the SEO point of view and
very good for the designing and functionality point of view.
8 | P a g e

Portfolio 2.3
Flowchart
The above flow chart is showing the navigation of House of Cards. This navigation link is same
for all the pages. There are some other internal links but that are available only at the Home page
like Business Hours etc.
Portfolio 2.4
Business hours are showing in a separate page in the tabular form. The border of the
table is very thick and black in color.
9 | P a g e
House of Cards|
HOME
Home Greeting
Card
Playing Card Postcard About Contact Feedbac
k

Portfolio 2.5
The feedback page is collecting the user detail and showing below-
The page is asking for the user name, gender, age, country, personnel interest etc.
10 | P a g e

Portfolio 2.6
Test Cases –
Test Cases
1. Menu = Main, Option= Greeting Cards
2. Menu = Main, Option= Playing Cards
3. Menu = Main, Option= Postcards
Users that tested the website has come on the following results-
User Time Easy to access Need changes Good interface
User 1 5 Yes No Yes
User 2 10 m. Yes No Yes
User 3 9 m Yes Yes Yes
User 4 8 m Yes No Yes
(Digital Age Learning 2013)
(TechTerms.com 2013)
Assumptions
Following assumptions are given to the users-
- Use of Google Map
- Use of transitions in images
The users are very happy with these assumptions as both the features are very
interesting and useful.
11 | P a g e

Summary
The report is showing the complete working and functionality of House of Cards
website. The complete website has given lot of experience from designing to
implementing CSS. The CSS is used in designing the website and it is handling the
entire website at one place.
The website is using the Google map, transition in images etc. all things are very
important and may be used at different places at any website.
After completing this project, I am very confident about making any website from
scratch.
References
Digital Age Learning (2013), Overview of User Acceptance Test (UAT) for Business
Analysts (BAs) [online], Available from:
http://www.develop.com/useracceptancetests. [Accessed: 28 May 2018]
TechTerms.com (2013), UAT [online], Available from:
http://www.techterms.com/definition/uat. [Accessed: 28 May 2018]
12 | P a g e