HTML/CSS: Developing Your Data-Story

  • Timeframe: 04/03 – TBA (some time just after finals weeks)
  • Points: 350

Description

In this final project, you will make decisions about how all of your media elements come together into a cohesive narrative that we have been calling your “Datastory.” You will learn about some fundamental HTML elements and their relationships and behaviors programmed with CSS. In short, you will write a web-ready narrative within a single-page website format.

Wireframe example of a site designed with mobile-first principles.
Caption: Image conveying the mobile-first design principles. (src: Ux-Planet, 2016)

General process

  1. Learn how to set up and use a web-writing environment: Git and Github and writing in a code editor.
  2. Learn about and apply basic architectural and folder-naming and file-naming conventions for a single-page website.
  3. Learn about and apply basic HTML <head> elements, and the <body>, how there are block and inline elements, how those elements can be written into hierarchies, and how they have display properties and behaviors.
  4. Learn about and apply basic CSS element selection and styling (box model), the CSS cascade, & the CSS Grid, which will enable you to create a mobile-first/responsive website layout.
  5. Develop and refine content for your datastory.

Rubric

Rubric Criteria Points
Website Content:
  • Reviews insights about your online practices and how digital data are intertwined with it. Essentially, does it demonstrate that you have learned more about data, writing, and digital media in your life?
  • Integrates pertinent text, visuals, and videos to your datastory.
 70
HTML:
  • Conveys knowledge of block-level vs. inline-level elements.
  • Demonstrates knowledge of parent and child block relationships, i.e. element hierarchies.
  • Passes HTML5 validation test. To test your site, copy/paste the URL of it within this tester: https://validator.w3.org/. Some "Warnings" are okay, but fix the noted "Errors."
 140
CSS:
  • Well-planned responsive grid with CSS3 Grid. Grid is written cleanly (spacing, syntax, and structure) and has aptly named tags, IDs, and classes.
  • Structure of CSS document adheres to learned conventions:
    • General styles up top and modifiers below, due to the cascade.
    • Alike elements are grouped together, e.g., typography scheme, media, header elements, section elements, footer elements, etc.
  • Provides consistent commenting scheme.
  • Simple and readable typography styles and hierarchy. Aesthetic matches your narrative.
 140
Total 350

Writing tools