CodeYourFuture · lintsang · May 21, 2026 · May 22, 2026 · May 22, 2026 · May 22, 2026
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
-- [ ] Use version control by committing often and pushing regularly to GitHub
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
+- [x] Use version control by committing often and pushing regularly to GitHub
+- [x] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -34,18 +34,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have only used HTML and CSS.
-- [ ] I have not used any JavaScript.
+- [x] I have only used HTML and CSS.
+- [x] I have not used any JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic HTML.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. 
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] My form is semantic HTML.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. 
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ### Developers must adhere to professional standards.
 
@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [x] My code is consistently formatted
+- [x] My page content is free of typos and grammatical mistakes
+- [x] I commit often and push regularly to GitHub
 
 ## Resources
 - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)

diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css
@@ -0,0 +1,36 @@
+h1{
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 1.5rem;
+}
+fieldset{
+    background-color: #becce2;
+    border: 2px solid #c0cde0;
+	border-style: solid;
+    border-radius: 0.5em;
+    margin: 1em auto;
+    padding: 1em;
+    width: 40em;
+    max-width: 800px;
+}
+
+legend{
+    color: #222;
+    background-color: #f6f9ff;
+    font-size: 90%;
+    padding: 1em 2em;
+    border: solid 1px #becce2;
+    border-radius: 0.3em;
+
+
+}
+fieldset > div{
+    padding: 0.5em 3em;
+    display: grid;
+    grid-template-columns: 2fr 4fr;
+}
+input, select, button{
+    border: solid 1px #becce2;
+    padding: 4px;
+    font-size: 1em;
+    border-radius: 0.3em;
+}
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -3,25 +3,59 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+     <title>My Sprint 1 form controls exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
+        <fieldset>
+          <legend>
+            Person name and email</legend>
+            <div class="form-group">
+              <label for="fullname">Full Name:</label>
+              <input type="text" id="fullname" required minlength="2">
+            </div>
+            <div class="form-group">
+              <label for="email">Email:</label>
+              <input type="email" id="email" required pattern="^.+@.+\..+$">
+            </div>
+            <div class="form-group">
+              <label for="colour-pick">Choose T-shirt Colour:</label>
+              <select id="colour-pick">
+                <option value="white">White</option>
+                <option value="black">Black</option>
+                <option value="grey">Grey</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="size-pick">Choose T-shisrt Size</label>
+              <select id="size-pick">
+                <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>
+            </div>
+            <div class="form-group">
+              <button type="submit">Submit</button>
+            </div>
+        </fieldset>
         <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+          Create a form that can collect 
+          name, email, preferred tshirt colour and size from user-->
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Lin Tsang</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including an image, title, summary, and a link
+- [x] 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
-- [ ] Develop the habit of writing clean, well-structured, and error-free code
+- [x] Use version control by committing often and pushing regularly to GitHub
+- [x] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{</objectives>}}>-->
 
 ## Task
@@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
-- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The page layout closely match the wireframe.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The page layout closely match the wireframe.
 
 ### Developers must adhere to professional standards.
 
@@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [x] My code is consistently formatted
+- [x] My page content is free of typos and grammatical mistakes
+- [x] I commit often and push regularly to GitHub
 
 ## Resources
 

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,27 +7,53 @@
     <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>
+    <div id="wrapper">
+      <header>
+        <h1>Web Development Foundation</h1>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          There are some frequently asked questions for beginner developers.
         </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
+      </header>
+      <main>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="" />
+          </div>
+          <h2>1. What is the purpose of a README file?</h2>
+          <p>
+            README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.
+          </p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
+        </article>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="" />
+          </div>
+          <h2>2. What is the purpose of a wireframe?</h2>
+          <p>
+            Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.
+          </p>
+          <a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
+        </article>
+        <article>
+          <div class="image-wrapper">
+            <img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="" />
+          </div>
+          <h2>3. What is a branch in Git?</h2>
+          <p>
+            A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.
+          </p>
+          <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
+        </article>  
+      </main>
+    </div>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <div id="wrapper">
+        <p>
+          By Lin Tsang. This webpage serves as a test environment. Some images and media displayed on this site are sourced from external websites for demonstrative and educational purposes. All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/
+
+        </p>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,10 +26,14 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
+
+ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
+  display: grid;
+
 }
 a {
   padding: var(--space);
@@ -41,6 +45,20 @@ svg {
   width: 100%;
   object-fit: cover;
 }
+p {
+  padding: 0 0 30px 0;
+}
+.image-wrapper img {
+  width: 100%;
+  /* aspect ratio for image */
+  aspect-ratio: 16 / 9;
+}
+#wrapper{
+  /* wrapper to make the content to 80% width */
+  width:80%;
+  margin: 0 auto;
+}
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,9 +68,11 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
+  width: 100%;
   text-align: center;
+  background-color: #eee;
+  font-size: 0.8rem;
+  padding: 60px 0 60px 0;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.