diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index fa719874..08f04683 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@24.8.0 -g && npm i @learnpack/learnpack@2.1.35 -g && learnpack plugins:install learnpack-html@0.0.20" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", diff --git a/.learn/assets/build.png b/.learn/assets/build.png index 73f9df1a..9f494b2b 100644 Binary files a/.learn/assets/build.png and b/.learn/assets/build.png differ diff --git a/.learn/resets/03-hello-without-head/README.es.md b/.learn/resets/03-hello-without-head/README.es.md new file mode 100644 index 00000000..f99acfd8 --- /dev/null +++ b/.learn/resets/03-hello-without-head/README.es.md @@ -0,0 +1,30 @@ +--- +tutorial: "https://www.youtube.com/watch?v=oFswWx9ba14" +--- + +# `03` Hello without Head + +En el último ejercicio tuviste que agregar toda la estructura básica HTML de un sitio web. + +Haz lo mismo en este ejercicio, pero no incluyas la etiqueta ``. + +## 📝 Instrucciones: + +1. Agrega al `` un título `

` con tu nombre. + +## 💻 Resultado esperado: + +![Link url](../../.learn/assets/03-hello-without-head.png?raw=true) + +## 💡 Pista: + ++ La estructura debería de verse algo así: + +```md + + + +

+ + +``` diff --git a/.learn/resets/03-hello-without-head/README.md b/.learn/resets/03-hello-without-head/README.md new file mode 100644 index 00000000..6e8e8927 --- /dev/null +++ b/.learn/resets/03-hello-without-head/README.md @@ -0,0 +1,26 @@ +# `03` Hello without Head + +In the last exercise you had to add all the HTML basic structure of a website. + +Do the same for this exercise, but don't include the `` tag. + +## 📝 Instructions: + +1. Add into the `` an `

` heading with your name on it. + +## 💻 Expected result: + +![Link url](../../.learn/assets/03-hello-without-head.png?raw=true) + +## 💡 Hint: + ++ The structure should look something like this: + +```md + + + +

