Skip to content

Commit 4543a0b

Browse files
committed
pretrabajo 1
1 parent 692191e commit 4543a0b

File tree

36 files changed

+376
-46
lines changed

36 files changed

+376
-46
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- your code here -->
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- add a style tag and select the p tag and make it color blue -->
2+
<p>
3+
Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
4+
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
5+
math,writing, and confidence.
6+
</p>
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+
<style>
5+
a {
6+
/* change this style to yellow */
7+
color: red;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
13+
</body>
14+
</html>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
/* Your code here */
6+
</style>
7+
</head>
8+
<body>
9+
Hello! My background should be blue!
10+
</body>
11+
</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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
</head>
6+
<body>
7+
My background should be blue.
8+
</body>
9+
</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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>02 Background</title>
6+
</head>
7+
<body>
8+
My background should be an image with th size "contain"
9+
</body>
10+
</html>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>03 Inline Styles</title>
5+
</head>
6+
7+
<body>
8+
<table>
9+
<tr>
10+
<td>Hello</td>
11+
</tr>
12+
<tr>
13+
<td>My brother</td>
14+
</tr>
15+
</table>
16+
</body>
17+
</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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<p>Hello!</p>
12+
<p>World!</p>
13+
</body>
14+
</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 Combined Rules
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="myBox">Hello!</div>
12+
</body>
13+
</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>
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>
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>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>06 Practicing Rules</title>
8+
</head>
9+
10+
<body>
11+
<h1>The learning essay</h1>
12+
<h2>3 reasons you know you are learning</h2>
13+
<p id="id1">
14+
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.
15+
</p>
16+
<ol>
17+
<li>You are able to complete the exercises by yourself.</li>
18+
<li>You understand what the teacher is talking about</li>
19+
<li>Your are able to have conversations about the topic</li>
20+
</ol>
21+
<h2>3 reasons you know love what you are learning</h2>
22+
<ul>
23+
<li>Time passes fast.</li>
24+
<li>
25+
You are anxious to finish this excercise and start the next one.
26+
</li>
27+
<li>Is 12am and you don't want to go to sleep.</li>
28+
</ul>
29+
<p>
30+
If you can't sleep, what better than watching videos of cats?
31+
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
32+
</p>
33+
</body>
34+
</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>
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://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/einstein.png?raw=true" />
12+
</body>
13+
</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>

exercises/01-Hello-World/index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
<!-- your code here -->
1+
<style>
2+
a {
3+
color: yellow;
4+
border: solid 2px black;
5+
border-radius: 20%;
6+
}
7+
</style>
8+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

exercises/01.1-The-Style-Tag/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<!-- add a style tag and select the p tag and make it color blue -->
1+
<style>
2+
p {
3+
color: blue;
4+
}
5+
</style>
26
<p>
37
Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
48
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,

exercises/01.2-Your-First-Style/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<style>
55
a {
66
/* change this style to yellow */
7-
color: red;
7+
color: yellow;
88
}
99
</style>
1010
</head>

exercises/01.3-Your-Second-Style/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<html>
33
<head>
44
<style>
5-
/* Your code here */
5+
body {
6+
color: blue;
7+
background-color: blue;
8+
}
69
</style>
710
</head>
811
<body>

exercises/02-Separate-Stylesheet/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@
22
1. Select the body tag.
33
2. Add the background rule equal to blue.
44
*/
5+
body {
6+
background-color: blue;
7+
}

exercises/02.1-Background/styles.css

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

exercises/03-Inline-Styles/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66

77
<body>
8-
<table>
8+
<table style="background-color: green">
99
<tr>
1010
<td>Hello</td>
1111
</tr>

exercises/04-Class-Selector/index.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
<html>
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
5-
<title>
6-
04 Class selector
7-
</title>
5+
<title>04 Class selector</title>
86
</head>
97

108
<body>
11-
<p>Hello!</p>
12-
<p>World!</p>
9+
<p class="b-blue">Hello!</p>
10+
<p class="b-blue">World!</p>
1311
</body>
1412
</html>

exercises/04.1-Combined-Rules/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
5-
<title>
6-
04 Combined Rules
7-
</title>
5+
<title>04 Combined Rules</title>
86
</head>
97

108
<body>

0 commit comments

Comments
 (0)