diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 00000000..18991c69 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,35 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node +{ + "name": "Node.js", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", + "customizations": { + "vscode": { + "settings": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "workbench.editorAssociations": { + "*.md": "vscode.markdown.preview.editor" + } + }, + "extensions": ["learn-pack.learnpack-vscode"] + } + }, + + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": {}, + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + + "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" + + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "yarn install", + + // Configure tool-specific properties. + // "customizations": {}, + + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" +} diff --git a/.github/workflows/learnpack-audit.yml b/.github/workflows/learnpack-audit.yml index 52644d89..95814c2a 100644 --- a/.github/workflows/learnpack-audit.yml +++ b/.github/workflows/learnpack-audit.yml @@ -5,9 +5,9 @@ name: Learnpack audit on: push: - branches: [ master ] + branches: [ main ] pull_request: - branches: [ master ] + branches: [ main ] jobs: build: @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [14.x] + node-version: [20.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: diff --git a/.gitignore b/.gitignore index d9d6ec86..b54a1f9f 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ !learn.json !README.md !README.es.md +!.vscode !/exercises !/exercises/* diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 8409faba..6e137a77 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,5 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@24.8.0 -g -RUN npm i @learnpack/learnpack@2.1.20 -g && learnpack plugins:install learnpack-html@0.0.20 +RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7 diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..2f5ad94d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "files.autoSave": "afterDelay", + "files.autoSaveDelay": 700, + "editor.minimap.enabled": false, + "workbench.editorAssociations": { + "*.md": "vscode.markdown.preview.editor" + } +} \ No newline at end of file diff --git a/README.es.md b/README.es.md index 2c8af3bf..23cb7b39 100644 --- a/README.es.md +++ b/README.es.md @@ -17,7 +17,7 @@ ## En este tutorial aprenderás los siguientes conceptos: -1. Usar cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta ` -Click me to open google.com -``` - -Tenemos un enlace de HTML `` que lleva a las personas a google.com cuando se hace clic. -Usamos CSS para selectionar todas las etiquetas `` y luego hacerlas `pink`. - -## 📝 Instrucciones - -1. Pega este código en tu sitio web para ver los resultados. - -## 💻 Vista previa: - -Debería verse así: - -![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true) \ No newline at end of file diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md deleted file mode 100644 index 35efc390..00000000 --- a/exercises/01-Hello-World/README.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" ---- -# `01` Hello World in CSS - -CSS is about styles. To apply styles you always have to follow this steps: - -1. Read the HTML and pick what element do you want to decorate or apply styles to. - -2. Programatically select the element you want to style using CSS Selectors. - -3. Write the styling that you want by using CSS rules. - -That is it! The rest is just semantics! 😁 - -Look at this example: - -```HTML - -Click me to open google.com -``` - -We have an HTML anchor `` that takes people to google.com when clicked. -We use CSS to tell (selected) all the anchor tags and make then pink. - -## 📝 Instructions: - -1. Paste this code on your website to see the results. - -## 💻 Preview: - -It should look like this: - -![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true) diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html deleted file mode 100644 index 93d4ce1c..00000000 --- a/exercises/01-Hello-World/index.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/exercises/01-inline-styles/README.es.md b/exercises/01-inline-styles/README.es.md new file mode 100644 index 00000000..3efe9408 --- /dev/null +++ b/exercises/01-inline-styles/README.es.md @@ -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 +Ir a Google +``` + +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 diff --git a/exercises/01-inline-styles/README.md b/exercises/01-inline-styles/README.md new file mode 100644 index 00000000..f37c0949 --- /dev/null +++ b/exercises/01-inline-styles/README.md @@ -0,0 +1,31 @@ +--- +tutorial: "https://www.youtube.com/watch?v=h9WPp8gPMS8" +--- +# `01` Inline styles + +CSS is about adding styles to our HTML elements. + +The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this: + +```HTML +Go to Google +``` + +This will set the text color of the link above to red, and the font size to 14 pixels. + +In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it. + +To apply styles you always have to follow thеse steps: + +1. Read the HTML and pick what element you want to decorate to apply CSS to it. +2. Apply the style with the `style` attribute as above. + +That is it! The rest is just semantics! 😁 + +## 📝 Instructions: + +1. Set an inline style to change the `background-color` of the table to green. + +## 💡 Hint: + +- How to use `background-color`: https://www.w3schools.com/cssref/pr_background-color.php diff --git a/exercises/03-Inline-Styles/index.html b/exercises/01-inline-styles/index.html similarity index 82% rename from exercises/03-Inline-Styles/index.html rename to exercises/01-inline-styles/index.html index ab36cc54..75056c8e 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/01-inline-styles/index.html @@ -1,7 +1,7 @@ - 03 Inline Styles + 01 Inline Styles diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/01-inline-styles/solution.hide.html similarity index 63% rename from exercises/03-Inline-Styles/solution.hide.html rename to exercises/01-inline-styles/solution.hide.html index 1c3a3828..590621a4 100644 --- a/exercises/03-Inline-Styles/solution.hide.html +++ b/exercises/01-inline-styles/solution.hide.html @@ -1,11 +1,11 @@ - 03 Inline Styles + 01 Inline Styles - +
@@ -14,4 +14,4 @@
Hello
- \ No newline at end of file + diff --git a/exercises/01-inline-styles/tests.js b/exercises/01-inline-styles/tests.js new file mode 100644 index 00000000..a41ccc11 --- /dev/null +++ b/exercises/01-inline-styles/tests.js @@ -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); +}); \ No newline at end of file diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md deleted file mode 100644 index cb1003a4..00000000 --- a/exercises/01.1-The-Style-Tag/README.es.md +++ /dev/null @@ -1,21 +0,0 @@ - -# `01.1` Etiqueta Style - -Si quieres añadir estilos a tu sitio web escribiendo CSS siempre debes hacerlo dentro de una etiqueta ` -``` - -## 📝 Instruccciones: - -1. Añade una etiqueta ` -``` - -## 📝 Instructions - -1. Add a ` -

