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 127/429] 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 128/429] 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 129/429] 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 130/429] 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 131/429] 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 132/429] 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 133/429] 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 134/429] 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 135/429] 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 136/429] 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 137/429] 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 138/429] 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 139/429] 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 140/429] 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 141/429] 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 142/429] 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 143/429] 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 144/429] 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 145/429] 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 146/429] 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 147/429] 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 148/429] 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 149/429] 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 150/429] 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 151/429] 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 152/429] 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 153/429] 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 154/429] 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 155/429] 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 156/429] 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 157/429] 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 158/429] 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 159/429] 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 160/429] 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 161/429] 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 162/429] 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 163/429] 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 164/429] 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 165/429] 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 166/429] 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 167/429] 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 168/429] 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 169/429] 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 170/429] 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 171/429] 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 172/429] 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 173/429] 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 174/429] 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 175/429] 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 176/429] 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 177/429] 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 178/429] 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 179/429] 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 180/429] 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 267/429] 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 279/429] 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 280/429] 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 281/429] 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 282/429] 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 283/429] 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 284/429] 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 285/429] 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 286/429] 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 287/429] 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 288/429] 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 289/429] 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 290/429] 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 291/429] 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 292/429] 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 293/429] 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 294/429] 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 295/429] 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 296/429] 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 297/429] 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 298/429] 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 299/429] 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 300/429] 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 301/429] 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 302/429] 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 303/429] 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 304/429] 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 305/429] 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 306/429] 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 307/429] 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 308/429] 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 309/429] 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 310/429] 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 311/429] 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 312/429] 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 313/429] 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 314/429] 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 315/429] 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 316/429] 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 317/429] 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 318/429] 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 319/429] 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 320/429] 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 321/429] 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 322/429] 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 323/429] 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 324/429] 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 325/429] 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 326/429] 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 337/429] 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 338/429] 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 339/429] 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 340/429] 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 341/429] 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 342/429] 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 343/429] 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 344/429] 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 345/429] 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 346/429] 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 347/429] 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 348/429] 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 349/429] 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 350/429] 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 351/429] 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 352/429] 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 353/429] 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 354/429] 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 355/429] 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 356/429] 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 357/429] 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 358/429] 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 359/429] 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 360/429] 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 361/429] 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 362/429] 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 363/429] 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 364/429] 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 365/429] 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 366/429] 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 367/429] 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 368/429] 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 369/429] 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 370/429] 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 371/429] 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 372/429] 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 373/429] 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 374/429] 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 375/429] 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 376/429] 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 377/429] 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 ``. Puedes tener cuantas etiquetas `` quieras, pero se recomienda solo tener una al principio del código de tu sitio web. From 5bde7a21c56c74088f7becc586257f7765fd5929 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:22:50 +0200 Subject: [PATCH 378/429] Update README.es.md --- exercises/01.2-Your-First-Style/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-Your-First-Style/README.es.md index 4d6f37bd..d0d8be4b 100644 --- a/exercises/01.2-Your-First-Style/README.es.md +++ b/exercises/01.2-Your-First-Style/README.es.md @@ -1,4 +1,4 @@ -# `01.2` Tu Primer Estilo +# `01.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: From 0ca9201a0d00a4b9cab16d937d0fc19d48ad9d1c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:23:06 +0200 Subject: [PATCH 379/429] Update README.es.md --- exercises/01.3-Your-Second-Style/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md index 6471a030..70a3e7fd 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/01.3-Your-Second-Style/README.es.md @@ -1,4 +1,4 @@ -# `01.3` Tu Segundo Estilo +# `01.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: From f2776b85e4133500a8ef904f408347fbcd48fc08 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:23:26 +0200 Subject: [PATCH 380/429] Update README.es.md --- exercises/02-Separate-Stylesheet/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md index 2b922968..d0e74a41 100644 --- a/exercises/02-Separate-Stylesheet/README.es.md +++ b/exercises/02-Separate-Stylesheet/README.es.md @@ -1,4 +1,4 @@ -# `02` Hoja de estilos separada +# `02` Separate Stylesheet Si usas la etiqueta html ``, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`. From 9beecc697158f616d1acf46c4fcedf7f6c701f4f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:25:14 +0200 Subject: [PATCH 381/429] Update README.es.md --- exercises/02.1-Background/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md index 337b7d02..561e0451 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/02.1-Background/README.es.md @@ -1,6 +1,6 @@ -# `02.1` Background (fondo) +# `02.1` Background -La regla `background` del CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. +La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades, eso puede modificarse. From d9aa339f5e3021d06f5dee834ce725aead678f8e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:26:05 +0200 Subject: [PATCH 382/429] Update README.es.md --- exercises/03-Inline-Styles/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md index cef342ba..6f9ca2d7 100644 --- a/exercises/03-Inline-Styles/README.es.md +++ b/exercises/03-Inline-Styles/README.es.md @@ -1,6 +1,6 @@ -# `03` Inline Styles (estilos en línea) +# `03` Inline Styles -Los estilos `inline` son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento. +Los estilos `inline` (estilos en línea) son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento. Para usar estilos inline, en lugar de declarar una etiqueta `` en el `` del documento, debes establecer el atributo `style` de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico. From 460184e19874b9279094d96ba044c7ff5a6b4ecb Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:26:32 +0200 Subject: [PATCH 383/429] Update README.es.md --- exercises/04-Class-Selector/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md index e8bd37ae..6d5c8a2e 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/04-Class-Selector/README.es.md @@ -1,4 +1,4 @@ -# `04` El selector de clase +# `04` 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`: From 5b99426d3fde4588c235a9fbcf2973b3516188ae Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:26:55 +0200 Subject: [PATCH 384/429] Update README.md --- exercises/04-Class-Selector/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md index 0dd45e76..6b6dd8ec 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/04-Class-Selector/README.md @@ -18,7 +18,7 @@ Use the class property of the HTML element to select it. Styling rules will appl } ``` -Any html tag with the `class="small"` will have a font-size of `9px`.* +Any HTML tag with the `class="small"` will have a font-size of `9px`. ## 📝 Instructions: From d75e2070bfa01683e30c2a8b743be5aa3d35f17e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:27:41 +0200 Subject: [PATCH 385/429] Update README.es.md --- exercises/04.1-Combined-Rules/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md index 40e9cbdd..f7e2d234 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/04.1-Combined-Rules/README.es.md @@ -1,4 +1,4 @@ -# `04.1` Reglas Combinadas +# `04.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. From 84c9f598e6a5420ba4d445bbd2f32bd09910a210 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:28:08 +0200 Subject: [PATCH 386/429] Update README.es.md --- exercises/04.1-Combined-Rules/README.es.md | 1 + 1 file changed, 1 insertion(+) diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md index f7e2d234..c116f5cb 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/04.1-Combined-Rules/README.es.md @@ -34,4 +34,5 @@ Donde el valor de la izquierda de la barra `/` es la propiedad `background-posit ## 💡 Pista: - Cómo usar el background: https://www.w3schools.com/cssref/css3_pr_background.php + - Cómo usar el padding: https://www.w3schools.com/css/css_padding.asp From 0365b6924a304d19cce2a85473df57033bd6285a Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:28:52 +0200 Subject: [PATCH 387/429] 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 236bebab..0ff1bc8b 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/04.2-Apply-several-classes/README.es.md @@ -1,4 +1,4 @@ -# `04.2` Aplica varias clases +# `04.2` Apply several classes Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. Vamos a usar clases y aplicarlas al mismo elemento `
`. From 35898d43a6373a8ee34d504815ab4f3ac9b1f53e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:30:18 +0200 Subject: [PATCH 388/429] Update README.es.md --- exercises/04.2-Apply-several-classes/README.es.md | 3 ++- 1 file changed, 2 insertions(+), 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 0ff1bc8b..fc6b5b80 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/04.2-Apply-several-classes/README.es.md @@ -1,7 +1,8 @@ # `04.2` Apply several classes Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. -Vamos a usar clases y aplicarlas al mismo elemento `
`. + +Vamos a usar dos clases y aplicarlas al mismo elemento `
`. ```html
9
From f2d562e0d92704e54e687036fb9b06f7725611a3 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:30:43 +0200 Subject: [PATCH 389/429] Update README.es.md --- exercises/04.3-id-Selector/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md index bbf9763d..c9e5a36c 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/04.3-id-Selector/README.es.md @@ -1,4 +1,4 @@ -# `04.3` Selector de ID +# `04.3` The ID CSS Selector También puedes seleccionar un elemento por su `#id` y aplicarle estilos. From 28bbf1c2df666450c3c60142d2214177135c2659 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:31:26 +0200 Subject: [PATCH 390/429] Update README.es.md --- exercises/05-Specificity/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md index 4789d892..8873cbd2 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/05-Specificity/README.es.md @@ -1,4 +1,4 @@ -# `05` Especificidad +# `05` 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. From 46e7677260f79c93e09c05f94859b49de1f32d96 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:32:50 +0200 Subject: [PATCH 391/429] Update README.es.md --- exercises/05-Specificity/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md index 8873cbd2..ceeca044 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/05-Specificity/README.es.md @@ -13,4 +13,4 @@ Se trata del nivel de especificidad. Si especificas que tu `div` con `id="th ## 💡 Pista: -+ Puedes usar la anotació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/ From f5c5bd92fffcb4631bbb511aae154a01ce13baf3 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:33:12 +0200 Subject: [PATCH 392/429] Update README.es.md --- exercises/06-Practicing-Rules/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index 101596bb..f38065a2 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -1,4 +1,4 @@ -# `06` Practicando las reglas +# `06` Practicing Rules ## 📝 Instrucciones: From 79ef96f06359a608b5bd3dbaa5cdc32ad01438e4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:37:42 +0200 Subject: [PATCH 393/429] Update README.es.md --- exercises/06-Practicing-Rules/README.es.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index f38065a2..78942479 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -6,17 +6,17 @@ 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`). +3. Cambia el color del `h1` a rojo (`red`). -4. Haz que todos los `h2` tengan subrayado. +4. Haz que todos los `h2` tengan subrayado (`underline`). 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 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 pasar el cursor encima del 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 cf4dd8b8c7f3b2abab177b88a68516cfb66eaf2f Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:37:43 +0200 Subject: [PATCH 394/429] Update README.md --- exercises/06-Practicing-Rules/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 1674968f..2beed784 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -8,19 +8,19 @@ 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-family 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`. -4. Make all the `h2's` with an `underline`. +4. Make all the `h2` have an `underline`. 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). +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. -8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it). +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: From 13cbd5aea1323a920cf9103be315c65781269872 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:38:30 +0200 Subject: [PATCH 395/429] Update README.es.md --- exercises/07-Very-Specific-Rules/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index b3ab50f4..a0eaf6a2 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,4 +1,4 @@ -# `07` Reglas Muy Específicas +# `07` Very Specific Rules ## Importante: From bc1e92d83e104ef14d857e257f504fac10eff01d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:38:52 +0200 Subject: [PATCH 396/429] Update README.es.md --- exercises/08-Rounded-Image/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index a1b3d8d9..bd88ef5d 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -1,4 +1,4 @@ -# `08` Imagen Redondeada +# `08` 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! From 700b1d1b9ff8f00a1050fba5387a66ebb33eb899 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:39:37 +0200 Subject: [PATCH 397/429] 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 847293f1..886e41f1 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -2,7 +2,9 @@ A lot of websites use rounded profile images, a technique that really makes a website more beautiful! -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: +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) From b80362e969802e731bce7b76a2be46d10c8d4586 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:40:27 +0200 Subject: [PATCH 398/429] Update README.es.md --- exercises/09-Anchor-Styles/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md index f700cee0..94e03e07 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/09-Anchor-Styles/README.es.md @@ -1,4 +1,4 @@ -# `09` Estilos de enlaces (anchor) 3D +# `09` 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: From 4a769a0366a499506a6cccf15f342dc829937567 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:40:44 +0200 Subject: [PATCH 399/429] 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 bebc2839..dd58b215 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/10-Your-Own-Font/README.es.md @@ -1,4 +1,4 @@ -# `10` Tu Propia Fuente +# `10` Your Own Font Aquí puedes encontrar las fuentes de Google: https://fonts.google.com From 8fd573cef0ba980e8cb54e809962d02965578bd7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:41:10 +0200 Subject: [PATCH 400/429] 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 2a78a9b0..d02884e6 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -1,4 +1,4 @@ -# `11` Iconos Font Awesome +# `11` 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". From 9c753856eeb73a7c87b0157f3decd87296f799db Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:42:14 +0200 Subject: [PATCH 401/429] Update README.es.md --- exercises/12-Relative-Length-EM-REM/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md index c6d63a40..a10a425d 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` 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. From 4e74ce9dae8df98f8646882dfa784e6f57210ca7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:43:31 +0200 Subject: [PATCH 402/429] Update README.md --- exercises/12-Relative-Length-EM-REM/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md index 6f2a2849..51613b62 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/12-Relative-Length-EM-REM/README.md @@ -12,9 +12,9 @@ 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: From 97e79f0a72282fb664d40ceb93ca7cfe2c45ac7c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:51:08 +0200 Subject: [PATCH 403/429] 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 257901be..d26f0fee 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,4 +1,4 @@ -# `13` Enlace (anchor) como botón +# `13` 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. From 7f0adc17ff1f9c5de84c2af07f000fca278f6e48 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 31 May 2023 22:52:33 +0200 Subject: [PATCH 404/429] 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 9b9fad4c..8a7b933e 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. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`). +3. The `background` should be `orange` when not hovered, and `darkorange` on hover (`:hover`). 4. Remove underline: set `text-decoration` to `none`. From c8af45c3b03be5a423d01dd6493c090cf5ceff5e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 7 Jun 2023 02:06:57 +0200 Subject: [PATCH 405/429] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 4441527f..1c02d510 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ 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: @@ -50,7 +50,7 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa ## Manual installation -1) Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+: +1) Install LearnPack, the package manager for learning tutorials and the node compiler plugin for LearnPack, make sure you also have node.js 14+: ```bash $ npm i learnpack -g @@ -67,7 +67,7 @@ $ learnpack install css-tutorial-exercises-course 3) Start the tutorial/exercises by running the following command at the same level where your learn.json file is: -```sh +```bash $ npm i jest@24.8.0 -g $ learnpack start ``` @@ -96,4 +96,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds 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 +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). From 01898b7cf50f3c08ced0a8c4c00a590c19260765 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 7 Jun 2023 02:08:44 +0200 Subject: [PATCH 406/429] Update README.es.md --- README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.es.md b/README.es.md index 275ba239..17bee608 100644 --- a/README.es.md +++ b/README.es.md @@ -48,14 +48,14 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co ## Instalación manual -1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 14+: +1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el node compiler plugin para LearnPack, asegúrate también de tener node.js 14+: ```bash $ npm i learnpack -g $ learnpack plugins:install learnpack-html ``` -2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta: +2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta: ```bash $ learnpack install css-tutorial-exercises-course @@ -65,7 +65,7 @@ $ learnpack install css-tutorial-exercises-course 3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json: -```sh +```bash $ npm i jest@24.8.0 -g $ learnpack start ``` From e93f8510014739b336b133594d9b5ca29a1cb609 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 7 Jun 2023 02:10:20 +0200 Subject: [PATCH 407/429] Update README.es.md --- README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.es.md b/README.es.md index 17bee608..f7d75634 100644 --- a/README.es.md +++ b/README.es.md @@ -94,5 +94,5 @@ Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds 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). +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 [Cursos 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). From b9b56a940044e8c9d199c9aa338a41e5e0babbe6 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Wed, 7 Jun 2023 17:14:58 -0400 Subject: [PATCH 408/429] Update README.es.md --- README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.es.md b/README.es.md index f7d75634..af01e354 100644 --- a/README.es.md +++ b/README.es.md @@ -48,7 +48,7 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co ## Instalación manual -1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el node compiler plugin para LearnPack, asegúrate también de tener node.js 14+: +1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+: ```bash $ npm i learnpack -g From 21eea0164b35b74b3d7d76db2e0305d2f6ec9086 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Wed, 7 Jun 2023 17:15:14 -0400 Subject: [PATCH 409/429] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1c02d510..3faa2308 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa ## Manual installation -1) Install LearnPack, the package manager for learning tutorials and the node compiler plugin for LearnPack, make sure you also have node.js 14+: +1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+: ```bash $ npm i learnpack -g From 3ee405bb7c03161b40fdbf1f6ae751cf2df3d2e1 Mon Sep 17 00:00:00 2001 From: Ernesto Gonzalez <60261375+UmiKami@users.noreply.github.com> Date: Thu, 8 Jun 2023 20:46:48 +0000 Subject: [PATCH 410/429] made test case insensitive --- exercises/07-Very-Specific-Rules/tests.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index aae1fa1b..4e1d6655 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -26,7 +26,7 @@ describe("All the styles should be applied", ()=>{ } let reg = new RegExp(/color:\sred\s!important\s;/gm) - expect(reg.test(color)).toBeTruthy(); + expect(reg.test(color.toLowerCase())).toBeTruthy(); }); test("The ol second element background should be green", ()=>{ @@ -44,6 +44,14 @@ describe("All the styles should be applied", ()=>{ } + if(background){ + background = background.toLowerCase() + } + + if(backgroundColor){ + backgroundColor = backgroundColor.toLowerCase() + } + } expect(background === 'green' || backgroundColor === 'green').toBeTruthy(); }) @@ -62,7 +70,7 @@ describe("All the styles should be applied", ()=>{ } - } expect(background === "yellow" || backgroundColor === "yellow").toBeTruthy(); + } expect(background.toLowerCase() === "yellow" || backgroundColor.toLowerCase() === "yellow").toBeTruthy(); }) test("Write all your rules above the existing code", ()=>{ From 2c79fd388305282af9849adee99bf69fec67c777 Mon Sep 17 00:00:00 2001 From: lorenagubaira <102861577+Lorenagubaira@users.noreply.github.com> Date: Tue, 13 Jun 2023 14:37:01 +0000 Subject: [PATCH 411/429] the instructions were updated --- README.es.md | 2 ++ README.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/README.es.md b/README.es.md index af01e354..77217f4a 100644 --- a/README.es.md +++ b/README.es.md @@ -48,6 +48,8 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co ## Instalación manual +Clona el repositorio en tu ambiente local y sigue los siguientes pasos: + 1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+: ```bash diff --git a/README.md b/README.md index 3faa2308..e1c6aafb 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa ## Manual installation +Clone the repository in your local environment and follow the steps below: + 1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+: ```bash From c4e17d0da0993f2884f4ddc383b9391b16c3a1b7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:17:52 +0200 Subject: [PATCH 412/429] 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 ece42bb9..be7ce829 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" # `07` Very Specific Rules -# Important: +## 🔍 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. @@ -21,6 +21,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) >Important: You should NOT modify the index.html file. -## :bulb: Hint: +## 💡 Hint: 1. The `!important` attribute helps to override other attributes. From b8cc519b58d971821ad7f2c40218cdf7358736d3 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:18:15 +0200 Subject: [PATCH 413/429] Update README.es.md --- exercises/07-Very-Specific-Rules/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index a0eaf6a2..42bf9827 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,6 +1,6 @@ # `07` Very Specific Rules -## Importante: +## 🔍 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. From a4d6e8b1529c1a9e3471d9d8d65b8020a77332cc Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:19:24 +0200 Subject: [PATCH 414/429] 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 8a7b933e..b5002e2f 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -18,6 +18,6 @@ Anchors are not only used within text: when you are going to use anchors outside 6. Inside of the `:hover` selector change the background of the button to `darkorange`. -## Expected result: +## 💻 Expected result: ![Example Image](../../.learn/assets/13-1.gif?raw=true) From 99bd50ac282cf7cc8cc4aa6fb2e842b749487a88 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:19:37 +0200 Subject: [PATCH 415/429] 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 d26f0fee..998e9ba7 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -20,6 +20,6 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así: 6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`. -## Resultado esperado: +## 💻 Resultado esperado: ![Example Image](../../.learn/assets/13-1.gif?raw=true) From cf08f7af6df41803f7aad55ddcedab658fc76dfc Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:43:30 +0200 Subject: [PATCH 416/429] Update README.es.md --- exercises/07-Very-Specific-Rules/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index 42bf9827..df781b9a 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,6 +1,6 @@ # `07` Very Specific Rules -## 🔍 Importante: +## 🔎 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. From 713eef2e99771ff4df30400cf6a526f207be5c94 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 14 Jun 2023 01:43:44 +0200 Subject: [PATCH 417/429] 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 be7ce829..72f38d2c 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" # `07` Very Specific Rules -## 🔍 Important: +## 🔎 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. From b5c3ee42c6f0ae877af33ac8740ff03d0a25d8d0 Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Wed, 14 Jun 2023 12:04:35 -0400 Subject: [PATCH 418/429] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1c6aafb..dd7457a9 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa ## Manual installation -Clone the repository in your local environment and follow the steps below: +[Clone the repository](https://4geeks.com/how-to/github-clone-repository) in your local environment and follow the steps below: 1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+: From 72571c72ca710838c7d98920bdfc1a84bfbdf923 Mon Sep 17 00:00:00 2001 From: Nancy Campbell <124710465+NJCampbell@users.noreply.github.com> Date: Thu, 29 Jun 2023 00:46:52 +0000 Subject: [PATCH 419/429] updated punctuation/grammar --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index dd7457a9..81cf2455 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,14 @@ -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. +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 `` tag, or using an external stylesheet ``. +1. How to apply CSS to your website in 3 different ways: inline, by grouping them together inside a `` tag, or by using an external stylesheet ``. 2. Selecting HTML Elements from your website to apply the styles to. @@ -35,7 +35,7 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really

