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

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

`, para listas desordenadas o con viñetas, y las etiquetas `
` para listas ordenadas o numeradas. - -Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc. - -Por ejemplo: - -```HTML -ul { - list-style-type: none; - margin: 0; - padding: 0; -} -``` - -Eliminará los números o viñetas y moverá el texto hacia la izquierda para que no haya espacio vacío donde una vez estuvieron las viñetas. - -**Nota:** - -Construye el código existente primero para ver cómo se ve originalmente la página. -Luego, realiza los cambios a continuación y construye de nuevo. - -## 📝 Instrucciones: - -1. Convierte los números de las bebidas Coca Cola en letras minúsculas. -2. Convierte los números de las bebidas Pepsi en viñetas cuadradas. -3. Convierte las viñetas de las bebidas Saludables en números armenios. :) -4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks. diff --git a/exercises/03-list-styling/README.md b/exercises/03-list-styling/README.md deleted file mode 100644 index 76d5b0cb..00000000 --- a/exercises/03-list-styling/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# `03` List styling - -In the front end we often have to list items and the way to do that is with `
` tags, for unordered/bulleted lists, and `
` tags for ordered/numbered lists. - -We have CSS control over what these lists look like, what bullets or numbers they use, etc. - -For example: - -```HTML - ul { - list-style-type: none; - margin: 0; - padding: 0; - } -``` - -Will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. - -**Note:** - -Build the existing code first to see what the page originally looks like. -Then make the changes below and build again. - -## 📝 Instructions: - - -1. Make the Coca Cola drink numbers into lower case letters. -2. Make the Pepsi drink numbers into square bullets. -3. Make the Healthy drink bullets into Armenian numbers. :) -4. Completely remove the bullets and extra spacing from the Web-developer drinks. - -### 💡 Hint: - -- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp -- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the html tags may be necessary. -- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp \ No newline at end of file diff --git a/exercises/03-list-styling/test.js b/exercises/03-list-styling/test.js deleted file mode 100644 index c8939872..00000000 --- a/exercises/03-list-styling/test.js +++ /dev/null @@ -1,42 +0,0 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); - -jest.dontMock("fs"); - -describe("The lists should be modified accordingly", function() { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); - }); - afterEach(() => { - jest.resetModules(); - }); - - it("You should not change the existing head tag elements", function () { - let head = document.querySelector('head'); - let title = head.querySelector('title').innerHTML; - - expect(title).toBe('03 List styling') - }) - - // Test in progress: - // it("The lists should be correctly styled", function() { - // const uls = document.querySelectorAll("ul"); - // const ols = document.querySelectorAll("ol"); - // console.log(uls); - // console.log(ols); - - // var style1 = window.getComputedStyle(ols[0]); - // var style2 = window.getComputedStyle(uls[0]); - // var style3 = window.getComputedStyle(ols[1]); - // var style4 = window.getComputedStyle(uls[1]); - - - // expect(style1["listStyleType"]).toBe("lower-alpha"); - // expect(style2["listStyleType"]).toBe("square"); - // expect(style3["listStyleType"]).toBe("armenian"); - // expect(style4["listStyleType"]).toBe("none"); - - // }); -}); \ No newline at end of file diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/03-separate-stylesheet/README.es.md similarity index 85% rename from exercises/02-Separate-Stylesheet/README.es.md rename to exercises/03-separate-stylesheet/README.es.md index d0e74a41..4f1023ec 100644 --- a/exercises/02-Separate-Stylesheet/README.es.md +++ b/exercises/03-separate-stylesheet/README.es.md @@ -1,4 +1,8 @@ -# `02` Separate Stylesheet +--- +tutorial: "https://www.youtube.com/watch?v=MmnkVGINtbs" +--- + +# `03` Separate Stylesheet Si usas la etiqueta html ``, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`. diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/03-separate-stylesheet/README.md similarity index 85% rename from exercises/02-Separate-Stylesheet/README.md rename to exercises/03-separate-stylesheet/README.md index 7c4637c1..cbb2645a 100644 --- a/exercises/02-Separate-Stylesheet/README.md +++ b/exercises/03-separate-stylesheet/README.md @@ -1,8 +1,8 @@ --- -tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg" +tutorial: "https://www.youtube.com/watch?v=jAfXzx88i-4" --- -# `02` Separate Stylesheet +# `03` Separate Stylesheet If you use the html `` tag, you can also have your styles on a separate file that we usually call `styles.css`. diff --git a/exercises/02-Separate-Stylesheet/index.html b/exercises/03-separate-stylesheet/index.html similarity index 100% rename from exercises/02-Separate-Stylesheet/index.html rename to exercises/03-separate-stylesheet/index.html diff --git a/exercises/03-separate-stylesheet/solution.hide.css b/exercises/03-separate-stylesheet/solution.hide.css new file mode 100644 index 00000000..b1ea9493 --- /dev/null +++ b/exercises/03-separate-stylesheet/solution.hide.css @@ -0,0 +1,7 @@ +/* your styles here: + 1. Select the body tag + 2. Add the background rule equal to blue + */ +body { + background: blue; +} diff --git a/exercises/03-separate-stylesheet/styles.css b/exercises/03-separate-stylesheet/styles.css new file mode 100644 index 00000000..fb551ff2 --- /dev/null +++ b/exercises/03-separate-stylesheet/styles.css @@ -0,0 +1,4 @@ +/* your styles here: + 1. Select the body tag + 2. Add the background rule equal to blue + */ diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/03-separate-stylesheet/tests.js similarity index 100% rename from exercises/02-Separate-Stylesheet/tests.js rename to exercises/03-separate-stylesheet/tests.js diff --git a/exercises/02.1-Background/README.es.md b/exercises/03.1-background/README.es.md similarity index 92% rename from exercises/02.1-Background/README.es.md rename to exercises/03.1-background/README.es.md index 561e0451..e0af7277 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/03.1-background/README.es.md @@ -1,4 +1,8 @@ -# `02.1` Background +--- +tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4" +--- + +# `03.1` Background 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`. diff --git a/exercises/02.1-Background/README.md b/exercises/03.1-background/README.md similarity index 82% rename from exercises/02.1-Background/README.md rename to exercises/03.1-background/README.md index afbfa795..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,18 +10,17 @@ 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 '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: diff --git a/exercises/02.1-Background/index.html b/exercises/03.1-background/index.html similarity index 85% rename from exercises/02.1-Background/index.html rename to exercises/03.1-background/index.html index cf841f1e..a1227330 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/03.1-background/index.html @@ -2,7 +2,7 @@ - + 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 100% rename from exercises/02.1-Background/solution.hide.css rename to exercises/03.1-background/solution.hide.css 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 97% rename from exercises/02.1-Background/tests.js rename to exercises/03.1-background/tests.js index b0612a23..f6f28551 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/03.1-background/tests.js @@ -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-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 `
`, para listas desordenadas o con viñetas, y las etiquetas `
` para listas ordenadas o numeradas. + +Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc. + +Por ejemplo: + +```html +ul { + list-style-type: none; + margin: 0; + padding: 0; +} +``` + +Eliminará los números o viñetas y moverá el texto hacia la izquierda para que no haya espacio vacío donde una vez estuvieron las viñetas. + +**Nota:** + +Ejecuta el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. + +## 📝 Instrucciones: + +La regla `list-style-type` tiene muchos valores interesantes, utilizala para lograr: + +1. Conviertir los números de las bebidas de Coca Cola en letras minúsculas (Usa `lower-alpha`). +2. Conviertir los números de las bebidas de Pepsi en viñetas cuadradas. +3. Conviertir las viñetas de las bebidas Saludables en números armenios. +4. Eliminar completamente las viñetas de las bebidas de web-developer. + +## 💡 Pistas: + +- Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp +- Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. +- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp +- `lower-alpha` es un valor posible real de `list-style-type`. + diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md new file mode 100644 index 00000000..6a9cb5d7 --- /dev/null +++ b/exercises/04-list-styling/README.md @@ -0,0 +1,42 @@ +--- +tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs" +--- + +# `04` List styling + +In the front end, we often have to list items, and the way to do that is with `
` tags, for unordered/bulleted lists, and `
` tags for ordered/numbered lists. + +We have CSS control over what these lists look like, what bullets or numbers they use, etc. + +For example: + +```html + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +``` + +This will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. + +**Note:** + +Run the existing code first to see what the page originally looks like. +Then make the changes below and run again. + +## 📝 Instructions: + +Use the CSS rule `list-style-type` and CSS to: + +1. Turn the Coca Cola drinks numbers into lowercase letters (Use `lower-alpha`) +2. Turn the Pepsi drinks numbers into square bullets. +3. Make the Healthy drinks bullets into Armenian numbers. +4. Completely remove the bullets from the web-developer drinks. + +## 💡 Hints: + +- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp +- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the HTML tags may be necessary. +- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp + diff --git a/exercises/03-list-styling/index.html b/exercises/04-list-styling/index.html similarity index 96% rename from exercises/03-list-styling/index.html rename to exercises/04-list-styling/index.html index f2da1ba2..2eb502ea 100644 --- a/exercises/03-list-styling/index.html +++ b/exercises/04-list-styling/index.html @@ -5,7 +5,7 @@ - + diff --git a/exercises/04-list-styling/solution.hide.css b/exercises/04-list-styling/solution.hide.css new file mode 100644 index 00000000..c0cd286f --- /dev/null +++ b/exercises/04-list-styling/solution.hide.css @@ -0,0 +1,30 @@ +body { + height: 100vh; + background: rgb(189, 189, 189); +} + +.container { + font-family: "Comic Sans MS", "Comic Sans", cursive; + margin: 0 auto; + width: 70vw; + box-shadow: 3px 5px 20px #312f2f; + background-color: white; + padding: 120px; + width: 300px; +} + +.cocacola { + list-style-type: lower-alpha; +} + +.pepsi { + list-style-type: square; +} + +.healthy { + list-style-type: armenian; +} + +.dev-drinks { + list-style-type: none; +} diff --git a/exercises/03-list-styling/styles.css b/exercises/04-list-styling/styles.css similarity index 100% rename from exercises/03-list-styling/styles.css rename to exercises/04-list-styling/styles.css diff --git a/exercises/04-list-styling/test.js b/exercises/04-list-styling/test.js new file mode 100644 index 00000000..c8d27b1c --- /dev/null +++ b/exercises/04-list-styling/test.js @@ -0,0 +1,39 @@ +const fs = require("fs"); +const path = require("path"); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); + +jest.dontMock("fs"); + +describe("CSS Styles", () => { + beforeAll(() => { + document.querySelector("head").innerHTML = ``; + }); + + test("Cocacola list style should be applied correctly", () => { + const cocacolaItems = document.querySelectorAll(".cocacola"); + cocacolaItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("lower-alpha"); + }); + }); + + test("Pepsi list style should be applied correctly", () => { + const pepsiItems = document.querySelectorAll(".pepsi"); + pepsiItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("square"); + }); + }); + + test("Healthy list style should be applied correctly", () => { + const healthyItems = document.querySelectorAll(".healthy"); + healthyItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("armenian"); + }); + }); + + test("Dev-drinks list style should be applied correctly", () => { + const devDrinksItems = document.querySelectorAll(".dev-drinks"); + devDrinksItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("none"); + }); + }); +}); diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/05-class-selector/README.es.md similarity index 73% rename from exercises/04-Class-Selector/README.es.md rename to exercises/05-class-selector/README.es.md index 6d5c8a2e..4214af34 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/05-class-selector/README.es.md @@ -1,4 +1,8 @@ -# `04` Class Selector +--- +tutorial: "https://www.youtube.com/watch?v=0I_xSAQ3vNs" +--- + +# `05` Class Selector Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado los selectores de etiquetas, así que hablemos sobre el selector `.class`: @@ -13,11 +17,11 @@ Usa la propiedad `class` del elemento HTML para seleccionarlo. Las reglas de est 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`. +1. En este momento hay una clase seleccionada en el CSS llamada `b-blue`. -Por favor aplica la clase a ambas etiquetas HTML `

`. +2. Por favor aplica la clase a ambas etiquetas HTML `

`. diff --git a/exercises/04-Class-Selector/README.md b/exercises/05-class-selector/README.md similarity index 71% rename from exercises/04-Class-Selector/README.md rename to exercises/05-class-selector/README.md index 6b6dd8ec..eea336a9 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/05-class-selector/README.md @@ -1,8 +1,8 @@ --- -tutorial: "https://www.youtube.com/watch?v=RffCSMXgWFc" +tutorial: "https://www.youtube.com/watch?v=moLgdg7x84U" --- -# `04` Class Selector +# `05` Class Selector There are many ways to select HTML elements to apply styles to them, so far we have only used the `tag` selector, so let's talk about the `.class` selector: @@ -22,8 +22,8 @@ Use the class property of the HTML element to select it. Styling rules will appl ## 📝 Instructions: -Right now there is a class selected on the CSS that is called `b-blue`. +1. Right now there is a class selected on the CSS that is called `b-blue`. -Please apply that class to both of the HTML `

