diff --git a/Week 1.1 - HTML/1. Build a Form/index.html b/Week 1.1 - HTML/1. Build a Form/index.html
index 50432a8b..b389bac1 100644
--- a/Week 1.1 - HTML/1. Build a Form/index.html	
+++ b/Week 1.1 - HTML/1. Build a Form/index.html	
@@ -8,6 +8,19 @@
 <body>
 	
 	<!-- Add your code here -->
+	<form action="/login/" method="POST">
+        <h2>Login</h2>
 
+        <!-- Email -->
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" placeholder="Enter your email" required aria-label="Email" aria-required="true">
+
+        <!-- Password -->
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" placeholder="Enter your password" required aria-label="Password" aria-required="true">
+
+        <!-- Submit -->
+        <button type="submit">Login</button>
+    </form>
 </body>
 </html>
\ No newline at end of file
diff --git a/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html b/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html
index a132ac2a..e3b42c3a 100644
--- a/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html	
+++ b/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html	
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +9,9 @@
 	<style>
 		*,
 		*::before,
-		*::after { box-sizing: border-box; }
+		*::after {
+			box-sizing: border-box;
+		}
 
 		html {
 			margin: 0;
@@ -22,9 +25,18 @@
 		}
 	</style>
 </head>
+
 <body>
-	
+
 	<!-- Add your code here -->
+	<picture>
+		<source srcset="https://placehold.co/2000x900" media="(min-width: 1800px)">
+		<source srcset="https://placehold.co/1600x720" media="(min-width: 1440px)">
+		<source srcset="https://placehold.co/1200x540" media="(min-width: 1024px)">
+		<source srcset="https://placehold.co/800x360" media="(min-width: 640px)">
+		<img src="https://placehold.co/400x180" alt="Responsive Placeholder Image">
+	</picture>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html b/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html
index d8bb518c..759c09ba 100644
--- a/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html	
+++ b/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html	
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +9,9 @@
 	<style>
 		*,
 		*::before,
-		*::after { box-sizing: border-box; }
+		*::after {
+			box-sizing: border-box;
+		}
 
 		html {
 			margin: 0;
@@ -22,9 +25,15 @@
 		}
 	</style>
 </head>
+
 <body>
-	
-	<!-- Add your code here -->
 
+	<!-- Add your code here -->
+	<picture>
+		<source srcset="https://placehold.co/1600x720" media="(min-width: 1024px)">
+		<source srcset="https://placehold.co/1200x900" media="(min-width: 640px)">
+		<img src="https://placehold.co/540x800" alt="Responsive Placeholder Image">
+	</picture>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 1.1 - HTML/4. Mock Up a Design/index.html b/Week 1.1 - HTML/4. Mock Up a Design/index.html
index a7252a6f..979fcc95 100644
--- a/Week 1.1 - HTML/4. Mock Up a Design/index.html	
+++ b/Week 1.1 - HTML/4. Mock Up a Design/index.html	
@@ -1,13 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Mock Up a Design</title>
 </head>
+
 <body>
-	
+
 	<!-- Add your code here -->
+	<!-- Slider Container -->
+	<div class="slider-container">
+		<!-- Slider Dots Navigation -->
+			<ul class="slider-dots" role="tablist">
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation01" role="presentation"><button aria-label="Go to slide 1" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation02" role="presentation"><button aria-label="Go to slide 2" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation03" role="presentation"><button aria-label="Go to slide 3" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation04" role="presentation"><button aria-label="Go to slide 4" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation05" role="presentation"><button aria-label="Go to slide 5" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation06" role="presentation"><button aria-label="Go to slide 6" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation07" role="presentation"><button aria-label="Go to slide 7" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation08" role="presentation"><button aria-label="Go to slide 8" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation09" role="presentation"><button aria-label="Go to slide 9" role="button"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation10" role="presentation"><button aria-label="Go to slide 10" role="button"></button></li>
+				<li aria-hidden="false" aria-selected="true" aria-controls="navigation11" role="presentation"><button aria-label="Go to slide 11" role="button" class="active"></button></li>
+				<li aria-hidden="true" aria-selected="false" aria-controls="navigation12" role="presentation"><button aria-label="Go to slide 12" role="button"></button></li>
+			</ul>
+
+		<!--  Inactive Slide Content Section -->
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+		<section class="slide" aria-hidden="true" role="option"></section>
+
+		<!--  Active Slide Content Section -->
+		<section class="slide active">
+			<h1>Phase 4:</h1>
+			<h2>Destination Thrive</h2>
+			<h3>Objective: Create omni-channel synergy</h3>
+			<p>This is the time to fully leverage your hard work and thrive. During this phase, attention should be
+				given to creating omni-channel synergy, syncing your messaging and channels from top to bottom. Scale
+				high-performing channels and fully harvest the demand your top-of-funnel awareness campaigns have been
+				creating. Use insights gained from your contact lists, data, and web analytics to do prospecting and
+				build look-a-like audiences for incremental growth.</p>
 
