CodeYourFuture · seiddhagoss · Feb 1, 2026 · Feb 1, 2026 · Feb 4, 2026
diff --git a/Form-Controls/articles.md b/Form-Controls/articles.md
@@ -0,0 +1,6 @@
+What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
+black
+What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
+All fields are required. Do not write a form
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,89 +1,105 @@
-/* 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 ====== */
+/* ====== 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 */
+ --paper: oklch(7 0 0);
+ --color: oklch(70% 0.15 250);
+ --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 ====== */
+*, 
+*::before, 
+*::after { box-sizing: border-box; 
+         }
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+ margin: 0;
+ background: var(--paper); 
+ color: var(--ink);
+ font: var(--font); 
+}
+a { 
+ display: inline-block; 
+ padding: var(--space);
+ border: var(--line); 
+ max-width: fit-content; 
+ text-decoration: none;
+ color: inherit; 
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+a:hover,
+a:focus-visible {
+ background: var(--color); 
+color: black;
 }
 img,
-svg {
-  width: 100%;
-  object-fit: cover;
+svg { 
+ width: 100%;
+ height: auto;
+ object-fit: cover; 
+}
+/* ====== Site Layout ====== */
+header { 
+ max-width: var(--container); 
+ margin: 0 auto; 
+ padding: calc(var(--space) * 2) var(--space); 
+ text-align: left; 
 }
-/* ====== 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;
+header h1 {
+ margin: 0 0 var(--space) 0;
+} 
+header p {
+ margin: 0;
 }
-footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+main { 
+ max-width: var(--container);
+ margin: 0 auto calc(var(--space) * 4) auto;
+ padding: 0 var(--space) calc(var(--space) * 6); 
 }
-/* ====== 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/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+/* Footer fixed to bottom */ 
+footer { 
+ position: fixed; 
+ bottom: 0; left: 0;
+ right: 0; 
+ text-align: center;
+ padding: var(--space);
+ background: var(--paper); 
+ border-top: var(--line); 
+} 
+/* ====== Articles Grid Layout ====== */ 
+main { 
+ display: grid; 
+ grid-template-columns:1fr 1fr;
+ gap: var(--space); 
+} 
+main > *: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;
-  }
+/* ====== Article Layout ====== */ 
+article { 
+ border: var(--line); 
+ padding-bottom: var(--space);
+ text-align: left;
+ display: grid;
+ grid-template-columns: var(--space) 1fr var(--space);
+} 
+article > * {
+ grid-column: 2 / 3; 
+ margin-top: var(--space);
+} 
+article > img { 
+ grid-column: 1 / 4;
+ margin: 0 0 var(--space) 0;
+} 
+article h2 { 
+ margin: 0;
+} 
+/* ====== Responsive tweak ====== */
+@media (max-width: 700px) { 
+ main { grid-template-columns: 1fr;
+      } 
+ main > *:first-child {
+  grid-column: auto;
+ } 
+ footer {
+  position: static;
+ } 
 }
diff --git a/index.html b/index.html
@@ -1,46 +1,81 @@
-<!DOCTYPE html>
+<!DOCTYPE html> 
 <html lang="en">
-  <head>
+  <head> 
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Coursework</title>
-    <style>
-      :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;
-      }
-      body {
-        background: var(--paper);
-        color: var(--ink);
-        font: var(--font);
-        max-width: 1280px;
-        margin: 0 auto;
-      }
-    </style>
-  </head>
+    <title>README, Wireframes & Git Branches</title>
+    <meta
+      name="description" 
+      content="A simple guide explaining README files, wireframes, and Git branches." />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+  </head> 
   <body>
-    <header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
+    <header>
+      <h1>Planning & Documenting Your Code</h1>
+      <p>
+        Learn what a README is for, why wireframes matter, and how Git branches help you work safely.
+      </p> 
+    </header>
     <main>
-      <ol>
-        <li>
-          <h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
-          <p>
-            Mentors:
-            <a href="Wireframe/readme.md">open the assignment in a tab</a>
-          </p>
-        </li>
-        <li>
-          <h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
-          <p>
-            Mentors:
-            <a href="Form-Controls/readme.md">open the assignment in a tab</a>
-          </p>
-        </li>
-      </ol>
-    </main>
-    <footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
-  </body>
+      <article>
+        <img
+          src="https://via.placeholder.com/1280x400?text=README+Files" alt="Abstract illustration representing documentation" />
+        <h2>What is the purpose of a README file?</h2> 
+        <p>
+          A README file is the first place someone looks to understand your project. It explains what the project does, how to install and run it, and any important details a user or contributor needs to know. 
+        </p>
+        <p> 
+          A clear README saves time, reduces confusion, and makes your work more welcoming to others. 
+        </p>
+        <a
+          href="https://www.makeareadme.com/" 
+          target="_blank"
+          rel="noopener noreferrer" 
+          > 
+          Learn more about writing READMEs
+        </a>
+      </article>
+      <article> 
+        <img 
+          src="https://via.placeholder.com/640x300?text=Wireframes" alt="Simple wireframe sketch of a webpage layout"
+          />
+          <h2>What is the purpose of a wireframe?</h2> 
+        <p> 
+          A wireframe is a simple visual plan of a webpage or app. It focuses on layout, structure, and content placement rather than colours or final design details.
+        </p>
+        <p> 
+          Wireframes help you think about user experience early, spot problems before you code, and communicate ideas clearly with others.
+        </p> 
+        <a
+          href="https://www.productplan.com/glossary/wireframe/" 
+          target="_blank" 
+          rel="noopener noreferrer" 
+          > 
+          Read more about wireframes
+        </a>
+      </article> 
+      <article>
+        <img 
+          src="https://via.placeholder.com/640x300?text=Git+Branches" alt="Diagram showing branches in a version control system" 
+          />
+        <h2>What is a branch in Git?</h2> 
+        <p>
+          A branch in Git is a separate line of development. It lets you work on new features or fixes without changing the main codebase until you are ready.
+        </p> 
+        <p>
+          By using branches, you can experiment safely, review changes, and then merge them back into the main branch when they are tested and stable. 
+        </p>
+        <a   
+          href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+          target="_blank"
+          rel="noopener noreferrer" 
+          > 
+          Learn more about Git branches 
+        </a>
+      </article> 
+    </main> 
+    <footer>
+      <p> Built with semantic HTML, CSS grid, and Git version control.</p>
+    </footer> 
+  </body> 
 </html>