Description
Aims & Objectives
Within this course, students are required to design and develop a personal portfolio/ resume
website aimed at potential employers. The aim of this second assignment is to implement the
website you designed in Assignment 1 using HTML/CSS/JavaScript.
Process
– Do you need to make any adjustments to your site design?
– Code your basic HTML pages.
– Code your CSS stylesheets.
– Select appropriate areas to apply additional interactivity using JavaScript.
– Validate as you go to ensure your code is free from errors.
– Comment your JavaScript to demonstrate your understanding.
Requirements for the Website Implementation
– Complete HTML markup and CSS styling for the design presented in Assignment 1.
– Addition of at least three different elements of JavaScript to your website. Select
appropriate interactivity from the list of JavaScript options below. These should add
to the user experience of your website.
– JavaScript code should be commented in both JavaScript files and in the HTML
pages where it is used. Your comments should explain what the JavaScript is doing.
– It is up to you whether you use HTML 4.01 or XHTML 1.0, however you must use the
same for all pages in your site.
JavaScript Options
– An interactive image/content gallery
– A user login that stores user data collected in a cookie & displays it in your website
(consider what would be useful to collect from them)
– Form validation with appropriate error messages (using DOM Scripting, not alerts)
– An accordion (or similar) for displaying sections of content on a single page
– Dynamic display of information from another site (ie. Twitter feed, news, or sports
results – that is relevant to you & your site)
– Animation for navigational or other page elements (ie. dropdown or flyout)
– If you want to use different JavaScript elements in your website, you need to discuss
this with teaching staff to ensure it is of a suitable level for the assignment.
– If you want to challenge yourself, you may want to conduct some more advanced
JavaScript coding experiments to display in your website. Again, these need to be
discussed with teaching staff to ensure their suitability for the assignment.
Submission
Students will submit their completed website files & a one-pager describing any changes to
the original design, which JavaScript elements they chose to implement and why.
All files should be submitted in a single .zip file to Blackboard. Website files should follow the
directory structure below:
index.html (your home page file should always be named index.html)
any other html files for your website
css (all stylesheets should be contained in a css directory)
style.css (your main CSS file should be named style.css)
any other CSS files your site requires
images (all images should be contained in an images directory)
any images required for your website
js (all JavaScript files should be contained in a js directory)
any JavaScript (.js) files your site requires
your one-pager (as a .PDF file)
The one-pager should contain the following:
• Description of any changes made to the design you submitted in Assignment 1 and
justifications for each related back to site purpose, users & design principles.
• Description of the JavaScript elements implemented in your website and
justifications for each describing why you chose them, related back to site purpose
and user experience.
Marking Criteria
Your assignment will be marked according to the following criteria:
• HTML/XHTML has been implemented to a high standard – well structured and
semantically correct, no errors in work (either through validation or presentation).
• CSS has been implemented to a high standard, no errors in work (either through validation
or presentation). Styling is consistent across the site.
• JavaScript elements are highly appropriate, fully functioning and have been implemented
to a high standard. Commenting demonstrates a high level of understanding.
• The content for the website is highly appropriate and has been fully incorporated. Images
display correctly and with appropriate alt tags.
• Links and navigation are functioning correctly. Navigation is well-considered and
consistent across the site.
• Website follows the given file structure.
• The website has been completed to a professional standard (content including spelling &
grammar, design & functionality).
• Website is clearly representative of proposed design. Changes where made have been well
integrated.
• One-Pager : Changes to original design are clearly documented and well justified in
relation to site purpose, users, design principles.
• One-Pager : JavaScript elements implemented are clearly described and well justified in
relation to site purpose and user experience.
• One-Pager : Language & writing style is of a high standard. No errors in work.
Marking Rubric
Criteria Poor Satisfactory/Good Excellent
HTML/XHTML usage Incomplete. Many errors remain in the
HTML/XHTML.
HTML/XHTML is semantic and has been used
appropriately. Minor errors remain – in semantic use or
through validation.
HTML/XHTML has been implemented to a high
standard – well structured and semantically correct,
no errors in work.
0 1 1.5 2
CSS usage Missing or incomplete. Many errors remain in the
CSS.
CSS use is appropriate, minor errors remain –
presentational or through validation. Styling is mostly
consistent across the site.
CSS has been implemented to a high standard, no
errors in work. Styling is consistent across the site.
0 1 1.5 2
JavaScript (2 marks per
element for a total of 6)
Missing or incomplete. Significant errors remain in
JavaScript preventing functionality. Commenting
does not demonstrate an understanding of the
material.
JavaScript elements are appropriate and have been
implemented with minor issues. Commenting
demonstrates a basic understanding of material. Minor
errors in functionality.
JavaScript elements are highly appropriate, fully
functioning and have been implemented to a high
standard. Commenting demonstrates a high level of
understanding.
0 1 3 4.5 5 6
Website Content
(and images)
Missing or incomplete. Placeholder content remains
in site. All/majority of images are not displaying
and/or missing appropriate alt tags.
Content has been fully incorporated. Images display
correctly and have appropriate alt tags. Content requires
further consideration. Minor issues remain.
The content for the website is highly appropriate and
has been fully incorporated. Images display correctly
and with appropriate alt tags.
0 1 1.5 2
Links & Navigation All/many links are broken. Unable to navigate
through site due to ill-considered navigation or
errors in navigation links.
Links and navigation are functioning. Minor issues
remain in navigation – in consistency or format.
Links and navigation are functioning correctly.
Navigation is well-considered and consistent across
the site.
0 1 1.5 2
File Structure File structure is not followed resulting in a confused
submission.
Website follows the given file structure with minor
issues.
Website follows the given file structure.
0 0.5 0.75 1
Overall Website Website requires significant work to bring it to
completion or professional standard.
Website has been completed to a satisfactory standard.
Some work required to bring content, design and/or
functionality up to a professional standard.
Website is polished and professional in all aspects.
0 1 1.5 2
One-pager – changes Missing or incomplete. Changes to original design
are not documented or justified. Where included,
justification is poor and not related to site purpose,
users or design principles.
Changes to original design are documented with basic
justification. Justification requires work to better relate
changes to site purpose, users, design principles.
Changes to original design are clearly documented
and well justified in relation to site purpose, users,
design principles.
0 0.5 0.75 1
One-pager – JavaScript Missing of incomplete. Unclear what JavaScript
elements have been implement or why.
JavaScript elements implemented are described with
basic justification.
JavaScript elements implemented are clearly
described and well justified in relation to site
purpose and user experience.
0 0.5 0.75 1
Language & writing
style.
Language & writing style is inappropriate. Many
errors in report.
Language & writing style is of a satisfactory standard.
Some errors remain.
Language & writing style is of a high standard. No
errors in work.
0 0.5 1
TOTAL /20