forked from BycorSanchez/resources
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
540 lines (537 loc) · 36.4 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
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<script defer src="assets/js/fontawesome-all.min.js"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/layout.css">
</head>
<body>
<div id="menu" class="dark-scrollbar">
<header>
<div id="logo">
<a href="#top">
<img src="images/profile.jpg" alt="Logo">
<h2>Resources</h2>
<p>Web developer resources</p>
</a>
</div>
<nav id="nav">
<ul>
<li><a href="#top" class="active-link"><i class="fas fa-home fa-fw icon"></i>Intro</a></li>
<li><a href="#html"><i class="fab fa-html5 fa-fw icon"></i>HTML</a></li>
<li><a href="#css"><i class="fab fa-css3 fa-fw icon"></i>CSS</a></li>
<li><a href="#learnjs"><i class="fab fa-js-square fa-fw icon"></i>JavaScript</a></li>
<li><a href="#jquery"><i class="fas fa-code fa-fw icon"></i>Jquery</a></li>
<li><a href="#git"><i class="fas fa-code-branch fa-fw icon"></i>Git</a></li>
<li><a href="#courses"><i class="fas fa-university fa-fw icon"></i>Courses</a></li>
<li><a href="#challenges"><i class="fas fa-flag-checkered fa-fw icon"></i>Coding challenges</a></li>
<li><a href="#fonts"><i class="fas fa-font fa-fw icon"></i>Fonts and typography</a></li>
<li><a href="#onlinetools"><i class="fas fa-globe fa-fw icon"></i>Online tools</a></li>
<li><a href="#colors"><i class="fas fa-paint-brush fa-fw icon"></i>Colors/Palettes</a></li>
<li><a href="#flex"><i class="fas fa-columns fa-fw icon"></i>Flexbox</a></li>
<li><a href="#grid"><i class="fas fa-th fa-fw icon"></i>CSS Grid and Bootstrap</a></li>
<li><a href="#images"><i class="far fa-image fa-fw icon"></i>Images</a></li>
<li><a href="#icons"><i class="fas fa-hashtag fa-fw icon"></i>Icons</a></li>
<li><a href="#patterns"><i class="fas fa-puzzle-piece fa-fw icon"></i>Background Patterns</a></li>
<li><a href="#podcasts"><i class="fas fa-volume-up fa-fw icon"></i>Podcasts</a></li>
<li><a href="#ebooks"><i class="fas fa-book fa-fw icon"></i>Ebooks</a></li>
<li><a href="#games"><i class="fas fa-gamepad fa-fw icon"></i>Games</a></li>
<li><a href="#apps"><i class="fas fa-mobile-alt fa-fw icon"></i>Apps</a></li>
<li><a href="#design"><i class="fas fa-desktop fa-fw icon"></i>Design</a></li>
<li><a href="#uxdesign"><i class="far fa-window-maximize fa-fw icon"></i>UX/UI Design</a></li>
<li><a href="#women"><i class="fas fa-venus fa-fw icon"></i>Women and Girls</a></li>
<li><a href="#bookmarks"><i class="far fa-bookmark fa-fw icon"></i>Bookmarks</a></li>
<li><a href="#youtube"><i class="fab fa-youtube fa-fw icon"></i>Youtube</a></li>
<li><a href="#reddit"><i class="fab fa-reddit-alien fa-fw icon"></i>Reddit</a></li>
<li><a href="#paths"><i class="fas fa-map-signs fa-fw icon"></i>Learning paths</a></li>
<li><a href="#miscellaneous"><i class="fas fa-map fa-fw icon"></i>Miscellaneous</a></li>
</ul>
</nav>
</header>
<footer id="menu-footer">
<a href="https://github.com/BycorSanchez/resources" title="GitHub"><i class="fab fa-github-alt icon"></i></a>
<a href="https://gitprint.com/BycorSanchez/resources" title="PDF"><i class="far fa-file-pdf icon"></i></a>
</footer>
</div>
<div id="main">
<header id="top" class="banner">
<h1>Hi! Welcome to the definitive <span class="highlight">resource list</span> for <del>web</del> developers</h1>
<p>All these resources have been collected at the Udacity forum during the <a href="https://blog.udacity.com/2017/09/announcing-60000-challenge-scholarships-udacity-google.html" alt="Scholarship blog">Google / Udacity Front-End Developer Scholarship</a>. Thank you to <a href="https://eu.udacity.com" alt="Udacity">Udacity</a>, <a href="https://developers.google.com" alt="Google developers">Google</a> and all enrolled users.</p>
</header>
<section id="html">
<h1>HTML</h1>
<ul>
<li><a href="http://w3c.github.io/html/">HTML 5.3</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML MDN</a></li>
<li><a href="https://digital.com/tools/html-cheatsheet/">HTML CheatSheet</a></li>
<li><a href="https://medium.com/level-up-web/the-mega-html5-cheatsheet-e8c479b1c521">Mega HTML CheatSheet</a></li>
<li><a href="http://htmlreference.io">HTML Reference</a></li>
<li><a href="https://gethead.info">Guide to head elements</a></li>
</ul>
</section>
<section id="css">
<h1>CSS</h1>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS MDN</a></li>
<li><a href="https://css-tricks.com">CSS-Tricks</a></li>
<li><a href="https://www.onblastblog.com/css3-cheat-sheet/">CSS CheatSheet</a></li>
<li><a href="http://cssreference.io">CSS Reference</a></li>
<li><a href="http://www.csszengarden.com">CSS zen garden</a></li>
<li><a href="https://tympanus.net/codrops/css_reference/">CSS reference by Codrops</a></li>
</ul>
</section>
<section id="learnjs">
<h1>Learn JavaScript</h1>
<ul>
<li><a href="http://jsforcats.com">JS for cats</a></li>
<li><a href="https://gitbookio.gitbooks.io/javascript/">Learn JS</a></li>
<li><a href="http://eloquentjavascript.net">Eloquent JS</a></li>
<li><a href="http://bonsaiden.github.io/JavaScript-Garden/">JS garden</a></li>
<li><a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JS Design Patterns</a></li>
<li><a href="https://leanpub.com/understandinges6/read">Understanding ECMAScript 6</a></li>
<li><a href="http://read.humanjavascript.com">Human JS</a></li>
<li><a href="https://addyosmani.com/backbone-fundamentals/">Developing Backbone.js</a></li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know JS</a></li>
<li><a href="http://jstherightway.org">JS the right way</a></li>
<li><a href="http://chimera.labs.oreilly.com/books/1234000000262/index.html">Programming JS Applications</a></li>
<li><a href="http://javascript.info">JS.Info</a></li>
<li><a href="https://lab.reaal.me/jsrobot/">JS Robot</a></li>
<li><a href="http://javascriptissexy.com">JavaScript is sexy</a></li>
<li><a href="http://es6-features.org/">ES6 Features</a></li>
<li><a href="https://watchandcode.com/">Watch and Code</a></li>
</ul>
</section>
<section id="jquery">
<h1>Jquery</h1>
<ul>
<li><a href="http://api.jquery.com">Documentation</a></li>
<li><a href="http://try.jquery.com">JQuery Tutorial</a></li>
<li><a href="https://oscarotero.com/jquery/">JQuery CheatSheet</a></li>
</ul>
</section>
<section id="git">
<h1>Git</h1>
<ul>
<li><a href="https://try.github.io">Try Git</a></li>
<li><a href="http://gitimmersion.com">Git immersion</a></li>
</ul>
</section>
<section id="courses">
<h1>Courses</h1>
<ul>
<li><a href="https://www.udacity.com">Udacity</a></li>
<li><a href="https://www.freecodecamp.org">FreeCodeCamp</a></li>
<li><a href="https://teamtreehouse.com">Team Tree House</a></li>
<li><a href="https://www.sololearn.com">Sololearn</a></li>
<li><a href="https://dash.generalassemb.ly">Dash</a></li>
<li><a href="https://thenewboston.com">The new Boston</a></li>
<li><a href="https://www.cybrary.it">Cybrary</a></li>
<li><a href="https://www.theodinproject.com/home">The Odin Project</a></li>
<li><a href="https://www.codecademy.com">Codecademy</a></li>
<li><a href="https://www.edx.org">edX</a></li>
<li><a href="https://www.udemy.com">Udemy</a></li>
<li><a href="https://www.coursera.org">Coursera</a></li>
<li><a href="https://www.lynda.com">Lynda</a></li>
<li><a href="http://htmldog.com">HTML CSS JS Tutorials</a></li>
<li><a href="https://www.w3schools.com">W3Schools</a></li>
<li><a href="https://www.khanacademy.org">Khan academy</a></li>
<li><a href="https://www.codeschool.com">Code School</a></li>
<li><a href="https://bento.io/tracks">Bento</a></li>
<li><a href="https://www.sitepoint.com">Sitepoint</a></li>
<li><a href="https://code.org">Code.org</a></li>
<li><a href="https://www.tutorialspoint.com">TutorialsPoint</a></li>
<li><a href="https://hackr.io">Hackr</a></li>
<li><a href="https://www.pluralsight.com">Pluralsight</a></li>
<li><a href="https://internetingishard.com">Internet is hard</a></li>
<li><a href="https://egghead.io">Egg Head</a></li>
<li><a href="https://sabe.io">Sabe</a></li>
<li><a href="https://courses.platzi.com">Platzi</a></li>
<li><a href="https://laracasts.com">Laracasts</a></li>
<li><a href="https://www.hackerearth.com/practice/codemonk/">Codemonk on Hackerearth</a></li>
<li><a href="http://codingheroes.io/index.html">Coding Heroes</a></li>
<li><a href="http://wesbos.com/courses/">Wes Bos</a></li>
<li><a href="https://edabit.com">Edabit</a></li>
<li><a href="http://paqmind.com">Paqmind</a></li>
<li><a href="https://openclassrooms.com">Open Classrooms</a></li>
<li><a href="https://learncodethehardway.org">Learn Code The Hard Way</a></li>
<li><a href="https://beginnersbook.com">Beginner's Book</a></li>
<li><a href="https://upskillcourses.com">Upskill Courses</a></li>
<li><a href="https://learn.shayhowe.com">Learn to Code HTML and CSS</a></li>
<li><a href="https://scotch.io/courses">Scotch.io</a></li>
<li><a href="https://progate.com">Progate</a></li>
</ul>
</section>
<section id="challenges">
<h1>Coding challenges</h1>
<ul>
<li><a href="https://coderbyte.com/">Coderbyte</a></li>
<li><a href="https://www.codewars.com">Codewars</a></li>
<li><a href="https://codefights.com">Code Fights</a></li>
<li><a href="https://www.codingame.com/">CodinGame</a></li>
<li><a href="https://www.topcoder.com/challenges/">Top Coder challenges</a></li>
<li><a href="https://www.hackerrank.com">HackerRank</a></li>
<li><a href="(https://leetcode.com/">LeetCode</a></li>
<li><a href="https://www.codechef.com/">Code Chef</a></li>
<li><a href="https://www.geeksforgeeks.org/">Geeks for geeks</a></li>
<li><a href="http://codeforces.com/">Code Forces</a></li>
<li><a href="https://javascript30.com">JS30 challenge</a></li>
</ul>
</section>
<section id="fonts">
<h1>Fonts and typography</h1>
<ul>
<li><a href="https://fonts.google.com">Google Fonts</a></li>
<li><a href="https://www.justmytype.co">Just my type</a></li>
<li><a href="https://femmebot.github.io/google-type/">Google Web fonts</a></li>
<li><a href="http://www.typogui.de">Typogui</a></li>
<li><a href="http://www.typographyhandbook.com">Typography Handbook</a></li>
<li><a href="https://www.typewolf.com">Typewolf</a></li>
<li><a href="https://www.canva.com">Canva</a></li>
<li><a href="https://www.fontsquirrel.com">Font Squirrel</a></li>
<li><a href="https://www.dafont.com">DaFont</a></li>
<li><a href="https://www.1001freefonts.com">1001FreeFonts</a></li>
<li><a href="http://fontpair.co">Font Pair</a></li>
<li><a href="https://www.canva.com/font-combinations/">Font Combinations</a></li>
<li><a href="http://typ.io">typ.io</a></li>
</ul>
</section>
<section id="onlinetools">
<h1>Online tools</h1>
<ul>
<li><a href="https://www.cssmatic.com">CSSmatic</a></li>
<li><a href="https://css3gen.com">CSS3gen</a></li>
<li><a href="https://www.danstools.com">Dans Tools</a></li>
<li><a href="https://tools.pingdom.com">Website Speed Test</a></li>
<li><a href="https://caniuse.com">Can I use?</a></li>
<li><a href="https://developers.google.com/web/tools/">Chrome DevTools</a></li>
<li><a href="https://responsive-screenshots.com">Responsive screenshots</a></li>
<li><a href="http://ami.responsivedesign.is">Am I Responsive?</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox DevTools</a></li>
<li><a href="http://www.abstractbrowsing.net">Abstract browsing</a></li>
<li><a href="https://frontendchecklist.io">Front-End Checklist</a></li>
<li><a href="https://thimble.mozilla.org/en-GB/">Thimble by Mozilla</a></li>
<li><a href="https://glyphter.com">Glyphter custom icon fonts</a></li>
<li><a href="https://regex101.com">Regular Expressions tester</a></li>
<li><a href="https://sdras.github.io//object-explorer/">JavaScript Object Explorer</a></li>
<li><a href="http://www.pythontutor.com/visualize.html">Code visualizer</a></li>
<li><a href="https://codepen.io/enxaneta/full/adLPwv/">Flexbox playground</a></li>
<li><a href="http://www.ourownthing.co.uk">Our Own Thing</a></li>
</ul>
</section>
<section id="colors">
<h1>Colors/Palettes</h1>
<ul>
<li><a href="https://color.adobe.com">Adobe Color</a></li>
<li><a href="http://paletton.com/">Paletton</a></li>
<li><a href="http://colorpalettes.net">Color Palettes</a></li>
<li><a href="https://polychroma.now.sh">Polychroma Gradient</a></li>
<li><a href="https://uigradients.com">UI Gradients</a></li>
<li><a href="https://coolors.co">Coolors</a></li>
<li><a href="https://www.materialpalette.com">Material Palette</a></li>
<li><a href="https://flatuicolors.com">Flaticons UI Colors</a></li>
<li><a href="https://material.io">Material Design</a></li>
<li><a href="http://www.colourlovers.com">Colour Lovers</a></li>
<li><a href="https://uigradients.com/">UI Gradients</a></li>
<li><a href="http://www.0to255.com/">0to255</a></li>
<li><a href="https://www.webdesignrankings.com/resources/lolcolors/">Lol Colors</a></li>
<li><a href="https://webgradients.com">Web Gradients</a></li>
<li><a href="https://color.hailpixel.com/">HailPixel</a></li>
<li><a href="https://colourco.de">ColourCode</a></li>
<li><a href="http://colorhunt.co">Color Hunt</a></li>
<li><a href="https://pigment.shapefactory.co">Pigment</a></li>
</ul>
</section>
<section id="flex">
<h1>Flexbox</h1>
<ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a></li>
<li><a href="https://speckyboy.com/css-flexbox-toolbox/">CSS Flexbox Toolbox</a></li>
<li><a href="http://learnlayout.com/flexbox.html">Learn Layout</a></li>
<li><a href="https://flexbox.io">Flexbox.io</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flebox Mozilla developers</a></li>
</ul>
</section>
<section id="grid">
<h1>Bootstrap and CSS Grid</h1>
<ul>
<li><a href="https://gridbyexample.com">CSS Grid by example</a></li>
<li><a href="http://labs.jensimmons.com">JenSimmons Labs CSS Grid</a></li>
<li><a href="https://css-tricks.com/snippets/css/css-grid-starter-layouts/">CSS grid starter layouts</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS grid Mozilla developers</a></li>
<li><a href="https://cssgrid.io">cssgrid.io</a></li>
<li><a href="https://getbootstrap.com/docs/3.3/">Bootstrap Framework</a></li>
<li><a href="http://shoelace.io">Bootstrap grid builder</a></li>
</ul>
</section>
<section id="images">
<h1>Images</h1>
<ul>
<li><a href="https://unsplash.com">Unsplash</a></li>
<li><a href="https://stocksnap.io">Stocksnap</a></li>
<li><a href="https://www.pexels.com">Pexels</a></li>
<li><a href="https://pixabay.com">Pixabay</a></li>
<li><a href="https://www.freeimages.com">Free images</a></li>
<li><a href="https://burst.shopify.com">Burst Shopify</a></li>
<li><a href="https://isorepublic.com">Isorepublic</a></li>
<li><a href="https://gratisography.com">Gratisography</a></li>
<li><a href="http://jaymantri.com/">Jay Mantri</a></li>
<li><a href="https://www.foodiesfeed.com/">Foodies Feed</a></li>
<li><a href="https://negativespace.co/">Negative Space</a></li>
<li><a href="https://freestocks.org">Freestocks</a></li>
<li><a href="https://picography.co/">Picography</a></li>
<li><a href="https://mmtstock.com/">MMT</a></li>
<li><a href="https://skitterphoto.com/">Skitterphoto</a></li>
<li><a href="https://shotstash.com">Shot Stash</a></li>
<li><a href="https://styledstock.co/">Styled Stock</a></li>
<li><a href="https://www.freepik.com">Freepik</a></li>
<li><a href="https://magdeleine.co/">Magdeleine</a></li>
<li><a href="http://cupcake.nilssonlee.se">Cupcake</a></li>
<li><a href="https://avopix.com">Avopix</a></li>
<li><a href="http://littlevisuals.co">Little Visuals</a></li>
<li><a href="http://skuawk.com">Skuawk</a></li>
<li><a href="https://www.splitshire.com">SplitShire</a></li>
<li><a href="https://foodshot.co">Food Shot</a></li>
<li><a href="http://pickupimage.com">Pickup Image</a></li>
<li><a href="http://www.lifeofpix.com">Life of pix</a></li>
<li><a href="http://www.designerspics.com">DesignersPics</a></li>
<li><a href="https://goodstock.photos">Good Stock Photos</a></li>
<li><a href="http://www.freemagebank.com">Free Image Bank</a></li>
<li><a href="http://travelcoffeebook.com">Travel coffee book</a></li>
<li><a href="http://finda.photo">Finda photo</a></li>
<li><a href="https://www.wesaturate.com">Wesaturate</a></li>
</ul>
</section>
<section id="icons">
<h1>Icons</h1>
<ul>
<li><a href="http://fontawesome.io">Font Awesome</a></li>
<li><a href="http://flaticons.net">Flat Icons</a></li>
<li><a href="https://www.iconfinder.com">Iconfinder</a></li>
<li><a href="https://www.freepik.com/free-icons">Freepik</a></li>
<li><a href="https://iconstore.co">Icon Store</a></li>
<li><a href="https://iconmonstr.com">Iconmonstr</a></li>
<li><a href="http://linea.io">Linea</a></li>
<li><a href="http://ionicons.com">Ionicons</a></li>
<li><a href="https://thenounproject.com">Noun Project</a></li>
<li><a href="http://konpa.github.io/devicon/">Devicon</a></li>
<li><a href="http://fontello.com">Fontello</a></li>
<li><a href="http://weloveiconfonts.com">We Love Icon Fonts</a></li>
<li><a href="https://orioniconlibrary.com">Orion Icon Library</a></li>
</ul>
</section>
<section id="patterns">
<h1>Background Patterns</h1>
<ul>
<li><a href="http://thepatternlibrary.com/">Pattern Library</a></li>
<li><a href="http://www.heropatterns.com">Hero Patterns</a></li>
<li><a href="https://www.toptal.com/designers/subtlepatterns/">Suble Patterns</a></li>
<li><a href="https://patterninja.com">Patterninja</a></li>
</ul>
</section>
<section id="podcasts">
<h1>Podcasts</h1>
<ul>
<li><a href="https://castbox.fm">Castbox</a></li>
<li><a href="https://www.codenewbie.org/podcast">CodeNewbie</a></li>
<li><a href="https://player.fm/series/learn-to-code-with-me">Learn to Code With Me</a></li>
<li><a href="https://player.fm/series/shoptalk-19036">ShopTalk</a></li>
<li><a href="https://player.fm/series/front-end-happy-hour-131187">Front End Happy Hour</a></li>
<li><a href="https://player.fm/series/friends-talk-frontend-1415844">Friends Talk Frontend</a></li>
<li><a href="https://player.fm/series/series-1401623">Late Nights with Trav and Los</a></li>
<li><a href="https://player.fm/series/the-web-platform-podcast">The Web Platform Podcast</a></li>
<li><a href="https://player.fm/series/a-responsive-web-design-podcast-1337183">A Responsive Web Design Podcast</a></li>
<li><a href="https://player.fm/series/developer-tea-1402099">Developer Tea</a></li>
<li><a href="https://player.fm/series/the-big-web-show">The Big Web Show</a></li>
<li><a href="https://player.fm/series/the-freecodecamp-podcast">The freeCodeCamp Podcast</a></li>
<li><a href="https://player.fm/series/the-stack-overflow-podcast-1395548 ">The Stack Overflow Podcast</a></li>
<li><a href="https://player.fm/series/all-javascript-podcasts-by-devchattv">All JavaScript Podcasts by Devchat.tv</a></li>
<li><a href="https://player.fm/series/hanselminutes">Hanselminutes</a></li>
<li><a href="https://player.fm/series/soft-skills-engineering-133571">Soft Skills Engineering</a></li>
<li><a href="https://player.fm/series/ctrlclick-cast-57056">CTRL+CLICK CAST</a></li>
<li><a href="https://player.fm/series/series-1401837">Full Stack Radio</a></li>
<li><a href="https://soundcloud.com/starthere-webdev">Start Here: Web Development</a></li>
<li><a href="https://syntax.fm">Syntax.fm</a></li>
</ul>
</section>
<section id="ebooks">
<h1>Ebooks</h1>
<ul>
<li><a href="https://speckyboy.com/free-web-design-ebooks/">50 ebooks about web development</a></li>
<li><a href="https://textbooks.opensuny.org/the-missing-link-an-introduction-to-web-development-and-programming/">The missing link</a></li>
<li><a href="http://wtf.tw/ref/duckett.pdf">HTML and CSS</a></li>
<li><a href="https://www.tutorialspoint.com/html/html_tutorial.pdf">HTML ebook</a></li>
<li><a href="http://whatpixel.com/best-frontend-development-books/">15 Best Front-end Development Books</a></li>
<li><a href="https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books.md#javascript">Free programming books</a></li>
<li><a href="http://speakingjs.com/es5/">Speaking JavaScript</a></li>
<li><a href="https://jsbooks.revolunet.com">JS Books</a></li>
<li><a href="https://github.com/FrontendMasters/front-end-handbook-2017">Front-End Developer Handbook 2017</a></li>
<li><a href="https://github.com/jwasham/coding-interview-university">Coding Interview University</a></li>
<li><a href="http://goalkicker.com">GoalKicker</a></li>
</ul>
</section>
<section id="games">
<h1>Games</h1>
<ul>
<li><a href="http://flexboxfroggy.com">Flexbox Froggy</a></li>
<li><a href="http://cssgridgarden.com">Grid Garden</a></li>
<li><a href="https://geddski.teachable.com/p/flexbox-zombies">Flexbox Zombies</a></li>
<li><a href="https://geddski.teachable.com/p/gridcritters">Grid Critters</a></li>
<li><a href="https://checkio.org">CheckiO</a></li>
<li><a href="https://flukeout.github.io">CSS Diner</a></li>
<li><a href="http://flukeout.github.io">Flukeout (CSS exercises)</a></li>
</ul>
</section>
<section id="apps">
<h1>Apps</h1>
<ul>
<li>Encode <a href="https://itunes.apple.com/us/app/encode-learn-to-code/id1198851756?mt=8" title="IOS"><i class="fab fa-apple"></i></a> <a href="https://play.google.com/store/apps/details?id=com.upskew.encode" title="Android"><i class="fab fa-android"></i></a></li>
<li>Udacity <a href="https://itunes.apple.com/us/app/udacity/id819700933?mt=8" title="IOS"><i class="fab fa-apple"></i></a> <a href="https://play.google.com/store/apps/details?id=com.udacity.android" title="Android"><i class="fab fa-android"></i></a></li>
<li>Khan Academy <a href="https://itunes.apple.com/am/app/khan-academy/id469863705?mt=8" title="IOS"><i class="fab fa-apple"></i></a> <a href="https://play.google.com/store/apps/details?id=org.khanacademy.android" title="Android"><i class="fab fa-android"></i></a></li>
<li>Code Hub <a href="https://play.google.com/store/apps/details?id=trycodehub.com" title="Android"><i class="fab fa-android"></i></a></li>
<li>SoloLearn <a href="https://itunes.apple.com/us/app/sololearn-learn-to-code/id1210079064?mt=8" title="IOS"><i class="fab fa-apple"></i></a> <a href="https://play.google.com/store/apps/details?id=com.sololearn" title="Android"><i class="fab fa-android"></i></a></li>
<li>Programming Hub <a href="https://play.google.com/store/apps/details?id=com.freeit.java" title="Android"><i class="fab fa-android"></i></a></li>
<li>Enki <a href="https://itunes.apple.com/us/app/enki-improve-programming-skills-learn-to-code/id993753145?mt=8" title="IOS"><i class="fab fa-apple"></i></a> <a href="https://play.google.com/store/apps/details?id=com.enki.insights" title="Android"><i class="fab fa-android"></i></a></li>
</ul>
</section>
<section id="design">
<h1>Design</h1>
<ul>
<li><a href="https://www.designspiration.net">Design Inspiration</a></li>
<li><a href="https://www.behance.net">Behance</a></li>
<li><a href="http://theinspirationgrid.com">The Inspiration Grid</a></li>
<li><a href="https://www.siteinspire.com">Site Inspire</a></li>
<li><a href="https://dribbble.com">Dribbble</a></li>
<li><a href="https://www.awwwards.com">Awwards</a></li>
<li><a href="https://www.fastcodesign.com">Co Design</a></li>
<li><a href="http://inspiredesign.me/">Inspire Design</a></li>
<li><a href="http://designify.me/">Designify</a></li>
<li><a href="http://www.calltoidea.com">Call To Idea</a></li>
<li><a href="https://onepagelove.com">One Page Love</a></li>
<li><a href="https://land-book.com">Land Book</a></li>
</ul>
</section>
<section id="uxdesign">
<h1>UX/UI Design</h1>
<ul>
<li><a href="https://tympanus.net/codrops/">Codrops</a></li>
<li><a href="https://uxdesign.cc">UX Design</a></li>
<li><a href="https://codemyui.com/">Code My UI</a></li>
<li><a href="http://goodui.org">Good UI</a></li>
</ul>
</section>
<section id="women">
<h1>Women and Girls</h1>
<ul>
<li><a href="https://www.womenwhocode.com">Women Who Code</a></li>
<li><a href="http://www.mothercoders.org">Mother Coders</a></li>
<li><a href="https://www.girldevelopit.com">Girl Develop It</a></li>
<li><a href="https://hackbrightacademy.com">Hackbright Academy</a></li>
<li><a href="http://www.pyladies.com">Pyladies</a></li>
<li><a href="http://railsgirls.com">Rails Girls</a></li>
<li><a href="https://www.hiretechladies.com">Hire Tech Ladies</a></li>
<li><a href="https://girlswhocode.com">Girls Who Code</a></li>
<li><a href="http://astia.org">Astia</a></li>
<li><a href="https://adainitiative.org">Ada Initiative</a></li>
<li><a href="https://anitab.org">Anitab.org</a></li>
<li><a href="http://girlsintech.org">Girls in Tech</a></li>
<li><a href="http://www.webgrrls.com">Webgrrls</a></li>
<li><a href="https://www.women2.com">Women2</a></li>
<li><a href="https://womeninwireless.org">Women in Wireless</a></li>
<li><a href="https://www.womenwhotech.com">Women Who Tech</a></li>
<li><a href="https://www.witi.com">Witi</a></li>
<li><a href="http://www.womenintechnology.org">Women in Technology</a></li>
<li><a href="http://shescoding.org">She's coding</a></li>
<li><a href="https://www.womentechmakers.com">Woman Tech Makers</a></li>
<li><a href="https://djangogirls.org">Django Girls</a></li>
<li><a href="https://code.likeagirl.io">Code like a girl</a></li>
<li><a href="https://www.madewithcode.com">Made with code</a></li>
<li><a href="https://codelikeagirl.org">Codelikeagirl</a></li>
<li><a href="https://www.coding-girls.com">Coding Girls</a></li>
<li><a href="http://girlsteachinggirlstocode.org">Girls teaching girls to code</a></li>
</ul>
</section>
<section id="bookmarks">
<h1>Bookmarks</h1>
<ul>
<li><a href="https://github.com/dypsilon/frontend-dev-bookmarks">Frontend Dev Bookmarks</a></li>
<li><a href="https://github.com/tayllan/awesome-algorithms">Awesome Algorithms</a></li>
<li><a href="https://github.com/dreamtocode/awesome-resources">Awesome Resources</a></li>
<li><a href="https://enboard.co/frontend/">Front-end Resources</a></li>
<li><a href="https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer/">Become a Full Stack Web Developer</a></li>
<li><a href="https://github.com/heyalexej/awesome-images">Awesome pictures</a></li>
<li><a href="https://www.prettyawesomelists.com">Pretty Awesome Lists</a></li>
</ul>
</section>
<section id="youtube">
<h1>Youtube Channels</h1>
<ul>
<li><a href="https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg">The Net Ninja</a></li>
<li><a href="https://www.youtube.com/user/derekbanas">Derek Banas</a></li>
<li><a href="https://www.youtube.com/user/pizzapokerguy87">CodingTutorials360</a></li>
<li><a href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA">Traversy Media</a></li>
<li><a href="https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ">Coding Tech</a></li>
<li><a href="https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw">LearnCode.academy</a></li>
<li><a href="https://www.youtube.com/channel/UChCDYcBCrb8tuPAO6e0P-Hw">Le Wagon</a></li>
<li><a href="https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q">Fun Fun Function</a></li>
<li><a href="https://www.youtube.com/channel/UCYt1sfh5464XaDBH0oH_o7Q">JavaBrains</a></li>
</ul>
</section>
<section id="reddit">
<h1>Reddit</h1>
<ul>
<li><a href="https://www.reddit.com/r/HTML/">HTML</a></li>
<li><a href="https://www.reddit.com/r/css/">CSS</a></li>
<li><a href="https://www.reddit.com/r/javascript/">Javascript</a></li>
<li><a href="https://www.reddit.com/r/webdev/">Web development</a></li>
<li><a href="https://www.reddit.com/r/web_design/">Web design</a></li>
<li><a href="https://www.reddit.com/r/jquery/">JQuery</a></li>
<li><a href="https://www.reddit.com/r/learnprogramming/">Learn Programming</a></li>
</ul>
</section>
<section id="paths">
<h1>Learning paths</h1>
<ul>
<li><a href="https://github.com/kamranahmedse/developer-roadmap">Developer Roadmap</a></li>
<li><a href="https://coggle.it/diagram/Vz9LvW8byvN0I38x">Coggle Diagram</a></li>
<li><a href="https://github.com/P1xt/p1xt-guides">Guides in a variety of domains (including web development)</a></li>
</ul>
</section>
<section id="miscellaneous">
<h1>Miscellaneous</h1>
<ul>
<li><a href="https://stackoverflow.com">Stackoverflow</a></li>
<li><a href="https://github.com">GitHub</a></li>
<li><a href="http://devdocs.io">Devdocs API documentation</a></li>
<li><a href="https://codepen.io">CodePen</a></li>
<li><a href="https://docs.emmet.io/cheat-sheet/">Emmet CheatSheet</a></li>
<li><a href="http://makerbook.net">Makerbook</a></li>
<li><a href="https://www.10bestdesign.com/dirtymarkup/">Dirty Markup</a></li>
<li><a href="https://github.com/sorrycc/awesome-javascript">Collection of JavaScript libraries, resources and shiny things</a></li>
<li><a href="https://codeburst.io">Codeburst</a></li>
<li><a href="http://www.javascripting.com">JavaScripting</a></li>
<li><a href="https://nodeschool.io">Nodeschool</a></li>
<li><a href="https://speckyboy.com">Speckyboy</a></li>
<li><a href="https://www.testdome.com">Testdome</a></li>
<li><a href="https://www.interviewbit.com">InterviewBit</a></li>
<li><a href="http://carlcheo.com/compsci">Computer Science in laymens terms </a> </li>
<li><a href="http://www.g5code.com/">g5code</a></li>
<li><a href="http://thecodeplayer.com">The Code Player</a></li>
<li><a href="http://simplecss.eu">Simple CSS</a></li>
</ul>
</section>
<footer id="footer">
<a href="#top" title="Back to top" id="topIcon" class="contextIcon"><i class="fas fa-arrow-up icon"></i></a>
<p>Last update: March 15th, 2018.</p>
<div class="credits">
<p>Developed by:<a href="https://github.com/BycorSanchez" title="Bycor Github">Bycor Sánchez</a></p>
<p>Design inspired by:<a href="https://html5up.net" title="HTML5UP">HTML5UP</a></p>
</div>
</footer>
</div>
<div id="menu-icon" class="contextIcon">
<a href="#menu"><i class="fas fa-bars icon"></i></a>
</div>
</body>
</html>