intro-to-js-perth/index.html at master · muses-code-js/intro-to-js-perth · 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>

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

<body>
  <h1>Muses JS - HTML, CSS and JavaScript Introduction</h1>
  <p>This workshop is divided into a number of lessons, intended to teach beginners to build a simple web page.</p>
  <p>After each lesson, you should feel confident with the 'key takeaway' dot points. If you already feel you understand
    these concepts, skip ahead to a lesson that is appropriate for your skill level. </p>

  <h2><a href="./lesson-1.html">Lesson 1: Basic HTML</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>I have a text editor I'm comfortable using</li>
    <li>I'm able to edit the html files in my text editor and view the changes in the browser.</li>
    <li>I can create simple elements like a paragraph and heading.</li>
  </ul>
  <h2><a href="./lesson-2.html">Lesson 2: HTML and CSS</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>When identifying elements, I know when to use a class and when to use an id.</li>
    <li>I can apply CSS styles to HTML elements based on their classes and ids.</li>
    <li>I can edit some CSS styles like background-color and width.</li>
    <li>I know what comments look like in CSS.</li>
    <li>I know where I can find more information about CSS properties.</li>
  </ul>

  <h2><a href="./lesson-3.html">Lesson 3: Interactive CSS</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>I can apply different styles to elements when I hover over them.</li>
    <li>I can add new classes to existing elements.</li>
    <li>I can edit some features of an animation, like it's duration.</li>
  </ul>
  <h2><a href="./lesson-4.html">Lesson 4: Basic JavaScript</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>I know where to find the JavaScript code within the module pages</li>
    <li>I can edit an pop up message</li>
    <li>I know what comments look like in JavaScript</li>
    <li>I can find the console log in the developer tab.</li>
  </ul>
  <h2><a href="./lesson-5.html">Lesson 5: Editing HTML with JavaScript</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I can edit the <code>document.querySelector</code> in JavaScript to successfully find an element.
    </li>
    <li>
      I can insert custom text into HTML using JavaScript.
    </li>
  </ul>
  <h2><a href="./lesson-6.html">Lesson 6: Triggering Changes with JavaScript</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I understand what a function is.
    </li>
    <li>
      I can edit a function and make it do different things.
    </li>
    <li>
      I can make a function run when a button is pressed.
    </li>
  </ul>
  <h2><a href="./lesson-7.html">Lesson 7: Variables</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I understand what a variable is.
    </li>
    <li>
      I can use a variable to store different things, like numbers or colours.
    </li>
    <li>
      I know what an array is, and can alter code to add more elements to an array.
    </li>
    <li>
      I know how to access an item in an array using an index value.
    </li>
  </ul>
  <h2><a href="./lesson-8.html">Lesson 8: Loops</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I understand what a loop is.
    </li>
    <li>
      I can use a loop to print different numbers.
    </li>
    <li>
      I can use a loop to access items in an array using the index of the loop.
    </li>
  </ul>
  <h2><a href="./lesson-9.html">Lesson 9: If Statments</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I understand what an if statement is.
    </li>
    <li>
      I can use a variable to change the result of an if statement.
    </li>
    <li>
      I know how to compare numbers in a if statement, e.g.: is 'x' less than 'y'
    </li>
  </ul>
  <h2><a href="./lesson-10.html">Lesson 10: Piloting a Spaceship</a></h2>
  <ul>
    <li>
      I can connect functions to buttons.
    </li>
    <li>
      I can create new functions.
    </li>
    <li>
      I can use JavaScript to manipulate HTML.
    </li>
  </ul>
  <h2><a href="./lesson-11.html">Lesson 11: Web Development</a></h2>
  <h3>Key Takeaways:</h3>
  <ul>
    <li>
      I can connect functions to keystrokes (e.g.: up, down, left, right).
    </li>
    <li>
      I use JavaScript to manipulate HTML.
    </li>
    <li>
      I can create more complicated if statements which depend on different variables.
    </li>
  </ul>
  <hr />
  <h2>Games</h2>
  <p>Once you understand the basics concepts behind building a web page, we've provided some partially completed games
    which you can add features to.</p>
  <h2><a href="./game-jurassic-park.html">Jurassic Park</a></h2>
  <h2><a href="./game-hangman.html">Hangman</a></h2>

</body>

</html>