London| May-2025 | Mursi Ismail | Wireframe

Wireframe/index.html

@@ -10,19 +10,53 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe in coding (especially web or app development) is a simple visual layout or blueprint
+         that shows the basic structure of a user interface (UI) without detailed design or content.
+
+
       </p>
     </header>
     <main>
       <article>
         <img src="placeholder.svg" alt="" />
         <h2>Title</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+           Provide a clear and concise description of all relevant details about data collection, processing, and analysis in a README file. This will help others interpret and reanalyze your dataset.
+
+          README files are created for a variety of reasons:
+
+          to document changes to files or file names within a folder
+          to explain file naming conventions, practices, etc. "in general" for future reference
+          to specifically accompany files/data being deposited in a repository
+
+          It is best practice to create a README file for each dataset regardless of whether it is being deposited in a repository because the document might become necessary later.
+        </p>
+        <a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read more</a>
+      </article>
+
+
+      <article>
+        <img src="placeholder.svg" alt="" />
+        <h2>Purpose of a wireframe</h2>
+        <p>
+          In simple terms, wireframes are visual representations of a web page or app interface, 
+          stripped down to its bare bones. Think of it as the architectural blueprint of your design
+          project. They outline the structure and functionality of your product without getting
+          caught up in colors, visuals, or specific content.
+        </p>
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/">Read more</a>
+      </article>
+
+      <article>
+        <img src="placeholder.svg" alt="" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git is master . As you start making commits, you're given a master branch that points to the last commit you made.
+          Every time you commit, the master branch pointer moves forward automatically.
         </p>
-        <a href="">Read more</a>
+        <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
       </article>
+
     </main>
     <footer>
       <p>

Wireframe/style.css

@@ -22,7 +22,7 @@ As well as useful links to learn more */
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
-  --container: 1280px;
+  --container: 1000px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
@@ -50,9 +50,8 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+  min-height: 50px;
+  background: PapayaWhip;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.