4 |
5 |
6 |
7 | Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcadem/html-tutorial-exercises-course/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/)
8 |
9 |
10 | 
4 |
5 | By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/html-tutorial-exercises-course/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/)
6 |
7 |
8 |
Hello! I am a P tag, normally used for paragraphs
3 | -------------------------------------------------------------------------------- /exercises/01-hello-world/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | Hello, I am a text 3 | Hello, I am also a text but in bold 4 | -------------------------------------------------------------------------------- /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/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 `` | Para agregar párrafos |
11 | | `` | Texto en negrita |
12 | | ` ` 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 ` ` | To add paragraphs |
12 | | `` | Text in bold (stronger) |
13 | | ` ` tag to your website that says: `HTML tags are similar to MS Word elements`.
21 |
22 | ## 💻 Expected Result:
23 |
24 | 
25 |
--------------------------------------------------------------------------------
/exercises/01.1-like-word/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/exercises/01.1-like-word/solution.hide.html:
--------------------------------------------------------------------------------
1 |
2 | HTML tags are similar to MS Word elements tag.', 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 Then, you start talking about some interesting stuff that nobody wants to read Then you can quote someone to add credibility: After all, new generations have these things in common: tags inside the `.
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/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 ` ` 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/10-replicate-html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Here are the 3 most common signs that shows you are learning tag inside the ` |  |
21 | | 3. Agrega una etiqueta de párrafo ` ` (de al menos 20 palabras) y una etiqueta ` ` tag. |  |
21 | | 3. Add one paragraph ` ` tag (20 words at least) and one ` Hello world. Bold word. Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis laboriosam quia adipisci. Hic tenetur fuga aliquam velit est pariatur tempore quibusdam ex quas a ipsum, illo aperiam blanditiis molestias voluptatibus. tag with a tag inside.', function () {
20 | let body = document.querySelector("body");
21 | expect(body).toBeTruthy();
22 |
23 | let p = body.querySelector("p");
24 | expect(p).toBeTruthy();
25 |
26 | let strong = p.querySelector("strong");
27 | expect(strong).toBeTruthy();
28 | })
29 |
30 | it('You should create an tag with an tags inside.', function () {
31 | let body = document.querySelector("body");
32 | expect(body).toBeTruthy();
33 |
34 | let a = body.querySelector("a");
35 | expect(a).toBeTruthy();
36 |
37 | let h2 = a.querySelector("h2");
38 | expect(h2).toBeTruthy();
39 |
40 | let p = a.querySelector("p");
41 | expect(p).toBeTruthy();
42 | })
43 |
--------------------------------------------------------------------------------
/exercises/12-my-first-table/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=MskUgEMh88g"
3 | ---
4 |
5 | # `12` My First Table
6 |
7 | Vamos a crear una tabla de datos con solamente código HTML, la cual llevará la siguiente información:
8 |
9 | 
10 |
11 | Sin usar `CSS`, con `HTML` simple puedes agregar algunos estilos básicos a los elementos.
12 |
13 | Vamos a practicar realizando las siguientes tareas para jugar con el formato de tabla. ¿Estás listo? 😉
14 |
15 | ## 📝 Instrucciones:
16 |
17 | 1. Agrega el atributo `width` (ancho) de 100% al `` | 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 `
` | 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 `
9 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/exercises/04-list-of-reasons/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 ol = body.querySelector("ol")
13 | expect(ol).toBeTruthy();
14 | })
15 |
16 | it('The
tag should have 6
Hola yo soy el div
19 | ```
20 |
21 | En este ejercicio, hay dos `` (El `upperSide` y el `lowerSide`). Por otro lado, hay un `` que te lleva al `
` de abajo.
22 |
23 | Necesitamos que crees otro `` al final del archivo, que te lleve al `
` que se encuentra al inicio.
24 |
25 | ## 📝 Instrucciones:
26 |
27 | 1. Observa la estructura y cómo funciona el `` que te lleva hacia abajo.
28 |
29 | 2. Crea otro anchor `` al final del archivo que te lleve al `
` del inicio.
30 |
31 | ## 💡 Pistas:
32 |
33 | + La única forma de usar anchors como esta, es con el `id` de los elementos, no hay otra forma.
34 |
35 | + Debes agregarle un `id` a ambas etiquetas `
` para poder redirigir al usuario con los anchors `` (En este caso ya está hecho).
36 |
--------------------------------------------------------------------------------
/exercises/07-same-page/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=zFJmSEcU6uQ"
3 | ---
4 |
5 | # `07` Same Page
6 |
7 | Anchor `` tags are also capable of sending the user to different sections inside our webpage.
8 |
9 | To do that, we have to identify the sections by assigning an `id` (an attribute of all HTML elements).
10 |
11 | Then we have to add a `#` followed by the `id` of the section in the `href` attribute, like this: `href="#id-name"`.
12 |
13 | And all together will look something like this:
14 |
15 | ```html
16 | This anchor will take you to the div
17 |
18 |
Hello I'm the div
19 | ```
20 |
21 | In this exercise, there are two `` (The `upperSide` and the `lowerSide`). And there is an anchor `` that takes you to the lowerSide `
`.
22 |
23 | We need you to create another anchor `` at the bottom of the file that takes you to the `
` with the `"upperSide"` id.
24 |
25 | ## 📝 Instructions:
26 |
27 | 1. Look at the first anchor structure and how it works.
28 |
29 | 2. Create another anchor at the bottom of the file that should take the user to the `
` with the `"#upperSide"` id
30 |
31 | ## 💡 Hint:
32 |
33 | + The only way to use anchors like this is with the `id` of the elements, there is no other way.
34 |
35 | + You have to add an `id` to the `
` tags, in order to redirect the user to them with the anchor (In this case, it's already done).
36 |
--------------------------------------------------------------------------------
/exercises/07-same-page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
This is the upper side of the website
8 |
9 | Go to the lower side!
10 |
11 | This is the lower side of the website
39 |
40 |
41 |
--------------------------------------------------------------------------------
/exercises/07-same-page/solution.hide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | This is the upper side of the website
8 |
9 | Go to the lower side!
10 |
11 | This is the lower side of the website
39 |
40 |
41 |
--------------------------------------------------------------------------------
/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/08-relative-vs-absolute-path/README.es.md:
--------------------------------------------------------------------------------
1 | # `08` Relative vs Absolute Path
2 |
3 | Este es el código típico que necesitas para usar la etiqueta de imagen:
4 |
5 | ```html
6 |
7 | ```
8 |
9 | Cuando agregas un tag de `
` (imagen) en un sitio web, tienes que establecer la propiedad `src` en la URL de donde deseas tomar esa imagen. Esa ruta del URL puede ser: **absoluta o relativa**.
10 |
11 | ## Rutas Relativas:
12 |
13 | Las rutas relativas se utilizan únicamente para indicar el orden de directorios. No contienen la primera parte de la URL (el nombre de dominio) y solo pueden redirigir al usuario a diferentes partes del mismo sitio web.
14 |
15 | ```html
16 |
17 | Llévame a index.html desde el directorio actual
18 | Llévame a image.png que está dentro del directorio /graphics/
19 | Llévame a how-do-i-set-up-a-webpage.html
20 | ```
21 |
22 | > Nota: Si usas **rutas relativas**, tienes que asumir que la parte inicial de la ruta está oculta y es igual a la ruta actual en la barra de URL.
23 |
24 | ## Rutas Absolutas:
25 |
26 | Las rutas absolutas incluyen también el nombre del dominio. Contienen la URL completa porque normalmente se utilizan para llevar al usuario a un sitio web diferente.
27 |
28 | ```html
29 | 
30 | Click Me
31 | Click Me
32 | Click Me
33 | ```
34 |
35 | ## 📝 Instrucciones:
36 |
37 | 1. Comienza por **construir** (haz clic en el botón de `build`) el sitio web actual, cuando abra verás una imagen.
38 |
39 | 2. Modifica la propiedad `src` de la imagen y conviértela en una URL absoluta.
40 |
41 | > Nota: Asegúrate de que la imagen aún se muestre correctamente después de realizar los cambios.
42 |
43 | ## 💡 Pistas:
44 |
45 | + Tu ruta absoluta debe comenzar con esto: {{publicUrl}}
46 |
47 | + Si construyes (`build`) el ejercicio, abre el sitio web y haz un clic derecho en la imagen, el menú contextual mostrará una opción 'Copiar dirección de imagen' que copiará la URL absoluta en tu portapapeles.
48 |
49 | + Aquí hay un video que explica la diferencia entre rutas relativas y absolutas [https://www.youtube.com/watch?v=ephId3mYu9o](https://www.youtube.com/watch?v=ephId3mYu9o)
50 |
--------------------------------------------------------------------------------
/exercises/08-relative-vs-absolute-path/README.md:
--------------------------------------------------------------------------------
1 | # `08` Relative vs Absolute Path
2 |
3 | This is the typical code you need to use an image tag:
4 |
5 | ```html
6 |
7 | ```
8 |
9 | When you add an `
` (image) tag into a website, you have to set the `src` property to the URL where you want to take that image from. That URL path can be: **absolute or relative**.
10 |
11 | ## Relative Paths:
12 |
13 | Relative paths are only used to indicate directory order. They do not contain the first part of the URL (the domain name) and can only redirect the user to different parts of the same website.
14 |
15 | ```html
16 |
17 | Take me to index.html from the current directory
18 | Take me to image.png that is inside the /graphics/ directory
19 | Take me to how-do-i-set-up-a-webpage.html
20 | ```
21 |
22 | > Note: If you use **relative paths**, you have to assume that the initial part of the path is hidden and equals to the current path in the URL bar.
23 |
24 | ## Absolute Paths:
25 |
26 | Absolute paths include the domain name. They contain the full URL because they are typically used to take the user to a different website.
27 |
28 | ```html
29 |
30 | Click Me
31 | Click Me
32 | Click Me
33 | ```
34 |
35 | ## 📝 Instructions:
36 |
37 | 1. Start by **building** (click the `build` button) the current website, when it opens you will see an image displaying.
38 |
39 | 2. Please modify the `src` property of the image and convert it to an absolute URL.
40 |
41 | > Note: Make sure the image is still displaying correctly after you make your changes.
42 |
43 | ## 💡 Hints:
44 |
45 | + Your absolute path should start with this:**{{publicUrl}}**
46 |
47 | + If you build the exercise, open the website, and right click on the image, the context menu will show an option with the text 'Copy Image Address' that will copy its absolute URL into your clipboard.
48 |
49 | + Here is a video explaining the difference between relative and absolute paths [https://www.youtube.com/watch?v=ephId3mYu9o](https://www.youtube.com/watch?v=ephId3mYu9o)
50 |
--------------------------------------------------------------------------------
/exercises/08-relative-vs-absolute-path/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
9 |
10 |
11 |
--------------------------------------------------------------------------------
/exercises/08-relative-vs-absolute-path/solution.hide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
9 |
10 |
11 |
--------------------------------------------------------------------------------
/exercises/08-relative-vs-absolute-path/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const configFile = fs.readFileSync(path.resolve('./.learn', './config.json'));
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | it('The absolute path to the image should be the correct one', function () {
10 | let img = document.querySelector('img');
11 | expect(img).toBeTruthy();
12 |
13 | let config = JSON.parse(configFile);
14 | expect(img.src).toBe(`${config.config.publicUrl}/.learn/assets/absolute-path-vs-relative-path.png`)
15 | })
16 |
--------------------------------------------------------------------------------
/exercises/09-formatting-Text/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=wYWGCLekOCA"
3 | ---
4 |
5 | # `09` Formatting Text
6 |
7 | La forma en que funciona el procesamiento de texto en documentos es bastante estándar, siempre se ve lo mismo: encabezados, texto en negrita, párrafos, citas, etc.
8 |
9 | HTML estaba destinado a replicar ese comportamiento. Aquí hay un ejemplo de un documento típico que se puede replicar con él:
10 |
11 | 
12 |
13 | ## 📝 Instrucciones:
14 |
15 | 1. Escribe el código para replicar exactamente la imagen anterior con los mismos estilos usando html puro, usa headings (encabezados), paragraphs (párrafos), blockquote (citas en bloque), ul y li.
16 |
17 | ## 💡 Pistas:
18 |
19 | + No debes modificar nada de CSS.
20 |
21 | + Para el caso del ``, los estilos están aplicados en el mismo archivo, no debes modificarlos tampoco.
22 |
23 | + Debes agregar la etiqueta `
` adentro del `` para agregar un salto de línea.
24 |
25 | + Puedes usar este texto para no tener que escribir todo:
26 |
27 | ```md
28 | This will be your heading
29 |
30 | Then, you start talking about some interesting stuff that nobody wants to read
31 |
32 | Then you can quote someone to add credibility:
33 |
34 | A quotation is a handy thing to have about, saving one the trouble of thinking
35 |
36 | - A.A. Milne, If I May
37 |
38 | After all, new generations have these things in common:
39 |
40 | + Don't like to read long texts.
41 | + Have the attention span of a bird.
42 | + Skip long paragraphs straight to the bullet points.
43 | ```
44 |
--------------------------------------------------------------------------------
/exercises/09-formatting-Text/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=Krt4BsRNtJo"
3 | ---
4 |
5 | # `09` Formatting Text
6 |
7 | The way word processing works in documents is pretty standard, you always see the same stuff: Headings, bold text, paragraphs, quotes, etc.
8 |
9 | HTML was meant to replicate that exact behavior. Here is an example of a typical document that can be replicated with it:
10 |
11 | 
12 |
13 | ## 📝 Instructions:
14 |
15 | 1. Please write the code to replicate the exact same styles of the previous image with pure html, use headings, paragraphs, blockquote, ul and li.
16 |
17 | ## 💡 Hints:
18 |
19 | + You should not add any CSS.
20 |
21 | + For the `
` case, the stylings have been already applied in the same file.
22 |
23 | + You should add the `
` tag inside the `` in order to add a line break.
24 |
25 | + You can use this text so you don't have to type all that boring stuff:
26 |
27 | ```md
28 | This will be your heading
29 |
30 | Then, you start talking about some interesting stuff that nobody wants to read
31 |
32 | Then you can quote someone to add credibility:
33 |
34 | A quotation is a handy thing to have about, saving one the trouble of thinking
35 |
36 | - A.A. Milne, If I May
37 |
38 | After all, new generations have these things in common:
39 |
40 | + Don't like to read long texts.
41 | + Have the attention span of a bird.
42 | + Skip long paragraphs straight to the bullet points.
43 | ```
44 |
--------------------------------------------------------------------------------
/exercises/09-formatting-Text/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
This will be your heading
16 |
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 |
25 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/exercises/09-formatting-Text/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 .', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let h1 = body.querySelector("h1");
13 | expect(h1).toBeTruthy();
14 | })
15 |
16 | it('You should create 3
tag inside the .', function () {
26 | let body = document.querySelector("body");
27 | expect(body).toBeTruthy();
28 |
29 | let blockquote = body.querySelector("blockquote");
30 | expect(blockquote).toBeTruthy();
31 | })
32 |
33 | it('You should create a
with 3
`, `
`, `
`, `
`, `
`, `
`, `
`, `
`, `
The learning essay
9 | 3 signals you know you are learning
10 |
12 |
16 | 3 reasons you love what you are learning
17 |
18 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/exercises/10-replicate-html/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 .', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let h1 = body.querySelector("h1");
13 | expect(h1).toBeTruthy();
14 | })
15 |
16 | it('You should create two
tags inside the .', function () {
17 | let body = document.querySelector("body");
18 | expect(body).toBeTruthy();
19 |
20 | let h2 = body.querySelectorAll("h2");
21 | expect(h2.length).toBe(2);
22 | })
23 |
24 | it('You should create a
with 3
with 3
` con una etiqueta `` italic anidada. |  |
20 | | 2. Agrega una etiqueta `` adentro de un `
` dentro de una etiqueta ancla ``. |  |
22 |
23 | No te preocupes si aún no lo entiendes muy bien, ¡todo es cuestión de práctica! 🤓
--------------------------------------------------------------------------------
/exercises/11-nested-tags/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=3OvWbRlpnLY"
3 | ---
4 |
5 | # `11` Nested Tags
6 |
7 | ## What are Nested Tags? 🤔
8 |
9 | Let's think for a moment of HTML tags as boxes that hold your content; they can contain text, images, and related media... Sometimes, you'll have to place boxes inside other boxes. In this case, those "inner" boxes are `nested` inside of others.
10 |
11 | In other words, `Nested Tags` refer to adding a tag inside the same tag as an immediate child.
12 |
13 | ## 📝 Instructions:
14 |
15 | 1. Let's play with some nested tags, please follow the next instructions:
16 |
17 | | Instructions | How it should look |
18 | | ------------------------------------ | --------------------------------------- |
19 | | 1. Add an `
` tag with a nested `` italic tag. |  |
20 | | 2. Add a `` tag inside of a `
` tag inside of an anchor `` tag. |  |
22 |
23 | Don't worry if you don't understand it very well yet, it is all about practice! 🤓
24 |
--------------------------------------------------------------------------------
/exercises/11-nested-tags/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Hello world. Italic word.
11 |
12 |
13 | Hello
18 | tag with an tag inside.', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let h1 = body.querySelector("h1");
13 | expect(h1).toBeTruthy();
14 |
15 | let i = h1.querySelector("i");
16 | expect(i).toBeTruthy();
17 | })
18 |
19 | it('You should create a
and a
` y un `border` (borde) de `1` (Usa solo atributos HTML básicos en las etiquetas).
18 |
19 | ```html
20 |
21 | ```
22 |
23 | 2. Dentro del tag `
`, agrega el tag ``.
24 |
25 | ```html
26 |
27 |
28 |
29 | ```
30 |
31 | 3. Ya teniendo el tag `` vamos a crear dentro otro tag ``, al cual vamos a asignarle un `height` (altura) de `40px` y un `background-color` (color de fondo) rojo.
32 |
33 | ```html
34 |
35 |
36 |
39 | ```
40 |
41 | 4. Dentro de ese `
37 |
38 | `, vamos a hacer 3 ` ` al final del `` para formar las celdas de nuestra tabla con la información que vamos a pedir.
42 |
43 | ```html
44 |
45 |
46 |
53 | ```
54 |
55 | 5. Agrega la etiqueta `
47 |
51 |
52 | Name
48 | Last Name
49 | Phone Number
50 | `, justo después del ``.
56 |
57 | ```html
58 |
59 |
60 |
68 | ```
69 |
70 | 6. Por último, agrega 3 `
61 |
65 |
66 |
67 | Name
62 | Last Name
63 | Phone Number
64 | ` adentro del ` ` para completar las 3 columnas y filas faltantes de nuestra tabla. (Recuerda llenarlas con la información de primer cuadro)
71 |
72 | ```html
73 |
74 |
75 |
99 | ```
100 |
101 | ## 💻 Resultado Esperado:
102 |
103 | 
104 |
105 |
106 | ## 💡 Pista:
107 |
108 | + Después de cada paso dale clic a `**run**`, para asegurarte que todo va bien.
109 |
110 | + Puedes copiar los bloques de código para que no tengas que escribirlos 3 veces más, solo recuerda cambiar la información de las celdas.
111 |
112 | + ¡No uses CSS! use atributos HTML básicos en las etiquetas.
113 |
--------------------------------------------------------------------------------
/exercises/12-my-first-table/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=bIQfuIOggpM"
3 | ---
4 |
5 | # `12` My First Table
6 |
7 | We are going to create a data table with only HTML code, which will carry the following information:
8 |
9 | 
10 |
11 | Without using `CSS`, with plain `HTML` you can add some basic styling to elements.
12 |
13 | We are going to practice doing the following tasks to play with the table format. Are you ready? 😉
14 |
15 | ## 📝 Instructions:
16 |
17 | 1. Add a `width` attribute of 100% to the `
76 |
80 |
81 |
82 | Name
77 | Last Name
78 | Phone Number
79 |
83 |
87 | Name
84 | Last Name
85 | Phone Number
86 |
88 |
92 | Name
89 | Last Name
90 | Phone Number
91 |
93 |
97 |
98 | Name
94 | Last Name
95 | Phone Number
96 | ` and a `border` of `1` (Use only basic HTML attributes in tags).
18 |
19 | ```html
20 |
21 | ```
22 |
23 | 2. Inside the `
` tag, add the `` tag.
24 |
25 | ```html
26 |
27 |
28 |
29 | ```
30 |
31 | 3. Now that we have the `` tag, we are going to create another `` tag inside, to which we are going to assign a `height` of `40px` and a red `background-color` .
32 |
33 | ```html
34 |
35 |
36 |
39 | ```
40 |
41 | 4. Inside that `
37 |
38 | `, we are going to make 3 ` ` on the bottom of the `` to form the cells of our table with the information that we are going to request.
42 |
43 | ```html
44 |
45 |
46 |
53 | ```
54 |
55 | 5. Add the `
47 |
51 |
52 | Name
48 | Last Name
49 | Phone Number
50 | ` tag, right after the `` tag.
56 |
57 | ```html
58 |
59 |
60 |
68 | ```
69 |
70 | 6. Finally, create 3 `
61 |
65 |
66 |
67 | Name
62 | Last Name
63 | Phone Number
64 | ` in the ` ` to complete the 3 missing columns and rows of our table. (Remember to fill them with the information from the first box)
71 |
72 | ```html
73 |
74 |
75 |
99 | ```
100 |
101 | ## 💻 Expected Result:
102 |
103 | 
104 |
105 | ## 💡 Hints:
106 |
107 | + After each step click `**run**`, to make sure everything is going well.
108 |
109 | + You can copy the code blocks so you don't have to type them 3 more times, just remember to change the information in the cells.
110 |
111 | + Don't use CSS! use basic HTML attributes in tags.
112 |
--------------------------------------------------------------------------------
/exercises/12-my-first-table/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
76 |
80 |
81 |
82 | Name
77 | Last Name
78 | Phone Number
79 |
83 |
87 | Name
84 | Last Name
85 | Phone Number
86 |
88 |
92 | Name
89 | Last Name
90 | Phone Number
91 |
93 |
97 |
98 | Name
94 | Last Name
95 | Phone Number
96 |
9 |
10 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/exercises/12-my-first-table/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('The table tag should exist, and it should have a width of 100% and a border of 1', function () {
9 | const tableTag = document.querySelector("table")
10 | expect(tableTag).toBeTruthy()
11 | expect(tableTag.width).toBe("100%")
12 | expect(tableTag.border).toBe("1")
13 | })
14 |
15 | it('The first row of the table should have red background and a height of 40px', function () {
16 | const allTR = document.querySelectorAll("tr")
17 | expect(allTR[0].style.backgroundColor).toBe("red")
18 | expect(allTR[0].getAttribute('height')).toBe("40px")
19 | })
20 |
21 | it('All
11 |
15 |
16 |
17 | Name
12 | Last Name
13 | Phone Number
14 |
18 |
22 | Justin
19 | Priveto
20 | +(346)737-5829
21 |
23 |
27 | Jacob
24 | Prieto
25 | +(345)234-2323
26 |
28 |
32 |
33 | James
29 | Mc Dinzk
30 | +(234)455-3434
31 | tags exist (They should be 4)', function () {
22 | const allTR = document.querySelectorAll("tr")
23 | expect(allTR.length).toBe(4);
24 | })
25 |
26 | it('All tags should exist with the proper innerHTML', function () {
27 | const allTH = document.querySelectorAll("th")
28 | expect(allTH.length).toBe(3)
29 | expect(allTH[0].innerHTML.toLowerCase()).toContain(`name`)
30 | expect(allTH[1].innerHTML.toLowerCase()).toContain(`last name`)
31 | expect(allTH[2].innerHTML.toLowerCase()).toContain(`phone number`)
32 | })
33 |
34 | it('All tags should exist with the proper innerHTML', function () {
35 | const allTD = document.querySelectorAll("td")
36 | expect(allTD.length).toBe(9)
37 | for (let i = 0; i < allTD.length; i++) {
38 | expect(allTD[i].innerHTML).toBeTruthy()
39 | }
40 | })
41 |
42 |
--------------------------------------------------------------------------------
/exercises/13-image-with-text/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=1wyvtK7vLFM"
3 | ---
4 |
5 | # `13` Image with Text
6 |
7 | Antes de que existiera `CSS`, el uso de tablas era la única forma posible de hacer algunos diseños de sitios web. Es un proceso muy similar a la creación de diseños en MS Office.
8 |
9 | Ahora, vamos a recrear un ejemplo similar a este:
10 |
11 | 
12 |
13 | ## 📝 Instrucciones:
14 |
15 | 1. Crea un ` ` con el atributo `border = "0"`.
16 |
17 | ```html
18 |
19 | ```
20 |
21 | 2. Agrega la fila `
` con 2 columnas ` ` dentro.
22 |
23 | ```html
24 |
25 |
30 | ```
31 |
32 | 3. La primera columna (`
26 |
29 |
27 |
28 | `) debe tener el atributo `width="25%"`, este elemento debe contener una imagen con el atributo `width="100%"`.
33 |
34 | Utiliza esta imagen: `"../../.learn/assets/13-images-with-text.jpg"`
35 |
36 | ```html
37 | `), contiene el párrafo junto con el atributo `valign="top"` (este sirve para mover el texto a la parte superior de la celda).
41 |
42 | ```html
43 | aquí va el párrafo
44 | ```
45 |
46 | ## 💡 Pista:
47 |
48 | + Puedes elegir tu texto falso en esta página: [http://www.lipsum.com/](http://www.lipsum.com/)
49 |
--------------------------------------------------------------------------------
/exercises/13-image-with-text/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=NF1M60J090c"
3 | ---
4 |
5 | # `13` Image with Text
6 |
7 | Before `CSS` existed, using tables was the only way possible to do some website layouts. It is a very similar process to creating layouts on MS Office.
8 |
9 | Now, let's recreate an example similar to this:
10 |
11 | 
12 |
13 | ## 📝 Instructions:
14 |
15 | 1. Create a `` with attribute `border = "0"`.
16 |
17 | ```html
18 |
19 | ```
20 |
21 | 2. Add the `
` row with 2 ` ` columns inside.
22 |
23 | ```html
24 |
25 |
30 | ```
31 |
32 | 3. The first column (`
26 |
29 |
27 |
28 | `) with the attribute `width="25%"`, should contain an image with the attribute `width="100%"`.
33 |
34 | Use this image: `"../../.learn/assets/13-images-with-text.jpg"`
35 |
36 | ```html
37 | `), contains the paragraph along with the `valign = "top"` attribute (this is used to move the text to the top of the cell).
41 |
42 | ```html
43 | Here goes the text
44 | ```
45 |
46 | ## 💡 Hint:
47 |
48 | + You can choose your fake text on this page: [http://www.lipsum.com/](http://www.lipsum.com/)
49 |
--------------------------------------------------------------------------------
/exercises/13-image-with-text/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/exercises/13-image-with-text/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 a
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 | tag inside the .', function () {
9 | let body = document.querySelector("body");
10 | expect(body).toBeTruthy();
11 |
12 | let table = body.querySelector("table");
13 | expect(table).toBeTruthy();
14 | })
15 |
16 | it('The
tag should have border="0".', function () {
17 | let body = document.querySelector("body");
18 | expect(body).toBeTruthy();
19 |
20 | let table = body.querySelector("table");
21 | expect(table).toBeTruthy();
22 |
23 | expect(table.border).toBe("0");
24 | })
25 |
26 | it('The
tag should have a
tag inside.', function () {
27 | let body = document.querySelector("body");
28 | expect(body).toBeTruthy();
29 |
30 | let table = body.querySelector("table");
31 | expect(table).toBeTruthy();
32 |
33 | let tr = table.querySelector("tr");
34 | expect(tr).toBeTruthy();
35 | })
36 |
37 | it('The tag should have 2 tags inside.', function () {
38 | let body = document.querySelector("body");
39 | expect(body).toBeTruthy();
40 |
41 | let table = body.querySelector("table");
42 | expect(table).toBeTruthy();
43 |
44 | let tr = table.querySelector("tr");
45 | expect(tr).toBeTruthy();
46 |
47 | let tds = tr.querySelectorAll("td");
48 | expect(tds.length).toBe(2);
49 | })
50 |
51 | it('The first tag should have an tag inside, and a width of "25%".', function () {
52 | let body = document.querySelector("body");
53 | expect(body).toBeTruthy();
54 |
55 | let table = body.querySelector("table");
56 | expect(table).toBeTruthy();
57 |
58 | let tr = table.querySelector("tr");
59 | expect(tr).toBeTruthy();
60 |
61 | let td = tr.querySelectorAll("td")[0];
62 | expect(td).toBeTruthy();
63 | expect(td.width).toBe("25%")
64 |
65 | let img = td.querySelector("img");
66 | expect(img).toBeTruthy();
67 | })
68 |
--------------------------------------------------------------------------------
/exercises/14-video-tag/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=p9oHBMI6gc0"
3 | ---
4 |
5 | # `14` Video Tag
6 |
7 | El tag de `
