CodeYourFuture · XiaoQuark · Jan 31, 2026 · Jan 31, 2026 · Jan 31, 2026 · Feb 3, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,114 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta
+			name="description"
+			content="Accessible t-shirt order form with colour and size selection."
+		/>
+		<title>My form exercise</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body>
+		<header>
+			<h1>T-shirt Picker</h1>
+			<p>Please complete all required (*) fields to complete order</p>
+		</header>
+		<main>
+			<form>
+				<fieldset>
+					<legend>Customer Info</legend>
+					<!-- name input, must be min 2 chars long -->
+					<p>
+						<label for="name"> Name *</label>
+						<input
+							type="text"
+							id="name"
+							name="customerName"
+							placeholder="Jane Smith"
+							minlength="2"
+							required
+						/>
+					</p>
+					<!-- email input, must be a valid email format -->
+					<p>
+						<label for="email"> Email *</label>
+						<input
+							type="email"
+							id="email"
+							name="customerEmail"
+							placeholder="jsmith@email.com"
+							pattern="^[\w.-]+@[\a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+							required
+						/>
+					</p>
+				</fieldset>
+				<fieldset>
+					<legend>Colours</legend>
+					<!-- colours input, limit to 3 colours only -->
+					<p>Please select a colour *</p>
+					<ul>
+						<li>
+							<p>
+								<input
+									type="radio"
+									name="colours"
+									id="red"
+									value="red"
+									required
+								/>
+								<label for="red"> &#x1F7E5; Red </label>
+							</p>
+						</li>
+						<li>
+							<p>
+								<input
+									type="radio"
+									name="colours"
+									id="blue"
+									value="blue"
+								/>
+								<label for="blue">&#x1F7E6; Blue </label>
+							</p>
+						</li>
+						<li>
+							<p>
+								<input
+									type="radio"
+									name="colours"
+									id="yellow"
+									value="yellow"
+								/>
+								<label for="yellow">&#x1F7E8; Yellow </label>
+							</p>
+						</li>
+					</ul>
+				</fieldset>
+				<fieldset>
+					<legend>Size</legend>
+					<p>
+						<!-- size input, limit to 6 sizes: XS, S, M, L, XL, XXL -->
+						<label for="size">Please select a size *</label>
+						<select name="size" id="size" required>
+							<option value="" disabled selected>size</option>
+							<option value="XS">XS</option>
+							<option value="S">S</option>
+							<option value="M">M</option>
+							<option value="L">L</option>
+							<option value="XL">XL</option>
+							<option value="XXL">XXL</option>
+						</select>
+					</p>
+				</fieldset>
+
+				<!-- submit button -->
+				<p><button type="submit">Confirm your order</button></p>
+			</form>
+		</main>
+		<footer>
+			<!-- change to your name-->
+			<h2>Kris Oldrini | CYF: Intro to Programming</h2>
+		</footer>
+	</body>
 </html>
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;
+		}
+	}
 }