CodeYourFuture · Baba05206 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/Wireframe/ReadMe.svg b/Wireframe/ReadMe.svg
diff --git a/Wireframe/article.md b/Wireframe/article.md
@@ -0,0 +1,19 @@
+## What is the purpose of a README file?
+
+1. Developers use readme files to tell other people about their project, why the project is useful, what they can do with the project, and how they can use the capability that the project delivers
+1. Readme file helps a user / visitor to locate information they require more easily via a guide provided
+1. Readme files may also convey any information we require the user of the product to be aware of
+
+## What is the purpose of a wireframe?
+1. A wireframe focuses more on the 'what' than it does on the 'where', which lets the development team focus more on the core functionality and the structure of their website / App
+1. A wireframe shows the skeleton of a website or an App's UI and core functionality
+1. A wireframe shows where components should be in relation to each other and what roughly they should do
+1. A wireframe provides a visual understanding of a page early in a project lifecycle to get stakeholder and project team approval before the creative phase gets underway
+1. In summary, a wireframe directly; clarify structure, communicate ideas, enables design feedback, which eventually helps save time and money and provide a faster path to completion/ launch.
+
+## What is a branch in Git?
+1. A branch is a series of commits in a project
+1. A branch is an independent line of development
+1. A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project
+1. Branches let us work on different parts of a project, like new features or bug fixes, without interfering with the main branch
+1. We typically use branches when we need to: develop a new feature, fix a bug, or experiement with new ideas
diff --git a/Wireframe/branch2.png b/Wireframe/branch2.png
diff --git a/Wireframe/branch3.png b/Wireframe/branch3.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,26 +7,71 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
+
+     <nav class="navbar" id="navbar">
+        <ul>
+            <li><a href="#readme9">ReadMe</a></li>
+            <li><a href="#wireframe9">Wireframes</a></li>
+            <li><a href="#branch9">Branch</a></li>
+        </ul>
+    </nav>
+    <header class="hero" id="hero">
+            <div class="container">
+                <h1>Articles: Readme, Wireframes, and Branching</h1>
+
+            </div>
+          </header>
+
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <article class="readme9" id="readme9">
+        <img src="readme2.png" alt="readmeimage" class="readme3"/>
+        <h2>What is the purpose of a README file?</h2>
+        <p>
+          <ul>
+            <li>Developers use readme files to tell other people about their project, why the project is useful, what they can do with the project, and how they can use the capability that the project delivers</li>
+            <li>Readme files helps a user / visitor to locate information they require more easily via a guide provided in the readme</li>
+            <li>Readme files may also convey any information we require the user of the product to be aware of, such as release or version of website / App</li>
+          </ul>
+        </p>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more</a>
+      </article>
+
+        <article class="wireframe9" id="wireframe9">
+        <img src="wireframe1.svg" alt="wireframeimage" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          <ul>
+            <li>A wireframe focuses more on the 'what' than it does on the 'where', which lets the development team focus more on the core functionality and the structure of their website / App</li>
+            <li>A wireframe shows the skeleton of a website or an App's UI and core functionality</li>
+            <li>A wireframe shows where components should be in relation to each other and what roughly they should do</li>
+            <li>A wireframe provides a visual understanding of a page early in a project lifecycle to get stakeholder and project team approval before the creative phase gets underway</li>
+            <li>In summary, a wireframe directly; clarify structure, communicate ideas, enables design feedback, which eventually helps save time and money and provide a faster path to completion/ launch</li>
+          </ul>
+        </p>
+        <a href="https://github.com/topics/wireframes?o=desc&s=forks" target="_blank">Read more</a>
+      </article>
+
+        <article class="branch9" id="branch9">
+        <img src="branch3.png" alt="gitbranching" />
+        <h2>What is a branch in Git?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          <ul>
+            <li>A branch is a series of commits in a project</li>
+            <li>A branch is an independent line of development</li>
+            <li>A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project</li>
+            <li>Branches let us work on different parts of a project, like new features or bug fixes, without interfering with the main branch</li>
+            <li>We typically use branches when we need to: develop a new feature, fix a bug, or experiement with new ideas</li>
+          </ul>
         </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" target="_blank">Read more</a>
       </article>
+
+
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        <a href="#hero">Return to top of page</a>
+
       </p>
     </footer>
   </body>

diff --git a/Wireframe/processDiagram.PNG b/Wireframe/processDiagram.PNG
diff --git a/Wireframe/readme2.png b/Wireframe/readme2.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,6 +26,74 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
+ a {
+    text-decoration: none;
+}
+
+h1,
+h2,
+h4 {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+nav {
+    display: flex;
+    background-color: #200e3d;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    padding: 0 15%;
+    list-style: none;
+}
+
+nav ul li a {
+    font-size: 16px;
+    padding: 0 15px;
+    color: white;
+    transition: 0.2s;
+    text-transform: uppercase;
+}
+
+nav ul li a:hover {
+    transition: 0.2s;
+    color: #52c5ff;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.hero {
+    padding-top: 130px;
+}
+
+.hero img {
+    border-style: none;
+    border-radius: 50%;
+    margin: 0 auto;
+    max-width: 440px;
+    display: block;
+}
+
+h1 {
+    color: black;
+    text-align: center;
+    font-size: 24px;
+    margin: 30px 0px 100px;
+}
+
 body {
   background: var(--paper);
   color: var(--ink);

diff --git a/Wireframe/wireframe1.svg b/Wireframe/wireframe1.svg
diff --git a/branch2.png b/branch2.png
diff --git a/branch3.png b/branch3.png
diff --git a/readme.svg b/readme.svg
diff --git a/readme2.png b/readme2.png
diff --git a/wireframe1.svg b/wireframe1.svg