CodeYourFuture · SandzSoft · May 20, 2026 · May 20, 2026 · May 21, 2026 · May 21, 2026
diff --git a/Wireframe/git-branch-svgrepo-com.svg b/Wireframe/git-branch-svgrepo-com.svg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,40 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Web Development Basics</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page explains some basic concepts in web development, including what a README file is, what a wireframe is, and how Git branches are used. These ideas help developers plan, build, and manage websites more effectively.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.svg" alt="README file illustration" />
+         <h2>The Purpose of a README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a plain text or Markdown document (usually named README.md) placed at the root of a project folder. It serves as a project's "welcome mat," giving visitors and contributors a quick summary of what the project does, how to install it, and how to use it.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article>
+        <img src="wireframe-icon.svg" alt="Wireframe layout illustration" />
+        <h2>The Purpose of a Wireframe</h2>
+        <p>
+          A wireframe is a simple visual layout of a webpage or application. It helps developers and designers plan the structure and content before building the final product.
+        </p>
+        <a href="https://www.nngroup.com/articles/wireframes/">Read more</a>
+      </article>
+      <article>
+        <img src="git-branch-svgrepo-com.svg" alt="Git branch diagram" />
+        <h2>The Purpose of Git Branches</h2>
+        <p>
+          A Git branch is a separate workspace used to make changes safely. Developers use branches to work on new features without affecting the main project.
+        </p>
+        <a href="https://git-scm.com/docs/git-branch">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © Web Development Basics - Learning Project
       </p>
     </footer>
   </body>

diff --git a/Wireframe/readme.svg b/Wireframe/readme.svg
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -31,11 +31,19 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
+h1,
+header p {
+  text-align: center;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
+
 img,
 svg {
   width: 100%;
@@ -53,6 +61,7 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -77,6 +86,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
+  padding: 10px;
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);

diff --git a/Wireframe/wireframe-icon.svg b/Wireframe/wireframe-icon.svg