diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index fa719874..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@24.8.0 -g && npm i @learnpack/learnpack@2.1.26 -g && learnpack plugins:install learnpack-html@0.0.20"
+ "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",
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:
diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
index c303edbf..6e137a77 100644
--- a/.gitpod.Dockerfile
+++ b/.gitpod.Dockerfile
@@ -3,5 +3,4 @@ FROM gitpod/workspace-full:latest
USER gitpod
-RUN npm i jest@24.8.0 -g
-RUN npm i @learnpack/learnpack@2.1.26 -g && learnpack plugins:install learnpack-html@0.0.20
+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
diff --git a/README.es.md b/README.es.md
index 77217f4a..23cb7b39 100644
--- a/README.es.md
+++ b/README.es.md
@@ -88,11 +88,11 @@ Cada ejercicio es una pequeña aplicación de React que contiene los siguientes
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: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (run-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
2. [David Hay (haydavid23)](https://github.com/haydavid23), contribución: (tests) ⚠️
-3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍
+3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (run-tutorial) ✅, Traducción 🌍
Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
diff --git a/README.md b/README.md
index 3f84ce08..5e663733 100644
--- a/README.md
+++ b/README.md
@@ -12,14 +12,14 @@
-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.
+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 `
-Click me to open google.com
-```
-
-We have an HTML anchor `` that takes people to google.com when clicked.
-We use CSS to select all the anchor tags and make them pink.
-
-## 📝 Instructions:
-
-1. Paste this code on your website to see the results.
-
-## 💻 Preview:
-
-It should look like this:
-
-
diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html
deleted file mode 100644
index 93d4ce1c..00000000
--- a/exercises/01-Hello-World/index.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/exercises/01-inline-styles/README.es.md b/exercises/01-inline-styles/README.es.md
new file mode 100644
index 00000000..3efe9408
--- /dev/null
+++ b/exercises/01-inline-styles/README.es.md
@@ -0,0 +1,30 @@
+---
+tutorial: "https://www.youtube.com/watch?v=c5JeXOnI-Sg"
+---
+
+# `01` Inline styles
+
+El CSS se trata de agregar estilos a nuestros elementos HTML.
+
+La forma más **básica** de aplicar un estilo a un elemento HTML es usar el atributo `style` dentro de la etiqueta HTML. Esto se llama "estilos en línea" (*inline style*) y funciona así:
+
+```html
+Ir a Google
+```
+
+Esto establecerá el `color` del texto del enlace anterior a rojo y el tamaño de fuente (`font-size`) en 14 píxeles.
+
+En el diseño web contemporáneo, esta forma de aplicar estilos se desaconseja porque no es eficiente: tienes que aplicar estilos etiqueta por etiqueta. Pero te encontrarás con ejemplos de esto y necesitarás estar familiarizado con ello.
+
+Para aplicar estilos, siempre tienes que seguir estos pasos:
+
+1. Leer el HTML y seleccionar qué elemento deseas decorar para aplicarle CSS.
+2. Aplicar el estilo con el atributo `style` como se muestra arriba.
+
+## 📝 Instrucciones:
+
+1. Establece un estilo en línea para cambiar el color de fondo (`background-color`) de la tabla a verde.
+
+## 💡 Pista:
+
+- Cómo usar `background-color`: https://www.w3schools.com/cssref/pr_background-color.php
diff --git a/exercises/01-inline-styles/README.md b/exercises/01-inline-styles/README.md
new file mode 100644
index 00000000..f37c0949
--- /dev/null
+++ b/exercises/01-inline-styles/README.md
@@ -0,0 +1,31 @@
+---
+tutorial: "https://www.youtube.com/watch?v=h9WPp8gPMS8"
+---
+# `01` Inline styles
+
+CSS is about adding styles to our HTML elements.
+
+The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this:
+
+```HTML
+Go to Google
+```
+
+This will set the text color of the link above to red, and the font size to 14 pixels.
+
+In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it.
+
+To apply styles you always have to follow thеse steps:
+
+1. Read the HTML and pick what element you want to decorate to apply CSS to it.
+2. Apply the style with the `style` attribute as above.
+
+That is it! The rest is just semantics! 😁
+
+## 📝 Instructions:
+
+1. Set an inline style to change the `background-color` of the table to green.
+
+## 💡 Hint:
+
+- How to use `background-color`: https://www.w3schools.com/cssref/pr_background-color.php
diff --git a/exercises/03-Inline-Styles/index.html b/exercises/01-inline-styles/index.html
similarity index 82%
rename from exercises/03-Inline-Styles/index.html
rename to exercises/01-inline-styles/index.html
index ab36cc54..75056c8e 100644
--- a/exercises/03-Inline-Styles/index.html
+++ b/exercises/01-inline-styles/index.html
@@ -1,7 +1,7 @@
- 03 Inline Styles
+ 01 Inline Styles
diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/01-inline-styles/solution.hide.html
similarity index 63%
rename from exercises/03-Inline-Styles/solution.hide.html
rename to exercises/01-inline-styles/solution.hide.html
index 1c3a3828..590621a4 100644
--- a/exercises/03-Inline-Styles/solution.hide.html
+++ b/exercises/01-inline-styles/solution.hide.html
@@ -1,11 +1,11 @@
- 03 Inline Styles
+ 01 Inline Styles
-
+
Hello
@@ -14,4 +14,4 @@
-
\ No newline at end of file
+
diff --git a/exercises/01-inline-styles/tests.js b/exercises/01-inline-styles/tests.js
new file mode 100644
index 00000000..a41ccc11
--- /dev/null
+++ b/exercises/01-inline-styles/tests.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock('fs');
+
+// Run the tests
+test("There should be a table element", () => {
+ const table = document.querySelector("table");
+ expect(table).toBeTruthy();
+});
+
+test("The table background color should be green", () => {
+ const table = document.querySelector("table");
+ const computedStyles = window.getComputedStyle(table);
+ expect(computedStyles.backgroundColor).toBe("green");
+});
+
+test("There should be two table rows", () => {
+ const rows = document.querySelectorAll("tr");
+ expect(rows.length).toBe(2);
+});
\ No newline at end of file
diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html
deleted file mode 100644
index 1c51e8e0..00000000
--- a/exercises/01.1-The-Style-Tag/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
- 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,
- math,writing, and confidence.
-
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 97%
rename from exercises/06-Practicing-Rules/tests.js
rename to exercises/07-practicing-rules/tests.js
index e691255c..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 = ``;
@@ -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 = ``;
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 @@
- 07 Very Specific Rules
+ 08 Very Specific Rules
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 @@
- 08 Rounded Image
+ 09 Rounded Image
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 @@
- 09 Anchor Styles
+ 10 Anchor Styles
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 @@
- 10 Your Own Font
+ 11 Your Own Font
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"
/>
-
+
- 10 Your Own Font
+ 11 Your Own Font
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 @@
- 11 Font Awesome
+ 12 Font Awesome
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 @@
- 11 Font Awesome
+ 12 Font Awesome
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 @@
- 12 Relative Length EM REM
+ 13 Relative Length EM REM
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 @@
- 13 Anchor Like Button
+ 14 Anchor Like ButtonBeautiful 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
diff --git a/learn.json b/learn.json
index c06fdf38..b914a96c 100644
--- a/learn.json
+++ b/learn.json
@@ -1,27 +1,37 @@
{
- "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"
+ "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 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,
"difficulty": "easy",
"videoSolutions": true,
"bugsLink": "https://github.com/learnpack/learnpack/issues/new",
"projectType": "tutorial",
+ "autoPlay": "true",
"graded": true,
"disabledActions": [],
+ "technologies": ["web-development", "desarrollo-web", "front-end", "css"],
"disableGrading": false,
"editor": {
- "version": "1.0.73"
+ "version": "5.0",
+ "agent": "vscode"
+ },
+ "telemetry": {
+ "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142"
+ },
+ "video": {
+ "intro": {
+ "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw",
+ "es": "https://www.youtube.com/watch?v=mZPmxx18kXo"
+ }
}
}