Merge pull request #67 from rosinni/master

rosinni · web-flow · commit 26bebe0c6122 · 2025-07-14T12:24:44.000-04:00
update instructions exercises 09-10
diff --git a/exercises/09-Beautify/README.es.md b/exercises/09-Beautify/README.es.md
@@ -4,14 +4,27 @@ Este es un ejemplo de la vida real patrocinado por uno de nuestros estudiantes;
 
 ![beautify](../../.learn/assets/09-Beauty.png?raw=true)
 
-En este momento, algunos de los divs no se muestran, otros se muestran de manera diferente, etc.
+Sin embargo, el código contiene varios errores que impiden que se vea correctamente. Tu tarea es **arreglar el HTML y CSS** para que cumpla con los siguientes requisitos técnicos.
+
+- Mostrar **6 cuadros** (`div`) visibles, cada uno con un número del 1 al 6 dentro de una etiqueta `<strong>`.
+- Cada cuadro debe tener un `id` único: `div1`, `div2`, ..., `div6`.
+- Todos los `div` deben tener **dimensiones exactas** y **colores de fondo específicos**.
+- Algunos cuadros deben tener `border-radius` y color de texto personalizado.
 
-El problema aquí es que faltan algunas etiquetas de apertura y cierre, algunos selectores CSS están duplicados y algunos `div` tienen el mismo `#id`.
 
 ## 📝 Instrucciones:
 
-1. Arregla el código y haz que se vea como se supone que debe verse.
+1. Cada `div` debe tener un ancho de `150px` y alto de `100px`.
+2. `div1` y `div5` deben tener **fondo rojo**.
+3. `div2` y `div4` deben tener **fondo azul**.
+4. `div3` debe tener **fondo amarillo**.
+5. `div6` debe tener **fondo negro**.
+6. `div2`, `div3`, `div5` y `div6` deben tener **texto blanco** y `border-radius: 25px`.
+7. `div1` y `div4` deben tener `border-radius: 50px`.
+8. Cada `div` debe contener un número del 1 al 6, envuelto en una etiqueta `<strong>`.
+
+
+## ⚠️ Importante:
 
-## 💡 Pista:
+No elimines ni modifiques los elementos del `<head>` como `<meta>`, `<title>` o `<link>`.
 
-+ El nombre de los siguientes id's deben seguir el mismo patrón (`div1`, `div2`, `div3`, `div4`, ..., `div6`)
diff --git a/exercises/09-Beautify/README.md b/exercises/09-Beautify/README.md
@@ -1,17 +1,29 @@
 # `09` Beautify
 
-This is a real life example sponsored by one of our students; in this case, he was trying to make his website look like this:
+This is a real-life example sponsored by one of our students; in this case, they were trying to make their website look like this:
 
 ![beautify](../../.learn/assets/09-Beauty.png?raw=true)
 
-Right now, some of the divs don't show, others show in a different way, etc. 
+However, the code contains several errors that prevent it from displaying correctly. Your task is to **fix the HTML and CSS** so that it meets the following technical requirements.
+
+- Display **6 visible boxes** (`div`), each with a number from 1 to 6 inside a `<strong>` tag.
+- Each box must have a unique `id`: `div1`, `div2`, ..., `div6`.
+- All `div`s must have **exact dimensions** and **specific background colors**.
+- Some boxes must have `border-radius` and custom text color.
 
-The problem here is some missing opening and closing tags, some CSS selectors are duplicated and some `div` have the same `#id`.
 
 ## 📝 Instructions:
 
-1. Fix the code and make it look how it was supposed to look.
+1. Each `div` must be `150px` wide and `100px` high.
+2. `div1` and `div5` must have a **red background**.
+3. `div2` and `div4` must have a **blue background**.
+4. `div3` must have a **yellow background**.
+5. `div6` must have a **black background**.
+6. `div2`, `div3`, `div5`, and `div6` must have **white text** and `border-radius: 25px`.
+7. `div1` and `div4` must have `border-radius: 50px`.
+8. Each `div` must contain a number from 1 to 6, wrapped in a `<strong>` tag.
+
 