- 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 coding at a young age prepares them for the future. Coding helps children with communication, creativity, - math,writing, and confidence. -

\ No newline at end of file diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md deleted file mode 100644 index acaa2282..00000000 --- a/exercises/02-Separate-Stylesheet/README.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg" ---- - -# `02` Separate Stylesheet - -If you use the html `` tag, you can also have your styles on a separate file that we usually call `styles.css`. - -That is an even better practice because it lets you have an CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML. - -## 📝 Instructions: - -Fill the `styles.css` with the content needed to make the website body blue. - -## 💡Hint: - -+ Google how to change the `background-color` of a website body. diff --git a/exercises/02-Separate-Stylesheet/solution.hide.css b/exercises/02-Separate-Stylesheet/solution.hide.css deleted file mode 100644 index 5250e305..00000000 --- a/exercises/02-Separate-Stylesheet/solution.hide.css +++ /dev/null @@ -1,7 +0,0 @@ -/* your styles here: - 1. Select the body tag. - 2. Add the background rule equal to blue. - */ -body { - background: blue; -} diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css deleted file mode 100644 index 780be166..00000000 --- a/exercises/02-Separate-Stylesheet/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -/* your styles here: - 1. Select the body tag. - 2. Add the background rule equal to blue. - */ diff --git a/exercises/02-style-tag/README.es.md b/exercises/02-style-tag/README.es.md new file mode 100644 index 00000000..69fe679c --- /dev/null +++ b/exercises/02-style-tag/README.es.md @@ -0,0 +1,38 @@ +--- +tutorial: "https://www.youtube.com/watch?v=9WrVN0rOg_k" +--- +# `02` Style tag in CSS + +Otra manera que existe de aplicar estilos es utilizar una etiqueta ` +Click me to open google.com +``` + +Tenemos un enlace de HTML `` que lleva a las personas a google.com cuando se hace clic. +Usamos CSS para seleccionar todas las etiquetas `` y luego hacerlas rosa (`pink`). + +## 📝 Instrucciones: + +1. Pega este código en tu sitio web para ver los resultados. + +## 💻 Vista previa: + +Debería verse así: + +![Style tag resultado esperado](../../.learn/assets/01-1.png?raw=true) diff --git a/exercises/02-style-tag/README.md b/exercises/02-style-tag/README.md new file mode 100644 index 00000000..40cef99d --- /dev/null +++ b/exercises/02-style-tag/README.md @@ -0,0 +1,38 @@ +--- +tutorial: "https://www.youtube.com/watch?v=iDwXZoQR8EM" +--- +# `02` Style tag in CSS + +Another way to apply styles, is by using a ` +Click me to open google.com +``` + +We have an HTML anchor `` that takes people to google.com when clicked. +We use CSS to select all the anchor tags and make them pink. + +## 📝 Instructions: + +1. Paste this code on your website to see the results. + +## 💻 Preview: + +It should look like this: + +![Style tag expected result](../../.learn/assets/01-1.png?raw=true) diff --git a/exercises/02-style-tag/index.html b/exercises/02-style-tag/index.html new file mode 100644 index 00000000..d88e76dd --- /dev/null +++ b/exercises/02-style-tag/index.html @@ -0,0 +1 @@ + diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/02-style-tag/solution.hide.html similarity index 100% rename from exercises/01-Hello-World/solution.hide.html rename to exercises/02-style-tag/solution.hide.html diff --git a/exercises/01-Hello-World/test.js b/exercises/02-style-tag/test.js similarity index 93% rename from exercises/01-Hello-World/test.js rename to exercises/02-style-tag/test.js index fbe19bf5..479b0469 100644 --- a/exercises/01-Hello-World/test.js +++ b/exercises/02-style-tag/test.js @@ -28,7 +28,7 @@ test("There should be a target attribute pointing to '_blank'", ()=>{ expect(target).toBe("_blank"); }) -test("The anchor tag should not contains any inline style", ()=>{ +test("The anchor tag should not contain any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(a.style._values).toEqual(emptyBodyInlineStyle); -}); \ No newline at end of file +}); diff --git a/exercises/02.1-add-a-style-tag/README.es.md b/exercises/02.1-add-a-style-tag/README.es.md new file mode 100644 index 00000000..8ca6b5f6 --- /dev/null +++ b/exercises/02.1-add-a-style-tag/README.es.md @@ -0,0 +1,24 @@ +--- +tutorial: "https://www.youtube.com/watch?v=rX-0KNBCxrY" +--- + +# `02.1` The Style Tag + +Veamos otro ejemplo pero esta vez agregando la etiqueta ` +``` + +## 📝 Instrucciones: + +1. Añade una etiqueta ` +``` + +## 📝 Instructions + +1. Add a ` +

