Skip to content

Commit 0ad94b4

Browse files
alesanchezralesanchezr
authored
Merge pull request #1 from plucodev/master
CSS Exercises
2 parents 2da0141 + 3326526 commit 0ad94b4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1422
-83
lines changed

‎bc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
22
"compiler": "vanillajs"
3-
}
3+
}

‎exercises/00-Welcome/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
# Welcome!!
22

3-
Here are the CSS Excercises
3+
Here are the CSS Excercises
4+
5+
Hello. We are very excited to have you here !! 🎉 😂
6+
7+
During this course you will be learning the following concepts:
8+
9+
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!

‎exercises/01-Your-First-Style/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# `01` Your First Style
2+
3+
## 📝 Instructions:
4+
5+
```Plain/Text
6+
1. Add the <style> tag inside of the <head> tag and add the following code to the <style> content.
7+
```
8+
9+
## Example:
10+
11+
```css
12+
body {
13+
background: blue;
14+
}
15+
```
16+
17+
Run the exercise and your result should be a blue body of the page (the whole page blue).

‎exercises/01-Your-First-Style/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>01 Your First Style</title>
7+
</head>
8+
<body></body>
9+
</html>

‎exercises/01-Your-First-Style/index.js

Whitespace-only changes.

‎exercises/01-Your-First-Style/tests.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const fs = require("fs");
2+
const path = require("path");
3+
const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4+
// const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
6+
jest.dontMock("fs");
7+
8+
describe("All the styles should be applied", function() {
9+
beforeEach(() => {
10+
//here I import the HTML into the document
11+
document.documentElement.innerHTML = html.toString();
12+
});
13+
afterEach(() => {
14+
jest.resetModules();
15+
});
16+
17+
it("The background should be blue", function() {
18+
const body = document.querySelector("body");
19+
var styles = window.getComputedStyle(body);
20+
expect(styles["background"]).toBe("blue");
21+
});
22+
it("The body tag should not contains any inline style", function() {
23+
let bodyInlineStyle = document.getElementsByTagName("body");
24+
let emptyBodyInlineStyle = {};
25+
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
26+
// console.log(bodyInlineStyle[0].style._values.background);
27+
});
28+
});

‎exercises/01-hello-world/README.md

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎exercises/01-hello-world/styles.css

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/01-hello-world/tests.js

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎exercises/02-Background/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# `02` Background
2+
3+
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.
4+
5+
## 📝 Instructions:
6+
7+
```plain/text
8+
1. Build the exercise.
9+
2. Check the Preview.
10+
3. Change the background-size to 'contain' (check the styles.css tab).
11+
4. Build and Preview the exercise again.
12+
5. Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis.
13+
6. Build and Preview the exercise again.
14+
```
15+
16+
Hint:
17+
18+
- How to use the background-size: http://lmgtfy.com/?q=css+background-size
19+
- How to use the background-repeat: http://lmgtfy.com/?q=css+background-repeat

‎exercises/02-Background/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<title>02 Background</title>
8+
</head>
9+
<body></body>
10+
</html>

‎exercises/01-hello-world/index.js renamed to ‎exercises/02-Background/index.js

File renamed without changes.

‎exercises/02-Background/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
3+
background-size: cover;
4+
background-repeat: no-repeat;
5+
}

‎exercises/02-Background/tests.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const fs=require("fs");
2+
const path=require("path");
3+
const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4+
const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
6+
jest.dontMock("fs");
7+
8+
describe("All the styles should be applied", function () {
9+
beforeEach(() => {
10+
//here I import the HTML into the document
11+
document.documentElement.innerHTML=html.toString();
12+
13+
//apply the styles from the stylesheet if needed
14+
document.querySelector(
15+
"head"
16+
).innerHTML=`<style>${css.toString()}</style>`;
17+
18+
19+
});
20+
afterEach(() => {
21+
jest.resetModules();
22+
});
23+
it("The body tag should not contains any inline style", function () {
24+
let bodyInlineStyle=document.getElementsByTagName("body");
25+
let emptyBodyInlineStyle={};
26+
expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
27+
// expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
28+
// undefined
29+
// );
30+
31+
console.log(bodyInlineStyle[0].style._values);
32+
});
33+
it("The Head tag should not includes a Style tag", function () {
34+
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
35+
});
36+
it("the background-size should be 'contain'", function () {
37+
// get computed styles of any element you like
38+
const body=document.querySelector("body");
39+
let styles=window.getComputedStyle(body);
40+
expect(styles["background-size"]).toBe("contain");
41+
});
42+
43+
it("the background-repeat should be 'no-repeat'", function () {
44+
45+
const body=document.querySelector("body");
46+
let styles=window.getComputedStyle(body);
47+
expect(styles["background-repeat"]).toBe("inherit");
48+
});
49+
});

