锐客网

  1. 首页 > it技术 > >

DMIT1530

程序员

【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

    推荐阅读


    上一篇：24位腾讯云专家精彩演讲，4万字《腾讯云技术实践精选集 2021》发布！（附合集下载）

    下一篇：编写webpack插件（删除没有被依赖的业务文件）