` tags. +2. Please apply that class to both of the HTML `

` tags. diff --git a/exercises/04-Class-Selector/index.html b/exercises/05-class-selector/index.html similarity index 82% rename from exercises/04-Class-Selector/index.html rename to exercises/05-class-selector/index.html index 45709afb..03662721 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/05-class-selector/index.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04-Class-Selector/solution.hide.html b/exercises/05-class-selector/solution.hide.html similarity index 84% rename from exercises/04-Class-Selector/solution.hide.html rename to exercises/05-class-selector/solution.hide.html index 60e1d67f..b9223582 100644 --- a/exercises/04-Class-Selector/solution.hide.html +++ b/exercises/05-class-selector/solution.hide.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04-Class-Selector/styles.css b/exercises/05-class-selector/styles.css similarity index 100% rename from exercises/04-Class-Selector/styles.css rename to exercises/05-class-selector/styles.css diff --git a/exercises/04-Class-Selector/test.js b/exercises/05-class-selector/test.js similarity index 96% rename from exercises/04-Class-Selector/test.js rename to exercises/05-class-selector/test.js index 320b80ea..36108cbd 100644 --- a/exercises/04-Class-Selector/test.js +++ b/exercises/05-class-selector/test.js @@ -17,7 +17,7 @@ describe("Both

tags should have a blue background", () => { expect(meta).toBe(null) let title = head.querySelector('title').innerHTML - expect(title).toBe('04 Class selector') + expect(title).toBe('05 Class selector') }); test("The tag should not contain any inline style", () => { diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/05.1-combined-rules/README.es.md similarity index 81% rename from exercises/04.1-Combined-Rules/README.es.md rename to exercises/05.1-combined-rules/README.es.md index c116f5cb..8e735e07 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/05.1-combined-rules/README.es.md @@ -1,4 +1,8 @@ -# `04.1` Combined Rules +--- +tutorial: "https://www.youtube.com/watch?v=NYlPhkmqgmU" +--- + +# `05.1` Combined Rules Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible. @@ -31,8 +35,8 @@ background: 50px / cover Donde el valor de la izquierda de la barra `/` es la propiedad `background-position` y la derecha es el `background-size`. -## 💡 Pista: +## 💡 Pistas: -- Cómo usar el background: https://www.w3schools.com/cssref/css3_pr_background.php +- Cómo usar `background`: https://www.w3schools.com/cssref/css3_pr_background.php -- Cómo usar el padding: https://www.w3schools.com/css/css_padding.asp +- Cómo usar `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/05.1-combined-rules/README.md similarity index 81% rename from exercises/04.1-Combined-Rules/README.md rename to exercises/05.1-combined-rules/README.md index b75e02dd..55bd0c87 100644 --- a/exercises/04.1-Combined-Rules/README.md +++ b/exercises/05.1-combined-rules/README.md @@ -1,4 +1,8 @@ -# `04.1` Combined Rules +--- +tutorial: "https://www.youtube.com/watch?v=VTOwd98T6FY" +--- + +# `05.1` Combined Rules CSS files take up space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why it's important to keep the CSS document as small as possible. @@ -30,8 +34,8 @@ background: 50px / cover Where the left side value of the forward slash `/` is the `background-position` rule and the right value is the `background-size` rule. -## 💡 Hint: +## 💡 Hints: -- How to use the background: https://www.w3schools.com/cssref/css3_pr_background.php +- How to use `background`: https://www.w3schools.com/cssref/css3_pr_background.php -- How to use the padding: https://www.w3schools.com/css/css_padding.asp +- How to use `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/05.1-combined-rules/index.html similarity index 81% rename from exercises/04.1-Combined-Rules/index.html rename to exercises/05.1-combined-rules/index.html index 1525b6cf..bca34a30 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/05.1-combined-rules/index.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04.1-Combined-Rules/solution.hide.css b/exercises/05.1-combined-rules/solution.hide.css similarity index 100% rename from exercises/04.1-Combined-Rules/solution.hide.css rename to exercises/05.1-combined-rules/solution.hide.css diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/05.1-combined-rules/styles.css similarity index 100% rename from exercises/04.1-Combined-Rules/styles.css rename to exercises/05.1-combined-rules/styles.css diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/05.1-combined-rules/tests.js similarity index 100% rename from exercises/04.1-Combined-Rules/tests.js rename to exercises/05.1-combined-rules/tests.js diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/05.2-apply-several-classes/README.es.md similarity index 74% rename from exercises/04.2-Apply-several-classes/README.es.md rename to exercises/05.2-apply-several-classes/README.es.md index fc6b5b80..89efee60 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/05.2-apply-several-classes/README.es.md @@ -1,4 +1,9 @@ -# `04.2` Apply several classes +--- +tutorial: "https://www.youtube.com/watch?v=CaSytmRcVGM" +--- + + +# `05.2` Apply several classes Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. @@ -16,9 +21,8 @@ Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y ha ## 📝 Instrucciones: -Reemplaza la propiedad `spades` de la clase del `

