HackYourFutureBelgium · jamesishimwe · Feb 18, 2026 · Feb 18, 2026 · Feb 18, 2026 · Feb 26, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,41 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Version Control</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+       On this page you will read about: purpose of README files, purpose of wireframes and what a branch is. </p>
     </header>
     <main>
-      <article>
+       <section class="articles">
+      <article class="article1"> 
+        <img src="placeholder.svg" alt="" />
+        <h2>README Files</h2>
+        <p>
+          A README file is a text file that provides information about a project, such as its purpose, how to use it, and any dependencies it may have. 
+        </p>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>  
+      <article class="article2">
+        <img src="placeholder.svg" alt="" />
+        <h2>Wireframes</h2>
+        <p>
+          A wireframe is a visual guide that represents the skeletal framework of a webpage or application.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
+      </article>
+      <article class="article3">
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>Branches</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A branch is a separate line of development in version control systems like Git.
         </p>
-        <a href="">Read more</a>
+        <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>
+        </section>    
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Webpage created by JAMES ISHIMWE containing web development articles. 
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,24 +17,30 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --paper: oklch(100% 0 0);
+  --ink: color-mix(in oklab, var(--color) 5%);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
+  --color: var(50% 0 0);
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
+body,header {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+header {
+  text-align: center;
+  padding: var(--space);
+}
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
 }
 img,
 svg {
@@ -50,9 +56,14 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
+
   text-align: center;
+  background-color: #333;
+  color: white;
+  padding: 20px;
+  text-align: center;
+  margin-top: 20px;
+  border-radius: 5px;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -61,14 +72,7 @@ Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
+
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.
@@ -87,3 +91,27 @@ article {
     grid-column: span 3;
   }
 }
