Skip to content

Commit b8e8d82

Browse files
rachelandrewrachelandrew
committed
more tasks
1 parent e14c050 commit b8e8d82

18 files changed

+595
-35
lines changed

‎learn/tasks/images/balloons.jpg‎

107 KB
Loading

‎learn/tasks/images/form-download.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Images and forms 2: styling form fields</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
17+
.preview .myform input {
18+
display: inline;
19+
margin: 0;
20+
}
21+
22+
.myform {
23+
border: 2px solid #000;
24+
padding: 5px;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
31+
<form method="post" action="" class="myform">
32+
<div>
33+
<label for="fldSearch">Keywords</label>
34+
<input type="search" id="fldSearch" name="keywords">
35+
<input type="submit" name="btnSubmit" value="Search"></div>
36+
</form>
37+
38+
</body>
39+
40+
</html>

‎learn/tasks/images/form.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and forms 2: styling form fields</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.preview .myform input {
9+
display: inline;
10+
margin: 0;
11+
}
12+
</style>
13+
14+
<style class="editable">
15+
.myform {
16+
border: 2px solid #000;
17+
padding: 5px;
18+
}
19+
20+
</style>
21+
</head>
22+
23+
<body>
24+
<section class="preview">
25+
26+
<form method="post" action="" class="myform">
27+
<div><label for="fldSearch">Keywords</label>
28+
<input type="search" id="fldSearch" name="keywords">
29+
<input type="submit" name="btnSubmit" value="Search"></div>
30+
</form>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 120px;">
34+
.myform {
35+
border: 2px solid #000;
36+
padding: 5px;
37+
}
38+
</textarea>
39+
40+
<textarea class="playable playable-html" style="height: 140px;">
41+
42+
<form method="post" action="" class="myform">
43+
<div><label for="fldSearch">Keywords</label>
44+
<input type="search" id="fldSearch" name="keywords">
45+
<input type="submit" name="btnSubmit" value="Search"></div>
46+
</form>
47+
</textarea>
48+
49+
<div class="playable-buttons">
50+
<input id="reset" type="button" value="Reset" />
51+
</div>
52+
</body>
53+
<script src="../playable.js"></script>
54+
</html>

‎learn/tasks/images/marking.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Marking Guide for image and forms tasks
2+
3+
## Task 1 object-fit
4+
5+
The student has been asked to make the image fill the box, retaining aspect ratio. It has been explained that it is ok if some parts of the image are therefore cropped. Using `object-fit: cover` is the correct choice, they also need to set the width and height to 100%;
6+
7+
```
8+
img {
9+
height: 100%;
10+
width: 100%;
11+
object-fit: cover;
12+
}
13+
```
14+
15+
## Task 2 styling simple form elements
16+
17+
The student has been asked to perform various tasks to style a form field and submit button.
18+
19+
- Using attribute selectors to target the search field and button inside .myform.
20+
- Make the form field use the same text size as the rest of the form.
21+
- Give the form field and button 10 px of padding.
22+
- Make the button also use the same font size as the rest of the form.
23+
- Give the button a purple background, white foreground, no border and rounded corners of 5px.
24+
25+
```
26+
.myform {
27+
border: 2px solid #000;
28+
padding: 5px;
29+
}
30+
31+
.myform input[type="search"] {
32+
padding: 10px;
33+
font-size: inherit;
34+
}
35+
36+
.myform input[type="submit"] {
37+
padding: 10px;
38+
font-size: inherit;
39+
background-color: rebeccapurple;
40+
color: white;
41+
border: 0;
42+
border-radius: 5px;
43+
}
44+
```

‎learn/tasks/images/object-fit-download.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Images and forms 1: covering the box with an image</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+
.box {
16+
border: 5px solid #000;
17+
width: 400px;
18+
height: 200px;
19+
}
20+
21+
img {
22+
}
23+
</style>
24+
25+
</head>
26+
27+
<body>
28+
<div class="box">
29+
<img src="balloons.jpg" alt="balloons">
30+
</div>
31+
32+
</body>
33+
34+
</html>

‎learn/tasks/images/object-fit.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and forms 1: covering the box with an image</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.box {
9+
border: 5px solid #000;
10+
width: 400px;
11+
height: 200px;
12+
}
13+
</style>
14+
15+
<style class="editable">
16+
img {
17+
18+
}
19+
20+
</style>
21+
</head>
22+
23+
<body>
24+
<section class="preview">
25+
26+
<div class="box">
27+
<img src="balloons.jpg" alt="balloons">
28+
</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 120px;">
32+
img {
33+
34+
}
35+
</textarea>
36+
37+
<textarea class="playable playable-html" style="height: 140px;">
38+
39+
<div class="box">
40+
<img src="balloons.jpg" alt="balloons">
41+
</div>
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="../playable.js"></script>
49+
</html>

‎learn/tasks/sizing/balloons.jpg‎

107 KB
Loading

‎learn/tasks/sizing/height-min-height-download.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing Task 1: height and min-height</title>
6+
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
16+
.box {
17+
border: 5px solid #000;
18+
width: 400px;
19+
margin-bottom: 1em;
20+
}
21+
22+
.preview {
23+
min-height: 400px;
24+
}
25+
26+
.box1 {
27+
28+
}
29+
30+
.box2 {
31+
32+
}
33+
34+
</style>
35+
</head>
36+
37+
<body>
38+
39+
<div class="box box1">
40+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
41+
</div>
42+
43+
<div class="box box2">
44+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
45+
</div>
46+
47+
</body>
48+
49+
</html>

‎learn/tasks/sizing/height-min-height.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing Task 1: height and min-height</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.box {
9+
border: 5px solid #000;
10+
width: 400px;
11+
margin-bottom: 1em;
12+
}
13+
14+
.preview {
15+
min-height: 400px;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.box1 {
21+
22+
}
23+
24+
.box2 {
25+
26+
}
27+
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="preview">
33+
<div class="box box1">
34+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
35+
</div>
36+
37+
<div class="box box2">
38+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
39+
</div>
40+
</section>
41+
42+
<textarea class="playable playable-css" style="height: 180px;">
43+
.box1 {
44+
45+
}
46+
47+
.box2 {
48+
49+
}
50+
</textarea>
51+
52+
<textarea class="playable playable-html" style="height: 140px;">
53+
<div class="box box1">
54+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
55+
</div>
56+
57+
<div class="box box2">
58+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. </p>
59+
</div>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset" />
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
</html>

‎learn/tasks/sizing/marking.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Marking Guide for sizing tasks
2+
3+
## Task 1 height and min-height
4+
5+
There are two boxes, the first should be given a minimum height, in which case it will expand to take the additional content but if the student removes some content the box will be at least as tall as the min-height. The second is given a fixed height which will cause content to overflow.
6+
7+
```
8+
9+
```
10+
11+
## Task 2 percentages
12+
13+
The container is 400 pixels wide. The student is asked to make the box 60 percent of the container and to give it 10% of padding on all sides. All elements already have `box-sizing: border-box` to save the student worrying about which width they are using, and this is explained in the task instruction.
14+
15+
```
16+
* {
17+
box-sizing: border-box;
18+
}
19+
.inner {
20+
width: 60%;
21+
padding: 10%;
22+
}
23+
```
24+
25+
## Task 3 max-width and images
26+
27+
The example has an image which is breaking out of the box and one which is smaller than the box, the student needs to use max-width set to 100% to cause the larger image to grow only as large as the box. If they use width: 100% then the small image will stretch.
28+
29+
```
30+
img {
31+
max-width: 100%;
32+
}
33+
```

0 commit comments

Comments
 (0)