Skip to content

Commit 870e7ba

Browse files
brinalynn17brinalynn17
committed
CSS Exerices
1 parent 6b3408d commit 870e7ba

File tree

19 files changed

+118
-16
lines changed

19 files changed

+118
-16
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>

‎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: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<!-- add a style tag and select the p tag and make it color blue -->
1+
<style>
2+
/* The website CSS Styles go here */
3+
p {
4+
color: blue;
5+
}
6+
</style>
27
<p>
38
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
49
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>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<html>
33
<head>
44
<style>
5-
/* Your code here */
5+
body {
6+
background-color: blue;
7+
}
68
</style>
79
</head>
810
<body>

‎exercises/02-Separate-Stylesheet/styles.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* your styles here:
2-
1. Select the body tag.
3-
2. Add the background rule equal to blue.
4-
*/
1+
body {
2+
background-color: blue;
3+
}

‎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: repeat;
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/03-Inline-Styles/solution.hide.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@
1414
</tr>
1515
</table>
1616
</body>
17-
</html>
17+
</html>

‎exercises/04-Class-Selector/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</head>
77

88
<body>
9-
<p>Hello!</p>
10-
<p>World!</p>
9+
<p class="b-blue">Hello!</p>
10+
<p class="b-blue">World!</p>
1111
</body>
1212
</html>

0 commit comments

Comments
 (0)