-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
516 lines (499 loc) · 21.3 KB
/
index.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
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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/e5f441b479.js"
crossorigin="anonymous"
></script>
<title>Learning Cycles</title>
</head>
<body>
<!-- dark mode button -->
<button id="darktoggle" class="roundbtn">
<img
class="toggleimg sunimg"
src="./assets/sun.png"
alt="sun icon for dark mode toggle"
/>
<img
class="toggleimg moonimg"
src="./assets/moon.png"
alt="moon icon for toggle"
/>
</button>
<!-- to top button -->
<button id="totop" class="roundbtn" title="Go to top">
<i class="fa-solid fa-chevron-up fa-2xl"></i>
</button>
<header>
<h1>Learning Cycles</h1>
<nav>
<ul>
<li class="navbutton intronavbtn"><a href="#intro">Intro</a></li>
<li class="navbutton" id="structuretab">
<a href="#structure">1. Structure</a>
</li>
<li class="navbutton" id="exploretab">
<a href="#explore">2. Explore</a>
</li>
<li class="navbutton" id="createtab">
<a href="#create">3. Create</a>
</li>
<li class="navbutton resourcesnavbtn" id="resourcetab">
<a href="#resources">Resources</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="intro-section" id="intro">
<h4>1. Intro</h4>
<br />
<p class="ptext">
Learning isn't a skill often explicitly taught in school. So, people
tend to think, "I'm just not smart enough," or "I can't remember
things as well as that person - they must be gifted." And hey, I'm not
going to lie, there's some truth to that. Factors such as your
educational background, upbringing, level of confidence, and even a
natural inclination towards certain topics can play significant roles
in your ability to learn. But I truly believe there's a way for
everyone to boost their productivity when learning something new. It's
all about understanding your personal learning cycles, especially when
you're immersing yourself in expansive fields of knowledge, such as
language acquisition or programming.
</p>
</section>
<div class="outline-text">
<div class="after-intro-text">
<p class="ptext">
Most people can relate to the feeling of being hyper-fixated on a
topic, diving into it, learning a bunch, but then getting burnt out.
That's when those Twitter gurus tell you it's about consistency and
discipline. But wouldn't it be nice if we could stay motivated
almost
<strong>every day</strong>? 🧐
</p>
</div>
</div>
<section class="discovery-section">
<h4>2. Discovery</h4>
<br />
<p class="ptext">
The theory of having a learning cycle definitely exists (if you're
interested in that you can simply google "learning cycle"), but I only
figured out mine after I began learning Mandarin and coding. I
routinely get people telling me "you must be a fast learner!" or
asking questions like "how do you plan your studies?". It got me
thinking - what am I doing differently? So I decided to share my
process.
<br />
<br />
*disclaimer: I can't guarentee this will work for everyone, but it's
what works best for me 😄
</p>
</section>
<div class="outline-text">
<div class="after-intro-text">
<p class="ptext">
With no previous experience learning Mandarin, and after studying
for only about a year, I achieved a relatively high level of fluency
compared to my peers. But why? what am I doing differently that
other people are not? same with coding, although I'm not sure how my
speed compares to others, I still would like to share my process.
Even if it helps just one other person I would be happy. 😄
</p>
</div>
</div>
<section class="process-section">
<h4>3. Process</h4>
<br />
<p class="ptext">
So here's the gist: I go through three main cycles when studying.
Being aware of which cycle I'm in at any given moment has helped me
stay productive without burning out. But keep in mind, for this
process to work best, you have to actually enjoy what you're learning
about. If it works for subjects you don't like as much, that's great,
but no guarantees!
</p>
</section>
<div class="animation">
<img
id="darkgif"
class="cyclegif"
src="./assets/chart.gif"
alt="chart showing the cycles"
/>
<img
id="lightgif"
class="cyclegif"
src="./assets/light.gif"
alt="chart showing the cycles"
/>
</div>
<!-- CYCLE 1 START -->
<div class="sectiontopdiv" id="structure">
<div class="h2div">
<h2>CYCLE 1</h2>
</div>
<div class="description">
<h3>structure</h3>
<p>
This cycle is all about learning through a clear-cut, structured
path.
</p>
</div>
</div>
<section class="cycle1">
<p class="ptext">
If you're a developer, think of the times you've spent learning on
platforms like freeCodeCamp, Scrimba, or Codecademy. In regard to
learning a language, this could be attending a language course, or
following some kind of predeterimined learning path, like in a
textbook. At this point, you will start grasping the fundamental
concepts crucial to the subject you're learning.
</p>
</section>
<div class="examplediv">
<div class="exampledivcontent exampledivcontenthtml dropheading">
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
<h4>Learning HTML/CSS example</h4>
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
</div>
<div class="drop dropdivhtml">
<p class="ptext">
👩🏻💻 When I was doing the FCC responsive web design certification I
really fell in love with coding (at least I thought that's what I
was doing with HTML and CSS 😆) During this time, I was doing the
specific tasks and assigments they gave me.
<br />
<br />
This structure acted as a sort of roadmap. I never felt lost or
overwhelmed because I knew exactly where I was and what I was
supposed to do next. The concrete tasks provided me with clear
goals, and achieving them gave me a sense of accomplishment and
motivation.
<br />
<br />
This is essentially what the 'Structure' phase in the learning cycle
is about. It's a guided, step-by-step journey where you're
progressively introduced to core principles. It's a controlled
environment where you learn, practice, make mistakes, and improve.
But just like anything, after a while, things can start to feel a
bit repetitive and you may find youself getting bored or burnt out.
</p>
</div>
</div>
<section class="cycle1 conclusion">
<p class="ptext">
This phase is pretty straightforward, and when you're new to the
subject, you'll probably hang out here for a good while. Depending on
how many hours you spend a day learning you could be here for a few
days up to a few weeks.
<br />
<br />
How do you know when to move on to the next cycle? Well, when you are
feeling bored and totally demotivated. Feeling like your productivity
has really decreased.
<br />
<br />
Then you move onto CYCLE 2
</p>
</section>
<div class="sectiontopdiv" id="explore">
<div class="h2div">
<h2>CYCLE 2</h2>
</div>
<div class="description">
<h3>explore</h3>
<p>
The main purpose of this cycle is to inspire a new sense of
motivation within yourself.
</p>
</div>
</div>
<section class="cycle2">
<p class="ptext">
Imagine you have been in cycle 1 studying JavaScript for a week and
feel totally tired. Trying to reignite your motivation and energy from
the very thing that has burned you out can seem like an uphill battle.
This is where understanding the concept of the "puppy mind" can help.
<br /><br />
</p>
<p class="ptext">
The "puppy mind" describes the tendency for the mind to get easily
distracted and jump from one thing to another, much like a playful
puppy. This can lead to difficulty in focusing on one task for an
extended period of time.
<br /><br />
Most people agree that we need to train or discipline the "puppy
mind". While I agree, there are situations (like in cycle 2) where it
might be beneficial to let your "puppy mind" run rampant.
</p>
</section>
<div class="imgtxtdiv">
<div class="outline-text2">
<div class="after-text">
<p class="ptext">
The point of this cycle is to get a fresh perspective on learning,
maximize your input sources to stimulate creativity.
</p>
</div>
</div>
<figure>
<img
class="creativevisual"
src="https://pbs.twimg.com/media/Fxt5cTJWAAUEIKl?format=jpg&name=large"
alt="creativity visual"
/>
<figcaption>
<a
id="george"
href="https://twitter.com/george__mack/status/1665059465144463362"
target="_blank"
>@george__mack</a
>'s awesome visual that explains how this process works
</figcaption>
</figure>
</div>
<div class="examplediv">
<div class="exampledivcontent exampledivcontentjs dropheading">
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
<h4>Learning JavaScript example</h4>
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
</div>
<div class="drop dropdivjs">
<p class="ptext">
👩🏻💻 When I first started learning JavaScript I was using
FreeCodeCamp. At first, it was exciting. I was grasping new concepts
and I was on a roll for a while. But soon after, things got pretty
confusing for me and my motivation was clearly disappearing. This
signaled the end of CYCLE 1.
<br /><br />
👩🏻💻 Embracing my 'puppy mind', I decided it was time to unleash my
curiosity. I started researcing a bunch of free resources which led
me to jsdares, W3Schools, and Scrimba, I allowed myself to explore,
not fixating on one source or one thing but checking out everything
that caught my interest (related to coding). I had fun with jsdares,
completed some exercises on W3schools, and eventually discovered
Scrimba, which was a great find! And that marked the end of CYCLE 2.
<br /><br />
👩🏻💻 And then, I found myself back in CYCLE 1. (In the beginning you
might not get to CYCLE 3 right away.) With Scrimba, I found a
structured learning path that was a perfect fit. I managed to
complete most of the Introduction to JS course. But, motivation
started to dip again when the course switched teachers at the end of
the course. This signaled the end of CYCLE 1.
<br /><br />
👩🏻💻 CYCLE 2 started again, but it really only lasted a few hours, and
was the moment in which I really started feeling myself going
through these 3 cycles. During this phase I felt really inspired. I
realized how scattered and fragmented the resources for learning
coding were. Wouldn't it be great if all of the best resources were
all in one place, accessible to everyone? So I decided to make a
project! That signaled the end of CYCLE 2 and the start of CYCLE 3.
</p>
</div>
</div>
<section class="cycle2conclusion">
<p class="ptext">
The explore cycle would generally only last for a few hours or maximum
1 to 2 days depending on your learning schedule, and how burnt out you
let yourself get from CYCLE 1.
<br />
<br />
All of these new sources of input can get you inspired and ready for
CYCLE 3. Ideally CYCLE 3 should start after CYCLE 2 has resulted in a
good idea, otherwise feel free to move back to CYCLE 1. But trust me,
if you've done CYCLE 2 right, you'll be ready for CYCLE 3 every single
time.
</p>
</section>
<!-- CREATE SECTION START -->
<div id="create" class="sectiontopdiv">
<div class="h2div">
<h2>CYCLE 3</h2>
</div>
<div class="description">
<h3>create</h3>
<p>This is where your ideas come to life through projects.</p>
</div>
</div>
<section class="cycle3">
<p class="ptext">
After the exploration phase, hopefully, you have come up with an idea
for your CYCLE 3 project.
<br />
<br />
The idea for a project could surface from realizing a problem that
needs solving or drawing inspiration from something that piqued your
interest. I have been inspired to make a project from all sorts of
places, like a challenge on front-end mentor, realizing my mom needed
a new website, or one of the assigned projects on freeCodeCamp. It
doesn't matter if you think you're a creative person or not, there are
plenty of resources to get inspired and make a project.
<br />
<br />
But if you still haven't figured out an idea for a project, below is a
great chatGPT prompt!
</p>
</section>
<div class="examplediv">
<div class="exampledivcontent exampledivcontentgpt dropheading">
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
<h4>chatGPT project generator prompt</h4>
<img class="downarrow" src="./assets/downarrow.svg" alt="arrow svg" />
</div>
<div class="drop dropdivgpt">
<div id="dropdownoutline" class="outline-text jsoutline">
<div id="dropdownintro" class="after-intro-text javascripttext">
<p class="ptext">
“Hey, I am learning Javascript, I am just a beginner, recently I
have learned about objects, for loops, while loops, I can mostly
just solve 8kyu problems on codewars.
<br />//say your level
<br />
<br />
I am interested in cats, League of Legends, dragons, and Harry
Potter
<br />// say your interests
<br />
<br />
can you give me (insert number) project ideas to practice my
skills in JS?“
<br />
// ask the question with number of ideas
</p>
</div>
</div>
<div class="spiraldiv">
<img
id="purplespiral"
class="spiralsvg"
src="./assets/spiral.svg"
alt="spiral svg"
/>
</div>
<p class="ptext">
Response:
<br />
<br />
That's great that you're learning JavaScript and making progress in
problem solving. As for project ideas, here are a few that are
related to your interests and can help you practice your JS skills:
<br />
<br />
</p>
<ol>
<li>
Cat Clicker: Create a webpage with pictures of different cats.
When a user clicks on a cat's picture, increment a counter for
that cat. Display the number of clicks for each cat. This will
help you practice handling events and manipulating the DOM.
</li>
<li>
League of Legends Character Database: Create an object for each
character in the game with properties like 'name', 'role',
'abilities', etc. Then, create functions to sort and filter
characters based on these properties. This can help you practice
using objects and arrays.
</li>
<li>
Dragon Game: This could be a simple text-based game where the
player has a dragon that they can train and care for. Actions the
player takes could affect the dragon's stats (like 'strength' or
'happiness'), and those stats could affect the outcomes of events.
This project would be a good exercise in using objects and control
flow.
</li>
<li>
Harry Potter Quiz: This could be a quiz with multiple choice
questions about the Harry Potter series. For each question, the
player must choose the correct answer from four options. At the
end of the quiz, show the player their score. This will give you
practice with arrays, DOM manipulation, and event handling.
</li>
<li>
Sorting Hat: Based on a series of preferences or personality test,
sort a user into a Hogwarts House. You could ask the user a series
of questions and then use their answers to determine their House.
This will help you practice with forms, objects, and control flow.
</li>
<li>
A simple League of Legends API client: Using Riot Games API
(official League of Legends API), you can fetch data about
champions, items, matches and more. Create a simple user interface
to display the data. This can help you learn about how to work
with APIs, asynchronous programming, and data manipulation.
</li>
</ol>
<br />
<p class="ptext">
Remember, the goal of these projects is to learn and practice, so
don't worry about making them perfect. Start small, and as you get
more comfortable with JavaScript, you can add more features to your
projects. Good luck!
</p>
</div>
</div>
<section class="cycle3conclusion">
<p class="ptext">
Very lovely response from chatGPT as you can see. This way, even if
you haven't figured out a project on your own and you want to get into
CYCLE 3 you can!
<br />
<br />
Once you are finished with your project you can move back to CYCLE 1
and learn more fundamentals and new concepts.
<br />
<br />
Don't be afraid to switch learning resources if something is not
clicking with you, and make things that you are passionate about. If I
am doing something boring I can barely concentrate for 30 minutes, but
if I'm passionate, I can go for hours on end!
<br /><br />
Happy learning!
</p>
</section>
</main>
<!-- RESOURCE SECTION START -->
<div id="resources" class="sectiontopdiv">
<div class="h2div">
<h2 id="resourceh2">RESOURCES</h2>
</div>
<div class="description">
<p class="resourcep">
If you're stuck and need to find resources for any cycle, check out my
other webpage that has a bunch of
<a
class="resourcea"
href="https://github.com/elliezub/Free-Coding-Resources"
target="_blank"
>free resources</a
>!
</p>
</div>
</div>
<div class="iframediv">
<iframe src="https://elliezub.github.io/Free-Coding-Resources/"></iframe>
</div>
<footer>
<div id="icon-div">
<a href="https://github.com/elliezub" target="_blank">
<i id="github" class="fa-brands fa-github fa-xl"></i>
</a>
<a href="https://www.linkedin.com/in/elliezubrowski" target="_blank">
<i class="fa-brands fa-linkedin fa-xl"></i>
</a>
<a href="https://twitter.com/elliezub" target="_blank">
<i class="fa-brands fa-twitter fa-xl"></i>
</a>
</div>
<p class="ptext">Designed & Built by Ellie Zubrowski</p>
</footer>
<script src="main.js"></script>
</body>
</html>