More things

Bloc · Jun 25, 2016 · 9001021 · 9001021
1 parent f10a624
commit 9001021
Show file tree

Hide file tree

Showing 24 changed files with 889 additions and 28 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,5 @@
 source 'https://rubygems.org'
 gem 'rspec-html-matchers'
+gem 'css_parser'
 gem 'pry-nav'
-gem 'pry-stack_explorer'
+gem 'pry-stack_explorer'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,9 +1,12 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    addressable (2.3.8)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
     coderay (1.0.9)
+    css_parser (1.3.4)
+      addressable
     debug_inspector (0.0.2)
     diff-lcs (1.2.5)
     method_source (0.8.1)
@@ -43,6 +46,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  css_parser
   pry-nav
   pry-stack_explorer
   rspec-html-matchers

diff --git a/body/001-hello-world.md b/body/001-hello-world.md
@@ -1,4 +1,14 @@
-HTML is a common way to describe the meaning and hierarchy of text so it can be formatted and displayed.
+### Objectives
+
+After this exercise, you should be able to:
+
+- Define HTML
+- Recognize an HTML tag
+- Identify the HTML paragraph tag
+
+### Example
+
+HTML, or Hypertext Markup Language, is a way to describe the meaning and hierarchy of text so it can be formatted and displayed.
 
 HTML usually looks like some human-readable text surrounded by "tags". Tags are denoted by angle brackets, like so:
 
@@ -12,6 +22,6 @@ The closing tag inserts `/` after the left angle bracket.
 
 The most common tag is `<p>`, which is shorthand for *paragraph*.
 
-## Assignment
+### Exercise
 
-Surround the text `Hello World` with the opening and closing paragraph tags.
+Surround the text `Hello World` with the opening and closing paragraph tags.
diff --git a/body/002-aloha.md b/body/002-aloha.md
@@ -1,10 +1,17 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Repeat the paragraph tag multiple times in a document
+
+### Example
+
 You can add multiple paragraphs to the same document. Let's translate *Hello World* into a few other languages.
 
-## Assignment
+### Exercise
 
 - Insert `English: ` before the text in your first paragraph.
-- Create three additional paragraphs with this text:
+- Create three additional paragraphs:
 	- `Hawaiian: Aloha Houna`
 	- `Luxembourgish: Moien Welt`
 	- `Swahili: Salamu Dunia`
-
diff --git a/body/003-headers.md b/body/003-headers.md
@@ -1,10 +1,22 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Identify the HTML header tag
+- Use an HTML header tag in a document
+- Understand when not to use `<h1>` tags
+
+### Example
+
 Not all text is *paragraph* text. Documents often have headings. Headings are awesome!
 
-When writing headings, instead of using `<p>`, you can use `<h1>` through `<h6>`.
+When writing headings, instead of using `<p>` (and `</p>`), you can use `<h1>` through `<h6>`.
 
 - `<h1>`: most important.
 - `<h6>`: least important.
 
-## Assignment
+`<h1>`s should also only exist once on a page, while other tags can be used multiple times. For example, on a newspaper, "The New York Times" is in large letters on the front page. This is analogous to the `<h1>`.
+
+### Exercise
 
-- Add an `<h1>` tag at the top of your document with the title `Hello World Translations`.
+- Add an `<h1>` tag at the top of your document with the title `Hello World Translations`.
diff --git a/body/004-html-and-body.md b/body/004-html-and-body.md
@@ -1,10 +1,27 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Identify the `<html>` and `<body>` tags
+- Describe which of these tags comes first
+- Describe why these tags are important
+
+### Example
+
 The text we've added is the main content of the HTML document. This main content is called the document's *body*, and it should be surrounded by `<body>` tags.
 
-The document's body is one part of an HTML document. (We'll get to the other part — the document's *head* — later.)  The `<body>` tags should be surrounded by `<html>` tags.
+The document's body is one part of an HTML document. (We'll get to the other part — the document's *head* — later.)  The `<body>` tags should be surrounded by `<html>` tags like this:
+
+```html
+<html>
+  <body>
+    <p>Some content goes here.</p>
+  </body>
+</html>
+```
 
-It may seem a bit verbose, but these strict formatting rules help web browsers display your document properly.
+It may seem a bit verbose, but these strict formatting rules help web browsers display your document properly. Without them, browsers might display your content incorrectly, more slowly, or not at all.
 
