Merge pull request #3 from Bloc/stanley-review

Closes #2
Bloc · Jun 29, 2016 · d19ae29 · d19ae29
2 parents 8e66f42 + 675111b
commit d19ae29
Show file tree

Hide file tree

Showing 41 changed files with 626 additions and 445 deletions.
diff --git a/body/001-hello-world.md b/body/001-hello-world.md
@@ -1,3 +1,5 @@
+Welcome to Bloc's HTML & CSS Workshop course! During this course, you will learn the syntax that supports every website on the planet. Without HTML and CSS, the internet would be a different, and probably crappier place!
+
 ### Objectives
 
 After this exercise, you should be able to:
@@ -8,20 +10,20 @@ After this exercise, you should be able to:
 
 ### 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, or Hypertext Markup Language, describes a hierarchy of visual elements that a browser can display.
 
-HTML usually looks like some human-readable text surrounded by "tags". Tags are denoted by angle brackets, like so:
+HTML usually looks like human-readable text surrounded by **tags**. We create tags using angle brackets, like so:
 
 ```html
 <example-tag>
   There was music in the cafes at night, and revolution in the air.
 </example-tag>
 ```
 
-The closing tag inserts `/` after the left angle bracket.
+Most tags require both an **opening** (`<example-tag>`) and a **closing** tag (`</example-tag>`). A forward-slash (`/`) proceeds the first angle bracket of all closing tags.
 
-The most common tag is `<p>`, which is shorthand for *paragraph*.
+The most common tag is `<p>`, short for *paragraph*.
 
 ### Exercise
 
-Surround the text `Hello World` with the opening and closing paragraph tags.
+- Surround the `Hello World` text with opening and closing paragraph tags.
diff --git a/body/002-aloha.md b/body/002-aloha.md
@@ -6,12 +6,12 @@ After this exercise, you should be able to:
 
 ### Example
 
-You can add multiple paragraphs to the same document. Let's translate *Hello World* into a few other languages.
+You can add multiple paragraphs to the same document. Let's translate, "Hello World," into a few other languages!
 
 ### Exercise
 
 - Insert `English: ` before the text in your first paragraph.
-- Create three additional paragraphs:
+- Add three new paragraphs:
 	- `Hawaiian: Aloha Houna`
 	- `Luxembourgish: Moien Welt`
 	- `Swahili: Salamu Dunia`
diff --git a/body/003-headers.md b/body/003-headers.md
@@ -2,21 +2,24 @@
 
 After this exercise, you should be able to:
 
-- Identify the HTML header tag
+- Identify the HTML header tag (`<h1>`, `<h2>`, etc.)
 - 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!
+Not all text is *paragraph* text. Documents often have headings; headings are powerful!
 
-When writing headings, instead of using `<p>` (and `</p>`), you can use `<h1>` through `<h6>`.
+When writing headings, instead of using `<p>` (and `</p>`), you use `<h1>`, `<h2>`, and up to `<h6>`.
 
-- `<h1>`: most important.
-- `<h6>`: least important.
+- `<h1>`: most important text (largest).
+- `<h2>`, `<h3>`,…
+- `<h6>`: least important text (smallest).
 
-`<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>`.
+Your pages should have at most a single `<h1>` tag, but use other tags as many times as you like. For example, on a newspaper, "The New York Times" is in large letters on the front page. This is analogous to the `<h1>` tag.
+
+But not that it's not a hard and fast rule, but it keeps the importance of each heading readily distinguishable.
 
 ### 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, it should read, "Hello World Translations."
diff --git a/body/004-html-and-body.md b/body/004-html-and-body.md
@@ -3,14 +3,14 @@
 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
+- Describe the order of these tags
+- Describe the importantance of each tag
 
 ### 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 text you've written thus far belongs to the visual content of the HTML document. This is called the document's **body**, and we surrounded it with `<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 like this:
+The document's body is one part of an HTML document (we'll get to the other part — the document's **head** — later.) And we surround the `<body>` tags with `<html>` tags, like so:
 
 ```html
 <html>
@@ -20,8 +20,10 @@ The document's body is one part of an HTML document. (We'll get to the other par
 </html>
 ```
 
