DMIT1530

-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.

1. 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
2. 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
3. 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
4. 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