Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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.
  • Loading branch information...
commit ced27218d4830c2dd8bc4db6d0622c3b8923c3c1 1 parent f96898e
Kyle Fiedler authored croaky committed
View
2  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)
View
25 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.
View
21 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/).
View
28 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).
View
10 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.
View
18 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
-----------------
View
6 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
-----------------
View
24 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.
View
8 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.
Please sign in to comment.
Something went wrong with that request. Please try again.