test and exerises checked

4GeeksAcademy · alesanchezr · Dec 1, 2020 · Nov 11, 2020 · Nov 11, 2020 · Nov 11, 2020
commit 65b2cc498318d7909ec9a6428e8aa6ac9d031795
diff --git a/.learn/resets/04.1-Combined-Rules/styles.css b/.learn/resets/04.1-Combined-Rules/styles.css
@@ -0,0 +1,14 @@
+.what {
+	width: 50px;
+	height: 50px;
+	padding-top: 10px;
+	padding-left: 30px;
+	padding-right: 190px;
+	padding-bottom: 50px;
+	/* padding: 10px 30px 50px 190px; */
+	background: rgb(189, 189, 189);
+	background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
+	background-position-x: 100px;
+	background-repeat: no-repeat;
+	background-size: contain;
+}
diff --git a/.learn/resets/04.2-Apply-several-classes/index.html b/.learn/resets/04.2-Apply-several-classes/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04 Class selector
+		</title>
+	</head>
+
+	<body>
+		<div class="card spades">9</div>
+	</body>
+</html>
diff --git a/.learn/resets/04.3-id-Selector/index.html b/.learn/resets/04.3-id-Selector/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>
+			04.3 ID selector
+		</title>
+	</head>
+
+	<body>
+		<span>I should look like a button</span>
+	</body>
+</html>
diff --git a/.learn/resets/04.3-id-Selector/styles.css b/.learn/resets/04.3-id-Selector/styles.css
@@ -0,0 +1,5 @@
+#button1 {
+	background: #BDBDBD;
+    border: #5E5E5E;
+    border-radius: 5px;
+}
diff --git a/.learn/resets/05-Specificity/index.html b/.learn/resets/05-Specificity/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>05 Specificity</title>
+	</head>
+	<body>
+		<ul>
+			<li>My first item of the list</li>
+			<li>My second item of the list</li>
+			<li id="thirditem">My third item of the list</li>
+			<li>My forth item of the list</li>
+			<li>My fifth item of the list</li>
+		</ul>
+	</body>
+</html>
diff --git a/.learn/resets/05-Specificity/styles.css b/.learn/resets/05-Specificity/styles.css
@@ -0,0 +1,9 @@
+ul li{
+	background: blue;
+}
+
+#thirditem{
+	background: yellow;
+} 
+/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
+
diff --git a/.learn/resets/06-Practicing-Rules/index.html b/.learn/resets/06-Practicing-Rules/index.html
@@ -0,0 +1 @@
+//nothing to see here
diff --git a/.learn/resets/06-Practicing-Rules/styles.css b/.learn/resets/06-Practicing-Rules/styles.css
diff --git a/.learn/resets/07-Very-Specific-Rules/index.html b/.learn/resets/07-Very-Specific-Rules/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>07 Very Specific Rules</title>
+	</head>
 	<body>
