Skip to content

Commit 22deb99

Browse files
yenytmyenytm
committed
CSS 1-13
1 parent 6b3408d commit 22deb99

File tree

48 files changed

+447
-49
lines changed

Some content is hidden

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

48 files changed

+447
-49
lines changed

‎.learn/resets/01-Hello-World/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- your code here -->

‎.learn/resets/01.1-The-Style-Tag/index.html

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>

‎.learn/resets/01.2-Your-First-Style/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+
<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>

‎.learn/resets/01.3-Your-Second-Style/index.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>

‎.learn/resets/02-Separate-Stylesheet/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
</head>
6+
<body>
7+
My background should be blue.
8+
</body>
9+
</html>

‎.learn/resets/02.1-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+
<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 the size "contain"
9+
</body>
10+
</html>

‎.learn/resets/03-Inline-Styles/index.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>

‎.learn/resets/04-Class-Selector/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>04 Class selector</title>
6+
</head>
7+
8+
<body>
9+
<p>Hello!</p>
10+
<p>World!</p>
11+
</body>
12+
</html>

‎.learn/resets/04.1-Combined-Rules/index.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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>04.1 Combined Rules</title>
6+
</head>
7+
8+
<body>
9+
<div class="myBox">Hello!</div>
10+
</body>
11+
</html>

‎.learn/resets/04.2-Apply-several-classes/index.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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>04.2 Apply several classes</title>
6+
</head>
7+
8+
<body>
9+
<div class="card spades">9</div>
10+
</body>
11+
</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/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 fourth item of the list</li>
15+
<li>My fifth item of the list</li>
16+
</ul>
17+
</body>
18+
</html>

‎.learn/resets/06-Practicing-Rules/index.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+
<div style="width: 640px">
12+
<h1>The learning essay</h1>
13+
<h2>3 reasons you know you are learning</h2>
14+
<p id="id1">
15+
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.
16+
</p>
17+
<ol>
18+
<li>You are able to complete the exercises by yourself.</li>
19+
<li>You understand what the teacher is talking about.</li>
20+
<li>You are able to have conversations about the topic.</li>
21+
</ol>
22+
<h2>3 reasons you love what you are learning</h2>
23+
<ul>
24+
<li>Time passes fast.</li>
25+
<li>You are anxious to finish this exercise and start the next one.</li>
26+
<li>It's 12am and you don't want to go to sleep.</li>
27+
</ul>
28+
<p>
29+
If you can't sleep, what better than watching videos of cats?
30+
<a href="https://www.youtube.com/shorts/k931WvWU0Vg">click here</a>
31+
</p>
32+
</div>
33+
</body>
34+
</html>

‎.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 paragraph the 3 most common 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>You 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 exercise and start the next one.</li>
24+
<li>It's 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/shorts/k931WvWU0Vg">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</td>
38+
<td>Male</td>
39+
</tr>
40+
<tr>
41+
<td>22</td>
42+
<td>Female</td>
43+
</tr>
44+
<tr>
45+
<td>11</td>
46+
<td>Male</td>
47+
</tr>
48+
<tr>
49+
<td>21</td>
50+
<td>Male</td>
51+
</tr>
52+
<tr>
53+
<td>22</td>
54+
<td>Female</td>
55+
</tr>
56+
<tr>
57+
<td>10</td>
58+
<td>Male</td>
59+
</tr>
60+
<tr>
61+
<td>13</td>
62+
<td>Female</td>
63+
</tr>
64+
<tr>
65+
<td>13</td>
66+
<td>Male</td>
67+
</tr>
68+
<tr>
69+
<td>10</td>
70+
<td>Male</td>
71+
</tr>
72+
<tr>
73+
<td>11</td>
74+
<td>Male</td>
75+
</tr>
76+
<tr>
77+
<td>11</td>
78+
<td>Male</td>
79+
</tr>
80+
</table>
81+
</body>
82+
</html>

‎.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://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/einstein.png?raw=true" />
12+
</body>
13+
</html>

‎.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/10-Your-Own-Font/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+
<!-- Add your code below this line -->
7+
8+
<link rel="stylesheet" type="text/css" href="./styles.css" />
9+
<title>10 Your Own Font</title>
10+
</head>
11+
<body>
12+
<h1 class="myTitle">My unique font</h1>
13+
</body>
14+
</html>

‎.learn/resets/11-Font-Awesome-Icons/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+
<link rel="stylesheet" type="text/css" href="./styles.css" />
7+
<script src="https://kit.fontawesome.com/072e5df971.js" crossorigin="anonymous"></script>
8+
<title>11 Font Awesome</title>
9+
</head>
10+
<body>
11+
<ul>
12+
<li><i class="fas fa-camera-retro"></i> Hello</li>
13+
</ul>
14+
</body>
15+
</html>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
16+
<div id="the-second-one">
17+
<h2>Second h2 heading</h2>
18+
<h3>Second h3 heading</h3>
19+
<p>More fake content but now in the second container</p>
20+
</div>
21+
</body>
22+
</html>

‎.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>

‎exercises/01-Hello-World/index.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
<!-- your code here -->
1+
<style>
2+
a {
3+
color: pink;
4+
}
5+
</style>
6+
<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.1-The-Style-Tag/solution.hide.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</style>
88
<p>
99
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
10-
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
11-
math, writing, and confidence.
10+
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity, math,
11+
writing, and confidence.
1212
</p>

‎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>

0 commit comments

Comments
 (0)