CPNT-260 Assignment 2

Details

Create a section communicates information about services, a product, or a game/movie character/species/faction. This assigment is about using different types of layouts to communicate information about a topic.

Marking Rubric

This assignment is worth 15 points.

Site UI 3pts

• Header
• Indicates current page with an h1
• Footer
  • Copyright information (Copyright symbol, name, year)
• Navigation there should be 3-5 links in your nav
  • uses nav tag
  • links set to href="#"
  • link title ideas:
    • contact
    • gallery
  • add the about page from your previous assignment to your nav
    • if the stylesheet is very different from your assignment 2, include your a1 stylesheet and only link it to the about page.
  • for this and future assignments, the navigation must be responsive

Page Content 5pts

• multiple sections on page
• images and text
• 3 card layout
  • card layout should be responsive
  • cards must use semantic elements as explored in class
  • include: heading and body text, a raster image
  • cards should be narrower than they are wide
  • maximum text width of 20ch
  • you can use cards developed in the card design activity, but must use different content
• consistent visual hierarchy
• at least 1 unordered list (that is not in the navigation)

General Requirements 5pts

• Include a README markdown file in your project that includes the following information:
  • Course Title
  • Author name
  • Links to:
    • Github Repo
    • Github Pages Site
  • Reflection
    • Note 1 technical issue you had while creating this
      • How did you approach solving it
  • Attributions for code or assets that are not your own

Code quality and design requirements

• Page uses proper semantic elements
• Code indentation is 2 spaces per indent
• Follow best practices/logical file naming conventions
• paragraph text line lenght is <= 75ch
• no horizontal scroll and overflow on page

Flare 2pts

• Style that goes beyond basic responsive requirements
• examples:
  • set a colour scheme
  • create a layout with more than 1 column of content
  • hover css classes added to denote interaction with site elements
• Please add a note to what line in your css or html your instructor can see the code for your flare.

---

Submission Requirements

• Push this assignment to a repo named cpnt260-a2.
• ZIP all files required for the site to operate and upload to Brightspace.
• Leave a link to the following as a comment in your Brightspace submission (this is duplicated in your readme but comes in handy sometimes):
• GH repo
• GH Pages site