+			<h4>Key Focus:</h4>
+			<ul>
+				<li>Harvesting the demand created by your content marketing efforts</li>
+				<li>Scale paid media and social efforts</li>
+				<li>Leverage your new audiences</li>
+				<li>Omni-channel synergy</li>
+			</ul>
+
+			<h4>Time<span><img src="icon.svg" alt="" aria-hidden="true"/></span></h4>
+			<p>approx. 24 months and beyond</p>
+		</section>
+
+		<!--  Inctive Slide Content Section -->
+		<section class="slide" aria-hidden="true" role="option"></section>
+
+	</div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 1.2 - CSS/1. Selectors - Attributes/index.html b/Week 1.2 - CSS/1. Selectors - Attributes/index.html
index 3d9c05b8..36fec92b 100644
--- a/Week 1.2 - CSS/1. Selectors - Attributes/index.html	
+++ b/Week 1.2 - CSS/1. Selectors - Attributes/index.html	
@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Selectors - Attributes</title>
 </head>
+
 <body>
-	
+
 	<style>
 		/* Update the following line of CSS to only style the inputs of type `text` */
-		* { border: 2px solid rebeccapurple; }
+		input[type="text"] {
+			border: 2px solid rebeccapurple;
+		}
 	</style>
 
 	<input type="text" />
@@ -23,4 +27,5 @@
 	<input type="color" />
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 1.2 - CSS/2. Selectors - Children/index.html b/Week 1.2 - CSS/2. Selectors - Children/index.html
index 7ff366db..3a43d88b 100644
--- a/Week 1.2 - CSS/2. Selectors - Children/index.html	
+++ b/Week 1.2 - CSS/2. Selectors - Children/index.html	
@@ -9,7 +9,7 @@
 	
 	<style>
 		/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
-		.container .item { border: 2px solid rebeccapurple; }
+		.container > .item { border: 2px solid rebeccapurple; }
 	</style>
 
 	<ul class="container">
diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html
index b6086a75..90d11316 100644
--- a/Week 1.2 - CSS/3. Selectors - Siblings/index.html	
+++ b/Week 1.2 - CSS/3. Selectors - Siblings/index.html	
@@ -16,11 +16,11 @@
 	
 	<style>
 		/* Update the following line of CSS to only style `<p>` that follow an `<h2>` */
-		p {
-			font-size: 22px;
-			line-height: 1.5;
-			color: rebeccapurple;
-		}
+		h2 + p {
+            font-size: 22px;
+            line-height: 1.5;
+            color: rebeccapurple;
+        }
 	</style>
 
 	<section>
diff --git a/Week 1.2 - CSS/4. Inheritance and Systems/index.html b/Week 1.2 - CSS/4. Inheritance and Systems/index.html
index e1c5e441..b60d20d2 100644
--- a/Week 1.2 - CSS/4. Inheritance and Systems/index.html	
+++ b/Week 1.2 - CSS/4. Inheritance and Systems/index.html	
@@ -1,21 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Inheritance and Systems</title>
 </head>
+
 <body>
-	
+
 	<style>
 		/* Add your CSS here */
