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..9f5237bc --- /dev/null +++ b/README.es.md @@ -0,0 +1,93 @@ + + + + + +
+

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 CSS Layouts
    • +
  • Aprende Bootstrap
    • + + + +Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! + +## 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+: + +``` +$ 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 +``` + +

    + +

    + +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: + +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..95f44a7e 100644 --- a/README.md +++ b/README.md @@ -11,25 +11,35 @@ -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 ``. -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
      4. +
    4. Learn CSS← 🔥 your are here now
      5. +
    5. Learn CSS Layouts
    6. Learn Bootstrap
    + 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 @@ -55,9 +65,7 @@ $ npm i jest@24.8.0 -g $ learnpack start ``` -

    - -

    +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? @@ -71,9 +79,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) 📖 + +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! +This project follows the[all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome!