diff --git a/cmsc388a/code_along/add_card_component.html b/cmsc388a/code_along/add_card_component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9c40932aaebf157ac553e0592eb7ae0ea0300cd1
--- /dev/null
+++ b/cmsc388a/code_along/add_card_component.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    
+    class Square extends React.Component {
+      render() {
+        return(
+          <br/>
+        );
+      }
+    }
+    
+    class Label extends React.Component {
+      render() {
+        return (
+          <br/>
+        );
+      }
+    }
+    
+    class Card extends React.Component {
+      render() {
+        var cardStyle = {
+          height: 200,
+          width: 150,
+          padding: 0,
+          backgroundColor: "#FFF",
+          boxShadow: "0px 0px 5px #666"
+        };
+        return (
+          <div style={cardStyle}>
+ 
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+        <Card/>
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/add_label_component.html b/cmsc388a/code_along/add_label_component.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f5ff2da058cb462ca3695a5f0d2a4b937ef827c
--- /dev/null
+++ b/cmsc388a/code_along/add_label_component.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    
+    class Square extends React.Component {
+      render() {
+        var squareStyle = {
+          height: 150,
+          backgroundColor: "#FF6663"
+        };
+        return(
+          <div style={squareStyle}>
+          </div>    
+        );
+      }
+    }
+    
+    class Label extends React.Component {
+      render() {
+        var labelStyle = {
+          fontFamily: "sans-serif",
+          fontWeight: "bold",
+          padding: 13,
+          margin: 0
+        };
+
+        return (
+          <p style={labelStyle}>#FF6663</p>
+        );
+      }
+    }
+    
+    class Card extends React.Component {
+      render() {
+        var cardStyle = {
+          height: 200,
+          width: 150,
+          padding: 0,
+          backgroundColor: "#FFF",
+          boxShadow: "0px 0px 5px #666"
+        };
+        return (
+          <div style={cardStyle}>
+            <Square />
+            <Label />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+        <Card />
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/add_square_component.html b/cmsc388a/code_along/add_square_component.html
new file mode 100644
index 0000000000000000000000000000000000000000..1b83dc9fbb0d6aa3f51ca6b6e402412d67b438a4
--- /dev/null
+++ b/cmsc388a/code_along/add_square_component.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    
+    class Square extends React.Component {
+      render() {
+        var squareStyle = {
+          height: 150,
+          backgroundColor: "#FF6663"
+        };
+        return(
+          <div style={squareStyle}>
+          </div>    
+        );
+      }
+    }
+    
+    class Label extends React.Component {
+      render() {
+        return (
+          <br/>
+        );
+      }
+    }
+    
+    class Card extends React.Component {
+      render() {
+        var cardStyle = {
+          height: 200,
+          width: 150,
+          padding: 0,
+          backgroundColor: "#FFF",
+          boxShadow: "0px 0px 5px #666"
+        };
+        return (
+          <div style={cardStyle}>
+            <Square />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+        <Card/>
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/component_skeletons.html b/cmsc388a/code_along/component_skeletons.html
new file mode 100644
index 0000000000000000000000000000000000000000..0790a6b29e89e9dd04af1d74137794e449231ce5
--- /dev/null
+++ b/cmsc388a/code_along/component_skeletons.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    // why are we returning the <br/> ??
+    class Square extends React.Component {
+      render() {
+        return(
+          <br/>
+        );
+      }
+    }
+    
+    class Label extends React.Component {
+      render() {
+        return (
+          <br/>
+        );
+      }
+    }
+    
+    class Card extends React.Component {
+      render() {
+        return (
+          <br/>
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+ 
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/skeleton.html b/cmsc388a/code_along/skeleton.html
new file mode 100644
index 0000000000000000000000000000000000000000..465eee91a57376423d5402b11635e78058a75c44
--- /dev/null
+++ b/cmsc388a/code_along/skeleton.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    ReactDOM.render(
+      <div>
+ 
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/with_properties.html b/cmsc388a/code_along/with_properties.html
new file mode 100644
index 0000000000000000000000000000000000000000..64de5167e35b82d2e5bf11cfe4741f54257bfdd9
--- /dev/null
+++ b/cmsc388a/code_along/with_properties.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+  <meta charset="utf-8">
+  <title>More Components</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">
+    
+    class Square extends React.Component {
+      render() {
+        var squareStyle = {
+          height: 150,
+          backgroundColor: this.props.color
+        };
+        return(
+          <div style={squareStyle}>
+          </div>    
+        );
+      }
+    }
+    
+    class Label extends React.Component {
+      render() {
+        var labelStyle = {
+          fontFamily: "sans-serif",
+          fontWeight: "bold",
+          padding: 13,
+          margin: 0
+        };
+
+        return (
+          <p style={labelStyle}>{this.props.color}</p>
+        );
+      }
+    }
+    
+    class Card extends React.Component {
+      render() {
+        var cardStyle = {
+          height: 200,
+          width: 150,
+          padding: 0,
+          backgroundColor: "#FFF",
+          boxShadow: "0px 0px 5px #666"
+        };
+        return (
+          <div style={cardStyle}>
+            <Square color={this.props.color} />
+            <Label color={this.props.color} />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(
+      <div>
+        <Card color="#004D4D" />
+      </div>,
+      document.querySelector("#container")
+    );
+  </script>
+</body>
+ 
+</html>
\ No newline at end of file