diff --git a/cmsc388a/code_examples/children.html b/cmsc388a/code_examples/children.html
new file mode 100644
index 0000000000000000000000000000000000000000..b7a6925e2ef847afd327aca117aa74402a5c54d6
--- /dev/null
+++ b/cmsc388a/code_examples/children.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>cmsc388a winter 2019</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #EEE;
+ }
+ #container h1 {
+ font-size: 144px;
+ font-family: sans-serif;
+ color: #0080A8;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ var destination = document.querySelector("#container");
+
+ class Buttonify extends React.Component {
+ render() {
+ return(
+ <div>
+ <button type={this.props.behavior}>{this.props.children}</button>
+ </div>
+ );
+ }
+ }
+ ReactDOM.render(
+ <div>
+ <Buttonify behavior="submit">SEND DATA</Buttonify>
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_examples/styling/vowels.html b/cmsc388a/code_examples/styling/vowels.html
new file mode 100644
index 0000000000000000000000000000000000000000..3eeef0a3daee16d8bfa624ecb7382562f82d809d
--- /dev/null
+++ b/cmsc388a/code_examples/styling/vowels.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Letters with no style</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ var destination = document.querySelector("#container");
+
+ class Letter extends React.Component {
+ render() {
+ return(
+ <div>
+ {this.props.children}
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Letter>A</Letter>
+ <Letter>E</Letter>
+ <Letter>I</Letter>
+ <Letter>O</Letter>
+ <Letter>U</Letter>
+ </div>,
+ destination
+ );
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_examples/styling/vowels_with_style_v1.html b/cmsc388a/code_examples/styling/vowels_with_style_v1.html
new file mode 100644
index 0000000000000000000000000000000000000000..fb25cb7838c80417d296335f7549d182eb288ad8
--- /dev/null
+++ b/cmsc388a/code_examples/styling/vowels_with_style_v1.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Letters with no style</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ div div div {
+ padding: 10px;
+ margin: 10px;
+ background-color: #FFDE00;
+ color: #333;
+ display: inline-block;
+ font-family: monospace;
+ font-size: 32px;
+ text-align: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ var destination = document.querySelector("#container");
+
+ class Letter extends React.Component {
+ render() {
+ return(
+ <div>
+ {this.props.children}
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Letter>A</Letter>
+ <Letter>E</Letter>
+ <Letter>I</Letter>
+ <Letter>O</Letter>
+ <Letter>U</Letter>
+ </div>,
+ destination
+ );
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_examples/styling/vowels_with_style_v2.html b/cmsc388a/code_examples/styling/vowels_with_style_v2.html
new file mode 100644
index 0000000000000000000000000000000000000000..ec883930c155ddb101d3915a57d6c23584a07657
--- /dev/null
+++ b/cmsc388a/code_examples/styling/vowels_with_style_v2.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Letters with no style</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ .letter {
+ padding: 10px;
+ margin: 10px;
+ background-color: #FFDE00;
+ color: #333;
+ display: inline-block;
+ font-family: monospace;
+ font-size: 32px;
+ text-align: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ var destination = document.querySelector("#container");
+
+ class Letter extends React.Component {
+ render() {
+ return(
+ <div className="letter">
+ {this.props.children}
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Letter>A</Letter>
+ <Letter>E</Letter>
+ <Letter>I</Letter>
+ <Letter>O</Letter>
+ <Letter>U</Letter>
+ </div>,
+ destination
+ );
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_examples/styling/vowels_wtih_style_v3.html b/cmsc388a/code_examples/styling/vowels_wtih_style_v3.html
new file mode 100644
index 0000000000000000000000000000000000000000..9d2a2d36cbe0a6cea5a58bd92e7b623f0dcf0717
--- /dev/null
+++ b/cmsc388a/code_examples/styling/vowels_wtih_style_v3.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Letters with no style</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+ <script type="text/babel">
+ var destination = document.querySelector("#container");
+
+ class Letter extends React.Component {
+ render() {
+ var letterStyle = {
+ padding: 10,
+ margin: 10,
+ backgroundColor: "#FFDE00",
+ color: "#333",
+ display: "inline-block",
+ fontFamily: "monospace",
+ fontSize: 32,
+ textAlign: "center"
+ };
+ return(
+ <div style={letterStyle}>
+ {this.props.children}
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Letter>A</Letter>
+ <Letter>E</Letter>
+ <Letter>I</Letter>
+ <Letter>O</Letter>
+ <Letter>U</Letter>
+ </div>,
+ destination
+ );
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file