-
-
Notifications
You must be signed in to change notification settings - Fork 54
/
lessons.html
174 lines (167 loc) · 8.42 KB
/
lessons.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Vyper.fun Lessons | Learn Vyper by building a Pokémon Game</title>
<link
rel="apple-tou ch-icon"
sizes="180x180"
href="./media/vyper-logo-transparent.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./media/vyper-logo-transparent.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./media/vyper-logo-transparent.png"
/>
<link rel="manifest" href="./media/favicons/site.webmanifest" />
<meta property="og:title" content="Vyper.fun" />
<meta
property="og:description"
content="Learn Vyper by building a Pokemon Game. Study structure of a contract, types, variables and constants, statements, control structures, scoping and declarations, built-in functions, interfaces, event logging, natspec metadata"
/>
<meta property="og:image" content="https://vyper.fun/media/vyper-fun.png" />
<meta property="og:url" content="https://vyper.fun" />
<meta name="twitter:title" content="Vyper.fun" />
<meta
name="twitter:description"
content="Learn Vyper by building a Pokemon Game. Study structure of a contract, types, variables and constants, statements, control structures, scoping and declarations, built-in functions, interfaces, event logging, natspec metadata"
/>
<meta
name="twitter:image"
content="https://vyper.fun/media/vyper-fun.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-131093663-3"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-131093663-3');
</script>
<!-- CSS Dependencies -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./resource/css/shards.min.css">
</head>
<body>
<center>
<br />
<h1>Vyper.fun Lessons</h1>
<br />
<div class="container">
<div class="row">
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://i.pinimg.com/originals/22/3a/7f/223a7fb14d9eac792fc29446bb2cf30d.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 0: Solidity vs Vyper <br/>(coming soon)</h4>
<p class="card-text">Learn the pros and cons of using Vyper and Solidity.</p>
<a href="#" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://cdn.dribbble.com/users/2712/screenshots/2853053/pikachu-_1.0_.png?compress=1&resize=400x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 1: Your first Pokémon</h4>
<p class="card-text">In this chapter, you will learn the basics of Vyper to create your first pokemon.</p>
<a href="https://vyper.fun/#/1/introduction" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://cdn.dribbble.com/users/1605843/screenshots/3351502/hello-01.png?compress=1&resize=400x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 2: Catch 'em All</h4>
<p class="card-text">In this chapter, we will learn the more advanced concepts of Vyper to create pokemon trainers.</p>
<a href="https://vyper.fun/#/2/introduction" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://cdn.dribbble.com/users/594316/screenshots/14114966/gaming_icon_set-01_4x.jpg?compress=1&resize=400x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 3: Trade your Pokémon<br> (coming soon)</h4>
<p class="card-text">Learn how to trade your Pokémons using ERC 721 token standard.</p>
<a href="http://localhost:3000/#/./WELCOME" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://cdn.dribbble.com/users/112047/screenshots/6464854/brock-drib_4x.jpg?compress=1&resize=400x300" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 4: Become a Pokémon master<br> (coming soon)</h4>
<p class="card-text">Battle with Pokémons and compete with other Pokémon trainers.</p>
<a href="http://localhost:3000/#/./WELCOME" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://i.pinimg.com/originals/57/ad/e2/57ade25c3f3d160ffa623dfcd097c482.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 5: Advanced Vyper Concepts<br> (coming soon)</h4>
<p class="card-text">Learn the immutability of contracts, loops, selfdestruct, gas optimization.</p>
<a href="http://localhost:3000/#/./WELCOME" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://i.pinimg.com/564x/8b/43/40/8b4340a5951de27e3dff6bea242f1b0e.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 6: Deploy your contracts<br> (coming soon)</h4>
<p class="card-text">Learn how to use eth-brownie to compile, deploy, and test your contracts.</p>
<a href="http://localhost:3000/#/./WELCOME" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
<div class=".col-12 col-sm-4 .col-md-4 .col-lg-4 .col-xl-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://i.pinimg.com/originals/dc/63/78/dc6378bffe909ef130017bd8969b2c1b.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Lesson 7: Build a Pokémon Dapp<br> (coming soon)</h4>
<p class="card-text">Learn how to integrate your contracts to a React app to create a complete dApp.</p>
<a href="http://localhost:3000/#/./WELCOME" class="btn btn-primary">Get Started →</a>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<h6>Built by <a href="https://twitter.com/vasa_develop" target="_blank">vasa</a></h6>
<br />
</center>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./resource/js/shards.min.js"></script>
</body>
</html