13 |
14 |
15 |
--------------------------------------------------------------------------------
/exercises/03-Position-relative-vs-absolute/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: gray;
3 | }
4 | #firstDiv {
5 | background: blue;
6 | width: 100px;
7 | height: 100px;
8 | }
9 | #secondDiv {
10 | background: yellow;
11 | width: 100px;
12 | height: 100px;
13 | }
14 | .absolutePositionExample {
15 | position: absolute;
16 | top: 20px;
17 | left: 20px;
18 | }
19 | .relativePositionExample {
20 | position: relative;
21 | top: 20px;
22 | left: 20px;
23 | }
24 |
--------------------------------------------------------------------------------
/exercises/04-Move-image-behind-the-text/README.md:
--------------------------------------------------------------------------------
1 | # `04` Move the image behind the text
2 |
3 | `z-index` is similar to the "Bring To Front" feature of MS PowerPoint:
4 |
5 | 
6 |
7 | Elements with a bigger `z-index` are more up front than elements with lower `z-index`.
8 |
9 | ## 📝 Instructions:
10 |
11 | Use the `z-index` rule to send the image to the back.
12 |
13 | ## 💻 Expected result:
14 |
15 | 
16 |
--------------------------------------------------------------------------------
/exercises/10-static-layout/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4Geeks Academy
7 |
8 |
9 |
10 |
11 |
12 |
Static Layout Example
13 | HEADER
14 |
15 |
16 | SECTION
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/exercises/04-Move-image-behind-the-text/README.es.md:
--------------------------------------------------------------------------------
1 | # `04` Move the image behind the text
2 |
3 | `z-index` es similar a la característica "traer todo al frente" de MS PowerPoint:
4 |
5 | 
6 |
7 | Los elementos con un mayor `z-index` están más al frente que aquellos con menor `z-index`.
8 |
9 | ## 📝 Instrucciones:
10 |
11 | Usa la regla `z-index` para enviar la imagen hacia atrás.
12 |
13 | ## 💻 Resultado esperado:
14 |
15 | 
16 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | image:
2 | file: .gitpod.Dockerfile
3 |
4 | ports:
5 | - port: 3000
6 | onOpen: ignore
7 |
8 | vscode:
9 | extensions:
10 | - learn-pack.learnpack-vscode
11 |
12 |
13 | github:
14 | prebuilds:
15 | # enable for the master/default branch (defaults to true)
16 | master: true
17 | # enable for pull requests coming from this repo (defaults to true)
18 | pullRequests: false
19 | # add a "Review in Gitpod" button as a comment to pull requests (defaults to true)
20 | addComment: false
21 |
--------------------------------------------------------------------------------
/exercises/09.1-Before-and-After/solution.hide.css:
--------------------------------------------------------------------------------
1 | h1::before {
2 | content: " ";
3 | border-top: 45px solid transparent;
4 | border-bottom: 45px solid transparent;
5 | border-right: 45px solid blue;
6 | height: 0px;
7 | margin-bottom: -35px;
8 | margin-right: 20px;
9 | display: inline-block;
10 | }
11 | h1::after {
12 | content: " ";
13 | border-top: 45px solid transparent;
14 | border-bottom: 45px solid transparent;
15 | border-left: 45px solid blue;
16 | height: 0px;
17 | margin-bottom: -35px;
18 | margin-left: 20px;
19 | display: inline-block;
20 | }
21 |
--------------------------------------------------------------------------------
/exercises/07-Sidebar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4Geeks Academy
7 |
8 |
9 |
10 |
11 |
12 |
This is my sidebar.
13 |
14 | This is my content, This is my content, This is my content, This is my content, This is my content, This is my content, This is my
15 | content,
16 |
`, pero mantén el espacio que usa (usa la regla visibility para ello).
6 |
7 | 2. Ahora esconde el segundo `
` pero esta vez usa `display:none;` para también liberar el área/espacio que estaba usando (el contenido de abajo debería moverse más arriba).
8 |
9 | 3. Haz que todos los elementos `
` de `#myUL` se muestren en una línea (inline).
10 |
11 | 4. Haz que los elementos `strong` (en negrita) se muestren como elementos de bloque (`display: block;`) (los convertirá en cajas).
12 |
13 |
14 |
15 | ## 💻 Resultado esperado:
16 |
17 | 
18 |
--------------------------------------------------------------------------------
/exercises/10-static-layout/styles.css:
--------------------------------------------------------------------------------
1 | /* your code here */
2 |
3 | /**************************************
4 | DON'T CHANGE ANYTHING AFTER THIS LINE
5 | **************************************/
6 |
7 | *,
8 | *:before,
9 | *:after {
10 | -moz-box-sizing: border-box;
11 | -webkit-box-sizing: border-box;
12 | box-sizing: border-box;
13 | }
14 |
15 | body {
16 | background: #2980b9;
17 | color: #fff;
18 | font-family: Helvetica;
19 | text-align: center;
20 | margin: 0;
21 | }
22 |
23 | header,
24 | nav,
25 | section {
26 | border: 1px solid rgba(255, 255, 255, 0.8);
27 | margin-bottom: 10px;
28 | border-radius: 3px;
29 | }
30 |
31 | header {
32 | padding: 10px 0;
33 | }
34 |
35 | nav,
36 | section {
37 | padding: 100px 0;
38 | }
39 |
--------------------------------------------------------------------------------
/exercises/03-Position-relative-vs-absolute/README.md:
--------------------------------------------------------------------------------
1 | # `03` Position Relative vs Absolute
2 |
3 | This is very important:
4 |
5 | 1. Preview the exercise, you will see both `
` tags acting like default boxes.
6 |
7 | 2. Apply the class `.absolutePositionExample` to `#secondDiv` and compare results.
8 |
9 | 3. Remove that class, and now apply `.relativePositionExample` to the `#secondDiv` and compare results.
10 |
11 | Ask yourself:
12 |
13 | **What was the difference?**
14 |
15 | The `relative` position is relative to the beginning position of the element, the `absolute` ignores the beginning position completely.
16 |
17 | ## 💡 Hint:
18 |
19 | + This exercise doesn't have any tests, go to the next one after you finish with the instructions.
20 |
--------------------------------------------------------------------------------
/exercises/09-Beautify/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: white;
3 | font-family: sans-serif;
4 | margin: 0;
5 | }
6 |
7 | .wrapper {
8 | display: block;
9 | margin: 20px;
10 | }
11 |
12 | #div1 {
13 | background-color: red;
14 | width: 150px;
15 | height: 100px;
16 | padding: 100px;
17 | text-align: center;
18 | border-radius: 50px;
19 |
20 | }
21 |
22 | #div2 {
23 | background-color: blue;
24 | width: 150px;
25 | height: 100px;
26 | padding: 25px;
27 | color: white;
28 | text-align: center;
29 | border-radius: 25px;
30 |
31 | }
32 |
33 | #div3 {
34 | background-color: yellow;
35 | width: 150px;
36 | height: 100px;
37 | padding: 25px;
38 | color: white;
39 | text-align: center;
40 | border-radius: 25px;
41 |
42 | }
43 |
44 |
--------------------------------------------------------------------------------
/exercises/03-Position-relative-vs-absolute/README.es.md:
--------------------------------------------------------------------------------
1 | # `03` Position Relative vs Absolute
2 |
3 | Esto es muy importante:
4 |
5 | 1. Primero, ejecuta el ejercicio y verás etiquetas `
` actuando como cajas predeterminadas.
6 |
7 | 2. Aplica la clase `.absolutePositionExample` al `#secondDiv` y compara los resultados.
8 |
9 | 3. Elimina la clase, y ahora aplica `.relativePositionExample` a `#secondDiv` y compara los resultados.
10 |
11 | Pregúntate:
12 |
13 | **¿Cuál ha sido la diferencia?**
14 |
15 | La posición `relative` es relativa a la posición inicial del elemento, mientras que `absolute` ignora la posición inicial completamente.
16 |
17 | ## 💡 Pista:
18 |
19 | + Este ejercicio no tiene pruebas, una vez completado continua con el siguiente.
20 |
--------------------------------------------------------------------------------
/exercises/05-Float-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4Geeks Academy
7 |
8 |
9 |
10 |
11 |
12 |
13 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
14 | quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
15 | laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
16 | cumque nihil impedit.
17 |
We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.
15 |
16 |
You are able to complete the exercises by yourself.
17 |
You understand what the teacher is talking about.
18 |
You are able to have conversations about the topic.
19 |
20 |
3 reasons you love what you are learning
21 |
22 |
Time passes fast.
23 |
You are anxious to finish this exercise and start the next one.
24 |
It's 12am and you don't want to go to sleep.
25 |
26 |
If you can't sleep, what's better than watching videos of cats? click here
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/exercises/09.2-Calendar-icon/solution.hide.css:
--------------------------------------------------------------------------------
1 | .calendar {
2 | top: 0em;
3 | left: 1em;
4 | padding-top: 5px;
5 | width: 80px;
6 | background: #ededef;
7 | font-size: 54px;
8 | text-align: center;
9 | color: #000;
10 |
11 | border-radius: 3px;
12 | position: absolute;
13 | }
14 |
15 | .calendar em {
16 | display: block;
17 | font-size: 15px;
18 | color: #fff;
19 | background: #04599a;
20 | border-bottom-right-radius: 3px;
21 | border-bottom-left-radius: 3px;
22 | }
23 |
24 | .calendar:before,
25 | .calendar:after {
26 | position: absolute;
27 | content: "";
28 | float: left;
29 | width: 8px;
30 | height: 8px;
31 | background: #111;
32 | z-index: 1;
33 | border-radius: 10px;
34 | box-shadow: 0 1px 1px #fff;
35 | }
36 | .calendar::before {
37 | left: 11px;
38 | top: 3px;
39 | }
40 | .calendar::after {
41 | right: 11px;
42 | top: 3px;
43 | }
44 |
45 | .calendar em:before,
46 | .calendar em:after {
47 | position: absolute;
48 | content: "";
49 | float: left;
50 | margin: 0;
51 | width: 4px;
52 | height: 14px;
53 | background: lightgrey;
54 | border-radius: 10px;
55 | z-index: 2;
56 | }
57 | .calendar em:before {
58 | top: -7px;
59 | left: 13px;
60 | }
61 | .calendar em:after {
62 | top: -7px;
63 | right: 13px;
64 | }
65 |
--------------------------------------------------------------------------------
/exercises/09-Beautify/solution.hide.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: white;
3 | display: flex;
4 | justify-content: center;
5 | margin: 0;
6 | font-family: sans-serif;
7 | }
8 |
9 | .wrapper {
10 | display: flex;
11 | }
12 |
13 | .left-column {
14 | display: flex;
15 | flex-direction: column;
16 | gap: 20px;
17 | }
18 |
19 | .right-column {
20 | display: flex;
21 | flex-direction: column;
22 | gap: 20px;
23 | margin-left: 20px;
24 | }
25 |
26 |
27 | .common-box {
28 | display: flex;
29 | justify-content: center;
30 | align-items: center;
31 | text-align: center;
32 | font-weight: bold;
33 | }
34 |
35 |
36 | #div1,
37 | #div2 {
38 | width: 300px;
39 | height: 300px;
40 | }
41 |
42 |
43 | #div3,
44 | #div4,
45 | #div5,
46 | #div6 {
47 | width: 150px;
48 | height: 100px;
49 | border-radius: 25px;
50 | color: white;
51 | }
52 |
53 |
54 | #div1 {
55 | background-color: red;
56 | border-radius: 50px;
57 | color: black;
58 | }
59 |
60 | #div2 {
61 | background-color: blue;
62 | border-radius: 50px;
63 | color: black;
64 | }
65 |
66 | #div3 {
67 | background-color: blue;
68 | }
69 |
70 | #div4 {
71 | background-color: yellow;
72 | color: white;
73 | }
74 |
75 | #div5 {
76 | background-color: red;
77 | }
78 |
79 | #div6 {
80 | background-color: black;
81 | }
82 |
--------------------------------------------------------------------------------
/exercises/06-center-content/README.es.md:
--------------------------------------------------------------------------------
1 | # `06` Center content
2 |
3 | En la mayoría de los sitios web, es una buena práctica envolver todo el contenido principal dentro de un contenedor. Este contenedor suele tener un ancho fijo o limitado, y se centra horizontalmente para mejorar la legibilidad y el diseño.
4 |
5 | En este ejercicio, aprenderás cómo centrar una caja de contenido de forma horizontal usando CSS con la propiedad `margin:auto`.
6 |
7 |
8 | ### ¿Cómo funciona `margin: auto`?
9 |
10 | Cuando un elemento tiene un ancho definido (`width: 400px`) y le aplicas `margin: auto`, el navegador reparte el espacio horizontal restante **equitativamente a ambos lados** del elemento. Esto tiene como efecto visual que el elemento quede centrado en el contenedor (por ejemplo, el `body`).
11 |
12 | ```css
13 | .myDiv {
14 | width: 400px;
15 | margin: 0 auto;
16 | }
17 | ```
18 |
19 |
20 | ## 📝 Instrucciones:
21 |
22 |
23 | 1. Crea un div con la clase `myDiv`.
24 | 2. Aplica los siguientes estilos con CSS:
25 | - Ancho (`width`) de `400px`.
26 | - Color de fondo (`background`) gris.
27 |
28 | 3. Centra horizontalmente el div dentro del body usando `margin: auto`.
29 |
30 |
31 | ## 💻 Resultado esperado:
32 |
33 | 
34 |
--------------------------------------------------------------------------------
/exercises/09.1-Before-and-After/README.md:
--------------------------------------------------------------------------------
1 | # `09.1` Before and After
2 |
3 | This exercise will help you practice using the CSS pseudo-elements `::before` and `::after`, which allow you to add decorative content to HTML elements without modifying the HTML directly. They are useful for creating details like arrows, labels, or extra visual elements.
4 |
5 | In this case, a `::before` pseudo-element has already been applied to a `
` heading with the text `"Hello World"`, generating a left-pointing triangular arrow.
6 |
7 | However, the code is still incomplete. Your task is to add a second arrow to the right side of the text using `::after`.
8 |
9 | ## 📝 Instructions:
10 |
11 | 1. Use the `::after` pseudo-element on the existing `
`.
12 | 2. The arrow should point **to the right** of the `"Hello World"` text.
13 | 3. The arrow must be built exclusively with CSS (for example, using `border-left`).
14 | 4. Make sure the `::after` arrow is visually aligned with the `::before` arrow.
15 |
16 | ## 💻 Expected result:
17 |
18 | 
19 |
20 | ## 💡 Hint:
21 |
22 | You can build arrows in CSS using borders. For a right-pointing arrow, try something like:
23 |
24 | ```css
25 | border-left: 10px solid black;
26 | border-top: 5px solid transparent;
27 | border-bottom: 5px solid transparent;
28 | ```
29 |
--------------------------------------------------------------------------------
/exercises/09.1-Before-and-After/README.es.md:
--------------------------------------------------------------------------------
1 | # `09.1` Before and After
2 |
3 | Este ejercicio te ayudará a practicar el uso de pseudoelementos CSS `::before` y `::after`, que permiten agregar contenido decorativo a los elementos HTML sin modificar el HTML directamente. Son útiles para crear detalles como flechas, etiquetas o elementos visuales extra.
4 |
5 | En este caso, ya se ha aplicado un pseudoelemento `::before` sobre un encabezado `
` con el texto `"Hello World"`, generando una flecha triangular que apunta a la izquierda.
6 |
7 | Sin embargo, el código aún está incompleto. Tu tarea es agregar una segunda flecha al lado derecho del texto utilizando `::after`.
8 |
9 |
10 | ## 📝 Instrucciones:
11 |
12 | 1. Usa el pseudoelemento `::after` sobre el `
` existente.
13 | 2. La flecha debe apuntar **a la derecha** del texto `"Hello World"`.
14 | 3. La flecha debe estar construida exclusivamente con CSS (por ejemplo, usando `border-left`).
15 | 4. Asegúrate de que la flecha `::after` esté alineada visualmente con la flecha `::before`.
16 |
17 | ## 💻 Resultado esperado:
18 |
19 | 
20 |
21 |
22 | ## 💡 Pista:
23 |
24 | Puedes construir flechas en CSS usando bordes. Para una flecha que apunta a la derecha, prueba con algo como:
25 |
26 | ```css
27 | border-left: 10px solid black;
28 | border-top: 5px solid transparent;
29 | border-bottom: 5px solid transparent;
30 | ```
31 |
32 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
3 | {
4 | "name": "Node.js",
5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
7 | "customizations": {
8 | "vscode": {
9 | "settings": {
10 | "editor.defaultFormatter": "esbenp.prettier-vscode",
11 | "workbench.editorAssociations": {
12 | "*.md": "vscode.markdown.preview.editor"
13 | }
14 | },
15 | "extensions": ["learn-pack.learnpack-vscode"]
16 | }
17 | },
18 |
19 | // Features to add to the dev container. More info: https://containers.dev/features.
20 | // "features": {},
21 |
22 | // Use 'forwardPorts' to make a list of ports inside the container available locally.
23 | // "forwardPorts": [],
24 |
25 | "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.13 -g && learnpack plugins:install @learnpack/html@1.1.7"
26 |
27 | // Use 'postCreateCommand' to run commands after the container is created.
28 | // "postCreateCommand": "yarn install",
29 |
30 | // Configure tool-specific properties.
31 | // "customizations": {},
32 |
33 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
34 | // "remoteUser": "root"
35 | }
36 |
--------------------------------------------------------------------------------
/exercises/04-Move-image-behind-the-text/test.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | const link = document.querySelector("link");
10 | const title = document.querySelector('title')
11 |
12 | test("You should not change the existing tag elements", () => {
13 | let head = document.querySelector('head')
14 | expect(head).toBeTruthy()
15 |
16 | let meta = head.querySelector("meta")
17 | expect(meta).toBeTruthy()
18 |
19 | const href = link.getAttribute("href")
20 | expect(href).toBe('styles.css')
21 |
22 | expect(title).toBeTruthy()
23 | })
24 |
25 | test('There should be an tag with the id "myImage"', () => {
26 | let img = document.getElementById("myImage")
27 |
28 | expect(img).toBeTruthy()
29 | })
30 |
31 | test("The tag should have the proper z-index value to be placed ", () => {
32 | document.querySelector(
33 | "head"
34 | ).innerHTML = ``;
35 |
36 | let cssArray = document.styleSheets[0].cssRules;
37 | let myImage = "";
38 | for (let i = 0; i < cssArray.length; i++) {
39 | if (cssArray[i].selectorText === "#myImage") {
40 | myImage = cssArray[i].style["z-index"];
41 | }
42 | }
43 | expect(parseInt(myImage)).toBeLessThan(0);
44 | })
45 |
--------------------------------------------------------------------------------
/learn.json:
--------------------------------------------------------------------------------
1 | {
2 | "slug": "css-layouts-tutorial-exercises",
3 | "preview": "https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises/blob/master/.learn/assets/preview.png?raw=true",
4 | "repository": "https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises",
5 | "title": {
6 | "us": "Build Website Layouts with CSS",
7 | "es": "Construye diseños de sitios web con CSS"
8 | },
9 | "description": {
10 | "us": "Learn how to build layouts with an interactive and auto-graded tutorial. Master CSS properties like display, position, float, and z-index. Understand how to center content, create sidebars, and use pseudo-elements. Enhance your web design skills with practical, auto-graded tutorials.",
11 | "es": "Aprende a construir diseños con un tutorial interactivo y auto-corregido. Domina las propiedades CSS como display, position, float y z-index. Entiende cómo centrar contenido, crear barras laterales y usar pseudo-elementos. Mejora tus habilidades de diseño web con tutoriales prácticos y auto-corregidos."
12 | },
13 | "duration": 8,
14 | "difficulty": "easy",
15 | "skills": ["html-layouts","css-styling"],
16 | "videoSolutions": false,
17 | "projectType": "tutorial",
18 | "bugsLink": "https://github.com/learnpack/learnpack/issues/new",
19 | "graded": true,
20 | "editor": {
21 | "version": "5.0",
22 | "agent": "vscode"
23 | },
24 | "telemetry": {
25 | "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=232"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/exercises/08-Split-Screen-in-three/README.md:
--------------------------------------------------------------------------------
1 | # `08` Split Screen in Three
2 |
3 | Now that you know how to use `Flexbox` to place two elements side by side, it's time to take it a step further: create a structure with **three equal columns**, which is very common in dashboards, news systems, and web templates.
4 |
5 | With `display: flex`, you can distribute as many elements as you want in a single line. If each one takes up `33.33%` of the width, you'll fill 100% of the horizontal space. This allows you to divide the screen into precise thirds.
6 |
7 | ## 📝 Instructions:
8 |
9 | 1. Group three `div` elements inside a container with the class `.wrapper`.
10 | 2. Make sure that:
11 | - `.wrapper` has `display: flex` and `width: 100%`.
12 | - Each of the three boxes has a width of `33.33%`.
13 | - Each box has a different background color to distinguish them visually.
14 | 3. Use the `flex-direction` property to ensure the elements are aligned horizontally.
15 |
16 | ### 💡 Tips
17 |
18 | - Do not use `float` or `inline-block`. Use only `flexbox`.
19 | - Align the three `div` elements directly one after another, without line breaks or spaces between tags to avoid unexpected small margins.
20 | - If you see unwanted spaces between the blocks, check the HTML to make sure the `div`s are on the same line and without breaks.
21 |
22 | ## Expected result
23 |
24 | Three columns of the same size aligned horizontally, each with a different background color, occupying one third of the screen width.
25 |
26 | 
27 |
--------------------------------------------------------------------------------
/exercises/08-Split-Screen-in-three/README.es.md:
--------------------------------------------------------------------------------
1 | # `08` Split Screen in Three
2 |
3 | Ahora que ya sabes cómo usar `Flexbox` para colocar dos elementos uno al lado del otro, es momento de llevarlo un paso más allá: crear una estructura de **tres columnas iguales**, muy común en dashboards, sistemas de noticias y plantillas web.
4 |
5 |
6 | Con `display: flex`, puedes distribuir tantos elementos como quieras en una misma línea. Si cada uno ocupa `33.33%` del ancho, llenarás el 100% del espacio horizontal. Esto permite dividir la pantalla en tercios de forma precisa.
7 |
8 |
9 |
10 | ## 📝 Instrucciones:
11 |
12 | 1. Agrupa tres elementos `div` dentro de un contenedor con la clase `.wrapper`.
13 | 2. Asegúrate de que:
14 | - `.wrapper` tenga `display: flex` y `width: 100%`.
15 | - Cada una de las tres cajas tenga un ancho (`width`) de `33.33%`.
16 | - Cada caja tenga un color de fondo diferente para distinguirlas visualmente.
17 | 3. Utiliza la propiedad `flex-direction` para asegurarte de que los elementos se alineen horizontalmente.
18 |
19 |
20 | ### 💡 Pistas
21 |
22 | - No uses `float` ni `inline-block`. Usa exclusivamente `flexbox`.
23 | - Alinea los tres `div` directamente uno después del otro, sin saltos de línea ni espacios entre etiquetas para evitar pequeños márgenes inesperados.
24 | - Si ves espacios indeseados entre los bloques, revisa el HTML para asegurarte de que los `div` estén en la misma línea y sin saltos.
25 |
26 | ## Resultado esperado
27 |
28 | Tres columnas del mismo tamaño alineadas horizontalmente, cada una con un color de fondo distinto, ocupando un tercio del ancho de la pantalla.
29 |
30 | 
31 |
--------------------------------------------------------------------------------
/exercises/09.2-Calendar-icon/README.md:
--------------------------------------------------------------------------------
1 | # `09.2` Calendar Icon
2 |
3 | In this exercise, you will use the `::before` and `::after` pseudo-elements to build an icon that simulates the appearance of a classic calendar with binding rings. The goal is to apply creative CSS styles to generate visual shapes without using external images.
4 |
5 | The base element is a `div` with the class `.calendar`, which contains an `` element. The pseudo-elements have already been created, but their position, color, and shape are not correctly defined.
6 |
7 | 
8 |
9 |
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Use `position: absolute` to properly position the `.calendar` container's `::before` and `::after` pseudo-elements so that they represent the top edges or marks of the calendar.
14 |
15 | 2. Also apply `position: absolute` to the `` element's `::before` and `::after` pseudo-elements (which act as rings or binders).
16 |
17 | 3. Adjust their colors so that they match each other and visually simulate the metal or plastic of the ring.
18 |
19 | 4. Apply `border-radius` to the `` pseudo-elements so that they take on a circular shape, simulating a ring seen from the front (2D).
20 |
21 |
22 |
23 | ## 💡 Hint:
24 |
25 | + If you don't set the pseudo-elements to `position: absolute`, they will continue to take up space in the document flow.
26 | + You can use properties like `width`, `height`, `background-color`, `border-radius`, and `top`, `left`, etc. to position and style the rings.
27 | + This exercise does not have tests because there are different possible solutions, so when your code visually matches the example, you can move on to the next exercise.
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/exercises/07-Sidebar/README.md:
--------------------------------------------------------------------------------
1 | # `07` Sidebar
2 |
3 | A common structure in modern websites is the layout with a **sidebar** on the left and **main content** on the right. This pattern is used, for example, in admin panels, news sites, or messaging apps.
4 |
5 | Starting with this exercise, you will learn to use `Flexbox`, a modern CSS technique that allows you to organize elements inside a container in a flexible and simple way. When you use `display: flex;` on a container, its child elements are automatically placed **side by side**, unless you specify otherwise. This makes it ideal for building layouts like this one.
6 |
7 | Therefore, the goal of this exercise is to replicate a two-column layout on the same line: a sidebar with 30% width and a content area with 70% width.
8 |
9 | 
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Create a container `div` with the class `wrapper`.
14 | 2. Make sure that:
15 | - The `div.wrapper` has `width: 100%` and `height: 100px`.
16 | - It uses `display: flex` to place its elements in a row.
17 | 3. Inside the container, add:
18 | - A `div.sidebar` with `width: 30%` and a **gray** background color.
19 | - A `div.content` with `width: 70%` and a **green** background color.
20 |
21 | ### 💡 Tips
22 |
23 | - You don't need to modify the HTML, just apply or complete the CSS styles.
24 | - Use background colors to better visualize the areas.
25 | - Do not use `float` or `position` in this exercise.
26 |
--------------------------------------------------------------------------------
/exercises/05-Float-example/test.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | const link = document.querySelector("link");
10 | const title = document.querySelector('title')
11 |
12 | test("You should not change the existing tag elements", () => {
13 | let head = document.querySelector('head')
14 | expect(head).toBeTruthy()
15 |
16 | let meta = head.querySelector("meta")
17 | expect(meta).toBeTruthy()
18 |
19 | const href = link.getAttribute("href")
20 | expect(href).toBe('styles.css')
21 |
22 | expect(title).toBeTruthy()
23 | })
24 |
25 | test('There should be an tag with the id "myImage"', () => {
26 | let img = document.getElementById("myImage")
27 |
28 | expect(img).toBeTruthy()
29 | })
30 |
31 | test("The tag should be placed to the left of the text using the float property", () => {
32 | document.querySelector(
33 | "head"
34 | ).innerHTML = ``;
35 |
36 | let cssArray = document.styleSheets[0].cssRules;
37 | let myImage = "";
38 | for (let i = 0; i < cssArray.length; i++) {
39 | if (cssArray[i].selectorText === "#myImage") {
40 | myImage = cssArray[i].style["float"];
41 | }
42 | }
43 | expect(myImage.toLowerCase() === "left" || myImage.toLowerCase() === "right").toBeTruthy();
44 | })
45 |
46 | test('There should be only one
tag', () => {
47 | let p = document.querySelectorAll("p")
48 |
49 | expect(p.length).toBeGreaterThan(0)
50 | })
51 |
--------------------------------------------------------------------------------
/exercises/09.2-Calendar-icon/README.es.md:
--------------------------------------------------------------------------------
1 | # `09.2` Calendar Icon
2 |
3 | En este ejercicio, usarás los pseudoelementos `::before` y `::after` para construir un ícono que simule la apariencia de un calendario clásico con anillos de sujeción. El objetivo es aplicar estilos creativos con CSS para generar formas visuales sin usar imágenes externas.
4 |
5 | El elemento base es un `div` con la clase `.calendar`, que contiene un elemento ``. Ya se han creado los pseudoelementos, pero su posición, color y forma no están correctamente definidos.
6 |
7 | 
8 |
9 |
10 |
11 | ## 📝 Instrucciones:
12 |
13 | 1. Usa `position: absolute` para posicionar adecuadamente los pseudoelementos `::before` y `::after` del contenedor `.calendar`, de modo que representen los bordes o marcas superiores del calendario.
14 |
15 | 2. Aplica también `position: absolute` a los pseudoelementos `::before` y `::after` del elemento `` (que actúan como anillos o sujetadores).
16 |
17 | 3. Ajusta sus colores para que coincidan entre sí y simulen visualmente el metal o plástico del anillo.
18 |
19 | 4. Aplica `border-radius` a los pseudoelementos de `` para que tomen una forma circular, simulando un anillo visto desde el frente (2D).
20 |
21 |
22 |
23 | ## 💡 Pista:
24 |
25 | + Si no colocas los pseudoelementos en `position: absolute`, seguirán ocupando espacio en el flujo del documento.
26 | + Puedes usar propiedades como `width`, `height`, `background-color`, `border-radius` y `top`, `left`, etc. para posicionar y estilizar los anillos.
27 | + Este ejercicio no tiene pruebas debido a que se puede llegar a la solución con diferentes valores, por lo que cuando el resultado de tu código se vea similar al ejemplo, puedes pasar al siguiente ejercicio.
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/exercises/07-Sidebar/README.es.md:
--------------------------------------------------------------------------------
1 | # `07` Sidebar
2 |
3 | Una estructura común en los sitios web modernos es el diseño con una **barra lateral** (o *sidebar*) a la izquierda y un **contenido principal** a la derecha. Este patrón se usa, por ejemplo, en paneles de administración, sitios de noticias o mensajería.
4 |
5 |
6 | A partir de este ejercicio, aprenderás a usar `Flexbox`, una técnica moderna de CSS que te permite organizar los elementos dentro de un contenedor de manera flexible y sencilla. Cuando usas `display: flex;` en un contenedor, sus elementos hijos se colocan automáticamente **uno al lado del otro**, a menos que indiques lo contrario. Esto lo hace ideal para construir layouts como este.
7 |
8 |
9 |
10 | Por lo tanto el objetivo de este ejercicio será replicar un diseño de dos columnas en la misma línea: una barra lateral del 30% de ancho y un área de contenido del 70%.
11 |
12 |
13 | 
14 |
15 | ## 📝 Instrucciones:
16 |
17 | 1. Crea un `div` contenedor con clase `wrapper`.
18 | 2. Asegúrate de que:
19 | - El `div.wrapper` tenga `width: 100%` y `height: 100px`.
20 | - Use `display: flex` para colocar sus elementos en línea.
21 | 3. Dentro del contenedor, coloca:
22 | - Un `div.sidebar` con `width: 30%` y color de fondo **gris**.
23 | - Un `div.content` con `width: 70%` y color de fondo **verde**.
24 |
25 |
26 | ### 💡 Pistas
27 |
28 | - No necesitas modificar el HTML, solo aplicar o completar los estilos CSS.
29 | - Usa colores de fondo para visualizar mejor las áreas.
30 | - No uses `float`, ni `position` en este ejercicio.
31 |
32 |
--------------------------------------------------------------------------------
/exercises/10-static-layout/README.md:
--------------------------------------------------------------------------------
1 | # `10` Static Layout
2 |
3 | En este ejercicio practicarás cómo distribuir elementos horizontalmente dentro de un contenedor usando **Flexbox** y otras propiedades fundamentales de CSS.
4 |
5 | El objetivo es construir una estructura web básica compuesta por un encabezado y dos bloques principales alineados en una misma fila: un menú lateral de navegación y una sección de contenido.
6 |
7 | El archivo HTML ya viene preparado y **no debe ser modificado**. Los elementos que vas a estilizar son:
8 |
9 | - `.wrapper`: contenedor principal de toda la página.
10 | - ``: aparece en la parte superior.
11 | - `.secondWrapper`: contiene los bloques `
20 |
21 |
22 |
--------------------------------------------------------------------------------
/exercises/02-Display-none/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
12 |