<commit_before># Module 2: HTML and CSS

## Overview
In this course, we'll be building interactive data visualizations _on the web_.  While there is a pre-requisite of a web-programming course, this module provides a basic review of some foundational concepts.  If you're feeling at all rusty, I **strongly suggest** you fine-tune your HTML and CSS skill before moving forward.  This module will cover the following skills:

- Basic page layout with HTML
- Types of HTML elements
- Using Cascading Style Sheets to add styles to pages
- Introduction of the Grid system with the CSS framework Bootstrap  

## Resources
There are limitless resources on the web regarding web-programming (shocking), but here are a few to get you started:

- [HTML5 General Reference](http://www.w3schools.com/tags/ref_byfunc.asp)
- [HTML Attribute Reference](http://www.w3schools.com/tags/ref_standardattributes.asp)
- [DOM Intro](http://www.w3schools.com/js/js_htmldom.asp)
- [CSS Selector Reference](http://www.w3schools.com/cssref/css_selectors.asp)
- [CSS Properties Reference](http://www.w3schools.com/cssref/default.asp)
- [CSS Units Reference](http://www.w3schools.com/cssref/css_units.asp)
- [Bootstrap Framework](http://getbootstrap.com/)
- [w3shools Bootstrap Tutorial](http://www.w3schools.com/bootstrap/default.asp)
- [Materialize Framework](http://materializecss.com/)
- [Font Awesome icons](https://fortawesome.github.io/Font-Awesome/)

## HTML

**H**yper**T**ext **M**arkup **L**anguage is a programming language for describing how to display web documents.  It uses `<tags>` to mark up plain text, and provide rendering instructions to a web-browser.  Even the most beautiful and complex data visualizations on the web are simply HTML elements arranged into what people perceive as charts, plots, and maps.

In an HTML document, you'll arrange different HTML elements into a tree structure which defines how your page is laid out. Your web-browser will parse the HTML you write and create a visual representation of that information known as the **D**ocument **O**bject **M**odule, or **DOM**. The DOM expresses your content as a series of objects which you will later learn how to manipulate, add, and remove from your page.<commit_msg>Added TOC<commit_after># Module 2: HTML and CSS

## Overview
In this course, we'll be building interactive data visualizations _on the web_.  While there is a pre-requisite of a web-programming course, this module provides a basic review of some foundational concepts.  If you're feeling at all rusty, I **strongly suggest** you fine-tune your HTML and CSS skill before moving forward.  This module will cover the following skills:

- Basic page layout with HTML
- Types of HTML elements
- Using Cascading Style Sheets to add styles to pages
- Introduction of the Grid system with the CSS framework Bootstrap  

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Contents**

  - [Resources](#resources)
  - [HTML](#html)
- [My First Heading](#my-first-heading)
  - [CSS](#css)
    - [Selectors](#selectors)
    - [Arranging elements](#arranging-elements)
    - [Frameworks](#frameworks)
    - [The Grid](#the-grid)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Resources
There are limitless resources on the web regarding web-programming (shocking), but here are a few to get you started:

- [HTML5 General Reference](http://www.w3schools.com/tags/ref_byfunc.asp)
- [HTML Attribute Reference](http://www.w3schools.com/tags/ref_standardattributes.asp)
- [DOM Intro](http://www.w3schools.com/js/js_htmldom.asp)
- [CSS Selector Reference](http://www.w3schools.com/cssref/css_selectors.asp)
- [CSS Properties Reference](http://www.w3schools.com/cssref/default.asp)
- [CSS Units Reference](http://www.w3schools.com/cssref/css_units.asp)
- [Bootstrap Framework](http://getbootstrap.com/)
- [w3shools Bootstrap Tutorial](http://www.w3schools.com/bootstrap/default.asp)
- [Materialize Framework](http://materializecss.com/)
- [Font Awesome icons](https://fortawesome.github.io/Font-Awesome/)

## HTML

**H**yper**T**ext **M**arkup **L**anguage is a programming language for describing how to display web documents.  It uses `<tags>` to mark up plain text, and provide rendering instructions to a web-browser.  Even the most beautiful and complex data visualizations on the web are simply HTML elements arranged into what people perceive as charts, plots, and maps.

In an HTML document, you'll arrange different HTML elements into a tree structure which defines how your page is laid out. Your web-browser will parse the HTML you write and create a visual representation of that information known as the **D**ocument **O**bject **M**odule, or **DOM**. The DOM expresses your content as a series of objects which you will later learn how to manipulate, add, and remove from your page.
{'fraction_non_alphanumeric': 0.101900525677315, 'fraction_numerical': 0.0040436716538617065, 'mean_word_length': 4.596153846153846, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 8, 'https://': 2, 'lorem ipsum': 0, 'www.': 14, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7669186', 'n_tokens_mistral': 1412, 'n_tokens_neox': 1346, 'n_words': 572}