JSPlayz/index.html at main · nickfrostcode/JSPlayz · 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- *========= Meta Tags and Page Information ========= -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- ? ------- SEO Optimization -------- -->
  <meta name="robots" content="index, follow" />
  <meta name="description"
    content="Master JavaScript with fun, hands-on projects. From beginner DOM manipulation to advanced algorithms - build real applications and sharpen your skills. Powered by Nick Frøst Innovations." />
  <meta name="keywords"
    content="JavaScript projects, learn JavaScript, DOM manipulation, vanilla JavaScript, coding practice, JavaScript tutorials, web development, programming exercises, JavaScript games, API integration, Nick Frøst Innovations, beginner JavaScript, intermediate JavaScript, advanced JavaScript" />
  <meta name="author" content="Nick Frøst Innovations" />

  <!-- Open Graph / Facebook Meta Tags -->
  <meta property="og:title" content="JSPlayz - Interactive JavaScript Learning Projects" />
  <meta property="og:description"
    content="Master JavaScript through hands-on projects! From beginner DOM manipulation to advanced algorithms. Build real applications and level up your coding skills." />
  <meta property="og:image" content="https://nickfrost2.github.io/JSPlayz/images/jsplayz-preview.png" />
  <meta property="og:url" content="https://nickfrost2.github.io/JSPlayz/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="JSPlayz - JavaScript Learning Playground" />

  <!-- *========== Twitter Meta Tags====== -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="JSPlayz - Learn JavaScript Through Interactive Projects" />
  <meta name="twitter:description"
    content="🎮 Try. 💡 Learn. 🔁 Repeat. Master JavaScript with 25+ hands-on projects from beginner to advanced. DOM manipulation, APIs, algorithms & more!" />
  <meta name="twitter:image" content="https://nickfrost2.github.io/JSPlayz/images/jsplayz-preview.png" />
  <meta name="twitter:creator" content="@nickfrost2" />

  <!-- *========= Structured Data for SEO ========= -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "JSPlayz - JavaScript Learning Projects",
      "applicationCategory": "EducationalApplication",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "operatingSystem": "All",
      "description": "Interactive JavaScript learning platform with 25+ hands-on projects. Master DOM manipulation, APIs, algorithms, and modern JavaScript through practical coding exercises.",
      "creator": {
        "@type": "Organization",
        "name": "Nick Frøst Innovations",
        "url": "https://nickfrost-portfolio.vercel.app/"
      },
      "maintainer": {
        "@type": "Person",
        "name": "Nick Frøst",
        "jobTitle": "Lead Developer & JavaScript Educator",
        "email": "bensonnicholas206@gmail.com"
      },
      "inLanguage": "en-US",
      "audience": {
        "@type": "Audience",
        "audienceType": "JavaScript Learners and Web Developers"
      },
      "potentialAction": [
        {
          "@type": "PlayAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://nickfrost2.github.io/JSPlayz/",
            "description": "Try interactive JavaScript projects"
          },
          "object": {
            "@type": "Thing",
            "name": "JavaScript Learning Projects"
          }
        },
        {
          "@type": "LearnAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://nickfrost2.github.io/JSPlayz/projects/",
            "description": "Learn JavaScript through hands-on coding"
          },
          "object": {
            "@type": "Thing",
            "name": "Interactive JavaScript Tutorials"
          }
        }
      ],
      "about": [
        {
          "@type": "Thing",
          "name": "JavaScript Programming",
          "description": "Learn modern JavaScript (ES6+) through practical, real-world projects and exercises."
        },
        {
          "@type": "Thing",
          "name": "Web Development Skills",
          "description": "Master DOM manipulation, API integration, and front-end development fundamentals."
        }
      ],
      "mainEntityOfPage": {
        "@type": "WebPage",
        "url": "https://nickfrost2.github.io/JSPlayz/"
      },
      "educationalLevel": "Beginner to Advanced",
      "teaches": [
        "JavaScript Fundamentals",
        "DOM Manipulation",
        "API Integration",
        "Event Handling",
        "ES6+ Features",
        "Algorithms and Logic Building"
      ]
    }
  </script>

  <!-- *========= Favicon ========= -->
  <link rel="icon" type="image/png" sizes="192x192" href="assets/images/JSPlayz_Logo.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/JSPlayz_Logo.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/JSPlayz_Logo.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/JSPlayz_Logo.png" />
  <meta name="msapplication-TileImage" content="assets/images/JSPlayz_Logo.png" />
  <meta name="theme-color" content="#00D4FF" />
  <meta name="apple-mobile-web-app-title" content="JSPlayz - JavaScript Learning" />

  <link rel="canonical" href="https://nickfrost2.github.io/JSPlayz/" />

  <!-- *========= External CSS Libraries ========= -->
  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css" />

  <!-- *========= Custom Stylesheet ========= -->
  <link rel="stylesheet" href="assets/styles/homepage.css" />

  <title>JSPlayz - Learn JavaScript Through Interactive Projects</title>
