CodeYourFuture · connorpar · Jan 31, 2026 · Feb 12, 2026 · Feb 15, 2026 · Feb 15, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <header>
-      <h1>Wireframe</h1>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Three Key Tech Tips</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header>
+    <h1>Three Tech Tips</h1>
+    <p>
+      Here are some useful things to know when learning to create your own websites
+      and manage tech projects.
+    </p>
+  </header>
+  <main>
+    <article>
+      <img src="https://repository-images.githubusercontent.com/190038729/991a8980-8e28-11e9-9d4f-b0bdf64180f4"
+        alt="Readme">
+      <h2>The Purpose of a Readme File</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see
+        when landing on a repository. A readme file should provide users with information about the purpose of a
+        project, how to use it effectively and who the contributers and maintainers of the project are.
       </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.
-        </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
-    <footer>
+      <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>
+      <img src="https://cdn.nulab.com/learn-wp/app/uploads/2018/10/14210245/Cacoo-8-must-see-wireframes-680x450-1.png"
+        alt="Wireframe">
+      <h2>
+        The Purpose of A Wireframe
+      </h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe in web design is a basic visual representation of a webpage
+        that helps to outline its overall stucture and functionality.
+        Wireframes are used early in the development process to demonstrate the basic
+        structure of a page before visual design and content are added. The simplicity
+        of wireframes allow for changes and iterations to be made quickly and easily.
       </p>
-    </footer>
-  </body>
-</html>
+      <a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/" target="_blank">Read More</a>
+    </article>
+    <article>
+      <img src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png?width=1600&height=900"
+        alt="Git Branch Model">
+      <h2>
+        What is a Git Branch
+      </h2>
+      <p>
+        A git branch is a pointer to a snapshot of all the changes that occured
+        on that branch. Upon creating a new GitHub repository you will usually
+        be on the main branch by default. You can create additional branches which
+        are like separate workspaces to make changes to a project or test other features
+        without compromising the base project. Branches are useful when working
+        on a project with many collaborators as each individual can make changes on their own local
+        copy of a project and propose their changes to be integrated to the main branch
+        after approval.
+      </p>
+      <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank">Read More</a>
+    </article>
+  </main>
+  <footer>
+    <p id="p_footer">
+      Footer content will go here
+    </p>
+  </footer>
+</body>
+
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -22,15 +22,35 @@ As well as useful links to learn more */
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
+  --line2: 5px solid;
   --container: 1280px;
 }
+
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+h1 {
+  text-align: center;
+  font-size: 3rem;
+}
+h2 {
+  text-align: left;
+  font-size: 2rem;
+}
+
+article > p  {
+  text-align: left;
+  font-size: 1rem;
+}
+header > p {
+  text-align: center;
+  font-size: 1rem;
+}
 a {
   padding: var(--space);
   border: var(--line);
@@ -40,6 +60,7 @@ img,
 svg {
   width: 100%;
   object-fit: cover;
+  aspect-ratio: 16/9;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -50,8 +71,14 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
+  border: var(--line);
   position: fixed;
-  bottom: 0;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  background-color: rgb(202, 160, 160);
+  border-color: black;
   text-align: center;
 }
 /* ====== Articles Grid Layout ====
@@ -80,6 +107,7 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  align-content: start;
   > * {
     grid-column: 2/3;
   }