CodeYourFuture · VictoriaScottCodes · Jun 3, 2025 · Jun 3, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,106 @@
 <!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" />
+  <title>My form exercise</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+
+    label, input[type="radio"], input[type="text"], input[type="email"] {
+      display: inline-block;
+      padding: 12px;
+      margin-bottom: 12px;
+    }
+
+    input[type="radio"] {
+      width: 24px;
+      height: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    fieldset > div {
+      margin-bottom: 16px;
+    }
+
+    button {
+      padding: 14px 28px;
+      font-size: 16px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>T-shirt Pick</h1>
+  </header>
+
+  <main role="main">
+    <form action="/my-handling-form-page" method="post" aria-label="T-shirt selection form">
+      <div class="form-group">
+        <label for="name">Enter your name:</label>
+        <input type="text" id="name" name="user_name" required aria-required="true" />
+      </div>
+
+      <div class="form-group">
+        <label for="mail">Enter your email:</label>
+        <input type="email" id="mail" name="user_email" required aria-required="true" />
+      </div>
+
+      <fieldset>
+        <legend>What colour T-shirt would you like?</legend>
+        <div>
+          <input type="radio" id="black" name="colour" value="Black" required />
+          <label for="black">Black</label>
+        </div>
+        <div>
+          <input type="radio" id="white" name="colour" value="White" />
+          <label for="white">White</label>
+        </div>
+        <div>
+          <input type="radio" id="grey" name="colour" value="Grey" />
+          <label for="grey">Grey</label>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>What size do you want?</legend>
+        <div>
+          <input type="radio" id="size-xs" name="size" value="XS" required />
+          <label for="size-xs">XS</label>
+        </div>
+        <div>
+          <input type="radio" id="size-s" name="size" value="S" />
+          <label for="size-s">S</label>
+        </div>
+        <div>
+          <input type="radio" id="size-m" name="size" value="M" />
+          <label for="size-m">M</label>
+        </div>
+        <div>
+          <input type="radio" id="size-l" name="size" value="L" />
+          <label for="size-l">L</label>
+        </div>
+        <div>
+          <input type="radio" id="size-xl" name="size" value="XL" />
+          <label for="size-xl">XL</label>
+        </div>
+        <div>
+          <input type="radio" id="size-xxl" name="size" value="XXL" />
+          <label for="size-xxl">XXL</label>
+        </div>
+      </fieldset>
+
+      <div class="form-group">
+        <button type="submit" aria-label="Submit your T-shirt selection">Submit</button>
+      </div>
+    </form>
+  </main>
+
+  <footer>
+    <h2>By Victoria</h2>
+  </footer>
+</body>
 </html>
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including a title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including a title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including a title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including a title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources
 

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,27 +7,48 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <div class="container">
     <header>
-      <h1>Wireframe</h1>
+      <h1>Module-Onboarding Project</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This webpage summarises the purpose of a README file and Wireframe. It also explores what a branch in Git is.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://blog-cdn.everhour.com/blog/wp-content/uploads/2023/04/mohammad-rahmani-1VW6HLOQE5A-unsplash.jpg" 
+     alt="image example of a README file" 
+     style="max-width: 100%; height: auto;">
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file serves as a crucial piece of documentation for any software project, providing essential information to users, developers, and contributors. It typically outlines what the project does, why it's useful, how to get started, and where to seek help. Essentially, it acts as a welcome guide, making it easier for anyone to understand and interact with the project. 
         </p>
-        <a href="">Read more</a>
+        <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="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="image example of a wireframe" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          The primary purpose of a wireframe is to outline the basic structural design and user experience of a website or application before any detailed design work is done. It's a visual representation of the layout, content, and functionality, helping designers, developers, and stakeholders understand the overall structure and flow. 
+        </p>
+        <a href="https://www.bbc.co.uk/bitesize/guides/zsnmk2p/revision/3">Read more</a>
+      </article>
+
+      <article>
+        <img src="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F11a7a1e7-677a-4cd8-862a-f04edef3ae2e_2441x1638.jpeg" alt="image axample of a branch in Git"/>
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git is master. As you start making commits, you're given a master branch that points to the last commit you made. Every time you commit, the master branch pointer moves forward automatically.
+        </p>
+        <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,Note">Read more</a>
       </article>
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+    <footer class="fixed-footer">
+      <p>&copy; 2025 My Website</p>
+        </footer>
       </p>
     </footer>
+  </div>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,21 +1,3 @@
-/* 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);
@@ -26,7 +8,12 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
+header {text-align:center;}
+
+h1 {color: blue;}
+
+ body {
+  margin: 40px;
   background: var(--paper);
   color: var(--ink);
   font: var(--font);