maskscoding/masksprojects.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="masksinc.css">

  <style>
  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;
      }

    .img1 {
        float: right;
    }

    .clearfix {
        overflow: auto;
    }

    .img2 {
        float: right;
    }
    </style>
  </head>
  <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 href="masksscratch.html">Scratch</a></li>
      <li><a href="masksabout.html">About</a></li>
      <li><a class="active" href="masksprojects.html">Projects</a></li>
    </ul>

      <p> <h2 style="font-size:35px">- These are some project ideas you can create -</h2> </p>

    <div id="teal" class="clearfix">
        <img class="img2" src="https://www.incimages.com/uploaded_files/image/635x367/30u30ss_193816.jpg" alt="People of different culture and race" style="width:510px;height:290px">
        <p2> Project Prompt: All About Me!</br></p2>
        <p2> Difficulty: Easy <br/></p2>
        <p2><br/></p2>
        <p2>    - Make a Sprite representative of you!<br/></p2>
        <p2>    - Have 3 facts about you (Favorite Artist, What you do for fun, etc.)<br/></p2>
        <p2><br/></p2>
        <p2>Tip: You can upload images from your computer into scratch to really customize your work!<br/></p2>
        <p2> Example: <a href="https://scratch.mit.edu/projects/228636542/">All About Me<br/></a></p2>
        <p2><br/></p2>
        <p id="right"> Photo from: <a href="https://www.inc.com/guadalupe-gonzalez/ss/30-under-30-2017-weirdest-millennial-hobbies.html" >Inc.</a></p>
    </div>

      <p2><br/></p2>

    <div id="purple" class="clearfix">
        <img class="img2" src="https://c1.staticflickr.com/3/2831/9618459096_489f19bfd9_b.jpg" alt="America's Got Talent Logo" style="width:510px;height:300px">
        <p2> Project Prompt: Dance Battle! <br/></p2>
        <p2> Difficulty: Medium <br/></p2>
        <p2></br></p2>
        <p2>    - Create 2 contestants</br></p2>
        <p2>    - Make them each do unique dances<br/></p2>
        <p2>    - Implement a voting system<br/></p2>
        <p2>    - Don't forget to add music!<br/></p2>
        <p2><br/></p2>
        <p2> Tip: Broadcast blocks are super helpful with this project!<br/></p2>
        <p2> Example: <a href="https://scratch.mit.edu/projects/228798230/">America's Got Talent - Dance Off! </a><br/></p2>
        <p id="right"> Photo from: <a href="https://www.flickr.com/photos/pennstatelive/9618459096">Flickr</a><br/></p>
    </div>

    <p2><br/></p2>

    <div id="teal" class="clearfix">
      <img class="img2" src="https://media.istockphoto.com/photos/futuristic-cityscape-maze-picture-id613319346?k=6&m=613319346&s=612x612&w=0&h=xupRF8S-YsxEf0yNa_U0EtblHkYl8gWJvOhtm3KCED4=" alt="maze" style="width:510px;height:450px">
      <p2> Project Prompt: Maze Game!<br/></p2>
      <p2> Difficulty: Hard<br/></p2>
      <p2><br/></p2>
      <p2>    - Have one main Sprite that you can control<br/></p2>
      <p2>    - Certain blocks, colors, or sprites leave a negative or positive effect after touching it<br/></p2>
      <p2>    - Have an end goal<br/></p2>
      <p2>    - Have a way to win and lose<br/></p2>
      <p2>    - Add cool sound effects!<br/></p2>
      <p2>    - Have a theme to your maze<br/></p2>
      <p2>    - For an extra hard challenge, add multiple levels!<br/></p2>
      <p2><br/></p2>
      <p2> Tip: Copying some of the code from the example may be useful if you're having difficulty<br/></p2>
      <p2> Example: <a href="https://scratch.mit.edu/projects/229194037/">Ice Maze</a><br/></p2>
      <p id="right"> Image from: <a href="https://www.istockphoto.com/photos/maze?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=maze">iStock</a><br/></p>
    </div>

    <p2><br/></p2>

    <div id="purple" class="clearfix">
      <img class="img2" src="https://orig00.deviantart.net/8203/f/2013/283/b/b/fortune_teller_by_kyrukai-d6pwt2f.jpg" alt="Fortune Teller" style="width:510px;height:350px">
      <p2> Project Prompt: Fortune Teller!<br/></p2>
      <p2> Difficulty: Medium<br/></p2>
      <p2><br/></p2>
      <p2>    - Have one Sprite be the "Fortune Teller"<br/></p2>
      <p2>    - Have 4 options that lead to other options that end up with a fortune you write<br/></p2>
      <p2>    - Let the player interact and type to choose their fate<br/></p2>
      <p2><br/></p2>
      <p2> Tip: Look at the example for some helpful starter code!<br/></p2>
      <p2> Example: <a href="https://scratch.mit.edu/projects/228982053/#">Fortune Teller</a><br/></p2>
      <p2><br/></p2>
      <p2><br/></p2>
      <p id="right"> Image from: <a href="https://www.deviantart.com/kyrukai/art/Fortune-Teller-406318119">Deviant Art</a><br/></p>
    </div>

  </body>