hourofcode/tutorial_01.html at master · beautyjoy/hourofcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<meta charset="utf-8"></meta>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body style="background: white;">

    <div class="lab-page">
      <h2>Part 1</h2>

      <p>
      Have you wondered how animators create scenes like the ones above?
      Well, it's no surprise that converting this art to animation takes lots and lots of programming skill that is developed over time through countless trials and iterations.
      Let's see if we can break down this scene into smaller components and try our hand at building some graphics.
      </p>

      <p>
      Let's focus specifically on the tree.If you look closely at the picture, the tree itself is made up of a pattern of similar strokes. In this hour of code, we will teach you how to break down these patterns to have you code a tree of you own. You will be equipped with the basic framework, earning a technique from animators' toolbox.
      </p>

      <p>
      With lots of coding and playing around, you will get a tree that looks like this:
      </p>


    </div>
</body>
</html>