CPNT 260

Assignment 1 - Text Column

Weight: 10%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

In this assignment, you will be creating a column of body text with HTML and CSS. The content should be original. While you can use open-source content as inspiration, it should be unique and on-topic.

Content Topic

Your content may cover any topic of your choice and does not have to relate to a real-life scenario.

For example, you may write:

  • your own bio for your portfolio website;
  • a fictional (very) short story;
  • a how-to article on your favourite hobby;
  • a review of a book/movie/article/hiking trail;
  • an About page for a hypothetical client website;
  • a entry for your coding journal,
  • etc, etc.

The content should make sense and be of potential value to the (hypothetical) reader.

Instructions and Rubric

  1. Write at least 200 words on your topic;
  2. Use valid HTML and CSS to make a column of flow content;
  3. Place your content in a validated HTML file named index.html that’s linked to an external stylesheet.

Each of the following requirements will be worth 2 points for a total of 10 points.

HTML Content

Enhance the visual hierarchy of your content using (at least):

  • One level 1 heading and one level 2 heading;
  • One paragraph;
  • An ordered or unordered list;
  • One link to an internal or external location with a hover state;
  • One example of bold text;
  • One example of italic text.

Responsiveness and Accessibility

Your content should be responsive and accessible to screen readers:

  • No horizontal scroll bars should be visible at any device screen width;
  • Line length should not exceed 85 characters on wide screens;
  • Content should be centred on wide screens (unless it looks great, otherwise);
  • Content should be at least 1rem away from the edge of the screen;
  • Content should be wrapped in a main element;
  • Text should have at least a AA contrast ratio rating for its size.

Typography

Enhance the visual hierarchy and readability of your typography:

  • Choose specific (i.e. not just serif and sans-serif) and suitable Display and Text Typefaces that are different enough to distinguish headings from body text;
  • Google Fonts for your typefaces, defined with proper system and generic fallbacks;
  • The font size of your text should be larger than the browser default but should still be readable on mobile devices;
  • The line height of your body text should be larger than the browser default but still be readable;

Above and Beyond

Show off your coding skills by using THREE of the following:

  • A nested list, OR;
  • An image, that is not distorted and does not hurt page usability, OR;
  • An icon font, OR;
  • A definition list, OR;
  • Get fancy: Add more visual hierarchy to your headings with each of the following “fancy” declarations:
  • Responsive text using clamp(), OR;
  • Customize your list styling.

Provide a clear indication of which options you’ve chosen in your README (see below):

  • Which did you choose?
  • What file(s) and line number(s) can it be found?

Documentation and Code Quality

  • Include a README.md in your project that contains the following information:
    • Course title;
    • Assignment name;
    • Author name;
    • A link to the GH Pages site
  • Important: Any attributions for code and/or assets you used that are not your own.
  • Use best practices with file/directory names and indentation:
  • CSS declarations should be organized by category (box model, fonts, borders, flex, etc), separated by a space and commented.

Submission Requirements

  • Push this assignment to a GitHub repo named cpnt260-a1 and enable GitHub Pages;
  • ZIP all files required for the site to operate and submit to Brightspace;
  • Include the following as a comment in your Brightspace submission:
    • GH repo
    • GH Pages site