+
+.articles {
+  display: grid;
+  grid-template-areas:
+    "top top"
+    "left right";
+    grid-template-columns: 1fr 1fr; 
+  gap: var(--space);
+
+}
+.article1 {
+  grid-area: top;
+}
+.article2 {
+  grid-area: left;
+}
+.article3 {
+  grid-area: right;
+}
+.article1, .article2, .article3 {
+  border: var(--line);
+  padding-bottom: var(--space);
+  text-align: left;
+} 
diff --git a/branch-html.html b/branch-html.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Branches</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        header {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            border-radius: 5px;
+        }
+        main {
+            background-color: white;
+            padding: 20px;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+        footer {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            text-align: center;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>What is a Branch in Version Control?</h1>
+    </header>
+    <main>
+                <h2>Definition</h2>
+            <p>A branch is an independent line of development in version control. It allows multiple developers to work on different features simultaneously without interfering with the main codebase.</p>
+
+
+
+            <h2>Key Benefits</h2>
+            <ul>
+                <li>Isolate work on features or fixes</li>
+                <li>Enable parallel development</li>
+                <li>Keep the main branch stable</li>
+                <li>Facilitate code reviews through pull requests</li>
+            </ul>
+
+
+                <h2>Common Branches</h2>
+            <ul>
+                <li><code>main</code> - Production-ready code</li>
+                <li><code>develop</code> - Integration branch for features</li>
+                <li><code>feature/*</code> - New feature branches</li>
+                <li><code>bugfix/*</code> - Bug fix branches</li>
+            </ul>
+    <h2>How Branching Works</h2>
+            <p>When you create a branch, you're essentially creating a copy of the codebase at that point in time. Changes made on a branch do not affect other branches until they are explicitly merged. This isolation is crucial for maintaining code stability and organization.</p>
+         <h2>Best Practices</h2>
+            <p>Use descriptive branch names that clearly indicate the purpose of the work. Keep branches focused on a single feature or fix, and merge them back to the main branch regularly to avoid conflicts. Always review code before merging and ensure tests pass.</p>
+
+
+    </main>
+    <footer>
+      <p>
+        Webpage created by JAMES ISHIMWE containing web development articles. 
+      </p>
+    </footer>
+</body>
+</html>
diff --git a/readme.html b/readme.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>README Files</title>
+   <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        header {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            border-radius: 5px;
+        }
+        main {
+            background-color: white;
+            padding: 20px;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+        footer {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            text-align: center;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>README Files</h1>
+    </header>
+
+    <main>
+        <p>A README file is a text file that provides information about a project, such as its purpose, how to use it, and any dependencies it may have. It serves as a guide for users and developers to understand the project and its requirements.</p>
+        <p>README files are typically written in plain text or Markdown format and are often included in the root directory of a project. They can contain instructions for installation, usage, contribution guidelines, and any other relevant information about the project.</p>
+        <p>Having a well-written README file is important for the success of a project, as it helps users and developers quickly understand the project and how to get started with it.</p>
+
+
+   <p>A README file serves as the first point of contact for anyone encountering a project. It provides essential information about what the project does, why it exists, and how to use it effectively.</p>
+
+    <p>README files establish clear documentation standards by outlining project goals, features, and functionality. This helps new users and contributors quickly understand the project's scope without needing to explore the codebase.</p>
+
+    <p>They guide installation and setup processes, providing step-by-step instructions that reduce friction for users trying to get the project running on their systems. Clear setup instructions prevent common errors and frustration.</p>
+
+    <p>README files enhance project professionalism and credibility. A well-structured README demonstrates that developers care about user experience and are committed to maintaining quality documentation.</p>
+
+    <p>They facilitate collaboration by explaining how to contribute, where to report issues, and what coding standards to follow. This reduces barriers for potential contributors and streamlines the development process.</p>
+
+    <p>README files improve project discoverability and SEO. Platforms like GitHub use README content to help users find relevant projects, making comprehensive documentation valuable for visibility.</p>
+<p>They provide a quick reference for troubleshooting common issues and frequently asked questions, saving users time and reducing support requests. A comprehensive FAQ section in a README can address most user concerns upfront.</p>
+<p>They provide a quick reference for troubleshooting common issues and frequently asked questions, saving users time and reducing support requests. A comprehensive FAQ section in a README can address most user concerns upfront.</p>
+
+<p>README files serve as documentation for future maintainers, preserving project knowledge and context. When developers revisit or hand off a project, a detailed README ensures continuity and helps new maintainers onboard efficiently.</p>
+<p>They act as a marketing tool, showcasing the project's value proposition and key benefits to potential users and stakeholders. A compelling README can influence decision-making about whether to adopt or contribute to a project.</p>     
+<p>They act as a marketing tool, showcasing the project's value proposition and key benefits to potential users and stakeholders. A compelling README can influence decision-making about whether to adopt or contribute to a project.</p>
+
+<p>README files establish version control and updates tracking, helping users understand what has changed between releases and any compatibility considerations for upgrades.</p>
+</main>
+   <footer>
+      <p>
+        Webpage created by JAMES ISHIMWE containing web development articles. 
+      </p>
+    </footer>
+</body>
+</html>
diff --git a/wireframe-html.html b/wireframe-html.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wireframe Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        header {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            border-radius: 5px;
+        }
+        main {
+            background-color: white;
+            padding: 20px;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+        footer {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            text-align: center;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>The Purpose of Wireframes in HTML</h1>
+    </header>
+    <main>
+        <p>In modern web development, wireframes have evolved beyond static sketches to interactive prototypes. These digital wireframes can be tested with real users, providing valuable feedback before the actual coding phase. This iterative approach ensures that the final website meets user expectations and business goals more effectively.</p>
+
+<p>Wireframes also play a crucial role in responsive design planning. By establishing clear layouts for different screen sizes during the wireframing phase, developers can build HTML that adapts seamlessly across devices. This foresight prevents the need for major restructuring once the page goes live.</p>
+
+<p>Moreover, wireframes document design decisions and the reasoning behind them. This documentation becomes invaluable for future maintenance, updates, and team onboarding. New developers can understand the intended structure and purpose of the HTML without deciphering ambiguous code.</p>
+
+    <p>Wireframes are essential blueprints in web development that outline the structure and layout of a webpage before coding begins. They serve as a visual guide that maps out where different elements will be placed, helping designers and developers communicate ideas clearly and ensure all stakeholders are aligned on the design direction.</p>
+
+    <p>One of the primary purposes of wireframes is to define the user interface layout. By sketching out the positioning of headers, navigation menus, content sections, sidebars, and footers, wireframes establish a clear hierarchy and flow. This planning phase prevents costly revisions later in the development process when changes become more expensive and time-consuming to implement.</p>
+
+    <p>Wireframes also help identify user experience (UX) considerations early in the project. They highlight how users will navigate through the page, where call-to-action buttons should be placed, and how information is organized. This focus on usability ensures that the final HTML structure supports efficient user interactions and accessibility standards.</p>
+
+    <p>Additionally, wireframes bridge the gap between stakeholders and developers. Non-technical team members can easily understand visual representations, provide feedback, and approve designs without needing to interpret code. This collaborative approach reduces misunderstandings and ensures the final product meets business requirements.</p>
+
+    <p>Finally, wireframes serve as a reference document during HTML development, guiding developers on semantic structure, responsive breakpoints, and content organization, ultimately resulting in cleaner, more maintainable code.</p>
+  </main>
+   <footer>
+      <p>
+        Webpage created by JAMES ISHIMWE containing web development articles. 
+      </p>
+    </footer>
+</body>
+</html>