+		/* Base button styles */
+		button {
+			border-radius: 4px;
+			padding: 12px 32px;
+			color: black;
+			cursor: pointer;
+		}
+
+		/* Default button */
+		.button-default {
+			background-color: #f5f5f5;
+		}
+
+		/* Primary button */
+		.button-primary {
+			background-color: #90CDF4;
+		}
+
+		/* Link button */
+		.button-link {
+			background-color: transparent;
+			text-decoration: underline;
+			padding: 0;
+			border: none;
+			color: blue;
+		}
+
+		/* Danger button */
+		.button-danger {
+			background-color: #FEB2B2;
+		}
 	</style>
 
 	<!-- Add as many or as few classes as needed to accomplish the goal to the buttons below -->
-	<button>Default</button>
-	<button>Primary</button>
-	<button>Link</button>
-	<button>Danger</button>
-
+	<button class="button-default">Default</button>
+	<button class="button-primary">Primary</button>
+	<button class="button-link">Link</button>
+	<button class="button-danger">Danger</button>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 1.2 - CSS/5. Transitions/index.html b/Week 1.2 - CSS/5. Transitions/index.html
index 4fa3bd71..ab09a09b 100644
--- a/Week 1.2 - CSS/5. Transitions/index.html	
+++ b/Week 1.2 - CSS/5. Transitions/index.html	
@@ -18,11 +18,18 @@
 	
 	<style>
 		/* Modify the CSS below to add the desired hover effect and animation */
-		.box {
-			width: 100px;
-			height: 100px;
-			background-color: rebeccapurple;
-		}
+		/* Hover effect and Animation */
+        .box {
+            width: 100px;
+            height: 100px;
+            background-color: rebeccapurple;
+            transition: transform 200ms ease-in, transform 160ms ease-out;
+            transform-origin: center;
+        }
+
+        .box:hover {
+            transform: scale(2);
+        }
 	</style>
 
 	<div class="box"></div>
diff --git a/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html b/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html
index 769c1a18..05f6caf9 100644
--- a/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html	
+++ b/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html	
@@ -29,6 +29,7 @@
 			width: 100%;
 			height: 100%;
 			background-image: linear-gradient(to bottom, transparent, black);
+			pointer-events: none;
 		}
 	</style>
 	
diff --git a/Week 1.3 - JavaScript/1. Filter/index.html b/Week 1.3 - JavaScript/1. Filter/index.html
index e74982a2..95694b35 100644
--- a/Week 1.3 - JavaScript/1. Filter/index.html	
+++ b/Week 1.3 - JavaScript/1. Filter/index.html	
@@ -13,7 +13,7 @@
 		// Custom Code BEGIN 
 		// Modify the code in this block however you need to get the desired ending array.
 		// You must store your new array in the `endingArray` variable for it to log out properly.
-		let endingArray;
+		let endingArray = startingArray.filter(x => x % 2 === 0);
 
 		// Custom Code END
 
diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
index 72fa39ee..86a32eee 100644
--- a/Week 1.3 - JavaScript/2. Map/index.html	
+++ b/Week 1.3 - JavaScript/2. Map/index.html	
@@ -13,7 +13,7 @@
 		// Custom Code BEGIN 
 		// Modify the code in this block however you need to get the desired ending array.
 		// You must store your new array in the `endingArray` variable for it to log out properly.
-		let endingArray;
+		let endingArray = startingArray.map((name) => ({ name }));
 
 		// Custom Code END
 
diff --git a/Week 1.3 - JavaScript/3. Objects as a Map/index.html b/Week 1.3 - JavaScript/3. Objects as a Map/index.html
index 3004949a..5beb4b76 100644
--- a/Week 1.3 - JavaScript/3. Objects as a Map/index.html	
+++ b/Week 1.3 - JavaScript/3. Objects as a Map/index.html	
@@ -8,24 +8,22 @@
 <body>
 	
 	<script>
+		//const information = getInformation('day');
 		const information = getInformation('date');
