Merge pull request #1 from khaliun-dev/feature/wireframe

khaliun-dev · web-flow · commit 425d7dcae2de · 2026-01-23T08:55:17.000Z
London | 26 -ITP-January | Khaliun Baatarkhuu | Sprint 1 | Wireframe to Web Code
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,46 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Understanding the developmental cycle of a product</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A simple website made to explain how README file + WIREFRAME + GIT branching complement each other in developmental workflow for a digital product.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="Image for wireframe article" />
+        <h2>The purpose of a WIREFRAME</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          From a product developmental perspective wireframing is essentially a blueprint, an imagie file sent from a client, laying out the structure of a webpage for example, whether it be content placement, naviagation, basic interactions. Then from that skeletal blueprint developers take over and build the product itself.   
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
       </article>
+    
+     <article>
+        <img src="placeholder.svg" alt="Image for README article" />
+        <h2>Purpose of a README file</h2>
+        <p>
+          Now that you have your website layout, first thing you have to read is the README file. In there you will usually find information about the project, guidelines, requirements, licenses etc. The file acts as an evolving filing overview of the product.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+    
+     <article>
+        <img src="placeholder.svg" alt="Image for GIT branch article" />
+        <h2>Purpose of a branch in GIT</h2>
+        <p>
+          And finally we have branching. As in any collaborative projects, especially if the team is spanning multiple locations, safety - security - support becomes very important. That's where GIT and GITHUB come in. Branching allows you to copy parts of the main code, to work on it independently without accidentally corrupting the main code, and to collaborate effectively on any changes made with your team. Once copy branch has been approved it gets merged into the main code.    
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read more</a>
+      </article>
+      
+      
+      
+      
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        If you liked my website contact me directly on <a href="https://github.com/khaliun-dev">khaliun-dev</a>
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,21 +1,4 @@
-/* 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 ====== */
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -24,8 +7,7 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+
 body {
   background: var(--paper);
   color: var(--ink);
@@ -41,26 +23,27 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== 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;
 }
+header {
+  text-align: center;
+  padding: calc(var(--space) *2);
+  border-bottom: var(--line);
+}
 footer {
   position: fixed;
   bottom: 0;
+   left: 0;
+  width: 100%;
+  background: #222;
+  color: white;
+  padding: var(--space);
   text-align: center;
 }
-/* ====== 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/
-*/
+
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -69,13 +52,11 @@ main {
     grid-column: span 2;
   }
 }
-/* ====== 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.
-*/
+
 article {
+  background: white;
   border: var(--line);
+  border-radius: 4px
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
