CodeYourFuture · XiaoQuark · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026 · Feb 3, 2026
diff --git a/Wireframe/assets/gitflow.webp b/Wireframe/assets/gitflow.webp
diff --git a/Wireframe/assets/reademe_file.webp b/Wireframe/assets/reademe_file.webp
diff --git a/Wireframe/assets/wireframe.webp b/Wireframe/assets/wireframe.webp
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,77 @@
-<!DOCTYPE html>
+<!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>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="description"
+			content="CYF Blog shares beginner-friendly programming tips and guides for aspiring developers."
+		/>
+
+		<title>Wireframe</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<header>
+			<h1>CYF Blog</h1>
+			<p>Your source of programming minutiae</p>
+		</header>
+		<main>
+			<article>
+				<img
+					src="assets/reademe_file.webp"
+					alt="Example of a readme file. On the left we see the file open in the editor and written in markdown, on the right we see a preview of what the file looks like openend in a web browser"
+				/>
+				<h2>Read me if you want to learn about README</h2>
+				<p>
+					A README file contains descriptive information about the
+					content of a directory in which the file is located. The
+					scope of the information generally includes the files of the
+					directory, and may include descendant directories, or even
+					the full directory tree.
+				</p>
+				<a href="https://www.makeareadme.com/"
+					>Learn how to write a README file</a
+				>
+			</article>
+			<article>
+				<img
+					src="assets/wireframe.webp"
+					alt="Four wireframe sketches for a mobile app, lined up next to each other"
+				/>
+				<h2>Wireframes: an essential blueprint</h2>
+				<p>
+					A website wireframe is a visual guide that represents the
+					skeletal framework of a website. It depicts the page layout
+					or arrangement of the website's content, including interface
+					elements and navigational systems, and how they work
+					together.
+				</p>
+				<a href="https://wireframe.cc/">Create wireframe dynamically</a>
+			</article>
+			<article>
+				<img
+					src="assets/gitflow.webp"
+					alt="A diagram showing an example of different git branches types: master branch, develop branch, and two feature branches"
+				/>
+				<h2>Branching for dummies</h2>
+				<p>
+					In Git and other version control systems, branching is
+					creating a copy of a project, file, or directory so changes
+					can be made independently and in parallel. A branch is like
+					a separate workspace where the user can try ideas and apply
+					changes without affecting the main project. Developers can
+					create branches from any branch to work on features, fixes,
+					or experiments.
+				</p>
+				<a
+					href="https://www.codecademy.com/learn/fscp-git-and-github-part-ii/modules/fscp-git-branching/cheatsheet"
+					>Learn to branch</a
+				>
+			</article>
+		</main>
+		<footer>
+			<p>Kris Oldrini for CYF - Intro to Programming</p>
+		</footer>
+	</body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,42 +17,69 @@ As well as useful links to learn more */
  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;
+	--paper: oklch(0.9 0.03 290);
+	--ink: oklch(0.2 0.09 270);
+	--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 */
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+	background: var(--paper);
+	color: var(--ink);
+	font: var(--font);
 }
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+	padding: var(--space) 20px;
+	border: var(--line);
+	border-radius: 50px;
+	margin-top: auto;
+	width: fit-content;
+	background-color: var(--ink);
+	color: var(--paper);
+	line-height: 1;
 }
+
 img,
 svg {
-  width: 100%;
-  object-fit: cover;
+	width: 100%;
+	object-fit: cover;
+	border-radius: 20px 20px 0 0;
+	min-height: 400px;
+	margin-bottom: var(--space);
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+	background-color: var(--ink);
+	color: var(--paper);
+	text-align: center;
+	padding: var(--space);
+}
 main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+	max-width: var(--container);
+	margin: calc(var(--space) * 3) auto calc(var(--space) * 6) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+	position: fixed;
+	width: 100vw;
+	background-color: var(--ink);
+	color: var(--paper);
+	bottom: 0;
+	text-align: center;
+	padding: var(--space) 0;
+}
+h1 {
+	font-size: 4rem;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -62,28 +89,42 @@ https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
 main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	justify-content: center;
+	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.
 */
 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;
-  }
+	border: var(--line);
+	border-radius: 20px;
+	padding-bottom: var(--space);
+	text-align: left;
+	display: grid;
+	gap: var(--space);
+	grid-template-columns: var(--space) 1fr var(--space);
+	grid-template-rows: auto auto 1fr auto;
+	> * {
+		grid-column: 2/3;
+	}
+	> img {
+		grid-column: span 3;
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	main {
+		display: grid;
+		grid-template-columns: 1fr;
+		> *:first-child {
+			grid-column: span 1;
+		}
+	}
 }