tag should exists", function() { + test("The

tag should exists", () => { document.querySelector( "head" ).innerHTML = ``; expect(document.querySelector("div")).toBeTruthy(); }); - it("the width in the div Tag should be '200px'", function() { + test("the width in the div Tag should be '200px'", () => { // get computed styles of any element you like document.querySelector( "head" @@ -38,7 +32,7 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["width"]).toBe("200px"); }); - it("the height in the div Tag should be '200px'", function() { + test("the height in the div Tag should be '200px'", () => { // get computed styles of any element you like document.querySelector( "head" @@ -47,7 +41,7 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["height"]).toBe("200px"); }); - it("the border radius in the div Tag should be '100%'", function() { + test("the border radius in the div Tag should be '100%'", () => { // get computed styles of any element you like document.querySelector( "head" @@ -56,7 +50,7 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["border-radius"]).toBe("100%"); }); - it("the background position x in the div Tag should be 'center'", function() { + test("the background position x in the div Tag should be 'center'", () => { // get computed styles of any element you like document.querySelector( "head" @@ -65,7 +59,7 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["background-position-x"]).toBe("center"); }); - it("the background position y in the div Tag should be 'center'", function() { + test("the background position y in the div Tag should be 'center'", () => { // get computed styles of any element you like document.querySelector( "head" @@ -74,7 +68,7 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["background-position-y"]).toBe("center"); }); - it("the background image in the div Tag should exists", function() { + test("the background image in the div Tag should exists", () => { // get computed styles of any element you like document.querySelector( "head" @@ -83,17 +77,15 @@ describe("All the styles should be applied", function() { let idTagStyles = window.getComputedStyle(divTag); expect(idTagStyles["background-image"]).toBeTruthy(); }); - it("You should not change the existing head tag elements", function () { + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() - - let meta = head.querySelector("meta") - expect(meta).not.toBe(null) - - const pathname = new URL(document.querySelector('link').href).pathname - expect(pathname).toBe('/styles.css') - - let title = head.querySelector('title') - expect(title).not.toBe(null) + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); From 2ff5fcafa6d3e0bb1426504ba16b627236da6831 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 17:37:26 +0000 Subject: [PATCH 128/484] added solution --- exercises/09-Anchor-Styles/solution.hide.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css index e69de29b..b3e6a36b 100644 --- a/exercises/09-Anchor-Styles/solution.hide.css +++ b/exercises/09-Anchor-Styles/solution.hide.css @@ -0,0 +1,15 @@ +.threeDimension { + display: block; + border: 1px solid; + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: black; +} + +a.threeDimension:active { + /* your code here*/ + border-color: #000 #aaa #aaa #000; +} \ No newline at end of file From e5ae3f25e771f0ce5d39970048b612e2c4f306aa Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 17:37:58 +0000 Subject: [PATCH 129/484] added test to prevent user from changing default styles plus minor improvements --- exercises/09-Anchor-Styles/tests.js | 98 +++++++++++++++++------------ 1 file changed, 58 insertions(+), 40 deletions(-) diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index cab43954..73192e4f 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -1,68 +1,86 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); -let cssArray=null; -jest.dontMock("fs"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); +jest.dontMock('fs'); - //apply the styles from the stylesheet if needed +let cssArray = null; - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("You should not add your rules above the existing code", function () { +describe("All the styles should be applied", () => { + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + test("You should not add your rules above the existing code", () => { document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; expect(cssArray).toBe(".threeDimension"); }) - it("the 'a' tag in the index.html should not be deleted", function () { + test("the 'a' tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); - expect(html.toString().indexOf(`-1).toBeTruthy(); + expect(html.toString().indexOf(` -1).toBeTruthy(); }); - it("The border-color rule for the 'threeDimension active ' property should match the instruction color", function () { + test("The border-color rule for the 'threeDimension active ' property should match the instruction color", () => { // get computed styles of any element you like // let cssArray=document.styleSheets[0].cssRules; document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === "a.threeDimension:active") { + orangeHoverSelector = cssArray[i].style['border-color']; } } - expect(orangeHoverSelector).toBe("#000 #aaa #aaa #000"); + + }); + test("You should not change the default styles", () => { + // get computed styles of any element you like + // let cssArray=document.styleSheets[0].cssRules; + document.querySelector( + "head" + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; + + let borderColor = ""; + let color = ""; + let background = ""; + let width = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".threeDimension") { + borderColor = cssArray[i].style["border-color"]; + color = cssArray[i].style['color']; + background = cssArray[i].style['background']; + width = cssArray[i].style['width']; + expect(borderColor).toBe("#aaa #000 #000 #aaa"); + expect(color).toBe("black"); + expect(background).toBe("#fc0"); + expect(width).toBe("8em"); + } + } + }); - it("You should not change the existing head tag elements", function () { + test("You should not change the existing head tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() - - let meta = head.querySelector("meta") - expect(meta).not.toBe(null) - - const pathname = new URL(document.querySelector('link').href).pathname - expect(pathname).toBe('/styles.css') - - let title = head.querySelector('title') - expect(title).not.toBe(null) + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); From b512f717377fe13c5b66cfab03336c81531a4c51 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 19:22:40 +0000 Subject: [PATCH 130/484] added solutions for html and css --- exercises/10-Your-Own-Font/solution.hide.css | 4 ++++ exercises/10-Your-Own-Font/solution.hide.html | 20 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 exercises/10-Your-Own-Font/solution.hide.html diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index e69de29b..371e026b 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -0,0 +1,4 @@ +.myTitle { + /*your code here*/ + font-family: 'Roboto'; /*Varies depending on the font you chose*/ +} diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html new file mode 100644 index 00000000..b2268633 --- /dev/null +++ b/exercises/10-Your-Own-Font/solution.hide.html @@ -0,0 +1,20 @@ + + + + + + + + + + + 10 Your Own Font + + + +

My unique font

+ + + \ No newline at end of file From e4452cc9bc10c0beeb41aadd3cb757c5300d9b3b Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 19:23:45 +0000 Subject: [PATCH 131/484] fixed issue with CSS rules, improved tests --- exercises/10-Your-Own-Font/tests.js | 60 +++++++++++++---------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index dd13147d..52e13aa6 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -1,53 +1,47 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - -jest.dontMock("fs"); - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - // document.querySelector( - // "head" - // ).innerHTML=``; - }); - afterEach(() => { - jest.resetModules(); - }); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +let cssArray = null; + +describe("All the styles should be applied", ()=>{ + const link = document.querySelectorAll("link") + test("the font-family in the .myTitle should exists", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; - it("the font-family in the .myTitle should exists", function () { // get computed styles of any element you like - let cssArray=document.styleSheets[0].cssRules; + let cssArray = document.styleSheets[0].cssRules; // console.log("%%% ", cssArray) - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === ".myTitle") { // console.log("%%% ", cssArray[i].selectorText) - orangeHoverSelector=cssArray[i].style['font-family']; + orangeHoverSelector = cssArray[i].style['font-family']; } } expect(orangeHoverSelector).toBeTruthy(); }); - it('the h1 tag should have a class "myTitle"', function () { + test('the h1 tag should have a class "myTitle"', ()=>{ //or use query selector to compare hoy mane scriptags do we have - const h=document.querySelector("h1"); + const h = document.querySelector("h1"); expect(h.classList.contains("myTitle")).toBeTruthy(); }); - it("The link should be included in the head tag", function () { + test("The link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("*") // console.log("###", headContent[1].innerHTML) - console.log("###", document.head.childNodes) - expect(document.querySelectorAll("link").length).toBe(2); + expect(link.length).toBe(2); }); - it("The Head tag should not includes a Style tag", function () { - expect(html.toString().indexOf(`-1).toBeFalsy(); + test("The Head tag should not includes a Style tag", ()=>{ + expect(html.toString().indexOf(` -1).toBeFalsy(); }); }); From a01e4bf84c31401661d13f72b9f7a0d3e0f2703f Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 19:38:45 +0000 Subject: [PATCH 132/484] added solution --- exercises/11-Font-Awesome-Icons/solution.hide.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/11-Font-Awesome-Icons/solution.hide.html index bd68c2a7..e9778b12 100644 --- a/exercises/11-Font-Awesome-Icons/solution.hide.html +++ b/exercises/11-Font-Awesome-Icons/solution.hide.html @@ -9,9 +9,9 @@

Hello
Hello
Hello
Hello

From b62745c734e3cc8d7a67ede1ab83b7f662b8c60a Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 19:40:47 +0000 Subject: [PATCH 133/484] fixed test checking for the wrong class, improved tests overall --- exercises/11-Font-Awesome-Icons/tests.js | 46 ++++++++++-------------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 3fa966cb..f7d8cf6e 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -1,46 +1,38 @@ -const fs = require("fs"); -const path = require("path"); -const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); -describe("All the styles should be applied", function() { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); +let cssArray = null; - //apply the styles from the stylesheet if needed - document.querySelector( - "head" - ).innerHTML = ``; - }); - afterEach(() => { - jest.resetModules(); - }); - - it("ul tag should exists", function() { +describe("All the styles should be applied", ()=>{ + const icons = document.querySelectorAll("i"); + test("ul tag should exists", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); - it("At least 3 li tags should exist", function() { + test("At least 3 li tags should exist", ()=>{ expect(document.querySelectorAll("li").length).toBe(3); }); - it("At least 3 i tags should exist", function() { + test("At least 3 i tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - it(" LI innerHTML exist", function() { + test(" LI innerHTML exist", ()=>{ const li = document.querySelectorAll("li"); expect(document.querySelector("li")).toBeTruthy(); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - it('the i tag should have a class "fas"', function() { + test('the i tag should have a class "fas"', ()=>{ //or use query selector to compare hoy mane scriptags do we have - const icon = document.querySelectorAll("i"); - expect(document.querySelector("i")).toBeTruthy(); - for (let i = 0; i < icon.length; i++) { - expect(icon[i].classList.contains("fa")).toBeTruthy(); - } + expect(icons).toBeTruthy(); + + icons.forEach(icon=>{ + let hasFas = icon.classList.contains("fas") + expect(hasFas).toBe(true); + }) }); }); From 247b554390c32b901f751e7bed8bb900665364b1 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 20:29:44 +0000 Subject: [PATCH 134/484] added solution --- .../12-Relative-Length-EM-REM/solution.hide.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/exercises/12-Relative-Length-EM-REM/solution.hide.css b/exercises/12-Relative-Length-EM-REM/solution.hide.css index e69de29b..eeb04334 100644 --- a/exercises/12-Relative-Length-EM-REM/solution.hide.css +++ b/exercises/12-Relative-Length-EM-REM/solution.hide.css @@ -0,0 +1,15 @@ +#my-first-div { + font-size: 15px; +} +#the-second-one { + font-size: 25px; +} + +/* YOUR CODE BELOW THIS LINE */ +h2{ + font-size: 0.8em; +} + +h3{ + font-size: 0.8rem; +} \ No newline at end of file From cb10a77a787282c93cdc6dc09da99320004fe00f Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 4 Aug 2022 20:29:57 +0000 Subject: [PATCH 135/484] fixed and cleaned up tests --- exercises/12-Relative-Length-EM-REM/tests.js | 73 +++++++++----------- 1 file changed, 32 insertions(+), 41 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index 2f884753..2752a78d 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -1,69 +1,60 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("The H2 Tag should have a font-size: 0.8em", function () { +describe("All the styles should be applied", ()=>{ + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + test("The H2 Tag should have a font-size: 0.8em", ()=>{ // get computed styles of any element you like document.querySelector( "head" - ).innerHTML=``; - const h2Tag=document.querySelector("h2"); - var styles=window.getComputedStyle(h2Tag); + ).innerHTML = ``; + const h2Tag = document.querySelector("h2"); + var styles = window.getComputedStyle(h2Tag); expect(styles["font-size"]).toBe("0.8em"); }); - it("The H3 Tag should haave a font-size: 0.8rem", function () { + test("The H3 Tag should haave a font-size: 0.8rem", ()=>{ // get computed styles of any element you like document.querySelector( "head" - ).innerHTML=``; - const h3Tag=document.querySelector("h3"); - var styles=window.getComputedStyle(h3Tag); + ).innerHTML = ``; + const h3Tag = document.querySelector("h3"); + var styles = window.getComputedStyle(h3Tag); expect(styles["font-size"]).toBe("0.8rem"); }); - it("You should add your rules below the existing code", function () { + test("You should add your rules below the existing code", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; expect(cssArray).toBe("#my-first-div"); } ) - it("You should add your rules below the existing code", function () { + test("You should add your rules below the existing code", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[1].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[1].selectorText; expect(cssArray).toBe("#the-second-one"); } ) - it("You should not change the existing head tag elements", function () { + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() - - let meta = head.querySelector("meta") - expect(meta).not.toBe(null) - - const pathname = new URL(document.querySelector('link').href).pathname - expect(pathname).toBe('/styles.css') - - let title = head.querySelector('title') - expect(title).not.toBe(null) + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); From fdaa2df10b8c994347f5cb23c6f7af73f7090460 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Sat, 6 Aug 2022 02:54:50 +0000 Subject: [PATCH 136/484] changed colors color requirements to orange and dark orange --- exercises/13-Anchor-Like-Button/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index 32f0c21e..bddebed7 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -54,7 +54,7 @@ describe("All the styles should be applied", function () { ).innerHTML=``; let divTag=document.querySelector(".orange-btn"); let classTagStyles=window.getComputedStyle(divTag); - expect(classTagStyles["background"]).toBe("rgb(255, 153, 51)"); + expect(classTagStyles["background"]).toBe("orange"); }); it("the underline should to be removed", function () { document.querySelector( @@ -79,7 +79,7 @@ describe("All the styles should be applied", function () { } } - expect(orangeHoverSelector).toBe("#cc7a00"); + expect(orangeHoverSelector).toBe("darkorange"); }); it("You should be careful with the specifity", function () { From 2a3353ce41387d81223b366b536a2d80fbfb6a08 Mon Sep 17 00:00:00 2001 From: ErnestoXG <60261375+UmiKami@users.noreply.github.com> Date: Sun, 7 Aug 2022 23:46:26 -0400 Subject: [PATCH 137/484] Update index.html better format --- exercises/12-Relative-Length-EM-REM/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/12-Relative-Length-EM-REM/index.html index 60a98594..f4d745fd 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/12-Relative-Length-EM-REM/index.html @@ -12,6 +12,7 @@

First h2 heading

First h3 heading

Here is some nice fake content

Second h2 heading

Second h3 heading

From 4328860e8d1e81db2310da502c4ab1e394fa2b45 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Wed, 10 Aug 2022 02:40:49 +0000 Subject: [PATCH 138/484] Gave user specific colors to use --- exercises/13-Anchor-Like-Button/README.es.md | 2 +- exercises/13-Anchor-Like-Button/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index a1fda469..576d146b 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -10,7 +10,7 @@ Siga estos pasos para que tu enlace (`anchor`) se vea así: 2. Bordes redondeados: establece el `border-radius` en `4px`. -3. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`. +3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange` 4. Eliminar subrayado: establece `text-decoration` a `none`. diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 40327be6..49ced0bf 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -8,7 +8,7 @@ Anchors are not only used within text- when you are going to use anchors outside 2. Rounded borders: Set `border-radius` to `4px`. -3. Find and apply the color: Use the color picker to find the color and apply make the background to that color. +3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). 4. Remove underline: Set `text-decoration` to `none`. From 13991d0b869c311002a7e25303cc8692e19c1cd5 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Wed, 10 Aug 2022 02:41:02 +0000 Subject: [PATCH 139/484] added solution --- exercises/13-Anchor-Like-Button/solution.hide.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css index e69de29b..fd0db11b 100644 --- a/exercises/13-Anchor-Like-Button/solution.hide.css +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -0,0 +1,13 @@ +.orange-btn { + /*your code here*/ + padding: 10px; + border-radius: 4px; + text-decoration: none; + color: white; + background: orange; +} + +.orange-btn:hover { + /*YOUR CODE HERE FOR THE HOVER STATE*/ + background: darkorange; +} From 9bf97689150f71e33bf5f10087e3f645f7c92f6b Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Wed, 10 Aug 2022 02:41:54 +0000 Subject: [PATCH 140/484] improved tests and cleaned them up --- exercises/13-Anchor-Like-Button/tests.js | 105 ++++++++++------------- 1 file changed, 44 insertions(+), 61 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index bddebed7..fcc69fa4 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -1,107 +1,90 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); +jest.dontMock('fs'); -jest.dontMock("fs"); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("the padding should be '10px'", function () { +describe("All the styles should be applied", ()=>{ + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + test("the padding should be '10px'", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["padding"]).toBe("10px"); }); - it("the border radius should be '4px'", function () { + test("the border radius should be '4px'", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - it("the border should be '1px solid #ffffff;'", function () { - document.querySelector( - "head" - - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); - expect(classTagStyles["border"]).toBe("1px solid #ffffff"); - }); - it("the background should be 'rgb(255, 153, 51)'", function () { + test("the background should be 'orange'", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["background"]).toBe("orange"); }); - it("the underline should to be removed", function () { + test("the underline should to be removed", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["text-decoration"]).toBe("none"); }); - it("The mouse hover property should be #cc7a00", function () { + test("The mouse hover property should be 'darkorange'", ()=>{ // get computed styles of any element you like document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === ".orange-btn:hover") { + orangeHoverSelector = cssArray[i].style.background; } } expect(orangeHoverSelector).toBe("darkorange"); }); - it("You should be careful with the specifity", function () { + test("You should be careful with the specifity", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; expect(cssArray).toBe(".orange-btn"); } ) - it("You should not change the existing head tag elements", function () { + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() - - let meta = head.querySelector("meta") - expect(meta).not.toBe(null) - - const pathname = new URL(document.querySelector('link').href).pathname - expect(pathname).toBe('/styles.css') - - let title = head.querySelector('title') - expect(title).not.toBe(null) + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); From 9aa151e07f42bea69f2643c4c16e714e6f141579 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Tue, 16 Aug 2022 21:50:46 +0000 Subject: [PATCH 141/484] Updated typo on readme code --- exercises/06-Practicing-Rules/README.es.md | 2 +- exercises/06-Practicing-Rules/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index c95ae914..ee953a20 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -4,7 +4,7 @@ 1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: `../../.learn/assets/background-vertical.jpg?raw=true` -2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. +2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. 3. Cambia el color del `h1` a rojo(`red`). diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 64428af4..b8b63bcc 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -8,7 +8,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 1. Set this URL as the background image of the page, and repeat it vertically only: `../../.learn/assets/background-vertical.jpg?raw=true` -2. Change the font-type of the `h1` to `Courier` and the rest of the website to `Times new Roman`. +2. Change the font-family of the `h1` to `Courier` and the rest of the website to `Times new Roman`. 3. Change the color of `h1` to `red`. From b40363d69d350ba0ba029d902ed34272ab5e6f0a Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Thu, 18 Aug 2022 21:45:09 +0000 Subject: [PATCH 142/484] learnpack-version --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 7c3ce6f6..5b113e53 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest USER gitpod RUN npm i jest@24.8.0 -g -RUN npm i @learnpack/learnpack -g && learnpack plugins:install learnpack-html@0.0.20 +RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install learnpack-html@0.0.20 From fe11a4f8385706a3745dd05d82ad5cf735eef5a8 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Thu, 18 Aug 2022 22:01:37 +0000 Subject: [PATCH 143/484] learnpack version --- README.md | 2 +- exercises/00-Welcome/README.es.md | 2 +- exercises/00-Welcome/README.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b127fe6b..3c27ee93 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ -Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any question. +Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](twitter.com/alesanchezr) if you have any question. ## You'll be learning the following concepts: diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-Welcome/README.es.md index bed6d3a1..b8215e3e 100644 --- a/exercises/00-Welcome/README.es.md +++ b/exercises/00-Welcome/README.es.md @@ -4,7 +4,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U" # ¡¡Bienvenido a los ejercicios de CSS!! -Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂 +Mi nombre es Alejandro Sanchez [@alesanchezr](twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂 Aprender a programar es dificil ¡Probablemente necesitarás coaching! Envíame un DM vía Twitter si tienes alguna duda. Durante este curso aprenderás los siguientes conceptos: diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md index 7ff64cf1..0162723a 100644 --- a/exercises/00-Welcome/README.md +++ b/exercises/00-Welcome/README.md @@ -4,7 +4,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U" # Welcome to CSS Exercises!! -My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 +My name is Alejandro Sanchez [@alesanchezr](twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 Learning to code is hard, you will problably need coaching! DM me on twitter if you have any question. During this course you will be learning the following concepts: From a478e3f1e4b6e3c944a322b792fc0dccecc0120d Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 08:18:15 -0400 Subject: [PATCH 144/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 5b113e53..2b9caebb 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest USER gitpod RUN npm i jest@24.8.0 -g -RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install learnpack-html@0.0.20 +RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install @learnpack/html From f007d5c3ca3bcc722a394f1f965a3f159ed9c8fe Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 08:18:45 -0400 Subject: [PATCH 145/484] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3c27ee93..b127fe6b 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ -Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](twitter.com/alesanchezr) if you have any question. +Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any question. ## You'll be learning the following concepts: From 0bb32adae0cd2de0fc5ce1e1653ccd39d47f6555 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 08:19:01 -0400 Subject: [PATCH 146/484] Update README.es.md --- exercises/00-Welcome/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-Welcome/README.es.md index b8215e3e..bed6d3a1 100644 --- a/exercises/00-Welcome/README.es.md +++ b/exercises/00-Welcome/README.es.md @@ -4,7 +4,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U" # ¡¡Bienvenido a los ejercicios de CSS!! -Mi nombre es Alejandro Sanchez [@alesanchezr](twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂 +Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂 Aprender a programar es dificil ¡Probablemente necesitarás coaching! Envíame un DM vía Twitter si tienes alguna duda. Durante este curso aprenderás los siguientes conceptos: From 8e2b75c082158c547ba38065123a8d8e6a8cc78f Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 08:19:20 -0400 Subject: [PATCH 147/484] Update README.md --- exercises/00-Welcome/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md index 0162723a..7ff64cf1 100644 --- a/exercises/00-Welcome/README.md +++ b/exercises/00-Welcome/README.md @@ -4,7 +4,7 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U" # Welcome to CSS Exercises!! -My name is Alejandro Sanchez [@alesanchezr](twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 +My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 Learning to code is hard, you will problably need coaching! DM me on twitter if you have any question. During this course you will be learning the following concepts: From 084b23297c46d8cfe5b3d9e2ebdec4bdad80067c Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 21:44:12 -0400 Subject: [PATCH 148/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 2b9caebb..78106952 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest USER gitpod RUN npm i jest@24.8.0 -g -RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install @learnpack/html +RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install @learnpack/html@1.1.1 From bfa48b0a1e8395e093e6bf72004cdf58d95b11d3 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Mon, 22 Aug 2022 21:44:22 -0400 Subject: [PATCH 149/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 78106952..e3b99e1b 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest USER gitpod RUN npm i jest@24.8.0 -g -RUN npm i @learnpack/learnpack@2.1.18 -g && learnpack plugins:install @learnpack/html@1.1.1 +RUN npm i @learnpack/learnpack@2.1.20 -g && learnpack plugins:install @learnpack/html@1.1.1 From 5f9ff744e909b2a16d2980e328279a56c8887a14 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Tue, 23 Aug 2022 11:04:55 -0400 Subject: [PATCH 150/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index e3b99e1b..8409faba 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -4,4 +4,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@1.1.1 +RUN npm i @learnpack/learnpack@2.1.20 -g && learnpack plugins:install learnpack-html@0.0.20 From 96d52feddb8795891852c6859ca1e172c5eafd69 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Fri, 26 Aug 2022 18:35:39 +0000 Subject: [PATCH 151/484] learnpack -v --- .github/workflows/learnpack-audit.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/learnpack-audit.yml b/.github/workflows/learnpack-audit.yml index 70f416ee..52644d89 100644 --- a/.github/workflows/learnpack-audit.yml +++ b/.github/workflows/learnpack-audit.yml @@ -25,5 +25,5 @@ jobs: uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - - run: npm install learnpack -g + - run: npm install @learnpack/learnpack@latest -g - run: learnpack audit \ No newline at end of file From 91383e52daec0aea06c72edd4694db124f5e8ebc Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez Date: Mon, 29 Aug 2022 21:58:24 +0000 Subject: [PATCH 152/484] Some improvements added to the tests --- exercises/01-Hello-World/index.html | 2 +- exercises/01-Hello-World/solution.hide.html | 8 ++++---- exercises/01-Hello-World/test.js | 4 ++++ exercises/01.1-The-Style-Tag/test.js | 4 +++- exercises/01.2-Your-First-Style/tests.js | 4 ++++ exercises/01.3-Your-Second-Style/index.html | 3 +++ exercises/01.3-Your-Second-Style/tests.js | 4 ++++ .../02-Separate-Stylesheet/solution.hide.css | 6 ++---- exercises/02-Separate-Stylesheet/tests.js | 9 +++++---- exercises/02.1-Background/tests.js | 1 + exercises/04.1-Combined-Rules/tests.js | 19 ++++++++++++------- exercises/04.2-Apply-several-classes/test.js | 14 ++++---------- learn.json | 4 ++-- 13 files changed, 49 insertions(+), 33 deletions(-) diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..93d4ce1c 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/01-Hello-World/solution.hide.html index ce422661..b2ad5b0e 100644 --- a/exercises/01-Hello-World/solution.hide.html +++ b/exercises/01-Hello-World/solution.hide.html @@ -1,7 +1,7 @@ -Click me to open google.com \ No newline at end of file +Click me to open google.com diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Hello-World/test.js index fca18c3f..fbe19bf5 100644 --- a/exercises/01-Hello-World/test.js +++ b/exercises/01-Hello-World/test.js @@ -10,20 +10,24 @@ const a = document.querySelector("a"); test("There should be an anchor tag", ()=>{ expect(a).toBeTruthy() }) + test("The anchor tag should be pink", ()=>{ let styles = window.getComputedStyle(a); expect(styles["color"]).toBe("pink"); }); + test("There should be a href attribute pointing to 'https://google.com'", ()=>{ let href = a.getAttribute('href'); expect(href).toBeTruthy(); expect(href).toBe("https://google.com"); }) + test("There should be a target attribute pointing to '_blank'", ()=>{ let target = a.getAttribute('target'); expect(target).toBeTruthy(); expect(target).toBe("_blank"); }) + test("The anchor tag should not contains any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(a.style._values).toEqual(emptyBodyInlineStyle); diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js index bf66dc21..a4be505b 100644 --- a/exercises/01.1-The-Style-Tag/test.js +++ b/exercises/01.1-The-Style-Tag/test.js @@ -8,12 +8,14 @@ jest.dontMock('fs'); const p = document.querySelector("p"); test("There should be a p tag", ()=>{ - expect(p).toBeTruthy() + expect(p).toBeTruthy(); }) + test("The p 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", ()=>{ let emptyBodyInlineStyle = {}; expect(p.style._values).toEqual(emptyBodyInlineStyle); diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js index ddbfad7f..0eabdf65 100644 --- a/exercises/01.2-Your-First-Style/tests.js +++ b/exercises/01.2-Your-First-Style/tests.js @@ -7,19 +7,23 @@ jest.dontMock('fs'); describe("All the styles should be applied", ()=>{ const a = document.querySelector("a"); + test("The anchor tag should be yellow", ()=>{ let styles = window.getComputedStyle(a); expect(styles["color"]).toBe("yellow"); }); + test("The body tag should not contain any inline style", ()=>{ let bodyInlineStyle = document.getElementsByTagName("body"); let emptyBodyInlineStyle = {}; expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); }); + test("The anchor tag should not contain any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(a.style._values).toEqual(emptyBodyInlineStyle); }); + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..03e672a3 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -3,6 +3,9 @@ diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js index e7e8ea61..147aabc5 100644 --- a/exercises/01.3-Your-Second-Style/tests.js +++ b/exercises/01.3-Your-Second-Style/tests.js @@ -7,17 +7,21 @@ jest.dontMock('fs'); describe("All the styles should be applied", ()=>{ const body = document.querySelector("body"); + test("The background should be blue", ()=>{ let styles = window.getComputedStyle(body); expect(styles["background"]).toBe("blue"); }); + test("The body tag should not contains any inline style", ()=>{ let emptyBodyInlineStyle = {}; expect(body.style._values).toEqual(emptyBodyInlineStyle); }); + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() + let meta = head.querySelector("meta") expect(meta).toBe(null) }) diff --git a/exercises/02-Separate-Stylesheet/solution.hide.css b/exercises/02-Separate-Stylesheet/solution.hide.css index 779c2c33..5250e305 100644 --- a/exercises/02-Separate-Stylesheet/solution.hide.css +++ b/exercises/02-Separate-Stylesheet/solution.hide.css @@ -2,8 +2,6 @@ 1. Select the body tag. 2. Add the background rule equal to blue. */ - body { +body { background: blue; - background-size: contain; - background-repeat: inherit; -} \ No newline at end of file +} diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js index d07034b6..f36df975 100644 --- a/exercises/02-Separate-Stylesheet/tests.js +++ b/exercises/02-Separate-Stylesheet/tests.js @@ -8,14 +8,14 @@ jest.dontMock("fs"); describe("All the styles should be applied", ()=>{ const link = document.querySelector("link"); - const body = document.querySelector("body") + const body = document.querySelector("body"); + test("The body tag should not contains any inline style", ()=>{ - document.querySelector( - "head" - ).innerHTML=``; + document.querySelector("head").innerHTML = ``; let emptyBodyInlineStyle={}; expect(body.style._values).toEqual(emptyBodyInlineStyle) }); + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() @@ -26,6 +26,7 @@ describe("All the styles should be applied", ()=>{ let href = link.getAttribute("href") expect(href).toEqual('./styles.css') }); + test("Your body tag background color should be blue", ()=>{ let styles = window.getComputedStyle(body) expect(styles["background-color"]).toBe("blue") diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js index 375aa45c..b223105f 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/02.1-Background/tests.js @@ -36,6 +36,7 @@ describe("All the styles should be applied", ()=>{ let styles = window.getComputedStyle(body); expect(styles["background-repeat"]).toBe("inherit"); }); + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js index d3540732..c6f62acc 100644 --- a/exercises/04.1-Combined-Rules/tests.js +++ b/exercises/04.1-Combined-Rules/tests.js @@ -9,7 +9,8 @@ jest.dontMock("fs"); describe("All the styles should be applied", ()=> { const body = document.querySelector("body"); const link = document.querySelector("link"); - const title = document.querySelector('title') + const title = document.querySelector('title'); + test("The body tag should not contains any inline style", ()=> { document.querySelector( "head" @@ -17,6 +18,7 @@ describe("All the styles should be applied", ()=> { let emptyBodyInlineStyle = {}; expect(body.style._values).toEqual(emptyBodyInlineStyle); }); + test("the width should be '50px'", ()=> { // get computed styles of any element you like document.querySelector( @@ -24,16 +26,17 @@ describe("All the styles should be applied", ()=> { ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === ".myBox") { orangeHoverSelector = cssArray[i].style.width; } } - expect(orangeHoverSelector).toBe('50px'); + expect(orangeHoverSelector).toBe('50px'); }); + test("the height should be '50px'", ()=> { // get computed styles of any element you like document.querySelector( @@ -41,15 +44,15 @@ describe("All the styles should be applied", ()=> { ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === ".myBox") { orangeHoverSelector = cssArray[i].style.height; } } - expect(orangeHoverSelector).toBe('50px'); + expect(orangeHoverSelector).toBe('50px'); }); test("the background-size should be contain", ()=> { @@ -58,22 +61,23 @@ describe("All the styles should be applied", ()=> { ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === ".myBox") { orangeHoverSelector = cssArray[i].style['background-size']; } } + expect(orangeHoverSelector).toBe('contain'); }); + test("the background should include the shorthand property", ()=> { document.querySelector( "head" ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - console.log("$$$:", cssArray) let orangeHoverSelector = ""; let backImg = ""; let backColor = ""; @@ -125,6 +129,7 @@ describe("All the styles should be applied", ()=> { expect(padBottom).toBeFalsy(); expect(padLeft).toBeFalsy(); }); + test("You should not change the existing head tag elements", ()=> { let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/04.2-Apply-several-classes/test.js b/exercises/04.2-Apply-several-classes/test.js index 2c6ed0d1..6d1d608e 100644 --- a/exercises/04.2-Apply-several-classes/test.js +++ b/exercises/04.2-Apply-several-classes/test.js @@ -6,19 +6,13 @@ document.documentElement.innerHTML = html.toString(); jest.dontMock("fs"); describe("You should change the class on the div tag", () => { - const div = document.querySelectorAll("div") - test("There should only be 1 div tag", () => { - expect(div.length).toBe(1) - }); + const div = document.querySelector("div"); test("The div class should NOT have the spades class", () => { - div.forEach(e=>{ - expect(e.classList.contains("spade")).toBe(false) - }) + expect(div.classList.contains("spade")).toBe(false); }); + test("The div class should have the heart class", () => { - div.forEach(e=>{ - expect(e.classList.contains("heart")).toBe(true) - }) + expect(div.classList.contains("heart")).toBe(true); }); }); diff --git a/learn.json b/learn.json index 709ede73..dc56301e 100644 --- a/learn.json +++ b/learn.json @@ -11,8 +11,8 @@ "difficulty": "easy", "video-solutions": true, "graded": true, - "disabledActions": ["test"], - "disableGrading": true, + "disabledActions": [], + "disableGrading": false, "editor": { "version": "1.0.73" } From 0da679be9a3468d73d8561a5a1f9f44bba223945 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Thu, 1 Sep 2022 17:22:44 -0400 Subject: [PATCH 153/484] Update learn.json --- learn.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn.json b/learn.json index 79a3e90a..709ede73 100644 --- a/learn.json +++ b/learn.json @@ -11,9 +11,9 @@ "difficulty": "easy", "video-solutions": true, "graded": true, - "disabledActions": [], - "disableGrading": false, + "disabledActions": ["test"], + "disableGrading": true, "editor": { "version": "1.0.73" } -} \ No newline at end of file +} From 7c58c65296e84fca82607fda95085195f8e27d7e Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez Date: Thu, 1 Sep 2022 21:57:15 +0000 Subject: [PATCH 154/484] Some solutions and tests modified --- exercises/04.3-id-Selector/index.html | 2 +- exercises/04.3-id-Selector/test.js | 30 +++++++++------- exercises/05-Specificity/README.es.md | 2 +- exercises/05-Specificity/README.md | 2 +- exercises/05-Specificity/styles.css | 7 ++-- exercises/05-Specificity/tests.js | 12 +++---- exercises/06-Practicing-Rules/index.html | 6 ++-- exercises/06-Practicing-Rules/tests.js | 36 +++++++++----------- exercises/07-Very-Specific-Rules/styles.css | 12 +++++++ exercises/08-Rounded-Image/solution.hide.css | 6 +--- exercises/09-Anchor-Styles/index.html | 2 +- exercises/09-Anchor-Styles/solution.hide.css | 2 +- exercises/10-Your-Own-Font/tests.js | 3 -- exercises/11-Font-Awesome-Icons/tests.js | 2 +- exercises/13-Anchor-Like-Button/tests.js | 11 +++--- learn.json | 4 +-- 16 files changed, 68 insertions(+), 71 deletions(-) diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..a7964559 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -8,6 +8,6 @@ - I should look like a button + I should look like a button diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js index 9277e129..cbae3b3f 100644 --- a/exercises/04.3-id-Selector/test.js +++ b/exercises/04.3-id-Selector/test.js @@ -8,25 +8,29 @@ jest.dontMock('fs'); const span = document.querySelector("span"); const link = document.querySelector("link"); -test("There should be a span tag", ()=>{ +test("There should be a span tag", () => { expect(span).toBeTruthy() -}) -test("The span tag should have id 'button1'", ()=>{ +}); + +test("The span tag should have id 'button1'", () => { + expect(span).toBeTruthy(); let id = span.id - expect(id).toBe('button1') + expect(id).toBe('button1'); }); -test("The span tag should not contain any inline style", ()=>{ + +test("The span tag should not contain any inline style", () => { let emptyBodyInlineStyle = {}; + expect(span).toBeTruthy() expect(span.style._values).toEqual(emptyBodyInlineStyle); }); -test("You should not change the existing head tag elements", ()=>{ - let head = document.querySelector('head') - expect(head).toBeTruthy() +test("You should not change the existing head tag elements", () => { + let head = document.querySelector('head'); + expect(head).toBeTruthy(); - let meta = head.querySelector("meta") - expect(meta).toBe(null) + let meta = head.querySelector("meta"); + expect(meta).toBe(null); - const href = link.getAttribute("href") - expect(href).toBe('./styles.css') - }); \ No newline at end of file + const href = link.getAttribute("href"); + expect(href).toBe('./styles.css'); +}); \ No newline at end of file diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md index 890c542d..a87b6e2d 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/05-Specificity/README.es.md @@ -9,7 +9,7 @@ Se trata del nivel de especificidad. Si especificas que tu `div` con `id="thirdi ## 📝 Instrucciones: -1. Anula el color de fondo (`background-color`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. +1. Anula el color de fondo (`background`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. ## 💡 Pista: diff --git a/exercises/05-Specificity/README.md b/exercises/05-Specificity/README.md index bbb243ad..db381074 100644 --- a/exercises/05-Specificity/README.md +++ b/exercises/05-Specificity/README.md @@ -13,7 +13,7 @@ It's all about the level of Specificity. If you specify that your `div` with `id ## 📝 Instrucciones: -1. Override the `background-color` 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. +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: diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..c4e96d25 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,8 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index 9e6d52d6..a22fab68 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -21,17 +21,15 @@ describe("All the styles should be applied", function () { let title = head.querySelector('title') expect(title).not.toBe(null) }) - + test("You should not delete or edit the existing code", function () { + document.querySelector("head").innerHTML = ``; - document.querySelector( - "head" - ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules[0].selectorText; - let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background - console.log("back:", cssArrayBackground) + let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background; let thirdItSelector = document.styleSheets[0].cssRules[1].selectorText; - let thirdItBackground = document.styleSheets[0].cssRules[1].style.background + let thirdItBackground = document.styleSheets[0].cssRules[1].style.background; + expect(thirdItSelector).toBe("#thirditem"); expect(thirdItBackground).toBe("yellow"); expect(cssArray).toBe("ul li"); diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..db2eb563 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -21,9 +21,7 @@

3 reasons you know you are learning

3 reasons you know love what you are learning

Time passes fast.
- You are anxious to finish this excercise and start the next one. -
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

@@ -31,4 +29,4 @@

3 reasons you know love what you are learning

click here

- \ No newline at end of file + diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index 5c2e9903..9bb32a78 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -6,12 +6,12 @@ document.documentElement.innerHTML = html.toString(); jest.dontMock('fs'); -describe("All the styles should be applied", ()=> { +describe("All the styles should be applied", () => { let meta = document.querySelector("meta") let link = document.querySelector("link") let title = document.querySelector('title') - test("the background should match", ()=> { + test("the background should match", () => { document.querySelector( "head" ).innerHTML = ``; @@ -21,15 +21,15 @@ describe("All the styles should be applied", ()=> { `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y` ); }); - test("the font-family should be 'Times New Roman'", ()=> { + test("the font-family should be 'Times New Roman'", () => { document.querySelector( "head" ).innerHTML = ``; let body = document.querySelector("body"); let styles = window.getComputedStyle(body); - expect(styles["font-family"]).toBe("\"Times New Roman\""); + expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\""); }); - test("the padding-left should be '20px'", ()=> { + test("the padding-left should be '20px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -37,16 +37,16 @@ describe("All the styles should be applied", ()=> { let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - test("the font-family in the H1 Tag should be 'Courier'", ()=> { + test("the font-family in the H1 Tag should be 'Courier'", () => { document.querySelector( "head" ).innerHTML = ``; let h1Tag = document.querySelector("h1"); let h1TagStyles = window.getComputedStyle(h1Tag); // get computed styles of any element you like - expect(h1TagStyles["font-family"]).toBe("\"Courier\""); + expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - test("the color in the H1 Tag should be 'red'", ()=> { + test("the color in the H1 Tag should be 'red'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -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-align in the H1 Tag should be 'center'", ()=> { + test("the text-align in the H1 Tag should be 'center'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -64,7 +64,7 @@ describe("All the styles should be applied", ()=> { // get computed styles of any element you like expect(h1TagStyles["text-align"]).toBe("center"); }); - test("the text-decoration in the H2 Tag should be 'underline'", ()=> { + test("the text-decoration in the H2 Tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -73,7 +73,7 @@ describe("All the styles should be applied", ()=> { let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - test("the padding in the #id1 Tag should be '5px'", ()=> { + test("the padding in the #id1 Tag should be '5px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -82,40 +82,36 @@ describe("All the styles should be applied", ()=> { let idTagStyles = window.getComputedStyle(idTag); expect(idTagStyles["padding"]).toBe("5px"); }); - test("the background-color in the #id1 Tag should be 'semi transparent white'", ()=> { + test("the background-color in the #id1 Tag should be 'semi transparent white'", () => { document.querySelector( "head" ).innerHTML = ``; // get computed styles of any element you like const idTag = document.querySelector("#id1"); let idTagStyles = window.getComputedStyle(idTag); - console.log("$$$:", idTagStyles) expect(idTagStyles["background-color"]).toBe("rgba(255, 255, 255, 0.2)"); }); - test("The a hover underline should be removed", ()=> { + test("The a hover underline should be removed", () => { document.querySelector( "head" ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) let orangeHoverSelector = ""; for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === "a:hover") { orangeHoverSelector = cssArray[i].style['text-decoration']; - console.log("$$$:", orangeHoverSelector) } } expect(orangeHoverSelector).toBe("none"); }); - test("The a hover color should be green", ()=> { + test("The a hover color should be green", () => { document.querySelector( "head" ).innerHTML = ``; - let cssArray = document.styleSheets[0].cssRules; - console.log("$$$:", cssArray[0]) let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === "a:hover") { orangeHoverSelector = cssArray[i].style.color; @@ -123,7 +119,7 @@ describe("All the styles should be applied", ()=> { } expect(orangeHoverSelector).toBe('green'); }); - test("You should not change the existing head tag elements", ()=> { + test("You should not change the existing head tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 300d0677..55fb5ff4 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,5 +1,17 @@ /** Insert your code here **/ +ul li { + color: red !important; +} + +ol li:nth-child(2) { + background-color: green; +} + +tr:nth-child(odd) { + background: yellow; +} + /*********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of this lines diff --git a/exercises/08-Rounded-Image/solution.hide.css b/exercises/08-Rounded-Image/solution.hide.css index 56819f66..2ddc0eed 100644 --- a/exercises/08-Rounded-Image/solution.hide.css +++ b/exercises/08-Rounded-Image/solution.hide.css @@ -2,12 +2,8 @@ body { background: #bdbdbd; } .rounded { - border-radius: 100%; - background-image: url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/einstein.png?raw=true"); - background-position-x: center; - background-position-y: center; - background-size: contain; object-fit: cover; width: 200px; height: 200px; + border-radius: 100%; } diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/09-Anchor-Styles/index.html index 984ca01e..30e00691 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/09-Anchor-Styles/index.html @@ -6,7 +6,7 @@ 09 Anchor Styles - + Click me diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css index b3e6a36b..101d281c 100644 --- a/exercises/09-Anchor-Styles/solution.hide.css +++ b/exercises/09-Anchor-Styles/solution.hide.css @@ -12,4 +12,4 @@ a.threeDimension:active { /* your code here*/ border-color: #000 #aaa #aaa #000; -} \ No newline at end of file +} diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index 52e13aa6..e86491c0 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -17,11 +17,9 @@ describe("All the styles should be applied", ()=>{ // get computed styles of any element you like let cssArray = document.styleSheets[0].cssRules; - // console.log("%%% ", cssArray) let orangeHoverSelector = ""; for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === ".myTitle") { - // console.log("%%% ", cssArray[i].selectorText) orangeHoverSelector = cssArray[i].style['font-family']; } } @@ -35,7 +33,6 @@ describe("All the styles should be applied", ()=>{ }); test("The link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("*") - // console.log("###", headContent[1].innerHTML) expect(link.length).toBe(2); }); diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index f7d8cf6e..2b717fd5 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -20,8 +20,8 @@ describe("All the styles should be applied", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); test(" LI innerHTML exist", ()=>{ - const li = document.querySelectorAll("li"); expect(document.querySelector("li")).toBeTruthy(); + const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index fcc69fa4..d93dc049 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -6,9 +6,6 @@ document.documentElement.innerHTML = html.toString(); jest.dontMock('fs'); - - - describe("All the styles should be applied", ()=>{ const meta = document.querySelector("meta") const title = document.querySelector('title') @@ -23,7 +20,7 @@ describe("All the styles should be applied", ()=>{ expect(classTagStyles["padding"]).toBe("10px"); }); - test("the border radius should be '4px'", ()=>{ + test("the border radius should be '4px'", ()=>{ document.querySelector( "head" @@ -32,7 +29,7 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - test("the background should be 'orange'", ()=>{ + test("the background should be 'orange'", ()=>{ document.querySelector( "head" @@ -41,7 +38,7 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["background"]).toBe("orange"); }); - test("the underline should to be removed", ()=>{ + test("the underline should be removed", ()=>{ document.querySelector( "head" @@ -67,7 +64,7 @@ describe("All the styles should be applied", ()=>{ expect(orangeHoverSelector).toBe("darkorange"); }); - test("You should be careful with the specifity", ()=>{ + test("You should be careful with the specificity", ()=>{ document.querySelector( "head" ).innerHTML = ``; diff --git a/learn.json b/learn.json index 709ede73..dc56301e 100644 --- a/learn.json +++ b/learn.json @@ -11,8 +11,8 @@ "difficulty": "easy", "video-solutions": true, "graded": true, - "disabledActions": ["test"], - "disableGrading": true, + "disabledActions": [], + "disableGrading": false, "editor": { "version": "1.0.73" } From e93d52b08be5ed2969029c1ed463ced88962ed8f Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Fri, 2 Sep 2022 20:05:14 +0000 Subject: [PATCH 155/484] reversed file to original state --- exercises/07-Very-Specific-Rules/styles.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 55fb5ff4..c77b84c2 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,16 +1,5 @@ /** Insert your code here **/ -ul li { - color: red !important; -} - -ol li:nth-child(2) { - background-color: green; -} - -tr:nth-child(odd) { - background: yellow; -} /*********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, From 92519aa558563baaf3db05267151932bd72863b5 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Mon, 5 Sep 2022 23:59:31 +0000 Subject: [PATCH 156/484] Added regex to check for important flag --- exercises/07-Very-Specific-Rules/tests.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 10b24a7e..66a759a2 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -11,19 +11,24 @@ describe("All the styles should be applied", ()=>{ const title = document.querySelector('title') const link = document.querySelector('link') - test("The ul li color has to be red", ()=>{ + test("The ul li color has to be red using !important", ()=>{ document.querySelector( "head" ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector = ""; + let color = "" + for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === "ul li" || cssArray[i].selectorText === "ul > li") { - orangeHoverSelector = cssArray[i].style["color"]; + color = cssArray[i].cssText; } } - expect(orangeHoverSelector).toBe("red"); + let reg = new RegExp(/\s*color:\s*red\s*!important\s*;\s*/gm) + + expect(reg.test(color)).toBeTruthy(); }); + test("The ul second element background should be green", ()=>{ document.querySelector( "head" @@ -39,6 +44,7 @@ describe("All the styles should be applied", ()=>{ } expect(orangeHoverSelector).toBe("green"); }) + test("The odd rows of the table should have yellow background", ()=>{ document.querySelector( "head" @@ -63,8 +69,8 @@ describe("All the styles should be applied", ()=>{ let cssArray = document.styleSheets[0].cssRules[4].selectorText; expect(cssArray).toBe("ul li,\nol li"); expect(cssBody).toBe("body"); - } - ) + }) + test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() @@ -76,4 +82,5 @@ describe("All the styles should be applied", ()=>{ expect(title).toBeTruthy() }) + }); \ No newline at end of file From d560a459118735b1040f52b5a9827ce9ebe4d065 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Tue, 6 Sep 2022 01:14:36 +0000 Subject: [PATCH 157/484] improved exercises --- exercises/08-Rounded-Image/solution.hide.css | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/08-Rounded-Image/solution.hide.css b/exercises/08-Rounded-Image/solution.hide.css index 2ddc0eed..31815f5c 100644 --- a/exercises/08-Rounded-Image/solution.hide.css +++ b/exercises/08-Rounded-Image/solution.hide.css @@ -3,6 +3,7 @@ body { } .rounded { object-fit: cover; + object-position: top; width: 200px; height: 200px; border-radius: 100%; From 854e0162ed69aefa201d6fa8b70644812b01e654 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Tue, 6 Sep 2022 01:15:14 +0000 Subject: [PATCH 158/484] improved instructions and provided additional documentation on object-fit --- exercises/08-Rounded-Image/README.es.md | 4 +++- exercises/08-Rounded-Image/README.md | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 956bcbb7..3e7e4c25 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -16,6 +16,8 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La ## 💡 Pista: -+ Si la imagen es más grande que el `div` y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. ++ 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 articulo 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) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 7fedd48e..7cedf6b1 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -15,7 +15,8 @@ The obvious way create a rounded profile picture is to create an image tag and a ## 💡 Hint: -+ If the image ends up being bigger than the `div` (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. ++ 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/) ++ 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) \ No newline at end of file From 3047ec2a1e6dd7ce094b06356701ae615d4e03d9 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Tue, 6 Sep 2022 01:15:53 +0000 Subject: [PATCH 159/484] deleted unnecessary tests, added tests to check for actual solution, and improved code format --- exercises/08-Rounded-Image/tests.js | 94 +++++++++++++---------------- 1 file changed, 43 insertions(+), 51 deletions(-) diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js index c03d1580..adcba6f3 100644 --- a/exercises/08-Rounded-Image/tests.js +++ b/exercises/08-Rounded-Image/tests.js @@ -11,73 +11,65 @@ describe("All the styles should be applied", () => { const title = document.querySelector('title') const link = document.querySelector('link') - test("The tag has to be removed", () => { - document.querySelector( - "head" - ).innerHTML = ``; - expect(document.querySelector("img")).toBeFalsy(); - }); - test("The

tag should exists", () => { - document.querySelector( - "head" - ).innerHTML = ``; - expect(document.querySelector("div")).toBeTruthy(); - }); - test("the width in the div Tag should be '200px'", () => { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["width"]).toBe("200px"); - }); - test("the height in the div Tag should be '200px'", () => { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["height"]).toBe("200px"); - }); - test("the border radius in the div Tag should be '100%'", () => { - // get computed styles of any element you like + const img = document.querySelector(".rounded") + + test("the img tag should exist", () => { + expect(img).toBeTruthy(); + }) + + test("the width in the img Tag should be equal to its height and vice versa", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["border-radius"]).toBe("100%"); + + let cssArray = document.styleSheets[0].cssRules; + + let width = ""; + let height = ""; + + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".rounded") { + width = cssArray[i].style["width"]; + height = cssArray[i].style["height"]; + } + } + + // checks if styles return empty string "" or undefined + expect(width).toBeTruthy(); + expect(height).toBeTruthy(); + + expect(width).toBe(height); + expect(height).toBe(width); }); - test("the background position x in the div Tag should be 'center'", () => { - // get computed styles of any element you like + + test("the border radius of the img Tag should be '100%'", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-position-x"]).toBe("center"); + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["border-radius"]).toBe("100%"); }); - test("the background position y in the div Tag should be 'center'", () => { - // get computed styles of any element you like + + test("the object-fit value of the img Tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-position-y"]).toBe("center"); + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-fit"]).toBe("cover"); }); - test("the background image in the div Tag should exists", () => { - // get computed styles of any element you like + + test("the object-position value of the img Tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-image"]).toBeTruthy(); + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-position"]).toBe("top"); }); - test("You should not change the existing head tag elements", ()=>{ + + test("You should not change the existing head tag elements", () => { let head = document.querySelector('head') expect(head).toBeTruthy() From 90e52397a48ad3572739790a95bf7b49d6b5c9aa Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez Date: Mon, 12 Sep 2022 21:33:26 +0000 Subject: [PATCH 160/484] Some details added to the tests --- exercises/04.3-id-Selector/index.html | 2 +- exercises/04.3-id-Selector/test.js | 1 + exercises/06-Practicing-Rules/README.es.md | 6 +-- exercises/06-Practicing-Rules/README.md | 6 +-- exercises/06-Practicing-Rules/index.html | 42 ++++++++++--------- .../06-Practicing-Rules/solution.hide.css | 1 - exercises/06-Practicing-Rules/styles.css | 2 +- exercises/06-Practicing-Rules/tests.js | 19 +-------- .../07-Very-Specific-Rules/solution.hide.css | 4 +- exercises/07-Very-Specific-Rules/styles.css | 1 + exercises/07-Very-Specific-Rules/tests.js | 2 +- exercises/08-Rounded-Image/tests.js | 9 ---- exercises/12-Relative-Length-EM-REM/tests.js | 17 -------- exercises/13-Anchor-Like-Button/tests.js | 25 ----------- 14 files changed, 37 insertions(+), 100 deletions(-) diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index a7964559..5b9a773d 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -8,6 +8,6 @@ - I should look like a button + I should look like a button diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js index cbae3b3f..f9ea69cc 100644 --- a/exercises/04.3-id-Selector/test.js +++ b/exercises/04.3-id-Selector/test.js @@ -15,6 +15,7 @@ test("There should be a span tag", () => { test("The span tag should have id 'button1'", () => { expect(span).toBeTruthy(); let id = span.id + expect(id).toBeTruthy(); expect(id).toBe('button1'); }); diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index ee953a20..9cf27efa 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -10,11 +10,11 @@ 4. Haz todos los `h2` tengan subrayado. -5. Centra el `h1`. +5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. -6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. +6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto). -7. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto), y luego aplica un `padding` de `5px` a todos los lados de ese párrafo. +7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo. 8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo). diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index b8b63bcc..1f418bfc 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -14,11 +14,11 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 4. Make all the `h2's` with an `underline`. -5. Center the `h1` to the middle. +5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a `left padding` to the whole document of `20px` to make it easier to read. +6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". -7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph. +7. Then apply a `padding` of `5px` to all sides of that paragraph. 8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it). diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index db2eb563..2651f781 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -8,25 +8,27 @@ -

The learning essay

3 reasons you know you are learning

- We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. -

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

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

The learning essay

3 reasons you know you are learning

+ We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. +

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.

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

diff --git a/exercises/06-Practicing-Rules/solution.hide.css b/exercises/06-Practicing-Rules/solution.hide.css index d1e24e3c..4026152e 100644 --- a/exercises/06-Practicing-Rules/solution.hide.css +++ b/exercises/06-Practicing-Rules/solution.hide.css @@ -13,7 +13,6 @@ body { h1 { font-family: "Courier"; color: red; - text-align: center; } h2 { diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index d89b1a47..9a7fae86 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1 @@ -/* add your styles here */ \ No newline at end of file +/* add your styles here */ diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index 9bb32a78..a348b847 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -55,15 +55,6 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - test("the text-align in the H1 Tag should be 'center'", () => { - document.querySelector( - "head" - ).innerHTML = ``; - let h1Tag = document.querySelector("h1"); - let h1TagStyles = window.getComputedStyle(h1Tag); - // get computed styles of any element you like - expect(h1TagStyles["text-align"]).toBe("center"); - }); test("the text-decoration in the H2 Tag should be 'underline'", () => { document.querySelector( "head" @@ -82,15 +73,7 @@ describe("All the styles should be applied", () => { let idTagStyles = window.getComputedStyle(idTag); expect(idTagStyles["padding"]).toBe("5px"); }); - test("the background-color in the #id1 Tag should be 'semi transparent white'", () => { - document.querySelector( - "head" - ).innerHTML = ``; - // get computed styles of any element you like - const idTag = document.querySelector("#id1"); - let idTagStyles = window.getComputedStyle(idTag); - expect(idTagStyles["background-color"]).toBe("rgba(255, 255, 255, 0.2)"); - }); + test("The a hover underline should be removed", () => { document.querySelector( "head" diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/07-Very-Specific-Rules/solution.hide.css index eb60fcfa..55fb5ff4 100644 --- a/exercises/07-Very-Specific-Rules/solution.hide.css +++ b/exercises/07-Very-Specific-Rules/solution.hide.css @@ -1,6 +1,7 @@ /** Insert your code here **/ + ul li { - color: red; + color: red !important; } ol li:nth-child(2) { @@ -10,6 +11,7 @@ ol li:nth-child(2) { tr:nth-child(odd) { background: yellow; } + /*********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of this lines diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index c77b84c2..06ec4a71 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,6 +1,7 @@ /** Insert your code here **/ + /*********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of this lines diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 66a759a2..26cd5978 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -24,7 +24,7 @@ describe("All the styles should be applied", ()=>{ color = cssArray[i].cssText; } } - let reg = new RegExp(/\s*color:\s*red\s*!important\s*;\s*/gm) + let reg = new RegExp(/color:\s*red\s*!important\s*;/gm) expect(reg.test(color)).toBeTruthy(); }); diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js index adcba6f3..70c5b643 100644 --- a/exercises/08-Rounded-Image/tests.js +++ b/exercises/08-Rounded-Image/tests.js @@ -42,15 +42,6 @@ describe("All the styles should be applied", () => { expect(height).toBe(width); }); - test("the border radius of the img Tag should be '100%'", () => { - document.querySelector( - "head" - ).innerHTML = ``; - - let imgStyle = window.getComputedStyle(img); - expect(imgStyle["border-radius"]).toBe("100%"); - }); - test("the object-fit value of the img Tag should be 'cover'", () => { document.querySelector( "head" diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index 2752a78d..f6987b7a 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -28,23 +28,6 @@ describe("All the styles should be applied", ()=>{ var styles = window.getComputedStyle(h3Tag); expect(styles["font-size"]).toBe("0.8rem"); }); - test("You should add your rules below the existing code", ()=>{ - document.querySelector( - "head" - ).innerHTML = ``; - let cssArray = document.styleSheets[0].cssRules[0].selectorText; - - expect(cssArray).toBe("#my-first-div"); - } - ) - test("You should add your rules below the existing code", ()=>{ - document.querySelector( - "head" - ).innerHTML = ``; - let cssArray = document.styleSheets[0].cssRules[1].selectorText; - expect(cssArray).toBe("#the-second-one"); - } - ) test("You should not change the existing head tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index d93dc049..587b95d7 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -29,15 +29,6 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - test("the background should be 'orange'", ()=>{ - document.querySelector( - "head" - - ).innerHTML = ``; - let divTag = document.querySelector(".orange-btn"); - let classTagStyles = window.getComputedStyle(divTag); - expect(classTagStyles["background"]).toBe("orange"); - }); test("the underline should be removed", ()=>{ document.querySelector( "head" @@ -47,22 +38,6 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["text-decoration"]).toBe("none"); }); - test("The mouse hover property should be 'darkorange'", ()=>{ - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - let cssArray = document.styleSheets[0].cssRules; - - let orangeHoverSelector = ""; - for (let i = 0; i < cssArray.length; i++) { - if (cssArray[i].selectorText === ".orange-btn:hover") { - orangeHoverSelector = cssArray[i].style.background; - } - } - - expect(orangeHoverSelector).toBe("darkorange"); - }); test("You should be careful with the specificity", ()=>{ document.querySelector( From 7e82f9b4c71350a702339f04c555f38e25f5ae71 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Thu, 22 Sep 2022 15:35:58 +0000 Subject: [PATCH 161/484] stiles to styles --- exercises/04.3-id-Selector/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.3-id-Selector/README.md b/exercises/04.3-id-Selector/README.md index c079f936..061ec46b 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/04.3-id-Selector/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=9906LCSQJ8M" # `04.3` The ID CSS Selector -You can also select an element by `#id` and apply stiles to it. +You can also select an element by `#id` and apply styles to it. ## The `#id` selector From a6caa74d0d897bec73ce11169950078d2bf239d5 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Wed, 28 Sep 2022 16:57:20 +0000 Subject: [PATCH 162/484] deleted solution in index.html --- .learn/resets/01.3-Your-Second-Style/index.html | 14 ++++++++++++++ exercises/01.3-Your-Second-Style/index.html | 3 --- 2 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 .learn/resets/01.3-Your-Second-Style/index.html diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html new file mode 100644 index 00000000..03e672a3 --- /dev/null +++ b/.learn/resets/01.3-Your-Second-Style/index.html @@ -0,0 +1,14 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 03e672a3..998d973a 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -3,9 +3,6 @@ From 2819a9d8fb33875533866b42ed300ec04a17549c Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Wed, 28 Sep 2022 16:57:48 +0000 Subject: [PATCH 163/484] deleted solution in index.html --- .learn/resets/01.3-Your-Second-Style/index.html | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 .learn/resets/01.3-Your-Second-Style/index.html diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html deleted file mode 100644 index 03e672a3..00000000 --- a/.learn/resets/01.3-Your-Second-Style/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Hello! My background should be blue! - - From 41e04edc2be2deebad3b6abdff135473b09176c0 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Wed, 28 Sep 2022 21:28:44 +0000 Subject: [PATCH 164/484] flexible results --- exercises/10-Your-Own-Font/index.html | 2 -- exercises/10-Your-Own-Font/solution.hide.css | 2 +- exercises/10-Your-Own-Font/solution.hide.html | 30 ++++++++++--------- exercises/10-Your-Own-Font/styles.css | 1 - exercises/10-Your-Own-Font/tests.js | 2 +- 5 files changed, 18 insertions(+), 19 deletions(-) diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index 7ca11a24..b4005187 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -3,8 +3,6 @@ - - diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index 371e026b..e36ebf08 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { /*your code here*/ - font-family: 'Roboto'; /*Varies depending on the font you chose*/ + font-family: "Roboto"; /*Varies depending on the font you chose*/ } diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html index 32040ed7..d1547a63 100644 --- a/exercises/10-Your-Own-Font/solution.hide.html +++ b/exercises/10-Your-Own-Font/solution.hide.html @@ -1,17 +1,19 @@ - - - - - - + + + + + + + - 10 Your Own Font - - -

My unique font

- - \ No newline at end of file + 10 Your Own Font + + +

My unique font

+ + diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index a8694c16..0335a322 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,4 +1,3 @@ .myTitle { /* Add your code below this line */ - } diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index e86491c0..646f7192 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -33,7 +33,7 @@ describe("All the styles should be applied", ()=>{ }); test("The link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("*") - expect(link.length).toBe(2); + expect(link.length).toBeGreaterThanOrEqual(2); }); From 7ff4e7653d4bfcc6bb4613519e0ef5d1781f5e4c Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Thu, 29 Sep 2022 21:48:53 +0000 Subject: [PATCH 165/484] flexible tests --- exercises/07-Very-Specific-Rules/README.es.md | 2 +- exercises/07-Very-Specific-Rules/README.md | 2 +- exercises/07-Very-Specific-Rules/styles.css | 4 +--- exercises/07-Very-Specific-Rules/tests.js | 18 +++++++++++------- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index b6295156..4ca537e5 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -8,7 +8,7 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** 1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico). -2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id). +2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class). 3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`. diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index f0c39817..1f7cdef0 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -13,7 +13,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th 1. Set the `ul` 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). +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`. diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 06ec4a71..a754799f 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,7 +1,5 @@ /** Insert your code here **/ - - /*********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of this lines @@ -14,4 +12,4 @@ body { ul li, ol li { color: green; -} +} \ No newline at end of file diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 26cd5978..403d12b6 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -35,14 +35,16 @@ describe("All the styles should be applied", ()=>{ ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector = ""; + let background = ""; + let backgroundColor=""; for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === "ol li:nth-child(2)" || cssArray[i].selectorText === "ol > li:nth-child(2)") { - orangeHoverSelector = cssArray[i].style['background-color']; + background = cssArray[i].style['background']; + backgroundColor = cssArray[i].style['background-color']; } - } expect(orangeHoverSelector).toBe("green"); + } expect(background === 'green' || backgroundColor === 'green').toBeTruthy(); }) test("The odd rows of the table should have yellow background", ()=>{ @@ -51,14 +53,16 @@ describe("All the styles should be applied", ()=>{ ).innerHTML = ``; let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector = ""; + let background = ""; + let backgroundColor = ""; for (let i = 0; i < cssArray.length; i++) { if (cssArray[i].selectorText === "tr:nth-child(odd)") { - orangeHoverSelector = cssArray[i].style['background']; - + background = cssArray[i].style['background']; + backgroundColor = cssArray[i].style['background-color']; + } - } expect(orangeHoverSelector).toBe("yellow"); + } expect(background === "yellow" || backgroundColor === "yellow").toBeTruthy(); }) test("Write all your rules above the existing code", ()=>{ From 1c4067c86b9af257d433de6a80b0a4b7af430fe5 Mon Sep 17 00:00:00 2001 From: minervaDutta Date: Thu, 29 Sep 2022 17:46:57 -0700 Subject: [PATCH 166/484] spacing correction changed space on line 93 for better readability. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cd220aea..65c45e19 100644 --- a/README.md +++ b/README.md @@ -90,4 +90,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍 -This project follows the[all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome! +This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome! From c04e03c66fd8ff142f5b3354e58a9c145e00f905 Mon Sep 17 00:00:00 2001 From: minervaDutta Date: Thu, 29 Sep 2022 17:47:43 -0700 Subject: [PATCH 167/484] spacing correction 2 added another space for better readability --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 65c45e19..e5bc2c4f 100644 --- a/README.md +++ b/README.md @@ -90,4 +90,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍 -This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification.Contributions of any kind are welcome! +This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! From c3a598b4d33a555b44b87454219a28de04ebc274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=96kiddopro?= Date: Fri, 7 Oct 2022 22:48:39 -0300 Subject: [PATCH 168/484] properties --- learn.json | 1 + 1 file changed, 1 insertion(+) diff --git a/learn.json b/learn.json index dc56301e..d0cec84c 100644 --- a/learn.json +++ b/learn.json @@ -10,6 +10,7 @@ "duration": 8, "difficulty": "easy", "video-solutions": true, + "bugs-link": "https://github.com/learnpack/learnpack/issues/new", "graded": true, "disabledActions": [], "disableGrading": false, From bf167ee3d2df4a5c81f90d411ae4c6930958c3d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Su=C3=A1rez?= <82285542+kiddopro@users.noreply.github.com> Date: Tue, 11 Oct 2022 22:37:33 -0300 Subject: [PATCH 169/484] camelCase --- learn.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index d0cec84c..d73f7688 100644 --- a/learn.json +++ b/learn.json @@ -9,8 +9,8 @@ "description": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", "duration": 8, "difficulty": "easy", - "video-solutions": true, - "bugs-link": "https://github.com/learnpack/learnpack/issues/new", + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", "graded": true, "disabledActions": [], "disableGrading": false, From 0db089dc1d4aca4aeb0953bf71c1ed191d6a08c5 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Tue, 18 Oct 2022 21:28:24 +0000 Subject: [PATCH 170/484] changed readme,improved test --- exercises/07-Very-Specific-Rules/README.md | 3 +++ exercises/07-Very-Specific-Rules/styles.css | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 1f7cdef0..07e4c1ea 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -22,3 +22,6 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th +## :bulb: Hint: + +1. the !important attribute helps to override over other attributes \ No newline at end of file diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index a754799f..300d0677 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -12,4 +12,4 @@ body { ul li, ol li { color: green; -} \ No newline at end of file +} From 321c648e1ace15ad4a9dfe6b10783348e8f4442a Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 20 Oct 2022 21:10:58 +0000 Subject: [PATCH 171/484] made last test more flexible to accept any font-awesome class --- exercises/11-Font-Awesome-Icons/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 2b717fd5..191bdbcf 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -26,13 +26,13 @@ describe("All the styles should be applied", ()=>{ expect(li[i].innerHTML).toBeTruthy(); } }); - test('the i tag should have a class "fas"', ()=>{ + test('the i tag(s) should have Font Awesome class(es) starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have expect(icons).toBeTruthy(); icons.forEach(icon=>{ - let hasFas = icon.classList.contains("fas") - expect(hasFas).toBe(true); + let hasFa = icon.classList.contains("fa-") + expect(hasFa).toBeTruthy(); }) }); }); From f350b6cd955b9baeacc8972b41e7beec3d705c0e Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 20 Oct 2022 21:18:31 +0000 Subject: [PATCH 172/484] test fixed --- exercises/11-Font-Awesome-Icons/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 191bdbcf..075d2f0e 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -31,7 +31,7 @@ describe("All the styles should be applied", ()=>{ expect(icons).toBeTruthy(); icons.forEach(icon=>{ - let hasFa = icon.classList.contains("fa-") + let hasFa = icon.classList.toString().includes("fa-") expect(hasFa).toBeTruthy(); }) }); From b7e8fd3ee2b905ad6fb56d3acf7fb689ea0bcc63 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:15:32 -0400 Subject: [PATCH 173/484] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 07e4c1ea..ac622518 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -20,8 +20,6 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th ![Example Image](../../.learn/assets/07-1.png?raw=true) - - ## :bulb: Hint: -1. the !important attribute helps to override over other attributes \ No newline at end of file +1. the !important attribute helps to override over other attributes From de455f1344a14d1044c0ce761eea778585eadc87 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez Date: Wed, 26 Oct 2022 17:22:15 +0000 Subject: [PATCH 174/484] Hint added to the 7th exercise --- exercises/07-Very-Specific-Rules/README.es.md | 3 ++- exercises/07-Very-Specific-Rules/README.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index 4ca537e5..accf8d55 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -15,5 +15,6 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** ![Example Image](../../.learn/assets/07-1.png?raw=true) +## :bulb: Pista: - +1. El atributo `!important` ayuda a sobreescribir stilos. \ No newline at end of file diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index ac622518..3fb8ba40 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -22,4 +22,4 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th ## :bulb: Hint: -1. the !important attribute helps to override over other attributes +1. The `!important` attribute helps to override over other attributes. From 705e15a28eb2a7b2acdbb23c0e15d3e61c947a15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Su=C3=A1rez?= <82285542+kiddopro@users.noreply.github.com> Date: Sat, 5 Nov 2022 21:06:42 -0300 Subject: [PATCH 175/484] properties --- learn.json | 1 + 1 file changed, 1 insertion(+) diff --git a/learn.json b/learn.json index d73f7688..6caa33b1 100644 --- a/learn.json +++ b/learn.json @@ -11,6 +11,7 @@ "difficulty": "easy", "videoSolutions": true, "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", "graded": true, "disabledActions": [], "disableGrading": false, From 2b67acaed20799b9a2f66af8dcfe2088bf8473df Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Mon, 21 Nov 2022 20:34:35 +0000 Subject: [PATCH 176/484] your-second-style --- .learn/resets/01.3-Your-Second-Style/index.html | 11 +++++++++++ exercises/01.3-Your-Second-Style/README.es.md | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 .learn/resets/01.3-Your-Second-Style/index.html diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html new file mode 100644 index 00000000..998d973a --- /dev/null +++ b/.learn/resets/01.3-Your-Second-Style/index.html @@ -0,0 +1,11 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md index f36f13d4..267c8149 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/01.3-Your-Second-Style/README.es.md @@ -1,8 +1,8 @@ -# `01.2` Tu Segundo Estilo +# `01.3` Tu Segundo Estilo 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 las anchors de mi sitio web (`etiquetas `) sean azules: ```css a { From 18e1530bbe8ef17c8aa446e9091e3fcdd6add621 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Mon, 21 Nov 2022 20:39:14 +0000 Subject: [PATCH 177/484] your-second-style --- .learn/resets/01.3-Your-Second-Style/index.html | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 .learn/resets/01.3-Your-Second-Style/index.html diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html deleted file mode 100644 index 998d973a..00000000 --- a/.learn/resets/01.3-Your-Second-Style/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - Hello! My background should be blue! - - From 0823f86b5b4585493d98767e16afaae404c2eb20 Mon Sep 17 00:00:00 2001 From: SheepDogg586 <109840369+SheepDogg586@users.noreply.github.com> Date: Wed, 23 Nov 2022 17:19:29 -0500 Subject: [PATCH 178/484] Update README.md Added periods to the end of lines 78 and 79. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e5bc2c4f..732a3825 100644 --- a/README.md +++ b/README.md @@ -75,8 +75,8 @@ Note: The exercises have automatic grading but its very rigid and strict, my rec Each exercise is a small react application containing the following files: -1. **index.html:** all websites and exercises start from the index.html -2. **styles.css:** your CSS code goes here, some exercises will make you update this file +1. **index.html:** all websites and exercises start from the index.html. +2. **styles.css:** your CSS code goes here, some exercises will make you update this file. 3. **README.md:** contains exercise instructions. 4. **test.js:** you don't have to open this file, it contains the testing script for the exercise. From 6fc2535f9b8d0dfc1f8db28c51ecd36d84e5785f Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Tue, 6 Dec 2022 15:55:31 -0400 Subject: [PATCH 179/484] Update README.md --- exercises/06-Practicing-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 1f418bfc..6fc519c0 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use `rgba` for that) and write down "3 reasons you know you are learning". +6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that) and write down "3 reasons you know you are learning". 7. Then apply a `padding` of `5px` to all sides of that paragraph. From b56f3b66f442c97cf5042a311cae940316bbc486 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Tue, 6 Dec 2022 15:56:53 -0400 Subject: [PATCH 180/484] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 3fb8ba40..b6618da6 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -11,7 +11,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th ## 📝 Instructions: -1. Set the `ul` text color to `red` (override conflicts with specificity). +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). From 4ffbc45e3e69ce4e78bd3ac6038a4a694aebe8f8 Mon Sep 17 00:00:00 2001 From: dsilva06 Date: Mon, 19 Dec 2022 19:27:00 +0000 Subject: [PATCH 181/484] fixed readme --- exercises/04.2-Apply-several-classes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/04.2-Apply-several-classes/README.md index 2bcfbd77..9b2f8bdf 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/04.2-Apply-several-classes/README.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=da4tJDx48CY" We have prepared a small CSS Stylesheet that contains the CSS styles to replicate poker cards. -We are going to use to classes and apply them to the same `

` element. +We are going to use two classes and apply them to the same `

` element. ```html

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

` element.

``` -The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc. +The class `card` contains the styling rules to make the div look like a card: borders, height, width, etc. + The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades symbol). There are two possible suite classes you can apply to the html element to make it look like a real poker card. From 78f6051c3e1dcdbaf12db84fa700052c7b509ef2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 4 Apr 2023 23:57:39 +0200 Subject: [PATCH 268/484] Update README.es.md --- exercises/04.2-Apply-several-classes/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/04.2-Apply-several-classes/README.es.md index 77f0b1b7..236bebab 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/04.2-Apply-several-classes/README.es.md @@ -7,7 +7,7 @@ Vamos a usar clases y aplicarlas al mismo elemento `

My first item of the list

My second item of the list

My third item of the list

My forth item of the list

My fourth item of the list

My fifth item of the list

From d34a53e44bd69bcba98d6ab72f2f9c7229e61033 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 02:41:48 +0200 Subject: [PATCH 280/484] Update index.html --- exercises/06-Practicing-Rules/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 2651f781..c9135f89 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -12,18 +12,18 @@

The learning essay

3 reasons you know you are learning

- We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. + We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic
You understand what the teacher is talking about.
You are able to have conversations about the topic.

3 reasons you know love what you are learning

3 reasons you love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.
You are anxious to finish this exercise and start the next one.
It's 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? From eee9b2734ffb24049bd05b882c0663722f640405 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:03:26 +0200 Subject: [PATCH 281/484] Update README.md --- exercises/06-Practicing-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 409dabd7..c63091d4 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that) and type "3 reasons you know you are learning". +6. Add a `white semi-transparent background (0.2)` to the first `p` to make it easier to read (you have to use `rgba` for that). 7. Then apply a `padding` of `5px` to all sides of that paragraph. From 2a451389e0c79f870860c285e3edffbc35f81b8f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:08:17 +0200 Subject: [PATCH 282/484] Update README.md --- exercises/06-Practicing-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index c63091d4..1674968f 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 5. Add a `left padding` to the whole document of `20px` to make it easier to read. -6. Add a `white semi-transparent background (0.2)` to the first `p` to make it easier to read (you have to use `rgba` for that). +6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that). 7. Then apply a `padding` of `5px` to all sides of that paragraph. From f0ca1f718c28ce90dff2173b42325d790d8aa966 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:10:24 +0200 Subject: [PATCH 283/484] Update README.es.md --- exercises/06-Practicing-Rules/README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index 9cf27efa..101596bb 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -8,15 +8,15 @@ 3. Cambia el color del `h1` a rojo(`red`). -4. Haz todos los `h2` tengan subrayado. +4. Haz que todos los `h2` tengan subrayado. 5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. -6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto). +6. Agrega un fondo blanco semitransparente (`semi-transparent background (0.2)`) al primer párrafo para que sea más fácil de leer (tienes que usar `rgba` para esto). 7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo. -8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo). +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: From 199feb401f9013c31aa63c64caa8f91dd82c9b93 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:14:29 +0200 Subject: [PATCH 284/484] Update tests.js --- exercises/06-Practicing-Rules/tests.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index a348b847..d9fd4156 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -11,7 +11,7 @@ describe("All the styles should be applied", () => { let link = document.querySelector("link") let title = document.querySelector('title') - test("the background should match", () => { + test("The background should match", () => { document.querySelector( "head" ).innerHTML = ``; @@ -21,7 +21,7 @@ describe("All the styles should be applied", () => { `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y` ); }); - test("the font-family should be 'Times New Roman'", () => { + test("The font-family should be 'Times New Roman'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -29,7 +29,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\""); }); - test("the padding-left should be '20px'", () => { + test("The padding-left should be '20px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -37,7 +37,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - test("the font-family in the H1 Tag should be 'Courier'", () => { + test("The font-family in the h1 tag should be 'Courier'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -46,7 +46,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - test("the color in the H1 Tag should be 'red'", () => { + test("The color in the h1 tag should be 'red'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -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 H2 Tag should be 'underline'", () => { + test("the text-decoration in the h2 tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -64,7 +64,7 @@ describe("All the styles should be applied", () => { let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - test("the padding in the #id1 Tag should be '5px'", () => { + test("The padding in the #id1 tag should be '5px'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -74,7 +74,7 @@ describe("All the styles should be applied", () => { expect(idTagStyles["padding"]).toBe("5px"); }); - test("The a hover underline should be removed", () => { + test("The a:hover underline should be removed", () => { document.querySelector( "head" ).innerHTML = ``; @@ -88,7 +88,7 @@ describe("All the styles should be applied", () => { expect(orangeHoverSelector).toBe("none"); }); - test("The a hover color should be green", () => { + test("The a:hover color should be green", () => { document.querySelector( "head" ).innerHTML = ``; From 35f4edfdfc506ca90d0af21a90040ec7d2f3676c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:37:05 +0200 Subject: [PATCH 285/484] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 3cba95e9..dc922179 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -19,8 +19,8 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th ![Example Image](../../.learn/assets/07-1.png?raw=true) ->Important: You should **NOT** modify the index.html file +>Important: You should **NOT** modify the index.html file. ## :bulb: Hint: -1. The `!important` attribute helps to override over other attributes. +1. The `!important` attribute helps to override other attributes. From 0b2d547111c0ae64205af66706caadff3a4b3818 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:38:48 +0200 Subject: [PATCH 286/484] Update styles.css --- exercises/07-Very-Specific-Rules/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 300d0677..70e1923d 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,8 +1,8 @@ /** Insert your code here **/ -/*********** READ ONLY BLOCK ****** +/********** READ ONLY BLOCK ****** You CANNOT UPDATE anything from here on, -only add lines of code on top of this lines +only add lines of code on top of these lines **/ body { From 1af47842ca50b31ae31725af254a0e9241605578 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:39:09 +0200 Subject: [PATCH 287/484] Update styles.css --- exercises/07-Very-Specific-Rules/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 70e1923d..164b694b 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,6 +1,6 @@ /** Insert your code here **/ -/********** READ ONLY BLOCK ****** +/********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, only add lines of code on top of these lines **/ From f60fde3ad7c036a71cefe145dbbe4e87ade403f4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:40:29 +0200 Subject: [PATCH 288/484] Update solution.hide.css --- exercises/07-Very-Specific-Rules/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/07-Very-Specific-Rules/solution.hide.css index 55fb5ff4..232aa480 100644 --- a/exercises/07-Very-Specific-Rules/solution.hide.css +++ b/exercises/07-Very-Specific-Rules/solution.hide.css @@ -12,9 +12,9 @@ tr:nth-child(odd) { background: yellow; } -/*********** READ ONLY BLOCK ****** +/*********** READ-ONLY BLOCK ****** You CANNOT UPDATE anything from here on, -only add lines of code on top of this lines +only add lines of code on top of these lines **/ body { From c83a96ed8e4e6d0054883e9d06fbeb4fb5d6d743 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 03:44:29 +0200 Subject: [PATCH 289/484] Update index.html --- exercises/07-Very-Specific-Rules/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..301d8f1d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -10,18 +10,18 @@

The learning essay

3 reasons you know you are learning

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
Your are able to have conversations about the topic
You are able to have conversations about the topic

3 reasons you know love what you are learning

Time passes fast.
You are anxious to finish this excercise and start the next one.
Is 12am and you don't want to go to sleep.
You are anxious to finish this exercise and start the next one.
It's 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? From 4cb7d59020c03be3ae6c4945bf39e77e7aab6055 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 04:00:16 +0200 Subject: [PATCH 290/484] Update README.md --- exercises/07-Very-Specific-Rules/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index dc922179..ece42bb9 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" # **Important:** -In this exercise, you can add your code only above the **READ ONLY BLOCK** of the code, you can add as many lines as you want, but always above. +In this exercise, you can add your code only above the **READ-ONLY BLOCK** of the code, you can add as many lines as you want, but always above. ## 📝 Instructions: From 451b73a78255d8e67fba73c5cb8d306bc3fba79b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 04:03:47 +0200 Subject: [PATCH 291/484] Update README.es.md --- exercises/07-Very-Specific-Rules/README.es.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index 7ec14ada..b3ab50f4 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,21 +1,21 @@ -# `07` Reglas Muy Especificas +# `07` Reglas Muy Específicas ## **Importante:** -En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba. +En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba. ## 📝 Instrucciones: -1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico). +1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico). 2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class). -3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`. +3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`. ![Example Image](../../.learn/assets/07-1.png?raw=true) >Importante: **NO** debes modificar el archivo index.html -## :bulb: Pista: +## 💡 Pista: -1. El atributo `!important` ayuda a sobreescribir stilos. \ No newline at end of file +1. El atributo `!important` ayuda a sobreescribir estilos. From 5f220ca22434de7cb23b601a4c7a280639d8bfcf Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:06:18 +0200 Subject: [PATCH 292/484] Update README.md --- exercises/08-Rounded-Image/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 7cedf6b1..c168c000 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -2,7 +2,7 @@ A lot of websites use rounded profile images, a technique that really makes a website more beautiful! -The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach, is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals: +The obvious way to create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals: ![Example Image](../../.learn/assets/08-1.png?raw=true) @@ -10,7 +10,7 @@ The obvious way create a rounded profile picture is to create an image tag and a 1. Use `border-radius`. -2. 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). +2. 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: @@ -19,4 +19,4 @@ The obvious way create a rounded profile picture is to create an image tag and a + 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) \ No newline at end of file ++ 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) From 846c7f7c06b3b76fa1be360bd2818c424f4af05c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:14:08 +0200 Subject: [PATCH 293/484] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 3e7e4c25..a6d6c283 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -1,10 +1,10 @@ # `08` Imagen Redondeada -Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso! +Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. -El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos: +El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho, no se verán como un círculo, se verán como óvalos: ![Example Image](../../.learn/assets/08-1.png?raw=true) @@ -12,12 +12,12 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 1. Usa `border-radius`. -2. Adicionalmente a `border-radius`, tenemos que también utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). +2. 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: -+ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. ++ 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 articulo 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) From ef6879b6b5b0b126c38d4d7dcfeaa159713eff64 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:14:46 +0200 Subject: [PATCH 294/484] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index a6d6c283..31f54e0a 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -18,6 +18,6 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La + 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). From bda40ba4f68bd9060b4636778c8600c6f3ece74d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:15:05 +0200 Subject: [PATCH 295/484] Update README.md --- exercises/08-Rounded-Image/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index c168c000..46631553 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -17,6 +17,6 @@ The obvious way to create a rounded profile picture is to create an image tag an + 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). From 4f57d99edf892d894c6334bf63e4de1f82c5c685 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:22:29 +0200 Subject: [PATCH 296/484] Update tests.js --- exercises/08-Rounded-Image/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js index 70c5b643..9a0f3614 100644 --- a/exercises/08-Rounded-Image/tests.js +++ b/exercises/08-Rounded-Image/tests.js @@ -13,11 +13,11 @@ describe("All the styles should be applied", () => { const img = document.querySelector(".rounded") - test("the img tag should exist", () => { + test("The img tag should exist", () => { expect(img).toBeTruthy(); }) - test("the width in the img Tag should be equal to its height and vice versa", () => { + test("The width of the img tag should be equal to its height and vice versa", () => { document.querySelector( "head" ).innerHTML = ``; @@ -42,7 +42,7 @@ describe("All the styles should be applied", () => { expect(height).toBe(width); }); - test("the object-fit value of the img Tag should be 'cover'", () => { + test("The object-fit value of the img tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -51,7 +51,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-fit"]).toBe("cover"); }); - test("the object-position value of the img Tag should be 'top'", () => { + test("The object-position value of the img tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; From efbfceabff62aad8777af3b886584a56629fd186 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:47:48 +0200 Subject: [PATCH 297/484] Update README.md --- exercises/09-Anchor-Styles/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/09-Anchor-Styles/README.md index 3ce04f9a..a4b23419 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/09-Anchor-Styles/README.md @@ -4,11 +4,11 @@ People like to feel that they are clicking on something, a great approach to acc ![Example Image](../../.learn/assets/09-1.png?raw=true) -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: +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: ```css a:active { - /* here you can specify whatever css rule that applies + /* here you can specify whatever CSS rule that applies to the anchor while being 'pressed' */ } ``` From d722beb901abb84bc488c0b64bdd3e673e4c83c8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:54:00 +0200 Subject: [PATCH 298/484] Update README.es.md --- exercises/09-Anchor-Styles/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md index 0164b06d..f700cee0 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/09-Anchor-Styles/README.es.md @@ -4,11 +4,11 @@ A las personas les gusta sentir que están haciendo clic en algo, una manera de ![Example Image](../../.learn/assets/09-1.png?raw=true) -Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), 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' */ } ``` From e99823bdd40bbd11c049b6a43f15ebd33c90274e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 17:57:45 +0200 Subject: [PATCH 299/484] Update tests.js --- exercises/09-Anchor-Styles/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index 73192e4f..724de97d 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -20,14 +20,14 @@ describe("All the styles should be applied", () => { expect(cssArray).toBe(".threeDimension"); }) - test("the 'a' tag in the index.html should not be deleted", () => { + test("The 'a' tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); expect(html.toString().indexOf(` -1).toBeTruthy(); }); - test("The border-color rule for the 'threeDimension active ' property should match the instruction color", () => { + test("The border-color rule for the 'a.threeDimension:active' selector should match the instruction color", () => { // get computed styles of any element you like // let cssArray=document.styleSheets[0].cssRules; document.querySelector( From 9898aa6f8711a2a86d508f6f81949df97a1aa325 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:09:39 +0200 Subject: [PATCH 300/484] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index 63c24dc3..bdc5c435 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -1,6 +1,6 @@ # `10` Your Own Font -Yo canfind Google Fonts here: https://fonts.google.com +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: From d853b26a953b4638f183000b3446b93a741526c9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:10:30 +0200 Subject: [PATCH 301/484] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index bdc5c435..1c0f04e1 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -8,7 +8,7 @@ Pick your favorite one, and then use it by linking your website with the URL in ``` -After your font is linked you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. +After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. ## 📝 Instructions: From b274d39676c2a39dbaa50664ab1a58651b36da04 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:21:46 +0200 Subject: [PATCH 302/484] Update solution.hide.html --- exercises/10-Your-Own-Font/solution.hide.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html index d1547a63..eeb1c059 100644 --- a/exercises/10-Your-Own-Font/solution.hide.html +++ b/exercises/10-Your-Own-Font/solution.hide.html @@ -3,12 +3,12 @@ - + - + 10 Your Own Font From ed7578e92cdd3c03a1ec031ed8f1fce3050c3ae2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:29:53 +0200 Subject: [PATCH 303/484] Update solution.hide.css --- exercises/10-Your-Own-Font/solution.hide.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index e36ebf08..c6d008bb 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { /your code here/ - font-family: "Roboto"; /Varies depending on the font you chose/ + font-family: "Montserrat"; /Varies depending on the font you chose/ } From 55b7b439f6b000a2f60da0a5213aa53fa71f6985 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:36:41 +0200 Subject: [PATCH 304/484] Update solution.hide.css --- exercises/10-Your-Own-Font/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css index c6d008bb..85e3a7c3 100644 --- a/exercises/10-Your-Own-Font/solution.hide.css +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -1,4 +1,4 @@ .myTitle { - /your code here/ - font-family: "Montserrat"; /Varies depending on the font you chose/ + /* Add your code below this line / + font-family: "Montserrat"; / Varies depending on the font you chose / } From bc2a0a5c5259a1be8f84189eeb9b2361c948d8d9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:41:07 +0200 Subject: [PATCH 305/484] Update tests.js --- exercises/10-Your-Own-Font/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index 646f7192..f7c2460b 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -26,18 +26,18 @@ describe("All the styles should be applied", ()=>{ expect(orangeHoverSelector).toBeTruthy(); }); - test('the h1 tag should have a class "myTitle"', ()=>{ + test('The h1 tag should have a class "myTitle"', ()=>{ //or use query selector to compare hoy mane scriptags do we have const h = document.querySelector("h1"); expect(h.classList.contains("myTitle")).toBeTruthy(); }); - test("The link should be included in the head tag", ()=>{ + test("The google-font link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("") expect(link.length).toBeGreaterThanOrEqual(2); }); - test("The Head tag should not includes a Style tag", ()=>{ + test("The head tag should not include a style tag", ()=>{ expect(html.toString().indexOf(` -1).toBeFalsy(); }); }); From f3b043492ee8ae44647cbe2d8e482a7696e8eaf5 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:53:17 +0200 Subject: [PATCH 306/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 2c09dbcd..bdee8776 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solve the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font-awesome solves the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From b26d7b80ec6988928de316ea449a440099ace799 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 19:15:50 +0200 Subject: [PATCH 307/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index bdee8776..3dfe0831 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solves the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font-awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From 8aa689283b1cb05cc752bafdf46a5b52877a0cf6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 19:28:22 +0200 Subject: [PATCH 308/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 3dfe0831..3db6538b 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -12,7 +12,7 @@ After linking your website with font-awesome, you can use the following code to -You can find all the available names here: http://fontawesome.io/icons/ +You can find all the available icons here: http://fontawesome.io/icons/ ``` ## 📝 Instructions: From 8c67d139bcd89554b19aed86a4dfcbf0a70bbfb0 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:12:00 +0200 Subject: [PATCH 309/484] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 23c21ced..324d713e 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -2,19 +2,19 @@ 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". -¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! porque cada icono es una imagen y trabajar con imágenes ¡es horrible! +¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! Porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un ícono diferente y ahora puedes importar toda la fuente desde el sitio web y usar el ícono que quieras. +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: ```html - - -Puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ + ``` +Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/ + ## 📝 Instrucciones: From 7d60faffec2556c879a4e68b2156e10e39fdb659 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:13:42 +0200 Subject: [PATCH 310/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 3db6538b..8144a004 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -11,10 +11,10 @@ After linking your website with font-awesome, you can use the following code to ```html - -You can find all the available icons here: http://fontawesome.io/icons/ ``` +You can find all the available icons here: http://fontawesome.io/icons/ + ## 📝 Instructions: 1. Add two more items into your list and add a different icon at the beginning of each item. From 20e71b07b361e1dbcc4bd31e3dcb6ef1705ea7a1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:13:56 +0200 Subject: [PATCH 311/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 8144a004..a70f4531 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -13,7 +13,7 @@ After linking your website with font-awesome, you can use the following code to ``` -You can find all the available icons here: http://fontawesome.io/icons/ +> You can find all the available icons here: http://fontawesome.io/icons/ ## 📝 Instructions: From e913fb354bb3a7874d9b4ec3d27c3c1ef49ddaf2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 20:14:36 +0200 Subject: [PATCH 312/484] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 324d713e..719b9b17 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -13,7 +13,7 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ``` -Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/ +> Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/ ## 📝 Instrucciones: From baacdf4585f170f2e0f4f55309cefd827d627386 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:18:54 +0200 Subject: [PATCH 313/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index a70f4531..4d935144 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -13,7 +13,7 @@ After linking your website with font-awesome, you can use the following code to ``` -> You can find all the available icons here: http://fontawesome.io/icons/ +> You can find all the available icons here: https://fontawesome.com/search?o=r&m=free ## 📝 Instructions: From cb8871ba53b542985f00fc8c3ad38e86ec339c9f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:20:15 +0200 Subject: [PATCH 314/484] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 719b9b17..8e658c02 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -13,7 +13,7 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ``` -> Puedes encontrar todos los iconos disponibles aquí: http://fontawesome.io/icons/ +> Puedes encontrar todos los iconos disponibles aquí: https://fontawesome.com/search?o=r&m=free ## 📝 Instrucciones: From d7c8138c0651a8116bde522a445ef9fe5d57cb95 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:26:24 +0200 Subject: [PATCH 315/484] Update solution.hide.html --- exercises/11-Font-Awesome-Icons/solution.hide.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/11-Font-Awesome-Icons/solution.hide.html index e9778b12..431e6b22 100644 --- a/exercises/11-Font-Awesome-Icons/solution.hide.html +++ b/exercises/11-Font-Awesome-Icons/solution.hide.html @@ -11,7 +11,7 @@

Hello

Hello
-
Hello
+
Hello

From 51133d5c33d66dd6f66bb7a41f37db9eb2a92efa Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:35:51 +0200 Subject: [PATCH 316/484] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 075d2f0e..56072996 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("ul tag should exists", ()=>{ + test("the ul tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); test("At least 3 li tags should exist", ()=>{ @@ -19,14 +19,14 @@ describe("All the styles should be applied", ()=>{ test("At least 3 i tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test(" LI innerHTML exist", ()=>{ + test("There should be some text on the li tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - test('the i tag(s) should have Font Awesome class(es) starting with "fa" | ex. "fa-solid"', ()=>{ + test('The i tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have expect(icons).toBeTruthy(); From 37682cde249164ff47e18d4ebbd237dffa933514 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:37:57 +0200 Subject: [PATCH 317/484] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 56072996..682064c8 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,7 +10,7 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("the ul tag should exist", ()=>{ + test("The ul tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); test("At least 3 li tags should exist", ()=>{ From db6c0be20dbef960e30c1a41763d6ad1d5c6167c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:39:17 +0200 Subject: [PATCH 318/484] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 8e658c02..14ad44c3 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -4,7 +4,7 @@ Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea f ¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! Porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -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. +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: From 59e1e6c4e7dcc6d3327a2018abd8ac38547f02f1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:39:43 +0200 Subject: [PATCH 319/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 4d935144..e2d1efdc 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,7 +4,7 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font Awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. After linking your website with font-awesome, you can use the following code to insert a specific icon: From b6a29ef318c5b66b17fc399fbc28c4bca27b273f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:42:50 +0200 Subject: [PATCH 320/484] Update styles.css --- exercises/11-Font-Awesome-Icons/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/11-Font-Awesome-Icons/styles.css index b22aedca..52fe9b9c 100644 --- a/exercises/11-Font-Awesome-Icons/styles.css +++ b/exercises/11-Font-Awesome-Icons/styles.css @@ -1,3 +1,4 @@ li { + font-size: 2.5rem; list-style: none; } From c4cfa607c0404e911f46c3430388cd8141643540 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:51:36 +0200 Subject: [PATCH 321/484] Update README.es.md --- exercises/11-Font-Awesome-Icons/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 14ad44c3..2a78a9b0 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -18,5 +18,5 @@ Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente par ## 📝 Instrucciones: -Agrega dos elementos más a tu lista(`li`) y agrega un icono diferente al comienzo de cada elemento. +Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. From baa20e6a1e356abe07cee8ef2f7478ed8d4c3950 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 21:52:05 +0200 Subject: [PATCH 322/484] Update README.md --- exercises/11-Font-Awesome-Icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index e2d1efdc..f9c7c09f 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -17,5 +17,5 @@ After linking your website with font-awesome, you can use the following code to ## 📝 Instructions: -1. Add two more items into your list and add a different icon at the beginning of each item. +1. Add two more items (`li`) into your list and add a different icon at the beginning of each item. From d2e0f14dce20dade95aeb7dd8107067e537cc57c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 22:03:19 +0200 Subject: [PATCH 323/484] Update README.md --- exercises/10-Your-Own-Font/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index 1c0f04e1..e2632833 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -5,7 +5,7 @@ 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 - + ``` After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `
`. From e824aab7854c1180305ec6c30647cd44d4ed3b99 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 22:03:58 +0200 Subject: [PATCH 324/484] Update README.es.md --- exercises/10-Your-Own-Font/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/10-Your-Own-Font/README.es.md index 16e4ab9a..bebc2839 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/10-Your-Own-Font/README.es.md @@ -5,7 +5,7 @@ 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 - + ``` Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un `
`. From b09e86c79aa398cc4e0f7d316ea9a2ab9f1de6e5 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 5 Apr 2023 23:55:03 +0200 Subject: [PATCH 325/484] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 682064c8..a1e11eee 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{ test("At least 3 i tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test("There should be some text on the li tags", ()=>{ + test("The i tags should be inside the li tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { From 96004a3008f5ccc5437fada7e0be1b30b91f90c9 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Thu, 6 Apr 2023 20:20:19 +0000 Subject: [PATCH 326/484] updated instructions for clarity --- exercises/04-Class-Selector/README.es.md | 2 +- exercises/04-Class-Selector/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md index e3d7f2a5..e8bd37ae 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/04-Class-Selector/README.es.md @@ -18,6 +18,6 @@ Usa la propiedad `class` del elemento HTML para seleccionarlo. Las reglas de est ## 📝 Instrucciones: En este momento hay una clase seleccionada en el CSS llamada -`.b-blue`. +`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 index d0f7ccae..0dd45e76 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/04-Class-Selector/README.md @@ -22,7 +22,7 @@ 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`. +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. From 489a61e3c549c4f154c1b0d83b0f94746355ebd5 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 10 Apr 2023 17:28:37 +0000 Subject: [PATCH 327/484] codespace reference --- README.es.md | 6 ++++-- README.md | 13 ++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.es.md b/README.es.md index a7cbcdf7..209bf0f3 100644 --- a/README.es.md +++ b/README.es.md @@ -40,9 +40,11 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! -## Instalación en un clic +## Instalación en un clic (recomendado) -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course) +Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). + +> Una vez ya tengas abirto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` ## Instalación manual diff --git a/README.md b/README.md index a2d3ef40..87813aca 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any questions. +Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/README.es.md) :es: + ## You'll be learning the following concepts: 1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a ``; @@ -42,7 +42,7 @@ describe("All the styles should be applied", () => { expect(height).toBe(width); }); - test("The object-fit value of the img tag should be 'cover'", () => { + test("The object-fit value of the tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -51,7 +51,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-fit"]).toBe("cover"); }); - test("The object-position value of the img tag should be 'top'", () => { + test("The object-position value of the tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -60,7 +60,7 @@ describe("All the styles should be applied", () => { expect(imgStyle["object-position"]).toBe("top"); }); - 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() From 8faa4093e4d4cfd8525ad4ed6a889b40ea62e5b3 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:54:33 +0200 Subject: [PATCH 338/484] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 31f54e0a..a1b3d8d9 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -12,7 +12,9 @@ El problema con este enfoque es que solo funciona para imágenes cuadradas... La 1. Usa `border-radius`. -2. 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). +2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada. + +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: From 4b9074972f8ff1dc00fd44d1395e84def032132b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:57:21 +0200 Subject: [PATCH 339/484] Update README.md --- exercises/08-Rounded-Image/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 46631553..f3074a62 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -10,7 +10,9 @@ The obvious way to create a rounded profile picture is to create an image tag an 1. Use `border-radius`. -2. 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). +2. Use the properties `width` and `height` to make the image square shaped. + +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: From 4a39434ee6fe5d421aef6ad10cc95bb3e9c6e7a2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:02:49 +0200 Subject: [PATCH 340/484] Update test.js --- exercises/04.3-id-Selector/test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js index adc3f260..ed2b823e 100644 --- a/exercises/04.3-id-Selector/test.js +++ b/exercises/04.3-id-Selector/test.js @@ -8,24 +8,24 @@ jest.dontMock('fs'); const span = document.querySelector("span"); const link = document.querySelector("link"); -test("There should be a span tag", () => { +test("There should be a tag", () => { expect(span).toBeTruthy() }); -test("The span tag should have the id 'button1'", () => { +test("The tag should have the id 'button1'", () => { expect(span).toBeTruthy(); let id = span.id expect(id).toBeTruthy(); expect(id).toBe('button1'); }); -test("The span tag should not contain any inline style", () => { +test("The tag should not contain any inline style", () => { let emptyBodyInlineStyle = {}; expect(span).toBeTruthy() expect(span.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(); From 7810dfeab3cccd458eccdfb087947e4a169a63ef Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:03:53 +0200 Subject: [PATCH 341/484] Update tests.js --- exercises/05-Specificity/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index f3f8b814..a09aa84a 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -8,7 +8,7 @@ jest.dontMock('fs'); describe("All the styles should be applied", function () { - test("You should not change the existing head tag elements", function () { + test("You should not change the existing tag elements", function () { let head = document.querySelector('head') expect(head).toBeTruthy() From c8c602e1f84aafa675c5b34660233ed132b94d32 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:06:21 +0200 Subject: [PATCH 342/484] Update tests.js --- exercises/06-Practicing-Rules/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index d9fd4156..e691255c 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -37,7 +37,7 @@ describe("All the styles should be applied", () => { let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - test("The font-family in the h1 tag should be 'Courier'", () => { + test("The font-family in the
tag should be 'Courier'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -46,7 +46,7 @@ describe("All the styles should be applied", () => { // get computed styles of any element you like expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - test("The color in the h1 tag should be 'red'", () => { + test("The color in the
tag should be 'red'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -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 h2 tag should be 'underline'", () => { + test("the text-decoration in the
tag should be 'underline'", () => { document.querySelector( "head" ).innerHTML = ``; @@ -102,7 +102,7 @@ describe("All the styles should be applied", () => { } expect(orangeHoverSelector).toBe('green'); }); - 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() From 31640a5e7e739994d2b9adc2c9948ba9c3594f0a Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:19:39 +0200 Subject: [PATCH 343/484] Update solution.hide.css --- exercises/09-Anchor-Styles/solution.hide.css | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css index 101d281c..8c12ea5b 100644 --- a/exercises/09-Anchor-Styles/solution.hide.css +++ b/exercises/09-Anchor-Styles/solution.hide.css @@ -7,6 +7,7 @@ text-decoration: none; text-align: center; color: black; + font-size: 22px; } a.threeDimension:active { From 963ebaa133f189b1fb74153b18712a048f109fd6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:20:19 +0200 Subject: [PATCH 344/484] Update styles.css --- exercises/09-Anchor-Styles/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..895dc3d6 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -8,9 +8,10 @@ text-decoration: none; text-align: center; color: black; + font-size: 22px; } a.threeDimension:active { /* your code here/ -} \ No newline at end of file +} From 1a03a658634f9e2c07cabc4c4a1991725578d617 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:23:27 +0200 Subject: [PATCH 345/484] Update tests.js --- exercises/09-Anchor-Styles/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index 724de97d..1dea80c1 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -20,7 +20,7 @@ describe("All the styles should be applied", () => { expect(cssArray).toBe(".threeDimension"); }) - test("The 'a' tag in the index.html should not be deleted", () => { + test("The tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); expect(html.toString().indexOf(` -1).toBeTruthy(); @@ -71,7 +71,7 @@ describe("All the styles should be applied", () => { }); - 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() From e09f4394dc748c58c6cc5e1ee408f7a609cbcef8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:29:37 +0200 Subject: [PATCH 346/484] Update test.js --- exercises/01.1-The-Style-Tag/test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-The-Style-Tag/test.js index a4be505b..0b3c714b 100644 --- a/exercises/01.1-The-Style-Tag/test.js +++ b/exercises/01.1-The-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 +}); From 9ecb581595a0dc757ae532212cd4c03b858b3c03 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:31:03 +0200 Subject: [PATCH 347/484] Update tests.js --- exercises/01.2-Your-First-Style/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js index 0eabdf65..32bf609b 100644 --- a/exercises/01.2-Your-First-Style/tests.js +++ b/exercises/01.2-Your-First-Style/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() From 2cd2ff5aa6bfd125bf781e0691755660d3baac4a Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:32:06 +0200 Subject: [PATCH 348/484] Update tests.js --- exercises/02-Separate-Stylesheet/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js index e3f44fc4..2a46c829 100644 --- a/exercises/02-Separate-Stylesheet/tests.js +++ b/exercises/02-Separate-Stylesheet/tests.js @@ -10,13 +10,13 @@ describe("All the styles should be applied", ()=>{ const link = document.querySelector("link"); const body = document.querySelector("body"); - test("The body tag should not contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ document.querySelector("head").innerHTML = ``; 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") }) From 58022d125dc64847b5163ea9cbc197200cc4a157 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:33:18 +0200 Subject: [PATCH 349/484] Update tests.js --- exercises/02.1-Background/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js index eacf944a..b0612a23 100644 --- a/exercises/02.1-Background/tests.js +++ b/exercises/02.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 contain any inline style", ()=>{ + test("The tag should not contain any inline style", ()=>{ document.querySelector( "head" ).innerHTML = ``; @@ -37,7 +37,7 @@ describe("All the styles should be applied", ()=>{ 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() From 1d76734376f1bdbc0bdad0805045b01e45d6359d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:35:48 +0200 Subject: [PATCH 350/484] Update tests.js --- exercises/03-Inline-Styles/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js index af82a4b3..e37fcb80 100644 --- a/exercises/03-Inline-Styles/tests.js +++ b/exercises/03-Inline-Styles/tests.js @@ -7,7 +7,7 @@ jest.dontMock("fs"); describe("The Table tag should contain inline style background: green", ()=>{ - 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() From 2be6b49a03b7b80b514529a58f48f33f6f1811f7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:36:58 +0200 Subject: [PATCH 351/484] Update test.js --- exercises/04-Class-Selector/test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/04-Class-Selector/test.js b/exercises/04-Class-Selector/test.js index bd342616..320b80ea 100644 --- a/exercises/04-Class-Selector/test.js +++ b/exercises/04-Class-Selector/test.js @@ -6,10 +6,10 @@ document.documentElement.innerHTML = html.toString(); jest.dontMock("fs"); -describe("Both p tags should have a blue background", () => { +describe("Both
tags should have a blue background", () => { const body = document.querySelector("body") const p = document.querySelectorAll("p"); - 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() @@ -20,7 +20,7 @@ describe("Both p tags should have a blue background", () => { expect(title).toBe('04 Class selector') }); - test("The body tag should not contain any inline style", () => { + test("The tag should not contain any inline style", () => { document.querySelector( "head" ).innerHTML = ``; @@ -28,10 +28,10 @@ describe("Both p tags should have a blue background", () => { expect(body.style._values).toEqual(emptyBodyInlineStyle) }); - test("There should be two p tags", () => { + test("There should be two
tags", () => { expect(p.length).toBe(2) }); - test("Both p tags should have a class name 'b-blue'", () => { + test("Both
tags should have a class name 'b-blue'", () => { p.forEach(e=>{ let eClass = e.getAttribute("class"); expect(eClass).toBe("b-blue") From f5f4148debd506029d51d8557af2103e1fdb09c6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:38:13 +0200 Subject: [PATCH 352/484] Update tests.js --- exercises/04.1-Combined-Rules/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js index ab8cc62f..e325ce5f 100644 --- a/exercises/04.1-Combined-Rules/tests.js +++ b/exercises/04.1-Combined-Rules/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 contain any inline style", ()=> { + test("The tag should not contain any inline style", ()=> { document.querySelector( "head" ).innerHTML = ``; @@ -113,7 +113,7 @@ describe("All the styles should be applied", ()=> { expect(padLeft).toBeFalsy(); }); - 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() From d78f767fe2c84dd8d86dee46dd6c008b95ec8667 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 18:41:25 +0200 Subject: [PATCH 353/484] Update tests.js --- exercises/11-Font-Awesome-Icons/tests.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index a1e11eee..b481bcfc 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -10,23 +10,23 @@ let cssArray = null; describe("All the styles should be applied", ()=>{ const icons = document.querySelectorAll("i"); - test("The ul tag should exist", ()=>{ + test("The
tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); - test("At least 3 li tags should exist", ()=>{ + test("At least 3
tags should exist", ()=>{ expect(document.querySelectorAll("li").length).toBe(3); }); - test("At least 3 i tags should exist", ()=>{ + test("At least 3 tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - test("The i tags should be inside the li tags", ()=>{ + test("The tags should be inside the*
tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - test('The i tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ + test('The tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have expect(icons).toBeTruthy(); From 9a1a2ea241ad4d0d94b4b63c39605de3c6ce4b6e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:46:06 +0200 Subject: [PATCH 354/484] Update README.md --- exercises/12-Relative-Length-EM-REM/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md index e57186e4..6f2a2849 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/12-Relative-Length-EM-REM/README.md @@ -1,6 +1,6 @@ # `12` Relative Length em, rem -By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width. +By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width. There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit. @@ -8,11 +8,13 @@ There are other types of units that are not fixed, but relative. We use them whe 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. -Since the first `div` has a bigger based `font-size`, then the heading resizes accordingly. +Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly. -em: Relative to the current font-size of the parent. +## In short: -rem: Relative to the original font-size of the page. ++ em: Relative to the current font-size of the parent. + ++ rem: Relative to the original font-size of the page. ## 📝 Instructions: From 0d5ce0eba26edc1ff683df5a1a30ed25c76bfcf6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:52:21 +0200 Subject: [PATCH 355/484] Update README.es.md --- exercises/12-Relative-Length-EM-REM/README.es.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md index 9603c625..c6d63a40 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/12-Relative-Length-EM-REM/README.es.md @@ -1,4 +1,4 @@ -# `12` Longitud Relativa em, rem: +# `12` Longitud Relativa em, rem Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. @@ -8,11 +8,13 @@ Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cua 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. -Dado que el primer `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta. +Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta. -em: Relativo al `font-size` actual del padre. +## En resumen: -rem: Relativo al `font-size` original de la página. ++ em: Relativo al `font-size` actual del padre. + ++ rem: Relativo al `font-size` original de la página. ## 📝 Instrucciones: From f795a0323e779769b1a8c3ed310ea0b68d515cd4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 22:56:51 +0200 Subject: [PATCH 356/484] Update tests.js --- exercises/12-Relative-Length-EM-REM/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index f6987b7a..326eb9b0 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{ const meta = document.querySelector("meta") const title = document.querySelector('title') const link = document.querySelector('link') - test("The H2 Tag should have a font-size: 0.8em", ()=>{ + test("The
tag should have a font-size: 0.8em", ()=>{ // get computed styles of any element you like document.querySelector( "head" @@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{ var styles = window.getComputedStyle(h2Tag); expect(styles["font-size"]).toBe("0.8em"); }); - test("The H3 Tag should haave a font-size: 0.8rem", ()=>{ + test("The
tag should have a font-size: 0.8rem", ()=>{ // get computed styles of any element you like document.querySelector( "head" @@ -28,7 +28,7 @@ describe("All the styles should be applied", ()=>{ var styles = window.getComputedStyle(h3Tag); expect(styles["font-size"]).toBe("0.8rem"); }); - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From b39fc10d4972dc8598270597a2f66d41c144aeee Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:19:03 +0200 Subject: [PATCH 357/484] Update README.md --- exercises/08-Rounded-Image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index f3074a62..847293f1 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -10,7 +10,7 @@ The obvious way to create a rounded profile picture is to create an image tag an 1. Use `border-radius`. -2. Use the properties `width` and `height` to make the image square shaped. +2. Use the properties `width` and `height` to make the image a square shape. 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). From b767142ab11a7b292e26c97890112a55801fb8e7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:52:32 +0200 Subject: [PATCH 358/484] Update tests.js --- exercises/13-Anchor-Like-Button/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index 587b95d7..cc3370ed 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{ const meta = document.querySelector("meta") const title = document.querySelector('title') const link = document.querySelector('link') - test("the padding should be '10px'", ()=>{ + test("The padding should be '10px'", ()=>{ document.querySelector( "head" @@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{ expect(classTagStyles["padding"]).toBe("10px"); }); - test("the border radius should be '4px'", ()=>{ + test("The border radius should be '4px'", ()=>{ document.querySelector( "head" @@ -29,7 +29,7 @@ describe("All the styles should be applied", ()=>{ let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - test("the underline should be removed", ()=>{ + test("The underline should be removed", ()=>{ document.querySelector( "head" @@ -47,7 +47,7 @@ describe("All the styles should be applied", ()=>{ expect(cssArray).toBe(".orange-btn"); } ) - test("You should not change the existing head tag elements", ()=>{ + test("You should not change the existing tag elements", ()=>{ let head = document.querySelector('head') expect(head).toBeTruthy() From bb33d6fe70666b28b97504184076784495b2266f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:53:04 +0200 Subject: [PATCH 359/484] Update tests.js --- exercises/13-Anchor-Like-Button/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js index cc3370ed..1006a565 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{ expect(classTagStyles["padding"]).toBe("10px"); }); - test("The border radius should be '4px'", ()=>{ + test("The border-radius should be '4px'", ()=>{ document.querySelector( "head" From 25dd6b6f1d7611c68fb508c7360f32995a463750 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:10:27 +0200 Subject: [PATCH 360/484] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 81ff0d7f..044e37c6 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -16,10 +16,10 @@ Anchors are not only used within text- when you are going to use anchors outside 6. Set the color of the text to `white`. -To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: http://lmgtfy.com/?q=how+to+use+the+hover +To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php 7. Inside of the `:hover` selector change the background of the button to `#cc7a00`. ## Expected result: -![Example Image](../../.learn/assets/13-1.gif?raw=true) \ No newline at end of file +![Example Image](../../.learn/assets/13-1.gif?raw=true) From 5ede64373ebf2f6a8cd1e48313661b15a9d7d8f1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:23:08 +0200 Subject: [PATCH 361/484] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index aedf993a..018f6efe 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,10 +1,10 @@ -# `13` Enlace (anchor) como botón: +# `13` Enlace (anchor) como botón -Los enlaces (`anchors`) no solo se usan dentro del texto: cuando va a usar enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que sea experiencia más amigable. +Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia sea más amigable. ## 📝 Instrucciones: -Siga estos pasos para que tu enlace (`anchor`) se vea así: +Sigue estos pasos para que tu enlace (`anchor`) se vea así: 1. Haz que se vea como una caja: establece el `padding` en `10px`. @@ -12,16 +12,14 @@ Siga estos pasos para que tu enlace (`anchor`) se vea así: 3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange` -4. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`. +4. Eliminar subrayado: establece `text-decoration` a `none`. -5. Eliminar subrayado: establece `text-decoration` a `none`. +5. Establece el color del texto a blanco (`white`) -6. Establecer el color del texto en blanco (`white`) ++ Para que el botón se vea diferente cuando el usuario pasa el ratón por encima, usamos el selector `:hover`: https://www.w3schools.com/cssref/sel_hover.php -Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector `:hover`: http://lmgtfy.com/?q=how+to+use+the+hover +6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`. -7. Dentro del selector `:hover` cambia el fondo del botón a `#cc7a00`. - -## Reultado esperado: +## Resultado esperado: ![Example Image](../../.learn/assets/13-1.gif?raw=true) From ac1ba88137ad8441bd33f593231046168f7dc292 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:26:05 +0200 Subject: [PATCH 362/484] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index 018f6efe..63c1e428 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,6 +1,6 @@ # `13` Enlace (anchor) como botón -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 sea más amigable. +Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable. ## 📝 Instrucciones: From 32f0983ea4371c5e044218d06cdcbac50d92b363 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:30:11 +0200 Subject: [PATCH 363/484] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 044e37c6..36cd9112 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -1,24 +1,22 @@ # `13` Anchor Like Button -Anchors are not only used within text- when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience. +Anchors are not only used within text: when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience. ## 📝 Instructions: -1. Make it look like a box: Set `padding` to `10px`. +1. Make it look like a box: set `padding` to `10px`. -2. Rounded borders: Set `border-radius` to `4px`. +2. Rounded borders: set `border-radius` to `4px`. 3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). -4. Find and apply the color: Use the color picker to find the color and apply make the background to that color. +4. Remove underline: Set `text-decoration` to `none`. -5. Remove underline: Set `text-decoration` to `none`. +5. Set the color of the text to `white`. -6. Set the color of the text to `white`. ++ To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php -To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php - -7. Inside of the `:hover` selector change the background of the button to `#cc7a00`. +6. Inside of the `:hover` selector change the background of the button to `darkorange`. ## Expected result: From af5eebd9b243d44a41cda3a01d905647f0703bd4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:30:53 +0200 Subject: [PATCH 364/484] Update README.es.md --- exercises/13-Anchor-Like-Button/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index 63c1e428..257901be 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -10,7 +10,7 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así: 2. Bordes redondeados: establece el `border-radius` en `4px`. -3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange` +3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`. 4. Eliminar subrayado: establece `text-decoration` a `none`. From 8cf1f66ba66ec1f787f0e0ebd71c0d92875b269b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:36:18 +0200 Subject: [PATCH 365/484] Update solution.hide.css --- exercises/13-Anchor-Like-Button/solution.hide.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css index fd0db11b..89976317 100644 --- a/exercises/13-Anchor-Like-Button/solution.hide.css +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -1,5 +1,6 @@ .orange-btn { - /your code here/ + display: inline-block; + /your code below/ padding: 10px; border-radius: 4px; text-decoration: none; From fc612d2c62e4550a22165c0581edfc7361cf9a13 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:36:31 +0200 Subject: [PATCH 366/484] Update solution.hide.css --- exercises/13-Anchor-Like-Button/solution.hide.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css index 89976317..3e80d404 100644 --- a/exercises/13-Anchor-Like-Button/solution.hide.css +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -1,6 +1,6 @@ .orange-btn { display: inline-block; - /your code below/ + /* your code below / padding: 10px; border-radius: 4px; text-decoration: none; @@ -9,6 +9,6 @@ } .orange-btn:hover { - /YOUR CODE HERE FOR THE HOVER STATE/ + / YOUR CODE HERE FOR THE HOVER STATE / background: darkorange; } From d3b8a90a4ddfca386132a7cb7bfb97480e799023 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:37:11 +0200 Subject: [PATCH 367/484] Update styles.css --- exercises/13-Anchor-Like-Button/styles.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 1f165603..76fd5b9c 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,9 +1,10 @@ .orange-btn { - /your code here/ + display: inline-block; + / your code below / } .orange-btn:hover { - /YOUR CODE HERE FOR THE HOVER STATE/ + / YOUR CODE HERE FOR THE HOVER STATE / -} \ No newline at end of file +} From fc498c893703e7183c7d182cd3cf283d1b07f549 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:37:44 +0200 Subject: [PATCH 368/484] Update README.md --- exercises/13-Anchor-Like-Button/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 36cd9112..9b9fad4c 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -10,7 +10,7 @@ Anchors are not only used within text: when you are going to use anchors outside 3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). -4. Remove underline: Set `text-decoration` to `none`. +4. Remove underline: set `text-decoration` to `none`. 5. Set the color of the text to `white`. From 5ac8d24e4c0557477ab69dcde201e61016aa5063 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 12 Apr 2023 14:09:11 +0200 Subject: [PATCH 369/484] Delete solution-hide.css --- exercises/13-Anchor-Like-Button/solution-hide.css | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 exercises/13-Anchor-Like-Button/solution-hide.css diff --git a/exercises/13-Anchor-Like-Button/solution-hide.css b/exercises/13-Anchor-Like-Button/solution-hide.css deleted file mode 100644 index 16988e82..00000000 --- a/exercises/13-Anchor-Like-Button/solution-hide.css +++ /dev/null @@ -1,14 +0,0 @@ -.orange-btn { - /your code here/ - padding: 10px; - border-radius: 4px; - border: 1px solid #ffffff; - background-color: rgb(255, 153, 51); - text-decoration: none; - color: white; -} - -.orange-btn:hover { - /YOUR CODE HERE FOR THE HOVER STATE/ - background: #cc7a00; -} From 031b50a18b030cc7765b7f1d8424a2ea563f2367 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:53:53 +0000 Subject: [PATCH 370/484] the footnotes were added --- README.es.md | 3 +++ README.md | 2 ++ 2 files changed, 5 insertions(+) diff --git a/README.es.md b/README.es.md index e8d77079..a876b709 100644 --- a/README.es.md +++ b/README.es.md @@ -93,3 +93,6 @@ Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribución: (build-tutorial) ✅, Traducción 🌍 Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! + +Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning). + diff --git a/README.md b/README.md index 4a7c9968..0e7185c6 100644 --- a/README.md +++ b/README.md @@ -95,3 +95,5 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds 3. [Daniel Machota (@d4rkm0nst3r)](https://github.com/d4rkm0nst3r), contribution: (build-tutorial) ✅, Translation 🌍 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! + +This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). \ No newline at end of file From c57049c3d2b254de526a701ed8bd8f25dd8c619d Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Thu, 20 Apr 2023 11:31:11 +0000 Subject: [PATCH 371/484] the links were updated --- README.es.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.es.md b/README.es.md index a876b709..275ba239 100644 --- a/README.es.md +++ b/README.es.md @@ -42,7 +42,7 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i ## Instalación en un clic (recomendado) -Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). +Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-tutorial-exercises-course) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.git). > Una vez ya tengas abierto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` diff --git a/README.md b/README.md index 0e7185c6..4441527f 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Complete selection of autograded CSS exercises, for anyone interested in learnin ## One click installation (recommended): -You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-layouts-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises.git). +You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/css-tutorial-exercises-course) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/css-tutorial-exercises-course.git). > Once you have VSCode open the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start` From a3a384ea4c563f56347c88282acbded5dc8ac728 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Fri, 21 Apr 2023 17:51:08 +0000 Subject: [PATCH 372/484] the settings.json file was updated --- .gitignore | 1 + .vscode/settings.json | 8 ++++++++ 2 files changed, 9 insertions(+) create mode 100644 .vscode/settings.json 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/.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 From d736538afe18b11bc3452c625242315e0aca5ad5 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 28 Apr 2023 14:33:54 +0000 Subject: [PATCH 373/484] fixed 2.1 with background repeat instructions --- exercises/02.1-Background/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.1-Background/README.md b/exercises/02.1-Background/README.md index 112fab15..afbfa795 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/02.1-Background/README.md @@ -19,7 +19,7 @@ If it is an image, you can specify if you want the image to be repeated horizont 4. Build 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. From 678810a1112a51ead513ee5e99e9e05df3590aee Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Mon, 8 May 2023 00:26:28 +0000 Subject: [PATCH 374/484] fixed typo in test description --- exercises/06-Practicing-Rules/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index e691255c..3bcecea6 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -64,7 +64,7 @@ describe("All the styles should be applied", () => { let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - test("The padding in the #id1 tag should be '5px'", () => { + test("The padding in the p tag should be '5px'", () => { document.querySelector( "head" ).innerHTML = ``; From 9c394e7e80d0c4ca5919948f3f26309d0eba6b38 Mon Sep 17 00:00:00 2001 From: ErnestoXG Date: Mon, 8 May 2023 00:36:33 +0000 Subject: [PATCH 375/484] fixed test to accept both background and background-color --- exercises/05-Specificity/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index a09aa84a..2323ce24 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -43,8 +43,8 @@ describe("All the styles should be applied", function () { let cssArray = document.styleSheets[0].cssRules; let orangeHoverSelector = ""; for (let i = 0; i < cssArray.length; i++) { - if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important") { - orangeHoverSelector = cssArray[i].style.background; + if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important" || cssArray[i].style._importants["background-color"] === "important") { + orangeHoverSelector = cssArray[i].style.background || cssArray[i].style["background-color"]; } } From 33546dfc1c4845256abfb0f75f7bdd3cbd1c316d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 21:30:33 +0200 Subject: [PATCH 376/484] Update index.html --- exercises/02.1-Background/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.1-Background/index.html b/exercises/02.1-Background/index.html index ce03ce24..cf841f1e 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/02.1-Background/index.html @@ -5,6 +5,6 @@ 02 Background - My background should be an image with th size "contain" + My background should be an image with the size "contain" From 811f8e64bc76cf786419f798e1da2a5e812d8dc7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:22:08 +0200 Subject: [PATCH 377/484] Update README.es.md --- exercises/01-Hello-World/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md index f6839573..d356ddaf 100644 --- a/exercises/01-Hello-World/README.es.md +++ b/exercises/01-Hello-World/README.es.md @@ -1,5 +1,5 @@ -# `01` Hello World en CSS +# `01` Hello World in CSS CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos: From d95bc9b842491c2a3c407c51ebe90d02918440fd Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:22:26 +0200 Subject: [PATCH 378/484] Update README.es.md --- exercises/01.1-The-Style-Tag/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md index 434d55b8..c69508dd 100644 --- a/exercises/01.1-The-Style-Tag/README.es.md +++ b/exercises/01.1-The-Style-Tag/README.es.md @@ -1,5 +1,5 @@ -# `01.1` Etiqueta Style +# `01.1` The Style Tag Si quieres añadir estilos a tu sitio web escribiendo CSS siempre debes hacerlo dentro de una etiqueta ``; + let firstOl = window.getComputedStyle(ols[0]); + expect(firstOl["list-style-type"]).toBe("lower-alpha"); + }); + test("The second Ol must have a list-style-type = square ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let secondOl = window.getComputedStyle(ols[1]); + expect(secondOl["list-style-type"]).toBe("square"); + }); + test("The first Ul must have a list-style-type = armenian ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let firstUl = window.getComputedStyle(uls[0]); + expect(firstUl["list-style-type"]).toBe("armenian"); + }); + test("The second Ul must have a list-style-type = none ", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let secondUl = window.getComputedStyle(uls[1]); + expect(secondUl["list-style-type"]).toBe("none"); + expect(secondUl["margin"]).toBe("0px"); + expect(secondUl["padding"]).toBe("0px"); + }); +}) From c67374c64b6c251e196a27336cacfa91b77b92f2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:04:27 +0000 Subject: [PATCH 446/484] fixed 01-inline-styles, added tests, fixed numbers and casing of all exercises --- .learn/resets/01-inline-styles/index.html | 17 ++++++++++ .learn/resets/02-style-tag/index.html | 1 + .../{00-Welcome => 00-welcome}/README.es.md | 9 +++-- .../{00-Welcome => 00-welcome}/README.md | 10 +++--- exercises/00.1-Inline-Styles/README.es.md | 34 ------------------- exercises/00.1-Inline-Styles/index.html | 1 - .../00.1-Inline-Styles/solution.hide.html | 10 ------ exercises/01-Style-tag/index.html | 1 - exercises/01-inline-styles/README.es.md | 30 ++++++++++++++++ .../README.md | 12 +++---- exercises/01-inline-styles/index.html | 17 ++++++++++ exercises/01-inline-styles/solution.hide.html | 17 ++++++++++ exercises/01-inline-styles/tests.js | 27 +++++++++++++++ exercises/01.1-Add-a-style-tag/index.html | 6 ---- .../02-Separate-Stylesheet/solution.hide.css | 7 ---- exercises/02-Separate-Stylesheet/styles.css | 4 --- .../README.es.md | 10 +++--- .../{01-Style-tag => 02-style-tag}/README.md | 8 ++--- exercises/02-style-tag/index.html | 1 + .../solution.hide.html | 0 .../{01-Style-tag => 02-style-tag}/test.js | 0 .../README.es.md | 5 +-- .../README.md | 4 +-- exercises/02.1-add-a-style-tag/index.html | 6 ++++ .../solution.hide.html | 2 +- .../test.js | 0 .../README.es.md | 2 +- .../README.md | 3 +- .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 0 .../03-separate-stylesheet/solution.hide.css | 7 ++++ exercises/03-separate-stylesheet/styles.css | 4 +++ .../tests.js | 0 .../README.es.md | 2 +- .../README.md | 3 +- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 12 +++++-- .../README.md | 9 +++-- .../index.html | 2 +- .../styles.css | 0 .../test.js | 2 +- .../README.es.md | 10 +++--- .../README.md | 6 ++-- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 2 +- .../README.es.md | 9 +++-- .../README.md | 8 ++--- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 7 ++-- .../README.md | 5 ++- .../index.html | 0 .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 0 .../README.es.md | 2 +- .../README.md | 2 +- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../test.js | 0 .../README.es.md | 5 ++- .../README.md | 6 ++-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 6 ++-- .../README.md | 6 ++-- .../index.html | 4 +-- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 8 ++--- .../README.md | 9 +++-- .../index.html | 4 +-- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 8 ++--- .../README.md | 8 ++--- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 6 ++-- .../README.md | 7 ++-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 4 +-- .../README.md | 4 +-- .../index.html | 2 +- .../solution.hide.css | 2 +- .../solution.hide.html | 4 +-- .../styles.css | 0 .../tests.js | 2 +- .../README.es.md | 6 ++-- .../README.md | 2 +- .../index.html | 2 +- .../solution.hide.html | 2 +- .../styles.css | 0 .../tests.js | 0 .../README.es.md | 17 +++++----- .../README.md | 17 +++++----- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 .../README.es.md | 4 +-- .../README.md | 4 +-- .../index.html | 2 +- .../solution.hide.css | 0 .../styles.css | 0 .../tests.js | 0 132 files changed, 288 insertions(+), 233 deletions(-) create mode 100644 .learn/resets/01-inline-styles/index.html create mode 100644 .learn/resets/02-style-tag/index.html rename exercises/{00-Welcome => 00-welcome}/README.es.md (70%) rename exercises/{00-Welcome => 00-welcome}/README.md (71%) delete mode 100644 exercises/00.1-Inline-Styles/README.es.md delete mode 100644 exercises/00.1-Inline-Styles/index.html delete mode 100644 exercises/00.1-Inline-Styles/solution.hide.html delete mode 100644 exercises/01-Style-tag/index.html create mode 100644 exercises/01-inline-styles/README.es.md rename exercises/{00.1-Inline-Styles => 01-inline-styles}/README.md (67%) create mode 100644 exercises/01-inline-styles/index.html create mode 100644 exercises/01-inline-styles/solution.hide.html create mode 100644 exercises/01-inline-styles/tests.js delete mode 100644 exercises/01.1-Add-a-style-tag/index.html delete mode 100644 exercises/02-Separate-Stylesheet/solution.hide.css delete mode 100644 exercises/02-Separate-Stylesheet/styles.css rename exercises/{01-Style-tag => 02-style-tag}/README.es.md (78%) rename exercises/{01-Style-tag => 02-style-tag}/README.md (74%) create mode 100644 exercises/02-style-tag/index.html rename exercises/{01-Style-tag => 02-style-tag}/solution.hide.html (100%) rename exercises/{01-Style-tag => 02-style-tag}/test.js (100%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/README.es.md (95%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/README.md (94%) create mode 100644 exercises/02.1-add-a-style-tag/index.html rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/solution.hide.html (70%) rename exercises/{01.1-Add-a-style-tag => 02.1-add-a-style-tag}/test.js (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/README.es.md (95%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/README.md (95%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/index.html (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/solution.hide.html (100%) rename exercises/{01.2-RGBA-colors => 02.2-rbga-colors}/tests.js (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/README.es.md (96%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/README.md (95%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/index.html (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/solution.hide.html (100%) rename exercises/{01.3-Your-Second-Style => 02.3-your-second-style}/tests.js (100%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/README.es.md (95%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/README.md (95%) rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/index.html (100%) create mode 100644 exercises/03-separate-stylesheet/solution.hide.css create mode 100644 exercises/03-separate-stylesheet/styles.css rename exercises/{02-Separate-Stylesheet => 03-separate-stylesheet}/tests.js (100%) rename exercises/{02.1-Background => 03.1-background}/README.es.md (98%) rename exercises/{02.1-Background => 03.1-background}/README.md (98%) rename exercises/{02.1-Background => 03.1-background}/index.html (85%) rename exercises/{02.1-Background => 03.1-background}/solution.hide.css (100%) rename exercises/{02.1-Background => 03.1-background}/styles.css (100%) rename exercises/{02.1-Background => 03.1-background}/tests.js (97%) rename exercises/{03-list-styling => 04-list-styling}/README.es.md (71%) rename exercises/{03-list-styling => 04-list-styling}/README.md (92%) rename exercises/{03-list-styling => 04-list-styling}/index.html (96%) rename exercises/{03-list-styling => 04-list-styling}/styles.css (100%) rename exercises/{03-list-styling => 04-list-styling}/test.js (96%) rename exercises/{04-Class-Selector => 05-class-selector}/README.es.md (81%) rename exercises/{04-Class-Selector => 05-class-selector}/README.md (79%) rename exercises/{04-Class-Selector => 05-class-selector}/index.html (82%) rename exercises/{04-Class-Selector => 05-class-selector}/solution.hide.html (84%) rename exercises/{04-Class-Selector => 05-class-selector}/styles.css (100%) rename exercises/{04-Class-Selector => 05-class-selector}/test.js (96%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/README.es.md (85%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/README.md (85%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/index.html (81%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/solution.hide.css (100%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/styles.css (100%) rename exercises/{04.1-Combined-Rules => 05.1-combined-rules}/tests.js (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/README.es.md (82%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/README.md (85%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/index.html (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/solution.hide.html (78%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/styles.css (100%) rename exercises/{04.2-Apply-several-classes => 05.2-apply-several-classes}/test.js (100%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/README.es.md (94%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/README.md (94%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/index.html (90%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/solution.hide.html (91%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/styles.css (100%) rename exercises/{04.3-id-Selector => 05.3-id-selector}/test.js (100%) rename exercises/{05-Specificity => 06-specificity}/README.es.md (85%) rename exercises/{05-Specificity => 06-specificity}/README.md (92%) rename exercises/{05-Specificity => 06-specificity}/index.html (93%) rename exercises/{05-Specificity => 06-specificity}/solution.hide.css (100%) rename exercises/{05-Specificity => 06-specificity}/styles.css (100%) rename exercises/{05-Specificity => 06-specificity}/tests.js (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/README.es.md (87%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/README.md (86%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/index.html (91%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/solution.hide.css (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/styles.css (100%) rename exercises/{06-Practicing-Rules => 07-practicing-rules}/tests.js (98%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/README.es.md (72%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/README.md (72%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/index.html (93%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/solution.hide.css (100%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/styles.css (100%) rename exercises/{07-Very-Specific-Rules => 08-very-specific-rules}/tests.js (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/README.es.md (70%) rename exercises/{08-Rounded-Image => 09-rounded-image}/README.md (71%) rename exercises/{08-Rounded-Image => 09-rounded-image}/index.html (91%) rename exercises/{08-Rounded-Image => 09-rounded-image}/solution.hide.css (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/styles.css (100%) rename exercises/{08-Rounded-Image => 09-rounded-image}/tests.js (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/README.es.md (82%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/README.md (75%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/index.html (88%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/solution.hide.css (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/styles.css (100%) rename exercises/{09-Anchor-Styles => 10-anchor-styles}/tests.js (100%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/README.es.md (94%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/README.md (94%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/index.html (89%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/solution.hide.css (91%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/solution.hide.html (83%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/styles.css (100%) rename exercises/{10-Your-Own-Font => 11-your-own-font}/tests.js (95%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/README.es.md (80%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/README.md (97%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/index.html (91%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/solution.hide.html (93%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/styles.css (100%) rename exercises/{11-Font-Awesome-Icons => 12-font-awesome-icons}/tests.js (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/README.es.md (64%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/README.md (61%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/index.html (92%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/solution.hide.css (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/styles.css (100%) rename exercises/{12-Relative-Length-EM-REM => 13-relative-length-em-rem}/tests.js (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/README.es.md (91%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/README.md (90%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/index.html (87%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/solution.hide.css (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/styles.css (100%) rename exercises/{13-Anchor-Like-Button => 14-anchor-like-button}/tests.js (100%) diff --git a/.learn/resets/01-inline-styles/index.html b/.learn/resets/01-inline-styles/index.html new file mode 100644 index 00000000..75056c8e --- /dev/null +++ b/.learn/resets/01-inline-styles/index.html @@ -0,0 +1,17 @@ + + + + 01 Inline Styles + + + + + + + + + + +
Hello
My brother
+ + diff --git a/.learn/resets/02-style-tag/index.html b/.learn/resets/02-style-tag/index.html new file mode 100644 index 00000000..d88e76dd --- /dev/null +++ b/.learn/resets/02-style-tag/index.html @@ -0,0 +1 @@ + diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-welcome/README.es.md similarity index 70% rename from exercises/00-Welcome/README.es.md rename to exercises/00-welcome/README.es.md index c79f3275..0f0eff0d 100644 --- a/exercises/00-Welcome/README.es.md +++ b/exercises/00-welcome/README.es.md @@ -27,9 +27,8 @@ Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nad Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): -1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book: -1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (run-tests) :warning: +1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentación) 📖 +2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) 💻, (run-tests) ⚠️ +3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribución: (tutoriales, correcciones), 🤖 -Este proyecto sigue las especificaciones -[all-contributors](https://github.com/kentcdodds/all-contributors) - ¡Todas las contribuciones son bienvenidas! +Este proyecto sigue las especificaciones [all-contributors](https://github.com/kentcdodds/all-contributors) ¡Todas las contribuciones son bienvenidas! diff --git a/exercises/00-Welcome/README.md b/exercises/00-welcome/README.md similarity index 71% rename from exercises/00-Welcome/README.md rename to exercises/00-welcome/README.md index e2058557..e7048125 100644 --- a/exercises/00-Welcome/README.md +++ b/exercises/00-welcome/README.md @@ -6,9 +6,9 @@ intro: "https://www.youtube.com/watch?v=AuXnQHKhjxw" My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 -Learning to code is hard, you will probably need coaching! DM me on twitter if you have any questions. +Learning to code is hard; you will probably need coaching! DM me on Twitter if you have any questions. -During this course you will be learning the following concepts: +During this course, you will be learning the following concepts: 1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a ` diff --git a/exercises/01.1-Add-a-style-tag/README.md b/exercises/02.1-add-a-style-tag/README.md similarity index 94% rename from exercises/01.1-Add-a-style-tag/README.md rename to exercises/02.1-add-a-style-tag/README.md index e71febdf..f77ce8c4 100644 --- a/exercises/01.1-Add-a-style-tag/README.md +++ b/exercises/02.1-add-a-style-tag/README.md @@ -2,12 +2,12 @@ tutorial: "https://www.youtube.com/watch?v=K1SrZxiiM6I" --- -# `01.1` The Style Tag +# `02.1` The Style Tag The previous exercise had a pre-writen ` diff --git a/exercises/02.1-add-a-style-tag/index.html b/exercises/02.1-add-a-style-tag/index.html new file mode 100644 index 00000000..dbdd26d8 --- /dev/null +++ b/exercises/02.1-add-a-style-tag/index.html @@ -0,0 +1,6 @@ + +
+ 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-Add-a-style-tag/solution.hide.html b/exercises/02.1-add-a-style-tag/solution.hide.html similarity index 70% rename from exercises/01.1-Add-a-style-tag/solution.hide.html rename to exercises/02.1-add-a-style-tag/solution.hide.html index 85bac8dd..f13616dc 100644 --- a/exercises/01.1-Add-a-style-tag/solution.hide.html +++ b/exercises/02.1-add-a-style-tag/solution.hide.html @@ -7,6 +7,6 @@
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.
diff --git a/exercises/01.1-Add-a-style-tag/test.js b/exercises/02.1-add-a-style-tag/test.js similarity index 100% rename from exercises/01.1-Add-a-style-tag/test.js rename to exercises/02.1-add-a-style-tag/test.js diff --git a/exercises/01.2-RGBA-colors/README.es.md b/exercises/02.2-rbga-colors/README.es.md similarity index 95% rename from exercises/01.2-RGBA-colors/README.es.md rename to exercises/02.2-rbga-colors/README.es.md index e7c6ab3d..e448639a 100644 --- a/exercises/01.2-RGBA-colors/README.es.md +++ b/exercises/02.2-rbga-colors/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI" --- -# `01.2` Your First Style +# `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: diff --git a/exercises/01.2-RGBA-colors/README.md b/exercises/02.2-rbga-colors/README.md similarity index 95% rename from exercises/01.2-RGBA-colors/README.md rename to exercises/02.2-rbga-colors/README.md index e6181ea4..a47fb128 100644 --- a/exercises/01.2-RGBA-colors/README.md +++ b/exercises/02.2-rbga-colors/README.md @@ -1,7 +1,8 @@ --- 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: diff --git a/exercises/01.2-RGBA-colors/index.html b/exercises/02.2-rbga-colors/index.html similarity index 100% rename from exercises/01.2-RGBA-colors/index.html rename to exercises/02.2-rbga-colors/index.html diff --git a/exercises/01.2-RGBA-colors/solution.hide.html b/exercises/02.2-rbga-colors/solution.hide.html similarity index 100% rename from exercises/01.2-RGBA-colors/solution.hide.html rename to exercises/02.2-rbga-colors/solution.hide.html diff --git a/exercises/01.2-RGBA-colors/tests.js b/exercises/02.2-rbga-colors/tests.js similarity index 100% rename from exercises/01.2-RGBA-colors/tests.js rename to exercises/02.2-rbga-colors/tests.js diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/02.3-your-second-style/README.es.md similarity index 96% rename from exercises/01.3-Your-Second-Style/README.es.md rename to exercises/02.3-your-second-style/README.es.md index 8ed8ad02..a6e3630c 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/02.3-your-second-style/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8" --- -# `01.3` Your Second Style +# `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: diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/02.3-your-second-style/README.md similarity index 95% rename from exercises/01.3-Your-Second-Style/README.md rename to exercises/02.3-your-second-style/README.md index d090ecb0..8918e346 100644 --- a/exercises/01.3-Your-Second-Style/README.md +++ b/exercises/02.3-your-second-style/README.md @@ -2,7 +2,7 @@ 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: 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 100% rename from exercises/01.3-Your-Second-Style/tests.js rename to exercises/02.3-your-second-style/tests.js diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/03-separate-stylesheet/README.es.md similarity index 95% rename from exercises/02-Separate-Stylesheet/README.es.md rename to exercises/03-separate-stylesheet/README.es.md index de8849f2..4f1023ec 100644 --- a/exercises/02-Separate-Stylesheet/README.es.md +++ b/exercises/03-separate-stylesheet/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=MmnkVGINtbs" --- -# `02` Separate Stylesheet +# `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 95% rename from exercises/02-Separate-Stylesheet/README.md rename to exercises/03-separate-stylesheet/README.md index 0e5fb4d4..cbb2645a 100644 --- a/exercises/02-Separate-Stylesheet/README.md +++ b/exercises/03-separate-stylesheet/README.md @@ -2,7 +2,7 @@ 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 98% rename from exercises/02.1-Background/README.es.md rename to exercises/03.1-background/README.es.md index 55debc05..e0af7277 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/03.1-background/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4" --- -# `02.1` Background +# `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 98% rename from exercises/02.1-Background/README.md rename to exercises/03.1-background/README.md index 726d36b1..3580ab7e 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/03.1-background/README.md @@ -2,7 +2,7 @@ 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,7 +10,6 @@ If it is an image, you can specify if you want the image to be repeated horizont ## 📝 Instructions: - 1. Run the exercise. 2. Check the Preview. 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 @@ - 02 Background + 03.1 Background 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/03-list-styling/README.es.md b/exercises/04-list-styling/README.es.md similarity index 71% rename from exercises/03-list-styling/README.es.md rename to exercises/04-list-styling/README.es.md index 059cf653..7d267da2 100644 --- a/exercises/03-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=qcx31wUVmqI" --- -# `03` Estilo de listas +# `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. @@ -10,7 +10,7 @@ Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o n Por ejemplo: -```HTML +```html ul { list-style-type: none; margin: 0; @@ -29,5 +29,11 @@ Luego, realiza los cambios a continuación y construye de nuevo. 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. :) +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. + +## 💡 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 \ No newline at end of file diff --git a/exercises/03-list-styling/README.md b/exercises/04-list-styling/README.md similarity index 92% rename from exercises/03-list-styling/README.md rename to exercises/04-list-styling/README.md index 7dec08cd..242d9936 100644 --- a/exercises/03-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs" --- -# `03` List styling +# `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. @@ -10,7 +10,7 @@ We have CSS control over what these lists look like, what bullets or numbers the For example: -```HTML +```html ul { list-style-type: none; margin: 0; @@ -27,13 +27,12 @@ Then make the changes below and run 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. :) +3. Make the Healthy drink bullets into Armenian numbers. 4. Completely remove the bullets and extra spacing from the Web-developer drinks. -### 💡 Hint: +## 💡 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. 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 @@ - 03 List styling + 04 List styling 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/03-list-styling/test.js b/exercises/04-list-styling/test.js similarity index 96% rename from exercises/03-list-styling/test.js rename to exercises/04-list-styling/test.js index c8939872..a8f97011 100644 --- a/exercises/03-list-styling/test.js +++ b/exercises/04-list-styling/test.js @@ -17,7 +17,7 @@ describe("The lists should be modified accordingly", function() { let head = document.querySelector('head'); let title = head.querySelector('title').innerHTML; - expect(title).toBe('03 List styling') + expect(title).toBe('04 List styling') }) // Test in progress: diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/05-class-selector/README.es.md similarity index 81% rename from exercises/04-Class-Selector/README.es.md rename to exercises/05-class-selector/README.es.md index 58aa0992..4214af34 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/05-class-selector/README.es.md @@ -2,9 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=0I_xSAQ3vNs" --- - - -# `04` Class Selector +# `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`: @@ -19,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 79% rename from exercises/04-Class-Selector/README.md rename to exercises/05-class-selector/README.md index 0c344e29..eea336a9 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/05-class-selector/README.md @@ -2,7 +2,7 @@ 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 @@ - 04 Class selector + 05 Class selector 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 @@ - 04 Class selector + 05 Class selector 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 85% rename from exercises/04.1-Combined-Rules/README.es.md rename to exercises/05.1-combined-rules/README.es.md index 9642be5b..8e735e07 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/05.1-combined-rules/README.es.md @@ -2,8 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=NYlPhkmqgmU" --- - -# `04.1` Combined Rules +# `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. @@ -36,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 85% rename from exercises/04.1-Combined-Rules/README.md rename to exercises/05.1-combined-rules/README.md index f3bcddc8..55bd0c87 100644 --- a/exercises/04.1-Combined-Rules/README.md +++ b/exercises/05.1-combined-rules/README.md @@ -2,7 +2,7 @@ tutorial: "https://www.youtube.com/watch?v=VTOwd98T6FY" --- -# `04.1` Combined Rules +# `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. @@ -34,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 @@ - 04.1 Combined Rules + 05.1 Combined Rules 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 82% rename from exercises/04.2-Apply-several-classes/README.es.md rename to exercises/05.2-apply-several-classes/README.es.md index bbda737e..89efee60 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/05.2-apply-several-classes/README.es.md @@ -3,7 +3,7 @@ tutorial: "https://www.youtube.com/watch?v=CaSytmRcVGM" --- -# `04.2` Apply several classes +# `05.2` Apply several classes Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. @@ -21,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: ![Poker Card Heart](../../.learn/assets/04.2-1.png?raw=true) diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md similarity index 85% rename from exercises/04.2-Apply-several-classes/README.md rename to exercises/05.2-apply-several-classes/README.md index be4b74b1..333b93a6 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -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: ![Poker Card Heart](../../.learn/assets/04.2-1.png?raw=true) 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 @@ - 04.2 Apply several classes + 05.2 Apply several classes 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 94% rename from exercises/04.3-id-Selector/README.es.md rename to exercises/05.3-id-selector/README.es.md index b2d15740..3c6d469a 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/05.3-id-selector/README.es.md @@ -3,7 +3,7 @@ tutorial: "https://www.youtube.com/watch?v=tUpL6lUJItk" --- -# `04.3` The ID CSS Selector +# `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 94% rename from exercises/04.3-id-Selector/README.md rename to exercises/05.3-id-selector/README.md index 407dcfe5..9955f1a1 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/05.3-id-selector/README.md @@ -2,7 +2,7 @@ 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 @@ - 04.3 ID selector + 05.3 ID selector 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 @@ - 04.3 ID selector + 05.3 ID selector 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 @@ - 05 Specificity + 06 Specificity
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: -![Example Image](../../.learn/assets/06-1.png?raw=true) +![Resultado esperado](../../.learn/assets/06-1.png?raw=true) 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: -![Example Image](../../.learn/assets/06-1.png?raw=true) +![Expected result](../../.learn/assets/06-1.png?raw=true) 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 @@ - 06 Practicing Rules + 07 Practicing Rules @@ -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`. +![Resultado esperado](../../.learn/assets/07-1.png?raw=true) -![Example Image](../../.learn/assets/07-1.png?raw=true) ->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`. +![Expected result](../../.learn/assets/07-1.png?raw=true) -![Example Image](../../.learn/assets/07-1.png?raw=true) ->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 @@ - 07 Very Specific Rules + 08 Very Specific Rules
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 @@ - 08 Rounded Image + 09 Rounded Image 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: -![Example Image](../../.learn/assets/09-1.png?raw=true) +![Botón siendo presionado ejemplo](../../.learn/assets/09-1.png?raw=true) 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: -![Example Image](../../.learn/assets/09-1.png?raw=true) +![Button being pressed example](../../.learn/assets/09-1.png?raw=true) 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 @@ - 09 Anchor Styles + 10 Anchor Styles 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 @@ - 10 Your Own Font + 11 Your Own Font
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" /> - + - 10 Your Own Font + 11 Your Own Font
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 @@ - 11 Font Awesome + 12 Font Awesome
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 @@ - 11 Font Awesome + 12 Font Awesome
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í: - -![Example Image](../../.learn/assets/12-1.png?raw=true) +![Resultado esperado](../../.learn/assets/12-1.png?raw=true) 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: - -![Example Image](../../.learn/assets/12-1.png?raw=true) +![Expected result](../../.learn/assets/12-1.png?raw=true) 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 @@ - 12 Relative Length EM REM + 13 Relative Length EM REM
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: -![Example Image](../../.learn/assets/13-1.gif?raw=true) +![Resultado esperado](../../.learn/assets/13-1.gif?raw=true) 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: -![Example Image](../../.learn/assets/13-1.gif?raw=true) +![Expected result](../../.learn/assets/13-1.gif?raw=true) 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 @@ - 13 Anchor Like Button + 14 Anchor Like Button 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 From 9f9677b79dd7a5b3d1359cc059078f4188d6e55d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:11:30 +0100 Subject: [PATCH 447/484] Update test.js --- exercises/04-list-styling/test.js | 75 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 39 deletions(-) diff --git a/exercises/04-list-styling/test.js b/exercises/04-list-styling/test.js index a8f97011..c8d27b1c 100644 --- a/exercises/04-list-styling/test.js +++ b/exercises/04-list-styling/test.js @@ -1,42 +1,39 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(dirname, "./index.html"), "utf8"); +const fs = require("fs"); +const path = require("path"); +const css = fs.readFileSync(path.resolve(dirname, "./styles.css"), "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('04 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 +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"); + }); + }); +}); From 1531bb84537d8aaf326588b6be051b488fea1c12 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:12:33 +0100 Subject: [PATCH 448/484] Create solution.hide.css --- exercises/04-list-styling/solution.hide.css | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 exercises/04-list-styling/solution.hide.css 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; +} From 0f358cf243d1ecbb6b649db59c87252f77b1966b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 13:28:24 +0100 Subject: [PATCH 449/484] Update README.md --- exercises/04-list-styling/README.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md index 242d9936..1d3309a4 100644 --- a/exercises/04-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -4,7 +4,7 @@ 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. +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. @@ -18,7 +18,7 @@ For example: } ``` -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. +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: @@ -27,13 +27,14 @@ Then make the changes below and run 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. +1. Make the Coca Cola drinks numbers into lowercase letters. +2. Make 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 \ No newline at end of file +- 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 + From c9916df2d959c28dc3bfc87e6e55299af186fe4b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 16:23:56 +0100 Subject: [PATCH 450/484] Update README.md --- exercises/05.2-apply-several-classes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05.2-apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md index 333b93a6..009f5997 100644 --- a/exercises/05.2-apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -2,7 +2,7 @@ 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. From 7cac596829aaa39206d411c40b63f1bec30dda74 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 20 Mar 2024 16:35:24 +0100 Subject: [PATCH 451/484] Update README.es.md --- exercises/04-list-styling/README.es.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md index 7d267da2..c09d4976 100644 --- a/exercises/04-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -22,18 +22,18 @@ Eliminará los números o viñetas y moverá el texto hacia la izquierda para qu 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. +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. +1. Convierte los números de las bebidas de Coca Cola en letras minúsculas. +2. Convierte los números de las bebidas de 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. +4. Elimina 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 \ No newline at end of file +- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp + From f9662e5ff296698daa1c7a784546259225db48a0 Mon Sep 17 00:00:00 2001 From: josemoracard Date: Thu, 21 Mar 2024 12:38:58 +0000 Subject: [PATCH 452/484] run learnpack clean --- .learn/resets/01-inline-styles/index.html | 17 ----------------- .learn/resets/02-style-tag/index.html | 1 - 2 files changed, 18 deletions(-) delete mode 100644 .learn/resets/01-inline-styles/index.html delete mode 100644 .learn/resets/02-style-tag/index.html diff --git a/.learn/resets/01-inline-styles/index.html b/.learn/resets/01-inline-styles/index.html deleted file mode 100644 index 75056c8e..00000000 --- a/.learn/resets/01-inline-styles/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - 01 Inline Styles - - - -

- - - - - - -
Hello
My brother
- - diff --git a/.learn/resets/02-style-tag/index.html b/.learn/resets/02-style-tag/index.html deleted file mode 100644 index d88e76dd..00000000 --- a/.learn/resets/02-style-tag/index.html +++ /dev/null @@ -1 +0,0 @@ - From f3a1b99d6b84d84230e2566f040e84f2d8ca3eb7 Mon Sep 17 00:00:00 2001 From: josemoracard Date: Thu, 21 Mar 2024 13:39:44 +0000 Subject: [PATCH 453/484] updated test --- exercises/01-inline-styles/tests.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/exercises/01-inline-styles/tests.js b/exercises/01-inline-styles/tests.js index e980cf26..a41ccc11 100644 --- a/exercises/01-inline-styles/tests.js +++ b/exercises/01-inline-styles/tests.js @@ -1,13 +1,9 @@ const fs = require('fs'); const path = require('path'); -const { JSDOM } = require('jsdom'); - -// Read the HTML file const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +document.documentElement.innerHTML = html.toString(); -// Set up the DOM environment -const { window } = new JSDOM(html); -const { document } = window; +jest.dontMock('fs'); // Run the tests test("There should be a table element", () => { From 09ca9e06e7232642c42de50b99703fdac13550c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 13:29:59 -0500 Subject: [PATCH 454/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 08f04683..55fa5f58 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.35 -g && learnpack plugins:install learnpack-html@0.0.20" + "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 1296b87d9b4128ad1ef7a5411e763261f22b4f9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 13:30:17 -0500 Subject: [PATCH 455/484] Update learn.json --- learn.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index 80da5758..b24b2183 100644 --- a/learn.json +++ b/learn.json @@ -21,7 +21,7 @@ "graded": true, "disabledActions": [], "disableGrading": false, - "editor": { - "version": "3.1.9" + "editor": + "version": "3.1.23" } } From ada1409b867cabf429357e84f4bab9e5f6476077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 18:41:39 +0000 Subject: [PATCH 456/484] Fix learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index b24b2183..5a52f80b 100644 --- a/learn.json +++ b/learn.json @@ -21,7 +21,7 @@ "graded": true, "disabledActions": [], "disableGrading": false, - "editor": + "editor": { "version": "3.1.23" } } From 1ba7624141b310257e5b1f20b60ac663b5297c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Apr 2024 14:43:40 -0500 Subject: [PATCH 457/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index b519e106..04d1019b 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.35 -g && learnpack plugins:install learnpack-html@0.0.20 +RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2 From c569a04e2e11277527cce971bf0ce093c49099b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 12:20:01 -0500 Subject: [PATCH 458/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 55fa5f58..ba9eb6a0 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], - "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 493383b7427a3b602657ae198561131cbe920996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 12:20:22 -0500 Subject: [PATCH 459/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 04d1019b..d02bfdfc 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.39 -g && learnpack plugins:install @learnpack/html@1.1.2 +RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7 From ca387e28a1a0fec0227031af3f95eeb15f161f61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 13:01:13 -0500 Subject: [PATCH 460/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ba9eb6a0..b278c0e7 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // 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@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "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" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From bac2b3dca39533ceaa6ee4245d90152018bbad1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sun, 7 Apr 2024 13:01:30 -0500 Subject: [PATCH 461/484] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index d02bfdfc..6e137a77 100644 --- a/.gitpod.Dockerfile +++ b/.gitpod.Dockerfile @@ -3,4 +3,4 @@ FROM gitpod/workspace-full:latest USER gitpod -RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.46 -g && learnpack plugins:install @learnpack/html@1.1.7 +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 From 403615e49b14b446b1e3fdb26cae3146e0cdb7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:23:58 -0500 Subject: [PATCH 462/484] Update learn.json --- learn.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/learn.json b/learn.json index 5a52f80b..f00696d7 100644 --- a/learn.json +++ b/learn.json @@ -23,5 +23,9 @@ "disableGrading": false, "editor": { "version": "3.1.23" + }, + "video": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } From 4e0237f66a8c5f920044046b8703d123a5f8c23b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:26:51 -0500 Subject: [PATCH 463/484] Update learn.json --- learn.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index f00696d7..391c4f75 100644 --- a/learn.json +++ b/learn.json @@ -25,7 +25,9 @@ "version": "3.1.23" }, "video": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "intro": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } } From 2e2d97f0a05da0321eacce7b4e85c08b88d5b209 Mon Sep 17 00:00:00 2001 From: Charlytoc Date: Tue, 23 Apr 2024 18:52:00 -0500 Subject: [PATCH 464/484] Update editor and CLI --- .devcontainer/devcontainer.json | 4 ++- learn.json | 63 +++++++++++++++++---------------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b278c0e7..d1773900 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,3 +1,4 @@ +``` // 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 { @@ -22,7 +23,7 @@ // 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@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", @@ -33,3 +34,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } +``` \ No newline at end of file diff --git a/learn.json b/learn.json index 391c4f75..88b8c3d2 100644 --- a/learn.json +++ b/learn.json @@ -1,33 +1,36 @@ { - "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" - }, - "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" - }, - "duration": 8, - "difficulty": "easy", - "videoSolutions": true, - "bugsLink": "https://github.com/learnpack/learnpack/issues/new", - "projectType": "tutorial", - "graded": true, - "disabledActions": [], - "disableGrading": false, - "editor": { - "version": "3.1.23" - }, - "video": { - "intro": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" - } +"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" +}, +"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" +}, +"duration": 8, +"difficulty": "easy", +"videoSolutions": true, +"bugsLink": "https://github.com/learnpack/learnpack/issues/new", +"projectType": "tutorial", +"graded": true, +"disabledActions": [], +"disableGrading": false, +"editor": { + "version": "3.1.36" +}, +"telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" +}, +"video": { + "intro": { + "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } +} \ No newline at end of file From 362341eb5b00ef23d524acdd223f03ca1abce95c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Tue, 23 Apr 2024 18:54:08 -0500 Subject: [PATCH 465/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index d1773900..77c461aa 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,4 +1,4 @@ -``` + // 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 { @@ -34,4 +34,3 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" } -``` \ No newline at end of file From 94bab6bd48bf5e1e56fdf8df38b299d1b4c43ada Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 20 May 2024 06:59:08 -0500 Subject: [PATCH 466/484] Update learn.json --- learn.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/learn.json b/learn.json index 88b8c3d2..c9c89d1e 100644 --- a/learn.json +++ b/learn.json @@ -29,8 +29,8 @@ }, "video": { "intro": { - "es":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "en": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } -} \ No newline at end of file +} From 628e3354ee7d762fdab8d13bc9b9f60506ae060e Mon Sep 17 00:00:00 2001 From: Charlytoc Date: Mon, 17 Jun 2024 20:23:52 -0500 Subject: [PATCH 467/484] Updating to latest version of LearnPack Node and DOm --- .devcontainer/devcontainer.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 77c461aa..ec707f82 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,4 +1,3 @@ - // 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 { @@ -13,7 +12,7 @@ ".md": "vscode.markdown.preview.editor" } }, - "extensions": ["learn-pack.learnpack-vscode"] + "extensions": ["learn-pack.learnpack-vscore"] } }, @@ -23,7 +22,7 @@ // 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@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/dom@1.1.7 @learnpack/node@1.1.13" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", @@ -33,4 +32,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" -} +} \ No newline at end of file From fa97e6a0f70f7451a25411217c066dac4a00344c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:10:30 -0500 Subject: [PATCH 468/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ec707f82..a3124481 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -12,7 +12,7 @@ "*.md": "vscode.markdown.preview.editor" } }, - "extensions": ["learn-pack.learnpack-vscore"] + "extensions": ["learn-pack.learnpack-vscode"] } }, @@ -32,4 +32,4 @@ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // "remoteUser": "root" -} \ No newline at end of file +} From ca7282383b17831c3cfce943548087cb3cc2bfe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:15:19 -0500 Subject: [PATCH 469/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index a3124481..6115c0e4 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // 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@2.1.50 -g && learnpack plugins:install @learnpack/dom@1.1.7 @learnpack/node@1.1.13" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 6ddfc18689f5a5b05b8374001495b554ce3ff8eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Mon, 1 Jul 2024 17:18:41 -0500 Subject: [PATCH 470/484] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index c9c89d1e..90137a53 100644 --- a/learn.json +++ b/learn.json @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1.36" + "version": "3.1.40" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From de877546555666eaccb684a34ed74d1a2f9ad260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:12:03 -0500 Subject: [PATCH 471/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 6115c0e4..c38568c6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // 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@2.1.50 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@4.0.10 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From e790eed26bfc7e246670fb6d0e37f8002fa411a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charly=20Chac=C3=B3n?= <107764250+Charlytoc@users.noreply.github.com> Date: Wed, 28 Aug 2024 18:12:21 -0500 Subject: [PATCH 472/484] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 90137a53..b9087243 100644 --- a/learn.json +++ b/learn.json @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1.40" + "version": "4.0.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 15c9c15df059213271fe789964e68ac07aaaa14e Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Tue, 12 Nov 2024 13:51:00 -0600 Subject: [PATCH 473/484] fixed title and description --- learn.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/learn.json b/learn.json index b9087243..7efe0380 100644 --- a/learn.json +++ b/learn.json @@ -5,13 +5,13 @@ "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 looking to learn and practice 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", @@ -22,7 +22,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.0.0" + "version": "4.3" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From a5e2fc1ad3b60e1796e9c5e8e87bd36060c5bffa Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Tue, 12 Nov 2024 13:51:25 -0600 Subject: [PATCH 474/484] fixed title and description --- learn.json | 64 ++++++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/learn.json b/learn.json index 7efe0380..33711bf4 100644 --- a/learn.json +++ b/learn.json @@ -1,36 +1,34 @@ { -"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 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. These CSS exercises are ideal for beginners looking to learn and practice 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", -"graded": true, -"disabledActions": [], -"disableGrading": false, -"editor": { - "version": "4.3" -}, -"telemetry": { - "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" -}, -"video": { - "intro": { - "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", - "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + "slug": "css-tutorial-exercises-course", + "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 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. These CSS exercises are ideal for beginners looking to learn and practice 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", + "graded": true, + "disabledActions": [], + "disableGrading": false, + "editor": { + "version": "4.3" + }, + "telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" + }, + "video": { + "intro": { + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" + } } } -} From 4bdd34bb86e664c61f4f4d68e1ca271a135e20bb Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 15:59:24 -0500 Subject: [PATCH 475/484] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 33711bf4..84057034 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.3" + "version": "3.4" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 393712da807041be568cd9607cdcd91585bd171d Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 21:11:08 +0000 Subject: [PATCH 476/484] dorngraded to edito 3.1 --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 84057034..5a2e591a 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.4" + "version": "3.1" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 1a2848f5c50aa10c970fa4bd44dcacb6cbedc826 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 14 Nov 2024 21:20:53 +0000 Subject: [PATCH 477/484] updated editor to 4 --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 5a2e591a..b6721026 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "3.1" + "version": "4.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 5e407eb663ff8a052188e7a8469f437db7296d20 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 22 Nov 2024 19:23:29 -0500 Subject: [PATCH 478/484] small fixes --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 33711bf4..b6721026 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.3" + "version": "4.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From 57a26863bd367863050d46d5ac148af4141e51b5 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Mon, 13 Jan 2025 17:33:51 -0500 Subject: [PATCH 479/484] new version in the cloud --- .devcontainer/devcontainer.json | 2 +- exercises/04-list-styling/README.es.md | 13 ++++++++----- exercises/04-list-styling/README.md | 6 ++++-- learn.json | 2 +- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c38568c6..37fd7c78 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // 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@4.0.10 -g && learnpack plugins:install @learnpack/html@1.1.7" + "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.7 -g && learnpack plugins:install @learnpack/html@1.1.7" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md index c09d4976..f67abca2 100644 --- a/exercises/04-list-styling/README.es.md +++ b/exercises/04-list-styling/README.es.md @@ -22,18 +22,21 @@ Eliminará los números o viñetas y moverá el texto hacia la izquierda para qu 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. +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: -1. Convierte los números de las bebidas de Coca Cola en letras minúsculas. -2. Convierte los números de las bebidas de Pepsi en viñetas cuadradas. -3. Convierte las viñetas de las bebidas Saludables en números armenios. -4. Elimina completamente las viñetas de las bebidas de web-developer. +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 index 1d3309a4..6a9cb5d7 100644 --- a/exercises/04-list-styling/README.md +++ b/exercises/04-list-styling/README.md @@ -27,8 +27,10 @@ Then make the changes below and run again. ## 📝 Instructions: -1. Make the Coca Cola drinks numbers into lowercase letters. -2. Make the Pepsi drinks numbers into square bullets. +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. diff --git a/learn.json b/learn.json index b6721026..74fcbc96 100644 --- a/learn.json +++ b/learn.json @@ -20,7 +20,7 @@ "disabledActions": [], "disableGrading": false, "editor": { - "version": "4.0" + "version": "5.0" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" From b1febda39f321c16129a1def52333e19526986f1 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Wed, 15 Jan 2025 10:48:49 -0500 Subject: [PATCH 480/484] Update learn.json --- learn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learn.json b/learn.json index 74fcbc96..efca06d8 100644 --- a/learn.json +++ b/learn.json @@ -23,7 +23,7 @@ "version": "5.0" }, "telemetry": { - "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry" + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" }, "video": { "intro": { From 8ef59383249b23e7120a52d6ee39a266bd138605 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Tue, 21 Jan 2025 08:21:35 -0400 Subject: [PATCH 481/484] Update learn.json --- learn.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/learn.json b/learn.json index efca06d8..f8c6bd83 100644 --- a/learn.json +++ b/learn.json @@ -8,7 +8,7 @@ }, "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", "description": { - "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises. These CSS exercises are ideal for beginners looking to learn and practice 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.", + "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, @@ -16,11 +16,13 @@ "videoSolutions": true, "bugsLink": "https://github.com/learnpack/learnpack/issues/new", "projectType": "tutorial", + "autoPlay": "true", "graded": true, "disabledActions": [], "disableGrading": false, "editor": { - "version": "5.0" + "version": "5.0", + "agent": "vscode" }, "telemetry": { "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" From 46564fa2a81e7ae3ea42d2b554a57cec00b75437 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Mon, 27 Jan 2025 20:53:03 -0400 Subject: [PATCH 482/484] Update devcontainer.json --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 37fd7c78..18991c69 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,7 @@ // 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.7 -g && learnpack plugins:install @learnpack/html@1.1.7" + "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", From 63a6724e01cc578760fe154b28637f08e17fad62 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Tue, 25 Feb 2025 07:06:40 -0400 Subject: [PATCH 483/484] Update learn.json technologies --- learn.json | 1 + 1 file changed, 1 insertion(+) diff --git a/learn.json b/learn.json index f8c6bd83..b914a96c 100644 --- a/learn.json +++ b/learn.json @@ -19,6 +19,7 @@ "autoPlay": "true", "graded": true, "disabledActions": [], + "technologies": ["web-development", "desarrollo-web", "front-end", "css"], "disableGrading": false, "editor": { "version": "5.0", From fb6e1472d9941920556d544d078e71f94be05eb0 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 28 Feb 2025 21:46:18 +0000 Subject: [PATCH 484/484] Update workflow files --- .github/workflows/learnpack-audit.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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:

Age	Gender
12 years	Male
22 years	Female
11 years	Male
21 years	Male
22 years	Female
10 years	Male
13 years	Female
13 years	Male
10 years	Male
11 years	Male
11 years	Male

Age	Gender
12 years	Male
22 years	Female
11 years	Male
21 years	Male
22 years	Female
10 years	Male
13 years	Female
13 years	Male
10 years	Male
11 years	Male
11 years	Male

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

My unique font

First h2 heading

First h3 heading

Second h2 heading

Second h3 heading

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

My unique font

First h2 heading

First h3 heading

Second h2 heading

Second h3 heading

One click installation:

Tutorial de EJercicios de CSS de 4Geeks Academy

My unique font

First h2 heading

First h3 heading

Second h2 heading

Second h3 heading

3 reasons you know you are learning

3 reasons you know love what you are learning

3 reasons you know love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

My unique font

My unique font

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

3 reasons you love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

`. +After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

` headings. They are both `

`. Ambos son `

3 reasons you love what you are learning

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

The learning essay

3 reasons you know love what you are learning

My unique font

My unique font

`. Ambos son `

` headings. They are both `