` por la clase `heart` y observa los resultados. - +1. Reemplaza la propiedad `spades` de la clase del `

` por la clase `heart` y observa los resultados. -## Resultado: +## 💻 Resultado esperado:  diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md similarity index 75% rename from exercises/04.2-Apply-several-classes/README.md rename to exercises/05.2-apply-several-classes/README.md index c98cf025..009f5997 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -1,8 +1,8 @@ --- -tutorial: "https://www.youtube.com/watch?v=da4tJDx48CY" +tutorial: "https://www.youtube.com/watch?v=RISEpELEzEk" --- -# `04.2` Apply several classes +# `05.2` Apply several classes We have prepared a small CSS Stylesheet that contains the CSS styles to replicate poker cards. @@ -20,9 +20,8 @@ There are two possible suite classes you can apply to the html element to make i ## 📝 Instructions: -Replace the class property `spades` of the `

` with the class `heart` and look at the results. +1. Replace the class property `spades` of the `

` with the class `heart` and look at the results. - -## Expected result: +## 💻 Expected result:  diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/05.2-apply-several-classes/index.html similarity index 100% rename from exercises/04.2-Apply-several-classes/index.html rename to exercises/05.2-apply-several-classes/index.html diff --git a/exercises/04.2-Apply-several-classes/solution.hide.html b/exercises/05.2-apply-several-classes/solution.hide.html similarity index 78% rename from exercises/04.2-Apply-several-classes/solution.hide.html rename to exercises/05.2-apply-several-classes/solution.hide.html index 95de441b..3ded6c25 100644 --- a/exercises/04.2-Apply-several-classes/solution.hide.html +++ b/exercises/05.2-apply-several-classes/solution.hide.html @@ -2,7 +2,7 @@ - + diff --git a/exercises/04.2-Apply-several-classes/styles.css b/exercises/05.2-apply-several-classes/styles.css similarity index 100% rename from exercises/04.2-Apply-several-classes/styles.css rename to exercises/05.2-apply-several-classes/styles.css diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/05.2-apply-several-classes/test.js similarity index 100% rename from exercises/04.2-Apply-several-classes/test.js rename to exercises/05.2-apply-several-classes/test.js diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/05.3-id-selector/README.es.md similarity index 83% rename from exercises/04.3-id-Selector/README.es.md rename to exercises/05.3-id-selector/README.es.md index c9e5a36c..3c6d469a 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/05.3-id-selector/README.es.md @@ -1,4 +1,9 @@ -# `04.3` The ID CSS Selector +--- +tutorial: "https://www.youtube.com/watch?v=tUpL6lUJItk" +--- + + +# `05.3` The ID CSS Selector También puedes seleccionar un elemento por su `#id` y aplicarle estilos. diff --git a/exercises/04.3-id-Selector/README.md b/exercises/05.3-id-selector/README.md similarity index 84% rename from exercises/04.3-id-Selector/README.md rename to exercises/05.3-id-selector/README.md index 377f6c8c..9955f1a1 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/05.3-id-selector/README.md @@ -1,8 +1,8 @@ --- -tutorial: "https://www.youtube.com/watch?v=9906LCSQJ8M" +tutorial: "https://www.youtube.com/watch?v=DtMVtGdStKw" --- -# `04.3` The ID CSS Selector +# `05.3` The ID CSS Selector You can also select an element by `#id` and apply styles to it. diff --git a/exercises/04.3-id-Selector/index.html b/exercises/05.3-id-selector/index.html similarity index 90% rename from exercises/04.3-id-Selector/index.html rename to exercises/05.3-id-selector/index.html index 5b9a773d..0acb4a27 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/05.3-id-selector/index.html @@ -3,7 +3,7 @@ diff --git a/exercises/04.3-id-Selector/solution.hide.html b/exercises/05.3-id-selector/solution.hide.html similarity index 91% rename from exercises/04.3-id-Selector/solution.hide.html rename to exercises/05.3-id-selector/solution.hide.html index a7964559..2e7928b7 100644 --- a/exercises/04.3-id-Selector/solution.hide.html +++ b/exercises/05.3-id-selector/solution.hide.html @@ -3,7 +3,7 @@ diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/05.3-id-selector/styles.css similarity index 100% rename from exercises/04.3-id-Selector/styles.css rename to exercises/05.3-id-selector/styles.css diff --git a/exercises/04.3-id-Selector/test.js b/exercises/05.3-id-selector/test.js similarity index 100% rename from exercises/04.3-id-Selector/test.js rename to exercises/05.3-id-selector/test.js diff --git a/exercises/05-Specificity/README.es.md b/exercises/06-specificity/README.es.md similarity index 85% rename from exercises/05-Specificity/README.es.md rename to exercises/06-specificity/README.es.md index ceeca044..8bcfcfbe 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/06-specificity/README.es.md @@ -1,10 +1,9 @@ -# `05` Specificity +# `06` Specificity Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS. Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡Y punto! - *Porque cuanto más específico, más prioridad tiene.* ## 📝 Instrucciones: @@ -13,4 +12,4 @@ Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="th ## 💡 Pista: -+ Puedes usar la notación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/ ++ Puedes usar la notación `!important` : https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/README.md b/exercises/06-specificity/README.md similarity index 92% rename from exercises/05-Specificity/README.md rename to exercises/06-specificity/README.md index f1edfa0f..1209b477 100644 --- a/exercises/05-Specificity/README.md +++ b/exercises/06-specificity/README.md @@ -2,11 +2,10 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" --- -# `05` Specificity +# `06` Specificity When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works. - It's all about the level of **specificity**. If you specify that your `div` with `id="thirditem` has a yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto! *Because the more specific, the more priority it has.* @@ -15,10 +14,9 @@ It's all about the level of **specificity**. If you specify that your `div` with 1. Override the `background` of `#thirditem` without deleting any CSS code, simply append to the CSS a more specific rule at the end of the document to override the background-color to green. - ## 💡 Hint: -You can use the **!important** annotation: +You can use the `!important` annotation: https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/index.html b/exercises/06-specificity/index.html similarity index 93% rename from exercises/05-Specificity/index.html rename to exercises/06-specificity/index.html index 154a071a..e8a9b98d 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/06-specificity/index.html @@ -4,7 +4,7 @@ - +

