CodeYourFuture · CraigStodd · May 20, 2026 · May 20, 2026 · May 20, 2026 · May 20, 2026
diff --git a/Wireframe/CYF-Git-Branch-Example.png b/Wireframe/CYF-Git-Branch-Example.png
diff --git a/Wireframe/README-File-Example.jpg b/Wireframe/README-File-Example.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,106 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe To Web Code</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe To Web Code</h1>
+
       <p>
-        This is the default, provided code and no changes have been made yet.
+       Wireframes, README & Git branches, explained.
       </p>
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="wireframe.png" alt="Picture of an example wireframe" />
+
+        <h2>Wireframe</h2>
+
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+      A wireframe is a plan outlining the basic structure of the elements of a website, webpage or digital interface - 
+      its purpose is to give the viewer a rough idea of how content will be displayed and function in the final product, 
+      such as banners, navigation bars, buttons, images, and articles. 
+      In essence, a wireframe is the architectural "blueprint" of a web document.
+    </p>
+
+        <a href="https://www.figma.com/resource-library/what-is-wireframing/">
+          READ MORE
+        </a>
+      </article>
+
+      <article>
+        <img src="README-File-Example.jpg" alt="Picture of an example README file" />
+
+        <h2>README</h2>
+
+        <p>
+          The purpose of a README file is to provide important information for a project or piece of software. 
+          It can include information such as:
+        </p>
+
+          <ul>
+             <li>Installation/operating instructions</li>
+
+            <li>Version info</li>
+
+            <li>System requirements</li>
+
+            <li>A basic description of the software</li>
+
+            <li>Troubleshooting and support contact info</li>
+
+            <li>Copyright and licensing info</li>
+
+            <li>Source links</li> 
+          </ul>
+
+          <p>
+            README files are commonly written in Markdown (.md), plaintext format.
+          </p>
+
+        <a href="https://www.makeareadme.com/">
+          READ MORE
+        </a>
+      </article>
+
+      <article>
+        <img src="CYF-Git-Branch-Example.png" alt="Picture of CYF Example Git Branch Diagram" />
+
+        <h2>Git Branches</h2>
+
+        <p>
+           In Git, repositories are made up of "branches."
         </p>
-        <a href="">Read more</a>
+
+         <ul>
+         <li>The the base branch is called "main" - it represents the original code and main development
+          history of a project.</li>
+
+         <li>When you create a branch from here, you make a copy that can be worked on without messing up 
+          the original code.</li>
+
+         <li>Individual edits made and saved to a repository are called "commits," each with their own unique url.</li>
+
+         <li>In summary, a "branch" is just a specific sequence of commits - 
+          a timeline of changes made to a project in isolation from the main development.</li>
+
+         <li>Once finalised and a branch can be reviewed and merged with main development via a "Pull Request."</li> 
+         </ul>
+
+        <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.
+        Footers usually contain content links and information about the site overall
       </p>
     </footer>
+
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -21,7 +21,7 @@ As well as useful links to learn more */
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --line: 2px solid;
   --container: 1280px;
 }
 /* ====== Base Elements ======
@@ -31,16 +31,30 @@ body {
   color: var(--ink);
   font: var(--font);
 }
-a {
+a {font-family: Arial;
+  font-weight: 600;
+  text-decoration: none;
+  color: black;
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
 img,
-svg {
+svg { margin: auto;
   width: 100%;
   object-fit: cover;
 }
+
+/* ====== Text Formatting ===== */
+
+h1, h2, a {
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+p, ul{ 
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,10 +63,15 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+header {
+  text-align: center;
+}
+
 footer {
-  position: fixed;
-  bottom: 0;
   text-align: center;
+  font-weight: 700;
+  border-top-style: solid;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -65,10 +84,13 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
 }
+
+ /* Moved outside of main {} to fix parsing error */
+ main > *: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.
@@ -77,13 +99,16 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
-  text-align: left;
+  text-align: justify;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+}
+
+ /* Moved outside of article {} to fix parsing error */
+ article > * {
+  grid-column: 2/3;
+}
+/* Moved outside of article {} to fix parsing error */
+ article > img {
+  grid-column: span 3;
 }