+ + +``` diff --git a/exercises/00-welcome/README.es.md b/exercises/00-welcome/README.es.md index 2a578766..c6cfd205 100644 --- a/exercises/00-welcome/README.es.md +++ b/exercises/00-welcome/README.es.md @@ -1,5 +1,5 @@ --- -intro: "https://www.youtube.com/watch?v=tVlYr0hRiRM" +intro: "https://www.youtube.com/embed/kDQAnCqGS-w?si=Hxm_0xsGUWmL4pfk" --- # ¡Bienvenidos! @@ -37,6 +37,8 @@ Gracias a estas maravillosas personas ([emoji key](https://github.com/kentcdodds 3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribución: (traducción) :earth_africa: +4. [Charly Chacón (charlytoc)](https://github.com/charlytoc), contribución: (remasterización, video tutoriales) 🤖 + Este proyecto sigue las especificaciones: [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! diff --git a/exercises/00-welcome/README.md b/exercises/00-welcome/README.md index 661dc860..7d54625e 100644 --- a/exercises/00-welcome/README.md +++ b/exercises/00-welcome/README.md @@ -1,5 +1,5 @@ --- -intro: "https://www.youtube.com/watch?v=Vd2dby9ind4" +intro: "https://www.youtube.com/watch?v=zKfaek8q2vI" --- # Welcome! @@ -37,6 +37,8 @@ Thanks to these wonderful people ([emoji key](https://github.com/kentcdodds/all- 3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (translator) :earth_africa: +4. [Charly Chacón (charlytoc)](https://github.com/charlytoc), contribution: (remasterization, video tutorials) 🤖 + This project follows these specifications: [all-contributors](https://github.com/kentcdodds/all-contributors) Contributions of any kind are welcome! diff --git a/exercises/01-hello-world/README.es.md b/exercises/01-hello-world/README.es.md index 9992fc92..a40861da 100644 --- a/exercises/01-hello-world/README.es.md +++ b/exercises/01-hello-world/README.es.md @@ -1,3 +1,6 @@ +--- +tutorial: "https://www.youtube.com/watch?v=rEs6-k7un3o" +--- # `01` Hello World HTML es un lenguaje de marcado, lo que significa que todo lo que se escribe debe estar encerrado en `` (etiquetas) de apertura y cierre, como estas: @@ -9,9 +12,9 @@ HTML es un lenguaje de marcado, lo que significa que todo lo que se escribe debe ## 📝 Instrucciones: -1. **Elimina** todo el contenido actual de la página, **agrega** las etiquetas anteriores en el HTML de tu sitio web y presiona "build" para ver los resultados. +1. **Elimina** todo el contenido actual de la página, **agrega** las etiquetas anteriores en el HTML de tu sitio web y presiona "**run**" para ver los resultados. -![Build](../../.learn/assets/build.png?raw=true) +![Run](../../.learn/assets/build.png?raw=true) ## 💻 Resultado Esperado: diff --git a/exercises/01-hello-world/README.md b/exercises/01-hello-world/README.md index 211ca359..62bb7ae8 100644 --- a/exercises/01-hello-world/README.md +++ b/exercises/01-hello-world/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=s0WhMNU8qZ0" +tutorial: "https://www.youtube.com/watch?v=979yVLquF9Y" --- # `01` Hello World @@ -13,9 +13,9 @@ HTML is a markup language, meaning that everything you type must be wrapped in o ## 📝 Instructions: -1. Please **remove** the current website content, **add** the above tags to your website HTML and press "build" to see the results. +1. Please **remove** the current website content, **add** the above tags to your website HTML and press "**run**" to see the results. -![Build](../../.learn/assets/build.png?raw=true) +![Run](../../.learn/assets/build.png?raw=true) ## 💻 Expected Result: diff --git a/exercises/01.1-like-word/README.es.md b/exercises/01.1-like-word/README.es.md index a4a72256..f603b92b 100644 --- a/exercises/01.1-like-word/README.es.md +++ b/exercises/01.1-like-word/README.es.md @@ -1,3 +1,6 @@ +--- +tutorial: "https://www.youtube.com/watch?v=PFY7o_z8L2I" +--- # `01.1` Like Word HTML fue creado inicialmente para publicar documentos, es por eso que sus `` (etiquetas) son similares a los elementos típicos que ves en un documento: diff --git a/exercises/01.1-like-word/README.md b/exercises/01.1-like-word/README.md index 56b5354a..99d175c3 100644 --- a/exercises/01.1-like-word/README.md +++ b/exercises/01.1-like-word/README.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=sPcd9egcDak" +--- + # `01.1` Like Word HTML was initially created with the purpose of publishing documents, that is why its `` are similar to the typical elements you see in a document: diff --git a/exercises/02-website-structure/README.md b/exercises/02-website-structure/README.md index 8f4143f0..5d4c7104 100644 --- a/exercises/02-website-structure/README.md +++ b/exercises/02-website-structure/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=XMiG5UhV1n0" +tutorial: "https://www.youtube.com/watch?v=NxOOu4mntXo" --- # `02` Website Structure diff --git a/exercises/03-hello-without-head/README.md b/exercises/03-hello-without-head/README.md index 6e8e8927..f3b551a1 100644 --- a/exercises/03-hello-without-head/README.md +++ b/exercises/03-hello-without-head/README.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=JsnzmuQ90_Q" +--- + # `03` Hello without Head In the last exercise you had to add all the HTML basic structure of a website. diff --git a/exercises/04-list-of-reasons/README.es.md b/exercises/04-list-of-reasons/README.es.md index 7a29aa4a..f8a2e1a9 100644 --- a/exercises/04-list-of-reasons/README.es.md +++ b/exercises/04-list-of-reasons/README.es.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=Mp4bF6rs3us" +tutorial: "https://www.youtube.com/watch?v=Gbh21o4wsJg" --- # `04` List of Reasons diff --git a/exercises/04-list-of-reasons/README.md b/exercises/04-list-of-reasons/README.md index 5634e321..aa5435f1 100644 --- a/exercises/04-list-of-reasons/README.md +++ b/exercises/04-list-of-reasons/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=IH1hAxMGRcw" +tutorial: "https://www.youtube.com/watch?v=ej4ndZOXkm0" --- # `04` List of Reasons diff --git a/exercises/05-create-anchors/README.md b/exercises/05-create-anchors/README.md index e48b6c8e..fc376301 100644 --- a/exercises/05-create-anchors/README.md +++ b/exercises/05-create-anchors/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=hVatMB5GaWA" +tutorial: "https://www.youtube.com/watch?v=JScoiZRGiPE" --- # `05` Create anchors diff --git a/exercises/06-new-window/README.md b/exercises/06-new-window/README.md index 60236371..9349891c 100644 --- a/exercises/06-new-window/README.md +++ b/exercises/06-new-window/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=1JXOMalTLNo" +tutorial: "https://www.youtube.com/watch?v=ZzXz6YMHRGs" --- # `06` New Window diff --git a/exercises/07-same-page/README.es.md b/exercises/07-same-page/README.es.md index ee19b0c6..753edb24 100644 --- a/exercises/07-same-page/README.es.md +++ b/exercises/07-same-page/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=Cv0HAnycKfQ" +--- + # `07` Same Page Las etiquetas anchor ``, también son capaces de redirigir al usuario a diferentes secciones de nuestra página web. diff --git a/exercises/07-same-page/README.md b/exercises/07-same-page/README.md index bb746654..d9e970de 100644 --- a/exercises/07-same-page/README.md +++ b/exercises/07-same-page/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=HkJtj2618YU" +tutorial: "https://www.youtube.com/watch?v=zFJmSEcU6uQ" --- # `07` Same Page diff --git a/exercises/08-relative-vs-absolute-path/README.md b/exercises/08-relative-vs-absolute-path/README.md index 94af33b1..a4e6c6e3 100644 --- a/exercises/08-relative-vs-absolute-path/README.md +++ b/exercises/08-relative-vs-absolute-path/README.md @@ -42,7 +42,7 @@ Absolute paths include the domain name. They contain the full URL because they a ## 💡 Hints: -+ Your absolute path should start with this: {{publicUrl}} ++ Your absolute path should start with this:**{{publicUrl}}** + If you build the exercise, open the website, and right click on the image, the context menu will show an option with the text 'Copy Image Address' that will copy its absolute URL into your clipboard. diff --git a/exercises/09-formatting-Text/README.es.md b/exercises/09-formatting-Text/README.es.md index 50daf0c4..f0021063 100644 --- a/exercises/09-formatting-Text/README.es.md +++ b/exercises/09-formatting-Text/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=wYWGCLekOCA" +--- + # `09` Formatting Text La forma en que funciona el procesamiento de texto en documentos es bastante estándar, siempre se ve lo mismo: encabezados, texto en negrita, párrafos, citas, etc. diff --git a/exercises/09-formatting-Text/README.md b/exercises/09-formatting-Text/README.md index 9aa45fc8..8e1d5d9a 100644 --- a/exercises/09-formatting-Text/README.md +++ b/exercises/09-formatting-Text/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=PhH8JeTPHXs" +tutorial: "https://www.youtube.com/watch?v=Krt4BsRNtJo" --- # `09` Formatting Text diff --git a/exercises/10-replicate-html/README.es.md b/exercises/10-replicate-html/README.es.md index fb9e5e23..0eaff87a 100644 --- a/exercises/10-replicate-html/README.es.md +++ b/exercises/10-replicate-html/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=DHSX-rZ5ayk" +--- + # `10` Replicate HTML Esta es una imagen de un documento HTML que realizamos. diff --git a/exercises/10-replicate-html/README.md b/exercises/10-replicate-html/README.md index 03fb9965..fb64cf11 100644 --- a/exercises/10-replicate-html/README.md +++ b/exercises/10-replicate-html/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=NIm_BplpzR0" +tutorial: "https://www.youtube.com/watch?v=R_h8HWjBhaE" --- # `10` Replicate HTML diff --git a/exercises/11-nested-tags/README.es.md b/exercises/11-nested-tags/README.es.md index 11de540c..f9ca977f 100644 --- a/exercises/11-nested-tags/README.es.md +++ b/exercises/11-nested-tags/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=vNCfuLTfW78" +--- + # `11` Nested Tags ## ¿Qué son los Nested Tags? 🤔 diff --git a/exercises/11-nested-tags/README.md b/exercises/11-nested-tags/README.md index 33bc0b36..e93f4b71 100644 --- a/exercises/11-nested-tags/README.md +++ b/exercises/11-nested-tags/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=_sLqC-C-rvE" +tutorial: "https://www.youtube.com/watch?v=3OvWbRlpnLY" --- # `11` Nested Tags diff --git a/exercises/12-my-first-table/README.es.md b/exercises/12-my-first-table/README.es.md index 32e56320..3b8a6a89 100644 --- a/exercises/12-my-first-table/README.es.md +++ b/exercises/12-my-first-table/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=MskUgEMh88g" +--- + # `12` My First Table Vamos a crear una tabla de datos con solamente código HTML, la cual llevará la siguiente información: @@ -101,7 +105,7 @@ Vamos a practicar realizando las siguientes tareas para jugar con el formato de ## 💡 Pista: -+ Después de cada paso dale clic a `build`, para asegurarte que todo va bien. ++ Después de cada paso dale clic a `**run**`, para asegurarte que todo va bien. + Puedes copiar los bloques de código para que no tengas que escribirlos 3 veces más, solo recuerda cambiar la información de las celdas. diff --git a/exercises/12-my-first-table/README.md b/exercises/12-my-first-table/README.md index 78ce7905..98df2eb6 100644 --- a/exercises/12-my-first-table/README.md +++ b/exercises/12-my-first-table/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=ZHsw63Xdbw4" +tutorial: "https://www.youtube.com/watch?v=bIQfuIOggpM" --- # `12` My First Table @@ -104,7 +104,7 @@ We are going to practice doing the following tasks to play with the table format ## 💡 Hints: -+ After each step click `build`, to make sure everything is going well. ++ After each step click `**run**`, to make sure everything is going well. + You can copy the code blocks so you don't have to type them 3 more times, just remember to change the information in the cells. diff --git a/exercises/13-image-with-text/README.es.md b/exercises/13-image-with-text/README.es.md index 32767ed9..de72bc00 100644 --- a/exercises/13-image-with-text/README.es.md +++ b/exercises/13-image-with-text/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=1wyvtK7vLFM" +--- + # `13` Image with Text Antes de que existiera `CSS`, el uso de tablas era la única forma posible de hacer algunos diseños de sitios web. Es un proceso muy similar a la creación de diseños en MS Office. diff --git a/exercises/13-image-with-text/README.md b/exercises/13-image-with-text/README.md index 1f087f55..3cbf6506 100644 --- a/exercises/13-image-with-text/README.md +++ b/exercises/13-image-with-text/README.md @@ -1,5 +1,5 @@ --- -tutorial: "https://www.youtube.com/watch?v=QUoq-uQf6As" +tutorial: "https://www.youtube.com/watch?v=NF1M60J090c" --- # `13` Image with Text diff --git a/exercises/14-video-tag/README.es.md b/exercises/14-video-tag/README.es.md index 40558e5b..a711adb3 100644 --- a/exercises/14-video-tag/README.es.md +++ b/exercises/14-video-tag/README.es.md @@ -1,3 +1,7 @@ +--- +tutorial: "https://www.youtube.com/watch?v=p9oHBMI6gc0" +--- + # `14` Video Tag El tag de `