update material on readme page

README.md

@@ -11,6 +11,50 @@ pinned: false
 
 The **Model Context Protocol (MCP) Course** is your comprehensive guide to understanding, using, and building cutting-edge AI applications that leverage external data and tools through the latest MCP standards. This free course is designed to take you from beginner to an informed practitioner in the world of MCP.
 
+
+## 📑 Course Resources
+
+<div style="width: 100%; border: 1px solid #ccc; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 8px;">
+  <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
+    <a href="https://youtu.be/p4q6LI-2yZ8" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+        <div>
+          <h3 style="margin-top: 10;">📹 Unit 0 Video</h3>
+          <p>Complete Introduction to The first parts of the MCP Course. This video is a must-watch for everyone who wants to start the MCP Course.</p>
+        </div>
+        <img src="images/video_1.png" alt="Video Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+    <a href="https://youtube.com/live/aK8Jz-x5rJ8?feature=share" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+        <div>
+          <h3 style="margin-top: 10;">🔴 Unit 1 Live Stream</h3>
+          <p>On <b>29th May 8:00 PM CEST</b> we will have a live stream where we will cover Q&A and the MCP Course Unit 1 on MCP fundamentals. </p>
+        </div>
+        <img src="images/live_session.png" alt="Live Stream Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+    <a href="https://huggingface.co/spaces/mcp-course/unit_1_quiz" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+        <div>
+          <h3 style="margin-top: 10;">🏆 Get Certified</h3>
+          <p>If you want to get certified, you can do so by completing the MCP Course and passing the certification exam.</p>
+        </div>
+        <img src="images/certificate.png" alt="Certificate Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+    <a href="https://huggingface.co/learn/mcp-course/unit0/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px; margin-bottom: 30px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+        <div>
+          <h3 style="margin-top: 10;">📝 Written Materials</h3>
+          <p>To start learning the MCP Course, you can start with the written materials.</p>
+        </div>
+        <img src="images/written_material.png" alt="Written Materials Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+  </div>
+</div>
+
 <div style="width: 100%; border: 1px solid #ccc; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom, #ffd231, #ff9d00); border-radius: 8px;">
   <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/62d648291fa3e4e7ae3fa6e8/Jm3GYn6LHuasiLSlj03hd.png" alt="MCP Course" style="width: 7em; border-radius: 5px 5px 0 0;">
   <h2 style="color: #333; margin-bottom: 10px;">🚀 Ready to Join? Enroll in the MCP Course!</h2>