CodeYourFuture · HadiVahidi20 · Sep 7, 2025 · Sep 7, 2025 · Sep 7, 2025 · Sep 7, 2025
diff --git a/Wireframe/assets/branch.png b/Wireframe/assets/branch.png
diff --git a/Wireframe/assets/readmefile.png b/Wireframe/assets/readmefile.png
diff --git a/Wireframe/assets/wireframe.png b/Wireframe/assets/wireframe.png
diff --git a/Wireframe/brach.html b/Wireframe/brach.html
@@ -0,0 +1,47 @@
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Web Development Essentials</title>
+      <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+
+<div class="container">
+  <h1>What is a Branch in Git</h1>
+    <p>
+    A branch in Git is like a separate workspace or version of a project. 
+    It allows developers to work on new features, fixes, or experiments without affecting the main code. 
+    The main branch is usually called <strong>main</strong> or <strong>master</strong>.
+    </p>
+
+    <p>
+    When you create a branch, you can make changes freely. 
+    Later, if everything works well, you can merge the branch back into the main branch. 
+    This helps teams work together safely and keeps the main code stable.
+    </p>
+
+    <p>
+    Branches are useful for organizing work, testing new ideas, and managing different versions of a project. 
+    They make it easier to collaborate without breaking the main code.
+    </p>
+
+    <p>
+    In short, a branch in Git helps developers work independently, test changes safely, 
+    and keep the project organized.
+    </p>
+
+    <p>
+        <a href="index.html">
+            Go Back
+        </a>
+    </p>
+</div>
+      <footer>
+        <p>
+          this is my first web page on code your future | &copy; Hadi Vahidi.
+        </p>
+      </footer>
+    </body>
+  </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,51 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <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>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Web Development Essentials</title>
+      <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+      <header class="header">
+        <h1>Web Development Essentials</h1>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          3 First Essentials of web developing.
         </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+      </header>
