From 32671f34a8cca01ecbf520e02b359ae1249f0992 Mon Sep 17 00:00:00 2001 From: Deborah Gertrude Digges Date: Fri, 7 Aug 2015 19:09:45 +0530 Subject: [PATCH] Add solution for lesson 1 --- index.html | 3 ++- index.md | 1 + solutions.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++ solutions.md | 46 +++++++++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 solutions.html create mode 100644 solutions.md diff --git a/index.html b/index.html index 7c5c5c0..c8e5514 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@

Visualizing your data on the web using D3

-

Prerequisites

+

Prerequisites

    @@ -68,6 +68,7 @@

    Topics

  • D3 Into the data
  • D3 Add and remove
  • D3 Transitions
    • +
  • Solutions
    1. What now?
      2. diff --git a/index.md b/index.md index f9b7f49..6a2f419 100644 --- a/index.md +++ b/index.md @@ -47,6 +47,7 @@ Along the way, we will learn: 8. [D3 Into the data](08-d3enter.html) 9. [D3 Add and remove](09-d3exit.html) 10. [D3 Transitions](10-d3update.html) +11. [Solutions](solutions.html) xx. [What now?](xx-d3future.html) We are using [gapminder data](http://gapminder.orf) and the later lessons are based on an example by [Mike Bostock](http://bost.ocks.org/mike/nations/). diff --git a/solutions.html b/solutions.html new file mode 100644 index 0000000..876911a --- /dev/null +++ b/solutions.html @@ -0,0 +1,70 @@ + + + + + + Software Carpentry: Visualizing your data on the web using D3 + + + + + + + + + + + +
      + +
      +
      +

      Visualizing your data on the web using D3

      +

      Solutions

      +

      Lesson 01-HTML

      +
      +
      +

      Other elements

      +
      +
      +

      Create a folder that contains the file index.html (or download it). What seems to be the difference between <div>, <h1>, and <em>? Create a heading that is in italics.

      +
      +
      +
      +

      <div> is a generic container which inherently does not represent anything.

      +

      <h1> is used to create a large heading on the page. There are different heading levels, from the largest(<h1>), to the smallest(<h6>).

      +

      <em> is used to Emphasize a portion of text.

      +

      So, what is the difference between <em> and <i>?

      +

      The <em> tag stresses emphasis of its contents, while the <i> tag represents text that is set off from the normal prose, such as the name of a movie or book, a foreign word, or when the text refers to the definition of a word instead of representing its semantic meaning.

      +

      Solution:

      +
      <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Lesson 1</title>
+    </head>
+    <body>
+        <h1><i>Heading in Italics!</i></h1>
+    </body>
+</html>
      +
      +
      +
      +
      + Software Carpentry + Source + Contact + License +
      +
      + + + + + diff --git a/solutions.md b/solutions.md new file mode 100644 index 0000000..16c34de --- /dev/null +++ b/solutions.md @@ -0,0 +1,46 @@ +--- +layout: page +title: Visualizing your data on the web using D3 +subtitle: Solutions +minutes: 0 +--- + +## Lesson 01-HTML + +> ## Other elements {.challenge} +> Create a folder that contains the file index.html (or download it). +> What seems to be the difference between <div>, <h1>, and <em>? +> Create a heading that is in italics. + +**** +`
      ` is a generic container which inherently does not represent anything. + +`

      ` is used to create a large heading on the page. There are different heading levels, +from the largest(`

      `), to the smallest(`

      `). + +`` is used to Emphasize a portion of text. + +So, what is the difference between `` and ``? + +The `` tag stresses emphasis of its contents, while the `` tag represents +text that is set off from the normal prose, such as the name of a movie or book, +a foreign word, or when the text refers to the definition of a word instead of +representing its semantic meaning. + +Solution: + +~~~ {.html} + + + + + Lesson 1 + + +

      Heading in Italics!

      + + +~~~ + +*** +