simpleviewinc · sheenaprakash118 · Jul 3, 2025 · Jul 3, 2025 · Jul 4, 2025 · Jul 7, 2025
diff --git 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>
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
@@ -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>
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
@@ -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>
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
@@ -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>
diff --git 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>
diff --git 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
@@ -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
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@