+

The learning essay

+

3 reasons you know 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. +

+

+
1. You are able to complete the exercises by yourself.
+
2. You understand what the teacher is talking about.
+
3. You are able to have conversations about the topic.
+

+

3 reasons you love what you are learning

+

+
• Time passes fast.
+
• 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? + click here +

+

+

First h2 heading

+

First h3 heading

+

Here is some nice fake content

+

+

Second h2 heading

+

Second h3 heading

+

More fake content but now in the second container

+

The learning essay

diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index 9a7fae86..4026152e 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,25 @@ /* add your styles here */ +body { + background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y; + font-family: "Times New Roman"; + padding-left: 20px; +} + +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px; +} + +h1 { + font-family: "Courier"; + color: red; +} + +h2 { + text-decoration: underline; +} + +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 164b694b..232aa480 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,6 +1,18 @@ /** Insert your code here **/ -/********** READ-ONLY BLOCK ****** +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 these lines **/ diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..86a38c22 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -2,5 +2,9 @@ body { background: #bdbdbd; } .rounded { + object-fit: cover; + object-position: top; + width: 250px; + height: 250px; border-radius: 100%; } diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 895dc3d6..8c12ea5b 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -1,4 +1,3 @@ - .threeDimension { display: block; border: 1px solid; @@ -13,5 +12,5 @@ a.threeDimension:active { /* your code here*/ - + border-color: #000 #aaa #aaa #000; } diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index b4005187..eeb1c059 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -4,8 +4,13 @@ - + + + diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index 0335a322..85e3a7c3 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,4 @@ .myTitle { /* Add your code below this line */ + font-family: "Montserrat"; /* Varies depending on the font you chose */ } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index 1401d5da..8ecd7134 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -9,7 +9,9 @@

-
• Hello
+
• Hello
+
• Hello
+
• Hello

diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index b481bcfc..1401d5da 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -1,38 +1,15 @@ -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 icons = document.querySelectorAll("i"); - test("The

tag should exist", ()=>{ - expect(document.querySelector("ul")).toBeTruthy(); - }); - test("At least 3
• tags should exist", ()=>{ - expect(document.querySelectorAll("li").length).toBe(3); - }); - test("At least 3 tags should exist", ()=>{ - expect(document.querySelectorAll("i").length).toBe(3); - }); - 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 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(); - - icons.forEach(icon=>{ - let hasFa = icon.classList.toString().includes("fa-") - expect(hasFa).toBeTruthy(); - }) - }); -}); + + + + + + + + + + +
  +
  • Hello
  +
  + + diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/12-Relative-Length-EM-REM/index.html index f4d745fd..dd84e5cb 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/12-Relative-Length-EM-REM/index.html @@ -12,7 +12,7 @@

  First h2 heading

  First h3 heading

  Here is some nice fake content