+      <main>
+        <article>
+          <img src="./assets/readmefile.png" alt="readme image" />
+          <h2>What is the purpose of a README file?</h2>
+          <p>
+          A README file provides an overview of a project, explaining what it does, how to install and use it, and who created it. It can also include guidelines for contributing, contact information, and links to additional resources. Essentially, it helps users and developers quickly understand and work with the project.
+          </p>
+          <a href="readmeArticle.html">Read more</a>
+        </article>
+        <article>
+          <img src="./assets/wireframe.png" alt="wireframe image" />
+          <h2>What is the purpose of a wireframe? </h2>
+          <p>
+            A <span>wireframe</span> is a visual blueprint of a website or app that shows the layout and structure of content and interface elements before design or development begins. Its purpose is to plan the placement of text, images, buttons, and navigation, ensuring a clear and logical user experience. Wireframes also serve as a communication tool for designers, developers, and stakeholders, helping them agree on the structure early and make changes easily, which saves time and resources in the design process.
+
+          </p>
+          <a href="wireframe.html">Read more</a>
+        </article>
+        <article>
+          <img src="./assets/branch.png" alt="branch image" />
+          <h2>What is a branch in Git?</h2>
+          <p>
+            A <span>branch</span> in Git is a separate line of development within a repository. It allows you to work on new features, bug fixes, or experiments <span> without affecting the main codebase</span> (usually called main or master). Each branch can have its own commits, so you can make changes safely and independently. Once the work on a branch is complete, it can be merged back into the main branch, incorporating the new changes.
+
+In short, a branch is like a parallel workspace for development, helping teams organize work and collaborate efficiently.
+          </p>
+          <a href="brach.html">Read more</a>
+        </article>
+      </main>
+      <footer>
+        <p>
+          this is my first web page on code your future | &copy; Hadi Vahidi.
+        </p>
+      </footer>
+    </body>
+  </html>
diff --git a/Wireframe/readmeArticle.html b/Wireframe/readmeArticle.html
@@ -0,0 +1,51 @@
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+       <title>Purpose of a README File</title>
+      <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+<div class="container">
+    <h1>Purpose of a README File</h1>
+
+    <p>
+    A README file is a simple text file that explains important information about a project. 
+    It usually comes with software, code, or any kind of digital project. The main purpose of a README 
+    file is to help users and developers understand what the project is about and how to use it.
+    </p>
+
+    <p>
+    A good README file typically contains several parts. First, it introduces the project and explains 
+    its goals. Second, it may provide instructions on how to install or run the project. Third, it 
+    can explain the structure of the project, showing where important files are located. Finally, 
+    it can include information about how to contribute to the project and who created it.
+    </p>
+
+    <p>
+    Having a README file makes it easier for others to start using a project without confusion. 
+    It is also helpful for the project owner as it documents the work clearly. Overall, a README 
+    file is a small but very important document for communication and guidance.
+    </p>
+
+    <p>
+    In short, a README file helps users understand a project, guides them on how to use it, 
+    and provides useful information for anyone who wants to contribute.
+    </p>
+
+
+    <p>
+        <a href="index.html">
+          Go Back
+        </a>
+    </p>
+    </div>
+      <footer>
+        <p>
+          this is my first web page on code your future | &copy; Hadi Vahidi.
+        </p>
+      </footer>
+
+    </body>
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,13 +16,27 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 :root {
+
   --paper: oklch(7 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;
+  --color-dark-gray: oklch(0% 0 0);
+
+}
+.container {
+  max-width: 70vw;
+  margin: 0 auto;
+
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
@@ -31,28 +45,68 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+.header {
+  text-align: center;
+  padding: calc(var(--space) * 2) var(--space) var(--space) var(--space);
+  margin-bottom: calc(var(--space) * 2);
+}
+
+h1{
+  margin-bottom: var(--space);
+
+  }
+
+.header p {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--color-dark-gray);
+}
+
 a {
   padding: var(--space);
   border: var(--line);
+  border-radius: 0.5rem;
+  text-decoration: none;
   max-width: fit-content;
+  transition: 0.3s;
+
+}
+
+a:hover {
+  filter: brightness(0.8);
+  transform: scale(1.05);
 }
-img,
-svg {
+
+h2 {
+
+  font-size: 1.5rem;
+}
+p {
+  margin-bottom: var(--space);
+}
+img{
   width: 100%;
-  object-fit: cover;
+  height: auto;
+  display: block;
+  margin-bottom: var(--space);}
+
+span {
+  font-weight: bold;
+  color: var(--color-dark-gray);
 }
 /* ====== 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;
+  bottom: 0;      
+  background-color: rgb(144, 162, 178);
+  padding: var(--space);
+  border-top: var(--line);
   text-align: center;
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -62,6 +116,10 @@ https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
 main {
+
+    max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+   padding: 10px 10px 60px  10px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
@@ -76,6 +134,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 */
 article {
   border: var(--line);
+  border-radius: 0.5rem;
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
@@ -85,5 +144,11 @@ article {
   }
   > img {
     grid-column: span 3;
+    border-radius: 0.5rem;
+  }
+  img:hover {
+    filter: brightness(0.8);
+    transition: 0.3s;
+    transform: scale(1.01);
   }
 }
diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html
@@ -0,0 +1,47 @@
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Purpose of a Wireframe</title>
+      <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+      <div class="container">
+      <h1>Purpose of a Wireframe</h1>
+
+      <p>
+      A wireframe is a simple visual guide that shows the basic structure of a website or application. 
+      It usually uses simple shapes and lines to represent different parts of a page, like headers, 
+      buttons, images, and text areas. Wireframes do not show colors or detailed design; they focus on layout and functionality.
+      </p>
+
+      <p>
+      The main purpose of a wireframe is to plan and organize a project before full design and development begin. 
+      It helps designers, developers, and clients understand how the page will work and where each element should be placed. 
+      Wireframes also make it easier to find problems early, saving time and effort later.
+      </p>
+
+      <p>
+      Wireframes are useful for communication. They allow teams to discuss ideas clearly and make decisions 
+      about the structure of the website or app without getting distracted by colors, fonts, or images.
+      </p>
+
+      <p>
+      In short, a wireframe helps organize a project, improve communication, and plan the layout efficiently.
+      </p>
+
+
+          <a href="index.html">
+              Go Back
+          </a>
+
+      </div>
+       <footer>
+        <p>
+          this is my first web page on code your future | &copy; Hadi Vahidi.
+        </p>
+      </footer>
+
+</body>
+</html>