-## Assignment
+### Exercise
 
-- Surround our document so far with `<body>` tags.
-- Surround *those* tags with `<html>` tags.
+- Correctly place `<html>` and `<body>` tags around our document.
diff --git a/body/005-head-and-title.md b/body/005-head-and-title.md
@@ -1,3 +1,16 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Identify the `<head>` and `<title>` tags
+- Describe which of these tags comes first
+- Describe why these tags are important
+- Explain where the text in the `<title>` tag is used
+- Identify the `DOCTYPE` instruction
+- Explain why the `DOCTYPE` instruction is used
+
+### Example
+
 In addition to including a body, HTML documents should include a *head* section. This includes all information that isn't visible on the page, but which the web browser (or other clients, like search engine crawlers) might need.
 
 At a minimum, you must include the `<title>` tag here which defines the title of the HTML document. It's used in a few places, like the browser's title bar and bookmarks menu. It's also used in search engine results.
@@ -26,7 +39,7 @@ Once HTML has these tags, we can promise the browser that our document complies
 
 Unlike all the other tags we've worked with, `DOCTYPE` isn't an HTML tag. That's why it looks weird. It's a special web browser instruction that indicates what kind of document this is. This can make your web page render more quickly because the web browser can avoid document type guessing and supporting old versions of HTML.
 
-## Assignment
+### Exercise
 
 - Add `<head>` tags.
 - Add a title.

diff --git a/body/006-images.md b/body/006-images.md
@@ -1,15 +1,29 @@
-Let's spruce things up a bit by adding an image. Images are added using the `img` tag. It's different from other tags we've used in a few ways:
+### Objectives
+
+After this exercise, you should be able to:
+
+- Understand tag attributes
+- Understand tags that don't close
+- Explain the difference between absolute and relative URLs
+- Describe the `<img>` tag
+- Discuss the `alt` and `src` attributes
+- Explain why the `alt` attribute is important
+- Implement a requirement to add an image to a document
+
+### Example
+
+Let's spruce things up a bit by adding an image. Images are added using the `<img>` tag. It's different from other tags we've used in a few ways:
 
 1. It requires that we specify two *attributes*
 2. It doesn't need to be closed (we don't use `</img>`)
 
 An image tag might look like this:
 
 ```html
-<img src="img/flower.png" alt="A flower pot with three petunias">
+<img src="images/flower.png" alt="A flower pot with three petunias">
 ```
 
