simpleviewinc · alexq790 · Apr 23, 2025 · Apr 23, 2025 · Apr 24, 2025 · Apr 24, 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,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Build a Form</title>
 </head>
+
 <body>
-
-	<!-- Add your code here -->
+
+	<form action="/login/" method="post">
+
+		<label for="email">Email:</label>
+		<input type="email" id="email" name="email" required aria-required="true" />
+
+		<label for="password">Password:</label>
+		<input type="password" id="password" name="password" required aria-required="true" />
+
+		<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
@@ -23,8 +23,14 @@
 	</style>
 </head>
 <body>
-
-	<!-- Add your code here -->
 
+	<picture>
+		<source media="(min-width: 1800px)" srcset="https://placehold.co/2000x900">
+		<source media="(min-width: 1440px)" srcset="https://placehold.co/1600x720">
+		<source media="(min-width: 1024px)" srcset="https://placehold.co/1200x720">
+		<source media="(min-width: 640px)" srcset="https://placehold.co/800x360">
+		<img src="https://placehold.co/400x180" alt="Responsive image placeholder">
+	</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,23 +9,38 @@
 	<style>
 		*,
 		*::before,
-		*::after { box-sizing: border-box; }
+		*::after {
+			box-sizing: border-box;
+		}
 
 		html {
 			margin: 0;
 			padding: 0;
 		}
 
+		.image-container {
+			aspect-ratio: 16 / 9;
+			width: 100%;
+		}
+
+		picture,
 		img {
-			display: block;
 			width: 100%;
-			height: auto;
+			height: 100%;
+			object-fit: cover;
+			display: block;
 		}
 	</style>
 </head>
-<body>
-
-	<!-- Add your code here -->
 
+<body>
+	<div class="image-container">
+		<picture>
+			<source media="(min-width: 1024px)" srcset="https://placehold.co/1600x720">
+			<source media="(min-width: 640px)" srcset="https://placehold.co/1200x900">
+			<img src="https://placehold.co/540x800" alt="Responsive image">
+		</picture>
+	</div>
 </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,40 @@
 <!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 -->
+
+	<section>
+		<header>
+			<h2>Phase 4:</h2>
+			<h1>Destination Thrive</h1>
+			<h3>Objective: create onmi-channel synergy</h3>
+		</header>
+
+		<p>This is a time to truly leverage your omni-channel ... Lorem ipsum dolor sit amet consectetur adipisicing
+			elit. Ipsam maxime qui atque hic dolorem incidunt laborum ullam nisi nesciunt! Molestias labore iusto aut
+			nam ipsam, fugit quasi asperiores veritatis commodi.</p>
+
+			<section>
+				<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>
+			</section>
+
+			<footer>
+				<p><strong>TIME:</strong> approx. 24 months and keyond</p>
+			</footer>
+	</section>
 
 </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,18 @@
 <!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 +26,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,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,44 @@
 <!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 */
+		button {
+			border-radius: 4px;
+			padding: 12px 32px;
+			color: black;
+			background-color: #f5f5f5;
+		}
+
+		.primary {
+			background-color: #90CDF4;
+		}
+
+		.link {
+			background-color: transparent;
+			text-decoration: underline;
+			border: none;
+		}
+
+		.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="primary">Primary</button>
+	<button class="link">Link</button>
+	<button class="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 ease-out;
+			transform: scale(1);
+		}
+
+		.box:hover {
+			transform: scale(2);
+			transition-duration: 200ms;
 		}
 	</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,12 +29,14 @@
 			width: 100%;
 			height: 100%;
 			background-image: linear-gradient(to bottom, transparent, black);
+			pointer-events: none;
 		}
 	</style>
 
 	<div class="container">
 		<a href="https://simpleviewinc.com" target="_blank" rel="noopener">
-			<img src="https://via.placeholder.com/800x360" alt="A placeholder image" />
+			<!-- I had to change the placeholder link since it was broken -->
+			<img src="https://placehold.co/800x360" alt="A placeholder image" />
 		</a>
 		<div class="overlay"></div>
 	</div>

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
@@ -1,24 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Map</title>
 </head>
+
 <body>
-	
+
 	<script>
 		const startingArray = ['Sergio', 'Keve', 'Kam', 'Bree', 'Blake'];
 
 		// 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
 
 		console.log(endingArray);
 	</script>
 
 </body>
+
 </html>
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
@@ -1,33 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Objects as a Map</title>
 </head>
+
 <body>
-	
+
 	<script>
-		const information = getInformation('date');
+		const information = getInformation('time');
 		console.log(information);
 
-		// Rewrite this function to replace the if/else logic with a map lookup.
+		// 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 infoObject = {
+				date: "October 6, 1986",
+				time: "21:13 PM",
+				mood: "Powerful, spirited..."
 			}
 
-			return rtn;
+			return infoObject[key] || "Error: Invalid option selected...";
 		}
 	</script>
 
 </body>
+
 </html>