</head>

<body>

  <a href="index.html" title="Home">
    <nav>
      <i class="fas fa-house"></i>
    </nav>
  </a>

  <a href="https://github.com/NickFrost2/JSPlayz" target="_blank" rel="noopener noreferrer" title="Go to repository">
    <div class="github-icon">
      <i class="fab fa-github"></i>
    </div>
  </a>

  <main>
    <a href="beginner/Calculator/"><i class="fas fa-calculator"></i><span>Calculator</span></a>

    <a href="beginner/Counter/"><i class="fa-solid fa-abacus"></i><span>Counter</span></a>

    <a href="beginner/DiceRoller/"><i class="fa-solid fa-dice-six"></i><span>Dice Roller</span></a>

    <a href="beginner/PasswordGenerator/"><i class="fas fa-key"></i><span>Password
        Generator</span></a>

    <a href="beginner/RandomNumber/"><i class="fa-regular fa-arrow-up-1-9"></i><span>Random
        Number</span>
    </a>

    <a href="beginner/Rock-Paper-Scissors/"><i class="fas fa-gamepad"></i><span>Rock Paper Scissors</span></a>

    <a href="beginner/StopWatch/"><i class="fas fa-stopwatch"></i><span>StopWatch</span></a>

    <a href="beginner/TemperatureConverter/"><i class="fas fa-temperature-high"></i><span>Temperature
        Converter</span></a>

    <!-- *Intermidate -->
    <a href="intermediate/Clock/"><i class="fas fa-clock"></i><span>Clock</span></a>

    <a href="intermediate/Directional_Stopwatch/"><i class="fas fa-arrows-up-down-left-right"></i><span>Directional
        Stopwatch</span></a>

    <a href="intermediate/Number_Base_converter/"><i class="fas fa-shuffle"></i><span>Number Base
        Converter</span></a>

    <a href="intermediate/Number_Guess_Game/"><i class="fa-light fa-face-thinking"></i><span>Number Guess
        game</span>

      <a href="intermediate/Random_Fact/"><i class="fa-solid fa-lightbulb-exclamation-on"></i><span>Random
          Fact</span></a>

      <a href="intermediate/Toast_Notification/"><i class="fas fa-bell"></i><span>Toast Notification</span></a>

      <a href="intermediate/Weather_App/"><i class="fas fa-cloud-sun"></i><span>Weather App</span></a>

      <!-- *Advanced -->
      <a href="advanced/QR_Code/"><i class="fas fa-qrcode"></i><span>QR code</span></a>

      <a href="advanced/Dictionary/" target="_blank"><i class="fas fa-book"></i><span>Dictionary</span></a>

      <a href="advanced/Word_Guess_Game/"><i class="fa-light fa-face-thinking"></i><span>Guess Word game</span></a>
    </a>
  </main>
</body>

</html>