maskscoding/masksscratch.html at master · queentsuki/maskscoding · 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
<!DOCTYPE>
<html>
<head>
  <link rel="stylesheet" href="masksinc.css">
</head>
<style>

p.solid {border-style: solid;}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}


li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

  .img104{display: block;
      margin-left: auto;
      margin-right: auto;
      width: 20%;}

      .center {
        text-align: center;
        border: 3px solid navy;
    }
  </style>

  <body>

    <div class="codingimg"
    <h1>Masks Coding</h1>
    <img class="img104" src="https://files.slack.com/files-pri/TB45VSEGL-FBT1SN2GH/screen_shot_2018-07-19_at_9.50.30_am.png">
    </div>
    <ul>
      <li><a href="index.html"> Home </a></li>
      <li><a class="active" href="masksscratch.html"> Scratch </a></li>
      <li><a href="masksabout.html"> About </a></li>
      <li><a href="masksprojects.html">Projects</a></li>
    </ul>
    <h2><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Scratch_Logo.svg/2000px-Scratch_Logo.svg.png" alt="Scratch Logo" style="width:500px;height:168.25px"></h2>

<p class="solid"><h3>Watch this video to learn how to get to Scratch!</h3></p>
    <div class="clearfix">
      <video width="420" height="270" controls>
    <source src="https://files.slack.com/files-pri/TB45VSEGL-FBTKEKY3C/download/ice_video_20180719-104313.mp4" alt="this video is just showing people how to get to scratch and how to get to there projects and how to create them" type="video/mp4">
      <h2>test</h2>
    </div>

<p class="solid"><h3>For this lesson, you'll see how to change sprites and backgrounds (Sprites are avatars that you can control with commands).<h3></p>
    <div class="clearfix">
      <video id="right" width="420" height="270" controls>
    <source src="https://files.slack.com/files-pri/TB45VSEGL-FBTPZUNH3/download/anna_back.mp4" alt="A video showing people how to change sprites and the background,you can draw on it and make them different colors" type="video/mp4">
    </div>

<p class="solid"><h3>Next, you'll see how motion command blocks work, think about how you can make your spite move by connecting them together!<h3></p>
    <div class="clearfix">
      <video width="420" height="270" controls>
    <source src="https://files.slack.com/files-pri/TB45VSEGL-FBSV3VC1E/download/motion.mp4" alt="A video showing people how the motion blocks work and how to make the sprite move around the background" type="video/mp4">
    </div>

<p class="solid"><h3>This next part displays how to use looks commands. You can customize their look and add different costumes for your sprites!</h3> </p>
    <div class="clearfix">
      <video id="right" width="420" height="270" controls>
    <source src="https://files.slack.com/files-pri/TB45VSEGL-FBTDEEY2G/download/ice_video_20180719-113516.mp4" alt="A video showing people hpw the looks blocks work and how peple can change the color of the sprites"  type="video/mp4">
    </div>

<p class="solid"><h3>With sound commands, you can add noises to your sprites and they'll play it for you!<h3></p>
    <div class="clearfix">
      <video width="420" height="270" controls>
    <source src="https://files.slack.com/files-pri/TB45VSEGL-FBTKNN8QK/download/two_sounds_playing_at_a_time_.mp4" alt="A video showing people the sound blocks on scratch and how to get them to work" type="video/mp4">
    </div>

  <p class="solid"><h3>This video displays how control blocks work and the cool different things you can do with it.<h3></p>
        <div class="clearfix">
          <video id="right" width="420" height="270" controls>
        <source src="https://files.slack.com/files-pri/TB45VSEGL-FBT76HC56/download/broadcastfeature.mp4" alt="A video showing people how the control blocks work" type="video/mp4">
        </div>

  <p class="solid"><h3>Sensing blocks can help your sprite do a certain action when the touch something specific, like colors or other sprites!<h3></p>
       <div class="clearfix">
       <video width="420" height="270" controls>
       <source src="https://files.slack.com/files-pri/TB45VSEGL-FBVAV4J4F/download/sensing_video.mp4" alt="A video showing people how the sensing blocks work" type="video/mp4">
       </div>

  <p class="solid"><h3>Operating Blocks are used for inputs from the player. If they chose   a certain path or type something specific, the block will display what it's been told to do.<h3></p>
        <div class="clearfix">
        <video id="right" width="420" height="270" controls>
        <source src="https://files.slack.com/files-pri/TB45VSEGL-FBVAV4J4F/download/sensing_video.mp4" alt="A video showing people how the operator blocks work" type="video/mp4">
        </div>

<p class="solid"><h3> More Blocks is custom commands you can create, like giving something a name and defnition. If you want a sprite to run a specific group of commands but don't want to remake it everytime, use More Blocks to define a group of commands for easy reuse in your code.</p>
  <img src="https://files.slack.com/files-pri/TB45VSEGL-FBUE6DES1/screen_shot_2018-07-20_at_10.19.01_am.png" alt="More Blocks Image" style="width:480px;height:255.3px">


</body>
</html>