Contribution to Final Assessment: 20% This is an Individual Assignment. All work must be your own. Submissions
Fantastic news! We've Found the answer you've been seeking!
Question:
- Home page with details of the company (index.html)
|
- A job application page (apply.html)
- A page with your personal details (about.html)
- A page which lists any enhancements
- A CSS file that styles your website (style.css).
- have relevant content
- must include the HTML markup specified in the marking guide
- must validate to HTML5 without errors
- must be styled by a validated CSS3 file
- must be linked to each other via a menu
- must be deployed on Mercury.
- Home page (index.html)
- Position Descriptions page (jobs.html)
- Hierarchically structured headings of at least 2 levels
- More than one
- An with appropriate content
- At least one ordered list
- At least one unordered list
- The page should also have an appropriate footer.
- Companys position description reference number (5 alphanumeric characters)
- Position title
- Brief description of the position
- Salary range
- The title of the position to whom the successful applicant will report
- Key responsibilities. A list of the specific tasks that are to be performed
- Required qualifications, skills, knowledge and attributes. These should be divided into essential and preferable. These requirements should include such things as programming languages required, number-of-years of experience required, etc..
Sources / References:
|
Field | Format requirement |
Job reference number | exactly 5 alphanumeric characters |
First name | max 20 alpha characters |
Last name | max 20 alpha characters |
Date of birth | dd/mm/yyyy |
Gender | radio inputs grouped using a fieldset and legend |
Street Address | max 40 characters |
Suburb/town | max 40 characters |
State | drop down selection from VIC,NSW,QLD,NT,WA,SA,TAS,ACT |
Postcode | exactly 4 digits |
Email address | validate format |
Phone number | 8 to 12 digits, or spaces |
Skill list - the last item in list should read Other skills... | checkbox inputs |
Other skills | textarea |
Information | HTML element to be used |
Your name | Definition list |
Student number | Definition list |
Your tutors name | Definition list |
Course you are doing | Definition list |
Photo of you | HTML figure element |
Your Swinburne timetable | HTML table |
A mailto link to your student email. |
- Demographic information about you
- Description of hometown
- A list of your favourite books, music, films etc.
- Comments: The CSS should include comments at the beginning of the CSS file to identify author and purpose. Individual line comments should be used as necessary to explain particular styles and explain where they are applied.
- Selectors: All the following CSS Selectors should be used appropriately at some point in this assignment:
- element, #id, .class, grouping, contextual
- pseudo class, pseudo element
- Menu: The menu should have its own set of styles applied. Use a background colour.
- Index Page: Demonstrated the following specific CSS rules on the index.html page:
- display a background graphic.
- elements should have their font variant, size and family etc. set using the short-hand font property.
- The should be 25% of the width of page and float to the right.
- The should have a coloured border with an appropriate margin and padding.
- The footer should cover the full width of the page the footer text should be in a small font and centred in the footer..
- The photo should be styled with a single border using the short-hand border- property, and the figure should be floated to the right of the definition list
- should be centred within the section, headings in bold, table cells with a background colour specified in hexadecimal format
- The email should be style similarly to the definition list.
- Effective, appropriate and innovative use of a number of distinct HTML elements not covered in tutorials (e.g. Image maps, Canvas, etc) used in a way that improves the user experience of the website.
- A number of additional CSS properties or selectors (e.g. support for interactivity, animation) not covered in the tutorials. For example the use of a range CSS3 pseudo-elements and classes, child or siblings combinators, attribute selectors, etc. (e.g. use the CSS3 :target selector to help us see where you have applied your enhancements.)
- Implement Responsive Design with additional CSS that presents your website specifically for mobile phone / tablet sized displays.
- Be relevant to / enhance the content of the website
- Be well described (as explained above)
- Be non-trivial.
- Be significantly different from other features you have implemented.
assign1/ You must have this folder case sensitive! index.html jobs.html apply.html about.html enhancements.html ...other html pages images/ Folder for images for your page content styles/ Folder for style.css other css files styles/images/ Folder for images referred to by your css files e.g. background |
- HTML files should only be in the base assign1/ folder not anywhere else.
- All images used for the content should be stored in the assign1/images/ folder.
- All images used for the style should be stored in the assign1/styles/images/ folder.
- There should be a style.css file in the assign1/styles/ folder.
- All links to your files (CSS or images) should be relative. Do not use absolute links, as these links will be broken when files are transferred for marking. No marks will be allocated if links are broken.
- Make sure all your files are in the correct folders and compress your root folder with all your sub-folders with HTML, CSS, and images into a zip file named assign1.zip. Submit this to Canvas. When the zip file is decompressed, the entire website should be able to be run from index.html without needing to move any files.
- You can submit more than once through Canvas. Your last submission will be marked.
- Note that all deliverables must be submitted electronically. There is no need to submit an assignment cover sheet.
Make sure you complete your Canvas submission process. |
Essential Requirements Tick box 0 if requirement met | Y/N |
index.html validated HTML5 LI with all meta tags, title, author LI nav menu that links LI logo/graphic LI | |
jobs.html validated HTML5 LI nav menu LI appropriate levels of headings LI meaningful content LI > ~150 words LI image LI list LI LI | |
apply.html validated HTML5 LI nav menu [ form (at least different four form controls) [ specified data echoed back from server LI some HTML5 data checking LI | |
about.html validated HTML5 LI nav menu LI dl list LI timetable LI photo LI email link LI | |
style.css validated external CSS LI single file CSS applied to all HTML pages LI consistent typological style applied to all pages LI some CSS layout applied LI Selectors used: element LI,#id LI,.class LI | |
Deployed to Mercury LI | |
Subtotal (all Y) |
Specified Requirements Place 0 or lI in box - 2 marks each tick | Comment | Mark |
index.html HTML (deduct 2 marks up to -10 for each HTML5 validation error) Menu that links (consistent menu on all pages) LI Header with appropriate context including title LI Footer LI CSS: Background graphic LI Menu appropriately formatted with background colour LI | /10 | |
jobs.html HTML (deduct 2 marks up to -20 for each HTML5 validation error) Headings (at least contiguous 2 levels) LI Ordered list El, Unordered list El, 2+ Sections El, Aside LI CSS: Aside 25% viewport width El, floats right El, coloured border LI font variant, size family set LI Footer full page width LI | /20 | |
apply.html (deduct 2 marks up to -26 for each HTML5 validation error) One mark only if input has no html check Text input with HTML format checking for: job ref no (=5 char) El, names (phone number (8 to 12 digits) LI Appropriate input for date LI Radio buttons for gender with fieldset LI Dropdown box for stateLl Skills check boxes LI Text area LI Labels linked with \'for\' (test by \'clicking\' on label) LI Data for all inputs returned from server correctly LI | /26 | |
about.html (deduct 2 marks up to -16 for each HTML5 validation error) definitions lists LI lists single line common width LI photo in figure LI border as specified LI float right LI timetable LI timetable format as specified LI email link works LI | /16 | |
CSS (general) (deduct 1 markup to -20 for each CSS3 validation error) Appropriate use of selectors: grouping El, context El, pseudo LI Fluid page flow (relative dimensions) LI | /8 | |
Subtotal | /80 |
Feature Name | Described | Linked to where implemented on your Web site | Source (if applicable) | Mark |
Y/N | Y/N | Y/N/na | /10 | |
Y/N | Y/N | Y/N/na | /10 | |
Total Additions | /20 |
Requirement | Max Deduction if not met | Deduct |
Page design | ||
- Well designed structure | -4 | |
- Appropriate contrast in colours | -2 | |
- Appropriate use of fonts | -2 | |
- Consist application of style across pages | -2 | |
- Appropriate application of styles | -2 | |
Content | ||
- Job descriptions have sufficient quantity (200 words +) | -4 | |
- Job descriptions is sufficient quality | -4 | |
- About.html content meets spec | -4 | |
- Images (including portrait) present and appropriate file size | -4 | |
HTML | ||
- Meta-data follows in-house standard | -3 | |
- HTML has no embedded Style markup CSS is fully separated from HTML | -4 | |
- No deprecated elements/attributes used | -3 | |
- No inappropriate use of HTML semantics (e.g. use of when should be used) | -4 | |
- HTML follow usability standards (e.g. alt on images) | -3 | |
- Comments adequate | -3 | |
CSS | ||
- No redundant CSS or unused selectors | -3 | |
- Appropriate header comments (match in-house standard) | -3 | |
- Appropriate use of selectors (e.g. Class versus ID) | -3 | |
- Appropriate line comments | -3 | |
Web site | ||
- All third party content acknowledged properly* | 4 | |
- Directory Structure as defined above | -4 | |
Total Deductions |
Posted Date: