CodeYourFuture · Dipa-Sarker · May 19, 2026 · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -3,25 +3,63 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>T-shirt Oder Form</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+     <h1>T-shirt Order Form</h1>
     </header>
-    <main>
+    <main class="Form-container">
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+      <Fieldset>
+        <div>
+        <label for="name">Customer Name</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          pattern=".*\S.{1,}.*"
+          title="Please enter at least two non-space characters."
+          required/>
+        </div>
+        <div>
+        <label for="email">Customer E-mail</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required/>
+        </div>
+        <div>
+        <label for="colour">Choose a Colour</label>
+        <select id="colour" name="colour" required>
+          <option value="">-- Select a colour --</option>
+          <option value="black">Black</option>
+          <option value="white">White</option>
+          <option value="red">Red</option>
+        </select>
+        </div>
+        <div>
+        <label for="size">Select a Size</label>
+        <select id="size" name="size" required>
+          <option value="">-- Select a 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>
+        </div>
+        <button type="submit">Submit Order</button>
+      </Fieldset>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Dipa Sarker</p>
     </footer>
   </body>
 </html>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
@@ -0,0 +1,52 @@
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f4f4f4;
+      padding: 40px;
+    }
+
+    .form-container {
+      max-width: 500px;
+      margin: auto;
+      background: #ffffff;
+      padding: 24px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+
+    h1 {
+      text-align: center;
+      margin-bottom: 24px;
+    }
+
+    fieldset {
+      border: none;
+      margin-bottom: 20px;
+      padding: 0;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: bold;
+    }
+
+    input,
+    select,
+    button {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+
+    button {
+      background-color: #000;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #333;
+    }
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,26 +8,86 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>WIREFRAME</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A Wireframe is a simple visual layout or blueprint of a website, mobile
+        app or software interface. It shows the basic structure of a page
+        without detailed colors, images or final design elements.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg"
+          alt="Readme.md"
+        />
+        <h2>What is the purpose of a README file?</h2>
+        <h3>Summary</h3>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a simple text file (usually named README.md) that
+          explains what your project about and how to use it. When someone opens
+          a GitHub repo, the README is usually the first thing they see. It
+          helps them quickly understand:
         </p>
-        <a href="">Read more</a>
+        <ul>
+          <li>What the project does</li>
+          <li>How to run it</li>
+          <li>How to install it (if needed)</li>
+          <li>Any important instructions or notes</li>
+        </ul>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+      <article>
+        <img
+          src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?w=2880&h=1440&q=75&fit=max&auto=format"
+          alt="Wireframe"
+        />
+        <h2>What is the purpose of a wireframe?</h2>
+        <h3>Summary</h3>
+        <p>
+          A wireframe is a simple visual blueprint of a website, app, or digital
+          product. It shows the structure and layout of a screen or page without
+          focusing on final colors, graphics, or detailed styling. Think of it
+          like an architectural sketch for a building:
+        </p>
+        <ul>
+          <li>It outlines where things go</li>
+          <li>It shows how users move through the interface</li>
+          <li>
+            It helps teams agree on functionality before design and development
+            begin
+          </li>
+        </ul>
+        <p>
+          Wireframes are usually made with boxes, lines, placeholders and labels
+          instead of polished visuals.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
+      </article>
+      <article>
+        <img
+          src="https://koliber.com/static/images/articles/trunk-flow.png"
+          alt="Git Branch"
+        />
+        <h2>What is a branch in Git?</h2>
+        <h3>Summary</h3>
+        <p>
+          A branch in Git is an independent line of development. It lets you
+          work on changes without affecting the main version of the project. You
+          can think of a branch like a parallel workspace:
+        </p>
+        <ul>
+          <li>The main project stays stable</li>
+          <li>You make changes safely in another branch</li>
+          <li>Later, you can merge those changes back into the main project</li>
+        </ul>
+        <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Web Development Basics | README, Wireframe & Git Branches</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,21 +1,6 @@
-/* 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 ====== */
+header {
+  text-align: center;
+}
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -24,8 +9,7 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+
 body {
   background: var(--paper);
   color: var(--ink);
@@ -36,54 +20,43 @@ a {
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== 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;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
-/* ====== 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;
-  }
+  gap: 10px;
 }
-/* ====== 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.
-*/
+main > *:first-child {
+  grid-column: 1/ -1;
+}
+
 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 > * {
+  grid-column: 2/3;
+}
+article > img {
+  grid-column: span 3;
+  height: auto;
+  width: 100%;
+  object-fit: cover;
 }