Skip to content

Commit 65b2cc4

Browse files
ElviraQDPElviraQDP
committed
test and exerises checked
1 parent 15c0011 commit 65b2cc4

File tree

41 files changed

+397
-87
lines changed

Some content is hidden

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

41 files changed

+397
-87
lines changed

‎.learn/resets/04.1-Combined-Rules/styles.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.what {
2+
width: 50px;
3+
height: 50px;
4+
padding-top: 10px;
5+
padding-left: 30px;
6+
padding-right: 190px;
7+
padding-bottom: 50px;
8+
/* padding: 10px 30px 50px 190px; */
9+
background: rgb(189, 189, 189);
10+
background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
11+
background-position-x: 100px;
12+
background-repeat: no-repeat;
13+
background-size: contain;
14+
}

‎.learn/resets/04.2-Apply-several-classes/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="card spades">9</div>
12+
</body>
13+
</html>

‎.learn/resets/04.3-id-Selector/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04.3 ID selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<span>I should look like a button</span>
12+
</body>
13+
</html>

‎.learn/resets/04.3-id-Selector/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#button1 {
2+
background: #BDBDBD;
3+
border: #5E5E5E;
4+
border-radius: 5px;
5+
}

‎.learn/resets/05-Specificity/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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>05 Specificity</title>
8+
</head>
9+
<body>
10+
<ul>
11+
<li>My first item of the list</li>
12+
<li>My second item of the list</li>
13+
<li id="thirditem">My third item of the list</li>
14+
<li>My forth item of the list</li>
15+
<li>My fifth item of the list</li>
16+
</ul>
17+
</body>
18+
</html>

‎.learn/resets/05-Specificity/styles.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
ul li{
2+
background: blue;
3+
}
4+
5+
#thirditem{
6+
background: yellow;
7+
}
8+
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/
9+

‎.learn/resets/06-Practicing-Rules/index.html

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

‎.learn/resets/06-Practicing-Rules/styles.css

Whitespace-only changes.

‎.learn/resets/07-Very-Specific-Rules/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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>07 Very Specific Rules</title>
8+
</head>
9+
<body>
10+
<h1>The learning essay</h1>
11+
<h2>3 reasons you know you are learning</h2>
12+
<p id="id1">
13+
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.
14+
</p>
15+
<ol>
16+
<li>You are able to complete the exercises by yourself.</li>
17+
<li>You understand what the teacher is talking about</li>
18+
<li>Your are able to have conversations about the topic</li>
19+
</ol>
20+
<h2>3 reasons you know love what you are learning</h2>
21+
<ul>
22+
<li>Time passes fast.</li>
23+
<li>You are anxious to finish this excercise and start the next one.</li>
24+
<li>Is 12am and you don't want to go to sleep.</li>
25+
</ul>
26+
<p>
27+
If you can't sleep, what better than watching videos of cats?
28+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
29+
</p>
30+
31+
<table>
32+
<tr>
33+
<td>Age</td>
34+
<td>Gender</td>
35+
</tr>
36+
<tr>
37+
<td>12 years</td>
38+
<td>Male</td>
39+
</tr>
40+
<tr>
41+
<td>22 years</td>
42+
<td>Female</td>
43+
</tr>
44+
<tr>
45+
<td>11 years</td>
46+
<td>Male</td>
47+
</tr>
48+
<tr>
49+
<td>21 years</td>
50+
<td>Male</td>
51+
</tr>
52+
<tr>
53+
<td>22 years</td>
54+
<td>Female</td>
55+
</tr>
56+
<tr>
57+
<td>10 years</td>
58+
<td>Male</td>
59+
</tr>
60+
<tr>
61+
<td>13 years</td>
62+
<td>Female</td>
63+
</tr>
64+
<tr>
65+
<td>13 years</td>
66+
<td>Male</td>
67+
</tr>
68+
<tr>
69+
<td>10 years</td>
70+
<td>Male</td>
71+
</tr>
72+
<tr>
73+
<td>11 years</td>
74+
<td>Male</td>
75+
</tr>
76+
<tr>
77+
<td>11 years</td>
78+
<td>Male</td>
79+
</tr>
80+
</table>
81+
</body>
82+
</html>

‎.learn/resets/07-Very-Specific-Rules/styles.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** Insert your code here **/
2+
3+
/*********** READ ONLY BLOCK ******
4+
You CAN NOT UPDATE anything from here on,
5+
only add lines of code on top of this lines
6+
**/
7+
8+
body {
9+
color: blue;
10+
}
11+
12+
ul li,
13+
ol li {
14+
color: green;
15+
}

‎.learn/resets/08-Rounded-Image/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>08 Rounded Image</title>
8+
</head>
9+
10+
<body>
11+
<img class="rounded" src="https://assets.breatheco.de/apis/img/funny/einstein.png" />
12+
</body>
13+
</html>

‎.learn/resets/08-Rounded-Image/styles.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body {
2+
background: #bdbdbd;
3+
}
4+
.rounded {
5+
border-radius: 100%;
6+
}

