-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
868 lines (852 loc) · 33.8 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
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
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
<!DOCTYPE html>
<html>
<head>
<title>CodeSource</title>
<!--Boostrap Link for online connection only; last past is before </body>-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--END Boostrap Link for online connection only-->
<!--CSS styles-->
<link rel="stylesheet" type="text/css" href="codesource.css" />
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" id="my-navbar">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://placehold.it/50x20">
</a>
</div>
<!--end nav bar header-->
<!-- Collect the nav links, forms, and other content for toggling -->
<!--nav bar and toggle links-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<!--id links to button in navbar header-->
<a href="" class="btn btn-default navbar-btn btn navbar-right">Reload</a>
<ul class="nav navbar-nav">
<li><a href="#top">Top</a></li>
<!--href links are anchors to the page-->
<li><a href="#feDesign">Front End</a></li>
<li><a href="#wordpressWrap">Wordpress Dev</a></li>
<li><a href="#emailWrap">Email</a></li>
<li><a href="#programs">Programs</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#javascript">Javascript Libraries</a></li>
<li><a href="#git">Git/Github</a></li>
<li><a href="#design">Design</a></li>
<li><a href="#seo">SEO</a></li>
<li role="separator" class="divider"></li>
<li><a href="#fun">Fun</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!--end nav bar links-->
</div>
<!--navbar collapse-->
</div>
<!--end container-->
</nav>
<!--end nav-->
<div class="jumbotron" id="top">
<!--jumbotron-->
<div class="container text-center">
<h1>Welcome to CodeSource!</h1>
<p>"This website is used to save a few useful links and resources for front/back end development. Updates and reasons for choosing these links belong to Philosophy and Design. But feel free to fork this project in GitHub."</p>
<p><a class="btn btn-primary btn-lg" href="http://philosophyanddesign.com" role="button">Philosophy and Design</a></p>
<div class="btn-group">
<a href="https://github.com/ar-to/CodeSource" class="btn btn-lg btn-warning">GitHub</a>
<a href="https://ehspook.com" class="btn btn-lg btn-default">EhSpook</a>
<a href="http://codepen.io/Ar-to/" class="btn btn-lg btn-warning">CodePen</a>
</div>
<!--end btn-group-->
</div>
<!--end container-->
</div>
<!--end jumbotron-->
<div class="container">
<!--Explore-->
<section>
<div class="page-header text-center">
<h2>Learn &Explore<small> Useful websites for HTML/CSS/PHP/JAVASCRIPT</small></h2>
<p>Using a table tag to organize data.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>
<a href=" http://www.w3schools.com/tags/default.asp" target="_blank">w3schools</a>
<a href="http://html.net" target="_blank">HTML.net</a>
<a href="https://www.youtube.com/user/codingmath" target="_blank">Coding Math</a>
<a href="https://scotch.io" target="_blank">Scotch.io</a>
<a href="https://egghead.io" target="_blank">Egghead.io</a>
<a href="https://paulund.co.uk/c/tutorials" target="_blank">Paulund Tutorials</a>
<a href="https://www.thesitewizard.com" target="_blank">The Site Wizard</a>
</td>
<td>
<p>Contains reference list of HTML/CSS/Javascript/SQL/PHP.Contains useful info with basic and short explanations.Short lessons include html5,css,php and javascript.<br> Useful videos on how to use math for coding. Scotch.io has tutorials on AngularJS,
NodeJS, and other libraries. EggHead.io has courses for Redux,NodeJS, Elm and React.<br> The site wizard has many useful tutorials on various topics that are simple and quick to use.</p>
</td>
</tr>
<tr>
<td><a href="http://tutorialspoint.com" target="_blank">Tutorial Point </a>
<a href="http://htmldog.com" target="_blank">HTML Dog</a>
<a href="http://www.freewebmasterhelp.com" target="_blank">FreeWebMasterHelp</a>
<a href="http://alijafarian.com" target="_blank">Ali Jafarian</a>
<a href="http://www.codingcage.com" target="_blank">CodingCage</a>
</td>
<td>
<p>Contains beginner tutorials and explanations for many programing languages with built-in compiler for viewing examples.<br> Tutorial Point also has online <a href="http://tutorialspoint.com/codingground.htm" target="_blank">IDE (compilers) </a>for
many languanges. HTML Dog has good basic reference and tutorials. FreeWebMasterHelp has useful tutorials and resources. Ali Jafarian has useful tutorials.<br> CodingCage has tutorials on PHP, mySQL, JQuery, AJAX, JSON & Bootstrap.</p>
</td>
</tr>
<tr>
<td><a href="https://atom.io" target="_blank">Atom</a>
<a href="#" target="_blank">Brackets</a></td>
<td>
<p>Text Editors.</p>
</td>
</tr>
<tr>
<td><a href="http://awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html" targer="_blank">Frameworks (CSS)</a>
<a href="http://getbootstrap.com" target="_blank">Bootstrap</a>
</td>
<td>
<p>List of frameworks from simple to complete.</p>
</td>
</tr>
<tr>
<td><a href="http://lipsum.com" targer="_blank">Lorem ipsum</a></td>
<td>
<p>Place holder text</p>
</td>
</tr>
<tr>
<td><a href="http://bg.siteorigin.com" target="_blank">Bg Generator</a></td>
<td>
<p>Background generator with various patterns, blend modes, noise, intensite and color choices. Downloads are at about 400x400px</p>
</td>
</tr>
<tr>
<td><a href="https://modernizr.com" target="_blank">Modernizr</a></td>
<td>
<p>Help "detect" changes in browsers to best present HTML/CSS/Javascript.Download available.</p>
</td>
</tr>
<tr>
<td><a href="https://thimble.mozilla.org/en-US/" target="_blank">Thimble</a>
<a href="http://jsbin.com/?html,output" target="_blank">JSBin</a>
<a href="http://www.bootply.com" target="_blank">Bootply</a>
</td>
<td>Browser code editors.</td>
</tr>
<tr>
<td><a href="http://www.jsdelivr.com" target="_blank">JSDelivr</a></td>
<td>
<p>JSDelivr is a free CDN!.</p>
</td>
</tr>
<tr>
<td><a href="https://cdnjs.com/about" target="_blank">Cdnjs</a></td>
<td>
<p>Cdnjs has many CDN files.</p>
</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container" id="feDesign">
<!--Front End-->
<section>
<div class="page-header text-center">
<h2>Front End<small> Useful websites for Front End Designing</small></h2>
<p>Color Palletes, Grids, Javascript libraries, Fonts, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>
<a href="http://www.webascender.com/Blog/ID/574/10-Essential-Third-Party-Services-for-All-Website#.WCvqG1dShU0" target="_blank">Third Party Services</a>
<a href="https://github.com/lcdsantos/frontend-tools" target="_blank">List of Front END Tools</a>
</td>
<td>
<p>Third party services can help UX/UI or customer satisfaction.</p>
</td>
</tr>
<tr>
<td>
<a href="http://iconhandbook.co.uk/reference/" target="_blank">Icon Handbook</a>
<a href="http://convertico.com" target="_blank">Convertico</a>
<a href="https://icoconvert.com" target="_blank">IcoConvert</a>
<a href="http://iconmonstr.com" target="_blank">IconMonster</a>
<a href="http://glyphicons.com" target="_blank">Glyphicons</a>
<a href="https://unsplash.com" target="_blank">UnSplash</a>
<a href="http://line25.com/articles/12-free-repeating-pixel-patterns-for-photoshop" target="_blank">Pixel Patterns</a>
<a href="http://www.svgeneration.com" target="_blank">SVGeneration</a>
<a href="http://www.webhostinghub.com/glyphs/" target="_blank">WebHostingHub</a>
</td>
<td>
<p>Free Icons.Create .ico files for favicons.<br> Glyphicons has a basic free pack for social icons and paid packs for more formats and icons.<br> UnPlash are free high res images. Useful pixel pattern pack. SVGeneration creates svg on browser.<br> WebHostingHub glyphs can be added locally to apps or into html.</p>
</td>
</tr>
<tr>
<td><a href="http://960.gs" target="_blank">960 grid system</a>
<a href="http://unsemantic.com" target="_blank">Unsematic fluid grid system</a></td>
<td>
<p>Grid system for 960px width. Comes with PSD files to use as templates.<br> The responsive version to the 960 grid system using percentages.</p>
</td>
</tr>
<tr>
<td><a href="http://www.w3schools.com/graphics/canvas_reference.asp" target="_blank">Canvas @w3schools.com</a></td>
<td>
<p>Reference for Canvas markup element.</p>
</td>
</tr>
<tr>
<td><a href="https://fonts.google.com" target="_blank">Google Fonts</a>
<a href="https://www.google.com/webdesigner" target="_blank">Google Web Designer</a>
<a href="https://mapjam.com" target="_blank">Mapjam</a>
<a href="https://www.fontsquirrel.com" target="_blank">FontSquirrel</a>
</td>
<td>
<p>Fonts are available for free download to use with Adobe, and HTML/CSS embed codes are provided as well.<br> Google Web Designer is useful for creating web ads and animations. MapJam allows sharing of maps.<br> FontSquirrel has free fonts (TFF
file) for download.</p>
</td>
</tr>
<tr>
<td><a href="http://meyerweb.com/eric/tools/css/reset/" target="_blank">CSS reset(Meyer)</a>
<a href="http://html5doctor.com/html-5-reset-stylesheet/" target="_blank">CSS reset(HTML5 Doctor)</a>
<a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">Clearfix Hack</a>
<a href="http://www.w3schools.com/cssreF/css_selectors.asp" target="_blank">CSS3 Selectors</a>
<a href="https://css-tricks.com/examples/ShapesOfCSS/" target="_blank">Shapes in CSS</a>
</td>
<td>
<p>Browsers can contain default CSS that can interfere with custom CSS. CSS contain in this webpage resets CSS.<br><br> Clearfix Hack has to do with space between elements when given float style; also check
<a href="https://css-tricks.com/snippets/css/clear-fix/" target="_blank">CSS Tricks</a>. Another example of when this is needed is when height of a container div is not adjusting to child elements; one way is to add overflow:hidden to force this
but if the this attribute is needed the clearfix is helpful too; read
<a href="http://stackoverflow.com/questions/7817269/css-container-div-not-getting-height" target="_blank">a forum</a>. CSS selectors help simplify styles.</p>
</td>
</tr>
<tr>
<td>
<a href="http://www.colourlovers.com" target="_blank">Color Lovers</a>
<a href="https://color.adobe.com" target="_blank">Adobe Color CC</a>
<a href="http://www.paletton.com" target="_blank">Paletton</a>
<a href="https://brandcolors.net" target="_blank">Brand Colors</a>
</td>
<td>
<p>Color lovers has schemes for different subjects including websites. Adobe color cc has schemes based on the color wheel in HEX/RGB. Paletton is great for testing palette ideas. Brand Colors helps with inspiration from world famous brand colors.</p>
</td>
</tr>
<tr>
<td><a href="http://slidesjs.com" target="_blank">SlidesJS</a>
<a href="http://jquery.com" target="_blank">JQuery</a>
<a href="http://masonry.desandro.com" target="_blank">Masonry</a>
<a href="http://imakewebthings.com/waypoints/" target="_blank">Waypoints</a></td>
<td>
<p>Websites used for JQuery. Masonry is a Javascript grid layout library. Waypoints helps control scroll effects.</p>
</td>
</tr>
<tr>
<td><a href="https://developers.facebook.com/docs/plugins/like-button" target="_blank">Facebook plugins</a>
<a href="#" target="_blank">title</a>
</td>
<td>
<p>Social media buttons and plugins.</p>
</td>
</tr>
<tr>
<td><a href="http://tympanus.net/codrops/" target="_blank">Codrops</a></td>
<td>
<p>Codrops has icons, animated menus and sliders, etc using various tools, including javascript.</p>
</td>
</tr>
<tr>
<td><a href="http://www.cssfontstack.com" target="_blank">CSSFontstack</a>
<a href="http://fontawesome.io/get-started/" target="_blank">Font Awesome</a>
<a href="https://docs.joeworkman.net/rapidweaver/stacks/foundation/content/font-awesome" target="_blank">FontAwesome w/Foundation</a>
<a href="http://www.fontpair.co" target="_blank">Font Pair</a>
<a href="http://fontforge.github.io/en-US/" target="_blank">Font Forge</a>
</td>
<td>
<p>Web Safe Fonts reference. Font Awesome can be linked as a library inside HTML. Font Awesome with Foundation can be used to link social icons. Font Pair helps see how fonts work together.<br> Font Forge is font editor.</p>
</td>
</tr>
<tr>
<td><a href="http://www.webpagefx.com/web-design/hex-to-rgb/" target="_blank">REX-RGB</a>
<a href="http://placehold.it" target="_blank">Placehold.it</a></td>
<td>
<p>REX-RGB Convertions. Placehold.it can be used to add elements via links.</p>
</td>
</tr>
<tr>
<td><a href="https://github.com/google/code-prettify" target="_blank">Prettify</a>
<a href="http://www.cssarrowplease.com" target="_blank">CSS Arrow Box</a></td>
<td>
<p>GitHub sources. Prettify helps style code snippets inside html. The Arrow box is useful for flyouts and graphic callout boxes.</p>
</td>
</tr>
<tr>
<td>
<p>Preformating</p>
</td>
<td><a href="http://www.freeformatter.com/html-escape.html" target="_blank">FreeFormatter</a></td>
<td>
<p>Help format files, docs, syntax (e.g. prism.js needs markup to be escaped).</p>
</td>
</tr>
<tr>
<td>
<p>Images</p>
</td>
<td><a href="http://needsmorejpeg.com" target="_blank">NeedsMoreJpeg</a>
<a href="http://terrymun.github.io/Fluidbox/demo/index.html#content">FluidBox</a></td>
<td>
<p>Description</p>
</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<!--Web Dev Setup-->
<div class="container" id="wordpressWrap">
<section>
<div class="page-header text-center" id="feedback">
<h2>Dev Tools<small> Useful websites for Web Development</small></h2>
<p>Sass, Gulp, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>
<p>HTML preprocessors</p>
</td>
<td><a href="http://sass-lang.com" target="_blank">PugJS</a>
<a href="http://html2jade.org" target="_blank">Html2Pug</a>
</td>
<td>
<p>Preprocessor</p>
</td>
</tr>
<tr>
<td>
<p>Compile multiple css sheets with Saas.</p>
</td>
<td><a href="http://sass-lang.com" target="_blank">Saas</a></td>
<td>
<p>Compile multiple css sheets with Saas.</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">Javascript Tools</a></td>
<td>
<p>In-Browser editing tool for wordpress and Divi from Elegant Themes.</p>
</td>
</tr>
<tr>
<td><a href="https://en.support.wordpress.com/markdown-quick-reference/" target="_blank">Markup-Ref</a></td>
<td>
<p>Markup references.</p>
</td>
</tr>
</table>
</div>
<!--end col-->
</div>
<!--end row-->
</section>
</div>
<!--end container-->
<div class="container" id="wordpressWrap">
<section>
<div class="page-header text-center" id="feedback">
<h2>Wordpress<small> Useful websites for Wordpress Development</small></h2>
<p>CMS, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>Useful Info</td>
<td><a href="http://www.csshero.org/themes/divi/" target="_blank">CSS Hero</a>
<a href="http://mockingbird.marketing/create-html-sitemap/" target="_blank">Mockingbird-WP-sitemap</a>
<a href="#" target="_blank">title</a>
</td>
<td>
<p>In-Browser editing tool for wordpress and Divi from Elegant Themes.</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">DiviBooster</a>
<a href="#" target="_blank">Elegant Themes</a>
</td>
<td>
<p>EG provides themes and plugins for wordpress.<br> DiviBooster is a plugin the helps customize Divi Theme further. A few tricks include: <a href="https://divibooster.com/change-divi-image-gallery-grid-thumbnail-sizes/" target="_blank">Gallery Thumbnail sizes</a>.<br> When using Divi theme it is important to change the <a href="https://github.com/DD-UX/DDivi-Child-Theme/blob/master/footer.php" target="_blank">Divi Footer</a></p>
</td>
</tr>
<tr>
<td><a href="https://github.com/DD-UX/DDivi-Child-Theme/blob/master/footer.php" target="_blank">Divi Footer</a></td>
<td>
<p>Description</p>
</td>
</tr>
<tr>
<td>WP Hosting</td>
<td><a href="https://kinsta.com/" target="_blank">Kinsta</a></td>
<td>
<p>Kinsta is powered by Google and starts @ $100/mo for Business.</p>
</td>
</tr>
<tr>
<td>Multisite</td>
<td><a href="http://www.wpbeginner.com/glossary/multisite/" target="_blank">WPBeginner-What is WPMS</a>
<a href="#" target="_blank">title</a>
</td>
<td>
<p>Useful info on WP Multisite.</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container" id="emailWrap">
<section>
<div class="page-header text-center" id="feedback">
<h2>Email<small>
Useful websites for Email Management</small></h2>
<p>Setting up POP/SMTP, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td><a href="https://www.siteground.com/kb/how-to-configure-google-mail-with-your-siteground-domain/" target="_blank">Gmail Webmail Setup</a></td>
<td>
<p>Gmail Webmail Setup explains how to stablish a server connection between google and the hosting server via POP (incoming) and SMTP (outgoing).</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td><a href="#" target="_blank">title</a>
<p>Description1.<br> Description2 <a href="#" target="_blank">Title</a>.<br> Description3
<a href="#" target="_blank">Title</a></p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container" id="programs">
<section>
<div class="page-header text-center" id="feedback">
<h2>Programs<small> Useful websites for Adobe, Microsoft, etc.</small></h2>
<p>Tutorials, cloud, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td><a href="https://helpx.adobe.com/muse/how-to/create-responsive-website.html">Muse Responsive</a></td>
<td>
<p>These link are useful to better understand and use adobe programs.</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td><a href="#" target="_blank">title</a>
<p>Description1.<br> Description2 <a href="#" target="_blank">Title</a>.<br> Description3
<a href="#" target="_blank">Title</a></p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
<tr>
<td><a href="#" target="_blank">title</a></td>
<td>
<p>Description</p>
</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container" id="javascript">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="feedback">
<h2>Javascript Libraries<small> Useful websites for JAVASCRIPT</small></h2>
<p>Libraries, tutorials, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>Javascript Resources</td>
<td><a href="http://js-tutorial.com" target="_blank">JS-Tutorial</a>
</td>
<td>
<p>JS-Tutorial has articles and verious plugins.</p>
</td>
</tr>
<tr>
<td>Canvas JS Libraries</td>
<td><a href="http://paperjs.org" target="_blank">PaperJS</a>
<a href="http://fabricjs.com" target="_blank">FabricJS</a>
<a href="http://createjs.com" target="_blank">CreateJS</a>
<a href="https://two.js.org" target="_blank">Two.JS</a>
<a href="http://blocksjs.com" target="_blank">BlockJS</a>
<a href="http://momentjs.com" target="_blank">MomentJS</a></td>
<td>
<p>PaperJS creates animations. FabricJS is for canvas object creation. CreateJS for more advance work. Two.JS is an alt.BlockJS is for game dev. MomentJS modifies dates.</p>
</td>
</tr>
<tr>
<td>Canvas Tutorials</td>
<td><a href="http://williammalone.com" target="_blank">William Malone</a></td>
<td>
<p>William Malone has tutorials on game dev.</p>
</td>
</tr>
<tr>
<td>Javascript Libraries</td>
<td><a href="http://dynamicsjs.com" target="_blank">DynamicJS</a>
<a href="http://requirejs.org" target="_blank">RequireJS</a>
<a href="https://d3js.org" target="_blank">3DJS</a>
</td>
<td>
<p>DynamicJS is for physics effects. RequireJS is a JavaScript file and module loader.<br> 3DJS is a JavaScript library for manipulating documents based on data.</p>
</td>
</tr>
<tr>
<td>Javascript Plugins</td>
<td><a href="http://prinzhorn.github.io/skrollr/" target="_blank">Skrollr</a>
<a href="http://ignitersworld.com/lab/scrollmenu/" target="_blank">ScrollMenuJS</a>
<a href="https://tympanus.net/codrops/category/blueprints/" target="_blank">Blueprints</a>
</td>
<td>
<p>Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop and No jQuery.<br> ScrollMenu is a nav bar with scroll effect.<br> The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts
with minimal style.<br>
</p>
</td>
</tr>
<tr>
<td>JQuery</td>
<td><a href="https://www.thinkful.com/learn/intro-to-jquery/?utm_source=tf_gh_pages_guide&utm_medium=tf_relevant_guide&utm_campaign=tf_guides" target="_blank">Thinkful Tutorial</a>
<a href="http://joaopereirawd.github.io/animatedModal.js/" target="_blank">AnimatedModalJS</a>
</td>
<td>
<p>Tutorials and resources.<br> AnimatedModalJS is a jQuery plugin to create a fullscreen modal with CSS3 transitions. See <a href="http://js-tutorial.com/animatedmodaljs-1467" target="_blank">ScrollMenuJS</a> for more demos that show usage as a
modal for a site not just image.<br>
</p>
</td>
</tr>
<tr>
<td><a href="http://bittersweetryan.github.io/jasmine-presentation/#slide-0" target="_blank">Jasmine Unit Testing</a></td>
<td>
<p>Jasmine is used to write javascript Unit Tests as Behavior Driven Dev.</p>
</td>
</tr>
<tr>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors" target="_blank">Javascript Error References</a></td>
<td>
<p>Error references.</p>
</td>
</tr>
<tr>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript" target="_blank">Mozilla Tutorials</a></td>
<td>Tutorials</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container" id="git">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="feedback">
<h2>Git & GitHub<small> Useful websites for markdown, repositories, etc.</small></h2>
<p>Using a table tag to organize data.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<table border="">
<tr>
<td>Git Reference</td>
<td><a href="http://gitref.org/" target="_blank">GitRef.org</a></td>
<td>GitRef.com is made by github.</td>
</tr>
<tr>
<td>Marckdown</td>
<td><a href="https://en.support.wordpress.com/markdown-quick-reference/" target="_blank">Wp.com</a>
<a href="https://guides.github.com/features/mastering-markdown/" target="_blank">GitHub</a>
</td>
<td>wp.com is Wordpress.com ref for markdown syntax. GitHub ref.</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<!--Container master-->
<div class="container" id="design">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="design">
<h2>Design<small> Useful websites for Design</small></h2>
<p>Resources for design & web.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<!--table goes here-->
<table border="">
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Image Dimensions</td>
<td><a href="https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/" target="_blank">Cheat Sheet</a></td>
<td></td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<!--END Container master-->
<div class="container" id="seo">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="seo">
<h2>Google Tools & SEO <small> Useful websites for SEO</small></h2>
<p>Tutorials, Tips, Tricks.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<!--table goes here-->
<table border="">
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Useful Info</td>
<td><a href="https://mangools.com/blog/#.WHkuTldShU0" target="_blank">Mongools blog</a>
<a href="http://mockingbird.marketing/site-map/" target="_blank">Mockingbird-SEO</a>
<a href="http://mockingbird.marketing/where-is-my-traffic/" target="_blank">Mockingbird-Creating Traffic</a>
<a href="http://mockingbird.marketing/site-speed-matters/" target="_blank">Mockingbird-Site Speed</a>
<a href="http://mockingbird.marketing/holy-grail-seo-tools/" target="_blank">Mockingbird-Google Console</a>
</td>
<td>Blogs.</td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Google Dev Tools</td>
<td><a href="https://console.developers.google.com/" target="_blank">Google API</a>
<a href="https://www.google.com/webmasters/tools" target="_blank">Google Console</a>
<a href="https://www.google.com/analytics/#" target="_blank">Google Analytics</a>
<a href="https://www.google.com/intl/bn/insidesearch/features/search/knowledge.html#" target="_blank">Google Knowledge Graph</a>
</td>
<td></td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Keyword Search</td>
<td><a href="https://adwords.google.com/home/tools/keyword-planner/" target="_blank">Google Keyword Planner</a></td>
<td></td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Site Tests</td>
<td><a href="https://www.webpagetest.org" target="_blank">WebPage Test</a>
<a href="https://whois.icann.org/en" target="_blank">WHOis ICANN</a>
<a href="http://userexp.io" target="_blank">UserExp.io</a>
</td>
<td>Speed tests, domain info look up, check site stats.</td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Products & Services</td>
<td><a href="https://app.kwfinder.com" target="_blank">KwFinder</a>
<a href="https://adwords.google.com/home/#?modal_active=none" target="_blank">Google AdWorks</a>
<a href="http://www.bing.com/toolbox/webmaster" target="_blank">Bing Webmaster</a>
</td>
<td>All in one apps or services. KwFinder is free for 3 searches per day.</td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Title</td>
<td><a href="#" target="_blank">Link</a></td>
<td></td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<!--END Container master-->
<div class="container" id="fun">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="feedback">
<h2>Fun & Entertainment<small> Useful resources to pass the time.</small></h2>
<p>Tricks, Games, Exercises, Tech, etc.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<!--table goes here-->
<table border="">
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Open Source</td>
<td><a href="http://codeology.braintreepayments.com/ar-to" target="_blank">Codeology</a>
</td>
<td>Codeology is a visual tool for GitHub projects.</td>
</tr>
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Category</td>
<td><a href="#" target="_blank">Link</a>
</td>
<td>Descriptions</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<div class="container">
<!--Main container for anchor:copy and paste to create new-->
<section>
<div class="page-header text-center" id="feedback">
<h2>Learn &Explore<small> Useful websites for HTML/CSS/PHP/JAVASCRIPT</small></h2>
<p>Using a table tag to organize data.</p>
</div>
<!--end page-header-->
<div class="row">
<div class="col-md-12">
<!--table goes here-->
<table border="">
<tr>
<!--tr row has column title, column links, column descriptions-->
<td>Category</td>
<td><a href="#" target="_blank">Link</a>
</td>
<td>Descriptions</td>
</tr>
</table>
</div>
<!--END column-->
</div>
<!--END row-->
</section>
</div>
<!--END container-->
<!--END Container master-->
<!--compressed link to JQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--small script for popup-->
<script type="text/javascript">
/*alert statement creates a popup when site is loaded*/
alert('Usefule Websites for Front/Back end developement!');
</script>
<!--END small script for popup-->
<!-- Part of Boostrap:Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--END of Boostrap-->
</body>
</html>