‎exercises/03-Inline-Styles/README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# `03` Inline Styles
2+
3+
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.
4+
5+
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.
6+
7+
For example:
8+
9+
```html
10+
<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
11+
```
12+
13+
Will set the color of that specific link to red and the font-size to 14px
14+
15+
Note: You can append as many CSS rules as you want, within the same line, separated by semi-colon.
16+
17+
## 📝 Instructions:
18+
19+
```Plain/Text
20+
1. Set an inline style to change the background color of the table to green. For this exercise, do NOT use styles.css :(
21+
```
22+
23+
### Hint:
24+
25+
- How to use the background-size: http://lmgtfy.com/?q=css+inline+style

‎exercises/03-Inline-Styles/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<title>03 Inline Styles</title>
8+
</head>
9+
10+
<body>
11+
<table style="background: green;">
12+
<tr>
13+
<td>Hello</td>
14+
</tr>
15+
<tr>
16+
<td>My brother</td>
17+
</tr>
18+
</table>
19+
</body>
20+
</html>

‎exercises/03-Inline-Styles/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//nothing to see here

‎exercises/03-Inline-Styles/styles.css

Whitespace-only changes.

‎exercises/03-Inline-Styles/tests.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const fs = require("fs");
2+
const path = require("path");
3+
const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4+
const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5+
6+
jest.dontMock("fs");
7+
8+
describe("The Table tag should contain inline style background: green", function() {
9+
beforeEach(() => {
10+
//here I import the HTML into the document
11+
document.documentElement.innerHTML = html.toString();
12+
});
13+
afterEach(() => {
14+
jest.resetModules();
15+
});
16+
it("The styles.css file should be empty", function() {
17+
expect(css.toString() === "").toBeTruthy();
18+
});
19+
it("The Head tag should not includes a Style tag", function() {
20+
expect(html.toString().indexOf(`<style`) > -1).toBeFalsy();
21+
});
22+
23+
it("The background should be green", function() {
24+
const table = document.querySelector("table");
25+
// expect(table.style.background === "green").toBeTruthy();
26+
var styles = window.getComputedStyle(table);
27+
expect(styles["background"]).toBe("green");
28+
});
29+
});

‎exercises/04-Combined-Rules/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# `04` Combined Rules
2+
3+
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.
4+
5+
One way to do that is by combining several properties into one such as with "border":
6+
7+
```css
8+
border-color: black;
9+
border-style: solid;
10+
border-width: 1px;
11+
```
12+
13+
Border's properties can be consolidated into a single line as:
14+
15+
```css
16+
border: black 1px solid;
17+
```
18+
19+
# 📝 Instructions:
20+
21+
```Plain/Text
22+
1. Combine the 4 padding rules into just one using the "padding:" rule.
23+
2. Combine the all background rules, but the background size, into just one line using the "background:" rule.
24+
25+
26+
```
27+
28+
P.S: The background size cannot be combined, the browsers don't support it yet.\*\*
29+
30+
# Hint:
31+
32+
- How to use the background-size: http://lmgtfy.com/?q=css+background
33+
- How to use the background-size: http://lmgtfy.com/?q=css+padding

‎exercises/04-Combined-Rules/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<title>
8+
04 Combined Rules
9+
</title>
10+
<style>
11+
/* Your code here */
12+
.myBox {
13+
width: 50px;
14+
height: 50px;
15+
padding-top: 10px;
16+
padding-left: 30px;
17+
padding-right: 190px;
18+
padding-bottom: 50px;
19+
20+
background: rgb(189, 189, 189);
21+
background-image: url(https://assets.breatheco.de/img/funny/scared-baby.jpg);
22+
background-position-x: 100px;
23+
background-repeat: no-repeat;
24+
background-size: contain;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div class="myBox">Hello!</div>
31+
</body>
32+
</html>

‎exercises/04-Combined-Rules/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//nothing to see here

‎exercises/04-Combined-Rules/styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)