CodeYourFuture · Ebrahim-Moqbel · Jan 13, 2026 · Jan 13, 2026 · Jan 24, 2026 · Jan 24, 2026
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/img/README.png b/Wireframe/img/README.png
diff --git a/Wireframe/img/git.jpg b/Wireframe/img/git.jpg
diff --git a/Wireframe/img/wireframe.png b/Wireframe/img/wireframe.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,54 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description"
+  content="A page describe the defination of git, readme file and wireframe Usability and for a webpage" />
     <title>Wireframe</title>
     <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>
+      <p> 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="/Wireframe/img/README.png" alt="an image says make a readme file because nobody can ready your mind yet" />
+        <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" target="_blank">Read more</a>
       </article>
+
+      <article>
+        <img src="/Wireframe/img/git.jpg" alt=" git logo">
+        <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" target="_blank" >Read more</a>
+
+      </article>
+
+
+      <article>
+        <img src="/Wireframe/img/wireframe.png" alt="illustraiton representing a website wireframe" />
+        <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/" target="_blank" >Read more</a>
+
+      </article>
+
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+    <footer >
+      <p>This website is made by Ebrahim Moqbel </p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,8 +1,107 @@
-/*
-  (Suggestion) Use a top-down approach when applying CSS:
-  1. Lay out the top-level elements: <header>, <main>, <footer>
-  2. Lay out the articles within <main>
-  3. Style individual elements
-
-  Please REMOVE this comment before submitting your work.
-*/
+/* ====== Design Palette ====== */
+:root {
+  --paper: oklch(97% 0 0);
+  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --font: 100%/1.5 system-ui;
+  --space: clamp(6px, 6px + 2vw, 15px);
+  --line: 1px solid;
+  --container: 1280px;
+}
+
+/* ====== Base Elements ====== */
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font: var(--font);
+  padding-bottom: 60px;
+  margin: 0;
+}
+
+a {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: #333;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 4px;
+  text-align: center;
+  margin-top: var(--space);
+}
+
+a:hover {
+  background: #555;
+}
+
+img,
+svg {
+  width: 100%;
+  height: 250px; /* Fixed height for all images */
+  object-fit: cover;
+  display: block;
+}
+
+/* ====== Header ====== */
+.header {
+  text-align: center;
+  padding: calc(var(--space) * 2);
+  background-color: #f6f4f4;
+  margin-bottom: calc(var(--space) * 2);
+}
+
+.header h1 {
+  margin: 0 0 var(--space) 0;
+}
+
+/* ====== Site Layout ====== */
+main {
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+  padding: 0 var(--space);
+}
+
+main > *:first-child {
+  grid-column: span 2;
+}
+
+/* ====== Article Layout ====== */
+article {
+  border: var(--line);
+  padding-bottom: var(--space);
+  text-align: left;
+  display: grid;
+  grid-template-columns: var(--space) 1fr var(--space);
+}
+
+article > * {
+  grid-column: 2/3;
+}
+
+article > img {
+  grid-column: span 3;
+  margin-bottom: var(--space);
+}
+
+article h2 {
+  margin-top: var(--space);
+}
+
+/* ====== Footer ====== */
+footer {
+  position: fixed;
+  bottom: 0;
+  text-align: center;
+  height: 60px;
+  background-color: #f6f4f4;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: var(--line);
+}
+
+footer p {
+  margin: 0;
+}