共计 3530 个字符，预计需要花费 9 分钟才能阅读完成。
-DMIT1530: Assignment 2
2020/2021
Introduction
The student will recreate a fully responsive, one page site based on the PSD provided. All assets are provided
in the asset folder and/or the PSD. The completed site must demonstrate well-formed and structured HTML
markup while writing clear and efficient CSS.
The site will display the three different font types used in the PSD for all users and devices. The layout and
styles will best match the PSD and adjust to different screen sizes using fluid and fixed layout techniques, and
a media query.
CSS properties used should have high global browser support (Edge, Firefox, Chrome, Safari, etc.) and the site
will need to properly display on all screen widths starting at 320px wide .
Submission
Both submission requirements must be met for marking.
- Push the assignment files to the GitHub Classroom assignment before the due date.
LATE ASSIGNMENTS WILL NOT BE ACCEPTED!
Marking Guide
Weight:
This assignment is worth 15% of your final mark.
Marking Guide for Assignment 2
Task Value
Web Fonts The website loads and properly renders three different fonts where
required according to the PSD.
One system font, one Google hosted font, and one self-hosted font are
utilized.
1
Text Styling Font styling properties are appropriately used to best match the PSD
mockup.
The font sizing adjusts to the viewport/screensize.
Hover & active states are applied to links.
3
Responsive
Navigation
The HTML includes one semantic navigation that works across all
screens.
The navigation on mobile is hidden behind a hamburger icon and is
functional with hidden/active states and a click event.
When the navigation is toggled it shows or hides smoothly.
The navigation adjusts on wider, desktop screen to display by default as
a traditional horizonal menu.
The navigation style and layout matches the PSD.
5
Layout –
Positioning
Flexbox, margins, & padding are utilized to achieve the basic layout of
element where possible.
CSS positioning properties (absolute, relative, & static) are correctly
used where needed to match the layout demonstrated in the PSD.
1
Layout –
Responsive &
Styling
The site matches the look and layout of the smallest PSD starting at a
screen size of 320px and up to 1299px.
The content does not overflow the width of the screen size at any
point.
The site adjusts and then matches the look and layout of the larger PSD
starting at a screen size of 1300px.
The content stretches from edge to edge on smaller devices and is then
contained in a fixed-width, centered container starting at the 1300px
viewport.
A media query and a mobile first approach is utilized to achieve the
above points.
5
Deductions Possible deductions could be not following best practice techniques,
validation errors, not using proper formatting or semantic tags,
inappropriate CSS selectors, or spelling mistakes.
-3
Total
15 - Marks Criteria
Task was completed with the highest of proficiency adhering to best practices and followed
subject matter guidelines all tasks were completed to a professional standard. 5
Task was completed with some minor mistakes. Well above average work, shows good
understanding of the task and high degree of competence. 4
Satisfactory work. Some features missing or incorrectly implemented. Shows a moderate
level of understanding in the task with room for improvement. 3
Below average work. Task was poorly completed. Shows understanding of the task and the
requirements to implement but implementation was poorly executed. 2
Some of the task was completed. Showed a lack of understanding in the subject matter and
very poorly executed. 1
Not completed. 0 - Mark Criteria
Proficient. Shows a high degree of competence in completing task. 3
Capable. Above average degree of competence in completing task. 2
Below average. Shows a satisfactory degree of competence in completing task. 1
Task was not completed. 0 - Mark Criteria
Task completed satisfactorily. 1
Task was not complete. 0
-3 Mark Criteria
Proficient. Shows a high degree of competence in completing task. 0
Capable. Above average degree of competence in completing task. -1
Below average. Shows a satisfactory degree of competence in completing task. -2
Task was not completed. -3
正文完
