Add CSS and HTML trails

* Start HTML trail.
* Start CSS trail.
* Add content to typography, grids, visual design, and information
  design.
* Fix Amazon links.
* Add validation to information design.
* Add HTML and CSS trails to README.
* Remove "Know" in Critical Learning sections.
* Add "Use vocabulary when..." validations.

README.md

@@ -28,8 +28,10 @@ To use these, you may want to first set up your laptop with
 Trails
 ------
 
+* [CSS](/thoughtbot/trail-map/blob/master/trails/css.md)
 * [Git](/thoughtbot/trail-map/blob/master/trails/git.md)
 * [Grids](/thoughtbot/trail-map/blob/master/trails/grids.md)
+* [HTML](/thoughtbot/trail-map/blob/master/trails/html.md)
 * [Information Design](/thoughtbot/trail-map/blob/master/trails/information-design.md)
 * [iOS](/thoughtbot/trail-map/blob/master/trails/ios.md)
 * [Javascript](/thoughtbot/trail-map/blob/master/trails/javascript.md)

trails/css.md

@@ -0,0 +1,25 @@
+CSS
+===
+
+Critical learning
+-----------------
+
+* Read [CSS3 for Web Designers](http://www.abookapart.com/products/css3-for-web-designers).
+* Read [CSS Floats 101](http://www.alistapart.com/articles/css-floats-101/).
+* Read [CSS Positioning 101](http://www.alistapart.com/articles/css-positioning-101/).
+* Read [Responsive Web Design](http://www.abookapart.com/products/responsive-web-design).
+* Complete [Code Academy Web Fundamentals](http://www.codecademy.com/tracks/web).
+
+Validation
+----------
+
+You know everyday CSS when you can:
+
+* Build a grid.
+* Control each part of the box model (width, height, padding, border).
+* Layout objects with floats.
+* Minimize problems with browser defaults.
+* Space text.
+* Style text.
+* Use `@media` queries to provide different layouts to devices with differing
+  widths.

trails/grids.md

@@ -5,10 +5,31 @@ Critical learning
 -----------------
 
 * Read [Grid Systems: Principles of Organizing Type](http://amzn.to/7A1Dn).
+* Read [Grid Systems in Graphic Design](http://amzn.to/11anRS).
 * Read Mark Boulton's "Designing Grid Systems":
   * [1](http://goo.gl/VOGP)
   * [2](http://goo.gl/at66)
   * [3](http://goo.gl/pw0Ks)
   * [4](http://goo.gl/EnL22)
   * [5](http://goo.gl/s9L1y)
+* Read [Ordering Disorder: Grid Principles for Web Design](http://amzn.com/0321703537).
+* Read [Geometry of Design: Studies in Proportion and Composition](http://amzn.com/1568982496).
 
+Validation
+----------
+
+You can use a grid in a design when you can:
+
+* Create inner axial alignment.
+* Edit and/or build a grid according to the content in your design (not using a
+  prebuilt framework).
+* Have symmetrical and asymmetrical balance in your designs.
+* Keep consistent vertical and horizontal space.
+* Use the grid to create active white space within a design.
+* Use the grid to strengthen the contents hierarchy.
+* Use a more complex grid system than a equal column 3 or 4 column grid.
+
+Ongoing Reference
+-----------------
+
+* Browse [The Grid System](http://www.thegridsystem.org/).

trails/html.md

@@ -0,0 +1,28 @@
+HTML
+====
+
+Critical learning
+-----------------
+
+* Read [A Beginner’s Guide to HTML & CSS](http://learn.shayhowe.com/).
+* Complete [Code Academy Web Fundamentals](http://www.codecademy.com/tracks/web).
+* Read [Dive into HTML5](http://diveintohtml5.info/).
+* Read [HTML5 for Web Designers](http://www.abookapart.com/products/html5-for-web-designers).
+
+Validation
+----------
+
+You know everyday HTML when you can:
+
+* Use `<h1-6>`, `<p>`, `<a>`, `<img>`, `<ul>`/`<ol>`/`<li>`, `<div>`, `<span>`,
+  `<dl>`/`<dt>`/`<dd>`, `<form>`/`<fieldset>`/`<input>` semantically.
+* Use the new HTML5 elements `<header>`, `<hgroup>`, `<section>`, `<aside>`,
+  `<article>`, `<footer>` semantically.
+* Name classes and ids semantically.
+* Use Web Inspector quickly (hint: keyboard shortcuts).
+* View source on a web page and understand it.
+
+Ongoing reference
+-----------------
+
+* Refer to the [HTML5 Spec](http://dev.w3.org/html5/spec/single-page.html).

trails/information-design.md

@@ -7,4 +7,14 @@ Critical learning
 * Read [Information Dashboard Design](http://amzn.to/6njM).
 * Read [Envisioning Information](http://amzn.to/YVYei).
 * Read [The Visual Display of Quantitative Information](http://amzn.to/SKnya8).
+* Read [A Practical Guide to Designing with Data](http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-with-data).
 
+Validation
+----------
+
+You know everyday information design when you can:
+
+* Cleanly and clearly communicate information.
+* Identify chart junk, when to use it, and when not to use it.
+* Understand the basic chart/graph options (including bar (vertical/horizontal),
+  line, pie, spark lines) and appropriate use cases for each.

trails/open-source.md

@@ -4,15 +4,16 @@ Open Source
 Critical learning
 -----------------
 
-* Get a [GitHub](http://github.com) account ($/free)
+* Get a [GitHub](http://github.com) account ($/free).
 * Read [8 steps to fixing other people's code](http://rdd.me/tsf7khhg).
 * Watch [How to manage an open source project](http://vimeo.com/45214727).
 * Read the rubygems.org ["Make your own gem" guide](http://guides.rubygems.org/make-your-own-gem/).
 * Read the [Semantic Versioning specification](http://semver.org/).
-* Understand [software licenses](http://playbook.thoughtbot.com/choosing-platforms/software-licenses/).
-* Know what a [`NEWS` file](http://www.gnu.org/prep/standards/html_node/NEWS-File.html#NEWS-File) is.
-* Know what a [`ChangeLog` file](http://www.gnu.org/prep/standards/html_node/Change-Logs.html#Change-Logs)
-  is and how it is formatted.
+* Read about [software licenses](http://playbook.thoughtbot.com/choosing-platforms/software-licenses/).
+* Read about the purpose and formatting of a
+  [`NEWS` file](http://www.gnu.org/prep/standards/html_node/NEWS-File.html#NEWS-File).
+* Read about the purpose and formatting of a
+  [`ChangeLog` file](http://www.gnu.org/prep/standards/html_node/Change-Logs.html#Change-Logs).
 
 Validation
 ----------
@@ -48,14 +49,15 @@ You are an everyday open source contributor when you can:
 
 You are an everyday open source maintainer when you can:
 
+* Apply an appropriate license to your project.
 * Document a clear public API.
 * Document where issues are managed, such as [Github](http://github.com) Issues.
+* Evaluate pull requests and provide kind, intelligent feedback.
 * Provide a clear place for questions, such as [Stack Overflow](http://stackoverflow.com). Only provide
   a [Google Group](http://groups.google.com) mailing list if you're ready to support it.
-* Know how to use major, minor, and patch version numbers ([Semantic Versioning](http://semver.org)).
 * Provide your code in easily accessible form ([Rubygems](http://rubygems.org), [GitHub](http://github.com)).
-* Evaluate pull requests and provide kind, intelligent feedback.
-* Know which license to use.
+* Select or reject open source software based on its license.
+* Use major, minor, and patch version numbers ([Semantic Versioning](http://semver.org)).
 
 Ongoing reference
 -----------------

trails/sass.md

@@ -12,10 +12,10 @@ Validation
 
 You know everyday Sass when you can:
 
-* Use nested selectors.
-* Know the difference between `@include` and `@extend` and the advantages of each.
-* Set and use variables.
 * Create and use mixins.
+* Set and use variables.
+* Use nested selectors.
+* Use `@include` and `@extend`.
 
 Ongoing reference
 -----------------

trails/typography.md

@@ -7,4 +7,28 @@ Critical learning
 * Read [The Elements of Typographic Style](http://amzn.to/aRAKml) and
   [how it applies to the web](http://webtypography.net).
 * Read [Thinking with Type](http://amzn.to/U76Kbj).
+* Read [Real Web Type in Real Web Context](http://www.alistapart.com/articles/real-web-type-in-real-web-context/).
+* Read [On Web Typography](http://www.alistapart.com/articles/on-web-typography/).
+* Read [More Meaningful Typography](http://www.alistapart.com/articles/more-meaningful-typography/).
+* Watch [Tim Brown's More Perfect Typography](https://vimeo.com/17079380).
+* Read [Stop Stealing Sheep & Find Out How Type Works](http://amzn.com/0201703394).
 
+Validation
+----------
+
+You know everyday typography when you can:
+
+* Choose a typeface which matches the style of a design.
+* Constrain lines of type to the proper length.
+* Create type hierarchy with size, space, color, emphasis, and weight.
+* Pair two or more typefaces in a design and make it look good.
+* Space letters horizontally (kern).
+* Space lines of type vertically with `line-height` (leading).
+* Use the vocabulary of tyopgraphy with teammates.
+
+Ongoing reference
+-----------------
+
+* Browse [I Love Typography](http://www.ilovetypography.com).
+* Browse [Typedia](http://typedia.org).
+* Browse the [Typophile](http://typophile.com) Forums.

trails/visual-design.md

@@ -12,13 +12,13 @@ Critical learning
   * [3](http://www.andyrutledge.com/gestalt-principles-3.php)
   * [4](http://www.andyrutledge.com/common-fate.php)
   * [5](http://www.andyrutledge.com/closure.php)
+* Read [101 Things I Learned in Architecture School](http://amzn.com/0262062666)
 
 Validation
 ----------
 
 You know basic visual design when you can:
 
-* Use design principles in your work.
-* Articulate your reasons for using them.
-* Identify principles in others design work.
-
+* Intentionally break visual design principles in your design.
+* Use the vocabulary of visual design principles when articulating the reasons
+  for your design and when critiquing teammates' designs.