1
+ < html >
2
+
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="description " content ="Generate random colors ">
6
+ < meta name ="keywords " content ="HTML, CSS, JavaScript, Colors ">
7
+ < meta name ="author " content ="Jee Vang, Ph.D. ">
8
+ < meta name ="organization " content ="One-Off Coder ">
9
+ < title > Web Programming Demos</ title >
10
+ < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css "
11
+ integrity ="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk " crossorigin ="anonymous ">
12
+ < style >
13
+ * {
14
+ font-family : monospace;
15
+ }
16
+
17
+ body {
18
+ margin : 10px ;
19
+ }
20
+
21
+ .center {
22
+ text-align : center;
23
+ }
24
+
25
+ .color-table {
26
+ margin : auto;
27
+ width : calc (100vw - 17px );
28
+ }
29
+ </ style >
30
+ </ head >
31
+
32
+ < body onload ="init() ">
33
+ < div class ="jumbotron jumbotron-fluid ">
34
+ < div class ="container ">
35
+ < h1 class ="display-4 "> Web Programming Demos</ h1 >
36
+ < h4 >
37
+ < a href ="https://www.oneoffcoder.com " target ="_blank ">
38
+ One-Off Coder
39
+ </ a >
40
+ </ h4 >
41
+ < p >
42
+ < b > < i > "The best way to predict the future is to create it," President Abraham Lincoln.</ i > </ b >
43
+ </ p >
44
+ < hr class ="my-4 ">
45
+ < p >
46
+ < a href ="https://github.com/oneoffcoder/lightning-projects/tree/master/html/ " target ="_blank ">
47
+ Source Code on GitHub
48
+ </ a >
49
+ </ p >
50
+ < img src ="logo.png " />
51
+ </ div >
52
+ </ div >
53
+
54
+ < div class ="alert alert-primary " role ="alert ">
55
+ The following are fun coding projects to learn. They test your skills from begginer, intermediate to
56
+ advanced. Some of the projects involve artificial intelligence and access to your multimedia devices
57
+ (e.g. web camera and speakers).
58
+ </ div >
59
+
60
+ < div >
61
+ < ul class ="list-group ">
62
+ < li class ="list-group-item ">
63
+ < a href ="checkers "> Checkers</ a > : Learn how to code checkers with HTML 5's drag and drop features.
64
+ </ li >
65
+ < li class ="list-group-item ">
66
+ < a href ="colors "> Colors</ a > : Have fun making colors out of tables.
67
+ </ li >
68
+ < li class ="list-group-item ">
69
+ < a href ="game-of-life "> Game of Life</ a > : Create artificial life according to Conway's Game of Life.
70
+ </ li >
71
+ < li class ="list-group-item ">
72
+ < a href ="guessing-game "> Guessing Game</ a > : Test your guessing skills by guessing numbers generated by
73
+ the computer.
74
+ </ li >
75
+ < li class ="list-group-item ">
76
+ < a href ="morse-code "> Morse Code</ a > : Master sound manipulation with web technologies and learn about
77
+ morse code.
78
+ </ li >
79
+ < li class ="list-group-item ">
80
+ < a href ="rps-game "> Rock, Paper, Scissor</ a > : Code the classic Rock, Paper, Scissor game.
81
+ </ li >
82
+ < li class ="list-group-item ">
83
+ < a href ="rps++ "> Rock, Paper, Scissor (Re-imagined)</ a > : Use a double-dose of artificial intelligence to
84
+ challenge
85
+ the computer in an interactive game of Rock, Paper, Scissor.
86
+ </ li >
87
+ < li class ="list-group-item ">
88
+ < a href ="sign-language "> Sign Language</ a > : A fun and neat program to test your knowledge of sign
89
+ language
90
+ alphabets.
91
+ </ li >
92
+ < li class ="list-group-item ">
93
+ < a href ="slot-machine-game "> Slot Machine</ a > : Emulate a slot machine game.
94
+ </ li >
95
+ < li class ="list-group-item ">
96
+ < a href ="solar-system "> Solar System</ a > : Bring the solar system to life by coding it!
97
+ </ li >
98
+ < li class ="list-group-item ">
99
+ < a href ="tic-tac-toe "> Tic-Tac-Toe</ a > : Play tic-tac-toe against the computer.
100
+ </ li >
101
+ </ ul >
102
+ </ div >
103
+
104
+ < br />
105
+ < div class ="alert alert-success " role ="alert ">
106
+ One-Off Coder help you achieve a life-long journey of continous success in computer science and
107
+ coding.
108
+
109
+ < ul >
110
+ < li >
111
+ < a href ="https://www.oneoffcoder.com "> Website</ a >
112
+ </ li >
113
+ < li >
114
+ < a href ="https://twitter.com/oneoffcoder "> Twitter</ a >
115
+ </ li >
116
+ < li >
117
+ < a href ="https://www.facebook.com/oneoffcoder "> Facebook</ a >
118
+ </ li >
119
+ < li >
120
+ < a href ="https://www.youtube.com/channel/UCCCv8Glpb2dq2mhUj5mcHCQ "> YouTube</ a >
121
+ </ li >
122
+ </ ul >
123
+
124
+ < b > < i > "The best way to create the future is to code it," One-Off Coder.</ i > </ b >
125
+ </ div >
126
+
127
+ < script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js "
128
+ integrity ="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj "
129
+ crossorigin ="anonymous "> </ script >
130
+ < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/umd/popper.min.js "
131
+ integrity ="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
132
+ crossorigin ="anonymous "> </ script >
133
+ < script src ="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js "
134
+ integrity ="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI "
135
+ crossorigin ="anonymous "> </ script >
136
+ </ body >
137
+
138
+ </ html >
0 commit comments