javascript-ninja/index.html at development · ashishaugust22/javascript-ninja · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ashish Sharma - JavaScript Ninja</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Deep dive JS Core Concepts using Toy Projects</h1>
    <div class="concepts-container">
      <a href="./0. Toy Apps/1. timer/index.html">
        <h5>Timer</h5>
        <div class="tag">DOM Manipulation</div>
        <div class="tag">IIFE</div>
        <div class="tag">Web APIs</div>
      </a>
      <a href="./0. Toy Apps/2. todo/index.html">
        <h5>TODO</h5>
        <div class="tag">Web Storage</div>
        <div class="tag">Array</div>
      </a>
      <a href="./0. Toy Apps/3. weather app/index.html">
        <h5>Weather App</h5>
        <div class="tag">Network Call</div>
        <div class="tag">Fetch</div>
        <div class="tag">Web Storage</div>
        <div class="tag">Typeahead</div>
      </a>
      <a href="./0. Toy Apps/8. calculator with tests/index.html">
        <h5>Calculator</h5>
        <div class="tag">Grid Layout</div>
        <div class="tag">Tests</div>
        <div class="tag">Beautiful UI</div>
        <div class="tag">Code Structure</div>
      </a>
      <a href="./0. Toy Apps/5. requestAnimationFrame/index.html">
        <h5>Request Animation Frame API</h5>
        <div class="tag">Web APIs</div>
        <div class="tag">Request Animation Frame</div>
        <div class="tag">CSS Transform</div>
      </a>
      <a href="./0. Toy Apps/6. digital clock/index.html">
        <h5>Digital Clock</h5>
        <div class="tag">Date Object</div>
        <div class="tag">String Parsing</div>
      </a>
      <a href="./0. Toy Apps/7. observer pattern/index.html">
        <h5>Observer Pattern</h5>
        <div class="tag">Observer Pattern in PureJS</div>
        <div class="tag">Reactive Programming</div>
        <div class="tag">Replay Subject Implementaion</div>
        <div class="tag">Debouncing</div>
      </a>
      <a href="./0. Toy Apps/9. fetch playground/index.html">
        <h5>Fetch Playground (Console)</h5>
        <div class="tag">Promise</div>
        <div class="tag">Inprocess...</div>
      </a>
      <a href="./0. Toy Apps/10. snake game/index.html">
        <h5>Snake Game</h5>
        <div class="tag">Must Play</div>
        <div class="tag">Architecture</div>
        <div class="tag">Code Structuring</div>
        <div class="tag">Learn With Fun</div>
      </a>
      <a href="./0. Toy Apps/11. drag and drop list/index.html">
        <h5>Drag n Drop</h5>
        <div class="tag">Native Drag n Drop</div>
      </a>
      <a href="./0. Toy Apps/12. css transform/index.html">
        <h5>CSS Transform</h5>
        <div class="tag">CSS Transform</div>
      </a>
      <a href="./0. Toy Apps/13. analog clock/index.html">
        <h5>Analog Clock</h5>
        <div class="tag">CSS Transform</div>
        <div class="tag">CSS Animation</div>
        <div class="tag">I'm lovin' it</div>
      </a>
      <a href="./0. Toy Apps/14. multiple borders/index.html">
        <h5>Multiple Borders</h5>
        <div class="tag">CSS Box Shadow</div>
      </a>
      <a href="https://www.secretfrontend.com/">
        <h5>Frontend Blogs</h5>
        <div class="tag">Next.js</div>
        <div class="tag">React</div>
        <div class="tag">Static Site Rendering</div>
        <div class="tag">Hygraph CMS</div>
      </a>
      <a href="https://ng-signals.secretfrontend.com/">
        <h5>Signals in Angular</h5>
        <div class="tag">Angular</div>
        <div class="tag">Signals</div>
      </a>
    </div>
  </body>
</html>