Migracode-Barcelona · Dresumewill · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 7, 2025
diff --git a/Wireframe/code.webp b/Wireframe/code.webp
diff --git a/Wireframe/img/Readmefile.webp b/Wireframe/img/Readmefile.webp
diff --git a/Wireframe/img/code1.webp b/Wireframe/img/code1.webp
diff --git a/Wireframe/img/code2.webp b/Wireframe/img/code2.webp
diff --git a/Wireframe/img/codee.webp b/Wireframe/img/codee.webp
diff --git a/Wireframe/img/codelapi.webp b/Wireframe/img/codelapi.webp
diff --git a/Wireframe/img/coder.jpg b/Wireframe/img/coder.jpg
diff --git a/Wireframe/img/coding.webp b/Wireframe/img/coding.webp
diff --git a/Wireframe/img/forkgit.webp b/Wireframe/img/forkgit.webp
diff --git a/Wireframe/img/readme.webp b/Wireframe/img/readme.webp
diff --git a/Wireframe/img/wireframe (1).webp b/Wireframe/img/wireframe (1).webp
diff --git a/Wireframe/img/wireframe1.webp b/Wireframe/img/wireframe1.webp
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,56 @@
-<!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>
-        <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.
-      </p>
-    </footer>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <meta name="description" content="Learn how to transform a wireframe into responsive HTML and CSS web code,">
+    <title>Wireframe to Web Code</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <header>
+      <header class="header">
+        <h1>WIREFRAME TO WEB CODE</h1>
+        <p>A wireframe to web code process is the transformation of a visual layout plan into actual, functional web pages. <br> It's the process of turning a static design blueprint into a working website or a app.</p></p>
+      </header>
+
+        <article>
+         <img srcset="img/codee.webp" alt="code" sizes="(max-width: 600px) 480px, 800px" fetchpriority="high"/>     
+          <div class="article">
+          <h2>What's the purpose of a Wireframe</h2>
+          <p>A wireframe to web code process is the transformation of a visual layout plan into actual, functional web pages. <br>It's the process of turning a static design blueprint into a working website or app.</p>
+          <a href="https://www.productplan.com/glossary/wireframe/" target="_blank" rel="noopener noreferrer">Read more about Wireframes</a>
+        </div>
+        </article>
+
+      </section>
+      </header>
+
+    <main>
+        <section class="articles-container">
+
+            <article>
+              <img src="img/readme.webp" alt="Readme" fetchpriority="high">
+                <h2>What is the purpose of a README file?</h2>
+                <p>A README file is a "manual" for your project. It's the first file someone should read. It explains what the project is, how to install and use it, and how to contribute.</p>
+                <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank" rel="noopener noreferrer">Read more about README file</a>
+            </article>
+
+            <article>
+              <img src="img/forkgit.webp" alt="forkgit" fetchpriority="high">
+                <h2>What is a Git Branch?</h2>
+                <p>A Git branch is an independent "copy" of your project you can work on in isolation. It lets you develop new features (like a 'bio-page') without affecting the main 'main' version of your code.</p>
+                <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">Read more about Git-Branch</a>
+            </article>
+
+        </section>
+    </main>
+
+    <footer>
+        <p>This project was done by Ifeyinwa_Ofulue a.k.a Dresumewill</p> 
+        <p>&copy; 2025 My Wireframe to Web Code</p>
+    </footer>
+
+</body>
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,89 +1,160 @@
-/* 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);
-  --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 */
+/* --- Basic Setup & Accessibility --- */
+* {
+    /* This makes layout math easier */
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
-}
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-}
-img,
-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;
+    font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.2;
+    background-color: #f4f4f4;
+    color: #333;
+    padding-bottom: 80px; 
 }
-footer {
-  position: fixed;
-  bottom: 0;
-  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/
-*/
+
+/* --- Header --- */
+/* Removed the separate 'header' tag selector as it's redundant 
+   with .header now on the <header> element itself. */
+
+header p {
+  margin-bottom: 5px;
+  margin-top: 5px;
+  text-transform: inherit;
+  font-size: 1rem;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+header a {
+    display: inline-block;
+    text-decoration: none;
+    font-weight: bold;
+    color: #fff;
+    background-color: #333;
+    padding: 0.6rem 1.2rem;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+header a:hover {
+    background-color: darkgreen; 
+}
+
+header h1 {
+    margin-bottom: 0.1rem;
+    margin-top: 0.1rem;
+}
+
+.header {
+    background: #333;
+    color: #fff;
+    width: 100%;
+    height: 110px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    padding: 0.4rem;
+    text-align: center; 
+}
+
+.header h1 {
+    text-transform: uppercase;
+    color: aqua;
+}
+
+
+/* --- Main Content & Articles --- */
 main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    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.
-*/
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.articles-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
 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;
-  }
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1 1 300px;
+    background: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow:  2px  4px 6px rgb(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+/* Added this to make image and text separate */
+article img {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+article h2,
+article p,
+article a {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+}
+
+article h2 {
+    color: #000;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
 }
+
+article p {
+    margin-bottom: 1.5rem;
+    color: #333;
+    flex-grow: 1; 
+}
+
+article a {
+    display: inline-block;
+    text-decoration: none;
+    font-weight: bold;
+    color: #fff;
+    background-color: #333;
+    padding: 0.6rem 1.2rem;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+    margin-bottom: 1.5rem;
+    width: fit-content;
+}
+
+article a:hover {
+    background-color: darkgreen;
+}
+
+/* --- Fixed Footer --- */
+footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0.5rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px; /* Set a fixed height */
+    background: #333;
+    color: #fff;
+    text-align: center;
+}
+
+/* Fix for new footer structure */
+footer p {
+    margin: 0.1rem;
+    line-height: 1.2;
+}