forked from zero-to-mastery/resources
-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexOLD.html
662 lines (643 loc) · 53.2 KB
/
indexOLD.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
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
<!-- ***********************************
This file is for the old single page HTML website. To add new resources go to the corresponding markdown file (Files with the .md extension) and add your link in markdown.
****************************************-->
<!doctype html>
<html lang="en-us">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Resources for Web Development</title>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">`
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="resources/fav/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- local CSS -->
<link rel="stylesheet" href="main.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-- Font Awesome -->
</head>
<body>
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg">
<a href="#" class="navbar-brand px-2 py-0">Resources</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="#general" class="nav-link m-2 text-capitalize">General</a></li>
<li class="nav-item"><a href="#web-design" class="nav-link m-2 text-capitalize">Web Design</a></li>
<li class="nav-item"><a href="#javascript-section" class="nav-link m-2 text-capitalize">JavaScript</a></li>
<li class="nav-item"><a href="#articles" class="nav-link m-2 text-capitalize">Articles</a></li>
<li class="nav-item"><a href="#tools" class="nav-link m-2 text-capitalize">Tools</a></li>
<li class="nav-item"><a href="#git-github" class="nav-link m-2 text-capitalize">Git & GitHub</a></li>
<li class="nav-item"><a href="#interviewing" class="nav-link m-2 text-capitalize">Interviewing</a></li>
<li class="nav-item"><a href="#youtube" class="nav-link m-2 text-capitalize">YouTube</a></li>
</ul>
</div>
</nav>
<!-- Header Section -->
<header id="header">
<div class="container">
<div class="row">
<div class="col text-center py-4 header-top container">
<h1>Resources for Web Development</h1>
<h4>A list of resources to help new web developers find their way</h4>
<img src="img/eezy_18.svg" alt="computer">
</div>
</div>
</div>
</header>
<!-- General Resources Section -->
<section id="general">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">General Resources</h3>
</div>
</div>
<div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Learning How To Learn</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://calnewport.com/books/deep-work/" target="_blank"><strong>Deep
Work by Cal Newport</strong></a>: Deep work is an incredibly rare skill in today due to mostly distracted
economy, so valuable that it allows one to learn or master difficult things quickly and to be able to
reproduce at an elite level both in terms of speed and quality, and it is meaningful as one cultivates flow
states while producing something of value. A <a class="weblink" href="https://www.amazon.com/Deep-Work-Focused-Success-Distracted-ebook/dp/B00X47ZVXM/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr="
target="_blank"><strong>book well-worth reading</strong></a> if one wants to learn how to master
difficult things quickly, enter flow states ("getting in the zone") more frequently, and live a life that
is meaningful and satisfying. </p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/watch?v=lKo73Ocg7Ps" target="_blank"><strong>Active
Recall (Abridged)</strong></a>: A brief 2 minute where Cal Newport describes the highly effective
strategy to learn difficult things quickly in the shortest amount of time. </p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/watch?v=ppvVsSQa9gc" target="_blank"><strong>Active
Recall (Verbose)</strong></a>: A 40 minute talk by Cal Newport featuring a challenging, yet highly
effective strategy to learn difficult things quickly in the shortest amount of time. </p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.amazon.com/Barking-Wrong-Tree-Surprising-Everything/dp/0062416049"
target="_blank"><strong>Barking Up The Wrong Tree: The Surprising Science Behind Why Everything You Know
About Success Is (Mostly) Wrong</strong></a>: Wired writer and blogger, <a class="weblink" href="https://www.bakadesuyo.com/about/"
target="_blank"><strong>Eric Barker</strong></a>, captivates the reader with his insightful, fun and
witty stories on how pirates and gang members can teach you about kindness, trust, and fairness <a
class="weblink" href="https://www.youtube.com/watch?v=q4GdJVvdxss" target="_blank"><strong>Spiderman</strong></a>
<a class="weblink" href="https://www.youtube.com/watch?v=dRmGPLyfqEs#t=49s" target="_blank"><strong>work/life
balance</strong></a>, and how sometimes being literally insane is the key to winning a race across the
country. With this rich evidence-based book, Barker leaves no room for fluff as he walks the reader through
common ideas about success ("Do nice guys finish last? Is it about what you know or who you know? Is there
work-life balance or is it all work-work-work?") and discerns what truly determines a successful life that
is <a class="weblink" href="https://www.youtube.com/watch?v=SlOGeASFlmU" target="_blank"><strong>unique to
each individual.</strong></a></p>
</div>
<div class=container>
<h4 class="section-subcategory py-2 mx-2">General</h4>
<p class="desc my-2 mx-4"><a class="weblink" href=" https://dev.to/aspittel/25-tips-for-new-developers-advice-from-a-mostly-self-taught-software-engineer-1ff1"
target="_blank"><strong>25 Tips For New Developers</strong></a>: Advice from a (mostly) self-sought
Software Engineer, Ali Spittel relays some insightful ideas and experiences after many years in the tech
industry.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.codecademy.com/catalog/subject/web-development"
target="_blank"><strong>Codecademy</strong></a>: A place to learn and practice web development concepts
and languages.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://codepen.io/" target="_blank"><strong>CodePen</strong></a>:
A development environment for front-end designers and developers, to showcasing user-created HTML, CSS and
JavaScript code snippets.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coderbyte.com/" target="_blank"><strong>Coderbyte</strong></a>:
A website for coding challenges and interview preparation.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.codewars.com/" target="_blank"><strong>Codewars</strong></a>:
A place to challenge yourself and hone your coding skills. See if you can find any fellow ZTM students on
there and team up with them!</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://cssreference.io/" target="_blank"><strong>CSS
Reference</strong></a>: An online guide to CSS that features complete descriptions, examples of usage,
and illustrated/animated examples of the most popular CSS properties.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://devdocs.io/" target="_blank"><strong>DevDocs</strong></a>:
DevDocs combines multiple API documentations in a clean and organized web UI with instant search, offline
support, mobile version, dark theme, keyboard shortcuts, and more.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://egghead.io" target="_blank"><strong>Egghead</strong></a>:
A place to learn new web development concepts and languages, both for free and paid.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.freecodecamp.org" target="_blank"><strong>freeCodeCamp.org</strong></a>:
A free site for learning web development. In addition to that, you can pledge to donate money to charities while you
learn, giving incentive to keep working. In particular, this site features a number of JavaScript
algorithms for practice and preparation for technical job interviews.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://htmlreference.io/" target="_blank"><strong>HTML
Reference</strong></a>: An online guide to HTML that features complete descriptions, and examples of
usage for all HTML elements and attributes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.learnenough.com/courses" target="_blank"><strong>Learn
Enough</strong></a>: A comprehensive guide to providing you a solid foundation as a developer to become
comfortable with all of the tools and technologies you interact with. Created by Michael Hartl – founder of
Learn Enough and creator of the Ruby on Rails tutorial – these courses are free to read online and
available for purchase as an ebook for your device.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://developer.mozilla.org/en-US/" target="_blank"><strong>MDN
Web Docs</strong></a>: A resource for developers, maintained by the community of developers and
technical writers and hosting many documents on a wide variety of subjects, such as: HTML, CSS, HTTP,
JavaScript, Web APIs, Web components, Graphics, Audio, video and multimedia, MathML.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.pluralsight.com" target="_blank"><strong>Pluralsight</strong></a>:
Pluralsight is the leader in training for serious software developers, IT admins, and creative
professionals. With 3,000+ courses and new ones added daily, Pluralsight serves as a career catalyst for
customers in more than 150 countries and provides tech-savvy businesses with training on the three key
areas they need to thrive.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.sololearn.com/" target="_blank"><strong>SoloLearn</strong></a>:
Join the largest community of mobile code learners today. Basically, it's a great app to help you get a
basic concepts of learning various programming languages easily and those are well structured to learn. It
has a very friendly community to join and it's increasing and getting stronger day by day. There is a
battle option to compete with others to justify your knowledge. Believe me, it's very enjoyable and
helpful.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://stackoverflow.com/" target="_blank"><strong>StackOverflow</strong></a>:
A massive resource of questions and answers having to do with coding. If you have a question regarding web
development or coding in general, chances are it has already been answered on StackOverflow.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.taniarascia.com/tutorials/" target="_blank"><strong>Tania
Rascia Tutorials</strong></a>: Awesome tutorials on different topics about Front End & Design, Back End
Development, Javascript, Developer Workflow, System Administration and many more!</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.udacity.com/" target="_blank"><strong>Udacity</strong></a>:
A website for learning different concepts of computer science.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.w3schools.com/" target="_blank"><strong>W3Schools</strong></a>:
Clean and structured Website to teach HTML, CSS, JavaScript and more.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/kamranahmedse/developer-roadmap" target="_blank"><strong>Developers
Roadmap</strong></a>: A set of charts demonstrating the paths that you can take and the technologies
that you would want to adopt in order to become a frontend, backend or a devops</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/watch?v=gVXcqO9A1vo" target="_blank"><strong>Web
Developers Roadmap</strong></a>: A complete roadmap to being a successful web developer in 2018,
created by LearnCode.academy. Comes with a very comprehensive <a class="weblink" href="http://bit.ly/2p63dS9"
target="_blank">mindmap</a></p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://syntax.fm/" target="_blank"><strong>Syntax Podcast</strong></a>:
A weekly podcast by Wes Bos and Scott Tolinski that helps you keep up to date with modern web developement.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.codenewbie.org/" target="_blank"><strong>Code
Newbie Podcast</strong></a>:
A podcast hosted by Saron Yitbarek where she interviews coders from all walks of life about their coding
journey in hopes of helping you on yours.</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Web Design Section -->
<section id="web-design">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources for Web Design</h3>
</div>
</div>
<div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">General Web Design</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda"
target="_blank"><strong>7 Rules for Creating Gorgeous UI (Part 1)</strong></a>: Part 1 of a two-part
series made for anyone with a burning desire to design good-looking UI in a pinch! Created by <a class="weblink"
href="http://erikdkennedy.com/">Erik D. Kennedy</a>, a developer-turned-UX Designer, he is chock full of
experience and his down-to-earth personality brings a sense of liveliness and humor to what he teaches.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96"
target="_blank"><strong>7 Rules for Creating Gorgeous UI (Part 2)</strong></a>: Part 2 of a two-part
series. (See above)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.csszengarden.com/" target="_blank"><strong>CSS
Zen Garden</strong></a>: A demonstration of what can be accomplished through CSS-based design. Style
sheets contributed by graphic designers from around the world are used to change the visual presentation of
a single HTML file, producing hundreds of different designs.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://css-tricks.com/" target="_blank"><strong>CSS-Tricks</strong></a>:
One of the best sites to learn CSS and responsive design.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://learnui.design/blog/" target="_blank"><strong>Learn
UI Design Blog</strong></a>: An interesting blog with Erik Kennedy's down-to-earth personality and
years of experience helps the reader really understand what makes good UI/UX from a practical perspective.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://material.io/" target="_blank"><strong>Material
Design</strong></a>: A collection of guidelines, resources, and tools for web design, all available for
free. Created by Google.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://seanhalpin.io/" target="_blank"><strong>Sean Halpin</strong></a>: A professional web designer/developer's award winning portfolio website.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://flexboxfroggy.com/" target="_blank"><strong>Flexbox
Froggy</strong></a>: A fun in-browser game to help teach the powerful, complex CSS flexbox layout
method.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://cssgridgarden.com/" target="_blank"><strong>Grid
Garden</strong></a>:A fun in-browser game to help teach the powerful, complex CSS grid layout method.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Color Palettes</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://color.adobe.com/create/color-wheel/" target="_blank"><strong>Adobe
Color Wheel</strong></a>: A color wheel to help you generate and save color schemes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://material.io/color/#!/?view.left=0&view.right=0"
target="_blank"><strong>Color Tool</strong></a>: A tool associated with Google's Material Design (see
above) for creating a color palette.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.colormind.io/" target="_blank"><strong>Colormind</strong></a>:
A color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and
popular art.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coolors.co/" target="_blank"><strong>Coolors.co</strong></a>:
An excellent resource for working out a simple matching color palette for web pages. The site generates
matching color schemes along with their hex and RGB values.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.crockford.com/wrrrld/color.html" target="_blank"><strong>CSS
Color Names</strong></a>: A simple chart that lists all of the color names that can be used in CSS.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://flatuicolors.com/" target="_blank"><strong>Flat UI
Colors</strong></a>: A simple website that allows you to choose from different color palettes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.paletton.com/" target="_blank"><strong>Paletton</strong></a>:
A color palette generator that allows for much more fine-tuning than most other generators.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Icons, Graphics & Fonts</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.myfonts.com/WhatTheFont/" target="_blank"><strong>What
The Font!</strong></a>: Find out the name of any font from a simple image of the text.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://lea.verou.me/css3patterns/" target="_blank"><strong>CSS3
Patterns Gallery</strong></a>: A gallery of background patterns and their CSS code.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://fontawesome.com/" target="_blank"><strong>Font
Awesome</strong></a>: A large set of both free and not-free icons. You can either download the code or
use their CDN links.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://fonts.google.com/" target="_blank"><strong>Google
Fonts</strong></a>: Best free resource for selecting the fonts of your texts</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.iconfinder.com/" target="_blank"><strong>Iconfinder</strong></a>:
A listing of free and not-free web icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://useiconic.com/" target="_blank"><strong>Ionic</strong></a>:
A collection of simple web icons. There is a free set of 223 icons as well as a larger set you can pay for.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://linea.io/" target="_blank"><strong>Linea</strong></a>:
A collection of simple, free icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://octicons.github.com/" target="_blank"><strong>Octicons</strong></a>:
GitHub's free set of icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://vincentgarreau.com/particles.js/" target="_blank"><strong>Particles.js</strong></a>:
An app for creating dynamic CSS backgrounds.</p>
<p class="desc my-2 mx-4"><strong>Note</strong>: As of the most recent version of <a class="weblink" href="https://getbootstrap.com/"
target="_blank">Bootstrap</a> (v4), they no longer support their own glyphicons. To read more about what
has changed in Bootstrap v4, <a class="weblink" href="https://getbootstrap.com/docs/4.0/migration/">click
here.</a></p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Images & Video</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://allthefreestock.com/" target="_blank"><strong>AllTheFreeStock</strong></a>:
A central place to search for free stock photos and videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coverr.co/" target="_blank"><strong>Coverr</strong></a>:
Free stock videos to add to your websites.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://gratisography.com/" target="_blank"><strong>Gratisography</strong></a>:
Another source of free stock photos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.pexels.com/" target="_blank"><strong>Pexels</strong></a>:
A source of free stock photos and videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://pixabay.com/videos/" target="_blank"><strong>Pixabay</strong></a>:
Free stock videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.placeimg.com/" target="_blank"><strong>PlaceIMG</strong></a>:
Gives you a url that generates a new random placeholder image every time.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.stickpng.com/" target="_blank"><strong>StickPNG</strong></a>:
An excellent source for PNG images if you need something that is re-sizable and can be set to transparent.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://unsplash.com/" target="_blank"><strong>Unsplash</strong></a>:
Free stock photos, all in JPEG format.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.videvo.net/" target="_blank"><strong>Videvo</strong></a>:
Free stock videos.</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Javascript Section -->
<section id="javascript-section">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources to Become a Javascript Expert</h3>
</div>
</div>
<div>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/getify/You-Dont-Know-JS" target="_blank"><strong>You
Don't Know JS</strong></a>: No matter how much experience you have with JavaScript, odds are you don’t
fully understand the language. These concise yet in-depth guides takes you inside core concepts that can help
you become a more efficient and effective JavaScript programmer. A series of books diving deep into the core
mechanisms of the language.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://eloquentjavascript.net/" target="_blank"><strong>Eloquent
Javascript</strong></a>: Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books
and teaches you to write code that's elegant and effective. This book slowly builds on the basic ideas of
Javascript such as objects and functions and moves onto higher-level ideas in the programming language.
Highly recommended.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.safaribooksonline.com/library/view/javascript-cookbook/9781449390211/"
target="_blank"><strong>Javascript Cookbook</strong></a>: Why reinvent the wheel every time you run into a
problem with JavaScript? This cookbook is chock-full of code recipes that address common programming tasks,
as well as techniques for building web apps that work in any browser. Just copy and paste the code samples
into your project— you’ll get the job done faster and learn more about JavaScript in the process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition"
target="_blank"><strong>Javascript: The Core</strong></a>: This is a very fast yet solid foundation to work
with, for anyone who might have struggled with the contexts and how arrow functions, local variables, and
prototypes fit into the bigger picture. An introduction into the deeper ideas in Javascript.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.reactnative.guide/" target="_blank"><strong>React
Native Guide</strong></a>: "A reference for building production-grade applications which are easy to
test, maintain and extend to multiple platforms. This book is for the Web developers who have already got
their hands dirty with React and ES6 and want to build complex native apps." – <a class="weblink" href="http://rahulgaba.com/"
target="_blank">Rahul Gaba</a> and <a class="weblink" href="https://www.atulr.com/#/" target="_blank">Atul
R</a>.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://book.mixu.net/node/" target="_blank"><strong>Mixu's
Node Book</strong></a>: An online tutorial that received much praise for explaining Node.js in a
well-structured way. It is a book that teaches you to write the code for Node.js and not only rely on
third-party libraries. Anyone that wants to have a deep grasp of the Node.js framework will benefit from
Mixu's book.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://sdras.github.io/array-explorer/" target="_blank"><strong>Array
Explorer</strong></a>: Find the array method you need for your Javascript array without digging through
the docs. A useful resource that can make using arrays easier.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://sdras.github.io/object-explorer/" target="_blank"><strong>Object
Explorer</strong></a>: Find the object method you need for your Javascript object without digging through
the docs. A useful resource that can make using objects manipulation easier.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://javascript.info/" target="_blank"><strong>JavaScript
Tutorial</strong></a>: JavaScript tutorial with task to solve from the basics to advanced topics with
simple, but detailed explanations.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://javascript30.com/" target="_blank"><strong>JavaScript
30</strong>
</a>: A 30day coding challenge in which you will build 30 things using vanilla JavaScript.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.pythontutor.com/visualize.html#mode=edit" target="_blank"><strong>Visualize
JavaScript</strong></a>: A helpful tool that breaks down your JavaScript code step-by-step. Helpful for
identifying errors and solving errors in your code. Run your code in "Live Programming Mode" to visualize all
the steps!</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://tylermcginnis.com/javascript-visualizer/" target="_blank"><strong>Alternative
Javascript Visualizer</strong></a>: A tool for visualizing Execution Context, Hoisting, Closures, and
Scopes in JavaScript. </p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://javascript.info/" target="_blank"><strong>Javascript.info</strong></a>:How
it's done now. From Javascript the basics to advanced topics with simple, but detailed explanations. </p>
</div>
</div>
<hr>
</section>
<!-- Articles Section -->
<section id="articles">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Articles On Learning Web Development</h3>
</div>
</div>
<div>
<p class="desc my-2 mx-4"><a class="weblink" href="https://hackernoon.com/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a"
target="_blank"><strong>Learn to code in 2018, get hired, and have fun along the way</strong></a>: Written
by Andrei Neagoie that got many of us into one of these <a class="weblink" href="https://www.udemy.com/user/andrei-neagoie/">classes.</a>
If you haven't read it, it's worth a read and has a few more items of info that are not necessarily in the
lessons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.taniarascia.com/my-front-end-web-development-setup/"
target="_blank"><strong>Front End Web Development Setup</strong></a>: Written by <a class="weblink" href="https://www.taniarascia.com/">Tania
Rascia</a>. An informative article on how to put together a front-end development environment.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/grab/front-end-guide" target="_blank"><strong>front-end-guide</strong></a>:
An extended article/GitHub repo that addresses what a modern web developer should study and be aware of. This
is written from the perspective of a developer informing new employees as to what are the current practices
at his company, <a href="https://www.grab.com/sg/" target="_blank">Grab</a> ride-sharing service</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://char.gd/blog/2017/how-to-set-up-the-perfect-modern-dev-environment-on-windows"
target="_blank"><strong>Modern Development Environment for Windows</strong></a>: Written by Owen Williams.
Setting up a windows computer for front-end development.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/tools-i-wish-i-had-known-about-when-i-started-coding-57849efd9248"
target="_blank"><strong>Tools I wish I had known about when I started coding</strong></a>: Written by Mario
Hoyos. A collection of Chrome Extensions and VS Code extensions.</p>
</div>
</div>
<hr>
</section>
<!-- Tools Section -->
<section id="tools">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Tools for Web Development</h3>
</div>
</div>
<div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Free Tools for Students</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.jetbrains.com/student/" target="_blank"><strong>JetBrains
Student License</strong></a>: Free individual licenses of the award-winning professional developer
tools from JetBrains for students and faculty members.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://education.github.com/pack" target="_blank"><strong>Student
Developer Pack</strong></a>: The best developer tools, free for students via Github Education.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Chrome Extensions</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=en-US"
target="_blank"><strong>BuiltWith Technology Analyzer</strong></a>: Lets you see what tools and
javascript libraries a site is using.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp"
target="_blank"><strong>ColorZilla</strong></a>: Find colors on your page with this eye dropper.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa"
target="_blank"><strong>JSON Formatter</strong></a>: Just like the name says, get help with your JSON
issues.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/search/pesticide"
target="_blank"><strong>Pesticide</strong></a>: Make Box Modelling a breeze. Pinpoint issues, fast.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"
target="_blank"><strong>React Developer Tools</strong></a>: Name says it all.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd"
target="_blank"><strong>Redux Dev Tools</strong></a>: Yep, dev tools for Redux.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg"
target="_blank"><strong>Wappalyzer</strong></a>: What technology is this site using? One click on the
button and you'll know.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm"
target="_blank"><strong>WhatFont</strong></a>: Instantly find out what font is being used with a click.
No Developer Mode required.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/vimeo-repeat-speed/noonakfaafcdaagngpjehilgegefdima"
target="_blank"><strong>Vimeo Repeat and Speed</strong></a>: Consume info at faster than normal pace.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Editor Features & Plugins</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/collections/clean-code-linters" target="_blank"><strong>Code
Linters</strong></a>: Get immediate feedback on code logic or stylistic errors. (Plugin or Built-in)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://emmet.io/" target="_blank"><strong>Emmet</strong></a>:
Use shortcuts and shorthand to get work done more quickly. (Plugin or Built-in)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://git-scm.com/" target="_blank"><strong>Git</strong></a>:
Source control is necessary. (Plugin or Built-in)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/atom-live-server/" target="_blank"><strong>Atom-Live-Server</strong></a>:
Launch simple development http server with live reload</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/atom-ternjs/" target="_blank"><strong>Atom
tern-js</strong></a>: Javascript code intelligence for Atom - auto complete suggestion</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/file-icons/" target="_blank"><strong>Atom
File-icons</strong></a>: Assigns file extension icons and colors</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/minimap/" target="_blank"><strong>Atom
Minimap</strong></a>: A preview of the full source code</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/pigments/" target="_blank"><strong>Atom
Pigments</strong></a>: A package to display colors in project files (CSS)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/packages/pretty-json/" target="_blank"><strong>Atom
pretty-json</strong></a>: Package for automatically formatting JSON documents</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">General Development Tools</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://colinkeany.com/blend/" target="_blank"><strong>Blend</strong></a>:
This tool creates CSS code for linear gradients, taking the guess work out of the process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://caniuse.com/" target="_blank"><strong>Can I use</strong></a>:
Website for checking if an HTML tag or CSS feature is recognised in any browser.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://cubic-bezier.com/#.17,.67,.83,.67" target="_blank"><strong>cubic-bezier.com</strong></a>:
A great tool for creating bezier curve animations in CSS without having to guess at the code.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://kangax.github.io/compat-table/es6/" target="_blank"><strong>ECMAScript
Compatibility Table</strong></a>: A table for checking the compatibility of modern JavaScript elements
with browsers and compilers.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://jsonplaceholder.typicode.com/" target="_blank"><strong>JSONPlaceholder</strong></a>:
A great resource for testing API calls in JavaScript development.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.getpostman.com/" target="_blank"><strong>Postman</strong></a>:
Web app that allows testing all API request methods (GET, POST, PUT, DELETE, and so on).</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://sweetalert2.github.io/?utm_content=buffer5396d&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer"
target="_blank"><strong>SweetAlert2</strong></a>: Premade customized alerts.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.regexpal.com/" target="_blank"><strong>RegEx
Pal</strong></a>:
An online tool to help you test your Regular Expressions.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.regexpal.com/" target="_blank"><strong>jsPerf</strong></a>:
An online tool which provides a way to create and share test cases, comparing the performance of different
JavaScript snippets by
running benchmarks.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Text Editors</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/" target="_blank"><strong>Atom</strong></a>:
(Free) Open-Sourced. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://brackets.io/" target="_blank"><strong>Brackets</strong></a>:
(Free) Developed by Adobe. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.sublimetext.com/3" target="_blank"><strong>Sublime
Text</strong></a>: (Free & paid) Andrei's choice, but not mandatory. Buy it, if you like it to help
the developer. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://code.visualstudio.com/" target="_blank"><strong>Visual
Studio Code</strong></a>: (Free) Open-Sourced from Microsoft. (WIN, MAC, LINUX)</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Git & GitHub Section -->
<section id="git-github">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Git & GitHub</h3>
</div>
</div>
<div class="row">
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Using Git & GitHub</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://try.github.io/" target="_blank"><strong>Try Git</strong></a>:
Learn how to use Git with Code School's interactive course.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.learnenough.com/git-tutorial" target="_blank"><strong>Learn
Enough Git To Be Dangerous</strong></a>: A comprehensive guide to becoming very comfortable with Git
and Github, provided by Michael Hartl – creator of the <a class="weblink" href="https://www.railstutorial.org/"
target="_blank">Ruby on Rails tutorial</a> and founder of the <a class="weblink" href="https://www.learnenough.com/story"
target="_blank">Learn Enough courses</a>
</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://education.github.com/git-cheat-sheet-education.pdf"
target="_blank"><strong>Git Cheat Sheet</strong></a>: A cheat sheet that features the most important and
commonly used Git commands for easy reference.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://git-scm.com/docs" target="_blank"><strong>Git
Reference Documentation</strong></a>: A complete listing of Git's features and commands. The
documentation is also available as a free ebook titled <a class="weblink" href="https://git-scm.com/book/en/v2"
target="_blank">Pro Git</a>.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://egghead.io/lessons/javascript-introduction-to-github"
target="_blank"><strong>Egg Head</strong></a>: Learn all you need to get started with Git and GitHub and
get your first pull requests going.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud"
target="_blank"><strong>Learn Git with Bitbucket Cloud</strong></a>: Create a Git repository, Copy your
Git repository, add files, Pull changes from your Git repository on Bitbucket Cloud, Use a Git branch to
merge a file and much more to become a pro at Git.</p>
</div>
<div class="container">
<h5 class="section-subcategory py-2 mx-2">Markdown:</h5>
<p class="desc my-2 mx-4"><a class="weblink" href="https://guides.github.com/features/mastering-markdown/"
target="_blank"><strong>Mastering Markdown</strong></a>: Most web pages (expecially the README) on GitHub
are written using the Markdown HTML-preprocessor language.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://daringfireball.net/projects/markdown/syntax"
target="_blank"><strong>Daring Fireball</strong></a>: Another useful resource for Markdown is the Daring
Fireball.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf"
target="_blank"><strong>A useful Markdown cheat sheat</strong></a>: Everything you need to know about
Markdown layed out in a PDF format.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/StuartDaniells/Markdown_Emoji-s_List"
target="_blank"><strong>Markdown Emoji's</strong></a>: One stop for all your favourate Emoji's using
Markdown.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Open-Source Coding on GitHub</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/zero-to-mastery/start-here-guidelines"
target="_blank"><strong>Contributing to open source projects</strong></a>: This is a good place to start
learning how to contribute to open source projects on GitHub.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://help.github.com/articles/finding-open-source-projects-on-github/"
target="_blank"><strong>Finding Open Source Projects on GitHub</strong></a>: GitHub's advice on how to
discover and contribute to open source projects.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/zero-to-mastery" target="_blank"><strong>Zero
to Mastery</strong></a>: A listing of GitHub open-source projects associated with Andrei Neagoie's
Udemy course <a class="weblink" href="https://www.udemy.com/the-complete-web-developer-in-2018/learn/v4/content"
target="_blank">The Complete Web Developer in 2018: From Zero to Mastery</a>.</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Interviewing Section -->
<section id="interviewing">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources on Technical Interviewing</h3>
<h5 class="desc my-2 mx-4"><strong>A list based on <a class="weblink" href="https://www.udemy.com/the-complete-web-developer-in-2018/learn/v4/t/lecture/8767388?start=0"
target="_blank">Andrei's list of interviewing resources</a></strong>.</h5>
<p class="desc my-2 mx-4"><a class="weblink" href="https://haseebq.com/how-to-break-into-tech-job-hunting-and-interviews/"
target="_blank"><strong>How to Break Into the Tech Industry</strong></a>: Some good, fairly detailed
advice on job hunting, networking, interviewing, and negotiation.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/how-not-to-bomb-your-offer-negotiation-c46bb9bc7dea"
target="_blank"><strong>How Not to Bomb Your Offer Negotiation</strong></a>: How to negotiate a better
deal for yourself in the hiring process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://blog.devmastery.com/how-to-win-the-coding-interview-71ae7102d685"
target="_blank"><strong>How to Win the Coding Interview</strong></a>: A decent article on coding
interviews that has been expanded into a <a class="weblink" href="http://freebies.devmastery.com/interview-guide/"
target="_blank">free e-book</a> with a whole lot of online resources and sample questions. This is the
motherload, really.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/5-key-learnings-from-the-post-bootcamp-job-search-9a07468d2331"
target="_blank"><strong>I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.</strong></a>:
Some job search advice given by a recent bootcamp graduate.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://pulamusic.github.io/Moon/coding-interviews/"
target="_blank"><strong>Notes for Coding Interviews</strong></a>: Some notes and code associated with a
Udemy course titled <a class="weblink" href="https://www.udemy.com/javascript-interview-prep/learn/v4/content"
target="_blank">JavaScript Interview Prep</a>. While the notes themselves may be useful, it is really the
process of writing these type of notes that fully prepares one for a technical interview.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://seldo.com/weblog/2014/08/26/you_suck_at_technical_interviews"
target="_blank"><strong>You Suck at Technical Interviews</strong></a>: An interesting article that
provides advice for potential employers on how to improve their interviewing techniques and strategies.
Certainly, this would be a good read for someone on the job market.</p>
</div>
</div>
</div>
</section>
<!-- Youtube Section -->
<section id="youtube">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources on Youtube</h3>
<ol>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/cs50tv/" target="_blank"><strong>CS50</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/derekbanas" target="_blank"><strong>Derek Banas</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ" target="_blank"><strong>FreeCodeCamp</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/programmingwithmosh" target="_blank"><strong>Programming with Mosh</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/ProgrammingKnowledge" target="_blank"><strong>ProgrammingKnowledge</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/shiffman" target="_blank"><strong>The Coding Train</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg" target="_blank"><strong>The Net Ninja</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/thenewboston" target="_blank"><strong>Thenewboston</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/TechGuyWeb/" target="_blank"><strong>Traversy Media</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/sentdex" target="_blank"><strong>sentdex</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q" target="_blank"><strong>Fun Fun Function</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ" target="_blank"><strong>Coding Tech</strong></a></li>
<li class="desc my-2 mx-4"><a class="weblink" href="https://www.youtube.com/user/Computerphile" target="_blank"><strong>Computerphile</strong></a>: A channel that focuses on more abstract/theoretical topics in computer science. Is less of a tutorial channel and more for those with an interest in theory, etc.</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="my-5">
<a href="#">
<h3 class="text-center py-5">Back to the top</h3>
</a>
</footer>
<!-- Bootstrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Swapped out the Bootstrap abbreviated version of jQuery with the full version -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
<!-- local script -->
<script src="main.js"></script>
</body>
</html>