-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.
+`<html>` indicates the beginning, and `</html>` indicates the end of your HTML document.
+
+It may seem overly verbose, but these formatting rules help web browsers display your documents properly. Without them, browsers may display your content incorrectly, may take longer to display it, or may not display it at all.
 
 ### Exercise
 
-- Correctly place `<html>` and `<body>` tags around our document.
+- Place `<html>` and `<body>` tags around your content.
diff --git a/body/005-head-and-title.md b/body/005-head-and-title.md
@@ -3,19 +3,19 @@
 After this exercise, you should be able to:
 
 - Identify the `<head>` and `<title>` tags
-- Describe which of these tags comes first
+- Describe the order of these tags
 - 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.
+HTML documents must include a body and a **head** section. The head contains non-visible page elements which the web browser or search engine crawlers may 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.
+At a minimum, you must include the `<title>` tag which defines the title of the HTML document. The title is used in a few places, like the browser's title bar and the bookmarks menu. It's also used in search engine results.
 
-At a minimum, HTML documents must have these tags:
+Here's a look at a sample head section with a title:
 
 ```html
 <html>
@@ -28,7 +28,7 @@ At a minimum, HTML documents must have these tags:
 </html>
 ```
 
-Once HTML has these tags, we can promise the browser that our document complies with the HTML5 standards. To do this, we insert a weird-looking `DOCTYPE` tag at the top, like so:
+We must have these elements in place to comply with HTML5 standards. And to delcare our page an HTML5 document, we insert a `DOCTYPE` tag at the top, like so:
 
 ```html
 <!DOCTYPE html>
@@ -37,10 +37,10 @@ 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.
+Unlike other tags we've worked with, `DOCTYPE` isn't an HTML tag. It's a special web browser instruction that indicates what kind of document this is. This helps browsers render your pages faster because they skip the process which determines the version of HTML your document requires (in this case, we know it's 5).
 
 ### Exercise
 
-- Add `<head>` tags.
-- Add a title.
+- Add `<head>` tags to your document.
+- Add a title, make it anything you like.
 - Add the `DOCTYPE` instruction.
diff --git a/body/006-images.md b/body/006-images.md
@@ -2,40 +2,39 @@
 
 After this exercise, you should be able to:
 
-- Understand tag attributes
-- Understand tags that don't close
+- Identify tag attributes
+- Identify 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:
+Let's spruce things up a bit by adding an image. We add images using the `<img>` tag. It's different from other tags we've used in two ways:
 
-1. It requires that we specify two *attributes*
-2. It doesn't need to be closed (we don't use `</img>`)
+1. It requires *attributes*
+2. We don't need to close it (no `</img>` at the end)
 
-An image tag might look like this:
+An image tag can look like this:
 
 ```html
 <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/images/flower.png`.
+`src` specifies the URL of the image to display. The above example is a *relative* URL, but you can use absolute URLs 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).
 
-`alt` specifies a brief description of the image. This is used in the image's place if the image can't be displayed. For example:
+`alt` provides a brief description of the image. The browser renders the `alt` text if it fails to display the image. Causes for this include:
 
-- the user is on a slow connection
-- the user is vision-impaired and they interact with their browser using audio
-- the user has a very old web browser that doesn't support images
-- the image cannot be found
+- The user is on a slow connection
+- The user is vision-impaired and they interact with their browser using audio
+- The user has an old browser that doesn't support images
+- The image cannot be found (broken link)
 
 ## Assignment
 
-We've provided a logo for your page at `/images/hello-world.png`.
-
-Add the image above the heading, within the `<body>` tags.
+- Add an image above the heading within the `<body>`; you may use any image you like!
+  - If you can't find an image, we've provided one at this relative address: `/images/hello-world.png`.
+  - Make sure to provide an `alt` attribute with your image.
diff --git a/body/007-profile-page.md b/body/007-profile-page.md
@@ -0,0 +1,26 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Use paragraphs, headings, and images to build a basic profile
+
+### Example
+
+Practically every website on the planet allows users to create a profile. Profiles like those on Facebook aggregate an enormous amount of personal information: age, gender, eye color, height, weight, and the total number of hairs on your body (56,783,238 for me!).
+
+In this exercise, you will use your brand new HTML knowledge to create your own profile that reflects the best things about you!
+
+### Exercise
+
+- Create a file named, "profile.html."
+  - Add the necessary HTML structure: `doctype`, `html`, `head`, `body`, etc.
+  - Choose a title for your profile.
+  - Use a combination of images, headings, and paragraphs to represent yourself. For example:
+    - Profile Image
+    - Heading (your name)
+      - Paragraph (about you!)
+    - Heading (My Secrets)
+      - **Several paragraphs divulging all of your deepest, darkest secrets**
+      - We won't read these (out loud)
+  - Submit whenever you're satisfied with your profile, no rush.
+  - And most importantly, **have fun**!
diff --git a/body/007-lists.md → body/008-lists.md b/body/007-lists.md → body/008-lists.md
@@ -8,9 +8,9 @@ After this exercise, you should be able to:
 
 ### 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.
+Our page currently displays a list of information in three separate paragraphs. It makes more sense to display this information in a list.
 
-HTML supports two types of lists: ordered lists (`<ol>`) and unordered lists (`<ul>`). Each list item is specified with an `<li>` tag.
+HTML supports two types of lists: ordered lists (`<ol>`) and unordered lists (`<ul>`). Each list item is defined by a `<li>` tag.
 
 ----
 
@@ -26,9 +26,11 @@ Here's an ordered list:
 
 These are typically rendered with numbers, like so:
 
-> 1. Beyoncé
-> 2. Mary Virginia Cook Parrish
-> 3. Harriet Tubman
+<ol>
+  <li>Beyoncé</li>
+  <li>Mary Virginia Cook Parrish</li>
+  <li>Harriet Tubman</li>
+</ol>
 
 ----
 
@@ -44,10 +46,12 @@ Here's an unordered list:
 
 These are typically rendered with bullet points, like so:
 
-> - Archduke Charles, Duke of Teschen
-> - Edward Lear
-> - Harriet Tubman
+<ul>
+  <li>Archduke Charles, Duke of Teschen</li>
+  <li>Edward Lear</li>
+  <li>Harriet Tubman</li>
+</ul>
 
 ### Exercise
 
-Convert the four paragraphs into one unordered list with four list items.
+- Convert the four paragraphs into one unordered list with four list items.
diff --git a/body/009-links.md b/body/009-links.md
diff --git a/body/008-tables.md → body/009-tables.md b/body/008-tables.md → body/009-tables.md
@@ -4,13 +4,13 @@ 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
+- Convert lists to tables
 
 ### 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:
+For example, it's difficult to express this information in a simple list:
 
 | Country       | National Animal | Motto                              | Population  |
 |---------------|-----------------|------------------------------------|-------------|
@@ -71,9 +71,8 @@ Here's the HTML that produces the above example. Notice how the header cells are
 
 ### 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`)
+- Convert your unordered list into a table with the following specifications:
+  - One header row with the titles `Language` and `Translation`
+  - Four data rows, with two columns:
+	  - Language (like `Luxembourgish`)
+	  - Translation (like `Moien Welt`)
diff --git a/body/010-links.md b/body/010-links.md
@@ -0,0 +1,30 @@
+### Objectives
+
+After this exercise, you should be able to:
+
+- Define "hyperlink"
+- Understand and use the `<a>` tag
+
+### Example
+
+Tables are 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 (short for "hyperlinks") to other pages on the internet.
+
+A link takes the following format:
+
+```html
+<a href="http://www.example.com">Example Website</a>
+```
+
+It looks like this when rendered:
+
+> <a href="http://www.example.com">Example Website</a>
+
+The `href` attribute, like `src` in the `<img>` tag, contains a relative or absolute URL. The text between the tags represents the link's title.
+
+### Exercise
+
+- Link `Swahili` to `https://en.wikipedia.org/wiki/Swahili_language`.
+- After the table, add a paragraph that reads, "For additional translations, visit Bing Translator."
+  - Link `Bing Translator` to `https://www.bing.com/translator`.