HackYourFutureBelgium · Roumaissae0 · Feb 16, 2026 · Feb 19, 2026 · Feb 19, 2026 · Feb 19, 2026
diff --git a/Explaining_webpage.html b/Explaining_webpage.html
@@ -0,0 +1 @@
+
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,89 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>The explanation</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
     <header>
-      <h1>Wireframe</h1>
+
+      <h1 id="Big_title">The explanation</h1>
+
       <p>
-        This is the default, provided code and no changes have been made yet.
+       <strong>Explanation of what?</strong><br>
+       Today I will explain the reason for the existence of the README, the wireframe, and the Git branch.
       </p>
+
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+
+        <img src="https://blog.thedannicraft.de/content/images/size/w1200/2025/07/blog-activitylog-banner.png" alt="GitHub README example">
+
+        <h2 class="Secondary_title">README</h2>
+
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+         <em>A README is a file that explains a project.</em>
+          It usually contains:
+         <ul>
+           <li>What the project is about</li>
+           <li>Why it was created</li>
+           <li>How it works</li>
+           <li>The purpose of a README is to help other developers understand what the project is about and how it works.</li>
+         </ul>
         </p>
-        <a href="">Read more</a>
+
+        <a href="https://www.geeksforgeeks.org/git/what-is-github-readme-file-and-markdown/">Read more</a>
+
+      </article>
+
+      <article>
+
+      <img src="https://raw.githubusercontent.com/HackYourFutureBelgium/Module-Onboarding/refs/heads/main/Wireframe/wireframe.png" alt="GitHub wireframe example">
+        <h2 class="Secondary_title">WIREFRAME</h2>
+        <p>
+         <em>A wireframe is a simple visual plan of a website or application.</em>
+          It shows:
+          <ul>
+            <li>The layout structure</li>
+            <li>Where elements are placed (header, navigation, content, footer)</li>
+            <li>The organization of the page</li>
+            <li>A wireframe does not focus on colors or design.<br>
+            <li> It focuses on structure and layout.</li>
+          </ul>
+        </p>
+        <a href="https://github.com/sei-entropy/lesson-w02d05-wireframes">Read more</a>
+
+      </article>
+
+      <article>
+
+        <img src="https://wac-cdn.atlassian.com/dam/jcr%3Aa905ddfd-973a-452a-a4ae-f1dd65430027/01%20Git%20branch.svg?cdnVersion=3226" alt="GitHub BRANCH example">
+        <h2 class="Secondary_title">BRANCH</h2>
+        <p>
+         <em>A Git branch is a separate version of a project.</em>
+          It allows developers to:
+          <ul>
+           <li>Work on new features</li>
+           <li>Make changes safely</li>
+           <li>Avoid breaking the main project</li>
+           <li>For example, the main branch contains the stable version of the project.</li>
+           <li>branch like feature/wireframe is used to develop a new feature before merging it into main.</li>
+        </ul>
+      </p>
+
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
+
       </article>
     </main>
+
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+       <strong>Thank you for your precious time</strong>
       </p>
     </footer>
+
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,10 +26,26 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 80px;
+}
+#Big_title {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 50px;
+  background-color: rgb(194, 255, 235);}
+.Normal_text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: medium;
+  background-color: rgb(255, 250, 243);
+}
+.Secondary_title {
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-size: 25px;
+  background-color: rgb(206, 255, 239);
 }
 a {
   padding: var(--space);
@@ -53,6 +69,8 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  left: 0;
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

diff --git a/contributing.md b/contributing.md
@@ -1,11 +1,11 @@
 # How To Submit Your Coursework
 
-Use Git & Github to submit your coursework as a pull request.
+- Use Git & Github to submit your coursework as a pull request.
 
 [Creating a pull request](https://curriculum.codeyourfuture.io/guides/contributing/create-a-pull-request/)
 
 ## Questions & Help
 
-Contributing to a remote codebase is a necessary skill for a professional developer. Opening PRs is mandatory at CYF. It is part of the coursework.
+- Contributing to a remote codebase is a necessary skill for a professional developer. Opening PRs is mandatory at CYF. It is part of the coursework.
 
-If you cannot submit your coursework you **must** post on Slack to get unblocked.
+- If you cannot submit your coursework you **must** post on Slack to get unblocked.