diff --git a/exercises/05-Specificity/solution.hide.css b/exercises/06-specificity/solution.hide.css similarity index 100% rename from exercises/05-Specificity/solution.hide.css rename to exercises/06-specificity/solution.hide.css diff --git a/exercises/05-Specificity/styles.css b/exercises/06-specificity/styles.css similarity index 100% rename from exercises/05-Specificity/styles.css rename to exercises/06-specificity/styles.css diff --git a/exercises/05-Specificity/tests.js b/exercises/06-specificity/tests.js similarity index 100% rename from exercises/05-Specificity/tests.js rename to exercises/06-specificity/tests.js diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/07-practicing-rules/README.es.md similarity index 87% rename from exercises/06-Practicing-Rules/README.es.md rename to exercises/07-practicing-rules/README.es.md index 78942479..a63c9004 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/07-practicing-rules/README.es.md @@ -1,4 +1,4 @@ -# `06` Practicing Rules +# `07` Practicing Rules ## 📝 Instrucciones: @@ -18,6 +18,6 @@ 8. Cambia el color del `anchor` **hover** a verde (`green`) y elimina el subrayado (tienes que pasar el cursor encima del anchor para probarlo). -## El resultado debería ser algo como esto: +## 💻 Resultado esperado: - + diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/07-practicing-rules/README.md similarity index 86% rename from exercises/06-Practicing-Rules/README.md rename to exercises/07-practicing-rules/README.md index 2beed784..cb09ca0d 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/07-practicing-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" --- -# `06` Practicing Rules +# `07` Practicing Rules ## 📝 Instructions: @@ -22,6 +22,6 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 8. Change the `anchor` **hover** color to `green` and remove the underline (you have to actually hover the anchor to test it). -## The result should be something like this: +## 💻 Expected result: - + diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/07-practicing-rules/index.html similarity index 91% rename from exercises/06-Practicing-Rules/index.html rename to exercises/07-practicing-rules/index.html index 8c0b2b50..b2d40b06 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/07-practicing-rules/index.html @@ -4,7 +4,7 @@ - + @@ -27,7 +27,7 @@

