hw-02

hw-02 - Static Webpage

Link to GitHub Pages: https://ds4200-s23-class.github.io/hw-02-tamid-takes-ds4200/

Clone this repo and work locally. Be sure to push the final version of your code (and any significant updates along the way) before submitting.

Purpose

The purpose of this assignment is to practice more advanced HTML and CSS, as well as data and task abstraction.

Instructions

Resources to support this assignment are provided in the Resources section below.
You can find a reference for what your final webpage should look like in the "reference" folder of your cloned directory.
Create a GitHub Page for your repo and add the link to your GitHub Page above where you see [insert your clickable hyperlink here].
Using the index.html file included in your repo and an external stylesheet (no styling should be done inline; it should all be done via external css), please do the following:
- Make all font on your webpage Arial.
- Add a title: "hw-02".
- Add a div with the id "data-abstraction". Inside of this div:
  - Add a div with the class "info". Inside of this div:
    - Add a centered header: "Dataset Types".
    - Add a table with a blue header row. The table should have three columns: Data, Link, and Dataset Type. Add a row to the table for each dataset in the data folder of your cloned repo.
  - Add another div with the class "info". Inside of this div:
    - Add a centered header: "Data Types".
    - For each dataset you have, add a left-aligned header with the name of the dataset (UFO, Airports, Google-Web). Under the header, add an unordered list that lists the datatype of the columns and rows in the dataset. For any datasets that include attributes, list the attributes and their types as sub points in the list.
- Add a div with the id "task-abstraction". Inside of this div:
  - Add a centered header: "Task Abstraction".
  - Use flexbox css to make two columns. Inside of each colum:
    - Add one of the images in the img folder of your cloned repo. Make the image centered in the column.
    - Under each image, identify the high, medium, and low level actions of the visualization shown in the image, and the target(s) of those actions. This text should be left-aligned in the columns and in a font color of your choosing (but make sure it is readable).
- Add a div with the id "decoration". Inside of this div:
  - Add a row of evenly spaced, alternating, circles and rectagles (you should use SVG's'). The shapes can be whatever colors you choose. The circles should have 50% opacity, and the rectangles should have a border. The spacing of the shapes should be maintained as the page width changes (see the reference video). If the mouse hovers over a rectangle, it should temporarily change color. If the mouse hovers over a circle, a border should be temporarily added.
- Add a centered header to the bottom of your page. The header should say "Acknowledgements" in font smaller than the font used for your first header. Under this header, add a div. Inside of this div add a bulleted list of the resources you used to complete this assignment.

Resources

HTML Page on w3schools. (On the left-hand side of the page there is a menu bar with links to various topics.)
CSS Page on w3schools. (On the left-hand side of the page there is a menu bar with links to various topics.)
DOM. Focus on what the DOM is, and ignore how to manipulate it with JavaScript for now (we will look at this later).
HTML Basics. (On the left-hand side of the page there is a menu bar with links to various topics.)
HTML Graphics - SVG's
Advanced SVG's
HTML Tags
Flexbox
SVG

Data Citations

Submission