-`src` specifies the URL of the image to display. The above example is a *relative* URL, but you can also use an absolute URL like `http://example.com/img/flower.png`.
+`src` specifies the URL of the image to display. The above example is a *relative* URL, but you can also use an absolute URL like `http://example.com/images/flower.png`.
 
 > You can [read more about relative vs. absolute URLs on webreference](http://www.webreference.com/html/tutorial2/3.html).
 
@@ -22,6 +36,6 @@ An image tag might look like this:
 
 ## Assignment
 
-We've provided a logo for your page at `/img/hello-world.png`.
+We've provided a logo for your page at `/images/hello-world.png`.
 
-Add the image above the heading, within the `<body>` tags.
+Add the image above the heading, within the `<body>` tags.
diff --git a/body/007-lists.md b/body/007-lists.md
@@ -1,3 +1,13 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Define the difference between ordered and unordered lists
+- Implement the `<ol>`, `<ul>`, and `<li>` tags
+- Execute a conversion from paragraph text to lists
+
+### Example
+
 Our page currently displays a list of information in three separate paragraphs. It would be more semantically correct to display this information as a list.
 
 HTML supports two types of lists: ordered lists (`<ol>`) and unordered lists (`<ul>`). Each list item is specified with an `<li>` tag.
@@ -38,6 +48,6 @@ These are typically rendered with bullet points, like so:
 > - Edward Lear
 > - Harriet Tubman
 
-## Assignment
+### Exercise
 
-Convert the four paragraphs into an unordered list.
+Convert the four paragraphs into one unordered list with four list items.
diff --git a/body/008-tables.md b/body/008-tables.md
@@ -1,3 +1,13 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Define an HTML table
+- Understand and implement the `<table>`, `<th>`, `<tr>`, and `<td>` tags
+- Execute a conversion from lists to a table
+
+### Example
+
 Lists are good for showing a series of items in a single column. But some information is better represented on a grid.
 
 For example, it would be difficult to express this information in a simple list:
@@ -59,11 +69,11 @@ Here's the HTML that produces the above example. Notice how the header cells are
 </table>
 ```
 
-## Assignment
+### Exercise
 
 Convert the unordered list into a table with the following specifications:
 
 - One header row with the titles `Language` and `Translation`
 - Four data rows, with two columns:
 	1. Language (like `Luxembourgish`)
-	2. Translation (like `Moien Welt`)
+	2. Translation (like `Moien Welt`)
diff --git a/body/009-links.md b/body/009-links.md
@@ -1,6 +1,15 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Define "hyperlink"
+- Understand and implement the `<a>` tag
+
+### Example
+
 The table is good for showing a lot of data, but what if the user wants more information? What type of grammatical structure does Hawaiian have? Are there alternative spellings of "Luxembourgish"? Which languages affected the development of Swahili?
 
-To help them, we can provide links to other pages on the internet.
+To help them, we can provide links (short for "hyperlinks") to other pages on the internet.
 
 A link takes the following format:
 
@@ -12,8 +21,8 @@ It looks like this when rendered:
 
 > <a href="http://www.example.com">Example Website</a>
 
-## Assignment
+### Exercise
 
 - Link the text `Swahili` to `https://en.wikipedia.org/wiki/Swahili_language`
 - After the table, add the text "For additional translations, visit Bing Translator."
-- Link the text `Bing Translator` to `https://www.bing.com/translator`
+- Link the text `Bing Translator` to `https://www.bing.com/translator`
diff --git a/body/010-css.md b/body/010-css.md
@@ -0,0 +1,87 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Recognize a CSS rule set
+- Explain the difference between HTML and CSS
+- List the elements of a CSS rule set
+- State an example of a CSS rule set
+- Understand and implement the `<style>` tag
+
+### Example
+
+We use HTML to describe the meaning and hierarchy of our content, but it doesn't say much about how that content should look.
+
+CSS is a separate language that describes the *presentation* of this content.
+
+CSS works by applying a list of "rules" with style information to a page. Together, these rules are called a "rule set". Here's an example:
+
+```
+h1 {
+    color: aqua;
+    text-align: center;
+}
+```
+
+In this example:
+
+- `h1` is a "selector" (more on that later)
+- `color` and `text-align` are "properties"
+- `aqua` and `center` are "values"
+
+Together, one selector and one or more property/value pairs make up a "rule set".
+
+Try adding this CSS to your `index.html` file. It goes inside `<style>` tags within your `<head>` tags:
+
+```
+<head>
+  <title>Hello World Translations</title>
+  <style>
+    h1 {
+      color: aqua;
+      text-align: center;
+    }
+  </style>
+</head>
+```
+
+Notice how the selector `h1` corresponds to the `<h1>` HTML tag.
+
+Reload the page, and the header will appear in a soothing aqua color, centered on the page.
+
+### Exercise
+
+Let's spruce things up a bit.
+
+- Open the [CSS Reference](http://www.w3schools.com/cssref/) in a new tab.
+
+  > For each part of the assignment, review the CSS Reference and experiment with different options.
+  >
+  > You may encounter terms you're not familiar with, like *sans serif*, *margin*, and *pixel* (px for short). These terms are defined in the CSS Reference.
+
+- Using the `body` selector, create some general styles:
+	- Set `background-color` to `black`.
+	- Set `font-family` to `sans-serif`.
+	- Set `color` to `white`.
+- Using the `a` selector, set the `color` of links to `hotpink`.
+- Center the logo image by making the left and right margins equal. (You'll learn more about margins later.) Using the `img` selector:
+	- Set `display` to `block`.
+	- Set both `margin-left` and `margin-right` to `auto`.
+- Draw attention to the table headers by using the `th` selector to set `border` to `2px solid white`.
+
+    > This is called a *shorthand property* because it sets multiple values at once. Review the [CSS border Property](http://www.w3schools.com/cssref/pr_border.asp) reference to learn more.
+
+For the final part of the assignment, you'll apply rules to *both* the `table` and `td` selectors, like so:
+
+```css
+table, td {
+  …
+}
+```
+
+- Add additional styling to `table` and `td`:
+	- Set `border` to `1px solid gray`.
+	- Set `border-collapse` to `collapse`.
+	- Set `padding` to `10px`.
+
+Before submitting this assignment, experiment with different values to observe their effects.