Merge branch 'master' into anchor-like-button

Author: tommygonzaleza

exercises/00-Welcome/README.es.md

@@ -5,6 +5,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
 # ¡¡Bienvenido a los ejercicios de CSS!!
 
 Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂
+
 Aprender a programar es dificil ¡Probablemente necesitarás coaching! Envíame un DM vía Twitter si tienes alguna duda.
 
 Durante este curso aprenderás los siguientes conceptos:

exercises/00-Welcome/README.md

@@ -5,6 +5,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
 # Welcome to CSS Exercises!!
 
 My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂
+
 Learning to code is hard, you will problably need coaching! DM me on twitter if you have any question.
 
 During this course you will be learning the following concepts:

exercises/02-Separate-Stylesheet/README.es.md

@@ -2,11 +2,11 @@
 
 Si usas la etiqueta html `<link>`, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`.
 
-Esa es una mejor práctica porque te permite tener un sitio web a sin diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML.
+Esa es una mejor práctica porque te permite tener un sitio web sin diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML.
 
 ## 📝 Instrucciones:
 
-LLena el `styles.css` con el contenido necesario para que el body del sitio web azul (blue).
+LLena el `styles.css` con el contenido necesario para que el body del sitio web sea azul (blue).
 
 ## 💡 Pista:
 

exercises/02.1-Background/README.md

@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8"
 
 The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`.
 
-If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified.
+If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where it is being applied, among other properties that can be modified.
 
 ## 📝 Instructions:
 

exercises/03-Inline-Styles/README.md

@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI"
 
 # `03` Inline Styles
 
-Inline styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point.
+`Inline` styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point.
 
 To use inline styles, instead of declaring a <style> tag in the header of the document, you have to set the "style" attribute of any element with the CSS code you need to apply to that specific element.
 

exercises/04.1-Combined-Rules/README.md

@@ -24,9 +24,9 @@ border: black 1px solid;
 
 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.
+2. Combine the all background rules, but the `background-size`, into just one line using the `background:` rule.
 
-*The background size cannot be combined, the browsers don't support it yet.*
+*The `background-size` cannot be combined, the browsers don't support it yet.*
 
 ## Hint:
 

exercises/04.2-Apply-several-classes/README.es.md

@@ -1,6 +1,6 @@
 # `04.2` Aplica varias clases
 
-Hemos preparado un pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker.
+Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker.
 Vamos a usar clases y aplicarlas al mismo elemento `<div>`.
 
 ```html
@@ -9,7 +9,7 @@ Vamos a usar clases y aplicarlas al mismo elemento `<div>`.
 
 La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, etc.
 
-La clase `spades` contienes las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas).
+La clase `spades` contiene las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas).
 
 Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real.
 

exercises/05-Specificity/README.md

@@ -13,12 +13,12 @@ It's all about the level of Specificity. If you specify that your `div` with `id
 
 ## 📝 Instrucciones:
 
-1. Override the background-color of #thirditem without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
+1. Override the `background-color` of `#thirditem` without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
 
 
 ### 💡 Hint:
 
-You can use the **important!** annotation:
+You can use the **!important** annotation:
 https://css-tricks.com/when-using-important-is-the-right-choice/
 
 

exercises/06-Practicing-Rules/README.md

@@ -18,7 +18,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU"
 
 6. Add a `left padding` to the whole document of `20px` to make it easier to read.
 
-7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use rgba for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph.
+7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph.
 
 8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it).
 

exercises/07-Very-Specific-Rules/README.md

@@ -13,7 +13,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th
 
 1. Set the `ul` text color to `red` (override conflicts with specificity).
 
-2. Set the background color of the second `li` of the `ol` to `green` (don't use the #id selector).
+2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector).
 
 3. Change the odd rows of the tables to a yellow background using `tr:nth-child`.
 

exercises/07-Very-Specific-Rules/styles.css

@@ -1,7 +1,7 @@
 /** Insert your code here **/
 
 /*********** READ ONLY BLOCK ******
-You CAN NOT UPDATE anything from here on,
+You CANNOT UPDATE anything from here on,
 only add lines of code on top of this lines
 **/
 

exercises/07-Very-Specific-Rules/tests.js

@@ -9,9 +9,7 @@ describe("All the styles should be applied", function () {
   beforeEach(() => {
     //here I import the HTML into the document
     document.documentElement.innerHTML=html.toString();
-
     //apply the styles from the stylesheet if needed
-
   });
   afterEach(() => {
     jest.resetModules();
@@ -23,18 +21,13 @@ describe("All the styles should be applied", function () {
       "head"
     ).innerHTML=`<style>${css.toString()}</style>`;
     let cssArray=document.styleSheets[0].cssRules;
-
     let orangeHoverSelector="";
     for (let i=0; i<cssArray.length; i++) {
-
-      if (cssArray[i].selectorText==="ul li") {
+      if (cssArray[i].selectorText==="ul li" || cssArray[i].selectorText==="ul > li") {
         orangeHoverSelector=cssArray[i].style.color;
-
       }
       expect(orangeHoverSelector).toBe("red");
     }
-
-
   });
   it("The ul second element background should be green", function () {
     document.querySelector(
@@ -44,7 +37,7 @@ describe("All the styles should be applied", function () {
 
     let orangeHoverSelector="";
     for (let i=0; i<cssArray.length; i++) {
-      if (cssArray[i].selectorText==="ol li:nth-child(2)") {
+      if (cssArray[i].selectorText==="ol li:nth-child(2)" || cssArray[i].selectorText==="ol > li:nth-child(2)" ) {
         orangeHoverSelector=cssArray[i].style['background-color'];
 
       }
@@ -90,9 +83,4 @@ describe("All the styles should be applied", function () {
     let title = head.querySelector('title')
     expect(title).not.toBe(null)
   })
-
-
-
-
-
 });

exercises/09-Anchor-Styles/README.es.md

@@ -1,6 +1,6 @@
 # `09` Estilos de enlaces (anchor) 3D
 
-A las personas les gusta sentir que están haciendo clic en algo, uuna manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:
+A las personas les gusta sentir que están haciendo clic en algo, una manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:
 
 ![Example Image](../../.learn/assets/09-1.png?raw=true)
 

exercises/11-Font-Awesome-Icons/index.html

@@ -4,12 +4,12 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
-		<script src="https://kit.fontawesome.com/78d2a11ad0.js" crossorigin="anonymous"></script>
+		<script src="https://kit.fontawesome.com/072e5df971.js" crossorigin="anonymous"></script>
 		<title>11 Font Awesome</title>
 	</head>
 	<body>
 		<ul>
-			<li><i class="fa fa-camera-retro"></i> Hello</li>
+			<li><i class="fas fa-camera-retro"></i> Hello</li>
 		</ul>
 	</body>
 </html>

exercises/11-Font-Awesome-Icons/solution.hide.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<script src="https://kit.fontawesome.com/072e5df971.js" crossorigin="anonymous"></script>
+		<title>11 Font Awesome</title>
+	</head>
+	<body>
+		<ul>
+			<li><i class="fa fa-camera-retro"></i> Hello</li>
+			<li><i class="fa fa-flag">Flag</i></li>
+			<li><i class="fa fa-heart">Heart</i></li>
+		</ul>
+	</body>
+</html>

learn.json

@@ -11,10 +11,9 @@
     "difficulty": "easy",
     "video-solutions": true,
     "graded": true,
-   
-        "disableGrading": false,
-        "editor": {
-            "version": "1.0.73"
-        }
-    
-}
+    "disabledActions": ["test"],
+    "disableGrading": true,
+    "editor": {
+        "version": "1.0.73"
+    }
+}