Responsive Web Design Project: HTML, CSS, and Portfolio

Desklib provides solved assignments and past papers to help students succeed.

COIT 20268 - Responsive Web Design (RWD)
PORTFOLIO 1

Table of Contents
Introduction......................................................................................................................................2
Portfolio 1.1.....................................................................................................................................3
Portfolio 1.2.....................................................................................................................................4
Portfolio 1.3.....................................................................................................................................8
Portfolio 1.4.....................................................................................................................................9
Portfolio 1.5...................................................................................................................................17
Portfolio 1.6...................................................................................................................................18
Conclusion.....................................................................................................................................19
References......................................................................................................................................20
Table of Figures
Figure 1: Home page.......................................................................................................................4
Figure 2: Product Page.....................................................................................................................5
Figure 3: About Us page..................................................................................................................6
Figure 4: Contact us page................................................................................................................7
Figure 5: Flowchart of web pages...................................................................................................8
Figure 6: Home page design............................................................................................................9
Figure 7: About us design..............................................................................................................10
Figure 8: Home page alert.............................................................................................................11
Figure 9: Antique product items....................................................................................................12
Figure 10: Coins............................................................................................................................13
Figure 11: Origamis.......................................................................................................................14
Figure 12: Stamps..........................................................................................................................15
Figure 13: Contact us design.........................................................................................................16
1

2

Introduction
The given report contains the documentation of the website that is created and the report consists
of snapshots of the website with the wireframes. The description of the website contains different
portfolios that are covered in the overall report and explained in detail. The website has different
pages that include home page, about us, contact us, etc. All pages screenshots can be seen in the
given report.
3

Portfolio 1.1
Site title: Hobby & Collectibles
Developer: Identify yourself
Rationale or focus: The website is based on the store named as Hobby and Collectibles and this
website is created so that customer can visit the website online and can go through the details of
the available antique items.
Planning the Site:
Main elements outline: The customer can visit the website in order to check the items available
so that they can go to the shop in-person. The main elements are the inventories and proper
images of the items available.
Content: This website contains seven different pages related to the business.
Target audience: The target audiences are the customers who wish to visit the shop in person so
before visiting they can check the details online.
Design considerations: The design focuses on the images and the outlook of the overall shop
and its inventory.
Limiting factors: Limitation of images and improper technical coding can limit the design goals.
4

Portfolio 1.2
Figure 1: Home page
This is the home page that will appear at first and contains other components like logo of the
store, tagline, images and other information related to the website (West and Prettyman, 2018).
5

Figure 2: Product Page
This is the product page which contains available items and products are displayed and their
information is available with the images.
6

Figure 3: About Us page
This is the about us page that contains the information about the website and the store. This page
consists of shop floor layout and the floor plan.
7

Figure 4: Contact us page
This is the contact us page that displays the address and proper location of the shop, email as
well as contact number. There is a query form that customer can fill and submit in case of any
query (Becker, 2015).
8

Portfolio 1.3
As the store focuses on providing the outlook of the store and products of the store on the
website, so it is important for the website to have real images of the stores as well as proper
images of the products. The success of the site can be measured by the more number of
customers visiting the stores as well as their responses to the website. There are various problems
that are faced while developing the website, especially the linking of the web pages and their
proper functioning including quick responses and display of the pages.
The website consists of many pages and performs different functionalities that can be explained
by the help of the flow chart diagram.
Figure 5: Flowchart of web pages
The above flowchart shows the flow of the overall website, user will first visit on home page
where different options are available as products, about us and contact us. By clicking on
products, there are different items that can be seen like Origamis, stamps, coins and antique
products (Singh et al., 2015).
9

Portfolio 1.4
The website design is created by using the CSS that is Cascading style sheet. This is used so that
the design and outlook of the website can be displayed appropriately and it must look good so
that more customer can get attract. The uses of different classes have been made in the CSS
through which the overall designing of the website is created and developed.
The design of the website that is created by using the CSS is given below:
Figure 6: Home page design
10

Figure 7: About us design
11