simpleviewinc · developerrohanpal · Jul 16, 2025 · Jul 16, 2025 · Jul 16, 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,15 @@
 <body>
 
 	<!-- Add your code here -->
+	 <form action="/login" method="post">
+		<label for="email">Email</label>
+		<input type="email" name="email" id="email" required>
+
+		<label for="password">Password</label>
+		<input type="password" name="password" id="password" required>
+
+		<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
@@ -26,5 +26,21 @@
 
 	<!-- Add your code here -->
 
+	<img src="https://placehold.co/400x180" 
+	alt="developer Image" 
+	srcset="
+	https://placehold.co/800x360 640w
+	https://placehold.co/1200x540 1024w
+	https://placehold.co/1600x720 1440w
+	https://placehold.co/2000x900 1800w
+	" 
+	sizes="
+	(min-width: 1800px) 2000px,
+	(min-width: 1440px) 1600px,
+	(min-width: 1024px) 1200px,
+	(min-width: 640px) 800px,
+
+	"
+	>
 </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
@@ -20,11 +20,37 @@
 			width: 100%;
 			height: auto;
 		}
+		@media (max-width : 600px) {
+			.responsive-image{
+				aspect-ratio: 1/1;
+			}
+		}
+
+		@media (min-width:601px){
+			.responsive-image{
+				aspect-ratio: 10/8;
+			}
+		}
+
 	</style>
 </head>
 <body>
 
 	<!-- Add your code here -->
+	 <img 
+	 src="https://placehold.co/540x800" 
+	 alt="developer Responsive image" 
+	 class="responsive-image"
+	 srcset="
+	 https://placehold.co/1200x900 640w,
+	 https://placehold.co/1600x720 1024w
+	 "
+
+	 sizes="
+	 (min-width: 1024px)  1600px,
+	 (min-width: 640px) 1200px
+	 "
+	 >
 
 </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,41 @@
 <!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>
+<style>
+
+</style>
+
 <body>
-	
+
 	<!-- Add your code here -->
+	<section>
+		<h2>Phase 4:</h2>
+		<h1>Destination Thrive</h1>
+		<h3>Objective: create omni-channel synergy</h3>
+
+
+		<p>
+			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus id excepturi neque voluptas nesciunt corporis, ad repellendus perferendis debitis, expedita quae possimus facere rerum quidem asperiores adipisci minima! Rem, molestias.
+		</p>
+
+		<h4>Key Focus:</h4>
+		<ul>
+			<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, eveniet.</li>
+			<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, eveniet.</li>
+			<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, eveniet.</li>
+			<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, eveniet.</li>
+			<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, eveniet.</li>
+		</ul>
+
+		<h4>Time</h4>
+		<p>approx, 24 Months and beyond</p>
+	</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
@@ -9,7 +9,11 @@
 
 	<style>
 		/* Update the following line of CSS to only style the inputs of type `text` */
-		* { border: 2px solid rebeccapurple; }
+		/* * { border: 2px solid rebeccapurple; } */
+		input[type="text"]{
+			border: 1px 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
@@ -8,8 +8,11 @@
 <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">

diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html
@@ -16,10 +16,12 @@
 
 	<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;
+			line-height: 1.6;
+			color: green;
 		}
 	</style>
 

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,36 @@
 
 	<style>
 		/* Add your CSS here */
+		.btn{
+			padding: 12px 32px;
+			border-radius: 4px;
+			color: balck;
+			border: none;
+			margin: 5px;
+			cursor: pointer;
+			font-weight: bold;
+
+		}
+		.btn-default{
+			background-color: #f5f5f5;
+		}
+		.btn-primary
+		{
+			background-color: #90CDF4;
+		}
+		.btn-link{
+			background-color: transparent;
+		}
+		.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
@@ -22,6 +22,12 @@
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transition: transform 160ms ease;
+		}
+
+		.box:hover{
+			transform: scale(2);
+			transition: transform 200ms ease all;
 		}
 	</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
@@ -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
 

diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
@@ -10,10 +10,9 @@
 	<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
 

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
@@ -13,19 +13,15 @@
 
 		// Rewrite this function to replace the if/else logic with a map lookup.
 		function getInformation(key) {
-			let rtn;
+
+		const infoMap = {
+				date: 'July 14, 2025',
+				time: '1:40 AM',
+				mood: 'Powerful, sprited'
 
-			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;
+			return infoMap[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
@@ -12,6 +12,7 @@ <h1 data-counter>0</h1>
 
 	<script>
 		const counterEl = document.querySelector('[data-counter]');
+		const buttonEl = document.querySelector('[data-action="increment-counter"]')
 		let counter = 0;
 
 		function increment() {
@@ -20,6 +21,7 @@ <h1 data-counter>0</h1>
 		}
 
 		// Add your code here to make clicking the button run the increment function
+		buttonEl.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
@@ -24,6 +24,13 @@ <h2>More Jeff Goldblum</h2>
 
 	<script>
 		// Add you code here
+		const template = document.querySelector('script[type = "text/template"]');
+		const container = document.querySelector('.container');
+
+		const newWrapper = document.createElement('div');
+		newWrapper.innerHTML = template.innerHTML.trim();
+
+		container.appendChild(newWrapper.firstElementChild)
 	</script>
 
 </body>

diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html
@@ -11,6 +11,21 @@
 
 	<script>
 		// Add your code here
+
+		const movieList = document.querySelector('.movies');
+		const apiUrl = "https://ghibliapi.vercel.app/films";
+
+		fetch(apiUrl)
+		.then(response => response.json())
+		.then(data => {
+				data.forEach(item => {
+					const li = document.createElement('li');
+					li.textContent = item.title;
+					movieList.appendChild(li);
+				});
+			}).catch(error =>{
+				console.error('error fetching data' , error)
+			})
 	</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
@@ -29,6 +29,10 @@
 	<style>
 		.cards {
 			/* Add your code here */
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+			gap: 1rem;
+			padding: 1rem;
 		}
 	</style>
 

diff --git a/Week 2.1 - CSS Grid/2. Placing Items/index.html b/Week 2.1 - CSS Grid/2. Placing Items/index.html
@@ -10,15 +10,25 @@
 			display: grid;
 			margin: 0 auto;
 			max-width: 800px;
+			position: relative;
 		}
 
-		.photo > * { mix-blend-mode: multiply; }
+		.photo > * { 
+			grid-area: 1/1;
+			width: 100%;
+			height: auto;
+			mix-blend-mode: multiply;
+
+		}
 	</style>
 </head>
 <body>
 
 	<style>
 		/* Add your code here */
+		.channel{
+
+		}
 	</style>
 
 	<div class="photo">