Skip to content

Commit 210a3de

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request 4GeeksAcademy#48 from ElviraQDP/readme.es
learnpack/learnpack#811
2 parents 9f3eb5b + eba484b commit 210a3de

File tree

3 files changed

+117
-14
lines changed

3 files changed

+117
-14
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
!bc.json
88
!learn.json
99
!README.md
10+
!README.es.md
1011

1112
!/exercises
1213
!/exercises/*

‎README.es.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<table>
2+
<tr>
3+
<td><img src="https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/4geeks-icon-blue.png?raw=true"></td>
4+
<td>
5+
<h1 align="center"> Tutorial de EJercicios de CSS de 4Geeks Academy</h1>
6+
<img src="https://img.shields.io/github/last-commit/4geeksacademy/css-tutorial-exercises-course" />
7+
<a href="https://breatheco.de"><img src="https://img.shields.io/badge/certified-BreatheCode-blue" /></a>
8+
<a href="https://twitter.com/alesanchezr"><img src="https://img.shields.io/twitter/follow/alesanchezr?style=social&logo=twitter" alt="follow on Twitter"></a>
9+
<a href="https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.git"><img src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" /></a>
10+
</td>
11+
</tr>
12+
</table>
13+
14+
¡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.
15+
16+
## En este tutorial aprenderás los siguientes conceptos:
17+
18+
1. Usar cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta `<style>` o usando una hoja de estilo externa `<link>`.
19+
20+
2. Seleccionar elementos HTML de su sitio web para aplicar los estilos.
21+
22+
3. Aplicar Reglas CSS (estilos) a esos elementos.
23+
24+
4. Utilizar las reglas CSS más populares.
25+
26+
5. Aprender los trucos CSS más populares.
27+
28+
#### Antes de empezar... hay otros tutoriales
29+
30+
ol>
31+
<li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a></li>
32+
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5 </a></li>
33+
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>← 🔥 estás aquí</li>
34+
<li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
35+
<li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
36+
</ol>
37+
38+
39+
Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS!
40+
41+
## Instalación en un clic
42+
43+
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
44+
45+
## Instalación manual
46+
47+
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+:
48+
49+
```
50+
$ npm i learnpack -g
51+
$ learnpack plugins:install learnpack-html
52+
```
53+
54+
2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta:
55+
56+
```bash
57+
$ learnpack install css-tutorial-exercises-course
58+
```
59+
60+
Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.
61+
62+
3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo bc.json:
63+
64+
```sh
65+
$ npm i jest@24.8.0 -g
66+
$ learnpack start
67+
```
68+
69+
<p align="center">
70+
<img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
71+
</p>
72+
73+
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.
74+
75+
## ¿Cómo están organizados los ejercicios?
76+
77+
Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos:
78+
79+
1. **index.js:** representa el archivo de entrada para toda la aplicación.
80+
2. **README.md:** contiene las instrucciones de los ejercicios.
81+
3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio.
82+
83+
## Colaboradores
84+
85+
Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
86+
87+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
88+
89+
2. [David Hay (haydavid23)](https://github.com/haydavid23), contribución: (tests) ⚠️
90+
91+
3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍
92+
93+
Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!

‎README.md

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,35 @@
1111
</tr>
1212
</table>
1313

14-
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:
14+
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.
15+
16+
## You'll be learning the following concepts:
17+
18+
1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal stylesheet `<link>`.
1519

16-
1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal stylesheet `<link>`,
1720
2. Selecting HTML Elements from your website to apply the styles to.
21+
1822
3. Apply CSS Rules (styles) to those elements.
23+
1924
4. Use the most popular CSS Rules.
25+
2026
5. Learn the most popular CSS Tricks.
2127

22-
<h4>Before we start... other related tutorials</h4>
28+
#### Before we start... other related tutorials
29+
2330
<ol>
2431
<li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a></li>
25-
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a>← your are here now</li>
32+
<li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a></li>
33+
<li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a>← 🔥 your are here now</li>
34+
<li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Learn CSS Layouts</a></li>
2635
<li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Learn Bootstrap</a></li>
2736
</ol>
37+
2838
Complete selection of autograded CSS exercises, anyone interested in learning CSS!
2939

30-
<h2>One click installation:</h2>
40+
## One click installation:
3141

32-
<img src="https://gitpod.io/button/open-in-gitpod.svg" align="right">
42+
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
3343

3444
## Manual installation
3545

@@ -55,9 +65,7 @@ $ npm i jest@24.8.0 -g
5565
$ learnpack start
5666
```
5767

58-
<p align="center">
59-
<img src="https://raw.githubusercontent.com/4GeeksAcademy/react-exercises/master/preview.gif">
60-
</p>
68+
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.
6169

6270
## How are the exercises organized?
6371

@@ -71,9 +79,10 @@ Each exercise is a small react application containing the following files:
7179

7280
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
7381

74-
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:
75-
1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
82+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
83+
84+
2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, contribution: (coder), (translation) 🌎
85+
86+
3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍
7687

77-
This project follows the
78-
[all-contributors](https://github.com/kentcdodds/all-contributors)
79-
specification. Contributions of any kind are welcome!
88+
This project follows the[all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome!

0 commit comments

Comments
 (0)