From dd753894448ead1ffeb9f5148cd079c3f7041d68 Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Sat, 26 Mar 2022 21:17:05 +0000 Subject: [PATCH 1/7] https://github.com/learnpack/learnpack/issues/811 --- .gitignore | 1 + README.es.md | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 13 ++++++-- 3 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 README.es.md diff --git a/.gitignore b/.gitignore index 8f255a69..d9d6ec86 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ !bc.json !learn.json !README.md +!README.es.md !/exercises !/exercises/* diff --git a/README.es.md b/README.es.md new file mode 100644 index 00000000..b5f569d1 --- /dev/null +++ b/README.es.md @@ -0,0 +1,84 @@ + + + + + +
+

Tutorial de EJercicios de CSS de 4Geeks Academy

+ + + follow on Twitter + +
+ +¡Hola! Soy [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), ¡muy emocionado de tenerte aquí! 🎉 😂 Aprender a programar es difícil, ¡necesitas entrenamiento! [Envíame un DM en Twitter] (https://twitter.com/alesanchezr) si tienes alguna pregunta. + +## En este tutorial aprenderás los siguientes conceptos: + +1. Usar cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta `` o usando una hoja de estilo externa ``. + +2. Seleccionar elementos HTML de su sitio web para aplicar los estilos. + +3. Aplicar Reglas CSS (estilos) a esos elementos. + +4. Utilizar las reglas CSS más populares. + +5. Aprender los trucos CSS más populares. + +#### Antes de empezar... hay otros tutoriales + +ol> +
  • Aprende HTML
    • +
  • Aprende Formularios HTML5
    • +
  • Aprende CSS← estás aquí
    • +
  • Aprende Bootstrap
    • + +

    + +

    + +Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! + +## Instalación con un clic + + + +## Instalación manual +1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 12+: + +``` +$ npm i learnpack -g +$ learnpack plugins:install learnpack-html +``` +2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta: + +```bash +$ learnpack install css-tutorial-exercises-course +``` + +Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios. + +3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo bc.json: + +```sh +$ npm i jest@24.8.0 -g +$ learnpack start +``` + +## ¿Cómo están organizados los ejercicios? + +Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos: + +1. **index.js:** representa el archivo de entrada para toda la aplicación. +2. **README.md:** contiene las instrucciones de los ejercicios. +3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio. + +## Colaboradores + +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) 📖 +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 🌍 + +Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! \ No newline at end of file diff --git a/README.md b/README.md index 768db291..c198a735 100644 --- a/README.md +++ b/README.md @@ -13,18 +13,25 @@ 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 question. You'll be learning the following concepts: -1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `` tag or using an exeternal stylesheet ``, +1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `` tag or using an exeternal stylesheet ``. + 2. Selecting HTML Elements from your website to apply the styles to. + 3. Apply CSS Rules (styles) to those elements. + 4. Use the most popular CSS Rules. + 5. Learn the most popular CSS Tricks. -

    Before we start... other related tutorials

    +#### Before we start... other related tutorials +
    1. Learn HTML
      2. -
    2. Learn CSS← your are here now
      3. +
    3. Learn HTML5 Forms← your are here now
      4. +
    4. Learn CSS
    5. Learn Bootstrap
    + Complete selection of autograded CSS exercises, anyone interested in learning CSS!

    One click installation:

    From 9de9f796cf33656b24c5ba6b79bb42f3c0415f25 Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Sat, 26 Mar 2022 21:38:02 +0000 Subject: [PATCH 2/7] missing line --- README.es.md | 7 ++++--- README.md | 9 ++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/README.es.md b/README.es.md index b5f569d1..072fd162 100644 --- a/README.es.md +++ b/README.es.md @@ -29,8 +29,9 @@ ol>
  • Aprende HTML
    • -
  • Aprende Formularios HTML5
    • -
  • Aprende CSS← estás aquí
    • +
  • Aprende Formularios HTML5
    • +
  • Aprende CSS← 🔥 estás aquí
    • +
  • Aprende CSS Layouts
  • Aprende Bootstrap

    • @@ -41,7 +42,7 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i ## Instalación con un clic - +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)] ## Instalación manual 1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 12+: diff --git a/README.md b/README.md index c198a735..317fdfe9 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,9 @@ -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 question. You'll be learning the following concepts: +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 question. + +## You'll be learning the following concepts: 1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `` tag or using an exeternal stylesheet ``. @@ -27,8 +29,9 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really

    1. Learn HTML
      2. -
    2. Learn HTML5 Forms← your are here now
      3. -
    3. Learn CSS
      4. +
    4. Learn HTML5 Forms
      5. +
    5. Learn CSS← 🔥 your are here now
      6. +
    6. Learn CSS Layouts
    7. Learn Bootstrap
    From 033690b507db1da6eee03258eca9624596fcc32a Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Sat, 26 Mar 2022 21:42:09 +0000 Subject: [PATCH 3/7] link fixed --- README.es.md | 4 ++-- README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.es.md b/README.es.md index 072fd162..a85e8f7b 100644 --- a/README.es.md +++ b/README.es.md @@ -42,9 +42,9 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i ## Instalación con un clic -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)] - +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/4GeeksAcademy/css-tutorial-exercises-course) ## Instalación manual + 1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 12+: ``` diff --git a/README.md b/README.md index 317fdfe9..1d84a517 100644 --- a/README.md +++ b/README.md @@ -37,9 +37,9 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really Complete selection of autograded CSS exercises, anyone interested in learning CSS! -

    One click installation:

    +## One click installation: - +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/4GeeksAcademy/css-tutorial-exercises-course) ## Manual installation From 61c41ae134864f9365dc3447acbdbde1959ac08c Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Sat, 26 Mar 2022 21:45:13 +0000 Subject: [PATCH 4/7] missing lines --- README.es.md | 1 + README.md | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.es.md b/README.es.md index a85e8f7b..4828b4a6 100644 --- a/README.es.md +++ b/README.es.md @@ -51,6 +51,7 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i $ npm i learnpack -g $ learnpack plugins:install learnpack-html ``` + 2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta: ```bash diff --git a/README.md b/README.md index 1d84a517..39d9eebe 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,8 @@ $ npm i jest@24.8.0 -g $ learnpack start ``` -

    - -

    +Note: The exercises have automatic grading but its very rigid and string, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated. + ## How are the exercises organized? From 0844d07fe181e90434c511f21e5e40a3f71e14cb Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Sat, 26 Mar 2022 21:50:06 +0000 Subject: [PATCH 5/7] misspell --- README.es.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.es.md b/README.es.md index 4828b4a6..232c4e6c 100644 --- a/README.es.md +++ b/README.es.md @@ -67,6 +67,8 @@ $ npm i jest@24.8.0 -g $ learnpack start ``` +Nota: Los ejercicios slon autograduados pero los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y los uses solo como una recomendación o pueden frustrarte. + ## ¿Cómo están organizados los ejercicios? Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos: From 74ca07ca4c453893729c04d2dc1c53e530c887d8 Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Tue, 29 Mar 2022 23:09:07 +0000 Subject: [PATCH 6/7] contributors section corrected --- README.es.md | 13 +++++++++---- README.md | 11 ++++++----- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/README.es.md b/README.es.md index 232c4e6c..9f5237bc 100644 --- a/README.es.md +++ b/README.es.md @@ -34,15 +34,14 @@ ol>
  • Aprende CSS Layouts
  • Aprende Bootstrap
    • -

    - -

    + Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! -## Instalación con un clic +## Instalación en un clic [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/4GeeksAcademy/css-tutorial-exercises-course) + ## Instalación manual 1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 12+: @@ -67,6 +66,10 @@ $ npm i jest@24.8.0 -g $ learnpack start ``` +

    + +

    + Nota: Los ejercicios slon autograduados pero los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y los uses solo como una recomendación o pueden frustrarte. ## ¿Cómo están organizados los ejercicios? @@ -82,7 +85,9 @@ 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) 📖 + 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 🌍 Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! \ No newline at end of file diff --git a/README.md b/README.md index 39d9eebe..6304f39b 100644 --- a/README.md +++ b/README.md @@ -80,9 +80,10 @@ 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) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book: -1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning: +1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖 -This project follows the -[all-contributors](https://github.com/kentcdodds/all-contributors) -specification. Contributions of any kind are welcome! +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 🌍 + +This project follows the[all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome! From eba484b05be2f7480c29d862896ed3fcf7504d9e Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Wed, 30 Mar 2022 17:54:25 -0400 Subject: [PATCH 7/7] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 6304f39b..95f44a7e 100644 --- a/README.md +++ b/README.md @@ -65,8 +65,7 @@ $ npm i jest@24.8.0 -g $ learnpack start ``` -Note: The exercises have automatic grading but its very rigid and string, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated. - +Note: The exercises have automatic grading but its very rigid and strict, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated. ## How are the exercises organized?