A little bit of web standards and HTML, and github syntax styles

yangdanny97 · Oct 13, 2014 · 1fe25a6 · 1fe25a6
1 parent 728942d
commit 1fe25a6
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 5 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -8,4 +8,5 @@
 
   <!-- Custom CSS -->
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
 </head>
diff --git a/css/syntax.css b/css/syntax.css
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/index.md b/index.md
@@ -5,14 +5,14 @@ title: Overview
 
 In this course, we're going to provide a quick intro to
 [D3.js](http://d3js.org/). It's a Javascript library with a lot of little pieces
-and we use it for creating data visualizations in the browser. It. relies a lot
+and we use it for creating data visualizations in the browser. It relies a lot
 on web standards.
 
-A good way to approach D3 is that it's a library that helps by
+A good way to approach D3 is a library that helps by
 "automating the hard bits you already understand" as opposed to "hiding the hard
-bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849))
+bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849)).
 
-This is not a deep-dive, this is a quick tour. The goal here is to learn how to
+This is a quick tour, not a deep-dive. The goal here is to learn how to
 learn D3, not to learn everything at once.
 
-<a href="web-standards/" class="giant-button">Let's get started!</a>
+<a href="web-standards/" class="giant-button">Let's get started!</a>
diff --git a/z01-web-standards.md b/z01-web-standards.md
@@ -4,6 +4,41 @@ title: Web Standards
 permalink: /web-standards/
 ---
 
+Like we mentioned, D3 takes advantage of a lot of web standards.
+
+- [HTML](#html)
+- [CSS](#css)
+- [The DOM](#the-dom)
+- [SVG](#svg)
+
+### HTML
+
+HTML (HyperText Markup Language) is a text format that most web pages are
+written in. It's loosely related to the XML family, but much less strict (for
+example some tags such as `<br>` don't need matching closing tags.
+
+The basic outline of an HTML page is something like this:
+
+{% highlight html %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TITLE GOES HERE</title>
+  </head>
+  <body>
+    MAIN CONTENT GOES HERE
+  </body>
+</html>
+{% endhighlight %}
+
+### CSS
+
+CSS (Cascading Stylesheets) is a language for styling web pages.
+
+### The DOM
+
+### SVG
+
 like a whirlwind tour of web standards, these are the hard bits you already understand (or if you don’t, it’s ok! you can pick this stuff up pretty quicky
 
 HTML/CSS