+		//const information = getInformation('time');
+		//const information = getInformation('mood');
 		console.log(information);
 
 		// Rewrite this function to replace the if/else logic with a map lookup.
 		function getInformation(key) {
-			let rtn;
-
-			if (key === 'date') {
-				rtn = 'October 6, 1986';
-			} else if (key === 'time') {
-				rtn = '21:13 PM';
-			} else if (key === 'mood') {
-				rtn = 'Powerful, spirited...';
-			} else {
-				rtn = 'Error: Invalid option selected...';
+	
+			const info = {
+				date: "October 6, 1986",
+				time: "21:13 PM",
+				mood: "Powerful, spirited..."
 			}
 
-			return rtn;
+			return info[key] || "Error: Invalid option selected...";
 		}
 	</script>
 
diff --git a/Week 1.3 - JavaScript/4. Event Listeners/index.html b/Week 1.3 - JavaScript/4. Event Listeners/index.html
index d284e48f..caf231c2 100644
--- a/Week 1.3 - JavaScript/4. Event Listeners/index.html	
+++ b/Week 1.3 - JavaScript/4. Event Listeners/index.html	
@@ -20,6 +20,7 @@ <h1 data-counter>0</h1>
 		}
 
 		// Add your code here to make clicking the button run the increment function
+		document.querySelector('[data-action="increment-counter"]').addEventListener('click', increment);
 	</script>
 
 </body>
diff --git a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html
index ba0e04f2..be2ab596 100644
--- a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html	
+++ b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html	
@@ -18,12 +18,15 @@ <h2>Hello, world!</h2>
 		<h1>Lorem Ipsum Dolor Sit Amet</h1>
 		<section>
 			<h2>More Jeff Goldblum</h2>
-			<p>Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. You really think you can fly that thing? Checkmate... Life finds a way. Yes, Yes, without the oops! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p>
+			<p>Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don't eat the tourists. You really think you can fly that thing? Checkmate... Life finds a way. Yes, Yes, without the oops! Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p>
 		</section>
 	</main>
 
 	<script>
 		// Add you code here
+		const template = document.querySelector('script[type="text/template"]');
+		const container = document.querySelector('.container');
+		container.insertAdjacentHTML('beforeend', template.innerHTML);
 	</script>
 
 </body>
diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html
index c1da8137..426a18e8 100644
--- a/Week 1.3 - JavaScript/Data Fetching/index.html	
+++ b/Week 1.3 - JavaScript/Data Fetching/index.html	
@@ -11,6 +11,17 @@
 	
 	<script>
 		// Add your code here
+		fetch("https://ghibliapi.vercel.app/films")
+			.then((res) => res.json())
+			.then((data) => {
+				const list = document.querySelector(".movies")
+				data.forEach(movie => {
+					const li = document.createElement('li');
+					li.textContent = movie.title;
+					list.appendChild(li);
+				})
+			}
+			).catch((e) => console.log(e));
 	</script>
 
 </body>
diff --git a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
index 2d612e63..1932c73e 100644
--- a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html	
+++ b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html	
@@ -29,54 +29,56 @@
 	<style>
 		.cards {
 			/* Add your code here */
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 		}
 	</style>
 	
 	<section class="cards">
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
 			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?</p>
 			<a class="more" href="#">Read More</a>
diff --git a/Week 2.1 - CSS Grid/2. Placing Items/index.html b/Week 2.1 - CSS Grid/2. Placing Items/index.html
index fcd7781b..f3344387 100644
--- a/Week 2.1 - CSS Grid/2. Placing Items/index.html	
+++ b/Week 2.1 - CSS Grid/2. Placing Items/index.html	
@@ -19,6 +19,13 @@
 
 	<style>
 		/* Add your code here */
+		.photo{
+			display: grid;
+			grid-template-areas: "overlay";
+		}
+		.photo img{
+			grid-area: overlay;
+		}
 	</style>
 
 	<div class="photo">
diff --git a/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html b/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html
index 0161e9be..5a6047c0 100644
--- a/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html	
+++ b/Week 2.1 - CSS Grid/3. Placing Items - Advanced/index.html	
@@ -49,6 +49,37 @@
 	
 	<style>
 		/* Add your code here */