‎.learn/resets/09-Anchor-Styles/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>09 Anchor Styles</title>
8+
</head>
9+
10+
<body>
11+
<a class="threeDimension" href="#">Click me</a>
12+
</body>
13+
</html>

‎.learn/resets/09-Anchor-Styles/styles.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
.threeDimension {
3+
display: block;
4+
border: 1px solid;
5+
border-color: #aaa #000 #000 #aaa;
6+
width: 8em;
7+
background: #fc0;
8+
text-decoration: none;
9+
text-align: center;
10+
color: black;
11+
}
12+
13+
a.threeDimension:active {
14+
/* your code here*/
15+
16+
}

‎.learn/resets/10-Your-Own-Font/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<!--your code here -->
7+
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
9+
10+
<title>10 Your Own Font</title>
11+
</head>
12+
<body>
13+
<h1 class="myTitle">My unique font</h1>
14+
</body>
15+
</html>

‎.learn/resets/10-Your-Own-Font/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.myTitle {
2+
/*your code here*/
3+
}

‎.learn/resets/11-Font-Awesome-Icons/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>11 Font Awesome</title>
8+
</head>
9+
<body>
10+
<ul>
11+
<li><i class="fa fa-camera-retro"></i> Hello</li>
12+
</ul>
13+
</body>
14+
</html>

‎.learn/resets/11-Font-Awesome-Icons/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
li {
2+
list-style: none;
3+
}

‎.learn/resets/12-Relative-Length-EM-REM/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>12 Relative Length EM REM</title>
8+
</head>
9+
<body>
10+
<div id="my-first-div">
11+
<h2>First h2 heading</h2>
12+
<h3>First h3 heading</h3>
13+
<p>Here is some nice fake content</p>
14+
</div>
15+
<div id="the-second-one">
16+
<h2>Second h2 heading</h2>
17+
<h3>Second h3 heading</h3>
18+
<p>More fake content but now in the second container</p>
19+
</div>
20+
</body>
21+
</html>

‎.learn/resets/12-Relative-Length-EM-REM/styles.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#my-first-div {
2+
font-size: 15px;
3+
}
4+
#the-second-one {
5+
font-size: 25px;
6+
}
7+
8+
/* YOUR CODE BELOW THIS LINE */

‎.learn/resets/13-Anchor-Like-Button/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>13 Anchor Like Button</title>
8+
</head>
9+
<body>
10+
<a href="#" class="orange-btn">Beautiful Button</a>
11+
</body>
12+
</html>

‎.learn/resets/13-Anchor-Like-Button/styles.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.orange-btn {
2+
/*your code here*/
3+
}
4+
5+
.orange-btn:hover {
6+
/*YOUR CODE HERE FOR THE HOVER STATE*/
7+
}

‎exercises/02-Separate-Stylesheet/tests.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ describe("All the styles should be applied", function () {
1919
jest.resetModules();
2020
});
2121
it("The body tag should not contains any inline style", function () {
22-
document.qulector(
23-
.querySelector(
22+
document.querySelector(
2423
"head"
2524
).innerHTML=`<style>${css.toString()}</style>`;
2625
let bodyInlineStyle=document.getElementsByTagName("body");

‎exercises/02.1-Background/README.es.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
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`.
44

5-
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 ajustarla su tamaño al contenedor completo, entre otras propiedades eso puede ser modificado.
5+
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 ser modificado.
66

77
## 📝 Instrucciones:
88

99
1. Construye el ejercicio.
1010
2. Verifica la vista previa.
11-
3. En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css).
11+
3. En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css)
1212
4. Construye y previsualiza el ejercicio nuevamente.
13-
5. Cambia el background-repeat a 'inherit' para que se repita sobre el eje x y el eje y.
13+
5. Cambia el background-repeat a 'inherit' para que se repita sobre el eje x y el eje y.
1414
6. Construye y previsualiza el ejercicio nuevamente.
1515

1616

‎exercises/04-Class-Selector/README.es.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
# `04` El selector de clase
22

3-
Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector de `.class`:
3+
Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector `.class`:
44

5-
#### 1) Selector de `.class`
5+
#### 1) Selector de clase
66

7-
Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos.
8-
9-
Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
7+
Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
108

119
```css
1210
.small{

‎exercises/04.1-Combined-Rules/README.es.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ border-style: solid;
1010
border-width: 1px;
1111
```
1212

13-
Las propiedades de border se pueden consolidar en una sola línea como:
13+
Las propiedades de border se pueden consolidar en una sola línea así:
1414

1515
```css
1616
border: black 1px solid;
@@ -19,7 +19,7 @@ border: black 1px solid;
1919
# 📝 Instrucciones:
2020

2121

22-
1. Combina las 4 reglas de padding una sola utilizando la regla "padding:".
22+
1. Combina las 4 reglas de padding una sola utilizando la regla "padding".
2323
2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:".
2424

2525

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ border: black 1px solid;
1919
# 📝 Instructions:
2020

2121

22-
1. Combine the 4 padding rules into just one using the "padding:" rule.
22+
1. Combine the 4 padding rules into just one using the "padding" rule.
2323
2. Combine the all background rules, but the background size, into just one line using the "background:" rule.
2424

2525

0 commit comments

Comments
 (0)