Skip to content
Merged
10 changes: 6 additions & 4 deletions exercises/12-Relative-Length-EM-REM/README.es.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# `12` Longitud Relativa em, rem:
# `12` Longitud Relativa em, rem

Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho.

Expand All @@ -8,11 +8,13 @@ Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cua

En este ejercicio tenemos dos encabezados `<h2>`. Ambos son `<h2>`, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto.

Dado que el primer `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta.
Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta.

em: Relativo al `font-size` actual del padre.
## En resumen:

rem: Relativo al `font-size` original de la página.
+ em: Relativo al `font-size` actual del padre.

+ rem: Relativo al `font-size` original de la página.

## 📝 Instrucciones:

Expand Down
10 changes: 6 additions & 4 deletions exercises/12-Relative-Length-EM-REM/README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
# `12` Relative Length em, rem

By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width.
By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width.

There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit.

## Example using em:

In this exercise we have two `<h2>` headings. They are both `<h2>`, but one is bigger than the other because headings have relative font-sizes by default.

Since the first `div` has a bigger based `font-size`, then the heading resizes accordingly.
Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly.

em: Relative to the current font-size of the parent.
## In short:

rem: Relative to the original font-size of the page.
+ em: Relative to the current font-size of the parent.

+ rem: Relative to the original font-size of the page.


## 📝 Instructions:
Expand Down
6 changes: 3 additions & 3 deletions exercises/12-Relative-Length-EM-REM/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
const meta = document.querySelector("meta")
const title = document.querySelector('title')
const link = document.querySelector('link')
test("The H2 Tag should have a font-size: 0.8em", ()=>{
test("The <h2> tag should have a font-size: 0.8em", ()=>{
// get computed styles of any element you like
document.querySelector(
"head"
Expand All @@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{
var styles = window.getComputedStyle(h2Tag);
expect(styles["font-size"]).toBe("0.8em");
});
test("The H3 Tag should haave a font-size: 0.8rem", ()=>{
test("The <h3> tag should have a font-size: 0.8rem", ()=>{
// get computed styles of any element you like
document.querySelector(
"head"
Expand All @@ -28,7 +28,7 @@ describe("All the styles should be applied", ()=>{
var styles = window.getComputedStyle(h3Tag);
expect(styles["font-size"]).toBe("0.8rem");
});
test("You should not change the existing head tag elements", ()=>{
test("You should not change the existing <head> tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()

Expand Down
20 changes: 9 additions & 11 deletions exercises/13-Anchor-Like-Button/README.es.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
# `13` Enlace (anchor) como botón:
# `13` Enlace (anchor) como botón

Los enlaces (`anchors`) no solo se usan dentro del texto: cuando va a usar enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que sea experiencia más amigable.
Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable.

## 📝 Instrucciones:

Siga estos pasos para que tu enlace (`anchor`) se vea así:
Sigue estos pasos para que tu enlace (`anchor`) se vea así:

1. Haz que se vea como una caja: establece el `padding` en `10px`.

2. Bordes redondeados: establece el `border-radius` en `4px`.

3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`
3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`.

4. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`.
4. Eliminar subrayado: establece `text-decoration` a `none`.

5. Eliminar subrayado: establece `text-decoration` a `none`.
5. Establece el color del texto a blanco (`white`)

6. Establecer el color del texto en blanco (`white`)
+ *Para que el botón se vea diferente cuando el usuario pasa el ratón por encima, usamos el selector `:hover`: https://www.w3schools.com/cssref/sel_hover.php*

*Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector `:hover`: http://lmgtfy.com/?q=how+to+use+the+hover*
6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`.

7. Dentro del selector `:hover` cambia el fondo del botón a `#cc7a00`.

## Reultado esperado:
## Resultado esperado:

![Example Image](../../.learn/assets/13-1.gif?raw=true)
18 changes: 8 additions & 10 deletions exercises/13-Anchor-Like-Button/README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
# `13` Anchor Like Button

Anchors are not only used within text- when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience.
Anchors are not only used within text: when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience.

## 📝 Instructions:

1. Make it look like a box: Set `padding` to `10px`.
1. Make it look like a box: set `padding` to `10px`.

2. Rounded borders: Set `border-radius` to `4px`.
2. Rounded borders: set `border-radius` to `4px`.

3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`).

4. Find and apply the color: Use the color picker to find the color and apply make the background to that color.
4. Remove underline: set `text-decoration` to `none`.

5. Remove underline: Set `text-decoration` to `none`.
5. Set the color of the text to `white`.

6. Set the color of the text to `white`.
+ *To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php*

*To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: http://lmgtfy.com/?q=how+to+use+the+hover*

7. Inside of the `:hover` selector change the background of the button to `#cc7a00`.
6. Inside of the `:hover` selector change the background of the button to `darkorange`.

## Expected result:

![Example Image](../../.learn/assets/13-1.gif?raw=true)
![Example Image](../../.learn/assets/13-1.gif?raw=true)
14 changes: 0 additions & 14 deletions exercises/13-Anchor-Like-Button/solution-hide.css

This file was deleted.

5 changes: 3 additions & 2 deletions exercises/13-Anchor-Like-Button/solution.hide.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.orange-btn {
/*your code here*/
display: inline-block;
/* your code below */
padding: 10px;
border-radius: 4px;
text-decoration: none;
Expand All @@ -8,6 +9,6 @@
}

.orange-btn:hover {
/*YOUR CODE HERE FOR THE HOVER STATE*/
/* YOUR CODE HERE FOR THE HOVER STATE */
background: darkorange;
}
7 changes: 4 additions & 3 deletions exercises/13-Anchor-Like-Button/styles.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.orange-btn {
/*your code here*/
display: inline-block;
/* your code below */

}

.orange-btn:hover {
/*YOUR CODE HERE FOR THE HOVER STATE*/
/* YOUR CODE HERE FOR THE HOVER STATE */

}
}
8 changes: 4 additions & 4 deletions exercises/13-Anchor-Like-Button/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
const meta = document.querySelector("meta")
const title = document.querySelector('title')
const link = document.querySelector('link')
test("the padding should be '10px'", ()=>{
test("The padding should be '10px'", ()=>{
document.querySelector(
"head"

Expand All @@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{

expect(classTagStyles["padding"]).toBe("10px");
});
test("the border radius should be '4px'", ()=>{
test("The border-radius should be '4px'", ()=>{
document.querySelector(
"head"

Expand All @@ -29,7 +29,7 @@ describe("All the styles should be applied", ()=>{
let classTagStyles = window.getComputedStyle(divTag);
expect(classTagStyles["border-radius"]).toBe("4px");
});
test("the underline should be removed", ()=>{
test("The underline should be removed", ()=>{
document.querySelector(
"head"

Expand All @@ -47,7 +47,7 @@ describe("All the styles should be applied", ()=>{
expect(cssArray).toBe(".orange-btn");
}
)
test("You should not change the existing head tag elements", ()=>{
test("You should not change the existing <head> tag elements", ()=>{
let head = document.querySelector('head')
expect(head).toBeTruthy()

Expand Down