diff --git a/prj-monster-01-starting-setup/app.js b/prj-monster-01-starting-setup/app.js
new file mode 100644
index 0000000..e69de29
diff --git a/prj-monster-01-starting-setup/index.html b/prj-monster-01-starting-setup/index.html
new file mode 100644
index 0000000..9ed77d3
--- /dev/null
+++ b/prj-monster-01-starting-setup/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/prj-monster-01-starting-setup/styles.css b/prj-monster-01-starting-setup/styles.css
new file mode 100644
index 0000000..b9cb4ce
--- /dev/null
+++ b/prj-monster-01-starting-setup/styles.css
@@ -0,0 +1,119 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: "Jost", sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 0.5rem;
+ background-color: #880017;
+ color: white;
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+section {
+ width: 90%;
+ max-width: 40rem;
+ margin: auto;
+}
+
+.healthbar {
+ width: 100%;
+ height: 40px;
+ border: 1px solid #575757;
+ margin: 1rem 0;
+ background: #fde5e5;
+}
+
+.healthbar__value {
+ background-color: #00a876;
+ width: 100%;
+ height: 100%;
+}
+
+.container {
+ text-align: center;
+ padding: 0.5rem;
+ margin: 1rem auto;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ border-radius: 12px;
+}
+
+#monster h2,
+#player h2 {
+ margin: 0.25rem;
+}
+
+#controls {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+button {
+ font: inherit;
+ border: 1px solid #88005b;
+ background-color: #88005b;
+ color: white;
+ padding: 1rem 2rem;
+ border-radius: 12px;
+ margin: 1rem;
+ width: 12rem;
+ cursor: pointer;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
+
+button:focus {
+ outline: none;
+}
+
+button:hover,
+button:active {
+ background-color: #af0a78;
+ border-color: #af0a78;
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
+}
+
+button:disabled {
+ background-color: #ccc;
+ border-color: #ccc;
+ box-shadow: none;
+ color: #3f3f3f;
+ cursor: not-allowed;
+}
+
+#log ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#log li {
+ margin: 0.5rem 0;
+}
+
+.log--player {
+ color: #7700ff;
+}
+
+.log--monster {
+ color: #da8d00;
+}
+
+.log--damage {
+ color: red;
+}
+
+.log--heal {
+ color: green;
+}