diff --git a/individual/frontend/s04/activity/images/zuittlogo.png b/individual/frontend/s04/activity/images/zuittlogo.png
new file mode 100644
index 0000000..cff90ef
Binary files /dev/null and b/individual/frontend/s04/activity/images/zuittlogo.png differ
diff --git a/individual/frontend/s04/activity/index.html b/individual/frontend/s04/activity/index.html
new file mode 100644
index 0000000..bf3dffa
--- /dev/null
+++ b/individual/frontend/s04/activity/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>S04: HTML Attributes and Hyperlinks</title>
+</head>
+<body align="center">
+    <h2 >HTML Attributes</h2>
+    <p>
+        <em>Modifiers of element behavior</em>
+    </p>
+    <h2>HTML Images</h2>
+    <p><em>
+        An image can be shown using the &lt;img&gt; tag along with its <strong>src</strong> attribute.
+    </em></p>
+    <!-- Image with absolute link -->
+    <img src="https://place-puppy.com/450x450" alt="">
+    <br><code>&lt;https://place-puppy.com/450x450&gt;</code>
+    <br><img src="images/zuittlogo.png" alt="">
+
+    <br><code>
+        &lt;img src="images/zuittlogo.png"&gt;</code>
+    </code>
+
+    <p>Valid Image extensions are the following</p>
+    <ol type="i" align="left" reversed>
+        <li>png</li>
+        <li>jpg</li>
+        <li>gif</li>
+        <li>svg</li>
+        <li>webp</li>
+    </ol>
+
+    <h2>HTML Links</h2>
+    <h4>Absolute Link</h4> 
+    <a href="https://zuitt.co" target="_blank">I'm a Hyperlink</a>
+</body>
+</html>
\ No newline at end of file
