Web design involves analysing, planning and production of web sites, including, but not limited to, technical development, information structure, visual design, and content design.

1. Personal Website
Assignment
Jackson Bird
To assist students in time-managing these assignments, many labs will have
instructions on how to get started with certain topics of the assignments they may
be unfamiliar with.

2. Assignment Help Site
page1

3. Assignment Help Site
page1
Personal Website Assignments
ITECH2106-6106
Webpage And Multimedia Design
Major Assignment Overview
Web design involves analysing, planning and production of web sites, including,
but not limited to, technical development, information structure, visual design,
and content design.
This semester you are required to analyse, design and develop a Personal
Website that is:
 •Small, unique and professional in appearance;
 •About yourself and your career ambitions;
 •A portfolio of your achievements; and
 •A showcase to future potential employers.
 •This task runs the entire semester and is broken down into three assignments.
The Overall Requirements for the website which you are required to design and
develop are listed on the next page.
 •These Overall requirements should be adhered to when completing all three of
the assignments
Personal Website Assignments:
Assignment 1: Analysis Document (Early Intervention Task - 10 type A marks)
 •Due week 4 – Friday 5pm

4. Assignment Help Site
page1
 •Creation of a document that conducts steps one to three of the design phase for
your personal website. These steps are the Needs, Target Audience, and
Competitive Analysis phases.
Assignment 2: Design Document (20 type A marks)
 •Due week 7 – Friday 5pm
 •Creation of a document that conducts steps four and five of the design phase for
your personal website. These steps are the Information Gathering and
Information Architecture phases in which you will detail the design of your
website.
Assignment 3: Website Development (20 type A marks)
 •Due week 11 – Friday 5pm
 •This involves the development phase, in which you will create your personal
website based on your designs from Assignment 2, and the analysis’ you
conducted in Assignment 1.
 Design Phase
 Needs Analsyis
 Target Audience
 Analysis
 Competitive
 Analysis
 Information
 Gathering
 Information
 Architecture

5. Assignment Help Site
page1
 Development
To assist students in time-managing these assignments, many labs will have
instructions on how to get started with certain topics of the assignments they may
be unfamiliar with.
 ITECH2106-6106
 Webpage & Multimedia Design
 General Information
Submission
Electronic copies via Moodle. Note that each assignment will have specific
instructions for submission. Please refer to the “Course Description” for
information regarding late assignments, extensions, special consideration, and
plagiarism.
Plagiarism
Students are expected to hand in their own work. Each document and website
will be quite unique in the way that each student goes about their design. It is in
the students’ best interest to make sure that there are sufficient specific details
contained in their work that would make it difficult for others to use the work as
their own. Any suspicion of plagiarism will be taken seriously and thoroughly
investigated and, if proven, dealt with in accordance with the University’s policy
on Plagiarism.
Website Overall Requirements

6. Assignment Help Site
page1
This website has a number of requirements which are detailed in the table below;
you should adhere to these requirements when working on your three
assignments. The strength of your analysis, design and usage of HTML and CSS
will determine the level of your grade.
ALL STUDENTS:
General Requirements
General
• You must not use any existing templates. You are expected to create your
website by yourself. (Lab
materials can be used to help you with your website.)
• You may not develop the website using server-side scripting languages, such
as PHP, ASP, etc.
• All text should follow the rules of writing for the web.
HTML • All content should be coded with HTML.
• The structure of your website should be built using HTML5 tags where
applicable and HTML <div>’s
for everything else. Classes and ids can be used as well.

7. Assignment Help Site
page1
o <header>, <nav>, <section>, <article>, <aside>, <footer>, <figure>,
<figcaption>
o Class and id example’s <div id=”insertname”>, <section
class=”insertname”>
CSS
• All content should be formatted and styled using an external cascading
stylesheet (CSS).
o This is to keep content and style strictly separated.
• A max of 2 external stylesheets are allowed.
• ITECH2106 students need to incorporate at least TWO of the CSS3 styles
below:
• ITECH6106 students need to incorporate ALL SIX of the CSS3 styles below:
o CSS3 transitions
o CSS3 transforms (scale, skew, and/or rotate)
o CSS3 rounded corners
o CSS3 embedded fonts - or use Google / Adobe Fonts API

