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/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 98dbe61b..5e663733 100644 --- 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 🌍 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 index 5a823d55..c79f3275 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=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 index 13dbfe77..e2058557 100644 --- 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 index 5ffacaac..9128bf37 100644 --- 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 index aadb140d..08375455 100644 --- 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 ``, `` and `` tags. -2. Inside of the body of the page, create an `

` 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 `` tag. diff --git a/exercises/01-Style-tag/README.es.md b/exercises/01-Style-tag/README.es.md index cf3e6d20..6623f4ec 100644 --- 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 `` 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 index 5efe9484..f57c423b 100644 --- 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 index b23d62ae..3700d0a2 100644 --- 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 `` nosotros mismos. diff --git a/exercises/01.1-Add-a-style-tag/README.md b/exercises/01.1-Add-a-style-tag/README.md index 46bd1e2e..e71febdf 100644 --- 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 index d0d8be4b..e7c6ab3d 100644 --- 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 index 70e0209f..e6181ea4 100644 --- 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 index 70a3e7fd..8ed8ad02 100644 --- 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 index 74f39c93..d090ecb0 100644 --- 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 index d0e74a41..de8849f2 100644 --- 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 ``, 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 index 7c4637c1..0e5fb4d4 100644 --- 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 index 561e0451..55debc05 100644 --- 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 index afbfa795..726d36b1 100644 --- 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 index e9fd849b..059cf653 100644 --- 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 `