diff --git a/Web Development Python Projects/5.4 Color Vocab Project/assets/images/blue.png b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/blue.png
new file mode 100644
index 0000000..e8f1d8c
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/blue.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/assets/images/green.png b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/green.png
new file mode 100644
index 0000000..5664b3e
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/green.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/assets/images/orange.png b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/orange.png
new file mode 100644
index 0000000..81114c2
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/orange.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/assets/images/red.png b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/red.png
new file mode 100644
index 0000000..dbf8175
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/red.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/assets/images/yellow.png b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/yellow.png
new file mode 100644
index 0000000..f126369
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/assets/images/yellow.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/goal.png b/Web Development Python Projects/5.4 Color Vocab Project/goal.png
new file mode 100644
index 0000000..42cb59f
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/goal.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/index.html b/Web Development Python Projects/5.4 Color Vocab Project/index.html
new file mode 100644
index 0000000..d85f0c4
--- /dev/null
+++ b/Web Development Python Projects/5.4 Color Vocab Project/index.html	
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spanish Vocabulary</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <h1>Colors</h1>
+  <h2>Learn the colors in Spanish!</h2>
+  <h2 class="color-title" id="red">Rojo</h2>
+  <img class="color" src="./assets/images/red.png" alt="red" />
+
+  <h2 class="color-title" id="blue">Azul</h2>
+  <img src="./assets/images/blue.png" alt="blue" />
+
+  <h2 class="color-title" id="orange">Anaranjado</h2>
+  <img src="./assets/images/orange.png" alt="orange" />
+
+  <h2 class="color-title" id="green">Verde</h2>
+  <img src="./assets/images/green.png" alt="green" />
+
+  <h2 class="color-title" id="yellow">Amarillo</h2>
+  <img src="./assets/images/yellow.png" alt="yellow" />
+</body>
+
+</html>
+
+<!-- 
+TODOs
+IMPORTANT: You should not need to make ANY CHANGES to index.html
+All code should be written in your CSS file.
+
+1. Create a CSS file and incorporate it as an external stylesheet.
+2. Use CSS to style each of the color titles to meaning. 
+Hint: Use the id to help if you don't know the words in spanish.
+3. Use CSS to change all the color titles to have "font-weight: normal;"
+4. Use CSS (not HTML) to make all the images 200px heigh and 200px wide. 
+Hint: 
+https://developer.mozilla.org/en-US/docs/Web/CSS/height
+https://developer.mozilla.org/en-US/docs/Web/CSS/width
+-->
\ No newline at end of file
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/blue.png b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/blue.png
new file mode 100644
index 0000000..e8f1d8c
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/blue.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/green.png b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/green.png
new file mode 100644
index 0000000..5664b3e
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/green.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/orange.png b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/orange.png
new file mode 100644
index 0000000..81114c2
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/orange.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/red.png b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/red.png
new file mode 100644
index 0000000..dbf8175
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/red.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/yellow.png b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/yellow.png
new file mode 100644
index 0000000..f126369
Binary files /dev/null and b/Web Development Python Projects/5.4 Color Vocab Project/solution/assets/images/yellow.png differ
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/solution.html b/Web Development Python Projects/5.4 Color Vocab Project/solution/solution.html
new file mode 100644
index 0000000..04bde13
--- /dev/null
+++ b/Web Development Python Projects/5.4 Color Vocab Project/solution/solution.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spanish Vocabulary</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <h1>Colors</h1>
+  <h2>Learn the colors in Spanish!</h2>
+  <h2 class="color-title" id="red">Rojo</h2>
+  <img class="color" src="./assets/images/red.png" alt="red" />
+
+  <h2 class="color-title" id="blue">Azul</h2>
+  <img src="./assets/images/blue.png" alt="blue" />
+
+  <h2 class="color-title" id="orange">Anaranjado</h2>
+  <img src="./assets/images/orange.png" alt="orange" />
+
+  <h2 class="color-title" id="green">Verde</h2>
+  <img src="./assets/images/green.png" alt="green" />
+
+  <h2 class="color-title" id="yellow">Amarillo</h2>
+  <img src="./assets/images/yellow.png" alt="yellow" />
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/solution/style.css b/Web Development Python Projects/5.4 Color Vocab Project/solution/style.css
new file mode 100644
index 0000000..184ab0c
--- /dev/null
+++ b/Web Development Python Projects/5.4 Color Vocab Project/solution/style.css	
@@ -0,0 +1,28 @@
+img {
+  height: 200px;
+  width: 200px;
+}
+
+.color-title {
+  font-weight: normal;
+}
+
+#red {
+  color: red;
+}
+
+#blue {
+  color: blue;
+}
+
+#orange {
+  color: orange;
+}
+
+#green {
+  color: green;
+}
+
+#yellow {
+  color: yellow;
+}
diff --git a/Web Development Python Projects/5.4 Color Vocab Project/style.css b/Web Development Python Projects/5.4 Color Vocab Project/style.css
new file mode 100644
index 0000000..e69de29
