Merge pull request #132 from Charlytoc/master

alesanchezr · web-flow · commit dd7e1b70cb0d · 2024-03-04T21:30:57.000-05:00
Updated with new version
diff --git 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/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
@@ -90,11 +90,11 @@ Each exercise is a small React application containing the following files:
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻  (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻  (idea) 🤔, (run-tests) ⚠️ , (pull-request-review) 👀 (run-tutorial) ✅ (documentation) 📖
 
 2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, contribution: (coder), (translation) 🌎
 
-3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍
+3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (run-tutorial) ✅, Translation 🌍
 
 <!-- hide -->
 This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and  [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
diff --git 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=BDKdUPDez-U"
+intro: "https://www.youtube.com/watch?v=mZPmxx18kXo"
 ---
 
 # ¡¡Bienvenido a los ejercicios de CSS!!
@@ -27,8 +27,8 @@ Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nad
 
 Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
-1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (build-tests) :warning:
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
+1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (run-tests) :warning:
 
 Este proyecto sigue las especificaciones
 [all-contributors](https://github.com/kentcdodds/all-contributors)
diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md
@@ -1,5 +1,5 @@
 ---
-intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
+intro: "https://www.youtube.com/watch?v=AuXnQHKhjxw"
 ---
 
 # Welcome to CSS Exercises!!
@@ -26,8 +26,9 @@ As you may have noticed, HTML allows you to create only basic websites. Nobody w
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
-2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
+2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (run-tests) :warning:
+3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribution: (tutorials, corrections), 🤖
 
 This project follows the
 [all-contributors](https://github.com/kentcdodds/all-contributors)
diff --git a/exercises/00.1-Inline-Styles/README.es.md b/exercises/00.1-Inline-Styles/README.es.md
@@ -1,4 +1,8 @@
-# `03` Inline Styles
+---
+tutorial: "https://www.youtube.com/watch?v=c5JeXOnI-Sg"
+---
+
+# `00.1` Inline styles
 
 
 CSS trata sobre agregar estilos (styles) y diseños a tus etiquetas y elementos HTML.
diff --git a/exercises/00.1-Inline-Styles/README.md b/exercises/00.1-Inline-Styles/README.md
@@ -1,7 +1,7 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
+tutorial: "https://www.youtube.com/watch?v=h9WPp8gPMS8"
 ---
-# `01` Hello World in CSS
+# `00.1` Inline styles
 
 CSS is about adding styles to our HTML elements. 
 
@@ -23,15 +23,11 @@ To apply styles you always have to follow thеse steps:
 That is it! The rest is just semantics! 😁
 
 
-## 📝 Instructions
+## 📝 Instructions:
 
-1. Within the `index.html` file, create the basic structure of an html page with the appropriate `<html>`, `<head>` and `<body>` tags.
-2. Inside of the body of the page, create an `<h1>` tag that reads "HELLO WORLD!!!".
-1. Set an inline style to change the text color of the tag to `color: orangered` and give it a solid red border of 1px. 
+1. Set an inline style to change the background color of the table to green (green). For this exercise, DO NOT use the styles.css :(
 
 
 ### 💡 Hint:
-
+- How to use background-color: https://www.w3schools.com/cssref/pr_background-color.php
 - A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in VSCode. 
-- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp
-- For this exercise, do NOT use `styles.css` file or `<style>` tag.
diff --git a/exercises/01-Style-tag/README.es.md b/exercises/01-Style-tag/README.es.md
@@ -1,5 +1,7 @@
-
-# `01` Hello World in CSS
+---
+tutorial: "https://www.youtube.com/watch?v=9WrVN0rOg_k"
+---
+# `01` Style tag in CSS
 
 Otra manera que existe de aplicar estilos es utilizar una etiqueta `<style>` en lugar de la propiedad `style`, siempre debes seguir estos pasos:
 
diff --git a/exercises/01-Style-tag/README.md b/exercises/01-Style-tag/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
+tutorial: "https://www.youtube.com/watch?v=iDwXZoQR8EM"
 ---
 # `01` Style tag in CSS
 
diff --git a/exercises/01.1-Add-a-style-tag/README.es.md b/exercises/01.1-Add-a-style-tag/README.es.md
@@ -1,4 +1,6 @@
-
+---
+tutorial: "https://www.youtube.com/watch?v=rX-0KNBCxrY"
+---
 # `01.1` The Style Tag
 
 Veamos otro ejemplo pero esta vez agregando la etiqueta `<style>` nosotros mismos.
diff --git a/exercises/01.1-Add-a-style-tag/README.md b/exercises/01.1-Add-a-style-tag/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
+tutorial: "https://www.youtube.com/watch?v=K1SrZxiiM6I"
 ---
 
 # `01.1` The Style Tag
diff --git a/exercises/01.2-RGBA-colors/README.es.md b/exercises/01.2-RGBA-colors/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI"
+---
+
 # `01.2` Your First Style
 
 Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle:
diff --git a/exercises/01.2-RGBA-colors/README.md b/exercises/01.2-RGBA-colors/README.md
@@ -1,4 +1,6 @@
-
+---
+tutorial: "https://www.youtube.com/watch?v=TqmY9GLTwQ0"
+---
 # `01.2` Your First Style
 
 When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it:
diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8"
+---
+
 # `01.3` Your Second Style
 
 Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle:
diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/01.3-Your-Second-Style/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=W0CAqLIAoZI"
+tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds"
 ---
 
 # `01.3` Your Second Style
@@ -18,4 +18,4 @@ a {
 
 1. Make your website background blue by selecting the `body` and applying the `background` rule with a `blue` value.
 
-2. Build and preview the exercise and your result should be a blue `body` (the whole page blue).
+2. Run and preview the exercise and your result should be a blue `body` (the whole page blue).
diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=MmnkVGINtbs"
+---
+
 # `02` Separate Stylesheet
 
 Si usas la etiqueta html `<link>`, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`.
diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg"
+tutorial: "https://www.youtube.com/watch?v=jAfXzx88i-4"
 ---
 
 # `02` Separate Stylesheet
diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4"
+---
+
 # `02.1` Background
 
 La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`.
diff --git a/exercises/02.1-Background/README.md b/exercises/02.1-Background/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8"
+tutorial: "https://www.youtube.com/watch?v=fQh2OulBSp8"
 ---
 
 # `02.1` Background
@@ -11,17 +11,17 @@ If it is an image, you can specify if you want the image to be repeated horizont
 ## 📝 Instructions:
 
 
-1.  Build the exercise.
+1.  Run the exercise.
 
 2.  Check the Preview.
 
 3.  On the styles.css file change the background-size to 'contain' (check the styles.css tab).
 
-4.  Build and Preview the exercise again.
+4.  Run and Preview the exercise again.
 
 5.  Change the background-repeat to 'repeat' to make it repeat over the x-axis and y-axis.
 
-6.  Build and Preview the exercise again.
+6.  Run and Preview the exercise again.
 
 
 ## 💡 Hint:
diff --git a/exercises/03-list-styling/README.es.md b/exercises/03-list-styling/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=qcx31wUVmqI"
+---
+
 # `03` Estilo de listas
 
 En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `<ul>`, para listas desordenadas o con viñetas, y las etiquetas `<ol>` para listas ordenadas o numeradas.
diff --git a/exercises/03-list-styling/README.md b/exercises/03-list-styling/README.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs"
+---
+
 # `03` List styling
 
 In the front end we often have to list items and the way to do that is with `<ul>` tags, for unordered/bulleted lists, and `<ol>` tags for ordered/numbered lists.  
@@ -18,8 +22,8 @@ Will remove the numbers or bullets and will move the text to the left so there i
 
 **Note:** 
 
-Build the existing code first to see what the page originally looks like.
-Then make the changes below and build again.  
+Run the existing code first to see what the page originally looks like.
+Then make the changes below and run again.  
 
 ## 📝 Instructions:
 
diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md
@@ -1,3 +1,9 @@
+---
+tutorial: "https://www.youtube.com/watch?v=0I_xSAQ3vNs"
+---
+
+
+
 # `04` 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`:
diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=RffCSMXgWFc"
+tutorial: "https://www.youtube.com/watch?v=moLgdg7x84U"
 ---
 
 # `04` Class Selector
diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://www.youtube.com/watch?v=NYlPhkmqgmU"
+---
+
+
 # `04.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.
diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/04.1-Combined-Rules/README.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=VTOwd98T6FY"
+---
+
 # `04.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.
diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/04.2-Apply-several-classes/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://www.youtube.com/watch?v=CaSytmRcVGM"
+---
+
+
 # `04.2` Apply several classes
 
 Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker.
diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/04.2-Apply-several-classes/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=da4tJDx48CY"
+tutorial: "https://www.youtube.com/watch?v=RISEpELEzEk"
 ---
 
 # `04.2` Apply several classes
diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://www.youtube.com/watch?v=tUpL6lUJItk"
+---
+
+
 # `04.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/04.3-id-Selector/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=9906LCSQJ8M"
+tutorial: "https://www.youtube.com/watch?v=DtMVtGdStKw"
 ---
 
 # `04.3` The ID CSS Selector
diff --git a/learn.json b/learn.json
@@ -22,6 +22,6 @@
     "disabledActions": [],
     "disableGrading": false,
     "editor": {
-        "version": "1.0.73"
+        "version": "3.1.9"
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,6 @@`
`22`	`22`	`"disabledActions": [],`
`23`	`23`	`"disableGrading": false,`
`24`	`24`	`"editor": {`
`25`		`- "version": "1.0.73"`
	`25`	`+ "version": "3.1.9"`
`26`	`26`	`}`
`27`	`27`	`}`