+ 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. +

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.

`, 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 04/33] 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 05/33] 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 06/33] 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 07/33] 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 08/33] 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 09/33] 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 10/33] 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 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 11/33] 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 12/33] 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 13/33] 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 14/33] 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 15/33] 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 16/33] 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 17/33] 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 18/33] 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 19/33] 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 20/33] 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 21/33] 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 22/33] 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 23/33] 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 24/33] 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 25/33] 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 26/33] 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 27/33] 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 28/33] 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 29/33] 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 30/33] 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 31/33] 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 32/33] 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 33/33] 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: