CodeYourFuture · Elisabeth-Matulian · Jan 10, 2026 · Jan 19, 2026 · Jan 20, 2026 · Jan 21, 2026
diff --git a/Wireframe/image_branch.webp b/Wireframe/image_branch.webp
diff --git a/Wireframe/image_readme.webp b/Wireframe/image_readme.webp
diff --git a/Wireframe/image_wireframe.avif b/Wireframe/image_wireframe.avif
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>
+
+<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>Key Web Development Concepts</h1>
+    <p>
+      Definitions of README files, Wireframes, and Git branches.
+    </p>
+  </header>
+  <main>
+    <article>
+      <img src="image_readme.webp" alt="A picture about the necessity of the readme file" />
+      <h2>What is a README file?</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A README file is a document included in a project that explains what the project is about, how to set it up, and
+        how to use it. It helps other developers and users understand your work quickly.
       </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>
+      <a
+        href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
+        more</a>
+    </article>
+    <article>
+      <img src="image_wireframe.avif" alt="Wireframe sketch example" />
+      <h2>What is a Wireframe?</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a simple visual guide that represents the structure of a webpage or app. It shows where elements like buttons, text, and images will be placed and how users will interact with them.
       </p>
-    </footer>
-  </body>
-</html>
+      <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+    </article>
+    <article>
+      <img src="image_branch.webp" alt="Git branches diagram" />
+      <h2>What is a Branch in Git?</h2>
+      <p>
+        A branch in Git is a separate line of development in a project. It allows you to work on new features or fixes without affecting the main code. Once ready, the changes can be merged back into the main branch.
+      </p>
+      <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
+    </article>
+  </main>
+  <footer>
+    <ul>
+      <li><a href="mailto:elisabeth.matulian@example.com">Email</a></li>
+      <li><a href="https://codeyourfuture.io">Website</a></li>
+      <li><p>© 2026 Elisabeth Matulian</p></li>
+    </ul>
+  </footer>
+</body>
+
+</html>
diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -48,9 +48,9 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  display: flex;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
@@ -87,3 +87,11 @@ article {
     grid-column: span 3;
   }
 }