+		.letter{
+			position: sticky;
+			top: 0;
+		}
+		.letter:first-child {
+			grid-column: 1;
+			grid-row: 2;
+		}
+		.letter:nth-child(2) {
+			grid-column: 2;
+			grid-row: 3;
+		}
+		.letter:nth-child(3) {
+			grid-column: 3;
+			grid-row: 4;
+		}
+		.letter:nth-child(4) {
+			grid-column: 4;
+			grid-row: 5;
+		}
+		.letter:nth-child(5) {
+			grid-column: 5;
+			grid-row: 6;
+		}
+		.letter:nth-child(6) {
+			grid-column: 6;
+			grid-row: 7;
+		}
+		.placeholder{
+			display: none;
+		}
 	</style>
 
 	<div class="grid">
diff --git a/Week 2.2 - Flexbox/1. Centering/index.html b/Week 2.2 - Flexbox/1. Centering/index.html
index 5283be49..26fcf2e4 100644
--- a/Week 2.2 - Flexbox/1. Centering/index.html	
+++ b/Week 2.2 - Flexbox/1. Centering/index.html	
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,6 +15,7 @@
 		}
 	</style>
 </head>
+
 <body>
 
 	<style>
@@ -21,16 +23,20 @@
 			width: 100%;
 			height: 600px;
 			border: 2px solid thistle;
-			border-radius: 4px;;
+			border-radius: 4px;
 			background-color: whitesmoke;
-			
+
 			/* Add to your code here to center the box within the container */
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
 	</style>
-	
+
 	<section class="container">
 		<div class="box"></div>
 	</section>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 2.2 - Flexbox/2. Placing Items/index.html b/Week 2.2 - Flexbox/2. Placing Items/index.html
index 986e0ee4..092642e7 100644
--- a/Week 2.2 - Flexbox/2. Placing Items/index.html	
+++ b/Week 2.2 - Flexbox/2. Placing Items/index.html	
@@ -28,11 +28,14 @@
 
 				The `.logo` and `.links` should also be center aligned with each other.
 			*/
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
 		}
 	</style>
 	
 	<header class="navbar">
-		<img class="logo" src="https://via.placeholder.com/80" alt="logo" />
+		<img class="logo" src="https://placehold.co/80" alt="logo" />
 		<nav class="links">
 			<a href="#">Link 1</a>
 			<a href="#">Link 2</a>
diff --git a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html
index 9ff4f7e7..ce29aaa2 100644
--- a/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html	
+++ b/Week 2.2 - Flexbox/3. Placing Items - Advanced/index.html	
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -21,38 +22,54 @@
 		}
 	</style>
 </head>
+
 <body>
 
 	<style>
 		/* Add your code here to position the "read more" links to the bottom of their respective cards */
+		article.card {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+		}
+
+		a.more {
+			margin-top: auto;
+		}
 	</style>
-	
+
 	<section class="cards">
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
-			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?</p>
+			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+				machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. Eventually,
+				you do plan to have dinosaurs on your dinosaur tour, right?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
-			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
+			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+				machine? Wh-what is-h-how did you get my espresso machine? I was part of something special.</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
-			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
+			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+				machine? Wh-what is-h-how did you get my espresso machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 		<article class="card">
-			<img src="https://via.placeholder.com/300x240" alt="placeholder" />
+			<img src="https://placehold.co/300x240" alt="placeholder" />
 			<h2>Lorem Ipsum Dolor</h2>
-			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso machine?</p>
+			<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my espresso
+				machine?</p>
 			<a class="more" href="#">Read More</a>
 		</article>
 	</section>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Week 2.2 - Flexbox/4. Flexing/index.html b/Week 2.2 - Flexbox/4. Flexing/index.html
index 443de97c..90e18c8d 100644
--- a/Week 2.2 - Flexbox/4. Flexing/index.html	
+++ b/Week 2.2 - Flexbox/4. Flexing/index.html	
@@ -40,14 +40,24 @@
 	<style>
 		form {
 			/* Add any needed code here */
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+			justify-content: center;
+			padding: 60px;
 		}
 		
 		form input {
 			/* All inputs should allowed to grow and shrink with a basis of 10ch */
+			flex: 1 1 10ch; 
+			white-space: nowrap;
+			padding: 10px;
+			box-sizing: border-box;
 		}
 
 		form [type="email"] {
 			/* This should grow 3 times faster than the other inputs with a basis of 30ch */
+			flex: 3 1 30ch;
 		}
 	</style>
 