Learn HTML

Learn HTML5 Forms
-
Learn CSS← 🔥 You are here now
+
Learn CSS← 🔥 You are here now!

Learn CSS Layouts

Learn Bootstrap

@@ -52,7 +52,7 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa [Clone the repository](https://4geeks.com/how-to/github-clone-repository) in your local environment and follow the steps below: -1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+: +1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack; make sure you also have node.js 14+: ```bash $ npm i learnpack -g From 92e54fb3c7e0e050afe6610c32c5ab77ce4a56f6 Mon Sep 17 00:00:00 2001 From: Ernesto Gonzalez <60261375+UmiKami@users.noreply.github.com> Date: Thu, 6 Jul 2023 19:01:20 +0000 Subject: [PATCH 420/429] fixed conditioonals in test to allow more possible solutions and be more flexible --- exercises/07-Very-Specific-Rules/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 4e1d6655..be39e38a 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -52,7 +52,7 @@ describe("All the styles should be applied", ()=>{ backgroundColor = backgroundColor.toLowerCase() } - } expect(background === 'green' || backgroundColor === 'green').toBeTruthy(); + } expect(background && background === 'green' || backgroundColor === 'green').toBeTruthy(); }) test("The odd rows of the table should have yellow background", ()=>{ @@ -64,13 +64,13 @@ describe("All the styles should be applied", ()=>{ let background = ""; let backgroundColor = ""; for (let i = 0; i < cssArray.length; i++) { - if (cssArray[i].selectorText === "tr:nth-child(odd)") { + if (cssArray[i].selectorText.includes( "tr:nth-child(odd)")) { background = cssArray[i].style['background']; backgroundColor = cssArray[i].style['background-color']; } - } expect(background.toLowerCase() === "yellow" || backgroundColor.toLowerCase() === "yellow").toBeTruthy(); + } expect(background && background.toLowerCase() === "yellow" || backgroundColor.toLowerCase() === "yellow").toBeTruthy(); }) test("Write all your rules above the existing code", ()=>{ From ba2b37d8bbc8f9a609c7aab9b9ef2a5e2f2b81fe Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Thu, 6 Jul 2023 17:08:26 -0400 Subject: [PATCH 421/429] Update tests.js --- exercises/07-Very-Specific-Rules/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index be39e38a..4d2bfb66 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -52,7 +52,7 @@ describe("All the styles should be applied", ()=>{ backgroundColor = backgroundColor.toLowerCase() } - } expect(background && background === 'green' || backgroundColor === 'green').toBeTruthy(); + } expect((background && background === 'green') || (backgroundColor && backgroundColor === 'green')).toBeTruthy(); }) test("The odd rows of the table should have yellow background", ()=>{ @@ -95,4 +95,4 @@ describe("All the styles should be applied", ()=>{ expect(title).toBeTruthy() }) -}); \ No newline at end of file +}); From 5aa891670ca8b26207823b0549d5894f9b9e7fec Mon Sep 17 00:00:00 2001 From: Tomas Gonzalez <56565994+tommygonzaleza@users.noreply.github.com> Date: Thu, 6 Jul 2023 17:09:03 -0400 Subject: [PATCH 422/429] Update tests.js --- exercises/07-Very-Specific-Rules/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 4d2bfb66..f141c357 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -70,7 +70,7 @@ describe("All the styles should be applied", ()=>{ } - } expect(background && background.toLowerCase() === "yellow" || backgroundColor.toLowerCase() === "yellow").toBeTruthy(); + } expect((background && background.toLowerCase() === "yellow") || (backgroundColor && backgroundColor.toLowerCase() === "yellow")).toBeTruthy(); }) test("Write all your rules above the existing code", ()=>{ From 289ff70fa9ae792ce9625127559e3d5980c0297e Mon Sep 17 00:00:00 2001 From: Broasdemilho <135333779+Broasdemilho@users.noreply.github.com> Date: Fri, 28 Jul 2023 19:19:58 +0100 Subject: [PATCH 423/429] Update index.html Gramatical error on line 29 what >> what's --- exercises/06-Practicing-Rules/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index acb133f5..8c0b2b50 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -26,7 +26,7 @@
3 reasons you love what you are learning

It's 12am and you don't want to go to sleep.

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

From d3a59ded3c20553e823f1d00c134433f5dd6988a Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 4 Aug 2023 13:23:19 -0400 Subject: [PATCH 424/429] 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 9942f66b..fa719874 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.20 -g && learnpack plugins:install learnpack-html@0.0.20" + "onCreateCommand": "npm i jest@24.8.0 -g && npm i @learnpack/learnpack@2.1.26 -g && learnpack plugins:install learnpack-html@0.0.20" // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", From 1aa26fd7fda3ffc2573b35fa168e089508c2dca9 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 4 Aug 2023 13:23:30 -0400 Subject: [PATCH 425/429] Update .gitpod.Dockerfile --- .gitpod.Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile index 8409faba..c303edbf 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@0.0.20 +RUN npm i @learnpack/learnpack@2.1.26 -g && learnpack plugins:install learnpack-html@0.0.20 From baefe365ab972b59b3330334a51a7a6048ecb687 Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Fri, 22 Sep 2023 21:34:51 -0400 Subject: [PATCH 426/429] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dd7457a9..3f84ce08 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,6 @@ 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). + From 736bb0786aad102ee1bcab05fe81a64e130649ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Khrise=20Franchesca=20Zegarra=20Mu=C3=B1oz?= <129009072+Khrisefzm@users.noreply.github.com> Date: Thu, 21 Dec 2023 18:48:31 +0000 Subject: [PATCH 427/429] change last part of the test.js to acept everithing that ends with #thirditem --- exercises/05-Specificity/styles.css | 1 + exercises/05-Specificity/tests.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index 1255fbbc..7aa5babf 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -6,3 +6,4 @@ li + #thirditem { background: yellow; } /**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ + diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index 2323ce24..8d8f9fc3 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -43,7 +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" || cssArray[i].style._importants["background-color"] === "important") { + // here is the problem, the only selector acepted is #thirditem so if you read li + #thirditem or li #thirditem or li + #thirditem is not acepted + if (cssArray[i].selectorText.endsWith("#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 6b196081256b4d3f451dc87c1ee49e6f95ecbc53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Khrise=20Franchesca=20Zegarra=20Mu=C3=B1oz?= <129009072+Khrisefzm@users.noreply.github.com> Date: Thu, 21 Dec 2023 18:51:57 +0000 Subject: [PATCH 428/429] delete comment --- exercises/05-Specificity/styles.css | 1 - exercises/05-Specificity/tests.js | 1 - 2 files changed, 2 deletions(-) diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index 7aa5babf..1255fbbc 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -6,4 +6,3 @@ li + #thirditem { background: yellow; } /**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ - diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index 8d8f9fc3..3ea381ec 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -43,7 +43,6 @@ describe("All the styles should be applied", function () { let cssArray = document.styleSheets[0].cssRules; let orangeHoverSelector = ""; for (let i = 0; i < cssArray.length; i++) { - // here is the problem, the only selector acepted is #thirditem so if you read li + #thirditem or li #thirditem or li + #thirditem is not acepted if (cssArray[i].selectorText.endsWith("#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 1916a2a54ffb3b4895c3e5c053acbb31d276c35c Mon Sep 17 00:00:00 2001 From: Alejandro Sanchez Date: Thu, 1 Feb 2024 23:24:09 +0000 Subject: [PATCH 429/429] added new exercise and update first step to make it about inline styles --- .../README.es.md | 5 ++- exercises/00.1-Inline-Styles/README.md | 37 ++++++++++++++++ .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 .../README.es.md | 0 .../README.md | 6 +-- .../index.html | 0 .../solution.hide.html | 0 .../{01-Hello-World => 01-Style-tag}/test.js | 0 .../README.es.md | 0 .../README.md | 0 .../index.html | 0 .../solution.hide.html | 0 .../test.js | 0 .../README.es.md | 0 .../README.md | 0 .../index.html | 0 .../solution.hide.html | 0 .../tests.js | 0 exercises/03-Inline-Styles/README.md | 28 ------------ exercises/03-list-styling/README.es.md | 29 +++++++++++++ exercises/03-list-styling/README.md | 36 ++++++++++++++++ exercises/03-list-styling/index.html | 43 +++++++++++++++++++ exercises/03-list-styling/styles.css | 14 ++++++ exercises/03-list-styling/test.js | 42 ++++++++++++++++++ 26 files changed, 208 insertions(+), 32 deletions(-) rename exercises/{03-Inline-Styles => 00.1-Inline-Styles}/README.es.md (63%) create mode 100644 exercises/00.1-Inline-Styles/README.md rename exercises/{03-Inline-Styles => 00.1-Inline-Styles}/index.html (100%) rename exercises/{03-Inline-Styles => 00.1-Inline-Styles}/solution.hide.html (100%) rename exercises/{03-Inline-Styles => 00.1-Inline-Styles}/tests.js (100%) rename exercises/{01-Hello-World => 01-Style-tag}/README.es.md (100%) rename exercises/{01-Hello-World => 01-Style-tag}/README.md (66%) rename exercises/{01-Hello-World => 01-Style-tag}/index.html (100%) rename exercises/{01-Hello-World => 01-Style-tag}/solution.hide.html (100%) rename exercises/{01-Hello-World => 01-Style-tag}/test.js (100%) rename exercises/{01.1-The-Style-Tag => 01.1-Add-a-style-tag}/README.es.md (100%) rename exercises/{01.1-The-Style-Tag => 01.1-Add-a-style-tag}/README.md (100%) rename exercises/{01.1-The-Style-Tag => 01.1-Add-a-style-tag}/index.html (100%) rename exercises/{01.1-The-Style-Tag => 01.1-Add-a-style-tag}/solution.hide.html (100%) rename exercises/{01.1-The-Style-Tag => 01.1-Add-a-style-tag}/test.js (100%) rename exercises/{01.2-Your-First-Style => 01.2-RGBA-colors}/README.es.md (100%) rename exercises/{01.2-Your-First-Style => 01.2-RGBA-colors}/README.md (100%) rename exercises/{01.2-Your-First-Style => 01.2-RGBA-colors}/index.html (100%) rename exercises/{01.2-Your-First-Style => 01.2-RGBA-colors}/solution.hide.html (100%) rename exercises/{01.2-Your-First-Style => 01.2-RGBA-colors}/tests.js (100%) delete mode 100644 exercises/03-Inline-Styles/README.md create mode 100644 exercises/03-list-styling/README.es.md create mode 100644 exercises/03-list-styling/README.md create mode 100644 exercises/03-list-styling/index.html create mode 100644 exercises/03-list-styling/styles.css create mode 100644 exercises/03-list-styling/test.js diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/00.1-Inline-Styles/README.es.md similarity index 63% rename from exercises/03-Inline-Styles/README.es.md rename to exercises/00.1-Inline-Styles/README.es.md index 6f9ca2d7..5ffacaac 100644 --- a/exercises/03-Inline-Styles/README.es.md +++ b/exercises/00.1-Inline-Styles/README.es.md @@ -1,6 +1,9 @@ # `03` Inline Styles -Los estilos `inline` (estilos en línea) son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento. + +CSS trata sobre agregar estilos (styles) y diseños a tus etiquetas y elementos HTML. + +Como siempre en la vida, hay varias formas de aplicar estilos: Utilizar "inline styles" o "estilos en linea" es una manera inicialmente sencillas de hacerlo, pero no se recomienda porque termina siendo mas compleja mas adelante. Sin embargo, vamos a mostrarte algunos ejemplos porque es un conocimiento que debes manejar y todavia se utiliza en algunos casos como los correos electrónicos. Para usar estilos inline, en lugar de declarar una etiqueta `` en el `` del documento, debes establecer el atributo `style` de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico. diff --git a/exercises/00.1-Inline-Styles/README.md b/exercises/00.1-Inline-Styles/README.md new file mode 100644 index 00000000..aadb140d --- /dev/null +++ b/exercises/00.1-Inline-Styles/README.md @@ -0,0 +1,37 @@ +--- +tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" +--- +# `01` Hello World in CSS + +CSS is about adding styles to our HTML elements. + +The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this: + +```HTML +Go to google +``` + +This will set the text color of the link above to red, and the font size to 14 pixels. + +In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it. + +To apply styles you always have to follow thеse steps: + +1. Read the HTML and pick what element you want to decorate to apply CSS to it. +2. Apply the style with the `style` attribute as above. + +That is it! The rest is just semantics! 😁 + + +## 📝 Instructions + +1. Within the `index.html` file, create the basic structure of an html page with the appropriate ``, `` and `` tags. +2. Inside of the body of the page, create an `
` tag that reads "HELLO WORLD!!!". +1. Set an inline style to change the text color of the tag to `color: orangered` and give it a solid red border of 1px. + + +### 💡 Hint: + +- A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in VSCode. +- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp +- For this exercise, do NOT use `styles.css` file or `` tag. diff --git a/exercises/03-Inline-Styles/index.html b/exercises/00.1-Inline-Styles/index.html similarity index 100% rename from exercises/03-Inline-Styles/index.html rename to exercises/00.1-Inline-Styles/index.html diff --git a/exercises/03-Inline-Styles/solution.hide.html b/exercises/00.1-Inline-Styles/solution.hide.html similarity index 100% rename from exercises/03-Inline-Styles/solution.hide.html rename to exercises/00.1-Inline-Styles/solution.hide.html diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/00.1-Inline-Styles/tests.js similarity index 100% rename from exercises/03-Inline-Styles/tests.js rename to exercises/00.1-Inline-Styles/tests.js diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Style-tag/README.es.md similarity index 100% rename from exercises/01-Hello-World/README.es.md rename to exercises/01-Style-tag/README.es.md diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Style-tag/README.md similarity index 66% rename from exercises/01-Hello-World/README.md rename to exercises/01-Style-tag/README.md index 5e4caa58..d146fc05 100644 --- a/exercises/01-Hello-World/README.md +++ b/exercises/01-Style-tag/README.md @@ -5,11 +5,11 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" CSS is about styles. To apply styles you always have to follow these steps: -1. Read the HTML and pick what element you want to decorate or apply styles to. +1. Read the HTML and pick what element (tag) you want to decorate or apply styles to. -2. Programmatically select the element you want to style using CSS Selectors. +2. Programmatically select the element you want to style using [CSS Selectors](https://4geeks.com/lesson/what-is-css-learn-css#wait-what-is-a-selector). -3. Write the styling that you want by using CSS rules. +3. Write the styling that you want by using [CSS property rules](https://4geeks.com/lesson/what-is-css-learn-css#properties). That is it! The rest is just semantics! 😁 diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Style-tag/index.html similarity index 100% rename from exercises/01-Hello-World/index.html rename to exercises/01-Style-tag/index.html diff --git a/exercises/01-Hello-World/solution.hide.html b/exercises/01-Style-tag/solution.hide.html similarity index 100% rename from exercises/01-Hello-World/solution.hide.html rename to exercises/01-Style-tag/solution.hide.html diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Style-tag/test.js similarity index 100% rename from exercises/01-Hello-World/test.js rename to exercises/01-Style-tag/test.js diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-Add-a-style-tag/README.es.md similarity index 100% rename from exercises/01.1-The-Style-Tag/README.es.md rename to exercises/01.1-Add-a-style-tag/README.es.md diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-Add-a-style-tag/README.md similarity index 100% rename from exercises/01.1-The-Style-Tag/README.md rename to exercises/01.1-Add-a-style-tag/README.md diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-Add-a-style-tag/index.html similarity index 100% rename from exercises/01.1-The-Style-Tag/index.html rename to exercises/01.1-Add-a-style-tag/index.html diff --git a/exercises/01.1-The-Style-Tag/solution.hide.html b/exercises/01.1-Add-a-style-tag/solution.hide.html similarity index 100% rename from exercises/01.1-The-Style-Tag/solution.hide.html rename to exercises/01.1-Add-a-style-tag/solution.hide.html diff --git a/exercises/01.1-The-Style-Tag/test.js b/exercises/01.1-Add-a-style-tag/test.js similarity index 100% rename from exercises/01.1-The-Style-Tag/test.js rename to exercises/01.1-Add-a-style-tag/test.js diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-RGBA-colors/README.es.md similarity index 100% rename from exercises/01.2-Your-First-Style/README.es.md rename to exercises/01.2-RGBA-colors/README.es.md diff --git a/exercises/01.2-Your-First-Style/README.md b/exercises/01.2-RGBA-colors/README.md similarity index 100% rename from exercises/01.2-Your-First-Style/README.md rename to exercises/01.2-RGBA-colors/README.md diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-RGBA-colors/index.html similarity index 100% rename from exercises/01.2-Your-First-Style/index.html rename to exercises/01.2-RGBA-colors/index.html diff --git a/exercises/01.2-Your-First-Style/solution.hide.html b/exercises/01.2-RGBA-colors/solution.hide.html similarity index 100% rename from exercises/01.2-Your-First-Style/solution.hide.html rename to exercises/01.2-RGBA-colors/solution.hide.html diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-RGBA-colors/tests.js similarity index 100% rename from exercises/01.2-Your-First-Style/tests.js rename to exercises/01.2-RGBA-colors/tests.js diff --git a/exercises/03-Inline-Styles/README.md b/exercises/03-Inline-Styles/README.md deleted file mode 100644 index 456fa209..00000000 --- a/exercises/03-Inline-Styles/README.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI" ---- - -# `03` Inline Styles - -`Inline` styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use it at some point. - -To use inline styles, instead of declaring a `` tag in the `` of the document, you have to set the `style` attribute of any element with the CSS code you need to apply to that specific element. - -For example: - -```html -Go to google -``` - -Will set the color of that specific link to red and the font-size to 14px - -*You can append as many CSS rules as you want, within the same line, separated by a semicolon.* - -## 📝 Instructions: - -1. Set an inline style to change the background color of the table to green. For this exercise, do NOT use styles.css :( - - -### 💡 Hint: - -- How to use the background-color: https://www.w3schools.com/cssref/pr_background-color.php diff --git a/exercises/03-list-styling/README.es.md b/exercises/03-list-styling/README.es.md new file mode 100644 index 00000000..e9fd849b --- /dev/null +++ b/exercises/03-list-styling/README.es.md @@ -0,0 +1,29 @@ +# `03` Estilo de listas + +En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `
`, para listas desordenadas o con viñetas, y las etiquetas `
` para listas ordenadas o numeradas. + +Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc. + +Por ejemplo: + +```HTML +ul { + list-style-type: none; + margin: 0; + padding: 0; +} +``` + +Eliminará los números o viñetas y moverá el texto hacia la izquierda para que no haya espacio vacío donde una vez estuvieron las viñetas. + +**Nota:** + +Construye el código existente primero para ver cómo se ve originalmente la página. +Luego, realiza los cambios a continuación y construye de nuevo. + +## 📝 Instrucciones: + +1. Convierte los números de las bebidas Coca Cola en letras minúsculas. +2. Convierte los números de las bebidas Pepsi en viñetas cuadradas. +3. Convierte las viñetas de las bebidas Saludables en números armenios. :) +4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks. diff --git a/exercises/03-list-styling/README.md b/exercises/03-list-styling/README.md new file mode 100644 index 00000000..76d5b0cb --- /dev/null +++ b/exercises/03-list-styling/README.md @@ -0,0 +1,36 @@ +# `03` List styling + +In the front end we often have to list items and the way to do that is with `
` tags, for unordered/bulleted lists, and `
` tags for ordered/numbered lists. + +We have CSS control over what these lists look like, what bullets or numbers they use, etc. + +For example: + +```HTML + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +``` + +Will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. + +**Note:** + +Build the existing code first to see what the page originally looks like. +Then make the changes below and build again. + +## 📝 Instructions: + + +1. Make the Coca Cola drink numbers into lower case letters. +2. Make the Pepsi drink numbers into square bullets. +3. Make the Healthy drink bullets into Armenian numbers. :) +4. Completely remove the bullets and extra spacing from the Web-developer drinks. + +### 💡 Hint: + +- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp +- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the html tags may be necessary. +- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp \ No newline at end of file diff --git a/exercises/03-list-styling/index.html b/exercises/03-list-styling/index.html new file mode 100644 index 00000000..f2da1ba2 --- /dev/null +++ b/exercises/03-list-styling/index.html @@ -0,0 +1,43 @@ + + + + + + + + 03 List styling + + + +
+
Your favorite drinks
+
Coca Cola drinks
+
+
Coca Cola
+
Dr. Pepper
+
Fanta
+
+ +
Pepsi drinks
+
+
Pepsi Cola
+
Mountain Dew
+
Gatorade
+
+ +
Healthy drinks
+
+
Kombucha
+
Kale juice
+
Sparkling Water
+
+ +
Web-developer drinks
+
+
Coffee
+
COFFEE
+
COFFEE!!!
+
+
+ + \ No newline at end of file diff --git a/exercises/03-list-styling/styles.css b/exercises/03-list-styling/styles.css new file mode 100644 index 00000000..124c5174 --- /dev/null +++ b/exercises/03-list-styling/styles.css @@ -0,0 +1,14 @@ +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; +} \ No newline at end of file diff --git a/exercises/03-list-styling/test.js b/exercises/03-list-styling/test.js new file mode 100644 index 00000000..c8939872 --- /dev/null +++ b/exercises/03-list-styling/test.js @@ -0,0 +1,42 @@ +const fs=require("fs"); +const path=require("path"); +const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); + +jest.dontMock("fs"); + +describe("The lists should be modified accordingly", function() { + beforeEach(() => { + //here I import the HTML into the document + document.documentElement.innerHTML = html.toString(); + }); + afterEach(() => { + jest.resetModules(); + }); + + it("You should not change the existing head tag elements", function () { + let head = document.querySelector('head'); + let title = head.querySelector('title').innerHTML; + + expect(title).toBe('03 List styling') + }) + + // Test in progress: + // it("The lists should be correctly styled", function() { + // const uls = document.querySelectorAll("ul"); + // const ols = document.querySelectorAll("ol"); + // console.log(uls); + // console.log(ols); + + // var style1 = window.getComputedStyle(ols[0]); + // var style2 = window.getComputedStyle(uls[0]); + // var style3 = window.getComputedStyle(ols[1]); + // var style4 = window.getComputedStyle(uls[1]); + + + // expect(style1["listStyleType"]).toBe("lower-alpha"); + // expect(style2["listStyleType"]).toBe("square"); + // expect(style3["listStyleType"]).toBe("armenian"); + // expect(style4["listStyleType"]).toBe("none"); + + // }); +}); \ No newline at end of file

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

Your favorite drinks

Coca Cola drinks

Pepsi drinks

Healthy drinks

Web-developer drinks