+
+header {
+  text-align: center;
+}
+li {
+  padding: 20px;
+  font-size: 10px;
+}
diff --git a/Wireframe/wireframe examples.htm b/Wireframe/wireframe examples.htm
diff --git a/Wireframe/wireframe examples_files/1-Valeria-Pivovarovas-wireframe-example.png b/Wireframe/wireframe examples_files/1-Valeria-Pivovarovas-wireframe-example.png
diff --git a/Wireframe/wireframe examples_files/2-Jonathan-Centinos-wireframe-example.png b/Wireframe/wireframe examples_files/2-Jonathan-Centinos-wireframe-example.png
diff --git a/Wireframe/wireframe examples_files/3-Kiras-wireframe-example.jpg b/Wireframe/wireframe examples_files/3-Kiras-wireframe-example.jpg
diff --git a/Wireframe/wireframe examples_files/4-Andry-Yorkes-wireframe-example.png b/Wireframe/wireframe examples_files/4-Andry-Yorkes-wireframe-example.png
diff --git a/Wireframe/wireframe examples_files/5-JT-Graukes-wireframe-example.png b/Wireframe/wireframe examples_files/5-JT-Graukes-wireframe-example.png
diff --git a/Wireframe/wireframe examples_files/50814766(1).js b/Wireframe/wireframe examples_files/50814766(1).js
diff --git a/Wireframe/wireframe examples_files/50814766.js b/Wireframe/wireframe examples_files/50814766.js
diff --git a/...ples_files/5acb4469bb322fbe752ddf106fc31e510036e94e02039533ead91e1be4015fa8.png b/...ples_files/5acb4469bb322fbe752ddf106fc31e510036e94e02039533ead91e1be4015fa8.png
diff --git a/Wireframe/wireframe examples_files/6-JT-Graukes-wireframe-example.png b/Wireframe/wireframe examples_files/6-JT-Graukes-wireframe-example.png
diff --git a/...me examples_files/8-must-see-wireframe-examples-to-inspire-your-next-design.jpg b/...me examples_files/8-must-see-wireframe-examples-to-inspire-your-next-design.jpg
diff --git a/Wireframe/wireframe examples_files/Cacoo-8-must-see-wireframes-680x450-1.png b/Wireframe/wireframe examples_files/Cacoo-8-must-see-wireframes-680x450-1.png
diff --git a/Wireframe/wireframe examples_files/Cacoo-Funny-flowcharts-680x450-1.png b/Wireframe/wireframe examples_files/Cacoo-Funny-flowcharts-680x450-1.png
diff --git a/Wireframe/wireframe examples_files/Cacoo-Rapid-prototyping-Blog.png b/Wireframe/wireframe examples_files/Cacoo-Rapid-prototyping-Blog.png
diff --git a/Wireframe/wireframe examples_files/Infographic-Cheat-Sheet.jpg b/Wireframe/wireframe examples_files/Infographic-Cheat-Sheet.jpg
diff --git a/...frame examples_files/The-mobile-app-design-best-practices-you-need-to-know_.png b/...frame examples_files/The-mobile-app-design-best-practices-you-need-to-know_.png
diff --git a/Wireframe/wireframe examples_files/aaa5778d-dfeeb66a5236af8a7ec1.js b/Wireframe/wireframe examples_files/aaa5778d-dfeeb66a5236af8a7ec1.js
diff --git a/Wireframe/wireframe examples_files/analytics.js b/Wireframe/wireframe examples_files/analytics.js
diff --git a/Wireframe/wireframe examples_files/app-137a97abe8186d76d00a.js b/Wireframe/wireframe examples_files/app-137a97abe8186d76d00a.js
diff --git a/Wireframe/wireframe examples_files/ba69a854862965.596d094d3f8bf.png b/Wireframe/wireframe examples_files/ba69a854862965.596d094d3f8bf.png
diff --git a/Wireframe/wireframe examples_files/backlog_favicon.svg b/Wireframe/wireframe examples_files/backlog_favicon.svg
diff --git a/Wireframe/wireframe examples_files/banner.js b/Wireframe/wireframe examples_files/banner.js
diff --git a/Wireframe/wireframe examples_files/c0d53ec4-e013aaf17fc1298b3a3d.js b/Wireframe/wireframe examples_files/c0d53ec4-e013aaf17fc1298b3a3d.js
diff --git a/Wireframe/wireframe examples_files/cacoo_favicon.svg b/Wireframe/wireframe examples_files/cacoo_favicon.svg
diff --git a/Wireframe/wireframe examples_files/font.css b/Wireframe/wireframe examples_files/font.css
@@ -0,0 +1,53 @@
+/*
+ * styled-components and SSR does not work well with @font-face. They will
+ * introduce a reloading of font-face every time it is used and case a
+ * distracting flickering effect. To solve this we sipmly use a standard
+ * css file where we define our @font-face's and import it directly into
+ * the index.html (in gatsby this is in src/html.js -- if it doesn't exist
+ * it means you are using the default one that you can copy from
+ * .cache/default-html.js)
+ *
+ * ref: https://font-face-import.netlify.app/
+ * ref: https://styled-components.com/docs/faqs#how-do-i-fix-flickering-text-after-server-side-rendering
+ * */
+
+/**
+* font-face
+*/
+
+:root {
+  /* Font */
+  --font-default: "proxima-nova", Helvetica, Arial, sans-serif;
+  --font-highlight: "Gilroy", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+}
+
+@font-face {
+  font-family: Gilroy;
+  font-display: swap;
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('/fonts/gilroy-regular-webfont.woff2') format('woff2'),
+    url('/fonts/gilroy-regular-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: Gilroy;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+  src:
+    url('/fonts/gilroy-medium-webfont.woff2') format('woff2'),
+    url('/fonts/gilroy-medium-webfont.woff') format('woff');
+}
+
+@font-face {
+  font-family: Gilroy;
+  font-display: swap;
+  font-style: normal;
+  font-weight: bold;
+  src:
+    url('/fonts/gilroy-bold-webfont.woff2') format('woff2'),
+    url('/fonts/gilroy-bold-webfont.woff') format('woff');
+}
+
diff --git a/Wireframe/wireframe examples_files/framework-4768269dd318f77dd9c3.js b/Wireframe/wireframe examples_files/framework-4768269dd318f77dd9c3.js
diff --git a/Wireframe/wireframe examples_files/get-started-backlog.png b/Wireframe/wireframe examples_files/get-started-backlog.png
diff --git a/Wireframe/wireframe examples_files/get-started-cacoo.png b/Wireframe/wireframe examples_files/get-started-cacoo.png