Web Development Coursework for the end of term: final website assignment
This assignment consists of two parts – a website and a report on the website design and production. These are marked as one assignment
Brief
Website
Where will you be in 10 years? Your brief is to design and build a responsive website that represents the professional portfolio of a version of you in 2034. This can be as realistic or as fantastical as you like, provided you are explicit about the effects of your decision on the design and execution of your assignment.
Your web site should have 5 pages with different types of material and media, including video and sound clips if relevant.
In addition to the web site, you will include a report as a file called report.html with associated images etc. in your site's base directory. This will explain what you have learned in the process of building your site, where you found your information, and how you have adapted any resources (if applicable). The structure of the report is described in the next section.
You should avoid making use of primarily server side or pre-compiled frameworks such as React or WebPack. If you use CSS templates, for example with Bootstrap, make sure you customise it enough to get credit for your own work – and make clear which parts of the code are yours and which parts come from the template library. You may find it safer to avoid any CSS templates or libraries, but they are not prohibited provided they are clearly referenced and that you have written your own code as well.
Report
Your report.html should contain the following (in this order):
. Your name
. Introduction: What is the essential story being told by your portfolio site? Describe the version of you that it is about. What is the audience you are addressing? What type of structure did you choose to implement?
. Inspiration: State 3 professional portfolio sites (not advices articles or portfolio templates) that
have inspired you when creating your website. What did you learn from them?
. Accessibility: State 3 ways in which your site is accessible.
. Usability: State 3 ways in which you considered the usability of your site.
. Learning: State 3 things you had to learn or find out to create your site. How did you achieve that?
. Evaluation I: What aspects of your work do you think were particularly successful? Why?
. Evaluation II: What aspects of your work could be improved? How might you do things differently another time?
. Resources: What resources did you use in your work? List any sources of information, libraries, plugins, code or tools (you should also indicate inclusions from other sources within your code using comments)
. Appendices: Site map (if useful), wireframes and mock-ups
Preferred citation formats
Format for citing code:
[1] Author Initial, Author Surname, 'Title of program/source code' (), Year Published. [Type]. Web address or publisher.
Example:
[1] P. Korponaić, 'Meteor Kitchen examples' (commit 0abcf1c), 2016. [Source code]. github.com/perak/kitch…
Format for citing online resource:
[1] Author Initial. Author Surname, 'Title', Year Published. [Online]. Available: http://Website URL. [Accessed: 10- Oct- 2013].
Example:
[1] Handlebarsjs.com, 'Handlebars Reference', 2016. [Online]. Available: handlebarsjs.com/reference.h…. [Accessed: 20- Sep- 2016].
Materials from the web
You can use almost anything you like that you can find on the Web, but you should avoid anything that is not open or out of copyright (e.g. that costs money or requires login or registration).
On your report page (and, wherever possible, in your code) you must describe what you have taken, where you took it from, and what you have done to it.
If you copy-and-paste something almost without change, you must say so clearly and give credit to the source. You will get credit for making imported code fit in with and enhance your own design, for understanding and using complex libraries, or for altering and enhancing material that you have used. 代 写Web Development Coursework for the end of term: final website assignmentJava
Showing you can adapt existing code is particularly valuable.
In order to be clear which material you have written and which you have used from elsewhere you will be expected to provide comprehensive comments within your HTML, CSS and Javascript. files indicating code you have used, code you have adopted and edited and code that you have written.
Marking Criteria Marking criteria fall under the five broad categories below. The marking criteria for this project are as
follows (each criterion has an equal weighting of 5%):
. Site (4 criteria = 20%):
o Navigable 5-page site with working URLs for the site hosted on the static web page system
o Tidy directory structure and clear file naming
o Site is accessible
o Site has good content that matches the briefing document
. HTML (3 criteria = 15%)
o HTML is valid and well formed
o HTML elements are well chosen, with semantic elements and attributes used where possible
o Rich commenting of HTML
. CSS (5 criteria = 25%)
o Use of external stylesheets
o CSS is used to make an appropriate, aesthetic design
o Layout is appropriate and interesting, matching the planning goals
o Website is responsive, with explicit responsive behaviour in stylesheets
o Rich commenting of CSS
. JS (4 criteria = 20%)
o JavaScript. is successfully called and interacts with the DOM
o JavaScript. has an essential role in some aspects of the website, satisfying planning goals
o Advanced use is made of JavaScript, or JS library is used in a sophisticated way
o JS is comprehensively commented
. Report (4 criteria = 20%)
o Wireframes are comprehensive and representative. Mockups (and, where relevant, wireframes) reflect the responsive aspects of the site
o Accessible design
o Design and planning is good (focus on Introduction, Inspiration, Usability and Learning sections), with clear relationship to briefing document and target audience
o Reflection on work shows critical and analyticalawareness
SITE. Core functionality of the website as a whole
20 marks
Site 1
Navigable 5-page site with working URLs for the site hosted on the
static web page system
No link provided or URL fails. Site has fewer than 5
pages
0 marks
URL works, but dead links are present or some resources fail to load; or navigation is confusing.
2 marks
URL works and all but a few very minor links and resources work. Navigation is
intuitive.
4 marks
URL and all
links and
resources load without error. Navigation is intuitive.
5 marks
Site 2
Tidy directory
structure and
clear file naming
All files in the
same directory,
directory structure confusing, or file naming confusing
0 marks
Subdirectories for
media or CSS files
but not both. Or
directory structure good, but file naming confusing
2 marks
Subdirectories
cleanly separate file type, file
names would be clear to a
competent
newcomer
5 marks
Site 3
Site is accessible
No evidence of
accessible code, or accessibility rules incorrectly applied (e.g.
alt=”picture1”>
0 marks
Some evidence of accessible code (e.g. alt attributes)
1 marks
Broadly
accessible code, but with notable
flaws
4 marks
Excellent
accessible code
5 marks
Site 4
Site has good
content – using media where
relevant. Content is integrated to draw a rich,
coherent and compelling picture.
Content is poor, minimal or mostly placeholders
0 marks
Content is
appropriate in
quantity and target (within the scope of a short project). It
matches the briefing and planning
documents.
2 marks
Content is excellent and well- supported by media. It tells its story well
5 marks
HTML. Building a website HTML skeleton
15 marks
HTML 1
HTML is valid
HTML does not
validate as HTML5
0 marks
HTML does not
validate as HTML5, but there are very few issues – either previously valid
syntax, minor typos or minor issues with external boilerplate code.
2 marks
HTML is valid
5 marks
WX：codehelp