-## 💡 Hint:
+## ⚠️ Important:
 
-+ The name of the next id's should follow the pattern (`div1`, `div2`, `div3`, `div4`, ..., `div6`)
+Do not remove or modify the `<head>` elements such as `<meta>`, `<title>`, or `<link>`.
diff --git a/exercises/09.1-Before-and-After/README.es.md b/exercises/09.1-Before-and-After/README.es.md
@@ -1,13 +1,31 @@
 # `09.1` Before and After
 
-Cada elemento HTML tiene elementos `::before` y `::after` que están ocultos por defecto. Estos elementos son muy útiles cuando se quieren crear pequeños detalles como insignias, pegatinas, etc.
+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.
+
+En este caso, ya se ha aplicado un pseudoelemento `::before` sobre un encabezado `<h1>` con el texto `"Hello World"`, generando una flecha triangular que apunta a la izquierda.
+
+Sin embargo, el código aún está incompleto. Tu tarea es agregar una segunda flecha al lado derecho del texto utilizando `::after`.
 
-En este caso, estamos usando el selector `::before` para crear una flecha triangular a la izquierda del `<h1>` "Hello World".
 
 ## 📝 Instrucciones:
 
-Usa el selector `::after` para crear otra flecha al otro lado de la `h1`. Esta nueva flecha tiene que apuntar a la derecha, por supuesto.
+1. Usa el pseudoelemento `::after` sobre el `<h1>` existente.
+2. La flecha debe apuntar **a la derecha** del texto `"Hello World"`.
+3. La flecha debe estar construida exclusivamente con CSS (por ejemplo, usando `border-left`).
+4. Asegúrate de que la flecha `::after` esté alineada visualmente con la flecha `::before`.
 
 ## 💻 Resultado esperado:
 
 ![Before and After](../../.learn/assets/BKz8ozg.png?raw=true)
+
+
+## 💡 Pista:
+
+Puedes construir flechas en CSS usando bordes. Para una flecha que apunta a la derecha, prueba con algo como:
+
+```css
+border-left: 10px solid black;
+border-top: 5px solid transparent;
+border-bottom: 5px solid transparent;
+```
+
diff --git a/exercises/09.1-Before-and-After/README.md b/exercises/09.1-Before-and-After/README.md
@@ -1,13 +1,28 @@
 # `09.1` Before and After
 
-Every HTML has `::before` and `::after` elements that are hidden by default. These elements are very useful when you want to create little details like badges, stickers, etc.
+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.
 
-In this case, we are using the `::before` selector to create a triangle arrow on the left of the "Hello World" `<h1>`.
+In this case, a `::before` pseudo-element has already been applied to a `<h1>` heading with the text `"Hello World"`, generating a left-pointing triangular arrow.
+
+However, the code is still incomplete. Your task is to add a second arrow to the right side of the text using `::after`.
 
 ## 📝 Instructions:
 
-1. Use the `::after` selector to create another arrow on the other side of the `h1`. This new arrow needs to point to the right, of course.
+1. Use the `::after` pseudo-element on the existing `<h1>`.
+2. The arrow should point **to the right** of the `"Hello World"` text.
+3. The arrow must be built exclusively with CSS (for example, using `border-left`).
+4. Make sure the `::after` arrow is visually aligned with the `::before` arrow.
 
 ## 💻 Expected result:
 
 ![Before and After](../../.learn/assets/BKz8ozg.png?raw=true)
+
+## 💡 Hint:
+
+You can build arrows in CSS using borders. For a right-pointing arrow, try something like:
+
+```css
+border-left: 10px solid black;
+border-top: 5px solid transparent;
+border-bottom: 5px solid transparent;
+```
diff --git a/exercises/09.2-Calendar-icon/README.es.md b/exercises/09.2-Calendar-icon/README.es.md
@@ -1,19 +1,30 @@
 # `09.2` Calendar Icon
 
-En este caso, estamos usando `::before` y `::after` para intentar recrear un ícono de calendario como este:
+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.
+
+El elemento base es un `div` con la clase `.calendar`, que contiene un elemento `<em>`. Ya se han creado los pseudoelementos, pero su posición, color y forma no están correctamente definidos.
 
 ![Calendar Icon](../../.learn/assets/AlDLXvy.png?raw=true)
 
