simpleviewinc · h-tate-mitchell · Jun 9, 2022 · Jun 9, 2022 · Jun 10, 2022 · Jun 10, 2022
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,22 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
 <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 id="email" name="email" type="email">
+
+		<label for="password">Password</label>
+		<input id="password" name="password" type="password">
+
+		<button type="submit">Submit</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,19 @@
 		}
 	</style>
 </head>
+
 <body>
+
+	<picture>
+		<source media="(min-width:1800px)" srcset="https://via.placeholder.com/2000x900" />
+		<source media="(min-width:1440px)" srcset="https://via.placeholder.com/1600x720" />
+		<source media="(min-width:1024px)" srcset="https://via.placeholder.com/1200x540" />
+		<source media="(min-width:640px)" srcset="https://via.placeholder.com/800x360" />
+
+		<img src="https://via.placeholder.com/400x180" alt="gray box placeholder" width="400" height="180" />
+	</picture>
 
-	<!-- Add your code here -->
 
 </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 -->
+
+	<picture>
+		<source media="(min-width:1024px)" srcset="https://via.placeholder.com/1600x720">
+		<source media="(min-width:640px)" srcset="https://via.placeholder.com/1200x900">
+		<img src="https://via.placeholder.com/540x800" alt="gray box placeholder" width="540" height="800" />
+	</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,104 @@
 <!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>
+
+	<header>
+		<nav>
+			<ul>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
+				<li>
+					<a>
+						<i></i>
+					</a>
+				</li>
 
-	<!-- Add your code here -->
+			</ul>
+		</nav>
+	</header>
+
+	<main>
+		<h2>Phase 4:</h2>
+		<h1>Destination Thrive</h1>
+		<h2>Objective: Create omni-channel synergy</h2>
+		<p>This is the time to fully leverage your hard work and thrive...</p>
+		<hr />
+		<h3>KEY FOCUS:</h3>
+		<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>
+		<h3>TIME</h3>
+		<i></i>
+		<p>approx. 24 months and beyond</p>
+	</main>
+
+	<footer>
+
+	</footer>
 
 </body>
+
 </html>
diff --git a/Week 1.2 - CSS/1. Selectors - Attributes/index.html b/Week 1.2 - CSS/1. Selectors - Attributes/index.html
@@ -9,7 +9,7 @@
 
 	<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" />

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
@@ -9,13 +9,22 @@
 
 	<style>
 		/* Add your CSS here */
+		button {
+			padding: 12px 32px;
+			border-radius: 4px;
+			color: black;
+			background-color: #f5f5f5;
+		}
+		.primary { background-color: #90CDF4; }
+		.link { background-color: transparent; }
+		.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
@@ -22,6 +22,11 @@
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transition: transform 160ms;
+		}
+		.box:hover {
+			transform: scale(2.0);
+			transition-duration: 200ms;
 		}
 	</style>
 

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
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Filter</title>
 </head>
+
 <body>
-	
+
 	<script>
-		const startingArray = [1,2,3,4,5,6,7,8,9,10];
-		
+		const startingArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
 		// 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(int => int % 2 === 0);
 
 		// Custom Code END
 
 		console.log(endingArray);
 	</script>
 
 </body>
+
 </html>
diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
@@ -1,24 +1,28 @@
 <!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: 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,31 @@
 <!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');
 		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...';
-			}
-
-			return rtn;
+
+			const data = {
+				date: 'October 6, 1986',
+				time: '21:13 PM',
+				mood: 'Powerful, spirited...',
+			};
+
+			return data[key] ?? 'Error: Invalid option selected...';
 		}
 	</script>
 
 </body>
+
 </html>