9 |
10 |
11 |
--------------------------------------------------------------------------------
/exercises/08-relative-vs-absolute-path/solution.hide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
9 |
10 |
11 |
--------------------------------------------------------------------------------
/exercises/14-video-tag/solution.hide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | The learning essay
9 |3 signals you know you are learning
10 |Here are the 3 most common signs that shows you are learning
11 |-
12 |
- You are able to complete the exercises by yourself. 13 |
- You understand what the teacher is talking about. 14 |
- You are able to have conversations about the topic. 15 |
3 reasons you love what you are learning
17 |-
18 |
- Time passes fast. 19 |
- You are anxious to finish this exercise and start the next one. 20 |
- It's 12am and you don't want to go to sleep. 21 |
- tag inside the tag.', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let ol = body.querySelector("ol")
13 | expect(ol).toBeTruthy();
14 | })
15 |
16 | it('The
- inside.', function () {
17 | let body = document.querySelector("body");
18 | expect(body).toBeTruthy();
19 |
20 | let ol = body.querySelector("ol");
21 | expect(ol).toBeTruthy();
22 |
23 | let lis = ol.querySelectorAll('li');
24 | expect(lis.length).toBe(6);
25 | })
26 |
--------------------------------------------------------------------------------
/exercises/01-hello-world/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=979yVLquF9Y"
3 | ---
4 |
5 | # `01` Hello World
6 |
7 | HTML is a markup language, meaning that everything you type must be wrapped in opening and closing `
`, like this: 8 | 9 | ```html 10 | Hello, I am a text 11 | Hello, I am also a text but in bold 12 | ``` 13 | 14 | ## 📝 Instructions: 15 | 16 | 1. Please **remove** the current website content, **add** the above tags to your website HTML and press "**run**" to see the results. 17 | 18 | 19 | ## 💻 Expected Result: 20 | 21 | Your final website should be something like this: 22 | 23 |  24 | 25 | ## 💡 Hint: 26 | 27 | + You only have to remove what the file already has and paste the code from the instructions. 28 | -------------------------------------------------------------------------------- /exercises/01.1-like-word/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=PFY7o_z8L2I" 3 | --- 4 | # `01.1` Like Word 5 | 6 | HTML fue creado inicialmente para publicar documentos, es por eso que sus ` ` (etiquetas) son similares a los elementos típicos que ves en un documento: 7 | 8 | | Nombre Etiqueta | Uso | 9 | | -------- | -------- | 10 | | ` ` | Para agregar párrafos | 11 | | `` | Texto en negrita | 12 | | `
` | Títulos con mayor importancia (más grandes) | 13 | | `
` | Subtítulos (más pequeños)| 14 | | `` | Links o enlaces (anchors) | 15 | | `
- ` | Listas con viñetas |
16 |
17 | ## 📝 Instrucciones:
18 |
19 | 1. Agrega una etiqueta `
- Don't like to read long texts. 26 |
- Have the attention span of a bird. 27 |
- Skip long paragraphs straight to the bullet points. 28 |
- `, `
` tags. 18 | 19 | + Here is the text so you don't have to type it: 20 | 21 | ```md 22 | The learning essay 23 | 24 | 3 signals you know you are learning 25 | 26 | Here are the 3 most common signs that shows you are learning 27 | 28 | + You are able to complete the exercises by yourself. 29 | + You understand what the teacher is talking about. 30 | + You are able to have conversations about the topic. 31 | 32 | 3 reasons you love what you are learning 33 | 34 | + Time passes fast. 35 | + You are anxious to finish this exercise and start the next one. 36 | + It's 12am and you don't want to go to sleep. 37 | ``` 38 | -------------------------------------------------------------------------------- /exercises/01-hello-world/tests.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 4 | document.documentElement.innerHTML = html.toString(); 5 | 6 | jest.dontMock('fs'); 7 | 8 | it('Add a tag.', function () { 9 | let span = document.querySelector("span"); 10 | expect(span).toBeTruthy(); 11 | }); 12 | 13 | it('Add a tag.', function () { 14 | let strong = document.querySelector("strong"); 15 | expect(strong).toBeTruthy(); 16 | }); 17 | 18 | it('The tag should have inside "hello, i am a text"', function () { 19 | let span = document.querySelector("span"); 20 | expect(span).toBeTruthy(); 21 | expect(span.innerHTML.toLowerCase()).toContain("hello, i am a text") 22 | }); 23 | 24 | it('The tag should have inside "hello, i am also a text but in bold"', function () { 25 | let strong = document.querySelector("strong"); 26 | expect(strong).toBeTruthy(); 27 | expect(strong.innerHTML.toLowerCase()).toContain("hello, i am also a text but in bold") 28 | }); 29 | -------------------------------------------------------------------------------- /exercises/10-replicate-html/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=DHSX-rZ5ayk" 3 | --- 4 | 5 | # `10` Replicate HTML 6 | 7 | Esta es una imagen de un documento HTML que realizamos. 8 | 9 |  10 | 11 | ## 📝 Instrucciones: 12 | 13 | 1. Por favor, escribe el código HTML necesario para replicar la imagen anterior. 14 | 15 | ## 💡 Pistas: 16 | 17 | + Debes utilizar las etiquetas `
`, `
`, `
- `, `
- `, `
`. 18 | 19 | + Aquí está el texto para que no tengas que escribirlo todo: 20 | 21 | ```md 22 | The learning essay 23 | 24 | 3 signals you know you are learning 25 | 26 | Here are the 3 most common signs that shows you are learning 27 | 28 | + You are able to complete the exercises by yourself. 29 | + You understand what the teacher is talking about. 30 | + You are able to have conversations about the topic. 31 | 32 | 3 reasons you love what you are learning 33 | 34 | + Time passes fast. 35 | + You are anxious to finish this exercise and start the next one. 36 | + It's 12am and you don't want to go to sleep. 37 | ``` 38 | -------------------------------------------------------------------------------- /exercises/04-list-of-reasons/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=ej4ndZOXkm0" 3 | --- 4 | 5 | # `04` List of Reasons 6 | 7 | Now we are going to learn how to use the `
- ` tag. We use this when we want to define an ordered list (numerically or alphabetically).
8 |
9 | For this exercise we have already added the basic HTML structure.
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Please add into the `` an ordered list `
- `, each item being a reason to become a web developer.
14 |
15 | ## 💻 Expected Result:
16 |
17 | 
18 |
19 | ## 💡 Hints:
20 |
21 | + Add the `
- ` with the 6 `
- ` (For each of the list's items).
22 |
23 | + Here is more information about HTML lists: [https://www.w3schools.com/html/html_lists.asp](https://www.w3schools.com/html/html_lists.asp)
24 |
25 | + Here you can read about 6 good reasons why to become a web developer: [https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer](https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer).
26 |
--------------------------------------------------------------------------------
/exercises/06-new-window/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | document.documentElement.innerHTML = html.toString();
5 |
6 | jest.dontMock('fs');
7 |
8 | it('You should create an tag inside the tag.', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let a = body.querySelector("a");
13 | expect(a).toBeTruthy();
14 | })
15 |
16 | it('The tag should have google\'s link as the "href".', function () {
17 | let body = document.querySelector("body");
18 | expect(body).toBeTruthy();
19 |
20 | let a = body.querySelector("a");
21 | expect(a).toBeTruthy();
22 |
23 | expect(a.href).toContain("https://google.com");
24 | })
25 |
26 | it('The tag should have the attribute target with "_blank" as value.', function () {
27 | let body = document.querySelector("body");
28 | expect(body).toBeTruthy();
29 |
30 | let a = body.querySelector("a");
31 | expect(a).toBeTruthy();
32 |
33 | expect(a.target).toBe("_blank");
34 | })
--------------------------------------------------------------------------------
/exercises/04-list-of-reasons/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=Gbh21o4wsJg"
3 | ---
4 | # `04` List of Reasons
5 |
6 | Ahora vamos a aprender a usar el tag `
- `. Este lo utilizamos cuando queremos definir un orden de lista (numérica o alfabéticamente).
7 |
8 | Para este ejercicio ya hemos agregado la estructura básica HTML.
9 |
10 | ## 📝 Instrucciones:
11 |
12 | 1. Por favor agrega al `` una lista ordenada `
- `, donde cada uno sea un motivo para convertirse en un desarrollador web.
13 |
14 | ## 💻 Resultado Esperado:
15 |
16 | 
17 |
18 | ## 💡 Pistas:
19 |
20 | + Agrega la etiqueta `
- ` con sus 6 respectivos `
- ` (Para cada elemento de la lista). 21 | 22 | + Aquí puedes leer más sobre listas: [https://www.w3schools.com/html/html_lists.asp](https://www.w3schools.com/html/html_lists.asp) 23 | 24 | + 6 buenas razones para convertirte en desarrollador web: [https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer](https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer). 25 | -------------------------------------------------------------------------------- /exercises/07-same-page/tests.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 4 | document.documentElement.innerHTML = html.toString(); 5 | 6 | jest.dontMock('fs'); 7 | 8 | it('There should be 2 tags inside the tag.', function () { 9 | let body = document.querySelector("body"); 10 | expect(body).toBeTruthy(); 11 | 12 | let a = body.querySelectorAll("a"); 13 | expect(a.length).toBe(2); 14 | }) 15 | 16 | it('The first tag should have an "href" pointing to the id "#lowerSide".', function () { 17 | let body = document.querySelector("body"); 18 | expect(body).toBeTruthy(); 19 | 20 | let a = body.querySelectorAll("a")[0]; 21 | expect(a).toBeTruthy(); 22 | 23 | expect(a.href).toContain("#lowerSide"); 24 | }) 25 | 26 | it('The second tag should have an "href" pointing to the id "#upperSide".', function () { 27 | let body = document.querySelector("body"); 28 | expect(body).toBeTruthy(); 29 | 30 | let a = body.querySelectorAll("a")[1]; 31 | expect(a).toBeTruthy(); 32 | 33 | expect(a.href).toContain("#upperSide"); 34 | }) -------------------------------------------------------------------------------- /exercises/15-iframe/tests.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 4 | document.documentElement.innerHTML = html.toString(); 5 | 6 | jest.dontMock('fs'); 7 | 8 | it('You should create an
- ` con 6 elementos `
- `, donde cada uno sea un motivo para convertirse en un desarrollador web.
13 |
14 | ## 💻 Resultado Esperado:
15 |
16 | 
17 |
18 | ## 💡 Pistas:
19 |
20 | + Agrega la etiqueta `
- ` (For each of the list's items).
22 |
23 | + Here is more information about HTML lists: [https://www.w3schools.com/html/html_lists.asp](https://www.w3schools.com/html/html_lists.asp)
24 |
25 | + Here you can read about 6 good reasons why to become a web developer: [https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer](https://www.indeed.com/career-advice/finding-a-job/reasons-to-become-web-developer).
26 |
--------------------------------------------------------------------------------
/exercises/06-new-window/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | document.documentElement.innerHTML = html.toString();
5 |
6 | jest.dontMock('fs');
7 |
8 | it('You should create an tag inside the tag.', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let a = body.querySelector("a");
13 | expect(a).toBeTruthy();
14 | })
15 |
16 | it('The tag should have google\'s link as the "href".', function () {
17 | let body = document.querySelector("body");
18 | expect(body).toBeTruthy();
19 |
20 | let a = body.querySelector("a");
21 | expect(a).toBeTruthy();
22 |
23 | expect(a.href).toContain("https://google.com");
24 | })
25 |
26 | it('The tag should have the attribute target with "_blank" as value.', function () {
27 | let body = document.querySelector("body");
28 | expect(body).toBeTruthy();
29 |
30 | let a = body.querySelector("a");
31 | expect(a).toBeTruthy();
32 |
33 | expect(a.target).toBe("_blank");
34 | })
--------------------------------------------------------------------------------
/exercises/04-list-of-reasons/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=Gbh21o4wsJg"
3 | ---
4 | # `04` List of Reasons
5 |
6 | Ahora vamos a aprender a usar el tag `
- ` with 6 items `
- `, each item being a reason to become a web developer.
14 |
15 | ## 💻 Expected Result:
16 |
17 | 
18 |
19 | ## 💡 Hints:
20 |
21 | + Add the `
- `, `
- `, `
` a tu sitio web que diga: `HTML tags are similar to MS Word elements`. 20 | 21 | ## 💻 Resultado Esperado: 22 | 23 |  24 | -------------------------------------------------------------------------------- /exercises/01.1-like-word/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=sPcd9egcDak" 3 | --- 4 | 5 | # `01.1` Like Word 6 | 7 | HTML was initially created with the purpose of publishing documents, that is why its `
` are similar to the typical elements you see in a document: 8 | 9 | | Tag name | Use case | 10 | | -------- | -------- | 11 | | ` ` | To add paragraphs | 12 | | `` | Text in bold (stronger) | 13 | | `
` | Heading with the most importance (bigger) | 14 | | `
` | Heading with the second importance (smaller) | 15 | | `` | Links or anchors | 16 | | `
- ` | Unordered Lists (Just the bullets) |
17 |
18 | ## 📝 Instructions:
19 |
20 | 1. Please add a `
` tag to your website that says: `HTML tags are similar to MS Word elements`. 21 | 22 | ## 💻 Expected Result: 23 | 24 |  25 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | By accessing Breathe Code we assume you accept these terms and conditions. Do not continue to use Breathe Code's content, applications or tutorials if you do not agree to take all of the terms and conditions stated on this page. 2 | 3 | Unless otherwise stated, Breathe Code and/or its licensors own the intellectual property rights for all material on Breathe Code. All intellectual property rights are reserved. You may access this from Breathe Code for your own personal use subjected to restrictions set in these terms and conditions. 4 | 5 | You must not: 6 | 7 | * Republish material from Breathe Code 8 | * Sell, rent or sub-license material from Breathe Code 9 | * Reproduce, duplicate or copy material from Breathe Code 10 | * Redistribute content from Breathe Code 11 | 12 | You can read the full version of Breathe Code's terms and conditions here: [Terms and Conditions](http://breatheco.de/terms-and-conditions) 13 | -------------------------------------------------------------------------------- /exercises/13-image-with-text/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |4Geeks Academy 5 | 6 | 7 | 8 |9 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /exercises/01-hello-world/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=rEs6-k7un3o" 3 | --- 4 | # `01` Hello World 5 | 6 | HTML es un lenguaje de marcado, lo que significa que todo lo que se escribe debe estar encerrado en `10 | 20 |11 | 13 |
12 | 14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio, sapiente eaque, quod deleniti facere odio reiciendis 15 | molestiae iusto voluptates voluptas, dicta doloremque rerum excepturi deserunt exercitationem sunt atque ratione. Lorem ipsum 16 | dolor, sit amet consectetur adipisicing elit. Aspernatur doloremque, asperiores dolorum fuga eaque quisquam alias quasi 17 | perspiciatis beatae magnam pariatur excepturi incidunt mollitia labore at ex unde quo necessitatibus. 18 | 19 |` (etiquetas) de apertura y cierre, como estas: 7 | 8 | ```html 9 | Hello, I am a text 10 | Hello, I am also a text but in bold 11 | ``` 12 | 13 | ## 📝 Instrucciones: 14 | 15 | 1. **Elimina** todo el contenido actual de la página, **agrega** las etiquetas anteriores en el HTML de tu sitio web y presiona "**ejecutar**" para ver los resultados. 16 | 17 | ## 💻 Resultado Esperado: 18 | 19 | Tu sitio web final debería ser algo como esto: 20 | 21 |  22 | 23 | ## 💡 Pista: 24 | 25 | + Sólo debes quitar lo que tiene el archivo actualmente y pegar el código dado en las instrucciones. 26 | -------------------------------------------------------------------------------- /exercises/07-same-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 4Geeks Academy 5 | 6 | 7 |This is the upper side of the website
8 | 9 | Go to the lower side! 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 | 38 |This is the lower side of the website
39 | 40 | 41 | -------------------------------------------------------------------------------- /exercises/01.1-like-word/tests.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 4 | document.documentElement.innerHTML = html.toString(); 5 | 6 | jest.dontMock('fs'); 7 | 8 | it('You should create atag.', function () { 9 | let p = document.querySelector("p") 10 | expect(p).toBeTruthy(); 11 | }); 12 | 13 | it('The
tag should have the expected value.', function () { 14 | let p = document.querySelector("p") 15 | expect(p).toBeTruthy(); 16 | expect(p.innerHTML.toLowerCase()).toContain("html tags are similar to ms word elements") 17 | }); 18 | 19 | it('Add "HTML tags are similar to MS Word elements" between the
tags →
HERE
', function () { 20 | let p = document.querySelector("p") 21 | const _regex = /\s*HTML\s*tags\s*are\s*similar\s*to\s*MS\s*Word\s*elements\s*/gm; 22 | expect(_regex.test(p.innerHTML)).toBe(true); 23 | }); 24 | -------------------------------------------------------------------------------- /exercises/09-formatting-Text/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |4Geeks Academy 5 | 12 | 13 | 14 | 15 |This will be your heading
16 |Then, you start talking about some interesting stuff that nobody wants to read
17 |Then you can quote someone to add credibility:
18 |19 | A quotation is a handy thing to have about, saving one the trouble of thinking 20 |
23 |
21 | - A.A. Milne, If I May 22 |After all, new generations have these things in common:
24 |-
25 |
<!--The title goes here--> 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | 32 | + You can read about a typical website structure here: [https://4geeks.com/lesson/what-is-html-learn-html#page-structure](https://4geeks.com/lesson/what-is-html-learn-html#page-structure) 33 | 34 | ## 🔎 Important: 35 | 36 | + The title of the website shows up on the website tab. 37 | 38 | -------------------------------------------------------------------------------- /exercises/07-same-page/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |4Geeks Academy 5 | 6 | 7 |This is the upper side of the website
8 | 9 | Go to the lower side! 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 | Go to the upper side! 38 |This is the lower side of the website
39 | 40 | 41 | -------------------------------------------------------------------------------- /exercises/02-website-structure/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=9OB2RPWHYgw" 3 | --- 4 | # `02` Website Structure 5 | 6 | ## 📝 Instrucciones: 7 | 8 | 1. Agrega la estructura HTML básica para cualquier sitio web (doctype, html, head y body). 9 | 10 | 2. Agrega "Hello World" dentro de la etiqueta del título (title) del sitio web. 11 | 12 | ## 💻 Resultado Esperado: 13 | 14 |  15 | 16 | ## 💡 Pistas: 17 | 18 | + La estructura debería de verse algo así: 19 | 20 | ```md 21 | 22 | 23 | 24 |<!-- El título va aquí --> 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | 32 | + Puedes leer sobre la estructura típica de un sitio web aquí: [https://4geeks.com/es/lesson/what-is-html-learn-html-es](https://4geeks.com/es/lesson/what-is-html-learn-html-es) 33 | 34 | ## 🔎 Importante: 35 | 36 | + El título del sitio web aparece en la pestaña del sitio web (arriba en el navegador). 37 | 38 | 39 | -------------------------------------------------------------------------------- /exercises/10-replicate-html/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=R_h8HWjBhaE" 3 | --- 4 | 5 | # `10` Replicate HTML 6 | 7 | This is an image of an HTML document that was made here. 8 | 9 |  10 | 11 | ## 📝 Instructions: 12 | 13 | 1. Please, write the needed HTML code to replicate the previous picture. 14 | 15 | ## 💡 Hint: 16 | 17 | + You have to use ``, `
`, `
- `, `
- `, `
- tag should have 6