HTML/CSS: Developing Your Data-Story

  • Timeframe: 11/13 – 12/20
  • Points: 350

Description

In this final project, you will make decisions about how all of your media elements come together into a cohesive narrative. 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 single-page website.
Caption: Wireframe example of a single-page website.

Writing tools

  • Github account & desktop application for hosting and versioning your website.
  • Localhost web server via Python in the Terminal (Mac) / CommandPrompt (Windows): python -m SimpleHTTPServer 8000 for Python 2.7 & python -m http.server 8000 for Python 3.
    • For Mac computers, you should have Python pre-installed. If not, follow the directions below:
      • Open the Terminal
      • Install HomeBrew – a package manager – by following the instructions in this video: https://www.youtube.com/watch?v=lI_2DWnYo8o.
      • After installing Homebrew, while still in the open terminal, install Python 3 by simply typing the following command: brew install python3. This will take a minute or two.
    • For Windows, follow the Python 3 installation instruction on this page: How to Geek.

      Be sure to choose the option to add a PATH variable.

  • Code editor: Atom (Mac/PC), TextWrangler (Mac), Notepad++ (Win)
  • Code editor for practice lessons: Codepen.io account. Find and follow me as lndgrn. We will be using the following collection that I’ve curated on Codepen: 3844-examples

General process

  1. Learn how to set up and use a web-writing environment.
  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>, its block and inline elements, and their display properties and behaviors.
  4. Learn about and apply basic CSS element selection and styling & the CSS Grid display.
  5. Develop and refine your data-story narrative content.

Rubric

  • Website amplifies a particular set of insights about your online practices and how digital data are intertwined with it.
  • CSS Grid is written cleanly (spacing, syntax, and structure) and has aptly named tags, IDs, and classes.
  • HTML Markup:
    • Conveys knowledge of block-level vs. inline-level elements; and
    • Passes HTML5 validation test. To test your site, copy/paste the URL of it within this tester: https://validator.w3.org/.
  • CSS sheet:
    • Structure of document adheres to discussed 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.
  • Integrates text, visuals, and videos as a cohesive narrative about your digital practice / life.