+ 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. +

diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/02.1-add-a-style-tag/test.js similarity index 75% rename from exercises/01.1-The-Style-Tag/test.js rename to exercises/02.1-add-a-style-tag/test.js index a4be505b..0b3c714b 100644 --- a/exercises/01.1-The-Style-Tag/test.js +++ b/exercises/02.1-add-a-style-tag/test.js @@ -7,16 +7,16 @@ jest.dontMock('fs'); const p = document.querySelector("p"); -test("There should be a p tag", ()=>{ +test("There should be a

tag", ()=>{ expect(p).toBeTruthy(); }) -test("The p tag color should be blue", ()=>{ +test("The

tag color should be blue", ()=>{ let styles = window.getComputedStyle(p); expect(styles["color"]).toBe("blue"); }); -test("The p tag should not contain any inline style", ()=>{ +test("The

tag should not contain any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(p.style._values).toEqual(emptyBodyInlineStyle); -}); \ No newline at end of file +}); diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/02.2-rbga-colors/README.es.md similarity index 78% rename from exercises/01.2-Your-First-Style/README.es.md rename to exercises/02.2-rbga-colors/README.es.md index 1b8ce317..e448639a 100644 --- a/exercises/01.2-Your-First-Style/README.es.md +++ b/exercises/02.2-rbga-colors/README.es.md @@ -1,6 +1,10 @@ -# `01.2` Tu Primer Estilo +--- +tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI" +--- -Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle. +# `02.2` Your First Style + +Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: Por ejemplo, este es el código si quiero que todos los `anchors` de mi sitio web (etiquetas ``) sean azules (`blue`): diff --git a/exercises/01.2-Your-First-Style/README.md b/exercises/02.2-rbga-colors/README.md similarity index 52% rename from exercises/01.2-Your-First-Style/README.md rename to exercises/02.2-rbga-colors/README.md index f66e2d25..a47fb128 100644 --- a/exercises/01.2-Your-First-Style/README.md +++ b/exercises/02.2-rbga-colors/README.md @@ -1,12 +1,12 @@ --- -tutorial: "https://www.youtube.com/watch?v=8b12AFC6bWs" +tutorial: "https://www.youtube.com/watch?v=TqmY9GLTwQ0" --- -# `01.2` Your First Style +# `02.2` Your First Style When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: -For example, this is the code if you want to make all my website anchors (` tag's`) blue: +For example, this is the code if you want to make all your website anchors (`` tags) blue: ```css a { @@ -16,6 +16,6 @@ a { ## 📝 Instructions: -1. Right now there is a style being applied that is responsable of making the anchor `red`. +1. Right now there is a style being applied that is responsible for making the anchor `red`. 2. Change the style to make your anchor look `yellow`. diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/02.2-rbga-colors/index.html similarity index 100% rename from exercises/01.2-Your-First-Style/index.html rename to exercises/02.2-rbga-colors/index.html diff --git a/exercises/01.2-Your-First-Style/solution.hide.html b/exercises/02.2-rbga-colors/solution.hide.html similarity index 100% rename from exercises/01.2-Your-First-Style/solution.hide.html rename to exercises/02.2-rbga-colors/solution.hide.html diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/02.2-rbga-colors/tests.js similarity index 87% rename from exercises/01.2-Your-First-Style/tests.js rename to exercises/02.2-rbga-colors/tests.js index 0eabdf65..32bf609b 100644 --- a/exercises/01.2-Your-First-Style/tests.js +++ b/exercises/02.2-rbga-colors/tests.js @@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{ expect(styles["color"]).toBe("yellow"); }); - test("The body tag should not contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ let bodyInlineStyle = document.getElementsByTagName("body"); let emptyBodyInlineStyle = {}; expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); @@ -24,7 +24,7 @@ describe("All the styles should be applied", ()=>{ expect(a.style._values).toEqual(emptyBodyInlineStyle); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/02.3-your-second-style/README.es.md similarity index 60% rename from exercises/01.3-Your-Second-Style/README.es.md rename to exercises/02.3-your-second-style/README.es.md index 267c8149..a6e3630c 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/02.3-your-second-style/README.es.md @@ -1,8 +1,12 @@ -# `01.3` Tu Segundo Estilo +--- +tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8" +--- + +# `02.3` Your Second Style Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: -Por ejemplo, este es el código si quiero que todos las anchors de mi sitio web (`etiquetas `) sean azules: +Por ejemplo, este es el código si quiero que todos los anchors de mi sitio web (etiquetas ``) sean azules: ```css a { @@ -14,4 +18,4 @@ a { 1. Haz que el fondo de tu sitio web sea azul (blue) seleccionando el `body` y aplicando la regla `background` con valor `blue`. -2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul (`blue`), es decir toda la página azul. +2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un `body` azul (`blue`), es decir, toda la página azul. diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/02.3-your-second-style/README.md similarity index 56% rename from exercises/01.3-Your-Second-Style/README.md rename to exercises/02.3-your-second-style/README.md index d0c5263d..8918e346 100644 --- a/exercises/01.3-Your-Second-Style/README.md +++ b/exercises/02.3-your-second-style/README.md @@ -1,12 +1,12 @@ --- -tutorial: "https://www.youtube.com/watch?v=W0CAqLIAoZI" +tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds" --- -# `01.3` Your Second Style +# `02.3` Your Second Style When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: -For example, this is the code if I want to make all my website anchors (` tag's`) blue: +For example, this is the code if you want to make all your website anchors (`` tags) blue: ```css a { @@ -18,4 +18,4 @@ a { 1. Make your website background blue by selecting the `body` and applying the `background` rule with a `blue` value. -2. Build and preview the exercise and your result should be a blue `body` (the whole page blue). +2. Run and preview the exercise and your result should be a blue `body` (the whole page blue). diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/02.3-your-second-style/index.html similarity index 100% rename from exercises/01.3-Your-Second-Style/index.html rename to exercises/02.3-your-second-style/index.html diff --git a/exercises/01.3-Your-Second-Style/solution.hide.html b/exercises/02.3-your-second-style/solution.hide.html similarity index 100% rename from exercises/01.3-Your-Second-Style/solution.hide.html rename to exercises/02.3-your-second-style/solution.hide.html diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/02.3-your-second-style/tests.js similarity index 92% rename from exercises/01.3-Your-Second-Style/tests.js rename to exercises/02.3-your-second-style/tests.js index 147aabc5..8b52f01d 100644 --- a/exercises/01.3-Your-Second-Style/tests.js +++ b/exercises/02.3-your-second-style/tests.js @@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{ expect(styles["background"]).toBe("blue"); }); - test("The body tag should not contains any inline style", ()=>{ + test("The body tag should not contain any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(body.style._values).toEqual(emptyBodyInlineStyle); }); diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md deleted file mode 100644 index 337d5d37..00000000 --- a/exercises/03-Inline-Styles/README.es.md +++ /dev/null @@ -1,28 +0,0 @@ -# `03` Inline Styles (estilos en la línea) - -Los estilos `inline` son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento. - -Para usar estilos inline, en lugar de declarar una etiqueta ``; let emptyBodyInlineStyle={}; expect(body.style._values).toEqual(emptyBodyInlineStyle) }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() @@ -27,7 +27,7 @@ describe("All the styles should be applied", ()=>{ expect(href).toEqual('./styles.css') }); - test("Your body tag background color should be blue", ()=>{ + test("Your tag background color should be blue", ()=>{ let styles = window.getComputedStyle(body) expect(styles["background-color"]).toBe("blue") }) diff --git a/exercises/02.1-Background/README.es.md b/exercises/03.1-background/README.es.md similarity index 54% rename from exercises/02.1-Background/README.es.md rename to exercises/03.1-background/README.es.md index 45a32554..e0af7277 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/03.1-background/README.es.md @@ -1,8 +1,12 @@ -# `02.1` Background (fondo) +--- +tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4" +--- -La regla `background` del CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. +# `03.1` Background -Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades eso puede modificarse. +La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. + +Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades, eso puede modificarse. ## 📝 Instrucciones: @@ -14,14 +18,14 @@ Si es una imagen, puedes especificar si quieres que la imagen se repita horizont 4. Construye y previsualiza el ejercicio nuevamente. -5. Cambia el `background-repeat` a `inherit` para que se repita sobre el eje x y el eje y. +5. Cambia el `background-repeat` a `repeat` para que se repita sobre el eje x y el eje y. 6. Construye y previsualiza el ejercicio nuevamente. -## 💡Pista: +## 💡 Pista: Google es tu mejor amigo: - Recomendamos buscar en google `css background-size` para entender un poco mejor esta propiedad. -- Tambien recomendamos buscar el `css background-repeat` +- También recomendamos buscar `css background-repeat` diff --git a/exercises/02.1-Background/README.md b/exercises/03.1-background/README.md similarity index 63% rename from exercises/02.1-Background/README.md rename to exercises/03.1-background/README.md index 3ae8139b..3580ab7e 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/03.1-background/README.md @@ -1,8 +1,8 @@ --- -tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8" +tutorial: "https://www.youtube.com/watch?v=fQh2OulBSp8" --- -# `02.1` Background +# `03.1` Background The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`. @@ -10,23 +10,22 @@ If it is an image, you can specify if you want the image to be repeated horizont ## 📝 Instructions: - -1. Build the exercise. +1. Run the exercise. 2. Check the Preview. 3. On the styles.css file change the background-size to 'contain' (check the styles.css tab). -4. Build and Preview the exercise again. +4. Run and Preview the exercise again. -5. Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis. +5. Change the background-repeat to 'repeat' to make it repeat over the x-axis and y-axis. -6. Build and Preview the exercise again. +6. Run and Preview the exercise again. -## 💡Hint: +## 💡 Hint: Google is your best friend: -- We recommend googling: `css background-size` and reading about it on w3schools and some other websites. -- We also recommend googleing about `css background-repeat`. +- We recommend googling: `css background-size` and reading about it on w3schools or any other websites. +- We also recommend googling about `css background-repeat`. diff --git a/exercises/02.1-Background/index.html b/exercises/03.1-background/index.html similarity index 58% rename from exercises/02.1-Background/index.html rename to exercises/03.1-background/index.html index ce03ce24..a1227330 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/03.1-background/index.html @@ -2,9 +2,9 @@ - 02 Background + 03.1 Background - My background should be an image with th size "contain" + My background should be an image with the size "contain" diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/03.1-background/solution.hide.css similarity index 81% rename from exercises/02.1-Background/solution.hide.css rename to exercises/03.1-background/solution.hide.css index 8c72a684..a2c6b305 100644 --- a/exercises/02.1-Background/solution.hide.css +++ b/exercises/03.1-background/solution.hide.css @@ -1,5 +1,5 @@ body { background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); background-size: contain; - background-repeat: inherit; -} \ No newline at end of file + background-repeat: repeat; +} diff --git a/exercises/02.1-Background/styles.css b/exercises/03.1-background/styles.css similarity index 100% rename from exercises/02.1-Background/styles.css rename to exercises/03.1-background/styles.css diff --git a/exercises/02.1-Background/tests.js b/exercises/03.1-background/tests.js similarity index 82% rename from exercises/02.1-Background/tests.js rename to exercises/03.1-background/tests.js index b223105f..f6f28551 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/03.1-background/tests.js @@ -11,7 +11,7 @@ describe("All the styles should be applied", ()=>{ const link = document.querySelector("link"); const title = document.querySelector('title'); - test("The body tag should not contains any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ document.querySelector( "head" ).innerHTML = ``; @@ -28,16 +28,16 @@ describe("All the styles should be applied", ()=>{ expect(styles["background-size"]).toBe("contain"); }); - test("the background-repeat should be 'inherit' without quotes", ()=>{ + test("the background-repeat should be 'repeat' without quotes", ()=>{ document.querySelector( "head" ).innerHTML = ``; let styles = window.getComputedStyle(body); - expect(styles["background-repeat"]).toBe("inherit"); + expect(styles["background-repeat"]).toBe("repeat"); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() @@ -48,6 +48,6 @@ describe("All the styles should be applied", ()=>{ expect(href).toBe('./styles.css') let titleInner = title.innerHTML - expect(titleInner).toBe('02 Background') + expect(titleInner).toBe('03.1 Background') }) }); diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md deleted file mode 100644 index e8d66db1..00000000 --- a/exercises/04-Class-Selector/README.es.md +++ /dev/null @@ -1,23 +0,0 @@ -# `04` El selector de clase - -Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector `.class`: - -## Selector de clase: - -Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. - -Usa la propiedad de clase del elemento HTML para seleccionarlo. La reglas de estilo se aplicarán a todos los elementos con la misma clase. - -```css -.small{ - font-size: 9px; -} -``` -*Cualquier etiqueta html con `class="small"` tendrá un font-size de `9px`.* - -## 📝 Instrucciones: - -En este momento hay una clase seleccionada en el CSS llamada -`.b-blue`. - -Por favor aplica la clase a ambas etiquetas HTML `

`. diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md deleted file mode 100644 index 238942e1..00000000 --- a/exercises/04-Class-Selector/README.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=RffCSMXgWFc" ---- - -# `04` Class Selector - -There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag` selector, lets talk about the `.class` selector: - -## `.class` Selector - -It is the most popular css selector, you will probably use it every 5 minutes. - -Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value - -```css -.small{ - font-size: 9px; -} -``` - -*Any html tag with the `class="small"` will have a font-size of `9px`.* - -## 📝 Instructions: - -Right now there is a class selected on the CSS that is called `.b-blue`. - -Please apply that class to both of the `

` tags in HTML. - - diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md new file mode 100644 index 00000000..f67abca2 --- /dev/null +++ b/exercises/04-list-styling/README.es.md @@ -0,0 +1,42 @@ +--- +tutorial: "https://www.youtube.com/watch?v=qcx31wUVmqI" +--- + +# `04` List styling + +En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `