grade11Spring/resources.html at main · Jauneld/grade11Spring · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resources</title>
  <link href="images/blankStare.png" rel="icon" type="image/png">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
  <link href="resources.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation Bar -->
  <!--<nav class="navbar navbar-expand-lg navbar-light bg-yellow">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <img src="images/blankStare.png" width="50px" height="50px" alt="blankStare" class="blank">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="work.html">Work</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="resources.html">Resources</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="reflection.html">Reflection</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>-->

  <!-- Content Section -->
  <div class="container mt-5">
    <h1 class="display-4 text-center">Resources</h1>
    <hr>

    <!-- Resource List -->
    <div class="row">
      <!-- Resource Item 1 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/W3Schools_logo.svg.png" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://www.w3schools.com/" class="nav-link active" target="_blank">W3Schools</a></h2>
            <p>We create simplified and interactive learning experiences. Learning web development should be easy to understand and available for everyone, everywhere! W3Schools is a school for web developers, covering all the aspects of web development.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 2 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/project_stem_logo_transp2.png" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://projectstem.org/" class="nav-link active" target="_blank">Project Stem</a></h2>
            <p>Project STEM is a teaching approach that primarily relies on project-based learning, where students gain understanding of concepts and can connect several subjects to get the necessary results. We increase pupils' motivation to learn, and problem-solve.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 3 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/codeSkulptor.jpeg" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://py3.codeskulptor.org/" class="nav-link active" target="_blank">Code Skulptor</a></h2>
            <p>Python code can be executed in a web browser with CodeSkulptor, an interactive web-based Python programming environment. Created by Professor Scott Rixner, its advantages include clear error warnings that are useful for debugging code, the ability to easily store, update, and share, and the ability to visualize program performance.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 4 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/mouse_org_logo.jpg" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://create.mouse.org/" class="nav-link active" target="_blank">Create Mouse</a></h2>
            <p>Mouse Create is our online learning platform designed for young people to build the skills they need to apply design and technology creatively to the world around them. Their projects and courses help educators build an environment for learners to explore, deepen, and practice creative and technical identities over time.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 5 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/python_tutorlogo.png" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://pythontutor.com/" class="nav-link active" target="_blank">Python Tutor</a></h2>
            <p>Python Tutor helps you do programming homework assignments in Python, Java, C, C++, and JavaScript. It contains a unique step-by-step visual debugger and AI tutor to help you understand and debug code. It is accessible for people of all ages.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 6 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/replit.png" class="rounded-circle me-5" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://replit.com/" class="nav-link active" target="_blank">Replit</a></h2>
            <p>Replit provides a large range of tools and features necessary for software development. It serves as an IDE, a code collaboration platform, a cloud provider, a developer community, and helps teach new coders different tricks.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 7 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/earsketchblack.jpg" class="rounded-circle me-3" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://earsketch.gatech.edu/landing/#/" class="nav-link active" target="_blank">EarSketch</a></h2>
            <p>Through the website EarSketch, students can mix and create music using programming (Python or JavaScript) and musical recordings. To compose creative music, students can use the pre-installed collection of sounds, instruments, and samples or add their own.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 8 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/everfi-logo-vector.png" class="rounded-circle me-3" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://everfi.com/" class="nav-link active" target="_blank">Everfi</a></h2>
            <p>That is precisely what EVERFI's dynamic, practical, and scientifically supported online education program is intended to do. We guarantee that your students are prepared for success in the twenty-first century by bridging the gap between education and the real world.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 9 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/github.jpg" class="rounded-circle me-3" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://github.com/" class="nav-link active" target="_blank">GitHub</a></h2>
            <p>GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>
          </div>
        </div>
      </div>

      <!-- Resource Item 10 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/figma-icon.png" class="rounded-circle me-3" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://www.figma.com/" class="nav-link active" target="_blank">Figma</a></h2>
            <!--The W3C Validator (also known as the W3C Markup Validation Service) is an online tool provided by the World Wide Web
            Consortium (W3C) that checks the syntax of web documents (HTML, XHTML, and XML) to ensure they conform to web standards.
            It helps developers identify errors and issues in their code that could affect how a webpage displays or functions.
            The validator checks for compliance with W3C's guidelines and specifications, providing feedback on how to improve the code to
            ensure it is both accessible and compatible with different browsers and devices.-->
            <p>Figma is a cloud-based design tool for creating UI/UX, allowing real-time collaboration and seamless access from any device.</p>
          </div>
        </div>
      </div>
            <!-- Resource Item 9 -->
      <div class="col-md-6 mb-4">
        <div class="resource-item d-flex align-items-center">
          <img src="images/I_heart_validator_lg.png" class="rounded-circle me-3" alt="Resource Image">
          <div>
            <h2 class="h4"><a href="https://validator.w3.org/" class="nav-link active" target="_blank">W3 Validator</a></h2>
            <p>The W3C Validator is an online tool that checks web documents for syntax errors and compliance with web standards to ensure proper functionality and compatibility.</p>
          </div>
        </div>
      </div>

    </div>
    <hr>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-0Hnb7A6m6hsSUG+Kw3azVhaTpqY5BRjVcv+j5z4cK5fsrpBCc5V98a7u5W9ZggmVQuvjJzvAn5Rh0yMlGw4vNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
</body>
</html>