+
+
 ## 📝 Instrucciones:
 
-1. Por favor, mueve los elementos `::before` y `::after` del elemento `.calendar` de la forma adecuada para que puedan ser ubicados como en la imagen.
+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.
+
+2. Aplica también `position: absolute` a los pseudoelementos `::before` y `::after` del elemento `<em>` (que actúan como anillos o sujetadores).
 
-2. Por favor, mueve el `::before` y `::after` del elemento `<em>` de la forma adecuada para que puedan ser ubicados como en la imagen.
+3. Ajusta sus colores para que coincidan entre sí y simulen visualmente el metal o plástico del anillo.
 
-3. Cambia sus colores también, para que puedan tener el mismo color, y aplica el `border-radius` a los elementos `::before` y `::after` del elemento `<em>` para que se vean como un anillo en 2 dimensiones visto desde el frente.
+4. Aplica `border-radius` a los pseudoelementos de `<em>` para que tomen una forma circular, simulando un anillo visto desde el frente (2D).
 
-## 💡 Pista: 
 
-+ Si no los colocas en `position: absolute`, continuarán ocupando el área/espacio original que estaban ocupando.
 
+## 💡 Pista:
+
++ Si no colocas los pseudoelementos en `position: absolute`, seguirán ocupando espacio en el flujo del documento.
++ Puedes usar propiedades como `width`, `height`, `background-color`, `border-radius` y `top`, `left`, etc. para posicionar y estilizar los anillos.
 + 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.
+
+
+
diff --git a/exercises/09.2-Calendar-icon/README.md b/exercises/09.2-Calendar-icon/README.md
@@ -1,19 +1,31 @@
 # `09.2` Calendar Icon
 
-In this case, we are using the `::before` and `::after` elements to try to recreate a calendar icon like this one:
+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.
+
+The base element is a `div` with the class `.calendar`, which contains an `<em>` element. The pseudo-elements have already been created, but their position, color, and shape are not correctly defined.
 
 ![Calendar Icon](../../.learn/assets/AlDLXvy.png?raw=true)
 
+
+
 ## 📝 Instructions:
 
-1. Please move the `::before` and `::after` elements of the `.calendar` element in the proper way, so they can be placed just like in the picture.
+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.
+
+2. Also apply `position: absolute` to the `<em>` element's `::before` and `::after` pseudo-elements (which act as rings or binders).
+
+3. Adjust their colors so that they match each other and visually simulate the metal or plastic of the ring.
+
+4. Apply `border-radius` to the `<em>` pseudo-elements so that they take on a circular shape, simulating a ring seen from the front (2D).
+
+
+
+## 💡 Hint:
 
-2. Please move the `::before` and `::after` of the `<em>` element in the proper way, so they can be placed just like in the picture.
++ If you don't set the pseudo-elements to `position: absolute`, they will continue to take up space in the document flow.
++ You can use properties like `width`, `height`, `background-color`, `border-radius`, and `top`, `left`, etc. to position and style the rings.
++ 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.
 
-3. Change their colors as well, so they can have the same color, and apply the `border-radius` to the `::before` and `::after` of the `<em>` to make them look like a ring in 2 dimensions seen from the front.
 
-## 💡 Hints: 
 
-+ If you don't make them `position: absolute`, they will continue occupying the original area/space they were occupying.
 
-+ This exercise doesn't have tests because the solution can be reached with different values, after your code's result looks similar to the example, you can go to the next exercise.
diff --git a/exercises/10-static-layout/README.es.md b/exercises/10-static-layout/README.es.md
@@ -1,19 +1,32 @@
 # `10` Static Layout
 
-Aplica los estilos necesarios en el `.wrapper` `.secondWrapper`, `<header>`, `<nav>` y `<section>` para que la página web se vea como en la imagen.
+En este ejercicio trabajarás con posicionamiento y distribución estática usando `flexbox` y otras propiedades básicas de CSS. El objetivo es construir un diseño de página simple pero correctamente alineado, donde los elementos principales se distribuyen con márgenes y anchos específicos.
 
