Skip to content

Commit d1b2b8f

Browse files
LorenagubairaLorenagubaira
committed
the structure of the readmes 01-07 weremodified
1 parent a01816a commit d1b2b8f

File tree

24 files changed

+202
-113
lines changed

24 files changed

+202
-113
lines changed

‎.learn/assets/01.2-Like-Word.es.png

9.85 KB
Loading

‎.learn/assets/02-website-structure.png

-54.3 KB
Loading

‎.learn/assets/03-hello-without-head.png

-10.6 KB
Loading

‎.learn/assets/05-create-anchors.es.png

6.64 KB
Loading

‎.learn/assets/05-create-anchors.png

-111 KB
Loading

‎.learn/assets/preview.es-01.1.png

10.7 KB
Loading

‎exercises/00-welcome/README.es.md

+25-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
intro: "https://www.youtube.com/watch?v=tVlYr0hRiRM"
33
---
4-
# `00` Welcome
4+
# Welcome!
5+
6+
Te damos la bienvenida al mundo del HTML 🖖🧑‍💻
57

6-
Te damos la bienvenida al mundo de HTML 🖖🧑‍💻
8+
## 💬 Fundamentos:
79

8-
Hola, mi nombre es [Alejandro Sanchez](https://twitter.com/alesanchezr).
9-
10-
He preparado estos ejercicios para cualquier persona interesada en aprender HTML desde cero, repasaremos los siguientes conceptos:
10+
Hemos preparado estos ejercicios para cualquier persona interesada en aprender HTML desde cero. Durante este curso, repasaremos los siguientes conceptos:
1111

1212
1. Familiarizarse con la mayoría de las etiquetas HTML más populares.
1313

@@ -17,23 +17,33 @@ He preparado estos ejercicios para cualquier persona interesada en aprender HTML
1717

1818
4. La etiqueta HTML de audio y video.
1919

20-
## ➡️ Sobre los ejercicios
20+
## Lecturas Útiles:
21+
22+
+ [https://www.w3schools.com/html/html_intro.asp](https://www.w3schools.com/html/html_intro.asp)
23+
24+
+ [https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics](https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics)
25+
26+
## Video Útil:
27+
28+
+ [https://youtu.be/10GHKjgQIR0](https://youtu.be/10GHKjgQIR0)
29+
30+
## Colaboradores:
2131

22-
- He desarrollado los ejercicios de forma incremental, así sentirás como vas aprendiendo poco a poco cosas nuevas.
32+
Gracias a estas maravillosas personas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
2333

24-
- ¡No te frustres! Pregúntanos por Slack en el canal #public_support o en privado siguiendo [estos pasos](https://content.breatheco.de/es/how-to/ask)
34+
1. [Alejandro Sánchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentación) :book:
2535

26-
**Estás aquí para aprender desde 0 y todo 4Geeks Academy está aquí para ayudarte.**
36+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) :computer:, (build-tests) :warning:
2737

28-
- Algunos ejercicios se corrigen automáticamente. Por favor comprende que hay diferentes maneras de llegar a una solución correcta.
38+
3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribución: (traducción) :earth_africa:
2939

30-
- Lo importante de este prework es que le pierdas el miedo a la programación y te familiarices con el entorno.
40+
Este proyecto sigue las especificaciones: [all-contributors](https://github.com/kentcdodds/all-contributors).
3141

32-
Haz click en el botón `next` en la parte superior de estas instrucciones para comenzar con el primer ejercicio.
42+
¡Todas las contribuciones son bienvenidas!
3343

44+
> 🔹 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.
3445
35-
## ➡️ Agradecimientos:
46+
Nota: ¡No te frustres! Pregúntanos por Slack en el canal #public_support o en privado siguiendo [estos pasos](https://content.breatheco.de/es/how-to/ask).
3647

37-
- Los ejercicios que se corrigen automáticamente es gracias a [@haydavid23](https://github.com/haydavid23).
48+
➡️ Haz clic en `next` arriba de estas instrucciones para empezar con el primer ejercicio...
3849

39-
- Las video-soluciones en español son gracias a [@danimachota](https://twitter.com/danimachota).

‎exercises/00-welcome/README.md

+25-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
intro: "https://www.youtube.com/watch?v=Vd2dby9ind4"
33
---
4-
# `00` Welcome
4+
# Welcome!
55

66
Welcome to the world of HTML 🖖🧑‍💻
77

8-
Hello, my name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr).
8+
## 💬 Fundamentals:
99

10-
I have prepared this exercises for anyone interested in learning HTML from scratch, we will go over the following concepts:
10+
We have prepared these exercises for anyone interested in learning HTML from scratch. During this course we will go over the following concepts:
1111

1212
1. Get familiar with most of the most popular HTML Tags.
1313

@@ -17,23 +17,35 @@ I have prepared this exercises for anyone interested in learning HTML from scrat
1717

1818
4. The HTML audio and video tag.
1919

20-
## ➡️ About the exercises
20+
## Useful Readings:
2121

22-
- I have developed the exercises in a incremental way in order to make you learn new concepts step by step.
22+
+ [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
2323

24-
- Don't get frustrated! Ask any question in the #public_support channel or by private message following [this steps](https://content.breatheco.de/es/how-to/ask).
24+
+ [https://www.w3schools.com/html/html_intro.asp](https://www.w3schools.com/html/html_intro.asp)
2525

26-
**You are here to learn from scratch and everyone in 4Geeks Academy is here to help you.**
26+
## Useful Video:
2727

28+
+ [https://youtu.be/u0OeZfIfBRI](https://youtu.be/u0OeZfIfBRI)
2829

29-
- Some assignments are automatically corrected. Please understand that there are several ways to find the correct answer.
30+
## Contributors:
3031

31-
- The main point of this prework is that you become more confident with programming and get used to the environment.
32+
Thanks to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
3233

33-
Click the `next` link on the top of these instructions to begin with the first exercise.
34+
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:
35+
36+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
37+
38+
3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (translator) :earth_africa:
39+
40+
This project follows these specifications: [all-contributors](https://github.com/kentcdodds/all-contributors)
41+
42+
Contributions of any kind are welcome!
43+
44+
> 🔹 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.
45+
46+
Note: Don't get frustrated! Ask any question in the #public_support channel or by private message following [this steps](https://content.breatheco.de/es/how-to/ask).
47+
48+
➡️ Click the `next` button on the top of these instructions to begin with the first exercise...
3449

35-
## ➡️ Acknowledge:
3650

37-
- Exercises that are automatically corrected are thanks to [@haydavid23](https://github.com/haydavid23).
3851

39-
- The video solutions have been translated to spanish thanks to [@d4rkm0nst3r](https://github.com/d4rkm0nst3r).

‎exercises/01-hello-world/README.es.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `01` Hello World
22

3-
HTML es un languaje de markup, lo que significa que todo lo que se escribe debe estar encerrado en `<tags>` (etiquetas) de apertura y cierre como esta:
3+
HTML es un languaje de markup, lo que significa que todo lo que se escribe debe estar encerrado en `<tags>` (etiquetas) de apertura y cierre, como estas:
44

55
```html
66
<span>Hola, Yo soy un texto</span>
@@ -9,12 +9,12 @@ HTML es un languaje de markup, lo que significa que todo lo que se escribe debe
99

1010
## 📝 Instrucciones:
1111

12-
1. `Elimina` todo el cotenido actual de la página y `agrega` estas etiquetas en el HTML de tu sitio web y presiona "build" para ver los resultados.
12+
1. `Elimina` todo el cotenido actual de la página, `agrega` las etiquetas anteriores en el HTML de tu sitio web y presiona "build" para ver los resultados.
1313

1414
![Build](../../.learn/assets/build.png?raw=true)
1515

16-
# 💻 Vista previa
16+
## 💻 Resultado Esperado:
1717

18-
Su sitio web final debería ser algo como esto:
18+
Tu sitio web final debería ser algo como esto:
1919

20-
![Preview for 01.1 HTML Exercises](../../.learn/assets/preview-01.1.png?raw=true)
20+
![Preview for 01.1 HTML Exercises](../../.learn/assets/preview.es-01.1.png?raw=true)

‎exercises/01-hello-world/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=s0WhMNU8qZ0"
44

55
# `01` Hello World
66

7-
HTML is a markup language, meaning that everything you type must be wraped in opening and closing `<tags>` like this:
7+
HTML is a markup language, meaning that everything you type must be wraped in opening and closing `<tags>`, like this:
88

99
```html
1010
<span>Hello, I am a text</span>
@@ -13,12 +13,12 @@ HTML is a markup language, meaning that everything you type must be wraped in op
1313

1414
## 📝 Instructions:
1515

16-
1. Please `remove` the current website content and `add` this two tags to your website HTML and press "build" to see the results.
16+
1. Please `remove` the current website content, `add` the above tags to your website HTML and press "build" to see the results.
1717

1818
![Build](../../.learn/assets/build.png?raw=true)
1919

20-
## 💻 Preview:
20+
## 💻 Expected Result:
2121

22-
You final website should be something like this:
22+
Your final website should be something like this:
2323

2424
![Preview for 01.1 HTML Exercises](../../.learn/assets/preview-01.1.png?raw=true)

‎exercises/01.1-like-word/README.es.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ tutorial: "https://www.youtube.com/watch?v=oFswWx9ba14"
33
---
44
# `01.1` Like Word
55

6-
HTML fue creado inicialmente para publicar documentos, es por eso que sus `<etiquetas>` (tags) son similares a los elementos típicos que ves en un documento:
6+
HTML fue creado inicialmente para publicar documentos, es por eso que sus `<tags>` (etiquetas) son similares a los elementos típicos que ves en un documento:
77

88
| Nombre Etiqueta | Uso |
99
| -------- | -------- |
1010
| `<p>` | Para agregar párrafos |
1111
| `<strong>` | Texto en negrita |
12-
| `<h1>` | Titulos con mayor importancia (más grandes) |
13-
| `<h2>` | Subtitulos (más pequeños)|
12+
| `<h1>` | Títulos con mayor importancia (más grandes) |
13+
| `<h2>` | Subtítulos (más pequeños)|
1414
| `<a>` | Links o enlaces (anchors) |
1515

1616
## 📝 Instrucciones:
1717

1818
1. Agrega una etiqueta `<p>` a tu sitio web que diga: las etiquetas HTML son similares a los elementos de MS Word.
1919

20-
## 💻 Vista Previa:
20+
## 💻 Resultado Esperado:
2121

22-
![01.1 Preview HTML Exercises](../../.learn/assets/01.2-Like-Word.png?raw=true)
22+
![01.1 Preview HTML Exercises](../../.learn/assets/01.2-Like-Word.es.png?raw=true)

‎exercises/01.1-like-word/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `01.1` Like Word
22

3-
HTML was initially created for the purpose of publishing documents, that is why its `<tags>` are similar to the typical elements you see in a document:
3+
HTML was initially created with the purpose of publishing documents, that is why its `<tags>` are similar to the typical elements you see in a document:
44

55
| Tag name | Use case |
66
| -------- | -------- |
@@ -14,6 +14,6 @@ HTML was initially created for the purpose of publishing documents, that is why
1414

1515
1. Please add a `<p>` tag to your website that says: HTML tags are similar to MS Word elements.
1616

17-
## 💻 Preview:
17+
## 💻 Expected Result:
1818

1919
![01.1 Preview HTML Exercises](../../.learn/assets/01.2-Like-Word.png?raw=true)

‎exercises/02-website-structure/README.es.md

+17-12
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,27 @@ tutorial: "https://www.youtube.com/watch?v=9OB2RPWHYgw"
99

1010
2. Agrega "Hello World" dentro de la etiqueta del título (title) del sitio web.
1111

12-
```md
13-
⚠️️️️ Cuidado
14-
Nota: El título del sitio web aparece en la pestaña del sitio web (arriba en el navegador)
15-
```
12+
## 💻 Resultado Esperado:
1613

17-
## 💡 Pista:
14+
![Website title example](../../.learn/assets/02-website-structure.png?raw=true)
1815

19-
+ Puedes leer sobre la estructura típica de un sitio web aquí
20-
https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure
16+
## 💡 Pistas:
2117

22-
### 📎 Nota
18+
+ La estructura debería de verse algo asi:
2319

24-
```txt
25-
El título no se mostrará en el contenido del sitio web, se mostrará en la pestaña del navegador.
20+
```md
21+
<!DOCTYPE html>
22+
<html>
23+
<head>
24+
<title> <!--Aquí irá el título--> </title>
25+
</head>
26+
</html>
2627
```
2728

28-
## 💻 Vista previa:
29+
+ Puedes leer sobre la estructura típica de un sitio web aquí: [https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure](https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure)
30+
31+
## 🔎 Importante:
32+
33+
+ El título del sitio web aparece en la pestaña del sitio web (arriba en el navegador).
34+
2935

30-
![Website title example](../../.learn/assets/02-website-structure.png?raw=true)

‎exercises/02-website-structure/README.md

+16-12
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,26 @@ tutorial: "https://www.youtube.com/watch?v=XMiG5UhV1n0"
99

1010
2. Add "Hello World" inside the title tag for the website.
1111

12-
```md
13-
⚠️️️️ Warning
14-
Note: The title of the website shows up on the website tab
15-
```
12+
## 💻 Expected Result:
1613

17-
## 💡 Hint
14+
![Website title example](../../.learn/assets/02-website-structure.png?raw=true)
1815

19-
+ You can read about a typical website structure here
20-
https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure
16+
## 💡 Hints:
2117

22-
### 📎 Note:
18+
+ The structure should look something like this:
2319

24-
```txt
25-
The title is not going to show on the content of the website, it will show on the browser tab.
20+
```md
21+
<!DOCTYPE html>
22+
<html>
23+
<head>
24+
<title> <!--The title goes here--> </title>
25+
</head>
26+
</html>
2627
```
2728

28-
## 💻 Preview:
29+
+ You can read about a typical website structure here: [https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure](https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure)
30+
31+
## 🔎 Important:
32+
33+
+ The title of the website shows up on the website tab.
2934

30-
![Website title example](../../.learn/assets/02-website-structure.png?raw=true)

‎exercises/03-hello-without-head/README.es.md

+16-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,25 @@
22

33
En el último ejercicio tuviste que agregar toda la estructura básica HTML de un sitio web.
44

5-
## 📝 Instrucciones:
5+
Haz lo mismo en este ejercicio, pero no incluyas la etiqueta `<head>`.
66

7-
Haz lo mismo en este ejercicio, pero no incluyas la etiqueta HEAD.
7+
## 📝 Instrucciones:
88

99
1. Agrega al `<body>` un título `H1` con tu nombre.
1010

11-
## Resultado esperado:
11+
## 💻 Resultado esperado:
1212

1313
![Link url](../../.learn/assets/03-hello-without-head.png?raw=true)
14+
15+
## 💡 Pista:
16+
17+
+ La estructura debería de verse algo asi:
18+
19+
```md
20+
<!DOCTYPE html>
21+
<html>
22+
<body>
23+
<h1><!--Aquí irá tu nombre--></h1>
24+
</body>
25+
</html>
26+
```

‎exercises/03-hello-without-head/README.md

+17-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,25 @@ tutorial: "https://www.youtube.com/watch?v=xSCGPQCzYw4"
66

77
On the last exercise you had to add all the HTML basic structure of a website.
88

9-
## 📝 Instructions:
9+
Do the same for this exercise, but don't include the `<head>` tag.
1010

11-
Do the same for this exercise, but don't include the HEAD tag.
11+
## 📝 Instructions:
1212

13-
1. Add into the body an H1 heading with your name on it.
13+
1. Add into the `<body>` an `H1` heading with your name on it.
1414

15-
## Expected result:
15+
## 💻 Expected result:
1616

1717
![Link url](../../.learn/assets/03-hello-without-head.png?raw=true)
18+
19+
## 💡 Hint:
20+
21+
+ The structure should look something like this:
22+
23+
```md
24+
<!DOCTYPE html>
25+
<html>
26+
<body>
27+
<h1><!--The name goes here--></h1>
28+
</body>
29+
</html>
30+
```

‎exercises/04-list-of-reasons/README.es.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ tutorial: "https://www.youtube.com/watch?v=Mp4bF6rs3us"
33
---
44
# `04` List of Reasons
55

6+
Ahora vamos a aprender a usar el tag `<ol>`. Este lo utilizamos cuando queremos definir un orden de lista (numérica o alfabéticamente).
7+
68
Para este ejercicio ya hemos agregado la estructura básica HTML.
79

810
## 📝 Instrucciones:
911

10-
1. Por favor agrega al `<body>` una lista ordenada `<ol>` con 6 elementos, donde cada uno es un motivo para convertirse en desarrollador web.
12+
1. Por favor agrega al `<body>` una lista ordenada `<ol>` con 6 elementos, donde cada uno sea un motivo para convertirse en un desarrollador web.
1113

12-
## Resultado esperado:
14+
## 💻 Resultado Esperado:
1315

1416
![List of li's](../../.learn/assets/04-list-of-reasons.png?raw=true)

‎exercises/04-list-of-reasons/README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ tutorial: "https://www.youtube.com/watch?v=IH1hAxMGRcw"
44

55
# `04` List of Reasons
66

7-
For this exercise we have aded the HTML basic structure already.
7+
Now we are going to learn how to use de `<ol>` tag. We use this when we want to define a list order (numerically or alphabetically).
8+
9+
For this exercise we have already added the HTML basic structure.
810

911
## 📝 Instructions:
1012

1113
1. Please add into the `<body>` an ordered list `<ol>` with 6 items, each item being a reason to become a web developer.
1214

13-
## Expected result:
15+
## 💻 Expected Result:
1416

1517
![List of li's](../../.learn/assets/04-list-of-reasons.png?raw=true)

0 commit comments

Comments
 (0)