simpleviewinc · nirajnarkhede-bit · Dec 1, 2025 · Dec 1, 2025 · Dec 2, 2025 · Dec 2, 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
@@ -1,13 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
+
+	<!--  Meta -->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="title" content="Login Form">
+	<meta name="description" content="A simple login form with email and password fields.">
+
 	<title>Build a Form</title>
 </head>
+
 <body>
-	
+
 	<!-- Add your code here -->
+	<div class="form-wrapper">
+		<form method="POST" action="/login/">
+
+			<h3>Login Form</h3>
+
+			<!-- Email -->
+			<div class="form-field">
+				<label for="email">Email:</label>
+				<input type="email" id="email" name="email" required aria-label="Email" aria-required="true" />
+			</div>
+
+			<!-- Password -->
+			<div class="form-field">
+				<label for="password">Password:</label>
+				<input type="password" id="password" name="password" required aria-label="Password"
+					aria-required="true" />
+			</div>
+
+			<!-- Submit -->
+			<input type="submit" value="Submit" />
+
+		</form>
+	</div>
 
 </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,14 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
+
+	<!-- Meta -->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="title" content="Responsive Image">
+	<meta name="description" content="A responsive image that adjusts resolution based on screen size.">
+
 	<title>Create a Responsive Image - Resolution</title>
 
 	<style>
 		*,
 		*::before,
-		*::after { box-sizing: border-box; }
+		*::after {
+			box-sizing: border-box;
+		}
 
 		html {
 			margin: 0;
@@ -22,9 +30,21 @@
 		}
 	</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)">
+
+		<!-- Default -->
+		<img src="https://placehold.co/400x180" alt="Default 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,14 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
+	<!-- Meta -->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="title" content="Responsive Image">
+	<meta name="description" content="A responsive image that adjusts resolution based on screen size.">
+
 	<title>Create a Responsive Image - Aspect Ratio</title>
 
 	<style>
 		*,
 		*::before,
-		*::after { box-sizing: border-box; }
+		*::after {
+			box-sizing: border-box;
+		}
 
 		html {
 			margin: 0;
@@ -22,9 +29,17 @@
 		}
 	</style>
 </head>
+
 <body>
-	
+
 	<!-- 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)">
 
+		<!-- Default -->
+		<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,73 @@
 <!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 -->
 
+	<!-- Navigation -->
+	<aside>
+		<nav>
+			<a href="#slide1"><span>Slide 1</span></a>
+			<a href="#slide2"><span>Slide 2</span></a>
+			<a href="#slide3"><span>Slide 3</span></a>
+			<a href="#slide4"><span>Slide 4</span></a>
+			<a href="#slide5"><span>Slide 5</span></a>
+			<a href="#slide6"><span>Slide 6</span></a>
+			<a href="#slide7"><span>Slide 7</span></a>
+			<a href="#slide8"><span>Slide 8</span></a>
+			<a href="#slide9"><span>Slide 9</span></a>
+			<a href="#slide10"><span>Slide 10</span></a>
+			<a href="#slide11"><span>Slide 11</span></a>
+			<a href="#slide12"><span>Slide 12</span></a>
+		</nav>
+	</aside>
+
+	<!-- Slides -->
+	<main>
+		<!-- Slide 11 -->
+		<section id="slide11">
+			<!-- Upper Text -->
+			<div>
+				<h3>Phase 4:</h3>
+				<h1>Destination Thrive</h1>
+				<h2>Objective: Create Omni-channel synergy</h2>
+				<p>This is the time to fully leverage your hard work and thrive. During this phase, attention should be
+					given to
+					omni-channel synergy,
+					syncing your messaging and channels from top to bottom. Scale high performing channels and fully
+					harvest the demand of
+					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>
+			</div>
+
+			<hr />
+
+			<!-- Key Features -->
+			<div>
+				<h4>Key focus:</h4>
+				<ul style="list-style: disc; margin-left: 20px;">
+					<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 <img src="icon.svg" alt="Clock icon" /></h4>
+				<p>approx. 24 months and beyond</p>
+			</div>
+
+		</section>
+	</main>
+
 </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,20 @@
 <!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 purple;
+		}
 	</style>
 
 	<input type="text" />
@@ -23,4 +28,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
@@ -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 - Children</title>
 </head>
+
 <body>
-	
+
 	<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">
@@ -37,4 +41,5 @@
 	</ul>
 
 </body>
+
 </html>
diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html
@@ -16,7 +16,7 @@
 
 	<style>
 		/* Update the following line of CSS to only style `<p>` that follow an `<h2>` */
-		p {
+		h2 + p {
 			font-size: 22px;
 			line-height: 1.5;
 			color: rebeccapurple;

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,49 @@
 <!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 */
+		.btn {
+			border-radius: 4px;
+			padding: 12px 32px;
+			color: #000000;
+			cursor: pointer;
+			transition: all 0.3s ease;
+		}
+
+		.btn-default {
+			background-color: #f5f5f5;
+		}
+
+		.btn-primary {
+			background-color: #90CDF4;
+		}
+
+		.btn-link {
+			background-color: transparent;
+			border: none;
+			padding: 0;
+		}
+
+		.btn-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="btn btn-default">Default</button>
+	<button class="btn btn-primary">Primary</button>
+	<button class="btn btn-link">Link</button>
+	<button class="btn btn-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
@@ -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,18 +15,27 @@
 		}
 	</style>
 </head>
+
 <body>
-	
+
 	<style>
 		/* Modify the CSS below to add the desired hover effect and animation */
 		.box {
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transition: transform 160ms;
+		}
+
+		.box:hover {
+			transition: transform 200ms;
+			transform: scale(2);
+			transform-origin: center;
 		}
 	</style>
 
 	<div class="box"></div>
 
 </body>
+
 </html>
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(number => number % 2 === 0);
 
 		// Custom Code END