Skip to content

Commit e39fe74

Browse files
rachelandrewrachelandrew
committed
multicol tasks
1 parent ec694d7 commit e39fe74

File tree

7 files changed

+405
-0
lines changed

7 files changed

+405
-0
lines changed

‎learn/tasks/multicol/marking.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Multicol Marking Guide
2+
3+
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) lesson in Learn Web Development on MDN.
4+
5+
## Task 1
6+
7+
This task covers understanding of `column-count` and `column-gap`.
8+
9+
```
10+
.container {
11+
column-count: 3;
12+
column-gap: 50px;
13+
}
14+
```
15+
16+
## Task 2
17+
18+
In this task we test for understanding of `column-width`, `column-rule`, and the fact that a rule does not change the size of the gap.
19+
20+
```
21+
.container {
22+
column-width: 200px;
23+
column-rule: 5px solid #ccc;
24+
column-gap: 25px;
25+
}
26+
```
27+
28+
The student has been asked to create columns which will be at least 200 pixels wide, assuming there is space for more than one column. So they will need to use the `column-width` property.
29+
30+
They could use the longhand `column-rule-*` properties instead of the shorthand, though there is no benefit to doing so.
31+
32+
The key thing with the use of `column-gap` is that they have understood that the rule does not add 5px of space to the gap. To have 10px either side of the rule they need a 25px gap as the rule is laid over it.
33+
34+
## Task 3
35+
36+
In this task we test for understanding of the `column-span` property.
37+
38+
All the student needs to do is set the element with a class of `.box` to `column-span: all`. This is mostly a task of checking that they select the right element.
39+
40+
```
41+
.box {
42+
column-span: all;
43+
}
44+
```

‎learn/tasks/multicol/multicol1-download.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Multiple-column Layout: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css"/>
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-sizing: border-box;
17+
}
18+
.container {
19+
}
20+
</style>
21+
22+
</head>
23+
24+
<body>
25+
26+
<div class="container">
27+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
28+
29+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
30+
31+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
32+
</p>
33+
34+
</div>
35+
36+
</body>
37+
38+
</html>

‎learn/tasks/multicol/multicol1.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Multiple-column Layout: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
.container {
15+
16+
}
17+
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="container">
24+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
25+
26+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
27+
28+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. </p>
29+
</div>
30+
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 120px;">
34+
.container {
35+
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 130px;">
40+
<div class="container">
41+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
42+
43+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
44+
45+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. </p>
46+
47+
</div>
48+
</textarea>
49+
50+
<div class="playable-buttons">
51+
<input id="reset" type="button" value="Reset" />
52+
</div>
53+
</body>
54+
<script src="../playable.js"></script>
55+
</html>

‎learn/tasks/multicol/multicol2-download.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Multiple-column Layout: Task 2</title>
6+
<link rel="stylesheet" href="../styles.css"/>
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-sizing: border-box;
17+
}
18+
.container {
19+
}
20+
</style>
21+
22+
</head>
23+
24+
<body>
25+
26+
<div class="container">
27+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
28+
29+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
30+
31+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
32+
</p>
33+
34+
</div>
35+
36+
</body>
37+
38+
</html>

‎learn/tasks/multicol/multicol2.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Multiple-column Layout: Task 2</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
.container {
15+
16+
}
17+
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="container">
24+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
25+
26+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
27+
28+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. </p>
29+
</div>
30+
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 120px;">
34+
.container {
35+
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 130px;">
40+
<div class="container">
41+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
42+
43+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
44+
45+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. </p>
46+
47+
</div>
48+
</textarea>
49+
50+
<div class="playable-buttons">
51+
<input id="reset" type="button" value="Reset" />
52+
</div>
53+
</body>
54+
<script src="../playable.js"></script>
55+
</html>

‎learn/tasks/multicol/multicol3-download.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Multiple-column Layout: Task 3</title>
6+
<link rel="stylesheet" href="../styles.css"/>
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-sizing: border-box;
17+
}
18+
19+
.container {
20+
column-count: 3;
21+
}
22+
23+
.box {
24+
text-align: center;
25+
margin: 1em 0;
26+
}
27+
28+
.box h2 {
29+
margin: 0;
30+
display: grid;
31+
grid-template-columns: 1fr auto 1fr;
32+
column-gap: 0.5em;
33+
align-items: center;
34+
}
35+
36+
.box h2::before {
37+
content: "";
38+
border-bottom: 5px dotted #ccc;
39+
}
40+
41+
.box h2::after {
42+
content: "";
43+
border-bottom: 5px dotted #ccc;
44+
}
45+
46+
.subhead {
47+
font-style: italic;
48+
}
49+
</style>
50+
51+
</head>
52+
53+
<body>
54+
55+
<div class="container">
56+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
57+
58+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
59+
<div class="box">
60+
<h2>I am a level 2 heading</h2>
61+
<div class="subhead">Lotus root water spinach fennel</div>
62+
</div>
63+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
64+
</p>
65+
66+
</div>
67+
68+
</body>
69+
70+
</html>

0 commit comments

Comments
 (0)