diff --git a/Form-Controls/Prototype-Code.html b/Form-Controls/Prototype-Code.html
new file mode 100644
index 000000000..fce6e6506
--- /dev/null
+++ b/Form-Controls/Prototype-Code.html
@@ -0,0 +1,84 @@
+  <!-- 
+          try writing out the requirements first as comments
+        this will also help you fill in your PR message later-->
+        <!--Writing that out as a series of questions to ask yourself:
+
+1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
+2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
+3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
+
+All fields are required.-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
+    <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-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+<datalist id="SizeList">
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+        
+</datalist>
+
+      </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form><input type="submit"> <input type="resit"></form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <p>Rawan@</p>
+    </footer>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..4d463ce75 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,66 @@ <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-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+</label>
+<datalist id="SizeList">
+
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+        
+</datalist>
+
       </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form> <label> <input type="submit"> <input type="resit">
+  </label>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>
     </footer>
   </body>
-</html>
+</html> 
+
+<!--done--> 
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..3fa433582
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,20 @@
+<!-- styling-->
+
+ body { color: #141414; 
+    
+    background-color: #6aa57e; 
+    
+     font-family: Georgia; 
+     
+     
+
+
+h1{
+
+font-family: sans-serif;
+color:  rgba(15, 15, 15, 0.267); 
+background-color: #f5eeda;  
+text-align: center;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}
\ No newline at end of file
diff --git a/Sprint-2/1-key-exercises/1-count.js b/Sprint-2/1-key-exercises/1-count.js
deleted file mode 100644
index 117bcb2b6..000000000
--- a/Sprint-2/1-key-exercises/1-count.js
+++ /dev/null
@@ -1,6 +0,0 @@
-let count = 0;
-
-count = count + 1;
-
-// Line 1 is a variable declaration, creating the count variable with an initial value of 0
-// Describe what line 3 is doing, in particular focus on what = is doing
diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js
deleted file mode 100644
index 964c9563c..000000000
--- a/Sprint-2/1-key-exercises/2-initials.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const firstName = "Creola";
-const middleName = "Katherine";
-const lastName = "Johnson";
-
-// Declare a variable called initials that stores the first character of each string.
-// This should produce the string "CKJ", but you must not write the characters C, K, or J in the code of your solution.
-
-const initials = ``;
-
-// https://www.google.com/search?q=get+first+character+of+string+mdn
diff --git a/Sprint-2/1-key-exercises/3-paths.js b/Sprint-2/1-key-exercises/3-paths.js
deleted file mode 100644
index ab90ebb28..000000000
--- a/Sprint-2/1-key-exercises/3-paths.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// The diagram below shows the different names for parts of a file path on a Unix operating system
-
-// ┌─────────────────────┬────────────┐
-// │          dir        │    base    │
-// ├──────┬              ├──────┬─────┤
-// │ root │              │ name │ ext │
-// "  /    home/user/dir / file  .txt "
-// └──────┴──────────────┴──────┴─────┘
-
-// (All spaces in the "" line should be ignored. They are purely for formatting.)
-
-const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt";
-const lastSlashIndex = filePath.lastIndexOf("/");
-const base = filePath.slice(lastSlashIndex + 1);
-console.log(`The base part of ${filePath} is ${base}`);
-
-// Create a variable to store the dir part of the filePath variable
-// Create a variable to store the ext part of the variable
-
-const dir = ;
-const ext = ;
-
-// https://www.google.com/search?q=slice+mdn
\ No newline at end of file
diff --git a/Sprint-2/1-key-exercises/4-random.js b/Sprint-2/1-key-exercises/4-random.js
deleted file mode 100644
index 292f83aab..000000000
--- a/Sprint-2/1-key-exercises/4-random.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const minimum = 1;
-const maximum = 100;
-
-const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
-
-// In this exercise, you will need to work out what num represents?
-// Try breaking down the expression and using documentation to explain what it means
-// It will help to think about the order in which expressions are evaluated
-// Try logging the value of num and running the program several times to build an idea of what the program is doing
diff --git a/Sprint-2/2-mandatory-errors/0.js b/Sprint-2/2-mandatory-errors/0.js
deleted file mode 100644
index cf6c5039f..000000000
--- a/Sprint-2/2-mandatory-errors/0.js
+++ /dev/null
@@ -1,2 +0,0 @@
-This is just an instruction for the first activity - but it is just for human consumption
-We don't want the computer to run these 2 lines - how can we solve this problem?
\ No newline at end of file
diff --git a/Sprint-2/2-mandatory-errors/1.js b/Sprint-2/2-mandatory-errors/1.js
deleted file mode 100644
index 7a43cbea7..000000000
--- a/Sprint-2/2-mandatory-errors/1.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// trying to create an age variable and then reassign the value by 1
-
-const age = 33;
-age = age + 1;
diff --git a/Sprint-2/2-mandatory-errors/2.js b/Sprint-2/2-mandatory-errors/2.js
deleted file mode 100644
index e09b89831..000000000
--- a/Sprint-2/2-mandatory-errors/2.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Currently trying to print the string "I was born in Bolton" but it isn't working...
-// what's the error ?
-
-console.log(`I was born in ${cityOfBirth}`);
-const cityOfBirth = "Bolton";
diff --git a/Sprint-2/2-mandatory-errors/3.js b/Sprint-2/2-mandatory-errors/3.js
deleted file mode 100644
index ec101884d..000000000
--- a/Sprint-2/2-mandatory-errors/3.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const cardNumber = 4533787178994213;
-const last4Digits = cardNumber.slice(-4);
-
-// The last4Digits variable should store the last 4 digits of cardNumber
-// However, the code isn't working
-// Before running the code, make and explain a prediction about why the code won't work
-// Then run the code and see what error it gives.
-// Consider: Why does it give this error? Is this what I predicted? If not, what's different?
-// Then try updating the expression last4Digits is assigned to, in order to get the correct value
diff --git a/Sprint-2/2-mandatory-errors/4.js b/Sprint-2/2-mandatory-errors/4.js
deleted file mode 100644
index 5f86c730b..000000000
--- a/Sprint-2/2-mandatory-errors/4.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const 12HourClockTime = "8:53pm";
-const 24hourClockTime = "20:53";
diff --git a/Sprint-2/3-mandatory-interpret/1-percentage-change.js b/Sprint-2/3-mandatory-interpret/1-percentage-change.js
deleted file mode 100644
index e24ecb8e1..000000000
--- a/Sprint-2/3-mandatory-interpret/1-percentage-change.js
+++ /dev/null
@@ -1,22 +0,0 @@
-let carPrice = "10,000";
-let priceAfterOneYear = "8,543";
-
-carPrice = Number(carPrice.replaceAll(",", ""));
-priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," ""));
-
-const priceDifference = carPrice - priceAfterOneYear;
-const percentageChange = (priceDifference / carPrice) * 100;
-
-console.log(`The percentage change is ${percentageChange}`);
-
-// Read the code and then answer the questions below
-
-// a) How many function calls are there in this file? Write down all the lines where a function call is made
-
-// b) Run the code and identify the line where the error is coming from - why is this error occurring? How can you fix this problem?
-
-// c) Identify all the lines that are variable reassignment statements
-
-// d) Identify all the lines that are variable declarations
-
-// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?
diff --git a/Sprint-2/3-mandatory-interpret/2-time-format.js b/Sprint-2/3-mandatory-interpret/2-time-format.js
deleted file mode 100644
index 47d239558..000000000
--- a/Sprint-2/3-mandatory-interpret/2-time-format.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const movieLength = 8784; // length of movie in seconds
-
-const remainingSeconds = movieLength % 60;
-const totalMinutes = (movieLength - remainingSeconds) / 60;
-
-const remainingMinutes = totalMinutes % 60;
-const totalHours = (totalMinutes - remainingMinutes) / 60;
-
-const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
-console.log(result);
-
-// For the piece of code above, read the code and then answer the following questions
-
-// a) How many variable declarations are there in this program?
-
-// b) How many function calls are there?
-
-// c) Using documentation, explain what the expression movieLength % 60 represents
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
-
-// d) Interpret line 4, what does the expression assigned to totalMinutes mean?
-
-// e) What do you think the variable result represents? Can you think of a better name for this variable?
-
-// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer
diff --git a/Sprint-2/3-mandatory-interpret/3-to-pounds.js b/Sprint-2/3-mandatory-interpret/3-to-pounds.js
deleted file mode 100644
index 60c9ace69..000000000
--- a/Sprint-2/3-mandatory-interpret/3-to-pounds.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const penceString = "399p";
-
-const penceStringWithoutTrailingP = penceString.substring(
-  0,
-  penceString.length - 1
-);
-
-const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0");
-const pounds = paddedPenceNumberString.substring(
-  0,
-  paddedPenceNumberString.length - 2
-);
-
-const pence = paddedPenceNumberString
-  .substring(paddedPenceNumberString.length - 2)
-  .padEnd(2, "0");
-
-console.log(`£${pounds}.${pence}`);
-
-// This program takes a string representing a price in pence
-// The program then builds up a string representing the price in pounds
-
-// You need to do a step-by-step breakdown of each line in this program
-// Try and describe the purpose / rationale behind each step
-
-// To begin, we can start with
-// 1. const penceString = "399p": initialises a string variable with the value "399p"
diff --git a/git-collaboration/index.html b/git-collaboration/index.html
new file mode 100644
index 000000000..e69de29bb