8. Assignment Help Site
page1
o CSS3 multi-column
o CSS3 shadows
JavaScript
/
• JavaScript, jQuery and their libraries are allowed to be used (and some image
galleries may require
jQuery these languages) as long as it is all functional on the client side.
• You can use external sources of code/tutorials to help you with this, but
you must reference the use
of this code.
ITECH2106-6106
Webpage & Multimedia Design
Global content requirements for all webpages on your website
Header • To identify the website as a website dedicated to you personally, provide:
o A relevant heading / title banner.
o A relevant image.

9. Assignment Help Site
page1
Navigation •
You need to think about how you will provide navigation to the user, and
whether some pages may
be categorised together or not.
o Example: A personal image gallery and a portfolio gallery may be
categorised together
under a main page called “Gallery” – with the 2 pages linking from it
locally, or within a main
menu drop-down function.
• Types you can include (if applicable for your design and requirements):
o Global (Primary and maybe Secondary), Local, Footer, In-text, Utility.
Footer • The footer should contain:
o Copyright & Contact email link.
o (Optional) Social media links.
Pages Required and their Minimum Requirements

10. Assignment Help Site
page1
Home • Short blurb of your name and your career ambition.
o Example: “Joe Bloggs. Web Designer. I create beautiful websites.”
• Short paragraph (15-45 words) providing more detail regarding your career
ambition.
• No other body text should be present.
• The rest of the page should represent your personality through:
o Image(s)
o Visual design (Composition, Colour and Typography)
• Remember this design is to reflect your style and personality (with the focus
on your career
ambitions), but not at the expense of good design.
• First impressions count!
About • Summary information regarding yourself:

11. Assignment Help Site
page1
o Name.
o Age.
o Skills, including an in-text link to your PDF resume.
 Note: we are not testing resume writing skills – it can be a blank PDF
file. We are
testing linking to external files.
• Paragraph description of your personal qualities.
• At least one relevant image of yourself.
Experience • Summary information regarding your experience:
o Undergraduate studies you have completed or are currently completing.
o Postgraduate studies you have completed or are currently completing.
o Include some details on the schools you studied these at.

12. Assignment Help Site
page1
• Paragraph description of your working qualities.
• At least one relevant image of your Studies/School/Work.
ITECH2106-6106
Webpage & Multimedia Design
Gallery • This page must contain a gallery of at least six images related to you.
• Each image must contain a caption.
o Example: “My 21st birthday” caption under the image of your 21st
birthday.
• The gallery must be dynamic, meaning it has an interactive visual feature
such as:
o Lightbox: Thumbnail images that link to a large sized version of that
image.
o Rollover: Thumbnail images that when the mouse hovers over it, displays
the larger version
of that image.
o Slideshow: The first image displays large on the webpage and the user can

13. Assignment Help Site
page1
cycle through
the images.
o Any other Dynamic Gallery that is designed and presented well.
• You may need to incorporate code (using CSS, JavaScript and/or jQuery)
from:
o Free web design tutorials to get your galleries working, or
 Be sure to reference code that is not yours.
o One of the lab exercises.
• Galleries that function well and suit the design of your website will be
awarded higher marks.
Choice Pages
• In addition to the four pages above, create two additional pages that relate
to the rest of the
1 & 2 website. Some suggestions are below (you may think of others):
(Please o Achievements, Blog, Contact, Design, Journal, Ideas, Photography,

14. Assignment Help Site
page1
Portfolio (of your own
work, such as websites, apps, games, teaching, etc), Travel, etc.
rename them
o Note that some of these suggestions above would technically require
server-side scripting to
appropriately)
fully function. In these cases (such as a blog), create a working prototype of
this web page,
focusing on design and layout, with sample content in place.
• Give the pages appropriate names and titles related to their content.
• In both pages include the following:
o Some appropriate text for this webpage.
o At least one relevant image.
• In at least one of the pages include the following:
o Embed a relevant sound and/or video file using either the <audio>,
<video> HTML5 tags.

15. Assignment Help Site
page1
The above details amount to a minimum of 6 web pages. Feel free to ADD more
pages. HOWEVER, if you design or develop pages not mentioned here and you
DID NOT fulfil the requirements first, these pages will not be included in the
marking!
ITECH6106 Students Only:
• On all of your images on your website, create tooltips. These are small
captions that appear whenTooltips
Captions hovering over an image.
o The tooltip / caption will need to be generated using CSS and possibly
JavaScript / jQuery.
o The caption should describe the image that the user hovers over.
o Example:
Normal Hover