+		<h1>The learning essay</h1>
+		<h2>3 reasons you know you are learning</h2>
+		<p id="id1">
+			We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
+		</p>
+		<ol>
+			<li>You are able to complete the exercises by yourself.</li>
+			<li>You understand what the teacher is talking about</li>
+			<li>Your are able to have conversations about the topic</li>
+		</ol>
+		<h2>3 reasons you know love what you are learning</h2>
+		<ul>
+			<li>Time passes fast.</li>
+			<li>You are anxious to finish this excercise and start the next one.</li>
+			<li>Is 12am and you don't want to go to sleep.</li>
+		</ul>
+		<p>
+			If you can't sleep, what better than watching videos of cats?
+			<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
+		</p>
+
+		<table>
+			<tr>
+				<td>Age</td>
+				<td>Gender</td>
+			</tr>
+			<tr>
+				<td>12 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>22 years</td>
+				<td>Female</td>
+			</tr>
+			<tr>
+				<td>11 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>21 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>22 years</td>
+				<td>Female</td>
+			</tr>
+			<tr>
+				<td>10 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>13 years</td>
+				<td>Female</td>
+			</tr>
+			<tr>
+				<td>13 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>10 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>11 years</td>
+				<td>Male</td>
+			</tr>
+			<tr>
+				<td>11 years</td>
+				<td>Male</td>
+			</tr>
+		</table>
+	</body>
+</html>
diff --git a/.learn/resets/07-Very-Specific-Rules/styles.css b/.learn/resets/07-Very-Specific-Rules/styles.css
@@ -0,0 +1,15 @@
+/** Insert your code here **/
+
+/*********** READ ONLY BLOCK ******
+You CAN NOT UPDATE anything from here on,
+only add lines of code on top of this lines
+**/
+
+body {
+	color: blue;
+}
+
+ul li,
+ol li {
+	color: green;
+}
diff --git a/.learn/resets/08-Rounded-Image/index.html b/.learn/resets/08-Rounded-Image/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>08 Rounded Image</title>
+	</head>
+
+	<body>
+		<img class="rounded" src="https://assets.breatheco.de/apis/img/funny/einstein.png" />
+	</body>
+</html>
diff --git a/.learn/resets/08-Rounded-Image/styles.css b/.learn/resets/08-Rounded-Image/styles.css
@@ -0,0 +1,6 @@
+body {
+	background: #bdbdbd;
+}
+.rounded {
+	border-radius: 100%;
+}
diff --git a/.learn/resets/09-Anchor-Styles/index.html b/.learn/resets/09-Anchor-Styles/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>09 Anchor Styles</title>
+	</head>
+
+	<body>
+		<a class="threeDimension" href="#">Click me</a>
+	</body>
+</html>
diff --git a/.learn/resets/09-Anchor-Styles/styles.css b/.learn/resets/09-Anchor-Styles/styles.css
@@ -0,0 +1,16 @@
+
+.threeDimension {
+	display: block;
+	border: 1px solid;
+	border-color: #aaa #000 #000 #aaa;
+	width: 8em;
+	background: #fc0;
+	text-decoration: none;
+	text-align: center;
+	color: black;
+}
+
+a.threeDimension:active {
+	/* your code here*/
+
+}
diff --git a/.learn/resets/10-Your-Own-Font/index.html b/.learn/resets/10-Your-Own-Font/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <!--your code here -->
+
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+
+    <title>10 Your Own Font</title>
+  </head>
+  <body>
+    <h1 class="myTitle">My unique font</h1>
+  </body>
+</html>
diff --git a/.learn/resets/10-Your-Own-Font/styles.css b/.learn/resets/10-Your-Own-Font/styles.css
@@ -0,0 +1,3 @@
+.myTitle {
+	/*your code here*/
+}
diff --git a/.learn/resets/11-Font-Awesome-Icons/index.html b/.learn/resets/11-Font-Awesome-Icons/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <title>11 Font Awesome</title>
+  </head>
+  <body>
+    <ul>
+      <li><i class="fa fa-camera-retro"></i> Hello</li>
+    </ul>
+  </body>
+</html>
diff --git a/.learn/resets/11-Font-Awesome-Icons/styles.css b/.learn/resets/11-Font-Awesome-Icons/styles.css
@@ -0,0 +1,3 @@
+li {
+	list-style: none;
+}
diff --git a/.learn/resets/12-Relative-Length-EM-REM/index.html b/.learn/resets/12-Relative-Length-EM-REM/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>12 Relative Length EM REM</title>
+	</head>
+	<body>
+		<div id="my-first-div">
+			<h2>First h2 heading</h2>
+			<h3>First h3 heading</h3>
+			<p>Here is some nice fake content</p>
+		</div>
+		<div id="the-second-one">
+			<h2>Second h2 heading</h2>
+			<h3>Second h3 heading</h3>
+			<p>More fake content but now in the second container</p>
+		</div>
+	</body>
+</html>
diff --git a/.learn/resets/12-Relative-Length-EM-REM/styles.css b/.learn/resets/12-Relative-Length-EM-REM/styles.css
@@ -0,0 +1,8 @@
+#my-first-div {
+	font-size: 15px;
+}
+#the-second-one {
+	font-size: 25px;
+}
+
+/* YOUR CODE BELOW THIS LINE */
diff --git a/.learn/resets/13-Anchor-Like-Button/index.html b/.learn/resets/13-Anchor-Like-Button/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>13 Anchor Like Button</title>
+	</head>
+	<body>
+		<a href="#" class="orange-btn">Beautiful Button</a>
+	</body>
+</html>
diff --git a/.learn/resets/13-Anchor-Like-Button/styles.css b/.learn/resets/13-Anchor-Like-Button/styles.css
@@ -0,0 +1,7 @@
+.orange-btn {
+	/*your code here*/
+}
+
+.orange-btn:hover {
+	/*YOUR CODE HERE FOR THE HOVER STATE*/
+}
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
@@ -19,8 +19,7 @@ describe("All the styles should be applied", function () {
     jest.resetModules();
   });
   it("The body tag should not contains any inline style", function () {
-    document.qulector(
-.querySelector(
+    document.querySelector(
       "head"
     ).innerHTML=`<style>${css.toString()}</style>`;
     let bodyInlineStyle=document.getElementsByTagName("body");

diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md
@@ -2,15 +2,15 @@
 
 La regla `background` del CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser  `color` o una `imagen`.
 
-Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustarla su tamaño al contenedor completo, entre otras propiedades eso puede ser modificado.
+Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades eso puede ser modificado.
 
 ## 📝 Instrucciones:
 
 1.  Construye el ejercicio.
 2.  Verifica la vista previa.
-3.  En el archivo styles.css pon el background-size a 'contain'          (verifica la pestaña styles.css).
+3.  En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css)
 4.  Construye y previsualiza el ejercicio nuevamente.
-5.  Cambia el background-repeat a 'inherit'  para que se repita          sobre el eje x y el eje y.
+5.  Cambia el background-repeat a 'inherit'  para que se repita sobre el eje x y el eje y.
 6.  Construye y previsualiza el ejercicio nuevamente.
 
 

diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md
@@ -1,12 +1,10 @@
 # `04` El selector de clase
 
-Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector de `.class`:
+Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector `.class`:
 
-#### 1) Selector de `.class` 
+#### 1) Selector de clase
 
-Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos.
-
-Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
+Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
 
 ```css
 .small{

diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md
@@ -10,7 +10,7 @@ border-style: solid;
 border-width: 1px;
 ```
 
-Las propiedades de border se pueden consolidar en una sola línea como:
+Las propiedades de border se pueden consolidar en una sola línea así:
 
 ```css
 border: black 1px solid;
@@ -19,7 +19,7 @@ border: black 1px solid;
 # 📝 Instrucciones:
 
 
-1. Combina las 4 reglas de padding una sola utilizando la regla "padding:".
+1. Combina las 4 reglas de padding una sola utilizando la regla "padding".
 2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:".
 
 

diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/04.1-Combined-Rules/README.md
@@ -19,7 +19,7 @@ border: black 1px solid;
 # 📝 Instructions:
 
 
-1. Combine the 4 padding rules into just one using the "padding:" rule.
+1. Combine the 4 padding rules into just one using the "padding" rule.
 2. Combine the all background rules, but the background size, into just one line using the "background:" rule.