changing layout, paths from relative to abolute

Author: ElviraQDP

exercises/01-welcome/README.es.md

@@ -1,7 +1,7 @@
 # `01` Bienvenid@
 
-Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr).  ¡¡ Estoy muy emocionado por tenerte aquí !! 🎉 😂
-Aprender a programar es duro ¡necesitas un coach! Mándame un DM por twitter si tienes preguntas.
+Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡¡ Estoy muy emocionado por tenerte aquí !! 🎉 😂
+Aprender a programar es dificl ¡necesitas un coach! Mándame un DM por twitter si tienes preguntas.
 
 Durante este curso aprenderás los siguientes conceptos:
 
@@ -13,6 +13,6 @@ Durante este curso aprenderás los siguientes conceptos:
 
 4. **Usar Módulos JS**: Separar tu código en diferentes archivos es la mejor forma de organizar y optimizar tus proyectos. 
 
-> :small_blue_diamond: Nosotros construimos los ejercicios incrementalmente, deberías sentir el progreso poco a poco, y esperamos que el incremento de la dificuldad entre los ejercicios nunca sea tan grande como para frustrarte.
+> 🔹 Nosotros construimos los ejercicios incrementalmente, deberías sentir el progreso poco a poco, y esperamos que el incremento de la dificuldad entre los ejercicios nunca sea tan grande como para frustrarte.
 
 Haz clic en `next` arriba de estas instrucciones para empezar con el primer ejercicio.

exercises/01-welcome/README.md

@@ -17,6 +17,6 @@ During this course you will be learning the following concepts:
 
 4. **Using JS Modules**: Splitting your code into different files is the best way to organize and optimize your projects. 
 
-> :small_blue_diamond: We built the exercises incrementally, you should feel the progress little by little, and hopefully, the difficulty raising between exercises will never be too big to get you frustrated.
+> 🔹 We built the exercises incrementally, you should feel the progress little by little, and hopefully, the difficulty raising between exercises will never be too big to get you frustrated.
 
 Click the `next` link on the top of these instructions to begin with the first exercise.

exercises/01.1-hello-world/README.es.md

@@ -8,9 +8,9 @@ La librería viene con una función llamada **ReactDOM.render** que tú puedes v
 
 La función `ReactDOM.render` recibe dos parámetros:
 
-1. Qué renderizar (el HTML interno o innerHTML).
+* Qué renderizar (el HTML interno o innerHTML).
 
-2. Dónde renderizarlo (elemento del DOM).
+* Dónde renderizarlo (elemento del DOM).
 
 
 Por ejemplo:
@@ -19,7 +19,7 @@ Por ejemplo:
 import React from 'react'; //importar la librería de react
 import ReactDOM from 'react-dom'; //importar react-dom para que react genere el html
 
-// QUE: Esta variable contiene todo el HTML que va a ser renderizado
+// QUE: esta variable contiene todo el HTML que va a ser renderizado
 let output = <span>James is 12 years old</span>
 
 // DONDE: Un elemento DOM que contendrá todo el html generado por react
@@ -39,7 +39,7 @@ myDiv.innerHTML = '<span>James is 12 years old</span>';
 ReactDOM.render(<span> James is 12 years old </span>, myDiv);
 ```
 
-# :pencil: Instrucciones:
+## 📝 Instrucciones:
 
 1. Abre el archivo `01.1-hello-world/app.jsx` y tómate un tiempo para entenderlo.
 

exercises/01.1-hello-world/README.md

@@ -40,9 +40,8 @@ myDiv.innerHTML = '<span>James is 12 years old</span>';
 
 // This is not you would do it with react.
 ReactDOM.render(<span> James is 12 years old </span>, myDiv);
-```
- 
-# :pencil: Instructions:
+``` 
+## 📝 Instructions:
 
 1. Open the `01.1-hello-world/app.jsx` file and take some time to understand it.
 

exercises/01.2-hello-jsx/README.es.md

@@ -11,6 +11,7 @@ Si quieres incluir tu variable en tu código HTML dinámicamente, puedes hacerlo
 ```jsx
 let output = <span> James is { age } years old </span>
 ```
+
 Fíjate en la posición de las llaves `{` y `}` envolviendo la variable.
 
 Después, podemos renderizar todo en contenido en el sitio web usando `ReactDOM.render` así:
@@ -30,10 +31,10 @@ El documento HTML del sitio web resultante se verá así:
 </div>
 ```
 
-Básicamente, ahora somos capaces de mezclar HTML y JS en el mismo documento sin tener que concatenar y usar strings. :smiley: ¡Increíble! :angry: ¿Verdad?
+Básicamente, ahora somos capaces de mezclar HTML y JS en el mismo documento sin tener que concatenar y usar strings. 😃 ¡Increíble! 😠 ¿Verdad?
 