-## 📝 Instrucciones:
+El HTML ya está estructurado con las siguientes clases y elementos:
 
-1. `.secondWrapper` debe ser un contenedor flex. Para esto, necesitas usar `display: flex`.
+- `.wrapper` (contenedor general)
+- `.secondWrapper` (contenedor de `nav` y `section`)
+- `<header>`
+- `<nav>`
+- `<section>`
 
-## 💡 Pistas: 
 
-- No cambies nada en el HTML.
+## 📝 Instrucciones:
 
-- El contenedor `section` tiene aproximadamente un ancho (`width`) de `80%`.
+1. Aplica `display: flex` sobre el contenedor `.secondWrapper` para que sus elementos hijos se dispongan en línea (horizontalmente).
+2. El elemento `<section>` debe ocupar aproximadamente el `80%` del ancho de `.secondWrapper`.
+3. El `<nav>` debe ubicarse a la izquierda del `<section>`.
+4. Asegúrate de que haya un espacio de `10px`:
+   - Entre `<nav>` y `<section>`.
+   - Entre `<section>` y el borde derecho del contenedor.
+5. El diseño debe mantenerse estable, sin usar `position: absolute` o `float`.
 
-- Todos los espacios entre contenedores son de `10px`. Por ejemplo, hay un espacio de `10px` entre el contenedor `nav` y el contenedor `section`, y también entre contenedor `section` y el borde derecho de la pagina.
+## 💡 Pistas: 
 
+- No modifiques el archivo HTML.
+- Usa propiedades como `gap`, `margin`, `padding`, `width`, `flex`, etc.
+- Si usas `gap`, asegúrate de que sea aplicado en el contenedor adecuado.
+- Puedes usar colores de fondo temporales para visualizar los bloques mientras trabajas.
 - Este ejercicio no tiene pruebas, compara tu resultado con la imagen dada.
 
 ## 💻 Resultado esperado:
diff --git a/exercises/10-static-layout/README.md b/exercises/10-static-layout/README.md
@@ -1,20 +1,35 @@
-# `10` Static Layout 
+# `10` Static Layout
 
-Apply the necessary styles to `.wrapper`,`.secondWrapper`, `<header>`, `<nav>` and `<section>` to make the website look like the image.
+In this exercise, you will work with static positioning and distribution using `flexbox` and other basic CSS properties. The goal is to build a simple but properly aligned page layout, where the main elements are distributed with specific margins and widths.
 
-## 📝 Instructions:
-1. `.secondWrapper` should be a flex container. You should use `display: flex` for that.
+The HTML is already structured with the following classes and elements:
+
+- `.wrapper` (main container)
+- `.secondWrapper` (container for `nav` and `section`)
+- `<header>`
+- `<nav>`
+- `<section>`
 
-## 💡 Hints: 
 
-- Don't change anything on the HTML.
+## 📝 Instructions:
 
-- The `section` container has approximately a width of `80%`.
+1. Apply `display: flex` to the `.secondWrapper` container so its child elements are arranged in a row (horizontally).
+2. The `<section>` element should take up approximately `80%` of the width of `.secondWrapper`.
+3. The `<nav>` should be positioned to the left of the `<section>`.
+4. Make sure there is a `10px` space:
+    - Between `<nav>` and `<section>`.
+    - Between `<section>` and the right edge of the container.
+5. The layout should remain stable, without using `position: absolute` or `float`.
 
-- All gaps between containers are `10px`. For example, there is a `10px` space between the `nav` container and the `section` container, and also between the `section` container and the right side of the page.
+## 💡 Tips:
 
-- This exercise doesn't have tests, compare your result with the image example.
+- Do not modify the HTML file.
+- Use properties like `gap`, `margin`, `padding`, `width`, `flex`, etc.
+- If you use `gap`, make sure it is applied to the appropriate container.
+- You can use temporary background colors to visualize the blocks while working.
+- This exercise has no tests; compare your result with the given image.
 
 ## 💻 Expected result:
 
 ![Static Layout](../../.learn/assets/0B62fyP.png?raw=true)
+
