Web Development Assignment: Homepage Design and Linked Pages ISY10209

This web development assignment showcases the design and structure of a homepage, detailing its components and relationships using a storyboard diagram created with draw.io. The assignment covers the use of HTML5 and CSS3 for the homepage design and linked pages (resume and web-skills), including text, graphics, and other details like the date of creation and the author's information. The content includes headers, hyperlinks, paragraphs, and images sourced from pexels.com, with validation performed according to W3C standards. The assignment also provides references to relevant literature on web development and design, emphasizing human-centered design and usability. The student follows the assignment brief provided by School of Business and Tourism for Web Development I (ISY10209) and submits the continuous assessment tasks for Topics 1-3, which contributes 15% of the overall unit assessment.

Running head: WEB DEVELOPMENT
WEB DEVELOPMENT
Name of the Student
Name of the University
Author Note

1WEB DEVELOPMENT
Table of Contents
Homepage diagram..........................................................................................................................2
Linked Pages....................................................................................................................................3
Description of Homepage Content..................................................................................................4
References........................................................................................................................................6

2WEB DEVELOPMENT
Homepage diagram
A storyboard provides a visual diagram of a website’s structure by mapping out all the
components and relationship between them. It helps in planning and organizing the website for
the implementation (Pivac and Granić 2017). In figure 1, structure of the home page is developed
using all the basic components of the web designing. Homepage is one of the vital pages of the
website. It has been kept simple as all the branch pages and links are accessible form the home
page. Storyboards can be hand drawn or drawn using any software tools. Here the diagram is
developed using the platform named ‘draw.io’. The contents and information of the website is
consistent through the whole page. The main aim of the using storyboard is to keep the design
more human centered and usable. It also helps in prototyping and developing of the user
experience/ user interface designs for web application or other software (Herbst, Chieu and
Rougee 2014). It forces the designers to think as users and their flow of the browsing to make the
design better and usable. It can be used in prioritizing the contents and place them accordingly.

3WEB DEVELOPMENT
Figure 1: Diagram of Homepage
Source: created by the author
Linked Pages
The linked pages in the home pages are home itself (index.html), resume, and web-skills.
The contents of the resume and web-skill pages are yet to be developed. However, the design,

4WEB DEVELOPMENT
background image, navigation bar and other CSS properties have been kept same as the home
page for these two pages. The screenshot of the home page is given below:
Description of Homepage Content
Text: Texts are the major source of any information. In any website, the most area of the pages
are covered by the textual information (Firmenich et al. 2016). The developed home page
contains texts in the form of headers, hyperlinks and paragraphs. The font weight, font-size and
color has been kept as per the direction. The font family used is the serif and san serif. The color
of the fonts have been kept such that it does not get lost in the background color of the website.
Graphics: Graphics are the main point of the attraction in a web page. Images and videos are
used as the graphics in a webpage (Felke-Morris 2014). In this home page, four images are used;
one for background image and rest of three as thumbnail in the body section of the page. The
thumbnail images redirect to the link where the original size of the image is shown. Different
colors are for the texts and classes according to the requirements.

5WEB DEVELOPMENT
Other details: The date of the creation of the home page is 8th March 2020. The author of the
web page is Bill smart and title of the homepage is Bill Smart CA3. The version used for the
markup language is HTML5 and for styling is CSS3. The images used in the web page are
sourced from – ‘pexels.com’. Validation of the all HTML file is done on
‘https://validator.w3.org/’ as per the W3C standards (Seltzer 2016). For CSS files it is done on
‘https://jigsaw.w3.org/css-validator/’.

6WEB DEVELOPMENT
References
Felke-Morris, T., 2014. Web development and design foundations with HTML5. Addison-Wesley
Professional.
Firmenich, S., Bosetti, G., Rossi, G., Winckler, M. and Barbieri, T., 2016, June. Abstracting and
structuring web contents for supporting personal web experiences. In International Conference
on Web Engineering (pp. 77-95). Springer, Cham.
Herbst, P., Chieu, V.M. and Rougee, A., 2014. Approximating the practice of mathematics
teaching: What learning can web-based, multimedia storyboarding software
enable?. Contemporary Issues in Technology and Teacher Education, 14(4), pp.356-383.
Pivac, M. and Granić, A., 2017, May. Storytelling in web design: A case study. In 2017 40th
International Convention on Information and Communication Technology, Electronics and
Microelectronics (MIPRO) (pp. 1540-1545). IEEE.
Seltzer, W., 2016, April. World Wide Web Consortium (W3C) standards for the open web
platform. In Open Source, Open Standards, Open Minds Conference Proceedings, Washington
DC.