-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (230 loc) · 14.8 KB
/
index.html
File metadata and controls
236 lines (230 loc) · 14.8 KB
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8">
<meta name="author" content="Michael Lam">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Michael Lam: ICS4U Portfolio</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="header">
<a href="index.html"><h2>Michael Lam</h2>
</a>
<div id="navLinks" class="d-none d-lg-block d-md-none">
<table id="navBarTable">
<tbody>
<th><a href="javascript: scrollTo('#module-title')">Modules</a></th>
<th><a href="khanacademy.html">Khan Academy</a></th>
<th><a href="freecodecamp.html">freeCodeCamp</a></th>
<th><a href="https://github.com/michael-lam8" target="_blank">GitHub</a></th>
</tbody>
</table>
</div>
<div class="d-none d-block d-lg-none">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="header-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="">Menu</button>
<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="header-dropdown">
<a href="javascript: scroll_to('#module-title')" class="dropdown-item">Modules</a>
<div class="dropdown-divider"></div>
<a href="khanacademy.html" class="dropdown-item">Khan Academy</a>
<a href="freecodecamp.html" class="dropdown-item">freeCodeCamp</a>
<div class="dropdown-divider"></div>
<a href="https://github.com/michael-lam8" class="dropdown-item" target="_blank">GitHub</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col p-0">
<div class="hero">
<img src="images/hero/index.jpg" class="hero-img d-block w-100">
<h1 id="hero-text">ICS4U Portfolio</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div id="module-title" class="row">
<div class="col pt-3 pb-2">
<h1 class="text-center">Top 10 Modules</h1>
</div>
</div>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://i.imgur.com/0H9sI0e.png" class="module-img" alt="Intro to HTML/CSS: Making Webpages">
</div>
<div class="col-sm-7 py-4">
<h3>Intro to HTML/CSS: Making Webpages</h3>
<h5>Khan Academy</h5>
<p>This course, though completed last year for the ICS3U course, has taught me the basics of creating and stylizing websites. The skills that I have learned were applied with sites such as the school's <a href="https://vinaymeldrum.github.io/Environmental-Council/"
target="_blank">Environmental Council page</a>, this
portfolio, and more. Although I have the fundamentals of web development down, there is always more to learn in regards to the web, especially with development using front end libraries.</p>
<a href="khanacademy.html#intro-to-html-css" aria-label="View Intro to HTML/CSS: Making Webpages projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://media.giphy.com/media/cmm1PZlcJPfr3ZZXSn/giphy.gif" class="module-img" alt="Intro to JS: Drawing and Animation">
</div>
<div class="col-sm-7 py-4">
<h3>Intro to JS: Drawing and Animation</h3>
<h5>Khan Academy</h5>
<p>JavaScript is a widely used programming language, especially on the web. This course, though completed last year for the ICS3U course, has taught me the fundamentals of the language. JavaScript has proved to be useful in terms of making
webpages
interactive and creating visual programs using libraries such as p5.js. Most notably, I have used JavaScript to create a <a href="https://github.com/michaeljylam/Skye-the-Doge" target="_blank">Discord bot</a> that is in daily use. With the
basics down, more advanced techniques, such as ES6 and regular
expressions, will be learned and incorporated in future programs and websites.</p>
<a href="khanacademy.html#intro-to-js" aria-label="View Intro to JS: Drawing and Animation projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://i.imgur.com/Ne0mnhL.png" class="module-img" alt="Intro to SQL: Querying and Managing Data">
</div>
<div class="col-sm-7 py-4">
<h3>Intro to SQL: Querying and Managing Data</h3>
<h5>Khan Academy</h5>
<p>Structured Query Language, often abbreviated to SQL, is a standard language for storing, manipulating, and accessing data in databases. This course has taught me the fundamentals of the language and data manipulation. SQL can be used in
the future for data analysis, or backend web development, such as for storing user information.</p>
<a href="khanacademy.html#intro-to-sql" aria-label="View Intro to SQL: Querying and Managing Data projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://media.giphy.com/media/YrkSgrWC4qrgV3rEaq/giphy.gif" class="module-img" alt="Advanced JS: Games and Visualizations">
</div>
<div class="col-sm-7 py-4">
<h3>Advanced JS: Games and Visualizations</h3>
<h5>Khan Academy</h5>
<p>This course, also completed last year for the ICS3U course, further expands on my knowledge of JavaScript, and introduces new concepts pertaining especially to the creation of games and visuals. Several techniques learned from this course
have been applied in other programs, such as with the <a href="https://github.com/Vinaymeldrum/2D-Raycasting" target="_blank">2D Raycasting Coding Challenge</a>. Though it expands on JavaScript, this course barely scratches the surface on
game development. Further technicalities, such as 3D modeling and the use of game engines, can be learned to enhance knowledge on game development.</p>
<a href="khanacademy.html#games-and-visualizations" aria-label="View Advanced JS: Games and Visualizations projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://media.giphy.com/media/gLcEQSHsg3tL5HTeLG/giphy.gif" class="module-img" alt="Advanced JS: Natural Simulations">
</div>
<div class="col-sm-7 py-4">
<h3>Advanced JS: Natural Simulations</h3>
<h5>Khan Academy</h5>
<p>As with Advanced JS: Games and Visualizations, Natural Simulations expands on pre-existing knowledge of JavaScript. This course focuses on simulating the intricacies of nature with code, such as randomness, forces, and oscillations.
The most significant impact from this course was the implementation of Perlin noise in our <a href="https://github.com/Vinaymeldrum/2D-Raycasting" target="_blank">2D Raycasting Coding Challenge</a>. Additional natural occurrences can be
learned to be simulated with Daniel Shiffman’s book, “The Nature of Code,” from which the course was derived from, or by incorporating other mathematical concepts.</p>
<a href="khanacademy.html#natural-simulations" aria-label="View Advanced JS: Natural Simulations projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://media.giphy.com/media/XbPGDSPiWy2deeSHou/giphy.gif" class="module-img" alt="HTML/JS: Making Webpages Interactive">
</div>
<div class="col-sm-7 py-4">
<h3>HTML/JS: Making Webpages Interactive</h3>
<h5>Khan Academy</h5>
<p>Combining knowledge of HTML, CSS and JavaScript, this course introduces interactivity within websites with the Document Object Model (DOM). This interface has been used for adapting to different screen sizes in the school’s <a href=https://vinaymeldrum.github.io/Environmental-Council/
target="_blank">Environmental Council page</a>, and for animations in this portfolio. There are many more DOM methods and properties to be learned, especially as the course was published at the dawn of HTML5’s introduction, thus omitting
many current functions. Although libraries such as jQuery facilitate the manipulation of HTML elements, simpler websites or those aiming for low bandwidth and high performance may find using the DOM more appropriate.</p>
<p>Note that there are no projects to be completed in this course.</p>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://media.giphy.com/media/3FeBaZ85qm2l9hj0UX/giphy.gif" class="module-img" alt="HTML/JS: Making Webpages Interactive with jQuery">
</div>
<div class="col-sm-7 py-4">
<h3>HTML/JS: Making Webpages Interactive with jQuery</h3>
<h5>Khan Academy</h5>
<p>As with the DOM, jQuery integrates knowledge of HTML, CSS and JavaScript to simplify interactivity within websites. Though I haven’t used jQuery in any assignments or projects in the past (excluding Bootstrap's usage for several components), it is nice to know of a library that facilitates
manipulation of HTML elements, especially for larger webpages that might incorporate animations. With regards to the future, there are many more functions to be learned, as this course teaches just the basics of the library. In addition,
there are numerous plugins that can be used in conjunction with jQuery.</p>
<a href="khanacademy.html#jquery" aria-label="View HTML/JS: Making Webpages Interactive with jQuery projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://i.imgur.com/l9gwyxk.png" class="module-img" alt="Algorithms">
</div>
<div class="col-sm-7 py-4">
<h3>Algorithms</h3>
<h5>Khan Academy</h5>
<p>The Algorithms course on Khan Academy introduces algorithms and concepts that are taught in post-secondary computer science programs, such as searching, sorting, recursion, and graph theory. Learning how to implement the different
algorithms, as well as learning about the different concepts like graph theory and asymptotic notation, has made the most significant impact to me as a student. With regards to learning in the future, there are infinite amounts of
algorithms to learn and apply into different programs, especially as we continue trying to increase efficiency.</p>
<a href="khanacademy.html#algorithms" aria-label="View Algorithms projects">
<h5>View projects ></h5>
</a>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://i.imgur.com/cjdViTe.png" class="module-img" alt="AP Computer Science Principles">
</div>
<div class="col-sm-7 py-4">
<h3>AP®︎ Computer Science Principles</h3>
<h5>Khan Academy</h5>
<p>The AP®︎ Computer Science Principles course teaches the fundamentals of computer science, including computers itself, the internet, programming and algorithms, and data analysis. Though I already knew of most of the concepts beforehand, I
found the course to be a good review and insight into future learning. These concepts and more can be learned in further detail to expand not only general knowledge, but also knowledge on technicalities for other professions. For example,
learning about lossy and lossless compression not only benefits web developers for reducing website bandwidth, but also for, as an example, photographers who may want to preserve all image details for their projects.</p>
<p>Note that there are no projects to be completed in this course.</p>
</div>
</div>
<br>
<div class="row module-item shadow">
<div class="col-sm-5 p-0">
<img src="https://i.imgur.com/3hMHB5L.png" class="module-img" alt="Basic JavaScript, ES6, and Object-Oriented Programming">
</div>
<div class="col-sm-7 py-4">
<h3>Basic JavaScript, ES6, and Object-Oriented Programming</h3>
<h5>freeCodeCamp</h5>
<p>Similarly to Khan Academy’s Intro to JS course, freeCodeCamp teaches the fundamentals of JavaScript, though in a more technical and textual way. It also offers advanced techniques that are commonly used, but are not taught in Khan
Academy, such as ES6, regular expressions, and debugging tools. Learning ES6 made the most significant impact to me as a student as I have previously used it with my <a href="https://github.com/michaeljylam/Skye-the-Doge" target="_blank">Discord
bot</a>, though without well understanding the syntax. The projects and other certifications that incorporate JavaScript can be used to apply the developed skills and enhance future learning.</p>
<a href="freecodecamp.html" aria-label="View Palindrom Checker project">
<h5>View Palindrome Checker project ></h5>
</a>
</div>
</div>
<br>
</div>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>