The learning essay

3 reasons you know you are learning

- 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. + We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.

1. You are able to complete the exercises by yourself.
-
2. You understand what the teacher is talking about
-
3. Your are able to have conversations about the topic
+
4. You understand what the teacher is talking about.
+
5. You are able to have conversations about the topic.

3 reasons you know love what you are learning

3 reasons you love what you are learning

• Time passes fast.
-
• You are anxious to finish this excercise and start the next one.
-
• Is 12am and you don't want to go to sleep.
+
• You are anxious to finish this exercise and start the next one.
+
• It's 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? From eee9b2734ffb24049bd05b882c0663722f640405 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:03:26 +0200 Subject: [PATCH 091/294] Update README.md --- exercises/06-Practicing-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 409dabd7..c63091d4 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that) and type "3 reasons you know you are learning". +6. Add a `white semi-transparent background (0.2)` to the first `p` to make it easier to read (you have to use `rgba` for that). 7. Then apply a `padding` of `5px` to all sides of that paragraph. From 2a451389e0c79f870860c285e3edffbc35f81b8f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:08:17 +0200 Subject: [PATCH 092/294] Update README.md --- exercises/06-Practicing-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index c63091d4..1674968f 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a `white semi-transparent background (0.2)` to the first `p` to make it easier to read (you have to use `rgba` for that). +6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that). 7. Then apply a `padding` of `5px` to all sides of that paragraph. From f0ca1f718c28ce90dff2173b42325d790d8aa966 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:10:24 +0200 Subject: [PATCH 093/294] Update README.es.md --- exercises/06-Practicing-Rules/README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index 9cf27efa..101596bb 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -8,15 +8,15 @@ 3. Cambia el color del `h1` a rojo(`red`). -4. Haz todos los `h2` tengan subrayado. +4. Haz que todos los `h2` tengan subrayado. 5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. -6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto). +6. Agrega un fondo blanco semitransparente (`semi-transparent background (0.2)`) al primer párrafo para que sea más fácil de leer (tienes que usar `rgba` para esto). 7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo. -8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo). +8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que pasar el cursor encima del anchor para probarlo). ## El resultado debería ser algo como esto: From 199feb401f9013c31aa63c64caa8f91dd82c9b93 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:14:29 +0200 Subject: [PATCH 094/294] Update tests.js --- exercises/06-Practicing-Rules/tests.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index a348b847..d9fd4156 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -11,7 +11,7 @@ describe("All the styles should be applied", () => { let link = document.querySelector("link") let title = document.querySelector('title') - test("the background should match", () => { + test("The background should match", () => { document.querySelector( "head" ).innerHTML = ``; @@ -21,7 +21,7 @@ describe("All the styles should be applied", () => { `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y` ); }); - test("the font-family should be 'Times New Roman'", () => { + test("The font-family should be 'Times New Roman'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -29,7 +29,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\""); }); - test("the padding-left should be '20px'", () => { + test("The padding-left should be '20px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -37,7 +37,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - test("the font-family in the H1 Tag should be 'Courier'", () => { + test("The font-family in the h1 tag should be 'Courier'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -46,7 +46,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - test("the color in the H1 Tag should be 'red'", () => { + test("The color in the h1 tag should be 'red'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -55,7 +55,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - test("the text-decoration in the H2 Tag should be 'underline'", () => { + test("the text-decoration in the h2 tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -64,7 +64,7 @@ describe("All the styles should be applied", () => { let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - test("the padding in the #id1 Tag should be '5px'", () => { + test("The padding in the #id1 tag should be '5px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -74,7 +74,7 @@ describe("All the styles should be applied", () => { expect(idTagStyles["padding"]).toBe("5px"); }); - test("The a hover underline should be removed", () => { + test("The a:hover underline should be removed", () => { document.querySelector( "head" ).innerHTML = ``; @@ -88,7 +88,7 @@ describe("All the styles should be applied", () => { expect(orangeHoverSelector).toBe("none"); }); - test("The a hover color should be green", () => { + test("The a:hover color should be green", () => { document.querySelector( "head" ).innerHTML = ``; From 35f4edfdfc506ca90d0af21a90040ec7d2f3676c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:37:05 +0200 Subject: [PATCH 095/294] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 3cba95e9..dc922179 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -19,8 +19,8 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th  ->Important: You should **NOT** modify the index.html file +>Important: You should **NOT** modify the index.html file. ## :bulb: Hint: -1. The `!important` attribute helps to override over other attributes. +1. The `!important` attribute helps to override other attributes. From 0b2d547111c0ae64205af66706caadff3a4b3818 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:38:48 +0200 Subject: [PATCH 096/294] Update styles.css --- exercises/07-Very-Specific-Rules/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 300d0677..70e1923d 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,8 +1,8 @@ /** Insert your code here **/ -/*********** READ ONLY BLOCK ****** +/********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, -only add lines of code on top of this lines +only add lines of code on top of these lines **/ body { From 1af47842ca50b31ae31725af254a0e9241605578 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:39:09 +0200 Subject: [PATCH 097/294] Update styles.css --- exercises/07-Very-Specific-Rules/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 70e1923d..164b694b 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,6 +1,6 @@ /** Insert your code here **/ -/********** READ ONLY BLOCK ****** +/********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of these lines **/ From f60fde3ad7c036a71cefe145dbbe4e87ade403f4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:40:29 +0200 Subject: [PATCH 098/294] Update solution.hide.css --- exercises/07-Very-Specific-Rules/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/07-Very-Specific-Rules/solution.hide.css index 55fb5ff4..232aa480 100644 --- a/exercises/07-Very-Specific-Rules/solution.hide.css +++ b/exercises/07-Very-Specific-Rules/solution.hide.css @@ -12,9 +12,9 @@ tr:nth-child(odd) { background: yellow; } -/*********** READ ONLY BLOCK ****** +/*********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, -only add lines of code on top of this lines +only add lines of code on top of these lines **/ body { From c83a96ed8e4e6d0054883e9d06fbeb4fb5d6d743 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:44:29 +0200 Subject: [PATCH 099/294] Update index.html --- exercises/07-Very-Specific-Rules/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..301d8f1d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -10,18 +10,18 @@

The learning essay

3 reasons you know you are learning

- 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. + We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.

1. You are able to complete the exercises by yourself.
2. You understand what the teacher is talking about
-
3. Your are able to have conversations about the topic
+
4. You are able to have conversations about the topic

3 reasons you know love what you are learning

• Time passes fast.
-
• You are anxious to finish this excercise and start the next one.
-
• Is 12am and you don't want to go to sleep.
+
• You are anxious to finish this exercise and start the next one.
+
• It's 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? From 4cb7d59020c03be3ae6c4945bf39e77e7aab6055 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 04:00:16 +0200 Subject: [PATCH 100/294] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index dc922179..ece42bb9 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" # **Important:** -In this exercise, you can add your code only above the **READ ONLY BLOCK** of the code, you can add as many lines as you want, but always above. +In this exercise, you can add your code only above the **READ-ONLY BLOCK** of the code, you can add as many lines as you want, but always above. ## 📝 Instructions: From 451b73a78255d8e67fba73c5cb8d306bc3fba79b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 04:03:47 +0200 Subject: [PATCH 101/294] Update README.es.md --- exercises/07-Very-Specific-Rules/README.es.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index 7ec14ada..b3ab50f4 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,21 +1,21 @@ -# `07` Reglas Muy Especificas +# `07` Reglas Muy Específicas ## **Importante:** -En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba. +En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba. ## 📝 Instrucciones: -1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico). +1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico). 2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class). -3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`. +3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`.  >Importante: **NO** debes modificar el archivo index.html -## :bulb: Pista: +## 💡 Pista: -1. El atributo `!important` ayuda a sobreescribir stilos. \ No newline at end of file +1. El atributo `!important` ayuda a sobreescribir estilos. From 5f220ca22434de7cb23b601a4c7a280639d8bfcf Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:06:18 +0200 Subject: [PATCH 102/294] Update README.md --- exercises/08-Rounded-Image/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 7cedf6b1..c168c000 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -2,7 +2,7 @@ A lot of websites use rounded profile images, a technique that really makes a website more beautiful! -The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach, is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals: +The obvious way to create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals:  @@ -10,7 +10,7 @@ The obvious way create a rounded profile picture is to create an image tag and a 1. Use `border-radius`. -2. In this case, in addition to `border-radius`, you will have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). +2. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). ## 💡 Hint: @@ -19,4 +19,4 @@ The obvious way create a rounded profile picture is to create an image tag and a + You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/) -+ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) \ No newline at end of file ++ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) From 846c7f7c06b3b76fa1be360bd2818c424f4af05c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:14:08 +0200 Subject: [PATCH 103/294] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 3e7e4c25..a6d6c283 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -1,10 +1,10 @@ # `08` Imagen Redondeada -Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso! +Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. -El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos: +El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho, no se verán como un círculo, se verán como óvalos:  @@ -12,12 +12,12 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 1. Usa `border-radius`. -2. Adicionalmente a `border-radius`, tenemos que también utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). +2. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). ## 💡 Pista: -+ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. ++ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. -+ En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) ++ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) + Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) From ef6879b6b5b0b126c38d4d7dcfeaa159713eff64 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:14:46 +0200 Subject: [PATCH 104/294] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index a6d6c283..31f54e0a 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -18,6 +18,6 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La + Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. -+ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) ++ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/). -+ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) ++ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). From bda40ba4f68bd9060b4636778c8600c6f3ece74d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:15:05 +0200 Subject: [PATCH 105/294] Update README.md --- exercises/08-Rounded-Image/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index c168c000..46631553 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -17,6 +17,6 @@ The obvious way to create a rounded profile picture is to create an image tag an + If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle. -+ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/) ++ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/). -+ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) ++ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). From 4f57d99edf892d894c6334bf63e4de1f82c5c685 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:22:29 +0200 Subject: [PATCH 106/294] Update tests.js --- exercises/08-Rounded-Image/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js index 70c5b643..9a0f3614 100644 --- a/exercises/08-Rounded-Image/tests.js +++ b/exercises/08-Rounded-Image/tests.js @@ -13,11 +13,11 @@ describe("All the styles should be applied", () => { const img = document.querySelector(".rounded") - test("the img tag should exist", () => { + test("The img tag should exist", () => { expect(img).toBeTruthy(); }) - test("the width in the img Tag should be equal to its height and vice versa", () => { + test("The width of the img tag should be equal to its height and vice versa", () => { document.querySelector( "head" ).innerHTML = ``; @@ -42,7 +42,7 @@ describe("All the styles should be applied", () => { expect(height).toBe(width); }); - test("the object-fit value of the img Tag should be 'cover'", () => { + test("The object-fit value of the img tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -51,7 +51,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-fit"]).toBe("cover"); }); - test("the object-position value of the img Tag should be 'top'", () => { + test("The object-position value of the img tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; From efbfceabff62aad8777af3b886584a56629fd186 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:47:48 +0200 Subject: [PATCH 107/294] Update README.md --- exercises/09-Anchor-Styles/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/09-Anchor-Styles/README.md index 3ce04f9a..a4b23419 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/09-Anchor-Styles/README.md @@ -4,11 +4,11 @@ People like to feel that they are clicking on something, a great approach to acc  -You can control what css rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example: +You can control what CSS rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example: ```css a:active { - /* here you can specify whatever css rule that applies + /* here you can specify whatever CSS rule that applies to the anchor while being 'pressed' */ } ``` From d722beb901abb84bc488c0b64bdd3e673e4c83c8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:54:00 +0200 Subject: [PATCH 108/294] Update README.es.md --- exercises/09-Anchor-Styles/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md index 0164b06d..f700cee0 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/09-Anchor-Styles/README.es.md @@ -4,11 +4,11 @@ A las personas les gusta sentir que están haciendo clic en algo, una manera de  -Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), por ejemplo: +Puedes controlar qué reglas CSS se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (cuando pasas por encima con el mouse) o `active` (cuando haces clic), por ejemplo: ```css a:active { - /* aquí puedes especificar cualquier regla de css que aplique al anchor mientras se presiona' */ + /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se presiona' */ } ``` From e99823bdd40bbd11c049b6a43f15ebd33c90274e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:57:45 +0200 Subject: [PATCH 109/294] Update tests.js --- exercises/09-Anchor-Styles/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index 73192e4f..724de97d 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -20,14 +20,14 @@ describe("All the styles should be applied", () => { expect(cssArray).toBe(".threeDimension"); }) - test("the 'a' tag in the index.html should not be deleted", () => { + test("The 'a' tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); expect(html.toString().indexOf(` -1).toBeTruthy(); }); - test("The border-color rule for the 'threeDimension active ' property should match the instruction color", () => { + test("The border-color rule for the 'a.threeDimension:active' selector should match the instruction color", () => { // get computed styles of any element you like // let cssArray=document.styleSheets[0].cssRules; document.querySelector( From 9898aa6f8711a2a86d508f6f81949df97a1aa325 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:09:39 +0200 Subject: [PATCH 110/294] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index 63c24dc3..bdc5c435 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -1,6 +1,6 @@ # `10` Your Own Font -Yo canfind Google Fonts here: https://fonts.google.com +You can find Google Fonts here: https://fonts.google.com Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the `` tag of the HTML document like this: From d853b26a953b4638f183000b3446b93a741526c9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:10:30 +0200 Subject: [PATCH 111/294] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index bdc5c435..1c0f04e1 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -8,7 +8,7 @@ Pick your favorite one, and then use it by linking your website with the URL in ``` -After your font is linked you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. +After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. ## 📝 Instructions: From b274d39676c2a39dbaa50664ab1a58651b36da04 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:21:46 +0200 Subject: [PATCH 112/294] Update solution.hide.html --- exercises/10-Your-Own-Font/solution.hide.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html index d1547a63..eeb1c059 100644 --- a/exercises/10-Your-Own-Font/solution.hide.html +++ b/exercises/10-Your-Own-Font/solution.hide.html @@ -3,12 +3,12 @@ - + - + From ed7578e92cdd3c03a1ec031ed8f1fce3050c3ae2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:29:53 +0200 Subject: [PATCH 113/294] Update solution.hide.css --- exercises/10-Your-Own-Font/solution.hide.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index e36ebf08..c6d008bb 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { /*your code here*/ - font-family: "Roboto"; /*Varies depending on the font you chose*/ + font-family: "Montserrat"; /*Varies depending on the font you chose*/ } From 55b7b439f6b000a2f60da0a5213aa53fa71f6985 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:36:41 +0200 Subject: [PATCH 114/294] Update solution.hide.css --- exercises/10-Your-Own-Font/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index c6d008bb..85e3a7c3 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { - /*your code here*/ - font-family: "Montserrat"; /*Varies depending on the font you chose*/ + /* Add your code below this line */ + font-family: "Montserrat"; /* Varies depending on the font you chose */ } From bc2a0a5c5259a1be8f84189eeb9b2361c948d8d9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:41:07 +0200 Subject: [PATCH 115/294] Update tests.js --- exercises/10-Your-Own-Font/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index 646f7192..f7c2460b 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -26,18 +26,18 @@ describe("All the styles should be applied", ()=>{ expect(orangeHoverSelector).toBeTruthy(); }); - test('the h1 tag should have a class "myTitle"', ()=>{ + test('The h1 tag should have a class "myTitle"', ()=>{ //or use query selector to compare hoy mane scriptags do we have const h = document.querySelector("h1"); expect(h.classList.contains("myTitle")).toBeTruthy(); }); - test("The link should be included in the head tag", ()=>{ + test("The google-font link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("*") expect(link.length).toBeGreaterThanOrEqual(2); }); - test("The Head tag should not includes a Style tag", ()=>{ + test("The head tag should not include a style tag", ()=>{ expect(html.toString().indexOf(` -1).toBeFalsy(); }); }); From f3b043492ee8ae44647cbe2d8e482a7696e8eaf5 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:53:17 +0200 Subject: [PATCH 116/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 2c09dbcd..bdee8776 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solve the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font-awesome solves the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From b26d7b80ec6988928de316ea449a440099ace799 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 19:15:50 +0200 Subject: [PATCH 117/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index bdee8776..3dfe0831 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solves the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font-awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From 8aa689283b1cb05cc752bafdf46a5b52877a0cf6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 19:28:22 +0200 Subject: [PATCH 118/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 3dfe0831..3db6538b 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -12,7 +12,7 @@ After linking your website with font-awesome, you can use the following code to -You can find all the available names here: http://fontawesome.io/icons/ +You can find all the available icons here: http://fontawesome.io/icons/ ``` ## 📝 Instructions: From 8c67d139bcd89554b19aed86a4dfcbf0a70bbfb0 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:12:00 +0200 Subject: [PATCH 119/294] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 23c21ced..324d713e 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -2,19 +2,19 @@ Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar". -¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! porque cada icono es una imagen y trabajar con imágenes ¡es horrible! +¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! Porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un ícono diferente y ahora puedes importar toda la fuente desde el sitio web y usar el ícono que quieras. +Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: ```html - - -Puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ + ``` +*Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/* + ## 📝 Instrucciones: From 7d60faffec2556c879a4e68b2156e10e39fdb659 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:13:42 +0200 Subject: [PATCH 120/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 3db6538b..8144a004 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -11,10 +11,10 @@ After linking your website with font-awesome, you can use the following code to ```html - -You can find all the available icons here: http://fontawesome.io/icons/ ``` +*You can find all the available icons here: http://fontawesome.io/icons/* + ## 📝 Instructions: 1. Add two more items into your list and add a different icon at the beginning of each item. From 20e71b07b361e1dbcc4bd31e3dcb6ef1705ea7a1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:13:56 +0200 Subject: [PATCH 121/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 8144a004..a70f4531 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -13,7 +13,7 @@ After linking your website with font-awesome, you can use the following code to ``` -*You can find all the available icons here: http://fontawesome.io/icons/* +> *You can find all the available icons here: http://fontawesome.io/icons/* ## 📝 Instructions: From e913fb354bb3a7874d9b4ec3d27c3c1ef49ddaf2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:14:36 +0200 Subject: [PATCH 122/294] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 324d713e..719b9b17 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -13,7 +13,7 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ``` -*Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/* +> *Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/* ## 📝 Instrucciones: From baacdf4585f170f2e0f4f55309cefd827d627386 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:18:54 +0200 Subject: [PATCH 123/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index a70f4531..4d935144 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -13,7 +13,7 @@ After linking your website with font-awesome, you can use the following code to ``` -> *You can find all the available icons here: http://fontawesome.io/icons/* +> *You can find all the available icons here: https://fontawesome.com/search?o=r&m=free* ## 📝 Instructions: From cb8871ba53b542985f00fc8c3ad38e86ec339c9f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:20:15 +0200 Subject: [PATCH 124/294] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 719b9b17..8e658c02 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -13,7 +13,7 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ``` -> *Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/* +> *Puedes encontrar todos los iconos disponibles aquí: https://fontawesome.com/search?o=r&m=free* ## 📝 Instrucciones: From d7c8138c0651a8116bde522a445ef9fe5d57cb95 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:26:24 +0200 Subject: [PATCH 125/294] Update solution.hide.html --- exercises/11-Font-Awesome-Icons/solution.hide.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/11-Font-Awesome-Icons/solution.hide.html index e9778b12..431e6b22 100644 --- a/exercises/11-Font-Awesome-Icons/solution.hide.html +++ b/exercises/11-Font-Awesome-Icons/solution.hide.html @@ -11,7 +11,7 @@

• Hello
• Hello
-
• Hello
+
• Hello

From 51133d5c33d66dd6f66bb7a41f37db9eb2a92efa Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:35:51 +0200 Subject: [PATCH 126/294] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 075d2f0e..56072996 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("ul tag should exists", ()=>{ + test("the ul tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); test("At least 3 li tags should exist", ()=>{ @@ -19,14 +19,14 @@ describe("All the styles should be applied", ()=>{ test("At least 3 i tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test(" LI innerHTML exist", ()=>{ + test("There should be some text on the li tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - test('the i tag(s) should have Font Awesome class(es) starting with "fa" | ex. "fa-solid"', ()=>{ + test('The i tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have expect(icons).toBeTruthy(); From 37682cde249164ff47e18d4ebbd237dffa933514 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:37:57 +0200 Subject: [PATCH 127/294] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 56072996..682064c8 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("the ul tag should exist", ()=>{ + test("The ul tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); test("At least 3 li tags should exist", ()=>{ From db6c0be20dbef960e30c1a41763d6ad1d5c6167c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:39:17 +0200 Subject: [PATCH 128/294] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 8e658c02..14ad44c3 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -4,7 +4,7 @@ Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea f ¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! Porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. +Font Awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: From 59e1e6c4e7dcc6d3327a2018abd8ac38547f02f1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:39:43 +0200 Subject: [PATCH 129/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 4d935144..e2d1efdc 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font Awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From b6a29ef318c5b66b17fc399fbc28c4bca27b273f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:42:50 +0200 Subject: [PATCH 130/294] Update styles.css --- exercises/11-Font-Awesome-Icons/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/11-Font-Awesome-Icons/styles.css index b22aedca..52fe9b9c 100644 --- a/exercises/11-Font-Awesome-Icons/styles.css +++ b/exercises/11-Font-Awesome-Icons/styles.css @@ -1,3 +1,4 @@ li { + font-size: 2.5rem; list-style: none; } From c4cfa607c0404e911f46c3430388cd8141643540 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:51:36 +0200 Subject: [PATCH 131/294] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 14ad44c3..2a78a9b0 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -18,5 +18,5 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ## 📝 Instrucciones: -Agrega dos elementos más a tu lista(`li`) y agrega un icono diferente al comienzo de cada elemento. +Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. From baa20e6a1e356abe07cee8ef2f7478ed8d4c3950 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:52:05 +0200 Subject: [PATCH 132/294] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index e2d1efdc..f9c7c09f 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -17,5 +17,5 @@ After linking your website with font-awesome, you can use the following code to ## 📝 Instructions: -1. Add two more items into your list and add a different icon at the beginning of each item. +1. Add two more items (`li`) into your list and add a different icon at the beginning of each item. From d2e0f14dce20dade95aeb7dd8107067e537cc57c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 22:03:19 +0200 Subject: [PATCH 133/294] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index 1c0f04e1..e2632833 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -5,7 +5,7 @@ You can find Google Fonts here: https://fonts.google.com Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the `` tag of the HTML document like this: ```Plain/Text - + ``` After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. From e824aab7854c1180305ec6c30647cd44d4ed3b99 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 22:03:58 +0200 Subject: [PATCH 134/294] Update README.es.md --- exercises/10-Your-Own-Font/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/10-Your-Own-Font/README.es.md index 16e4ab9a..bebc2839 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/10-Your-Own-Font/README.es.md @@ -5,7 +5,7 @@ Aquí puedes encontrar las fuentes de Google: https://fonts.google.com Elige la que más te guste, y úsala vinculando tu sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta `` del documento HTML de esta manera: ```Plain/Text - + ``` Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un `

`. From b09e86c79aa398cc4e0f7d316ea9a2ab9f1de6e5 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 23:55:03 +0200 Subject: [PATCH 135/294] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 682064c8..a1e11eee 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{ test("At least 3 i tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test("There should be some text on the li tags", ()=>{ + test("The i tags should be inside the li tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { From 96004a3008f5ccc5437fada7e0be1b30b91f90c9 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 6 Apr 2023 20:20:19 +0000 Subject: [PATCH 136/294] updated instructions for clarity --- exercises/04-Class-Selector/README.es.md | 2 +- exercises/04-Class-Selector/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md index e3d7f2a5..e8bd37ae 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/04-Class-Selector/README.es.md @@ -18,6 +18,6 @@ Usa la propiedad `class` del elemento HTML para seleccionarlo. Las reglas de est ## 📝 Instrucciones: En este momento hay una clase seleccionada en el CSS llamada -`.b-blue`. +`b-blue`. Por favor aplica la clase a ambas etiquetas HTML `

`. diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md index d0f7ccae..0dd45e76 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/04-Class-Selector/README.md @@ -22,7 +22,7 @@ Use the class property of the HTML element to select it. Styling rules will appl ## 📝 Instructions: -Right now there is a class selected on the CSS that is called `.b-blue`. +Right now there is a class selected on the CSS that is called `b-blue`. Please apply that class to both of the HTML `

` tags. From 489a61e3c549c4f154c1b0d83b0f94746355ebd5 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 10 Apr 2023 17:28:37 +0000 Subject: [PATCH 137/294] codespace reference --- README.es.md | 6 ++++-- README.md | 13 ++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.es.md b/README.es.md index a7cbcdf7..209bf0f3 100644 --- a/README.es.md +++ b/README.es.md @@ -40,9 +40,11 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! -## Instalación en un clic +## Instalación en un clic (recomendado) -[](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course) +Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). + +> Una vez ya tengas abirto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` ## Instalación manual diff --git a/README.md b/README.md index a2d3ef40..87813aca 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any questions. +*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/README.es.md) :es:* + ## You'll be learning the following concepts: 1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a ``; @@ -42,7 +42,7 @@ describe("All the styles should be applied", () => { expect(height).toBe(width); }); - test("The object-fit value of the img tag should be 'cover'", () => { + test("The object-fit value of the tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -51,7 +51,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-fit"]).toBe("cover"); }); - test("The object-position value of the img tag should be 'top'", () => { + test("The object-position value of the tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -60,7 +60,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-position"]).toBe("top"); }); - test("You should not change the existing head tag elements", () => { + test("You should not change the existing tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() From 8faa4093e4d4cfd8525ad4ed6a889b40ea62e5b3 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:54:33 +0200 Subject: [PATCH 148/294] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 31f54e0a..a1b3d8d9 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -12,7 +12,9 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 1. Usa `border-radius`. -2. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). +2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada. + +3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). ## 💡 Pista: From 4b9074972f8ff1dc00fd44d1395e84def032132b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:57:21 +0200 Subject: [PATCH 149/294] Update README.md --- exercises/08-Rounded-Image/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 46631553..f3074a62 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -10,7 +10,9 @@ The obvious way to create a rounded profile picture is to create an image tag an 1. Use `border-radius`. -2. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). +2. Use the properties `width` and `height` to make the image square shaped. + +3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). ## 💡 Hint: From 4a39434ee6fe5d421aef6ad10cc95bb3e9c6e7a2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:02:49 +0200 Subject: [PATCH 150/294] Update test.js --- exercises/04.3-id-Selector/test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js index adc3f260..ed2b823e 100644 --- a/exercises/04.3-id-Selector/test.js +++ b/exercises/04.3-id-Selector/test.js @@ -8,24 +8,24 @@ jest.dontMock('fs'); const span = document.querySelector("span"); const link = document.querySelector("link"); -test("There should be a span tag", () => { +test("There should be a tag", () => { expect(span).toBeTruthy() }); -test("The span tag should have the id 'button1'", () => { +test("The tag should have the id 'button1'", () => { expect(span).toBeTruthy(); let id = span.id expect(id).toBeTruthy(); expect(id).toBe('button1'); }); -test("The span tag should not contain any inline style", () => { +test("The tag should not contain any inline style", () => { let emptyBodyInlineStyle = {}; expect(span).toBeTruthy() expect(span.style._values).toEqual(emptyBodyInlineStyle); }); -test("You should not change the existing head tag elements", () => { +test("You should not change the existing tag elements", () => { let head = document.querySelector('head'); expect(head).toBeTruthy(); From 7810dfeab3cccd458eccdfb087947e4a169a63ef Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:03:53 +0200 Subject: [PATCH 151/294] Update tests.js --- exercises/05-Specificity/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index f3f8b814..a09aa84a 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -8,7 +8,7 @@ jest.dontMock('fs'); describe("All the styles should be applied", function () { - test("You should not change the existing head tag elements", function () { + test("You should not change the existing tag elements", function () { let head = document.querySelector('head') expect(head).toBeTruthy() From c8c602e1f84aafa675c5b34660233ed132b94d32 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:06:21 +0200 Subject: [PATCH 152/294] Update tests.js --- exercises/06-Practicing-Rules/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index d9fd4156..e691255c 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -37,7 +37,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - test("The font-family in the h1 tag should be 'Courier'", () => { + test("The font-family in the

tag should be 'Courier'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -46,7 +46,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - test("The color in the h1 tag should be 'red'", () => { + test("The color in the

tag should be 'red'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -55,7 +55,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - test("the text-decoration in the h2 tag should be 'underline'", () => { + test("the text-decoration in the

tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -102,7 +102,7 @@ describe("All the styles should be applied", () => { } expect(orangeHoverSelector).toBe('green'); }); - test("You should not change the existing head tag elements", () => { + test("You should not change the existing tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() From 31640a5e7e739994d2b9adc2c9948ba9c3594f0a Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:19:39 +0200 Subject: [PATCH 153/294] Update solution.hide.css --- exercises/09-Anchor-Styles/solution.hide.css | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css index 101d281c..8c12ea5b 100644 --- a/exercises/09-Anchor-Styles/solution.hide.css +++ b/exercises/09-Anchor-Styles/solution.hide.css @@ -7,6 +7,7 @@ text-decoration: none; text-align: center; color: black; + font-size: 22px; } a.threeDimension:active { From 963ebaa133f189b1fb74153b18712a048f109fd6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:20:19 +0200 Subject: [PATCH 154/294] Update styles.css --- exercises/09-Anchor-Styles/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..895dc3d6 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -8,9 +8,10 @@ text-decoration: none; text-align: center; color: black; + font-size: 22px; } a.threeDimension:active { /* your code here*/ -} \ No newline at end of file +} From 1a03a658634f9e2c07cabc4c4a1991725578d617 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:23:27 +0200 Subject: [PATCH 155/294] Update tests.js --- exercises/09-Anchor-Styles/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index 724de97d..1dea80c1 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -20,7 +20,7 @@ describe("All the styles should be applied", () => { expect(cssArray).toBe(".threeDimension"); }) - test("The 'a' tag in the index.html should not be deleted", () => { + test("The tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); expect(html.toString().indexOf(` -1).toBeTruthy(); @@ -71,7 +71,7 @@ describe("All the styles should be applied", () => { }); - test("You should not change the existing head tag elements", () => { + test("You should not change the existing tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() From e09f4394dc748c58c6cc5e1ee408f7a609cbcef8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:29:37 +0200 Subject: [PATCH 156/294] Update test.js --- exercises/01.1-The-Style-Tag/test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js index a4be505b..0b3c714b 100644 --- a/exercises/01.1-The-Style-Tag/test.js +++ b/exercises/01.1-The-Style-Tag/test.js @@ -7,16 +7,16 @@ jest.dontMock('fs'); const p = document.querySelector("p"); -test("There should be a p tag", ()=>{ +test("There should be a

tag", ()=>{ expect(p).toBeTruthy(); }) -test("The p tag color should be blue", ()=>{ +test("The

tag color should be blue", ()=>{ let styles = window.getComputedStyle(p); expect(styles["color"]).toBe("blue"); }); -test("The p tag should not contain any inline style", ()=>{ +test("The

tag should not contain any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(p.style._values).toEqual(emptyBodyInlineStyle); -}); \ No newline at end of file +}); From 9ecb581595a0dc757ae532212cd4c03b858b3c03 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:31:03 +0200 Subject: [PATCH 157/294] Update tests.js --- exercises/01.2-Your-First-Style/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js index 0eabdf65..32bf609b 100644 --- a/exercises/01.2-Your-First-Style/tests.js +++ b/exercises/01.2-Your-First-Style/tests.js @@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{ expect(styles["color"]).toBe("yellow"); }); - test("The body tag should not contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ let bodyInlineStyle = document.getElementsByTagName("body"); let emptyBodyInlineStyle = {}; expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); @@ -24,7 +24,7 @@ describe("All the styles should be applied", ()=>{ expect(a.style._values).toEqual(emptyBodyInlineStyle); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From 2cd2ff5aa6bfd125bf781e0691755660d3baac4a Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:32:06 +0200 Subject: [PATCH 158/294] Update tests.js --- exercises/02-Separate-Stylesheet/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js index e3f44fc4..2a46c829 100644 --- a/exercises/02-Separate-Stylesheet/tests.js +++ b/exercises/02-Separate-Stylesheet/tests.js @@ -10,13 +10,13 @@ describe("All the styles should be applied", ()=>{ const link = document.querySelector("link"); const body = document.querySelector("body"); - test("The body tag should not contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ document.querySelector("head").innerHTML = ``; let emptyBodyInlineStyle={}; expect(body.style._values).toEqual(emptyBodyInlineStyle) }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() @@ -27,7 +27,7 @@ describe("All the styles should be applied", ()=>{ expect(href).toEqual('./styles.css') }); - test("Your body tag background color should be blue", ()=>{ + test("Your tag background color should be blue", ()=>{ let styles = window.getComputedStyle(body) expect(styles["background-color"]).toBe("blue") }) From 58022d125dc64847b5163ea9cbc197200cc4a157 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:33:18 +0200 Subject: [PATCH 159/294] Update tests.js --- exercises/02.1-Background/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js index eacf944a..b0612a23 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/02.1-Background/tests.js @@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=>{ const link = document.querySelector("link"); const title = document.querySelector('title'); - test("The body tag should not contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ document.querySelector( "head" ).innerHTML = ``; @@ -37,7 +37,7 @@ describe("All the styles should be applied", ()=>{ expect(styles["background-repeat"]).toBe("repeat"); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From 1d76734376f1bdbc0bdad0805045b01e45d6359d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:35:48 +0200 Subject: [PATCH 160/294] Update tests.js --- exercises/03-Inline-Styles/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js index af82a4b3..e37fcb80 100644 --- a/exercises/03-Inline-Styles/tests.js +++ b/exercises/03-Inline-Styles/tests.js @@ -7,7 +7,7 @@ jest.dontMock("fs"); describe("The Table tag should contain inline style background: green", ()=>{ - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From 2be6b49a03b7b80b514529a58f48f33f6f1811f7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:36:58 +0200 Subject: [PATCH 161/294] Update test.js --- exercises/04-Class-Selector/test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/04-Class-Selector/test.js b/exercises/04-Class-Selector/test.js index bd342616..320b80ea 100644 --- a/exercises/04-Class-Selector/test.js +++ b/exercises/04-Class-Selector/test.js @@ -6,10 +6,10 @@ document.documentElement.innerHTML = html.toString(); jest.dontMock("fs"); -describe("Both p tags should have a blue background", () => { +describe("Both

tags should have a blue background", () => { const body = document.querySelector("body") const p = document.querySelectorAll("p"); - test("You should not change the existing head tag elements", () => { + test("You should not change the existing tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() @@ -20,7 +20,7 @@ describe("Both p tags should have a blue background", () => { expect(title).toBe('04 Class selector') }); - test("The body tag should not contain any inline style", () => { + test("The tag should not contain any inline style", () => { document.querySelector( "head" ).innerHTML = ``; @@ -28,10 +28,10 @@ describe("Both p tags should have a blue background", () => { expect(body.style._values).toEqual(emptyBodyInlineStyle) }); - test("There should be two p tags", () => { + test("There should be two

tags", () => { expect(p.length).toBe(2) }); - test("Both p tags should have a class name 'b-blue'", () => { + test("Both

tags should have a class name 'b-blue'", () => { p.forEach(e=>{ let eClass = e.getAttribute("class"); expect(eClass).toBe("b-blue") From f5f4148debd506029d51d8557af2103e1fdb09c6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:38:13 +0200 Subject: [PATCH 162/294] Update tests.js --- exercises/04.1-Combined-Rules/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js index ab8cc62f..e325ce5f 100644 --- a/exercises/04.1-Combined-Rules/tests.js +++ b/exercises/04.1-Combined-Rules/tests.js @@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=> { const link = document.querySelector("link"); const title = document.querySelector('title'); - test("The body tag should not contain any inline style", ()=> { + test("The tag should not contain any inline style", ()=> { document.querySelector( "head" ).innerHTML = ``; @@ -113,7 +113,7 @@ describe("All the styles should be applied", ()=> { expect(padLeft).toBeFalsy(); }); - test("You should not change the existing head tag elements", ()=> { + test("You should not change the existing tag elements", ()=> { let head = document.querySelector('head') expect(head).toBeTruthy() From d78f767fe2c84dd8d86dee46dd6c008b95ec8667 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:41:25 +0200 Subject: [PATCH 163/294] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index a1e11eee..b481bcfc 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,23 +10,23 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("The ul tag should exist", ()=>{ + test("The

tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); - test("At least 3 li tags should exist", ()=>{ + test("At least 3
• tags should exist", ()=>{ expect(document.querySelectorAll("li").length).toBe(3); }); - test("At least 3 i tags should exist", ()=>{ + test("At least 3 tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test("The i tags should be inside the li tags", ()=>{ + test("The tags should be inside the
• tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - test('The i tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ + test('The tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have expect(icons).toBeTruthy(); From 9a1a2ea241ad4d0d94b4b63c39605de3c6ce4b6e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:46:06 +0200 Subject: [PATCH 164/294] Update README.md --- exercises/12-Relative-Length-EM-REM/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md index e57186e4..6f2a2849 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/12-Relative-Length-EM-REM/README.md @@ -1,6 +1,6 @@ # `12` Relative Length em, rem -By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width. +By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width. There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit. @@ -8,11 +8,13 @@ There are other types of units that are not fixed, but relative. We use them whe In this exercise we have two `

  ` headings. They are both `

  `, but one is bigger than the other because headings have relative font-sizes by default. -Since the first `div` has a bigger based `font-size`, then the heading resizes accordingly. +Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly. -em: Relative to the current font-size of the parent. +## In short: -rem: Relative to the original font-size of the page. ++ em: Relative to the current font-size of the parent. + ++ rem: Relative to the original font-size of the page. ## 📝 Instructions: From 0d5ce0eba26edc1ff683df5a1a30ed25c76bfcf6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:52:21 +0200 Subject: [PATCH 165/294] Update README.es.md --- exercises/12-Relative-Length-EM-REM/README.es.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md index 9603c625..c6d63a40 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/12-Relative-Length-EM-REM/README.es.md @@ -1,4 +1,4 @@ -# `12` Longitud Relativa em, rem: +# `12` Longitud Relativa em, rem Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. @@ -8,11 +8,13 @@ Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cua En este ejercicio tenemos dos encabezados `

  `. Ambos son `

  `, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. -Dado que el primer `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta. +Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta. -em: Relativo al `font-size` actual del padre. +## En resumen: -rem: Relativo al `font-size` original de la página. ++ em: Relativo al `font-size` actual del padre. + ++ rem: Relativo al `font-size` original de la página. ## 📝 Instrucciones: From f795a0323e779769b1a8c3ed310ea0b68d515cd4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:56:51 +0200 Subject: [PATCH 166/294] Update tests.js --- exercises/12-Relative-Length-EM-REM/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index f6987b7a..326eb9b0 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{ const meta = document.querySelector("meta") const title = document.querySelector('title') const link = document.querySelector('link') - test("The H2 Tag should have a font-size: 0.8em", ()=>{ + test("The

  tag should have a font-size: 0.8em", ()=>{ // get computed styles of any element you like document.querySelector( "head" @@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{ var styles = window.getComputedStyle(h2Tag); expect(styles["font-size"]).toBe("0.8em"); }); - test("The H3 Tag should haave a font-size: 0.8rem", ()=>{ + test("The

  tag should have a font-size: 0.8rem", ()=>{ // get computed styles of any element you like document.querySelector( "head" @@ -28,7 +28,7 @@ describe("All the styles should be applied", ()=>{ var styles = window.getComputedStyle(h3Tag); expect(styles["font-size"]).toBe("0.8rem"); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From b39fc10d4972dc8598270597a2f66d41c144aeee Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:19:03 +0200 Subject: [PATCH 167/294] Update README.md --- exercises/08-Rounded-Image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index f3074a62..847293f1 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -10,7 +10,7 @@ The obvious way to create a rounded profile picture is to create an image tag an 1. Use `border-radius`. -2. Use the properties `width` and `height` to make the image square shaped. +2. Use the properties `width` and `height` to make the image a square shape. 3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). From b767142ab11a7b292e26c97890112a55801fb8e7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:52:32 +0200 Subject: [PATCH 168/294] Update tests.js --- exercises/13-Anchor-Like-Button/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index 587b95d7..cc3370ed 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{ const meta = document.querySelector("meta") const title = document.querySelector('title') const link = document.querySelector('link') - test("the padding should be '10px'", ()=>{ + test("The padding should be '10px'", ()=>{ document.querySelector( "head" @@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{ expect(classTagStyles["padding"]).toBe("10px"); }); - test("the border radius should be '4px'", ()=>{ + test("The border radius should be '4px'", ()=>{ document.querySelector( "head" @@ -29,7 +29,7 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - test("the underline should be removed", ()=>{ + test("The underline should be removed", ()=>{ document.querySelector( "head" @@ -47,7 +47,7 @@ describe("All the styles should be applied", ()=>{ expect(cssArray).toBe(".orange-btn"); } ) - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From bb33d6fe70666b28b97504184076784495b2266f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:53:04 +0200 Subject: [PATCH 169/294] Update tests.js --- exercises/13-Anchor-Like-Button/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index cc3370ed..1006a565 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{ expect(classTagStyles["padding"]).toBe("10px"); }); - test("The border radius should be '4px'", ()=>{ + test("The border-radius should be '4px'", ()=>{ document.querySelector( "head" From 25dd6b6f1d7611c68fb508c7360f32995a463750 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:10:27 +0200 Subject: [PATCH 170/294] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 81ff0d7f..044e37c6 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -16,10 +16,10 @@ Anchors are not only used within text- when you are going to use anchors outside 6. Set the color of the text to `white`. -*To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: http://lmgtfy.com/?q=how+to+use+the+hover* +*To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php* 7. Inside of the `:hover` selector change the background of the button to `#cc7a00`. ## Expected result: - \ No newline at end of file + From 5ede64373ebf2f6a8cd1e48313661b15a9d7d8f1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:23:08 +0200 Subject: [PATCH 171/294] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index aedf993a..018f6efe 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,10 +1,10 @@ -# `13` Enlace (anchor) como botón: +# `13` Enlace (anchor) como botón -Los enlaces (`anchors`) no solo se usan dentro del texto: cuando va a usar enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que sea experiencia más amigable. +Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia sea más amigable. ## 📝 Instrucciones: -Siga estos pasos para que tu enlace (`anchor`) se vea así: +Sigue estos pasos para que tu enlace (`anchor`) se vea así: 1. Haz que se vea como una caja: establece el `padding` en `10px`. @@ -12,16 +12,14 @@ Siga estos pasos para que tu enlace (`anchor`) se vea así: 3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange` -4. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`. +4. Eliminar subrayado: establece `text-decoration` a `none`. -5. Eliminar subrayado: establece `text-decoration` a `none`. +5. Establece el color del texto a blanco (`white`) -6. Establecer el color del texto en blanco (`white`) ++ *Para que el botón se vea diferente cuando el usuario pasa el ratón por encima, usamos el selector `:hover`: https://www.w3schools.com/cssref/sel_hover.php* -*Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector `:hover`: http://lmgtfy.com/?q=how+to+use+the+hover* +6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`. -7. Dentro del selector `:hover` cambia el fondo del botón a `#cc7a00`. - -## Reultado esperado: +## Resultado esperado:  From ac1ba88137ad8441bd33f593231046168f7dc292 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:26:05 +0200 Subject: [PATCH 172/294] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index 018f6efe..63c1e428 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,6 +1,6 @@ # `13` Enlace (anchor) como botón -Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia sea más amigable. +Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable. ## 📝 Instrucciones: From 32f0983ea4371c5e044218d06cdcbac50d92b363 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:30:11 +0200 Subject: [PATCH 173/294] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 044e37c6..36cd9112 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -1,24 +1,22 @@ # `13` Anchor Like Button -Anchors are not only used within text- when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience. +Anchors are not only used within text: when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience. ## 📝 Instructions: -1. Make it look like a box: Set `padding` to `10px`. +1. Make it look like a box: set `padding` to `10px`. -2. Rounded borders: Set `border-radius` to `4px`. +2. Rounded borders: set `border-radius` to `4px`. 3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). -4. Find and apply the color: Use the color picker to find the color and apply make the background to that color. +4. Remove underline: Set `text-decoration` to `none`. -5. Remove underline: Set `text-decoration` to `none`. +5. Set the color of the text to `white`. -6. Set the color of the text to `white`. ++ *To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php* -*To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php* - -7. Inside of the `:hover` selector change the background of the button to `#cc7a00`. +6. Inside of the `:hover` selector change the background of the button to `darkorange`. ## Expected result: From af5eebd9b243d44a41cda3a01d905647f0703bd4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:30:53 +0200 Subject: [PATCH 174/294] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index 63c1e428..257901be 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -10,7 +10,7 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así: 2. Bordes redondeados: establece el `border-radius` en `4px`. -3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange` +3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`. 4. Eliminar subrayado: establece `text-decoration` a `none`. From 8cf1f66ba66ec1f787f0e0ebd71c0d92875b269b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:36:18 +0200 Subject: [PATCH 175/294] Update solution.hide.css --- exercises/13-Anchor-Like-Button/solution.hide.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css index fd0db11b..89976317 100644 --- a/exercises/13-Anchor-Like-Button/solution.hide.css +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -1,5 +1,6 @@ .orange-btn { - /*your code here*/ + display: inline-block; + /*your code below*/ padding: 10px; border-radius: 4px; text-decoration: none; From fc612d2c62e4550a22165c0581edfc7361cf9a13 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:36:31 +0200 Subject: [PATCH 176/294] Update solution.hide.css --- exercises/13-Anchor-Like-Button/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css index 89976317..3e80d404 100644 --- a/exercises/13-Anchor-Like-Button/solution.hide.css +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -1,6 +1,6 @@ .orange-btn { display: inline-block; - /*your code below*/ + /* your code below */ padding: 10px; border-radius: 4px; text-decoration: none; @@ -9,6 +9,6 @@ } .orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ + /* YOUR CODE HERE FOR THE HOVER STATE */ background: darkorange; } From d3b8a90a4ddfca386132a7cb7bfb97480e799023 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:37:11 +0200 Subject: [PATCH 177/294] Update styles.css --- exercises/13-Anchor-Like-Button/styles.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 1f165603..76fd5b9c 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,9 +1,10 @@ .orange-btn { - /*your code here*/ + display: inline-block; + /* your code below */ } .orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ + /* YOUR CODE HERE FOR THE HOVER STATE */ -} \ No newline at end of file +} From fc498c893703e7183c7d182cd3cf283d1b07f549 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:37:44 +0200 Subject: [PATCH 178/294] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 36cd9112..9b9fad4c 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -10,7 +10,7 @@ Anchors are not only used within text: when you are going to use anchors outside 3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). -4. Remove underline: Set `text-decoration` to `none`. +4. Remove underline: set `text-decoration` to `none`. 5. Set the color of the text to `white`. From 5ac8d24e4c0557477ab69dcde201e61016aa5063 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 14:09:11 +0200 Subject: [PATCH 179/294] Delete solution-hide.css --- exercises/13-Anchor-Like-Button/solution-hide.css | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 exercises/13-Anchor-Like-Button/solution-hide.css diff --git a/exercises/13-Anchor-Like-Button/solution-hide.css b/exercises/13-Anchor-Like-Button/solution-hide.css deleted file mode 100644 index 16988e82..00000000 --- a/exercises/13-Anchor-Like-Button/solution-hide.css +++ /dev/null @@ -1,14 +0,0 @@ -.orange-btn { - /*your code here*/ - padding: 10px; - border-radius: 4px; - border: 1px solid #ffffff; - background-color: rgb(255, 153, 51); - text-decoration: none; - color: white; -} - -.orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ - background: #cc7a00; -} From 031b50a18b030cc7765b7f1d8424a2ea563f2367 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:53:53 +0000 Subject: [PATCH 180/294] the footnotes were added --- README.es.md | 3 +++ README.md | 2 ++ 2 files changed, 5 insertions(+) diff --git a/README.es.md b/README.es.md index e8d77079..a876b709 100644 --- a/README.es.md +++ b/README.es.md @@ -93,3 +93,6 @@ Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍 Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! + +Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning). + diff --git a/README.md b/README.md index 4a7c9968..0e7185c6 100644 --- a/README.md +++ b/README.md @@ -95,3 +95,5 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! + +This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). \ No newline at end of file From c57049c3d2b254de526a701ed8bd8f25dd8c619d Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Thu, 20 Apr 2023 11:31:11 +0000 Subject: [PATCH 181/294] the links were updated --- README.es.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.es.md b/README.es.md index a876b709..275ba239 100644 --- a/README.es.md +++ b/README.es.md @@ -42,7 +42,7 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i ## Instalación en un clic (recomendado) -Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). +Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-tutorial-exercises-course) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.git). > Una vez ya tengas abierto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` diff --git a/README.md b/README.md index 0e7185c6..4441527f 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Complete selection of autograded CSS exercises, for anyone interested in learnin ## One click installation (recommended): -You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). +You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-tutorial-exercises-course) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.git). > Once you have VSCode open the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start` From a3a384ea4c563f56347c88282acbded5dc8ac728 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Fri, 21 Apr 2023 17:51:08 +0000 Subject: [PATCH 182/294] the settings.json file was updated --- .gitignore | 1 + .vscode/settings.json | 8 ++++++++ 2 files changed, 9 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore index d9d6ec86..b54a1f9f 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ !learn.json !README.md !README.es.md +!.vscode !/exercises !/exercises/* diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..2f5ad94d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "files.autoSave": "afterDelay", + "files.autoSaveDelay": 700, + "editor.minimap.enabled": false, + "workbench.editorAssociations": { + "*.md": "vscode.markdown.preview.editor" + } +} \ No newline at end of file From d736538afe18b11bc3452c625242315e0aca5ad5 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 28 Apr 2023 14:33:54 +0000 Subject: [PATCH 183/294] fixed 2.1 with background repeat instructions --- exercises/02.1-Background/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.1-Background/README.md b/exercises/02.1-Background/README.md index 112fab15..afbfa795 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/02.1-Background/README.md @@ -19,7 +19,7 @@ If it is an image, you can specify if you want the image to be repeated horizont 4. Build and Preview the exercise again. -5. Change the background-repeat to 'inherit' to make it repeat over the x-axis and y-axis. +5. Change the background-repeat to 'repeat' to make it repeat over the x-axis and y-axis. 6. Build and Preview the exercise again. From 678810a1112a51ead513ee5e99e9e05df3590aee Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Mon, 8 May 2023 00:26:28 +0000 Subject: [PATCH 184/294] fixed typo in test description --- exercises/06-Practicing-Rules/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index e691255c..3bcecea6 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -64,7 +64,7 @@ describe("All the styles should be applied", () => { let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - test("The padding in the #id1 tag should be '5px'", () => { + test("The padding in the p tag should be '5px'", () => { document.querySelector( "head" ).innerHTML = ``; From 9c394e7e80d0c4ca5919948f3f26309d0eba6b38 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Mon, 8 May 2023 00:36:33 +0000 Subject: [PATCH 185/294] fixed test to accept both background and background-color --- exercises/05-Specificity/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index a09aa84a..2323ce24 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -43,8 +43,8 @@ describe("All the styles should be applied", function () { let cssArray = document.styleSheets[0].cssRules; let orangeHoverSelector = ""; for (let i = 0; i < cssArray.length; i++) { - if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important") { - orangeHoverSelector = cssArray[i].style.background; + if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important" || cssArray[i].style._importants["background-color"] === "important") { + orangeHoverSelector = cssArray[i].style.background || cssArray[i].style["background-color"]; } } From 33546dfc1c4845256abfb0f75f7bdd3cbd1c316d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 21:30:33 +0200 Subject: [PATCH 186/294] Update index.html --- exercises/02.1-Background/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.1-Background/index.html b/exercises/02.1-Background/index.html index ce03ce24..cf841f1e 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/02.1-Background/index.html @@ -5,6 +5,6 @@ - My background should be an image with th size "contain" + My background should be an image with the size "contain" From 811f8e64bc76cf786419f798e1da2a5e812d8dc7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:22:08 +0200 Subject: [PATCH 187/294] Update README.es.md --- exercises/01-Hello-World/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md index f6839573..d356ddaf 100644 --- a/exercises/01-Hello-World/README.es.md +++ b/exercises/01-Hello-World/README.es.md @@ -1,5 +1,5 @@ -# `01` Hello World en CSS +# `01` Hello World in CSS CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos: From d95bc9b842491c2a3c407c51ebe90d02918440fd Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:22:26 +0200 Subject: [PATCH 188/294] Update README.es.md --- exercises/01.1-The-Style-Tag/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md index 434d55b8..c69508dd 100644 --- a/exercises/01.1-The-Style-Tag/README.es.md +++ b/exercises/01.1-The-Style-Tag/README.es.md @@ -1,5 +1,5 @@ -# `01.1` Etiqueta Style +# `01.1` The Style Tag Si quieres añadir estilos a tu sitio web escribiendo CSS siempre debes hacerlo dentro de una etiqueta ``; + let firstOl = window.getComputedStyle(ols[0]); + expect(firstOl["list-style-type"]).toBe("lower-alpha"); + }); + test("The second Ol must have a list-style-type = square ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let secondOl = window.getComputedStyle(ols[1]); + expect(secondOl["list-style-type"]).toBe("square"); + }); + test("The first Ul must have a list-style-type = armenian ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let firstUl = window.getComputedStyle(uls[0]); + expect(firstUl["list-style-type"]).toBe("armenian"); + }); + test("The second Ul must have a list-style-type = none ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let secondUl = window.getComputedStyle(uls[1]); + expect(secondUl["list-style-type"]).toBe("none"); + expect(secondUl["margin"]).toBe("0px"); + expect(secondUl["padding"]).toBe("0px"); + }); +}) From c67374c64b6c251e196a27336cacfa91b77b92f2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:04:27 +0000 Subject: [PATCH 256/294] fixed 01-inline-styles, added tests, fixed numbers and casing of all exercises --- .learn/resets/01-inline-styles/index.html | 17 ++++++++++ .learn/resets/02-style-tag/index.html | 1 + .../{00-Welcome => 00-welcome}/README.es.md | 9 +++-- .../{00-Welcome => 00-welcome}/README.md | 10 +++--- exercises/00.1-Inline-Styles/README.es.md | 34 ------------------- exercises/00.1-Inline-Styles/index.html | 1 - .../00.1-Inline-Styles/solution.hide.html | 10 ------ exercises/01-Style-tag/index.html | 1 - exercises/01-inline-styles/README.es.md | 30 ++++++++++++++++ .../README.md | 12 +++---- exercises/01-inline-styles/index.html | 17 ++++++++++ exercises/01-inline-styles/solution.hide.html | 17 ++++++++++ exercises/01-inline-styles/tests.js | 27 +++++++++++++++ exercises/01.1-Add-a-style-tag/index.html | 6 ---- .../02-Separate-Stylesheet/solution.hide.css | 7 ---- exercises/02-Separate-Stylesheet/styles.css | 4 --- .../README.es.md | 10 +++--- .../{01-Style-tag => 02-style-tag}/README.md | 8 ++--- exercises/02-style-tag/index.html | 1 + .../solution.hide.html | 0 .../{01-Style-tag => 02-style-tag}/test.js | 0 .../README.es.md | 5 +-- .../README.md | 4 +-- exercises/02.1-add-a-style-tag/index.html | 6 ++++ .../solution.hide.html | 2 +- .../test.js | 0 .../README.es.md | 2 +- .../README.md | 3 +- .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 0 .../03-separate-stylesheet/solution.hide.css | 7 ++++ exercises/03-separate-stylesheet/styles.css | 4 +++ .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 3 +- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 12 +++++-- .../README.md | 9 +++-- .../index.html | 2 +- .../styles.css | 0 .../test.js | 2 +- .../README.es.md | 10 +++--- .../README.md | 6 ++-- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 2 +- .../README.es.md | 9 +++-- .../README.md | 8 ++--- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 7 ++-- .../README.md | 5 ++- .../index.html | 0 .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 0 .../README.es.md | 5 ++- .../README.md | 6 ++-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 6 ++-- .../README.md | 6 ++-- .../index.html | 4 +-- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 8 ++--- .../README.md | 9 +++-- .../index.html | 4 +-- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 8 ++--- .../README.md | 8 ++--- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 6 ++-- .../README.md | 7 ++-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 4 +-- .../README.md | 4 +-- .../index.html | 2 +- .../solution.hide.css | 2 +- .../solution.hide.html | 4 +-- .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 6 ++-- .../README.md | 2 +- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../tests.js | 0 .../README.es.md | 17 +++++----- .../README.md | 17 +++++----- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 4 +-- .../README.md | 4 +-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 132 files changed, 288 insertions(+), 233 deletions(-) create mode 100644 .learn/resets/01-inline-styles/index.html create mode 100644 .learn/resets/02-style-tag/index.html rename exercises/{00-Welcome => 00-welcome}/README.es.md (70%) rename exercises/{00-Welcome => 00-welcome}/README.md (71%) delete mode 100644 exercises/00.1-Inline-Styles/README.es.md delete mode 100644 exercises/00.1-Inline-Styles/index.html delete mode 100644 exercises/00.1-Inline-Styles/solution.hide.html delete mode 100644 exercises/01-Style-tag/index.html create mode 100644 exercises/01-inline-styles/README.es.md rename exercises/{00.1-Inline-Styles => 01-inline-styles}/README.md (67%) create mode 100644 exercises/01-inline-styles/index.html create mode 100644 exercises/01-inline-styles/solution.hide.html create mode 100644 exercises/01-inline-styles/tests.js delete mode 100644 exercises/01.1-Add-a-style-tag/index.html delete mode 100644 exercises/02-Separate-Stylesheet/solution.hide.css delete mode 100644 exercises/02-Separate-Stylesheet/styles.css rename exercises/{01-Style-tag => 02-style-tag}/README.es.md (78%) rename exercises/{01-Style-tag => 02-style-tag}/README.md (74%) create mode 100644 exercises/02-style-tag/index.html rename exercises/{01-Style-tag => 02-style-tag}/solution.hide.html (100%) rename exercises/{01-Style-tag => 02-style-tag}/test.js (100%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/README.es.md (95%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/README.md (94%) create mode 100644 exercises/02.1-add-a-style-tag/index.html rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/solution.hide.html (70%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/test.js (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/README.es.md (95%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/README.md (95%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/index.html (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/solution.hide.html (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/tests.js (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/README.es.md (96%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/README.md (95%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/index.html (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/solution.hide.html (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/tests.js (100%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/README.es.md (95%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/README.md (95%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/index.html (100%) create mode 100644 exercises/03-separate-stylesheet/solution.hide.css create mode 100644 exercises/03-separate-stylesheet/styles.css rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/tests.js (100%) rename exercises/{02.1-Background => 03.1-background}/README.es.md (98%) rename exercises/{02.1-Background => 03.1-background}/README.md (98%) rename exercises/{02.1-Background => 03.1-background}/index.html (85%) rename exercises/{02.1-Background => 03.1-background}/solution.hide.css (100%) rename exercises/{02.1-Background => 03.1-background}/styles.css (100%) rename exercises/{02.1-Background => 03.1-background}/tests.js (97%) rename exercises/{03-list-styling => 04-list-styling}/README.es.md (71%) rename exercises/{03-list-styling => 04-list-styling}/README.md (92%) rename exercises/{03-list-styling => 04-list-styling}/index.html (96%) rename exercises/{03-list-styling => 04-list-styling}/styles.css (100%) rename exercises/{03-list-styling => 04-list-styling}/test.js (96%) rename exercises/{04-Class-Selector => 05-class-selector}/README.es.md (81%) rename exercises/{04-Class-Selector => 05-class-selector}/README.md (79%) rename exercises/{04-Class-Selector => 05-class-selector}/index.html (82%) rename exercises/{04-Class-Selector => 05-class-selector}/solution.hide.html (84%) rename exercises/{04-Class-Selector => 05-class-selector}/styles.css (100%) rename exercises/{04-Class-Selector => 05-class-selector}/test.js (96%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/README.es.md (85%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/README.md (85%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/index.html (81%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/solution.hide.css (100%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/styles.css (100%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/tests.js (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/README.es.md (82%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/README.md (85%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/index.html (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/solution.hide.html (78%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/styles.css (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/test.js (100%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/README.es.md (94%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/README.md (94%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/index.html (90%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/solution.hide.html (91%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/styles.css (100%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/test.js (100%) rename exercises/{05-Specificity => 06-specificity}/README.es.md (85%) rename exercises/{05-Specificity => 06-specificity}/README.md (92%) rename exercises/{05-Specificity => 06-specificity}/index.html (93%) rename exercises/{05-Specificity => 06-specificity}/solution.hide.css (100%) rename exercises/{05-Specificity => 06-specificity}/styles.css (100%) rename exercises/{05-Specificity => 06-specificity}/tests.js (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/README.es.md (87%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/README.md (86%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/index.html (91%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/solution.hide.css (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/styles.css (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/tests.js (98%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/README.es.md (72%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/README.md (72%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/index.html (93%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/solution.hide.css (100%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/styles.css (100%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/tests.js (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/README.es.md (70%) rename exercises/{08-Rounded-Image => 09-rounded-image}/README.md (71%) rename exercises/{08-Rounded-Image => 09-rounded-image}/index.html (91%) rename exercises/{08-Rounded-Image => 09-rounded-image}/solution.hide.css (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/styles.css (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/tests.js (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/README.es.md (82%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/README.md (75%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/index.html (88%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/solution.hide.css (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/styles.css (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/tests.js (100%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/README.es.md (94%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/README.md (94%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/index.html (89%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/solution.hide.css (91%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/solution.hide.html (83%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/styles.css (100%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/tests.js (95%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/README.es.md (80%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/README.md (97%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/index.html (91%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/solution.hide.html (93%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/styles.css (100%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/tests.js (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/README.es.md (64%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/README.md (61%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/index.html (92%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/solution.hide.css (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/styles.css (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/tests.js (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/README.es.md (91%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/README.md (90%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/index.html (87%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/solution.hide.css (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/styles.css (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/tests.js (100%) diff --git a/.learn/resets/01-inline-styles/index.html b/.learn/resets/01-inline-styles/index.html new file mode 100644 index 00000000..75056c8e --- /dev/null +++ b/.learn/resets/01-inline-styles/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + +

  Hello

  My brother

  + + diff --git a/.learn/resets/02-style-tag/index.html b/.learn/resets/02-style-tag/index.html new file mode 100644 index 00000000..d88e76dd --- /dev/null +++ b/.learn/resets/02-style-tag/index.html @@ -0,0 +1 @@ + diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-welcome/README.es.md similarity index 70% rename from exercises/00-Welcome/README.es.md rename to exercises/00-welcome/README.es.md index c79f3275..0f0eff0d 100644 --- a/exercises/00-Welcome/README.es.md +++ b/exercises/00-welcome/README.es.md @@ -27,9 +27,8 @@ Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nad Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): -1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book: -1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (run-tests) :warning: +1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentación) 📖 +2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) 💻, (run-tests) ⚠️ +3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribución: (tutoriales, correcciones), 🤖 -Este proyecto sigue las especificaciones -[all-contributors](https://github.com/kentcdodds/all-contributors) - ¡Todas las contribuciones son bienvenidas! +Este proyecto sigue las especificaciones [all-contributors](https://github.com/kentcdodds/all-contributors) ¡Todas las contribuciones son bienvenidas! diff --git a/exercises/00-Welcome/README.md b/exercises/00-welcome/README.md similarity index 71% rename from exercises/00-Welcome/README.md rename to exercises/00-welcome/README.md index e2058557..e7048125 100644 --- a/exercises/00-Welcome/README.md +++ b/exercises/00-welcome/README.md @@ -6,9 +6,9 @@ intro: "https://www.youtube.com/watch?v=AuXnQHKhjxw" 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 probably need coaching! DM me on twitter if you have any questions. +Learning to code is hard; you will probably need coaching! DM me on Twitter if you have any questions. -During this course you will be learning the following concepts: +During this course, you will be learning the following concepts: 1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a ` diff --git a/exercises/01.1-Add-a-style-tag/README.md b/exercises/02.1-add-a-style-tag/README.md similarity index 94% rename from exercises/01.1-Add-a-style-tag/README.md rename to exercises/02.1-add-a-style-tag/README.md index e71febdf..f77ce8c4 100644 --- a/exercises/01.1-Add-a-style-tag/README.md +++ b/exercises/02.1-add-a-style-tag/README.md @@ -2,12 +2,12 @@ tutorial: "https://www.youtube.com/watch?v=K1SrZxiiM6I" --- -# `01.1` The Style Tag +# `02.1` The Style Tag The previous exercise had a pre-writen ` diff --git a/exercises/02.1-add-a-style-tag/index.html b/exercises/02.1-add-a-style-tag/index.html new file mode 100644 index 00000000..dbdd26d8 --- /dev/null +++ b/exercises/02.1-add-a-style-tag/index.html @@ -0,0 +1,6 @@ + +

  + Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology + around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity, + math, writing, and confidence. +

  diff --git a/exercises/01.1-Add-a-style-tag/solution.hide.html b/exercises/02.1-add-a-style-tag/solution.hide.html similarity index 70% rename from exercises/01.1-Add-a-style-tag/solution.hide.html rename to exercises/02.1-add-a-style-tag/solution.hide.html index 85bac8dd..f13616dc 100644 --- a/exercises/01.1-Add-a-style-tag/solution.hide.html +++ b/exercises/02.1-add-a-style-tag/solution.hide.html @@ -7,6 +7,6 @@

  Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology - around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity, + around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity, math, writing, and confidence.

  diff --git a/exercises/01.1-Add-a-style-tag/test.js b/exercises/02.1-add-a-style-tag/test.js similarity index 100% rename from exercises/01.1-Add-a-style-tag/test.js rename to exercises/02.1-add-a-style-tag/test.js diff --git a/exercises/01.2-RGBA-colors/README.es.md b/exercises/02.2-rbga-colors/README.es.md similarity index 95% rename from exercises/01.2-RGBA-colors/README.es.md rename to exercises/02.2-rbga-colors/README.es.md index e7c6ab3d..e448639a 100644 --- a/exercises/01.2-RGBA-colors/README.es.md +++ b/exercises/02.2-rbga-colors/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI" --- -# `01.2` Your First Style +# `02.2` Your First Style Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: diff --git a/exercises/01.2-RGBA-colors/README.md b/exercises/02.2-rbga-colors/README.md similarity index 95% rename from exercises/01.2-RGBA-colors/README.md rename to exercises/02.2-rbga-colors/README.md index e6181ea4..a47fb128 100644 --- a/exercises/01.2-RGBA-colors/README.md +++ b/exercises/02.2-rbga-colors/README.md @@ -1,7 +1,8 @@ --- tutorial: "https://www.youtube.com/watch?v=TqmY9GLTwQ0" --- -# `01.2` Your First Style + +# `02.2` Your First Style When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: diff --git a/exercises/01.2-RGBA-colors/index.html b/exercises/02.2-rbga-colors/index.html similarity index 100% rename from exercises/01.2-RGBA-colors/index.html rename to exercises/02.2-rbga-colors/index.html diff --git a/exercises/01.2-RGBA-colors/solution.hide.html b/exercises/02.2-rbga-colors/solution.hide.html similarity index 100% rename from exercises/01.2-RGBA-colors/solution.hide.html rename to exercises/02.2-rbga-colors/solution.hide.html diff --git a/exercises/01.2-RGBA-colors/tests.js b/exercises/02.2-rbga-colors/tests.js similarity index 100% rename from exercises/01.2-RGBA-colors/tests.js rename to exercises/02.2-rbga-colors/tests.js diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/02.3-your-second-style/README.es.md similarity index 96% rename from exercises/01.3-Your-Second-Style/README.es.md rename to exercises/02.3-your-second-style/README.es.md index 8ed8ad02..a6e3630c 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/02.3-your-second-style/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8" --- -# `01.3` Your Second Style +# `02.3` Your Second Style Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/02.3-your-second-style/README.md similarity index 95% rename from exercises/01.3-Your-Second-Style/README.md rename to exercises/02.3-your-second-style/README.md index d090ecb0..8918e346 100644 --- a/exercises/01.3-Your-Second-Style/README.md +++ b/exercises/02.3-your-second-style/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds" --- -# `01.3` Your Second Style +# `02.3` Your Second Style When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/02.3-your-second-style/index.html similarity index 100% rename from exercises/01.3-Your-Second-Style/index.html rename to exercises/02.3-your-second-style/index.html diff --git a/exercises/01.3-Your-Second-Style/solution.hide.html b/exercises/02.3-your-second-style/solution.hide.html similarity index 100% rename from exercises/01.3-Your-Second-Style/solution.hide.html rename to exercises/02.3-your-second-style/solution.hide.html diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/02.3-your-second-style/tests.js similarity index 100% rename from exercises/01.3-Your-Second-Style/tests.js rename to exercises/02.3-your-second-style/tests.js diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/03-separate-stylesheet/README.es.md similarity index 95% rename from exercises/02-Separate-Stylesheet/README.es.md rename to exercises/03-separate-stylesheet/README.es.md index de8849f2..4f1023ec 100644 --- a/exercises/02-Separate-Stylesheet/README.es.md +++ b/exercises/03-separate-stylesheet/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=MmnkVGINtbs" --- -# `02` Separate Stylesheet +# `03` Separate Stylesheet Si usas la etiqueta html ``, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`. diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/03-separate-stylesheet/README.md similarity index 95% rename from exercises/02-Separate-Stylesheet/README.md rename to exercises/03-separate-stylesheet/README.md index 0e5fb4d4..cbb2645a 100644 --- a/exercises/02-Separate-Stylesheet/README.md +++ b/exercises/03-separate-stylesheet/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=jAfXzx88i-4" --- -# `02` Separate Stylesheet +# `03` Separate Stylesheet If you use the html `` tag, you can also have your styles on a separate file that we usually call `styles.css`. diff --git a/exercises/02-Separate-Stylesheet/index.html b/exercises/03-separate-stylesheet/index.html similarity index 100% rename from exercises/02-Separate-Stylesheet/index.html rename to exercises/03-separate-stylesheet/index.html diff --git a/exercises/03-separate-stylesheet/solution.hide.css b/exercises/03-separate-stylesheet/solution.hide.css new file mode 100644 index 00000000..b1ea9493 --- /dev/null +++ b/exercises/03-separate-stylesheet/solution.hide.css @@ -0,0 +1,7 @@ +/* your styles here: + 1. Select the body tag + 2. Add the background rule equal to blue + */ +body { + background: blue; +} diff --git a/exercises/03-separate-stylesheet/styles.css b/exercises/03-separate-stylesheet/styles.css new file mode 100644 index 00000000..fb551ff2 --- /dev/null +++ b/exercises/03-separate-stylesheet/styles.css @@ -0,0 +1,4 @@ +/* your styles here: + 1. Select the body tag + 2. Add the background rule equal to blue + */ diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/03-separate-stylesheet/tests.js similarity index 100% rename from exercises/02-Separate-Stylesheet/tests.js rename to exercises/03-separate-stylesheet/tests.js diff --git a/exercises/02.1-Background/README.es.md b/exercises/03.1-background/README.es.md similarity index 98% rename from exercises/02.1-Background/README.es.md rename to exercises/03.1-background/README.es.md index 55debc05..e0af7277 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/03.1-background/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4" --- -# `02.1` Background +# `03.1` Background La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. diff --git a/exercises/02.1-Background/README.md b/exercises/03.1-background/README.md similarity index 98% rename from exercises/02.1-Background/README.md rename to exercises/03.1-background/README.md index 726d36b1..3580ab7e 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/03.1-background/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=fQh2OulBSp8" --- -# `02.1` Background +# `03.1` Background 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`. @@ -10,7 +10,6 @@ If it is an image, you can specify if you want the image to be repeated horizont ## 📝 Instructions: - 1. Run the exercise. 2. Check the Preview. diff --git a/exercises/02.1-Background/index.html b/exercises/03.1-background/index.html similarity index 85% rename from exercises/02.1-Background/index.html rename to exercises/03.1-background/index.html index cf841f1e..a1227330 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/03.1-background/index.html @@ -2,7 +2,7 @@ - + My background should be an image with the size "contain" diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/03.1-background/solution.hide.css similarity index 100% rename from exercises/02.1-Background/solution.hide.css rename to exercises/03.1-background/solution.hide.css diff --git a/exercises/02.1-Background/styles.css b/exercises/03.1-background/styles.css similarity index 100% rename from exercises/02.1-Background/styles.css rename to exercises/03.1-background/styles.css diff --git a/exercises/02.1-Background/tests.js b/exercises/03.1-background/tests.js similarity index 97% rename from exercises/02.1-Background/tests.js rename to exercises/03.1-background/tests.js index b0612a23..f6f28551 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/03.1-background/tests.js @@ -48,6 +48,6 @@ describe("All the styles should be applied", ()=>{ expect(href).toBe('./styles.css') let titleInner = title.innerHTML - expect(titleInner).toBe('02 Background') + expect(titleInner).toBe('03.1 Background') }) }); diff --git a/exercises/03-list-styling/README.es.md b/exercises/04-list-styling/README.es.md similarity index 71% rename from exercises/03-list-styling/README.es.md rename to exercises/04-list-styling/README.es.md index 059cf653..7d267da2 100644 --- a/exercises/03-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=qcx31wUVmqI" --- -# `03` Estilo de listas +# `04` List styling En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `

  `, para listas desordenadas o con viñetas, y las etiquetas `
  ` para listas ordenadas o numeradas. @@ -10,7 +10,7 @@ Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o n Por ejemplo: -```HTML +```html ul { list-style-type: none; margin: 0; @@ -29,5 +29,11 @@ Luego, realiza los cambios a continuación y construye de nuevo. 1. Convierte los números de las bebidas Coca Cola en letras minúsculas. 2. Convierte los números de las bebidas Pepsi en viñetas cuadradas. -3. Convierte las viñetas de las bebidas Saludables en números armenios. :) +3. Convierte las viñetas de las bebidas Saludables en números armenios. 4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks. + +## 💡 Pistas: + +- Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp +- Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. +- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp \ No newline at end of file diff --git a/exercises/03-list-styling/README.md b/exercises/04-list-styling/README.md similarity index 92% rename from exercises/03-list-styling/README.md rename to exercises/04-list-styling/README.md index 7dec08cd..242d9936 100644 --- a/exercises/03-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs" --- -# `03` List styling +# `04` List styling In the front end we often have to list items and the way to do that is with `
  ` tags, for unordered/bulleted lists, and `
  ` tags for ordered/numbered lists. @@ -10,7 +10,7 @@ We have CSS control over what these lists look like, what bullets or numbers the For example: -```HTML +```html ul { list-style-type: none; margin: 0; @@ -27,13 +27,12 @@ Then make the changes below and run again. ## 📝 Instructions: - 1. Make the Coca Cola drink numbers into lower case letters. 2. Make the Pepsi drink numbers into square bullets. -3. Make the Healthy drink bullets into Armenian numbers. :) +3. Make the Healthy drink bullets into Armenian numbers. 4. Completely remove the bullets and extra spacing from the Web-developer drinks. -### 💡 Hint: +## 💡 Hints: - How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp - Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the html tags may be necessary. diff --git a/exercises/03-list-styling/index.html b/exercises/04-list-styling/index.html similarity index 96% rename from exercises/03-list-styling/index.html rename to exercises/04-list-styling/index.html index f2da1ba2..2eb502ea 100644 --- a/exercises/03-list-styling/index.html +++ b/exercises/04-list-styling/index.html @@ -5,7 +5,7 @@ - + diff --git a/exercises/03-list-styling/styles.css b/exercises/04-list-styling/styles.css similarity index 100% rename from exercises/03-list-styling/styles.css rename to exercises/04-list-styling/styles.css diff --git a/exercises/03-list-styling/test.js b/exercises/04-list-styling/test.js similarity index 96% rename from exercises/03-list-styling/test.js rename to exercises/04-list-styling/test.js index c8939872..a8f97011 100644 --- a/exercises/03-list-styling/test.js +++ b/exercises/04-list-styling/test.js @@ -17,7 +17,7 @@ describe("The lists should be modified accordingly", function() { let head = document.querySelector('head'); let title = head.querySelector('title').innerHTML; - expect(title).toBe('03 List styling') + expect(title).toBe('04 List styling') }) // Test in progress: diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/05-class-selector/README.es.md similarity index 81% rename from exercises/04-Class-Selector/README.es.md rename to exercises/05-class-selector/README.es.md index 58aa0992..4214af34 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/05-class-selector/README.es.md @@ -2,9 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=0I_xSAQ3vNs" --- - - -# `04` Class Selector +# `05` Class Selector Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado los selectores de etiquetas, así que hablemos sobre el selector `.class`: @@ -19,11 +17,11 @@ Usa la propiedad `class` del elemento HTML para seleccionarlo. Las reglas de est font-size: 9px; } ``` + *Cualquier etiqueta HTML con `class="small"` tendrá un font-size de `9px`.* ## 📝 Instrucciones: -En este momento hay una clase seleccionada en el CSS llamada -`b-blue`. +1. En este momento hay una clase seleccionada en el CSS llamada `b-blue`. -Por favor aplica la clase a ambas etiquetas HTML `

  `. +2. Por favor aplica la clase a ambas etiquetas HTML `

  `. diff --git a/exercises/04-Class-Selector/README.md b/exercises/05-class-selector/README.md similarity index 79% rename from exercises/04-Class-Selector/README.md rename to exercises/05-class-selector/README.md index 0c344e29..eea336a9 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/05-class-selector/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=moLgdg7x84U" --- -# `04` Class Selector +# `05` Class Selector There are many ways to select HTML elements to apply styles to them, so far we have only used the `tag` selector, so let's talk about the `.class` selector: @@ -22,8 +22,8 @@ Use the class property of the HTML element to select it. Styling rules will appl ## 📝 Instructions: -Right now there is a class selected on the CSS that is called `b-blue`. +1. Right now there is a class selected on the CSS that is called `b-blue`. -Please apply that class to both of the HTML `

  ` tags. +2. Please apply that class to both of the HTML `

  ` tags. diff --git a/exercises/04-Class-Selector/index.html b/exercises/05-class-selector/index.html similarity index 82% rename from exercises/04-Class-Selector/index.html rename to exercises/05-class-selector/index.html index 45709afb..03662721 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/05-class-selector/index.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04-Class-Selector/solution.hide.html b/exercises/05-class-selector/solution.hide.html similarity index 84% rename from exercises/04-Class-Selector/solution.hide.html rename to exercises/05-class-selector/solution.hide.html index 60e1d67f..b9223582 100644 --- a/exercises/04-Class-Selector/solution.hide.html +++ b/exercises/05-class-selector/solution.hide.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04-Class-Selector/styles.css b/exercises/05-class-selector/styles.css similarity index 100% rename from exercises/04-Class-Selector/styles.css rename to exercises/05-class-selector/styles.css diff --git a/exercises/04-Class-Selector/test.js b/exercises/05-class-selector/test.js similarity index 96% rename from exercises/04-Class-Selector/test.js rename to exercises/05-class-selector/test.js index 320b80ea..36108cbd 100644 --- a/exercises/04-Class-Selector/test.js +++ b/exercises/05-class-selector/test.js @@ -17,7 +17,7 @@ describe("Both

  tags should have a blue background", () => { expect(meta).toBe(null) let title = head.querySelector('title').innerHTML - expect(title).toBe('04 Class selector') + expect(title).toBe('05 Class selector') }); test("The tag should not contain any inline style", () => { diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/05.1-combined-rules/README.es.md similarity index 85% rename from exercises/04.1-Combined-Rules/README.es.md rename to exercises/05.1-combined-rules/README.es.md index 9642be5b..8e735e07 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/05.1-combined-rules/README.es.md @@ -2,8 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=NYlPhkmqgmU" --- - -# `04.1` Combined Rules +# `05.1` Combined Rules Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible. @@ -36,8 +35,8 @@ background: 50px / cover Donde el valor de la izquierda de la barra `/` es la propiedad `background-position` y la derecha es el `background-size`. -## 💡 Pista: +## 💡 Pistas: -- Cómo usar el background: https://www.w3schools.com/cssref/css3_pr_background.php +- Cómo usar `background`: https://www.w3schools.com/cssref/css3_pr_background.php -- Cómo usar el padding: https://www.w3schools.com/css/css_padding.asp +- Cómo usar `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/05.1-combined-rules/README.md similarity index 85% rename from exercises/04.1-Combined-Rules/README.md rename to exercises/05.1-combined-rules/README.md index f3bcddc8..55bd0c87 100644 --- a/exercises/04.1-Combined-Rules/README.md +++ b/exercises/05.1-combined-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=VTOwd98T6FY" --- -# `04.1` Combined Rules +# `05.1` Combined Rules CSS files take up space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why it's important to keep the CSS document as small as possible. @@ -34,8 +34,8 @@ background: 50px / cover Where the left side value of the forward slash `/` is the `background-position` rule and the right value is the `background-size` rule. -## 💡 Hint: +## 💡 Hints: -- How to use the background: https://www.w3schools.com/cssref/css3_pr_background.php +- How to use `background`: https://www.w3schools.com/cssref/css3_pr_background.php -- How to use the padding: https://www.w3schools.com/css/css_padding.asp +- How to use `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/05.1-combined-rules/index.html similarity index 81% rename from exercises/04.1-Combined-Rules/index.html rename to exercises/05.1-combined-rules/index.html index 1525b6cf..bca34a30 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/05.1-combined-rules/index.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04.1-Combined-Rules/solution.hide.css b/exercises/05.1-combined-rules/solution.hide.css similarity index 100% rename from exercises/04.1-Combined-Rules/solution.hide.css rename to exercises/05.1-combined-rules/solution.hide.css diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/05.1-combined-rules/styles.css similarity index 100% rename from exercises/04.1-Combined-Rules/styles.css rename to exercises/05.1-combined-rules/styles.css diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/05.1-combined-rules/tests.js similarity index 100% rename from exercises/04.1-Combined-Rules/tests.js rename to exercises/05.1-combined-rules/tests.js diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/05.2-apply-several-classes/README.es.md similarity index 82% rename from exercises/04.2-Apply-several-classes/README.es.md rename to exercises/05.2-apply-several-classes/README.es.md index bbda737e..89efee60 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/05.2-apply-several-classes/README.es.md @@ -3,7 +3,7 @@ tutorial: "https://www.youtube.com/watch?v=CaSytmRcVGM" --- -# `04.2` Apply several classes +# `05.2` Apply several classes Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. @@ -21,9 +21,8 @@ Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y ha ## 📝 Instrucciones: -Reemplaza la propiedad `spades` de la clase del `

  ` por la clase `heart` y observa los resultados. +1. Reemplaza la propiedad `spades` de la clase del `

  ` por la clase `heart` y observa los resultados. - -## Resultado: +## 💻 Resultado esperado:  diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md similarity index 85% rename from exercises/04.2-Apply-several-classes/README.md rename to exercises/05.2-apply-several-classes/README.md index be4b74b1..333b93a6 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -20,9 +20,8 @@ There are two possible suite classes you can apply to the html element to make i ## 📝 Instructions: -Replace the class property `spades` of the `

  ` with the class `heart` and look at the results. +1. Replace the class property `spades` of the `

  ` with the class `heart` and look at the results. - -## Expected result: +## 💻 Expected result:  diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/05.2-apply-several-classes/index.html similarity index 100% rename from exercises/04.2-Apply-several-classes/index.html rename to exercises/05.2-apply-several-classes/index.html diff --git a/exercises/04.2-Apply-several-classes/solution.hide.html b/exercises/05.2-apply-several-classes/solution.hide.html similarity index 78% rename from exercises/04.2-Apply-several-classes/solution.hide.html rename to exercises/05.2-apply-several-classes/solution.hide.html index 95de441b..3ded6c25 100644 --- a/exercises/04.2-Apply-several-classes/solution.hide.html +++ b/exercises/05.2-apply-several-classes/solution.hide.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04.2-Apply-several-classes/styles.css b/exercises/05.2-apply-several-classes/styles.css similarity index 100% rename from exercises/04.2-Apply-several-classes/styles.css rename to exercises/05.2-apply-several-classes/styles.css diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/05.2-apply-several-classes/test.js similarity index 100% rename from exercises/04.2-Apply-several-classes/test.js rename to exercises/05.2-apply-several-classes/test.js diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/05.3-id-selector/README.es.md similarity index 94% rename from exercises/04.3-id-Selector/README.es.md rename to exercises/05.3-id-selector/README.es.md index b2d15740..3c6d469a 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/05.3-id-selector/README.es.md @@ -3,7 +3,7 @@ tutorial: "https://www.youtube.com/watch?v=tUpL6lUJItk" --- -# `04.3` The ID CSS Selector +# `05.3` The ID CSS Selector También puedes seleccionar un elemento por su `#id` y aplicarle estilos. diff --git a/exercises/04.3-id-Selector/README.md b/exercises/05.3-id-selector/README.md similarity index 94% rename from exercises/04.3-id-Selector/README.md rename to exercises/05.3-id-selector/README.md index 407dcfe5..9955f1a1 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/05.3-id-selector/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=DtMVtGdStKw" --- -# `04.3` The ID CSS Selector +# `05.3` The ID CSS Selector You can also select an element by `#id` and apply styles to it. diff --git a/exercises/04.3-id-Selector/index.html b/exercises/05.3-id-selector/index.html similarity index 90% rename from exercises/04.3-id-Selector/index.html rename to exercises/05.3-id-selector/index.html index 5b9a773d..0acb4a27 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/05.3-id-selector/index.html @@ -3,7 +3,7 @@ diff --git a/exercises/04.3-id-Selector/solution.hide.html b/exercises/05.3-id-selector/solution.hide.html similarity index 91% rename from exercises/04.3-id-Selector/solution.hide.html rename to exercises/05.3-id-selector/solution.hide.html index a7964559..2e7928b7 100644 --- a/exercises/04.3-id-Selector/solution.hide.html +++ b/exercises/05.3-id-selector/solution.hide.html @@ -3,7 +3,7 @@ diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/05.3-id-selector/styles.css similarity index 100% rename from exercises/04.3-id-Selector/styles.css rename to exercises/05.3-id-selector/styles.css diff --git a/exercises/04.3-id-Selector/test.js b/exercises/05.3-id-selector/test.js similarity index 100% rename from exercises/04.3-id-Selector/test.js rename to exercises/05.3-id-selector/test.js diff --git a/exercises/05-Specificity/README.es.md b/exercises/06-specificity/README.es.md similarity index 85% rename from exercises/05-Specificity/README.es.md rename to exercises/06-specificity/README.es.md index ceeca044..8bcfcfbe 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/06-specificity/README.es.md @@ -1,10 +1,9 @@ -# `05` Specificity +# `06` Specificity Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS. Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡Y punto! - *Porque cuanto más específico, más prioridad tiene.* ## 📝 Instrucciones: @@ -13,4 +12,4 @@ Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="th ## 💡 Pista: -+ Puedes usar la notación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/ ++ Puedes usar la notación `!important` : https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/README.md b/exercises/06-specificity/README.md similarity index 92% rename from exercises/05-Specificity/README.md rename to exercises/06-specificity/README.md index f1edfa0f..1209b477 100644 --- a/exercises/05-Specificity/README.md +++ b/exercises/06-specificity/README.md @@ -2,11 +2,10 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" --- -# `05` Specificity +# `06` Specificity When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works. - It's all about the level of **specificity**. If you specify that your `div` with `id="thirditem` has a yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto! *Because the more specific, the more priority it has.* @@ -15,10 +14,9 @@ It's all about the level of **specificity**. If you specify that your `div` with 1. Override the `background` 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/ diff --git a/exercises/05-Specificity/index.html b/exercises/06-specificity/index.html similarity index 93% rename from exercises/05-Specificity/index.html rename to exercises/06-specificity/index.html index 154a071a..e8a9b98d 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/06-specificity/index.html @@ -4,7 +4,7 @@ - +

  diff --git a/exercises/05-Specificity/solution.hide.css b/exercises/06-specificity/solution.hide.css similarity index 100% rename from exercises/05-Specificity/solution.hide.css rename to exercises/06-specificity/solution.hide.css diff --git a/exercises/05-Specificity/styles.css b/exercises/06-specificity/styles.css similarity index 100% rename from exercises/05-Specificity/styles.css rename to exercises/06-specificity/styles.css diff --git a/exercises/05-Specificity/tests.js b/exercises/06-specificity/tests.js similarity index 100% rename from exercises/05-Specificity/tests.js rename to exercises/06-specificity/tests.js diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/07-practicing-rules/README.es.md similarity index 87% rename from exercises/06-Practicing-Rules/README.es.md rename to exercises/07-practicing-rules/README.es.md index 78942479..a63c9004 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/07-practicing-rules/README.es.md @@ -1,4 +1,4 @@ -# `06` Practicing Rules +# `07` Practicing Rules ## 📝 Instrucciones: @@ -18,6 +18,6 @@ 8. Cambia el color del `anchor` **hover** a verde (`green`) y elimina el subrayado (tienes que pasar el cursor encima del anchor para probarlo). -## El resultado debería ser algo como esto: +## 💻 Resultado esperado: - + diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/07-practicing-rules/README.md similarity index 86% rename from exercises/06-Practicing-Rules/README.md rename to exercises/07-practicing-rules/README.md index 2beed784..cb09ca0d 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/07-practicing-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" --- -# `06` Practicing Rules +# `07` Practicing Rules ## 📝 Instructions: @@ -22,6 +22,6 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 8. Change the `anchor` **hover** color to `green` and remove the underline (you have to actually hover the anchor to test it). -## The result should be something like this: +## 💻 Expected result: - + diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/07-practicing-rules/index.html similarity index 91% rename from exercises/06-Practicing-Rules/index.html rename to exercises/07-practicing-rules/index.html index 8c0b2b50..b2d40b06 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/07-practicing-rules/index.html @@ -4,7 +4,7 @@ - + @@ -27,7 +27,7 @@

  3 reasons you love what you are learning

  If you can't sleep, what's better than watching videos of cats? - click here + click here

  diff --git a/exercises/06-Practicing-Rules/solution.hide.css b/exercises/07-practicing-rules/solution.hide.css similarity index 100% rename from exercises/06-Practicing-Rules/solution.hide.css rename to exercises/07-practicing-rules/solution.hide.css diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/07-practicing-rules/styles.css similarity index 100% rename from exercises/06-Practicing-Rules/styles.css rename to exercises/07-practicing-rules/styles.css diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/07-practicing-rules/tests.js similarity index 98% rename from exercises/06-Practicing-Rules/tests.js rename to exercises/07-practicing-rules/tests.js index 3bcecea6..5c375d55 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/07-practicing-rules/tests.js @@ -55,7 +55,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - test("the text-decoration in the

  tag should be 'underline'", () => { + test("The text-decoration in the

  tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/08-very-specific-rules/README.es.md similarity index 72% rename from exercises/07-Very-Specific-Rules/README.es.md rename to exercises/08-very-specific-rules/README.es.md index df781b9a..dd02d734 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/08-very-specific-rules/README.es.md @@ -1,4 +1,4 @@ -# `07` Very Specific Rules +# `08` Very Specific Rules ## 🔎 Importante: @@ -12,10 +12,10 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** 3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`. + - ->Importante: **NO** debes modificar el archivo index.html +> Importante: **NO** debes modificar el archivo `index.html`. ## 💡 Pista: -1. El atributo `!important` ayuda a sobreescribir estilos. +- El atributo `!important` ayuda a sobreescribir estilos. diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/08-very-specific-rules/README.md similarity index 72% rename from exercises/07-Very-Specific-Rules/README.md rename to exercises/08-very-specific-rules/README.md index 72f38d2c..91bcaf0c 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/08-very-specific-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" --- -# `07` Very Specific Rules +# `08` Very Specific Rules ## 🔎 Important: @@ -10,17 +10,16 @@ In this exercise, you can add your code only above the **READ-ONLY BLOCK** of th ## 📝 Instructions: - 1. Set the `ul li` 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 or .class selector). 3. Change the odd rows of the tables to a yellow background using `tr:nth-child`. + - ->Important: You should **NOT** modify the index.html file. +> Important: You should **NOT** modify the `index.html` file. ## 💡 Hint: -1. The `!important` attribute helps to override other attributes. +- The `!important` attribute helps to override other attributes. diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/08-very-specific-rules/index.html similarity index 93% rename from exercises/07-Very-Specific-Rules/index.html rename to exercises/08-very-specific-rules/index.html index 09fef243..3909949d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/08-very-specific-rules/index.html @@ -4,7 +4,7 @@ - +

  The learning essay

  @@ -25,7 +25,7 @@

  3 reasons you know love what you are learning

  If you can't sleep, what better than watching videos of cats? - click here + click here

  diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/08-very-specific-rules/solution.hide.css similarity index 100% rename from exercises/07-Very-Specific-Rules/solution.hide.css rename to exercises/08-very-specific-rules/solution.hide.css diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/08-very-specific-rules/styles.css similarity index 100% rename from exercises/07-Very-Specific-Rules/styles.css rename to exercises/08-very-specific-rules/styles.css diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/08-very-specific-rules/tests.js similarity index 100% rename from exercises/07-Very-Specific-Rules/tests.js rename to exercises/08-very-specific-rules/tests.js diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/09-rounded-image/README.es.md similarity index 70% rename from exercises/08-Rounded-Image/README.es.md rename to exercises/09-rounded-image/README.es.md index bd88ef5d..16a1bdde 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/09-rounded-image/README.es.md @@ -1,4 +1,4 @@ -# `08` Rounded Image +# `09` Rounded Image Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! @@ -16,10 +16,10 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). -## 💡 Pista: +## 💡 Pistas: + Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. -+ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/). ++ En este artículo puedes leer más [sobre la propiedad `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). -+ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ++ Adicionalmente, puedes [leer la documentación de `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/08-Rounded-Image/README.md b/exercises/09-rounded-image/README.md similarity index 71% rename from exercises/08-Rounded-Image/README.md rename to exercises/09-rounded-image/README.md index 886e41f1..f44b0c22 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/09-rounded-image/README.md @@ -1,4 +1,4 @@ -# `08` Rounded Image +# `09` Rounded Image A lot of websites use rounded profile images, a technique that really makes a website more beautiful! @@ -17,10 +17,10 @@ The problem with this approach is that it only works for squared pictures... Pro 3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). -## 💡 Hint: +## 💡 Hints: + If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle. -+ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/). ++ You can also read [this great article about `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). -+ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ++ Additionally you can [read the documentation on `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/08-Rounded-Image/index.html b/exercises/09-rounded-image/index.html similarity index 91% rename from exercises/08-Rounded-Image/index.html rename to exercises/09-rounded-image/index.html index 95931a07..52ff462d 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/09-rounded-image/index.html @@ -4,7 +4,7 @@ - + diff --git a/exercises/08-Rounded-Image/solution.hide.css b/exercises/09-rounded-image/solution.hide.css similarity index 100% rename from exercises/08-Rounded-Image/solution.hide.css rename to exercises/09-rounded-image/solution.hide.css diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/09-rounded-image/styles.css similarity index 100% rename from exercises/08-Rounded-Image/styles.css rename to exercises/09-rounded-image/styles.css diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/09-rounded-image/tests.js similarity index 100% rename from exercises/08-Rounded-Image/tests.js rename to exercises/09-rounded-image/tests.js diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/10-anchor-styles/README.es.md similarity index 82% rename from exercises/09-Anchor-Styles/README.es.md rename to exercises/10-anchor-styles/README.es.md index 94e03e07..b4e2d130 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/10-anchor-styles/README.es.md @@ -1,14 +1,14 @@ -# `09` 3D Anchor Styles +# `10` 3D Anchor Styles 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: - + Puedes controlar qué reglas CSS se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (cuando pasas por encima con el mouse) o `active` (cuando haces clic), por ejemplo: ```css a:active { - /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se presiona' */ + /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se 'presiona' */ } ``` diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/10-anchor-styles/README.md similarity index 75% rename from exercises/09-Anchor-Styles/README.md rename to exercises/10-anchor-styles/README.md index a4b23419..28134918 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/10-anchor-styles/README.md @@ -1,8 +1,8 @@ -# `09` 3D Anchor Styles +# `10` 3D Anchor Styles People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders, for example: - + You can control what CSS rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example: @@ -15,8 +15,7 @@ a:active { ## 📝 Instructions: -1. Change the border colors of the anchor, -when being pressed, to the following: +1. Change the border colors of the anchor, when being pressed, to the following: ```css border-color: #000 #aaa #aaa #000; diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/10-anchor-styles/index.html similarity index 88% rename from exercises/09-Anchor-Styles/index.html rename to exercises/10-anchor-styles/index.html index 30e00691..baf7c9ba 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/10-anchor-styles/index.html @@ -4,7 +4,7 @@ - + diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/10-anchor-styles/solution.hide.css similarity index 100% rename from exercises/09-Anchor-Styles/solution.hide.css rename to exercises/10-anchor-styles/solution.hide.css diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/10-anchor-styles/styles.css similarity index 100% rename from exercises/09-Anchor-Styles/styles.css rename to exercises/10-anchor-styles/styles.css diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/10-anchor-styles/tests.js similarity index 100% rename from exercises/09-Anchor-Styles/tests.js rename to exercises/10-anchor-styles/tests.js diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/11-your-own-font/README.es.md similarity index 94% rename from exercises/10-Your-Own-Font/README.es.md rename to exercises/11-your-own-font/README.es.md index dd58b215..ef1ce4a7 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/11-your-own-font/README.es.md @@ -1,10 +1,10 @@ -# `10` Your Own Font +# `11` Your Own Font Aquí puedes encontrar las fuentes de Google: https://fonts.google.com Elige la que más te guste, y úsala vinculando tu sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta `` del documento HTML de esta manera: -```Plain/Text +```html ``` diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/11-your-own-font/README.md similarity index 94% rename from exercises/10-Your-Own-Font/README.md rename to exercises/11-your-own-font/README.md index e2632833..234ad01c 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/11-your-own-font/README.md @@ -1,10 +1,10 @@ -# `10` Your Own Font +# `11` Your Own Font You can find Google Fonts here: https://fonts.google.com Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the `` tag of the HTML document like this: -```Plain/Text +```html ``` diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/11-your-own-font/index.html similarity index 89% rename from exercises/10-Your-Own-Font/index.html rename to exercises/11-your-own-font/index.html index b4005187..971a51b4 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/11-your-own-font/index.html @@ -6,7 +6,7 @@ - +

  My unique font

  diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/11-your-own-font/solution.hide.css similarity index 91% rename from exercises/10-Your-Own-Font/solution.hide.css rename to exercises/11-your-own-font/solution.hide.css index 85e3a7c3..98aa61be 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/11-your-own-font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { /* Add your code below this line */ - font-family: "Montserrat"; /* Varies depending on the font you chose */ + font-family: "Montserrat"; /* Varies depending on the font you choose */ } diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/11-your-own-font/solution.hide.html similarity index 83% rename from exercises/10-Your-Own-Font/solution.hide.html rename to exercises/11-your-own-font/solution.hide.html index eeb1c059..62fd02c5 100644 --- a/exercises/10-Your-Own-Font/solution.hide.html +++ b/exercises/11-your-own-font/solution.hide.html @@ -8,10 +8,10 @@ href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Source+Code+Pro:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> - + - +

  My unique font

  diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/11-your-own-font/styles.css similarity index 100% rename from exercises/10-Your-Own-Font/styles.css rename to exercises/11-your-own-font/styles.css diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/11-your-own-font/tests.js similarity index 95% rename from exercises/10-Your-Own-Font/tests.js rename to exercises/11-your-own-font/tests.js index f7c2460b..71d2d707 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/11-your-own-font/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const link = document.querySelectorAll("link") - test("the font-family in the .myTitle should exists", ()=>{ + test("the font-family in the .myTitle should exists", ()=>{ document.querySelector( "head" ).innerHTML = ``; diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/12-font-awesome-icons/README.es.md similarity index 80% rename from exercises/11-Font-Awesome-Icons/README.es.md rename to exercises/12-font-awesome-icons/README.es.md index d02884e6..87f6835c 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/12-font-awesome-icons/README.es.md @@ -1,4 +1,4 @@ -# `11` Font Awesome Icons +# `12` Font Awesome Icons Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar". @@ -6,7 +6,7 @@ Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea f Font Awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. -Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: +Después de vincular tu sitio web con font-awesome, puedes usar el siguiente código para insertar un icono en específico: ```html @@ -18,5 +18,5 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ## 📝 Instrucciones: -Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. +1. Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/12-font-awesome-icons/README.md similarity index 97% rename from exercises/11-Font-Awesome-Icons/README.md rename to exercises/12-font-awesome-icons/README.md index f9c7c09f..c37d7496 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/12-font-awesome-icons/README.md @@ -1,4 +1,4 @@ -# `11` Font Awesome Icons +# `12` Font Awesome Icons As a developer/designer, you want to use certain icons to make your website easy to understand; for example, we know that a "trash" icon means "delete". diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/12-font-awesome-icons/index.html similarity index 91% rename from exercises/11-Font-Awesome-Icons/index.html rename to exercises/12-font-awesome-icons/index.html index 1401d5da..3495c6b5 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/12-font-awesome-icons/index.html @@ -5,7 +5,7 @@ - +
  diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/12-font-awesome-icons/solution.hide.html similarity index 93% rename from exercises/11-Font-Awesome-Icons/solution.hide.html rename to exercises/12-font-awesome-icons/solution.hide.html index 431e6b22..4a3d255e 100644 --- a/exercises/11-Font-Awesome-Icons/solution.hide.html +++ b/exercises/12-font-awesome-icons/solution.hide.html @@ -5,7 +5,7 @@ - +
  diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/12-font-awesome-icons/styles.css similarity index 100% rename from exercises/11-Font-Awesome-Icons/styles.css rename to exercises/12-font-awesome-icons/styles.css diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/12-font-awesome-icons/tests.js similarity index 100% rename from exercises/11-Font-Awesome-Icons/tests.js rename to exercises/12-font-awesome-icons/tests.js diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/13-relative-length-em-rem/README.es.md similarity index 64% rename from exercises/12-Relative-Length-EM-REM/README.es.md rename to exercises/13-relative-length-em-rem/README.es.md index a10a425d..445d2c7f 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/13-relative-length-em-rem/README.es.md @@ -1,10 +1,10 @@ -# `12` Relative Length em, rem +# `13` Relative Length em, rem Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. -## Ejemplo usando em: +## Ejemplo usando `em`: En este ejercicio tenemos dos encabezados `

  `. Ambos son `

  `, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. @@ -12,19 +12,18 @@ Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de ## En resumen: -+ em: Relativo al `font-size` actual del padre. ++ `em`: Relativo al `font-size` actual del padre. -+ rem: Relativo al `font-size` original de la página. ++ `rem`: Relativo al `font-size` original de la página. ## 📝 Instrucciones: -1. Proporciona un `font-size` de `0.8em` a ambos `h2` +1. Proporciona un `font-size` de `0.8em` a ambos `h2`. -2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3` +2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3`. +## 💻 Resultado esperado: -## El resultado debería verse así: - - + diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/13-relative-length-em-rem/README.md similarity index 61% rename from exercises/12-Relative-Length-EM-REM/README.md rename to exercises/13-relative-length-em-rem/README.md index 51613b62..e1805278 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/13-relative-length-em-rem/README.md @@ -1,10 +1,10 @@ -# `12` Relative Length em, rem +# `13` Relative Length em, rem By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width. There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit. -## Example using em: +## Example using `em`: In this exercise we have two `

  ` headings. They are both `

  `, but one is bigger than the other because headings have relative font-sizes by default. @@ -12,20 +12,19 @@ Since the second `div` has a bigger based `font-size`, then the heading resizes ## In short: -+ em: Relative to the current `font-size` of the parent. ++ `em`: Relative to the current `font-size` of the parent. -+ rem: Relative to the original `font-size` of the page. ++ `rem`: Relative to the original `font-size` of the page. ## 📝 Instructions: -1. Give a `font-size` of `0.8em` to both `h2`'s +1. Give a `font-size` of `0.8em` to both `h2`'s. -2. Now give a `font-size` of `0.8rem` to both `h3`'s +2. Now give a `font-size` of `0.8rem` to both `h3`'s. +## 💻 Expected result: -## The result should look like this: - - + diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/13-relative-length-em-rem/index.html similarity index 92% rename from exercises/12-Relative-Length-EM-REM/index.html rename to exercises/13-relative-length-em-rem/index.html index f4d745fd..24290996 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/13-relative-length-em-rem/index.html @@ -4,7 +4,7 @@ - +

  diff --git a/exercises/12-Relative-Length-EM-REM/solution.hide.css b/exercises/13-relative-length-em-rem/solution.hide.css similarity index 100% rename from exercises/12-Relative-Length-EM-REM/solution.hide.css rename to exercises/13-relative-length-em-rem/solution.hide.css diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/13-relative-length-em-rem/styles.css similarity index 100% rename from exercises/12-Relative-Length-EM-REM/styles.css rename to exercises/13-relative-length-em-rem/styles.css diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/13-relative-length-em-rem/tests.js similarity index 100% rename from exercises/12-Relative-Length-EM-REM/tests.js rename to exercises/13-relative-length-em-rem/tests.js diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/14-anchor-like-button/README.es.md similarity index 91% rename from exercises/13-Anchor-Like-Button/README.es.md rename to exercises/14-anchor-like-button/README.es.md index 998e9ba7..f85665ea 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/14-anchor-like-button/README.es.md @@ -1,4 +1,4 @@ -# `13` Anchor Like Button +# `14` Anchor Like Button Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable. @@ -22,4 +22,4 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así: ## 💻 Resultado esperado: - + diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/14-anchor-like-button/README.md similarity index 90% rename from exercises/13-Anchor-Like-Button/README.md rename to exercises/14-anchor-like-button/README.md index b5002e2f..7491285c 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/14-anchor-like-button/README.md @@ -1,4 +1,4 @@ -# `13` Anchor Like Button +# `14` Anchor Like Button Anchors are not only used within text: when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience. @@ -20,4 +20,4 @@ Anchors are not only used within text: when you are going to use anchors outside ## 💻 Expected result: - + diff --git a/exercises/13-Anchor-Like-Button/index.html b/exercises/14-anchor-like-button/index.html similarity index 87% rename from exercises/13-Anchor-Like-Button/index.html rename to exercises/14-anchor-like-button/index.html index aaaa7740..853cce76 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/14-anchor-like-button/index.html @@ -4,7 +4,7 @@ - + Beautiful Button diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/14-anchor-like-button/solution.hide.css similarity index 100% rename from exercises/13-Anchor-Like-Button/solution.hide.css rename to exercises/14-anchor-like-button/solution.hide.css diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/14-anchor-like-button/styles.css similarity index 100% rename from exercises/13-Anchor-Like-Button/styles.css rename to exercises/14-anchor-like-button/styles.css diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/14-anchor-like-button/tests.js similarity index 100% rename from exercises/13-Anchor-Like-Button/tests.js rename to exercises/14-anchor-like-button/tests.js From 9f9677b79dd7a5b3d1359cc059078f4188d6e55d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:11:30 +0100 Subject: [PATCH 257/294] Update test.js --- exercises/04-list-styling/test.js | 75 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 39 deletions(-) diff --git a/exercises/04-list-styling/test.js b/exercises/04-list-styling/test.js index a8f97011..c8d27b1c 100644 --- a/exercises/04-list-styling/test.js +++ b/exercises/04-list-styling/test.js @@ -1,42 +1,39 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); +const fs = require("fs"); +const path = require("path"); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); jest.dontMock("fs"); -describe("The lists should be modified accordingly", function() { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); - }); - afterEach(() => { - jest.resetModules(); - }); - - it("You should not change the existing head tag elements", function () { - let head = document.querySelector('head'); - let title = head.querySelector('title').innerHTML; - - expect(title).toBe('04 List styling') - }) - - // Test in progress: - // it("The lists should be correctly styled", function() { - // const uls = document.querySelectorAll("ul"); - // const ols = document.querySelectorAll("ol"); - // console.log(uls); - // console.log(ols); - - // var style1 = window.getComputedStyle(ols[0]); - // var style2 = window.getComputedStyle(uls[0]); - // var style3 = window.getComputedStyle(ols[1]); - // var style4 = window.getComputedStyle(uls[1]); - - - // expect(style1["listStyleType"]).toBe("lower-alpha"); - // expect(style2["listStyleType"]).toBe("square"); - // expect(style3["listStyleType"]).toBe("armenian"); - // expect(style4["listStyleType"]).toBe("none"); - - // }); -}); \ No newline at end of file +describe("CSS Styles", () => { + beforeAll(() => { + document.querySelector("head").innerHTML = ``; + }); + + test("Cocacola list style should be applied correctly", () => { + const cocacolaItems = document.querySelectorAll(".cocacola"); + cocacolaItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("lower-alpha"); + }); + }); + + test("Pepsi list style should be applied correctly", () => { + const pepsiItems = document.querySelectorAll(".pepsi"); + pepsiItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("square"); + }); + }); + + test("Healthy list style should be applied correctly", () => { + const healthyItems = document.querySelectorAll(".healthy"); + healthyItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("armenian"); + }); + }); + + test("Dev-drinks list style should be applied correctly", () => { + const devDrinksItems = document.querySelectorAll(".dev-drinks"); + devDrinksItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("none"); + }); + }); +}); From 1531bb84537d8aaf326588b6be051b488fea1c12 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:12:33 +0100 Subject: [PATCH 258/294] Create solution.hide.css --- exercises/04-list-styling/solution.hide.css | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 exercises/04-list-styling/solution.hide.css diff --git a/exercises/04-list-styling/solution.hide.css b/exercises/04-list-styling/solution.hide.css new file mode 100644 index 00000000..c0cd286f --- /dev/null +++ b/exercises/04-list-styling/solution.hide.css @@ -0,0 +1,30 @@ +body { + height: 100vh; + background: rgb(189, 189, 189); +} + +.container { + font-family: "Comic Sans MS", "Comic Sans", cursive; + margin: 0 auto; + width: 70vw; + box-shadow: 3px 5px 20px #312f2f; + background-color: white; + padding: 120px; + width: 300px; +} + +.cocacola { + list-style-type: lower-alpha; +} + +.pepsi { + list-style-type: square; +} + +.healthy { + list-style-type: armenian; +} + +.dev-drinks { + list-style-type: none; +} From 0f358cf243d1ecbb6b649db59c87252f77b1966b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:28:24 +0100 Subject: [PATCH 259/294] Update README.md --- exercises/04-list-styling/README.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md index 242d9936..1d3309a4 100644 --- a/exercises/04-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs" # `04` List styling -In the front end we often have to list items and the way to do that is with `

  ` tags, for unordered/bulleted lists, and `
  ` tags for ordered/numbered lists. +In the front end, we often have to list items, and the way to do that is with `
  ` tags, for unordered/bulleted lists, and `
  ` tags for ordered/numbered lists. We have CSS control over what these lists look like, what bullets or numbers they use, etc. @@ -18,7 +18,7 @@ For example: } ``` -Will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. +This will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. **Note:** @@ -27,13 +27,14 @@ Then make the changes below and run again. ## 📝 Instructions: -1. Make the Coca Cola drink numbers into lower case letters. -2. Make the Pepsi drink numbers into square bullets. -3. Make the Healthy drink bullets into Armenian numbers. -4. Completely remove the bullets and extra spacing from the Web-developer drinks. +1. Make the Coca Cola drinks numbers into lowercase letters. +2. Make the Pepsi drinks numbers into square bullets. +3. Make the Healthy drinks bullets into Armenian numbers. +4. Completely remove the bullets from the web-developer drinks. ## 💡 Hints: - How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp -- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the html tags may be necessary. -- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp \ No newline at end of file +- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the HTML tags may be necessary. +- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp + From c9916df2d959c28dc3bfc87e6e55299af186fe4b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 16:23:56 +0100 Subject: [PATCH 260/294] Update README.md --- exercises/05.2-apply-several-classes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05.2-apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md index 333b93a6..009f5997 100644 --- a/exercises/05.2-apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=RISEpELEzEk" --- -# `04.2` Apply several classes +# `05.2` Apply several classes We have prepared a small CSS Stylesheet that contains the CSS styles to replicate poker cards. From 7cac596829aaa39206d411c40b63f1bec30dda74 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 16:35:24 +0100 Subject: [PATCH 261/294] Update README.es.md --- exercises/04-list-styling/README.es.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md index 7d267da2..c09d4976 100644 --- a/exercises/04-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -22,18 +22,18 @@ Eliminará los números o viñetas y moverá el texto hacia la izquierda para qu **Nota:** -Construye el código existente primero para ver cómo se ve originalmente la página. -Luego, realiza los cambios a continuación y construye de nuevo. +Construye el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. ## 📝 Instrucciones: -1. Convierte los números de las bebidas Coca Cola en letras minúsculas. -2. Convierte los números de las bebidas Pepsi en viñetas cuadradas. +1. Convierte los números de las bebidas de Coca Cola en letras minúsculas. +2. Convierte los números de las bebidas de Pepsi en viñetas cuadradas. 3. Convierte las viñetas de las bebidas Saludables en números armenios. -4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks. +4. Elimina completamente las viñetas de las bebidas de web-developer. ## 💡 Pistas: - Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp - Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. -- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp \ No newline at end of file +- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp + From f9662e5ff296698daa1c7a784546259225db48a0 Mon Sep 17 00:00:00 2001 From: josemoracard Date: Thu, 21 Mar 2024 12:38:58 +0000 Subject: [PATCH 262/294] run learnpack clean --- .learn/resets/01-inline-styles/index.html | 17 ----------------- .learn/resets/02-style-tag/index.html | 1 - 2 files changed, 18 deletions(-) delete mode 100644 .learn/resets/01-inline-styles/index.html delete mode 100644 .learn/resets/02-style-tag/index.html diff --git a/.learn/resets/01-inline-styles/index.html b/.learn/resets/01-inline-styles/index.html deleted file mode 100644 index 75056c8e..00000000 --- a/.learn/resets/01-inline-styles/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - -

  - - - - - - -

  Hello

  My brother

  - - diff --git a/.learn/resets/02-style-tag/index.html b/.learn/resets/02-style-tag/index.html deleted file mode 100644 index d88e76dd..00000000 --- a/.learn/resets/02-style-tag/index.html +++ /dev/null @@ -1 +0,0 @@ - From f3a1b99d6b84d84230e2566f040e84f2d8ca3eb7 Mon Sep 17 00:00:00 2001 From: josemoracard Date: Thu, 21 Mar 2024 13:39:44 +0000 Subject: [PATCH 263/294] updated test --- exercises/01-inline-styles/tests.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/exercises/01-inline-styles/tests.js b/exercises/01-inline-styles/tests.js index e980cf26..a41ccc11 100644 --- a/exercises/01-inline-styles/tests.js +++ b/exercises/01-inline-styles/tests.js @@ -1,13 +1,9 @@ const fs = require('fs'); const path = require('path'); -const { JSDOM } = require('jsdom'); - -// Read the HTML file const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +document.documentElement.innerHTML = html.toString(); -// Set up the DOM environment -const { window } = new JSDOM(html); -const { document } = window; +jest.dontMock('fs'); // Run the tests test("There should be a table element", () => { From 09ca9e06e7232642c42de50b99703fdac13550c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 13:29:59 -0500 Subject: [PATCH 264/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 08f04683..55fa5f58 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.35 -g && learnpack plugins:install learnpack-html@0.0.20" + "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 1296b87d9b4128ad1ef7a5411e763261f22b4f9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 13:30:17 -0500 Subject: [PATCH 265/294] Update learn.json --- learn.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index 80da5758..b24b2183 100644 --- a/learn.json +++ b/learn.json @@ -21,7 +21,7 @@ "graded": true, "disabledActions": [], "disableGrading": false, - "editor": { - "version": "3.1.9" + "editor": + "version": "3.1.23" } } From ada1409b867cabf429357e84f4bab9e5f6476077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 18:41:39 +0000 Subject: [PATCH 266/294] Fix learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index b24b2183..5a52f80b 100644 --- a/learn.json +++ b/learn.json @@ -21,7 +21,7 @@ "graded": true, "disabledActions": [], "disableGrading": false, - "editor": + "editor": { "version": "3.1.23" } } From 1ba7624141b310257e5b1f20b60ac663b5297c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 14:43:40 -0500 Subject: [PATCH 267/294] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index b519e106..04d1019b 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.35 -g && learnpack plugins:install learnpack-html@0.0.20 +RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2 From c569a04e2e11277527cce971bf0ce093c49099b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 12:20:01 -0500 Subject: [PATCH 268/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 55fa5f58..ba9eb6a0 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 493383b7427a3b602657ae198561131cbe920996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 12:20:22 -0500 Subject: [PATCH 269/294] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 04d1019b..d02bfdfc 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2 +RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7 From ca387e28a1a0fec0227031af3f95eeb15f161f61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 13:01:13 -0500 Subject: [PATCH 270/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ba9eb6a0..b278c0e7 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From bac2b3dca39533ceaa6ee4245d90152018bbad1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 13:01:30 -0500 Subject: [PATCH 271/294] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index d02bfdfc..6e137a77 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7 +RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7 From 403615e49b14b446b1e3fdb26cae3146e0cdb7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:23:58 -0500 Subject: [PATCH 272/294] Update learn.json --- learn.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/learn.json b/learn.json index 5a52f80b..f00696d7 100644 --- a/learn.json +++ b/learn.json @@ -23,5 +23,9 @@ "disableGrading": false, "editor": { "version": "3.1.23" + }, + "video": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } From 4e0237f66a8c5f920044046b8703d123a5f8c23b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:26:51 -0500 Subject: [PATCH 273/294] Update learn.json --- learn.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index f00696d7..391c4f75 100644 --- a/learn.json +++ b/learn.json @@ -25,7 +25,9 @@ "version": "3.1.23" }, "video": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "intro": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } } From 2e2d97f0a05da0321eacce7b4e85c08b88d5b209 Mon Sep 17 00:00:00 2001 From: Charlytoc Date: Tue, 23 Apr 2024 18:52:00 -0500 Subject: [PATCH 274/294] Update editor and CLI --- .devcontainer/devcontainer.json | 4 ++- learn.json | 63 +++++++++++++++++---------------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b278c0e7..d1773900 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,3 +1,4 @@ +``` // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { @@ -22,7 +23,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", @@ -33,3 +34,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } +``` \ No newline at end of file diff --git a/learn.json b/learn.json index 391c4f75..88b8c3d2 100644 --- a/learn.json +++ b/learn.json @@ -1,33 +1,36 @@ { - "language": "html", - "slug": "css-tutorial-exercises-course", - "skills": ["css-styling"], - "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", - "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", - "title": { - "us": "Learn CSS Interactively", - "es": "Aprende CSS Interactivamente" - }, - "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", - "description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", - "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" - }, - "duration": 8, - "difficulty": "easy", - "videoSolutions": true, - "bugsLink": "https://github.com/learnpack/learnpack/issues/new", - "projectType": "tutorial", - "graded": true, - "disabledActions": [], - "disableGrading": false, - "editor": { - "version": "3.1.23" - }, - "video": { - "intro": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" - } +"language": "html", +"slug": "css-tutorial-exercises-course", +"skills": ["css-styling"], +"preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", +"repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", +"title": { + "us": "Learn CSS Interactively", + "es": "Aprende CSS Interactivamente" +}, +"intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", +"description": { + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" +}, +"duration": 8, +"difficulty": "easy", +"videoSolutions": true, +"bugsLink": "https://github.com/learnpack/learnpack/issues/new", +"projectType": "tutorial", +"graded": true, +"disabledActions": [], +"disableGrading": false, +"editor": { + "version": "3.1.36" +}, +"telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" +}, +"video": { + "intro": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } +} \ No newline at end of file From 362341eb5b00ef23d524acdd223f03ca1abce95c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 18:54:08 -0500 Subject: [PATCH 275/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index d1773900..77c461aa 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,4 +1,4 @@ -``` + // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { @@ -34,4 +34,3 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } -``` \ No newline at end of file From 94bab6bd48bf5e1e56fdf8df38b299d1b4c43ada Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 20 May 2024 06:59:08 -0500 Subject: [PATCH 276/294] Update learn.json --- learn.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn.json b/learn.json index 88b8c3d2..c9c89d1e 100644 --- a/learn.json +++ b/learn.json @@ -29,8 +29,8 @@ }, "video": { "intro": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } -} \ No newline at end of file +} From 628e3354ee7d762fdab8d13bc9b9f60506ae060e Mon Sep 17 00:00:00 2001 From: Charlytoc Date: Mon, 17 Jun 2024 20:23:52 -0500 Subject: [PATCH 277/294] Updating to latest version of LearnPack Node and DOm --- .devcontainer/devcontainer.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 77c461aa..ec707f82 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,4 +1,3 @@ - // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { @@ -13,7 +12,7 @@ "*.md": "vscode.markdown.preview.editor" } }, - "extensions": ["learn-pack.learnpack-vscode"] + "extensions": ["learn-pack.learnpack-vscore"] } }, @@ -23,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/dom@1.1.7 @learnpack/node@1.1.13" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", @@ -33,4 +32,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" -} +} \ No newline at end of file From fa97e6a0f70f7451a25411217c066dac4a00344c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:10:30 -0500 Subject: [PATCH 278/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ec707f82..a3124481 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -12,7 +12,7 @@ "*.md": "vscode.markdown.preview.editor" } }, - "extensions": ["learn-pack.learnpack-vscore"] + "extensions": ["learn-pack.learnpack-vscode"] } }, @@ -32,4 +32,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" -} \ No newline at end of file +} From ca7282383b17831c3cfce943548087cb3cc2bfe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:15:19 -0500 Subject: [PATCH 279/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index a3124481..6115c0e4 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/dom@1.1.7 @learnpack/node@1.1.13" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 6ddfc18689f5a5b05b8374001495b554ce3ff8eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:18:41 -0500 Subject: [PATCH 280/294] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index c9c89d1e..90137a53 100644 --- a/learn.json +++ b/learn.json @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1.36" + "version": "3.1.40" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From de877546555666eaccb684a34ed74d1a2f9ad260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:12:03 -0500 Subject: [PATCH 281/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 6115c0e4..c38568c6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@4.0.10 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From e790eed26bfc7e246670fb6d0e37f8002fa411a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:12:21 -0500 Subject: [PATCH 282/294] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 90137a53..b9087243 100644 --- a/learn.json +++ b/learn.json @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1.40" + "version": "4.0.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 15c9c15df059213271fe789964e68ac07aaaa14e Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Tue, 12 Nov 2024 13:51:00 -0600 Subject: [PATCH 283/294] fixed title and description --- learn.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/learn.json b/learn.json index b9087243..7efe0380 100644 --- a/learn.json +++ b/learn.json @@ -5,13 +5,13 @@ "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", "title": { - "us": "Learn CSS Interactively", - "es": "Aprende CSS Interactivamente" + "us": "Learn CSS with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" }, "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", "description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", - "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners looking to learn and practice fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." }, "duration": 8, "difficulty": "easy", @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.0.0" + "version": "4.3" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From a5e2fc1ad3b60e1796e9c5e8e87bd36060c5bffa Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Tue, 12 Nov 2024 13:51:25 -0600 Subject: [PATCH 284/294] fixed title and description --- learn.json | 64 ++++++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/learn.json b/learn.json index 7efe0380..33711bf4 100644 --- a/learn.json +++ b/learn.json @@ -1,36 +1,34 @@ { -"language": "html", -"slug": "css-tutorial-exercises-course", -"skills": ["css-styling"], -"preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", -"repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", -"title": { - "us": "Learn CSS with Interactive Exercises", - "es": "Aprende CSS con Ejercicios Interactivos" -}, -"intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", -"description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners looking to learn and practice fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", - "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." -}, -"duration": 8, -"difficulty": "easy", -"videoSolutions": true, -"bugsLink": "https://github.com/learnpack/learnpack/issues/new", -"projectType": "tutorial", -"graded": true, -"disabledActions": [], -"disableGrading": false, -"editor": { - "version": "4.3" -}, -"telemetry": { - "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" -}, -"video": { - "intro": { - "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "slug": "css-tutorial-exercises-course", + "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", + "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", + "title": { + "us": "Learn CSS with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" + }, + "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", + "description": { + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners looking to learn and practice fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." + }, + "duration": 8, + "difficulty": "easy", + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", + "graded": true, + "disabledActions": [], + "disableGrading": false, + "editor": { + "version": "4.3" + }, + "telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" + }, + "video": { + "intro": { + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } } -} From 4bdd34bb86e664c61f4f4d68e1ca271a135e20bb Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 15:59:24 -0500 Subject: [PATCH 285/294] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 33711bf4..84057034 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.3" + "version": "3.4" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 393712da807041be568cd9607cdcd91585bd171d Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 21:11:08 +0000 Subject: [PATCH 286/294] dorngraded to edito 3.1 --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 84057034..5a2e591a 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.4" + "version": "3.1" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 1a2848f5c50aa10c970fa4bd44dcacb6cbedc826 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 21:20:53 +0000 Subject: [PATCH 287/294] updated editor to 4 --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 5a2e591a..b6721026 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1" + "version": "4.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 5e407eb663ff8a052188e7a8469f437db7296d20 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 22 Nov 2024 19:23:29 -0500 Subject: [PATCH 288/294] small fixes --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 33711bf4..b6721026 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.3" + "version": "4.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 57a26863bd367863050d46d5ac148af4141e51b5 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Mon, 13 Jan 2025 17:33:51 -0500 Subject: [PATCH 289/294] new version in the cloud --- .devcontainer/devcontainer.json | 2 +- exercises/04-list-styling/README.es.md | 13 ++++++++----- exercises/04-list-styling/README.md | 6 ++++-- learn.json | 2 +- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c38568c6..37fd7c78 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@4.0.10 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.7 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md index c09d4976..f67abca2 100644 --- a/exercises/04-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -22,18 +22,21 @@ Eliminará los números o viñetas y moverá el texto hacia la izquierda para qu **Nota:** -Construye el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. +Ejecuta el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. ## 📝 Instrucciones: -1. Convierte los números de las bebidas de Coca Cola en letras minúsculas. -2. Convierte los números de las bebidas de Pepsi en viñetas cuadradas. -3. Convierte las viñetas de las bebidas Saludables en números armenios. -4. Elimina completamente las viñetas de las bebidas de web-developer. +La regla `list-style-type` tiene muchos valores interesantes, utilizala para lograr: + +1. Conviertir los números de las bebidas de Coca Cola en letras minúsculas (Usa `lower-alpha`). +2. Conviertir los números de las bebidas de Pepsi en viñetas cuadradas. +3. Conviertir las viñetas de las bebidas Saludables en números armenios. +4. Eliminar completamente las viñetas de las bebidas de web-developer. ## 💡 Pistas: - Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp - Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. - `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp +- `lower-alpha` es un valor posible real de `list-style-type`. diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md index 1d3309a4..6a9cb5d7 100644 --- a/exercises/04-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -27,8 +27,10 @@ Then make the changes below and run again. ## 📝 Instructions: -1. Make the Coca Cola drinks numbers into lowercase letters. -2. Make the Pepsi drinks numbers into square bullets. +Use the CSS rule `list-style-type` and CSS to: + +1. Turn the Coca Cola drinks numbers into lowercase letters (Use `lower-alpha`) +2. Turn the Pepsi drinks numbers into square bullets. 3. Make the Healthy drinks bullets into Armenian numbers. 4. Completely remove the bullets from the web-developer drinks. diff --git a/learn.json b/learn.json index b6721026..74fcbc96 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.0" + "version": "5.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From b1febda39f321c16129a1def52333e19526986f1 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Wed, 15 Jan 2025 10:48:49 -0500 Subject: [PATCH 290/294] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 74fcbc96..efca06d8 100644 --- a/learn.json +++ b/learn.json @@ -23,7 +23,7 @@ "version": "5.0" }, "telemetry": { - "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" }, "video": { "intro": { From 8ef59383249b23e7120a52d6ee39a266bd138605 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Tue, 21 Jan 2025 08:21:35 -0400 Subject: [PATCH 291/294] Update learn.json --- learn.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index efca06d8..f8c6bd83 100644 --- a/learn.json +++ b/learn.json @@ -8,7 +8,7 @@ }, "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", "description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners looking to learn and practice fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners learning and practicing fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." }, "duration": 8, @@ -16,11 +16,13 @@ "videoSolutions": true, "bugsLink": "https://github.com/learnpack/learnpack/issues/new", "projectType": "tutorial", + "autoPlay": "true", "graded": true, "disabledActions": [], "disableGrading": false, "editor": { - "version": "5.0" + "version": "5.0", + "agent": "vscode" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" From 46564fa2a81e7ae3ea42d2b554a57cec00b75437 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 27 Jan 2025 20:53:03 -0400 Subject: [PATCH 292/294] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 37fd7c78..18991c69 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.7 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.13 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 63a6724e01cc578760fe154b28637f08e17fad62 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Tue, 25 Feb 2025 07:06:40 -0400 Subject: [PATCH 293/294] Update learn.json technologies --- learn.json | 1 + 1 file changed, 1 insertion(+) diff --git a/learn.json b/learn.json index f8c6bd83..b914a96c 100644 --- a/learn.json +++ b/learn.json @@ -19,6 +19,7 @@ "autoPlay": "true", "graded": true, "disabledActions": [], + "technologies": ["web-development", "desarrollo-web", "front-end", "css"], "disableGrading": false, "editor": { "version": "5.0", From fb6e1472d9941920556d544d078e71f94be05eb0 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 28 Feb 2025 21:46:18 +0000 Subject: [PATCH 294/294] Update workflow files --- .github/workflows/learnpack-audit.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/learnpack-audit.yml b/.github/workflows/learnpack-audit.yml index 52644d89..95814c2a 100644 --- a/.github/workflows/learnpack-audit.yml +++ b/.github/workflows/learnpack-audit.yml @@ -5,9 +5,9 @@ name: Learnpack audit on: push: - branches: [ master ] + branches: [ main ] pull_request: - branches: [ master ] + branches: [ main ] jobs: build: @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [14.x] + node-version: [20.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: