4GeeksAcademy · alesanchezr · Aug 12, 2019 · Aug 1, 2019 · Aug 1, 2019 · Aug 1, 2019
diff --git a/bc.json b/bc.json
@@ -1,3 +1,3 @@
 {
   "compiler": "vanillajs"
-}
+}
diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md
@@ -1,3 +1,9 @@
 # Welcome!!
 
-Here are the CSS Excercises
+Here are the CSS Excercises
+
+Hello. We are very excited to have you here !! 🎉 😂
+
+During this course you will be learning the following concepts:
+
+As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what is CSS all about! Learn CSS to make your website beautiful. Let's make it shine!
diff --git a/exercises/01-Your-First-Style/README.md b/exercises/01-Your-First-Style/README.md
@@ -0,0 +1,17 @@
+# `01` Your First Style
+
+## 📝 Instructions:
+
+```Plain/Text
+1. Add the <style> tag inside of the <head> tag and add the following code to the <style> content.
+```
+
+## Example:
+
+```css
+body {
+  background: blue;
+}
+```
+
+Run the exercise and your result should be a blue body of the page (the whole page blue).
diff --git a/exercises/01-Your-First-Style/index.html b/exercises/01-Your-First-Style/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>01 Your First Style</title>
+  </head>
+  <body></body>
+</html>
diff --git a/exercises/01-Your-First-Style/index.js b/exercises/01-Your-First-Style/index.js
diff --git a/exercises/01-Your-First-Style/tests.js b/exercises/01-Your-First-Style/tests.js
@@ -0,0 +1,28 @@
+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();
+  });
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  it("The background should be blue", function() {
+    const body = document.querySelector("body");
+    var styles = window.getComputedStyle(body);
+    expect(styles["background"]).toBe("blue");
+  });
+  it("The body tag should not contains any inline style", function() {
+    let bodyInlineStyle = document.getElementsByTagName("body");
+    let emptyBodyInlineStyle = {};
+    expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
+    // console.log(bodyInlineStyle[0].style._values.background);
+  });
+});
diff --git a/exercises/01-hello-world/README.md b/exercises/01-hello-world/README.md
diff --git a/exercises/01-hello-world/styles.css b/exercises/01-hello-world/styles.css
diff --git a/exercises/01-hello-world/tests.js b/exercises/01-hello-world/tests.js
diff --git a/exercises/02-Background/README.md b/exercises/02-Background/README.md
@@ -0,0 +1,19 @@
+# `02` Background
+
+The "background" CSS rule allows us to assign and work with the background of any container. The background can be a color or an image. If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified.
+
+## 📝 Instructions:
+
+```plain/text
+1.  Build the exercise.
+2.  Check the Preview.
+3.  Change the background-size to 'contain' (check the styles.css tab).
+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.
+6.  Build and Preview the exercise again.
+```
+
+Hint:
+
+- How to use the background-size: http://lmgtfy.com/?q=css+background-size
+- How to use the background-repeat: http://lmgtfy.com/?q=css+background-repeat
diff --git a/exercises/02-Background/index.html b/exercises/02-Background/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <title>02 Background</title>
+  </head>
+  <body></body>
+</html>
diff --git a/exercises/01-hello-world/index.js → exercises/02-Background/index.js b/exercises/01-hello-world/index.js → exercises/02-Background/index.js
diff --git a/exercises/02-Background/styles.css b/exercises/02-Background/styles.css
@@ -0,0 +1,5 @@
+body {
+	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+}
diff --git a/exercises/02-Background/tests.js b/exercises/02-Background/tests.js
@@ -0,0 +1,49 @@
+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=`<style>${css.toString()}</style>`;
+
+
+  });
+  afterEach(() => {
+    jest.resetModules();
+  });
+  it("The body tag should not contains any inline style", function () {
+    let bodyInlineStyle=document.getElementsByTagName("body");
+    let emptyBodyInlineStyle={};
+    expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
+    // expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
+    //   undefined
+    // );
+
+    console.log(bodyInlineStyle[0].style._values);
+  });
+  it("The Head tag should not includes a Style tag", function () {
+    expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
+  });
+  it("the background-size should be 'contain'", function () {
+    // get computed styles of any element you like
+    const body=document.querySelector("body");
+    let styles=window.getComputedStyle(body);
+    expect(styles["background-size"]).toBe("contain");
+  });
+
+  it("the background-repeat should be 'no-repeat'", function () {
+
+    const body=document.querySelector("body");
+    let styles=window.getComputedStyle(body);
+    expect(styles["background-repeat"]).toBe("inherit");
+  });
+});
diff --git a/exercises/03-Inline-Styles/README.md b/exercises/03-Inline-Styles/README.md
@@ -0,0 +1,25 @@
+# `03` Inline Styles
+
+Inline styles are a very bad idea unless you have no choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because there is a chance you will need to use them at some point.
+
+To use inline styles, instead of declaring a <style> tag in the header 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
+<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
+```
+
+Will set the color of that specific link to red and the font-size to 14px
+
+Note: You can append as many CSS rules as you want, within the same line, separated by semi-colon.
+
+## 📝 Instructions:
+
+```Plain/Text
+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-size: http://lmgtfy.com/?q=css+inline+style
diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <title>03 Inline Styles</title>
+  </head>
+
+  <body>
+    <table style="background: green;">
+      <tr>
+        <td>Hello</td>
+      </tr>
+      <tr>
+        <td>My brother</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/exercises/03-Inline-Styles/index.js b/exercises/03-Inline-Styles/index.js
@@ -0,0 +1 @@
+//nothing to see here
diff --git a/exercises/03-Inline-Styles/styles.css b/exercises/03-Inline-Styles/styles.css
diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js
@@ -0,0 +1,29 @@
+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("The Table tag should contain inline style background: green", function() {
+  beforeEach(() => {
+    //here I import the HTML into the document
+    document.documentElement.innerHTML = html.toString();
+  });
+  afterEach(() => {
+    jest.resetModules();
+  });
+  it("The styles.css file should be empty", function() {
+    expect(css.toString() === "").toBeTruthy();
+  });
+  it("The Head tag should not includes a Style tag", function() {
+    expect(html.toString().indexOf(`<style`) > -1).toBeFalsy();
+  });
+
+  it("The background should be green", function() {
+    const table = document.querySelector("table");
+    // expect(table.style.background === "green").toBeTruthy();
+    var styles = window.getComputedStyle(table);
+    expect(styles["background"]).toBe("green");
+  });
+});
diff --git a/exercises/04-Combined-Rules/README.md b/exercises/04-Combined-Rules/README.md
@@ -0,0 +1,33 @@
+# `04` Combined Rules
+
+CSS files take space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why is important to keep the CSS document as small as possible.
+
+One way to do that is by combining several properties into one such as with "border":
+
+```css
+border-color: black;
+border-style: solid;
+border-width: 1px;
+```
+
+Border's properties can be consolidated into a single line as:
+
+```css
+border: black 1px solid;
+```
+
+# 📝 Instructions:
+
+```Plain/Text
+1. Combine the 4 padding rules into just one using the "padding:" rule.
+2. Combine the all background rules, but the background size, into just one line using the "background:" rule.
+
+
+```
+
+P.S: The background size cannot be combined, the browsers don't support it yet.\*\*
+
+# Hint:
+
+- How to use the background-size: http://lmgtfy.com/?q=css+background
+- How to use the background-size: http://lmgtfy.com/?q=css+padding
diff --git a/exercises/04-Combined-Rules/index.html b/exercises/04-Combined-Rules/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <title>
+      04 Combined Rules
+    </title>
+    <style>
+      /* Your code here */
+      .myBox {
+        width: 50px;
+        height: 50px;
+        padding-top: 10px;
+        padding-left: 30px;
+        padding-right: 190px;
+        padding-bottom: 50px;
+
+        background: rgb(189, 189, 189);
+        background-image: url(https://assets.breatheco.de/img/funny/scared-baby.jpg);
+        background-position-x: 100px;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="myBox">Hello!</div>
+  </body>
+</html>
diff --git a/exercises/04-Combined-Rules/index.js b/exercises/04-Combined-Rules/index.js
@@ -0,0 +1 @@
+//nothing to see here
diff --git a/exercises/04-Combined-Rules/styles.css b/exercises/04-Combined-Rules/styles.css