CodeYourFuture · Grajales-K · Dec 29, 2025 · Dec 29, 2025 · Dec 29, 2025 · Dec 30, 2025
diff --git a/Wireframe/img/favicon.jpg b/Wireframe/img/favicon.jpg
diff --git a/Wireframe/img/gitBranches.jpg b/Wireframe/img/gitBranches.jpg
diff --git a/Wireframe/img/readme1.jpg b/Wireframe/img/readme1.jpg
diff --git a/Wireframe/img/wireframe.jpg b/Wireframe/img/wireframe.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,108 @@
 <!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>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Developer Onboarding: The Essential Foundations">
+  <link rel="icon" href="./img/favicon.jpg" type="image/jpg">
+  <script src="https://kit.fontawesome.com/1165876da6.js" crossorigin="anonymous" defer></script>  
+  <title>Wireframe</title>
+  <link rel="stylesheet" href="style.css"/>
+</head>
+
+<body>
+  <header>
+    <h1>Developer Onboarding: Essential Foundations</h1>
+    <p>
+      Mastering collaboration and design tools is the first step toward building high-quality software. This guide explores
+      three core pillars: project documentation, visual planning, and version control   
+    </p>
+  </header>
+  <main>
+    <section>
+      <img src="./img/readme1.jpg" alt="Picture of a how look a raw ReadMe file and the client online version" />
+      <h2>What is the purpose of a ReadMe file</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A README file serves as your repository's welcome mat. It provides crucial information about the project's purpose,
+        functionality, and how to use it. Whether you're collaborating with a team or sharing your code with the world, having
+        clear and concise documentation in your README can save countless hours of confusion and frustration.
       </p>
-    </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
-    <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        You can add a README file to a repository to communicate important information about your project. A README, along with
+        a repository license, citation file, contribution guidelines, and a code of conduct, communicates expectations for your
+        project and helps you manage contributions.
       </p>
-    </footer>
-  </body>
+      <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" class="a-button" aria-label="Read more about how to write a ReadME file (will redirect to a new page)" target="_blank">Read more</a>
+    </section>
+    <article>
+      <img src="./img/wireframe.jpg" alt="Image of a frame design of a website" />
+      <h2>What is a Wireframe</h2>
+      <p>
+        Wireframes can help us create a solid foundation for the product design, but what do they look like? What should be
+        included?
+        A wireframe is a visual diagram that outlines the skeletal framework of a website, app, or other digital product.
+        Sometimes known as a page schematic or screen blueprint, it shows how elements relate to each other and how they’re
+        structured. By using a wireframe tool to build a blueprint, designers can create consistent layouts that meet user
+        needs.
+      </p>
+      <p>
+        Wireframing is a top-level process. User experience (UX) designers often use it to map out the design and layout of
+        their work without going into too much detail. It’s the first stage of the design process before it is fleshed out to
+        add more detail. As such, a wireframe primarily focuses on functionalities and intended behaviors, but not color schemes
+        or final stylistic choices.
+        A wireframe outlines the structure of your page or mobile app. It helps designers figure out where certain elements
+        should live and how the overall design will look.
+      </p>
+      <a href="https://miro.com/wireframe/what-is-a-wireframe/" class="a-button" aria-label="Read more about how to use Wireframes design (will open another page)" target="_blank">Read more</a>
+    </article>
+    <article>
+      <img src="./img/gitBranches.jpg" alt="Picture of how works the git branches workflows"  />
+      <h2>What is Git Branches</h2>
+      <p>
+        Nearly every VCS has some form of branching support. Branching means you diverge from the main line of development and
+        continue to do work without messing with that main line. In many VCS tools, this is a somewhat expensive process, often
+        requiring you to create a new copy of your source code directory, which can take a long time for large projects.
+      </p>
+      <p>
+        Some people refer to Git’s branching model as its “killer feature,” and it certainly sets Git apart in the VCS
+        community. Why is it so special? The way Git branches is incredibly lightweight, making branching operations nearly
+        instantaneous, and switching back and forth between branches generally just as fast. Unlike many other VCSs, Git
+        encourages workflows that branch and merge often, even multiple times in a day. Understanding and mastering this feature
+        gives you a powerful and unique tool and can entirely change the way that you develop.
+      </p>
+      <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" class="a-button" aria-label="Read More about uses of git branches (will redirect to another page)" target="_blank" >Read more</a>
+    </article>
+  </main>
+  <footer>
+    <div class="footer-content">
+      <h3>Contact Us</h3>
+      <p>Email: info@example.com</p>
+      <p>Phone: +44 020484 800084</p>
+      <p>Adresss: Threadneedle Street, London, EC2R 8AH</p>
+    </div>
+    <div class="footer-content">
+      <h3>Quick Links</h3>
+      <ul class="list">
+        <li><a href="">Home</a></li>
+        <li><a href="">about</a></li>
+        <li><a href="">Contact</a></li>
+      </ul>
+    </div>
+    <div class="footer-content">
+      <h3>Follow Us</h3>
+      <div class="socials-icons">
+        <a href="" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+        <a href="" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+        <a href="" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+        <a href="" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+      </div>
+    </div> 
+    <div class="botton-bar">
+      <p>&copy;   All Rights Reserved</p>
+    </div>
+  </footer>
+</body>
+
 </html>
+
diff --git a/Wireframe/notes.md b/Wireframe/notes.md
@@ -0,0 +1,31 @@
+Important infomation for this project
+
+
+--------- Site Layout
+
+Setting the overall rules for page regions
+https://www.w3.org/WAI/tutorials/page-structure/regions/
+
+
+
+-------- 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 E lements view
+Play with the options that come up.
+
+https://developer.chrome.com/docs/devtools/css/grid
+https://gridbyexample.com/learn/
+
+
+--------- Page to resize the images
+https://picresize.com/en/results 
+
+
+--------- Grid tutorial 
+https: //v1.scrimba.com/learn/cssgrid/intro-to-the-css-grid-course-cg9PpTb 
+
+
+--------- Design Palette 
+https: //web.dev/articles/min-max-clamp
+https://scrimba.com/learn-css-variables-c026
+