diff --git a/README.png b/README.png
new file mode 100644
index 000000000..f6370a0c3
Binary files /dev/null and b/README.png differ
diff --git a/Wireframe/README.png b/Wireframe/README.png
new file mode 100644
index 000000000..f6370a0c3
Binary files /dev/null and b/Wireframe/README.png differ
diff --git a/Wireframe/articles.md b/Wireframe/articles.md
new file mode 100644
index 000000000..45c22071a
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/Wireframe/git.jpg b/Wireframe/git.jpg
new file mode 100644
index 000000000..0fbd5d88b
Binary files /dev/null and b/Wireframe/git.jpg differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..85c073a0f 100644
--- 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
index be835b6c7..5e6a31371 100644
--- 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
new file mode 100644
index 000000000..56f2a0840
Binary files /dev/null and b/Wireframe/wireframe.png..avif differ
diff --git a/git.jpg b/git.jpg
new file mode 100644
index 000000000..0fbd5d88b
Binary files /dev/null and b/git.jpg differ
diff --git a/wireframe.png..avif b/wireframe.png..avif
new file mode 100644
index 000000000..56f2a0840
Binary files /dev/null and b/wireframe.png..avif differ