3 reasons you love what you are learning

If you can't sleep, what's better than watching videos of cats? - click here + click here

diff --git a/exercises/06-Practicing-Rules/solution.hide.css b/exercises/07-practicing-rules/solution.hide.css similarity index 100% rename from exercises/06-Practicing-Rules/solution.hide.css rename to exercises/07-practicing-rules/solution.hide.css diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/07-practicing-rules/styles.css similarity index 100% rename from exercises/06-Practicing-Rules/styles.css rename to exercises/07-practicing-rules/styles.css diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/07-practicing-rules/tests.js similarity index 98% rename from exercises/06-Practicing-Rules/tests.js rename to exercises/07-practicing-rules/tests.js index 3bcecea6..5c375d55 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/07-practicing-rules/tests.js @@ -55,7 +55,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - test("the text-decoration in the

tag should be 'underline'", () => { + test("The text-decoration in the

tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/08-very-specific-rules/README.es.md similarity index 72% rename from exercises/07-Very-Specific-Rules/README.es.md rename to exercises/08-very-specific-rules/README.es.md index df781b9a..dd02d734 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/08-very-specific-rules/README.es.md @@ -1,4 +1,4 @@ -# `07` Very Specific Rules +# `08` Very Specific Rules ## 🔎 Importante: @@ -12,10 +12,10 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** 3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`. + - ->Importante: **NO** debes modificar el archivo index.html +> Importante: **NO** debes modificar el archivo `index.html`. ## 💡 Pista: -1. El atributo `!important` ayuda a sobreescribir estilos. +- El atributo `!important` ayuda a sobreescribir estilos. diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/08-very-specific-rules/README.md similarity index 72% rename from exercises/07-Very-Specific-Rules/README.md rename to exercises/08-very-specific-rules/README.md index 72f38d2c..91bcaf0c 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/08-very-specific-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" --- -# `07` Very Specific Rules +# `08` Very Specific Rules ## 🔎 Important: @@ -10,17 +10,16 @@ In this exercise, you can add your code only above the **READ-ONLY BLOCK** of th ## 📝 Instructions: - 1. Set the `ul li` text color to `red` (override conflicts with specificity). 2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector or .class selector). 3. Change the odd rows of the tables to a yellow background using `tr:nth-child`. + - ->Important: You should **NOT** modify the index.html file. +> Important: You should **NOT** modify the `index.html` file. ## 💡 Hint: -1. The `!important` attribute helps to override other attributes. +- The `!important` attribute helps to override other attributes. diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/08-very-specific-rules/index.html similarity index 93% rename from exercises/07-Very-Specific-Rules/index.html rename to exercises/08-very-specific-rules/index.html index 09fef243..3909949d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/08-very-specific-rules/index.html @@ -4,7 +4,7 @@ - +

The learning essay

@@ -25,7 +25,7 @@

3 reasons you know love what you are learning

If you can't sleep, what better than watching videos of cats? - click here + click here

diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/08-very-specific-rules/solution.hide.css similarity index 100% rename from exercises/07-Very-Specific-Rules/solution.hide.css rename to exercises/08-very-specific-rules/solution.hide.css diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/08-very-specific-rules/styles.css similarity index 100% rename from exercises/07-Very-Specific-Rules/styles.css rename to exercises/08-very-specific-rules/styles.css diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/08-very-specific-rules/tests.js similarity index 100% rename from exercises/07-Very-Specific-Rules/tests.js rename to exercises/08-very-specific-rules/tests.js diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/09-rounded-image/README.es.md similarity index 70% rename from exercises/08-Rounded-Image/README.es.md rename to exercises/09-rounded-image/README.es.md index bd88ef5d..16a1bdde 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/09-rounded-image/README.es.md @@ -1,4 +1,4 @@ -# `08` Rounded Image +# `09` Rounded Image Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! @@ -16,10 +16,10 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). -## 💡 Pista: +## 💡 Pistas: + Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. -+ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/). ++ En este artículo puedes leer más [sobre la propiedad `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). -+ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ++ Adicionalmente, puedes [leer la documentación de `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/08-Rounded-Image/README.md b/exercises/09-rounded-image/README.md similarity index 71% rename from exercises/08-Rounded-Image/README.md rename to exercises/09-rounded-image/README.md index 886e41f1..f44b0c22 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/09-rounded-image/README.md @@ -1,4 +1,4 @@ -# `08` Rounded Image +# `09` Rounded Image A lot of websites use rounded profile images, a technique that really makes a website more beautiful! @@ -17,10 +17,10 @@ The problem with this approach is that it only works for squared pictures... Pro 3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). -## 💡 Hint: +## 💡 Hints: + If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle. -+ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/). ++ You can also read [this great article about `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). -+ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ++ Additionally you can [read the documentation on `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/08-Rounded-Image/index.html b/exercises/09-rounded-image/index.html similarity index 91% rename from exercises/08-Rounded-Image/index.html rename to exercises/09-rounded-image/index.html index 95931a07..52ff462d 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/09-rounded-image/index.html @@ -4,7 +4,7 @@ - + diff --git a/exercises/08-Rounded-Image/solution.hide.css b/exercises/09-rounded-image/solution.hide.css similarity index 100% rename from exercises/08-Rounded-Image/solution.hide.css rename to exercises/09-rounded-image/solution.hide.css diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/09-rounded-image/styles.css similarity index 100% rename from exercises/08-Rounded-Image/styles.css rename to exercises/09-rounded-image/styles.css diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/09-rounded-image/tests.js similarity index 100% rename from exercises/08-Rounded-Image/tests.js rename to exercises/09-rounded-image/tests.js diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/10-anchor-styles/README.es.md similarity index 82% rename from exercises/09-Anchor-Styles/README.es.md rename to exercises/10-anchor-styles/README.es.md index 94e03e07..b4e2d130 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/10-anchor-styles/README.es.md @@ -1,14 +1,14 @@ -# `09` 3D Anchor Styles +# `10` 3D Anchor Styles A las personas les gusta sentir que están haciendo clic en algo, una manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo: - + Puedes controlar qué reglas CSS se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (cuando pasas por encima con el mouse) o `active` (cuando haces clic), por ejemplo: ```css a:active { - /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se presiona' */ + /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se 'presiona' */ } ``` diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/10-anchor-styles/README.md similarity index 75% rename from exercises/09-Anchor-Styles/README.md rename to exercises/10-anchor-styles/README.md index a4b23419..28134918 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/10-anchor-styles/README.md @@ -1,8 +1,8 @@ -# `09` 3D Anchor Styles +# `10` 3D Anchor Styles People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders, for example: - + You can control what CSS rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example: @@ -15,8 +15,7 @@ a:active { ## 📝 Instructions: -1. Change the border colors of the anchor, -when being pressed, to the following: +1. Change the border colors of the anchor, when being pressed, to the following: ```css border-color: #000 #aaa #aaa #000; diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/10-anchor-styles/index.html similarity index 88% rename from exercises/09-Anchor-Styles/index.html rename to exercises/10-anchor-styles/index.html index 30e00691..baf7c9ba 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/10-anchor-styles/index.html @@ -4,7 +4,7 @@ - + diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/10-anchor-styles/solution.hide.css similarity index 100% rename from exercises/09-Anchor-Styles/solution.hide.css rename to exercises/10-anchor-styles/solution.hide.css diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/10-anchor-styles/styles.css similarity index 100% rename from exercises/09-Anchor-Styles/styles.css rename to exercises/10-anchor-styles/styles.css diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/10-anchor-styles/tests.js similarity index 100% rename from exercises/09-Anchor-Styles/tests.js rename to exercises/10-anchor-styles/tests.js diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/11-your-own-font/README.es.md similarity index 94% rename from exercises/10-Your-Own-Font/README.es.md rename to exercises/11-your-own-font/README.es.md index dd58b215..ef1ce4a7 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/11-your-own-font/README.es.md @@ -1,10 +1,10 @@ -# `10` Your Own Font +# `11` Your Own Font Aquí puedes encontrar las fuentes de Google: https://fonts.google.com Elige la que más te guste, y úsala vinculando tu sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta `` del documento HTML de esta manera: -```Plain/Text +```html ``` diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/11-your-own-font/README.md similarity index 94% rename from exercises/10-Your-Own-Font/README.md rename to exercises/11-your-own-font/README.md index e2632833..234ad01c 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/11-your-own-font/README.md @@ -1,10 +1,10 @@ -# `10` Your Own Font +# `11` Your Own Font You can find Google Fonts here: https://fonts.google.com Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the `` tag of the HTML document like this: -```Plain/Text +```html ``` diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/11-your-own-font/index.html similarity index 89% rename from exercises/10-Your-Own-Font/index.html rename to exercises/11-your-own-font/index.html index b4005187..971a51b4 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/11-your-own-font/index.html @@ -6,7 +6,7 @@ - +

My unique font

diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/11-your-own-font/solution.hide.css similarity index 91% rename from exercises/10-Your-Own-Font/solution.hide.css rename to exercises/11-your-own-font/solution.hide.css index 85e3a7c3..98aa61be 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/11-your-own-font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { /* Add your code below this line */ - font-family: "Montserrat"; /* Varies depending on the font you chose */ + font-family: "Montserrat"; /* Varies depending on the font you choose */ } diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/11-your-own-font/solution.hide.html similarity index 83% rename from exercises/10-Your-Own-Font/solution.hide.html rename to exercises/11-your-own-font/solution.hide.html index eeb1c059..62fd02c5 100644 --- a/exercises/10-Your-Own-Font/solution.hide.html +++ b/exercises/11-your-own-font/solution.hide.html @@ -8,10 +8,10 @@ href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Source+Code+Pro:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> - + - +

My unique font

diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/11-your-own-font/styles.css similarity index 100% rename from exercises/10-Your-Own-Font/styles.css rename to exercises/11-your-own-font/styles.css diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/11-your-own-font/tests.js similarity index 95% rename from exercises/10-Your-Own-Font/tests.js rename to exercises/11-your-own-font/tests.js index f7c2460b..71d2d707 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/11-your-own-font/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const link = document.querySelectorAll("link") - test("the font-family in the .myTitle should exists", ()=>{ + test("the font-family in the .myTitle should exists", ()=>{ document.querySelector( "head" ).innerHTML = ``; diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/12-font-awesome-icons/README.es.md similarity index 80% rename from exercises/11-Font-Awesome-Icons/README.es.md rename to exercises/12-font-awesome-icons/README.es.md index d02884e6..87f6835c 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/12-font-awesome-icons/README.es.md @@ -1,4 +1,4 @@ -# `11` Font Awesome Icons +# `12` Font Awesome Icons Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar". @@ -6,7 +6,7 @@ Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea f Font Awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. -Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: +Después de vincular tu sitio web con font-awesome, puedes usar el siguiente código para insertar un icono en específico: ```html @@ -18,5 +18,5 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ## 📝 Instrucciones: -Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. +1. Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/12-font-awesome-icons/README.md similarity index 97% rename from exercises/11-Font-Awesome-Icons/README.md rename to exercises/12-font-awesome-icons/README.md index f9c7c09f..c37d7496 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/12-font-awesome-icons/README.md @@ -1,4 +1,4 @@ -# `11` Font Awesome Icons +# `12` Font Awesome Icons As a developer/designer, you want to use certain icons to make your website easy to understand; for example, we know that a "trash" icon means "delete". diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/12-font-awesome-icons/index.html similarity index 91% rename from exercises/11-Font-Awesome-Icons/index.html rename to exercises/12-font-awesome-icons/index.html index 1401d5da..3495c6b5 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/12-font-awesome-icons/index.html @@ -5,7 +5,7 @@ - +
diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/12-font-awesome-icons/solution.hide.html similarity index 93% rename from exercises/11-Font-Awesome-Icons/solution.hide.html rename to exercises/12-font-awesome-icons/solution.hide.html index 431e6b22..4a3d255e 100644 --- a/exercises/11-Font-Awesome-Icons/solution.hide.html +++ b/exercises/12-font-awesome-icons/solution.hide.html @@ -5,7 +5,7 @@ - +
diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/12-font-awesome-icons/styles.css similarity index 100% rename from exercises/11-Font-Awesome-Icons/styles.css rename to exercises/12-font-awesome-icons/styles.css diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/12-font-awesome-icons/tests.js similarity index 100% rename from exercises/11-Font-Awesome-Icons/tests.js rename to exercises/12-font-awesome-icons/tests.js diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/13-relative-length-em-rem/README.es.md similarity index 64% rename from exercises/12-Relative-Length-EM-REM/README.es.md rename to exercises/13-relative-length-em-rem/README.es.md index a10a425d..445d2c7f 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/13-relative-length-em-rem/README.es.md @@ -1,10 +1,10 @@ -# `12` Relative Length em, rem +# `13` Relative Length 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. Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. -## Ejemplo usando em: +## Ejemplo usando `em`: En este ejercicio tenemos dos encabezados `

`. Ambos son `

`, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. @@ -12,19 +12,18 @@ Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de ## En resumen: -+ em: Relativo al `font-size` actual del padre. ++ `em`: Relativo al `font-size` actual del padre. -+ rem: Relativo al `font-size` original de la página. ++ `rem`: Relativo al `font-size` original de la página. ## 📝 Instrucciones: -1. Proporciona un `font-size` de `0.8em` a ambos `h2` +1. Proporciona un `font-size` de `0.8em` a ambos `h2`. -2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3` +2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3`. +## 💻 Resultado esperado: -## El resultado debería verse así: - - + diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/13-relative-length-em-rem/README.md similarity index 61% rename from exercises/12-Relative-Length-EM-REM/README.md rename to exercises/13-relative-length-em-rem/README.md index 51613b62..e1805278 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/13-relative-length-em-rem/README.md @@ -1,10 +1,10 @@ -# `12` Relative Length em, rem +# `13` Relative Length em, rem 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: +## Example using `em`: In this exercise we have two `

` headings. They are both `

`, but one is bigger than the other because headings have relative font-sizes by default. @@ -12,20 +12,19 @@ Since the second `div` has a bigger based `font-size`, then the heading resizes ## In short: -+ em: Relative to the current `font-size` of the parent. ++ `em`: Relative to the current `font-size` of the parent. -+ rem: Relative to the original `font-size` of the page. ++ `rem`: Relative to the original `font-size` of the page. ## 📝 Instructions: -1. Give a `font-size` of `0.8em` to both `h2`'s +1. Give a `font-size` of `0.8em` to both `h2`'s. -2. Now give a `font-size` of `0.8rem` to both `h3`'s +2. Now give a `font-size` of `0.8rem` to both `h3`'s. +## 💻 Expected result: -## The result should look like this: - - + diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/13-relative-length-em-rem/index.html similarity index 92% rename from exercises/12-Relative-Length-EM-REM/index.html rename to exercises/13-relative-length-em-rem/index.html index f4d745fd..24290996 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/13-relative-length-em-rem/index.html @@ -4,7 +4,7 @@ - +

diff --git a/exercises/12-Relative-Length-EM-REM/solution.hide.css b/exercises/13-relative-length-em-rem/solution.hide.css similarity index 100% rename from exercises/12-Relative-Length-EM-REM/solution.hide.css rename to exercises/13-relative-length-em-rem/solution.hide.css diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/13-relative-length-em-rem/styles.css similarity index 100% rename from exercises/12-Relative-Length-EM-REM/styles.css rename to exercises/13-relative-length-em-rem/styles.css diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/13-relative-length-em-rem/tests.js similarity index 100% rename from exercises/12-Relative-Length-EM-REM/tests.js rename to exercises/13-relative-length-em-rem/tests.js diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/14-anchor-like-button/README.es.md similarity index 91% rename from exercises/13-Anchor-Like-Button/README.es.md rename to exercises/14-anchor-like-button/README.es.md index 998e9ba7..f85665ea 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/14-anchor-like-button/README.es.md @@ -1,4 +1,4 @@ -# `13` Anchor Like Button +# `14` Anchor Like Button 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. @@ -22,4 +22,4 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así: ## 💻 Resultado esperado: - + diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/14-anchor-like-button/README.md similarity index 90% rename from exercises/13-Anchor-Like-Button/README.md rename to exercises/14-anchor-like-button/README.md index b5002e2f..7491285c 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/14-anchor-like-button/README.md @@ -1,4 +1,4 @@ -# `13` Anchor Like Button +# `14` 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. @@ -20,4 +20,4 @@ Anchors are not only used within text: when you are going to use anchors outside ## 💻 Expected result: - + diff --git a/exercises/13-Anchor-Like-Button/index.html b/exercises/14-anchor-like-button/index.html similarity index 87% rename from exercises/13-Anchor-Like-Button/index.html rename to exercises/14-anchor-like-button/index.html index aaaa7740..853cce76 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/14-anchor-like-button/index.html @@ -4,7 +4,7 @@ - + Beautiful Button diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/14-anchor-like-button/solution.hide.css similarity index 100% rename from exercises/13-Anchor-Like-Button/solution.hide.css rename to exercises/14-anchor-like-button/solution.hide.css diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/14-anchor-like-button/styles.css similarity index 100% rename from exercises/13-Anchor-Like-Button/styles.css rename to exercises/14-anchor-like-button/styles.css diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/14-anchor-like-button/tests.js similarity index 100% rename from exercises/13-Anchor-Like-Button/tests.js rename to exercises/14-anchor-like-button/tests.js diff --git a/learn.json b/learn.json index c06fdf38..b914a96c 100644 --- a/learn.json +++ b/learn.json @@ -1,27 +1,37 @@ { - "language": "html", "slug": "css-tutorial-exercises-course", - "skills": ["css-styling"], "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", "title": { - "us": "Learn CSS Interactively", - "es": "Aprende CSS Interactivamente" + "us": "Learn CSS with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" }, "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", "description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", - "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners learning and practicing fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." }, "duration": 8, "difficulty": "easy", "videoSolutions": true, "bugsLink": "https://github.com/learnpack/learnpack/issues/new", "projectType": "tutorial", + "autoPlay": "true", "graded": true, "disabledActions": [], + "technologies": ["web-development", "desarrollo-web", "front-end", "css"], "disableGrading": false, "editor": { - "version": "1.0.73" + "version": "5.0", + "agent": "vscode" + }, + "telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" + }, + "video": { + "intro": { + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } }