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
@@ -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>
+      <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="" />
+        <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="/Wireframe/img/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/img/wireframe.png" 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
@@ -1,89 +1,107 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
-
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
+/* ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --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 ======
- General rules for basic HTML elements in any context */
+
+/* ====== Base Elements ====== */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 60px;
+  margin: 0;
 }
+
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+  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;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
-}
-footer {
-  position: fixed;
-  bottom: 0;
+
+/* ====== 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;
 }
-/* ====== 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
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
+
+/* ====== 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);
-  > *:first-child {
-    grid-column: span 2;
-  }
+  padding: 0 var(--space);
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
+
+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);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
 }
+
+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;
+}