-
Notifications
You must be signed in to change notification settings - Fork 224
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
133 changed files
with
347 additions
and
322 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
tutorial: "https://www.youtube.com/watch?v=c5JeXOnI-Sg" | ||
--- | ||
|
||
# `01` Inline styles | ||
|
||
El CSS se trata de agregar estilos a nuestros elementos HTML. | ||
|
||
La forma más **básica** de aplicar un estilo a un elemento HTML es usar el atributo `style` dentro de la etiqueta HTML. Esto se llama "estilos en línea" (*inline style*) y funciona así: | ||
|
||
```html | ||
<a href="google.com" style="color: red; font-size: 14px;">Ir a Google</a> | ||
``` | ||
|
||
Esto establecerá el `color` del texto del enlace anterior a rojo y el tamaño de fuente (`font-size`) en 14 píxeles. | ||
|
||
En el diseño web contemporáneo, esta forma de aplicar estilos se desaconseja porque no es eficiente: tienes que aplicar estilos etiqueta por etiqueta. Pero te encontrarás con ejemplos de esto y necesitarás estar familiarizado con ello. | ||
|
||
Para aplicar estilos, siempre tienes que seguir estos pasos: | ||
|
||
1. Leer el HTML y seleccionar qué elemento deseas decorar para aplicarle CSS. | ||
2. Aplicar el estilo con el atributo `style` como se muestra arriba. | ||
|
||
## 📝 Instrucciones: | ||
|
||
1. Establece un estilo en línea para cambiar el color de fondo (`background-color`) de la tabla a verde. | ||
|
||
## 💡 Pista: | ||
|
||
- Cómo usar `background-color`: https://www.w3schools.com/cssref/pr_background-color.php |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>01 Inline Styles</title> | ||
</head> | ||
|
||
<body> | ||
<table> | ||
<tr> | ||
<td>Hello</td> | ||
</tr> | ||
<tr> | ||
<td>My brother</td> | ||
</tr> | ||
</table> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>01 Inline Styles</title> | ||
</head> | ||
|
||
<body> | ||
<table style="background-color: green"> | ||
<tr> | ||
<td>Hello</td> | ||
</tr> | ||
<tr> | ||
<td>My brother</td> | ||
</tr> | ||
</table> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
const fs = require('fs'); | ||
const path = require('path'); | ||
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); | ||
document.documentElement.innerHTML = html.toString(); | ||
|
||
jest.dontMock('fs'); | ||
|
||
// Run the tests | ||
test("There should be a table element", () => { | ||
const table = document.querySelector("table"); | ||
expect(table).toBeTruthy(); | ||
}); | ||
|
||
test("The table background color should be green", () => { | ||
const table = document.querySelector("table"); | ||
const computedStyles = window.getComputedStyle(table); | ||
expect(computedStyles.backgroundColor).toBe("green"); | ||
}); | ||
|
||
test("There should be two table rows", () => { | ||
const rows = document.querySelectorAll("tr"); | ||
expect(rows.length).toBe(2); | ||
}); |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<!-- Your code here --> |
File renamed without changes.
File renamed without changes.
5 changes: 3 additions & 2 deletions
5
exercises/01.1-Add-a-style-tag/README.es.md → exercises/02.1-add-a-style-tag/README.es.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<!-- add a style tag and select the <p> tag, then make it color "blue" --> | ||
<p> | ||
Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology | ||
around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity, | ||
math, writing, and confidence. | ||
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 2 additions & 1 deletion
3
exercises/01.2-RGBA-colors/README.md → exercises/02.2-rbga-colors/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.