Skip to content

Commit 8b97ff5

Browse files
rachelandrewrachelandrew
committed
backgrounds tasks
1 parent 56c5c59 commit 8b97ff5

File tree

7 files changed

+229
-0
lines changed

7 files changed

+229
-0
lines changed

‎learn/tasks/backgrounds/backgrounds1-download.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Backgrounds and Borders: Task 1</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
color: #333;
10+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
11+
padding: 1em;
12+
margin: 0;
13+
}
14+
15+
* {
16+
box-sizing: border-box;
17+
}
18+
.box {
19+
width: 500px;
20+
padding: 0.5em;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<div class="box">
28+
<h2>Backgrounds &amp; Borders</h2>
29+
</div>
30+
31+
</body>
32+
33+
</html>

‎learn/tasks/backgrounds/backgrounds1.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
padding: .5em;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
20+
}
21+
22+
h2 {
23+
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="box">
31+
<h2>Backgrounds &amp; Borders</h2>
32+
</div>
33+
34+
</section>
35+
36+
<textarea class="playable playable-css" style="height: 220px;">
37+
.box {
38+
39+
}
40+
41+
h2 {
42+
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 130px;">
47+
<div class="box">
48+
<h2>Backgrounds &amp; Borders</h2>
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset" />
54+
</div>
55+
</body>
56+
<script src="../playable.js"></script>
57+
</html>

‎learn/tasks/backgrounds/backgrounds2-download.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Backgrounds and Borders: Task 1</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
color: #333;
10+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
11+
padding: 1em;
12+
margin: 0;
13+
}
14+
15+
* {
16+
box-sizing: border-box;
17+
}
18+
.box {
19+
width: 300px;
20+
padding: 0.5em;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<div class="box">
28+
<h2>Backgrounds &amp; Borders</h2>
29+
</div>
30+
31+
</body>
32+
33+
</html>

‎learn/tasks/backgrounds/backgrounds2.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: Task 2</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 300px;
13+
padding: .5em;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
20+
}
21+
22+
h2 {
23+
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="box">
31+
<h2>Backgrounds &amp; Borders</h2>
32+
</div>
33+
34+
</section>
35+
36+
<textarea class="playable playable-css" style="height: 220px;">
37+
.box {
38+
39+
}
40+
41+
h2 {
42+
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 130px;">
47+
<div class="box">
48+
<h2>Backgrounds &amp; Borders</h2>
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset" />
54+
</div>
55+
</body>
56+
<script src="../playable.js"></script>
57+
</html>

‎learn/tasks/backgrounds/balloons.jpg

107 KB
Loading

‎learn/tasks/backgrounds/marking.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Background and Borders Marking Guide
2+
3+
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Background and Borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) lesson in Learn Web Development on MDN.
4+
5+
## Task 1
6+
7+
This task covers understanding of `border`, `border-radius`, `background-image`, and `background-size`. Also, it checks that the student understands how to use RGBa colors to make a background color partly transparent.
8+
9+
```
10+
.box {
11+
border: 5px solid #000;
12+
border-radius: 10px;
13+
background-image: url(balloons.jpg);
14+
background-size: cover;
15+
}
16+
17+
h2 {
18+
background-color: rgba(0,0,0,.5);
19+
color: #fff;
20+
}
21+
```
22+
23+
The student could use the individual border longhands however this is unecessarily verbose as all borders are set to the same color, style and size.
24+
25+
## Task 2
26+
27+
In task 2 the student will need to use and position multiple background images using the `background` shorthand. This tests their understanding of the shorthand and also of the ability to use more than one background image.
28+
29+
We also ask them to round only some of the corners on the border, ensuring they understand how to use individual `border-radius` properties.
30+
31+
There are also some elements which link back to earlier lessons:
32+
33+
- They need to add padding to the heading in order that it doesn't overlay the star image - this links back to learning from the earlier Box Model lesson.
34+
- The text with be aligned with the `text-align` property.
35+
36+
```
37+
.box {
38+
border: 5px solid lightblue;
39+
border-top-left-radius: 20px;
40+
border-bottom-right-radius: 40px;
41+
}
42+
43+
h2 {
44+
padding: 0 40px;
45+
text-align: center;
46+
background: url(star.png) no-repeat left center,
47+
url(star.png) repeat-y right center;
48+
}
49+
```

‎learn/tasks/backgrounds/star.png

627 Bytes
Loading

0 commit comments

Comments
 (0)