-## :pencil: Instrucciones:
+## 📝 Instrucciones:
 
 El archivo app.jsx tiene una variable llamada `name` que puede contener un nombre.
 
-Por favor, incluye esa variable dentro del resultado(output) de react, reemplaza la variable con el `"James"`.
+1. Por favor, incluye esa variable dentro del resultado(output) de react, reemplaza la variable por el `James`.

exercises/01.2-hello-jsx/README.md

@@ -15,6 +15,7 @@ If you want to include the value of that variable into your HTML code dynamicall
 ```jsx
 let output = <span> James is { age } years old </span>
 ```
+
 Note the position of the curly brackets `{` and `}` wrapping the variable.
 
 Then, we can render the everything in the website content using `ReactDOM.render` like this:
@@ -34,10 +35,10 @@ The resulting website HTML document will look like this:
 </div>
 ```
 
-Basically, we are now able to mix HTML and JS in the same file without having to concatenate and use strings. :smiley: Amazing! :angry: right?
+Basically, we are now able to mix HTML and JS in the same file without having to concatenate and use strings. 😃 Amazing! 😠 right?
 
-## :pencil: Instructions:
+## 📝 Instructions:
 
 The app.jsx file has a variable called `name` that can contain a name.
 
-Please include that variable inside the react output, replace the variable with the hard coded `"James"`.
+1. Please include that variable inside the react output, replace the variable with the hard coded `James`.

exercises/01.3-rendering-from-objects/README.es.md

@@ -15,9 +15,9 @@ Para obtener cualquier propiedad del objeto `Customer` tenemos que usar el opera
 console.log(customer.first_name); // imprimirá "Bob" en la consola.
 ```
 
-# :pencil: Instrucciones:
+## 📝 Instrucciones:
 
-Abre el archivo `app.js` y crea el código necesario para hacer que tu archivo renderice la siguiente salida dentro del DOM:
+1. Abre el archivo `app.js` y crea el código necesario para hacer que tu archivo renderice la siguiente salida dentro del DOM:
 
 ```jsx
 <div>

exercises/01.3-rendering-from-objects/README.md

@@ -19,7 +19,7 @@ To retrieve any property from the `Customer` object we have to use the dot `.` o
 console.log(customer.first_name); // will print "Bob" on the console.
 ```
 
-# :pencil: Instructions:
+## 📝 Instructions:
 
 Open the `app.jsx` and create the necesary code to make your file render the following output into the DOM:
 

exercises/01.4-building-a-layout/README.es.md

@@ -4,7 +4,7 @@ Practiquemos un poco más el uso del JSX para crear HTML.
 
 Ahora tenemos otro objeto que es solo un poco más complejo que el anterior.
 
-# :pencil: Instrucciones:
+## 📝 Instrucciones:
 
 Tienes un objeto `data` que contiene la información de Bob Dylan (imagen, título, etc).
 
@@ -34,9 +34,10 @@ Aquí está el código HTML para crear una tarjeta en bootstrap:
  </div>
 </div>
 ```
+
 Fuente: [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/#example)
 
 ## Resultado esperado:
 
-![Bob Dylan Card](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/66b097ba2f1812e3cabcce38566b633edd991638/.learn/assets/1.4-1.png?raw=true)
+![Bob Dylan Card](../../.learn/assets/1.4-1.png?raw=true)
 

exercises/01.4-building-a-layout/README.md

@@ -8,7 +8,7 @@ Let's practice a little bit more about using JSX for creating HTML.
 
 Now we have another object that is just a bit more complex than the last one.
 
-# :pencil: Instructions:
+## 📝 Instructions:
 
 You have a `data` object that contains Bob Dylan's information (image, title, etc).
 
@@ -26,7 +26,9 @@ const data = {
 
 1. Use the information contained in `data` to render a bootstrap card, for example: The card's title will be the `data.cardTitle`, etc.
 
-Here is the HTML code for creating a card in bootstrap:
+## 💡 Hint:
+
++ Here is the HTML code for creating a card in bootstrap:
 
 ```html
 <div class="card m-5">
@@ -38,11 +40,12 @@ Here is the HTML code for creating a card in bootstrap:
  </div>
 </div>
 ```
+
 Source: [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/#example)
 
-### Expected result:
+## Expected result:
 
-![Bob Dylan Card](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/66b097ba2f1812e3cabcce38566b633edd991638/.learn/assets/1.4-1.png?raw=true)
+![Bob Dylan Card](../../.learn/assets/1.4-1.png?raw=true)