CodeYourFuture · lintsang · May 24, 2026 · May 24, 2026 · May 24, 2026 · May 24, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,27 +7,50 @@
     <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>
+    <div id="container">
+      <header>
+        <h1>Web Development Foundation</h1>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          There are some frequently asked questions for beginner developers.
         </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>
+      </header>
+      <main>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="illustration of a readme file" />
+          </div>
+          <h2>1. What is the purpose of a README file?</h2>
+          <p>
+            README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.
+          </p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
+        </article>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="illustator of a wireframe icon" />
+          </div>
+          <h2>2. What is the purpose of a wireframe?</h2>
+          <p>
+            Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.
+          </p>
+          <a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
+        </article>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="illustrator of github icon" />
+          </div>
+          <h2>3. What is a branch in Git?</h2>
+          <p>
+            A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.
+          </p>
+          <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
+        </article>  
+      </main>
+      <footer>
+          <p>
+            By Lin Tsang. This webpage serves as a test environment. Some images and media displayed on this site are sourced from external websites for demonstrative and educational purposes.<br>All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/
+          </p>
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -24,36 +24,72 @@ 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);
   font: var(--font);
+  text-align: center;
+  display: grid;
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
+p {
+  padding: 0 0 30px 0;
+}
+
+.image-wrapper img {
+  width: 100%;
+  /* aspect ratio for image */
+  aspect-ratio: 16 / 9;
+}
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+#container {
+  display:flex;
+  flex-direction:column;
+  min-height: 100vh;
+}
+
+header, main {
+  width: 80%;
+  margin-inline: auto;
+}
+
 main {
   max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  margin: 0 auto calc(var(--space) * 10) auto;
+  min-height: 110dvh;
+  display: grid;
 }
+
 footer {
   position: fixed;
   bottom: 0;
+  font-size: smaller;
+  width: 100%;
+  height: auto;;
   text-align: center;
+  background-color: #ababab;
+  padding: 10px 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
@@ -69,6 +105,7 @@ 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.