CodeYourFuture · Ebrahim-Moqbel · Jan 13, 2026 · Jan 13, 2026 · Jan 24, 2026 · Jan 24, 2026
diff --git a/README.png b/README.png
diff --git a/Wireframe/README.png b/Wireframe/README.png
diff --git a/Wireframe/articles.md b/Wireframe/articles.md
@@ -0,0 +1,8 @@
+What is Git and why is it used?
+
+Git is a version control system used for tracking changes in computer files. It is generally used for source code management in software development.
+
+Git is used to tracking changes in the source code
+The distributed version control tool is used for source code management
+It allows multiple developers to work together
+It supports non-linear development through its thousands of parallel branches
diff --git a/Wireframe/git.jpg b/Wireframe/git.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,27 +7,48 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+    <header class="header">
+      <h1> Web Development concepts</h1>
+      <hp> this page will give you the understanding of README ,Git and Wireframe</p>
     </header>
     <main>
+
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="README.png" alt="" />
+        <h2>What is the Purpose of a README file</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          README files typically include information on what a project does, why is it usefull and how users can get started with the project 
+          and how can they get help with the project...
+
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
+
+      <article>
+        <img src="git.jpg" alt="">
+        <h2>What is a branch in Git</h2>
+        <p>
+          In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
+
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp?remote=github">Read more</a>
+
+      </article>
+
+
+      <article>
+        <img src="wireframe.png..avif" alt="" />
+        <h2>What is the purpose of wireframe </h2>
+        <p>
+          A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement—not on colors, fonts, or any visual polish.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/" >Read more</a>
+
+      </article>
+
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+    <footer class="footer">
+      <p>This website is made by Ebrahim Moqbel </p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,6 +16,7 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -30,11 +31,13 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 60px;
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  border-style: none;
 }
 img,
 svg {
@@ -48,11 +51,15 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  display: flex;
 }
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  height: 60px;
+  background-color:#f6f4f4;
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +94,7 @@ article {
     grid-column: span 3;
   }
 }
+
+header {
+  text-align: center;
+}
diff --git a/Wireframe/wireframe.png..avif b/Wireframe/wireframe.png..avif
diff --git a/git.jpg b/git.jpg
diff --git a/wireframe.png..avif b/wireframe.png..avif