iteddy16 · iteddy16 · May 8, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -30,18 +30,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] My form is semantic html.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ## Resources
 

diff --git a/Wireframe/articles.md b/Wireframe/articles.md
@@ -0,0 +1,15 @@
+1. What is the purpose of a README file?
+
+Its purpose is to tell other people information about why your project is useful, what they can do with your project, and how they can use it.
+
+A README file serves as the backbone of any software project, offering clear documentation for developers, users, and contributors. It provides essential details such as installation instructions, project structure, and usage guidelines, ensuring accessibility and ease of navigation. Whether you're working on an open-source project or private development, a well-crafted README enhances collaboration and reduces confusion. Beyond technical guidance, a README file establishes credibility and professionalism. It acts as a first impression, helping users quickly grasp the project's intent and functionality. By maintaining an informative and concise README, developers foster engagement, encourage contributions, and create a seamless onboarding experience.
+
+2. What is the purpose of a wireframe?
+
+Its purpose is to create a schematic in the early stages of digital product design to help visualize and communicate the structure of a website or different products.
+
+A wireframe is a foundational visual guide used in web and app design to outline structure, functionality, and user flow. It serves as a blueprint, allowing designers and developers to plan layouts without distractions from colors or detailed visuals. By focusing on hierarchy and navigation, wireframes ensure a smooth user experience and efficient interaction with the interface. Beyond aesthetics, wireframes facilitate collaboration, aligning stakeholders and teams on project goals. They highlight key features, prevent design inconsistencies, and streamline development. With a clear wireframe, teams can refine ideas early, saving time and resources while ensuring a well-structured final product.
+
+3. What is a branch in Git?
+
+In Git, a branch is a separate line of development that allows multiple contributors to work on different features simultaneously. It provides a safe space to experiment, make changes, and refine code without affecting the main project. By using branches, developers can isolate updates, test new ideas, and merge them seamlessly when ready. Branches enable collaboration and enhance project organization. Teams can create feature branches for new functionalities, bug fixes, or updates, ensuring a clean and structured workflow. With Git's branching system, version control becomes more streamlined, reducing conflicts and improving efficiency in software development.
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,26 +8,60 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>What is the purpose of a README file?</h1>
+      <p>A README file serves as the backbone of any software project, offering clear documentation for 
+        developers, users, and contributors.</p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="ReadMe Image" />
+        <h2>ReadMe purpose</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file serves as the backbone of any software project, offering clear documentation for 
+          developers, users, and contributors. It provides essential details such as installation instructions, 
+          project structure, and usage guidelines, ensuring accessibility and ease of navigation....
         </p>
-        <a href="">Read more</a>
+        <a href="articles.md">Read more</a>
+      </article>
+
+      <article>
+        <div class="row">
+          <div class="column">
+            <img src="placeholder.svg" alt="Wireframe Image" />
+            <h2>What is the purpose of a wireframe?</h2>
+            <p>
+              A wireframe is a foundational visual guide used in web and app design to outline structure, 
+              functionality, and user flow. It serves as a blueprint, allowing designers and developers to plan 
+              layouts without distractions from colors or detailed visuals...
+            </p>
+            <a href="articles.md">Read more</a>
+          </div>
+      </article>
+
+      <article>
+        <div class="column">
+          <img src="placeholder.svg" alt="Branch in Git Image" />
+          <h2>What is a branch in Git?</h2>
+          <p>In Git, a branch is a separate line of development that allows multiple contributors to work on different 
+            features simultaneously. It provides a safe space to experiment, make changes, and refine code without 
+            affecting the main project...</p>
+          <a href="articles.md">Read more</a>
+        </div>
+        </div>
       </article>
     </main>
+    <br />
+
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        &copy; CYF <span id="currentYear"></span> Modifed by iteddy16: <br />All
+        Right Reserved.
       </p>
     </footer>
+    <script>
+      // JavaScript to dynamically insert the current year
+      document.getElementById("currentYear").textContent =
+        new Date().getFullYear();
+    </script>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,6 +16,39 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+
+* {
+  box-sizing: border-box;
+}
+
+/* Create two equal columns that floats next to each other */
+.column {
+  float: left;
+  width: 100%;
+  padding: 10px;
+  height: auto;
+  /* Should be removed. Only for demonstration */
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.articles {
+  column-count: 2;
+}
+
+header p,
+h1 {
+  text-align: center;
+}
+
+article p {
+  text-align: justify;
+}
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -31,6 +64,7 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -39,6 +73,7 @@ a {
 img,
 svg {
   width: 100%;
+  height: auto;
   object-fit: cover;
 }
 /* ====== Site Layout ====== 
@@ -53,7 +88,12 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  font-weight: bold;
+  color: black;
+  background-color: white;
 }
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view