Skip to content

Commit 2dd1b55

Browse files
rachelandrewrachelandrew
committed
RWD task and marking guide
1 parent e39fe74 commit 2dd1b55

File tree

3 files changed

+194
-1
lines changed

3 files changed

+194
-1
lines changed

‎learn/tasks/multicol/marking.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Multicol Marking Guide
22

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.
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/Multiple-column_Layout) lesson in Learn Web Development on MDN.
44

55
## Task 1
66

‎learn/tasks/rwd/marking.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Responsive Web Design Marking Guide
2+
3+
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Beginners Guide to Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) lesson in Learn Web Development on MDN.
4+
5+
This task not only asks the student to implement media queries correctly, they will also need to use the things they have learned about CSS Layout.
6+
7+
There is no one right answer however the following code demontrates how simply the task can be achieved, and this is really what we are looking for as it is easy to complicate this task. Using modern layout methods of flexbox and grid means that we only need one media query.
8+
9+
```
10+
@media screen and (min-width: 60em) {
11+
header {
12+
display: flex; /* separate the nav and title */
13+
justify-content: space-between;
14+
align-items: center;
15+
}
16+
17+
header ul {
18+
display: flex; /* mav navigation display using flexbox */
19+
}
20+
21+
header li {
22+
margin: 0; / *remove the margin used in the mobile design */
23+
}
24+
25+
header a {
26+
border: 0; /*remove the border used in the mobile design */
27+
}
28+
29+
main {
30+
display: grid; /* a two column grid layout for the main content and sidebar */
31+
grid-template-columns: 3fr 1fr;
32+
gap: 20px;
33+
margin-top: 20px;
34+
}
35+
36+
.cards {
37+
display: grid; /* a three column layout for the cards */
38+
grid-template-columns: 1fr 1fr 1fr;
39+
gap: 20px;
40+
}
41+
}
42+
```

‎learn/tasks/rwd/rwd-download.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Responsive Web Design Task: Task</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
html {
13+
font: 1.2em/1.4 Arial, Helvetica, sans-serif;
14+
}
15+
16+
body {
17+
padding: 0 0 1em;
18+
}
19+
20+
header {
21+
background-color: #333;
22+
color: #fff;
23+
border: 5px solid #000;
24+
}
25+
26+
header ul {
27+
list-style: none;
28+
margin: 0;
29+
padding: 0;
30+
}
31+
32+
header a {
33+
color: #fff;
34+
text-decoration: none;
35+
display: block;
36+
padding: 0.5em 1em;
37+
border-top: 1px solid #999;
38+
}
39+
40+
header .title {
41+
font-size: 150%;
42+
font-style: italic;
43+
font-weight: bold;
44+
padding: 1em;
45+
}
46+
47+
main {
48+
padding: 0 1em;
49+
}
50+
51+
.cards {
52+
list-style: none;
53+
margin: 0;
54+
padding: 0;
55+
}
56+
57+
.cards li {
58+
border: 5px solid #000;
59+
margin-bottom: 1em;
60+
}
61+
62+
.cards h2 {
63+
background-color: #333;
64+
color: #fff;
65+
margin: 0;
66+
padding: 0.5em 1em;
67+
}
68+
69+
.cards .inner {
70+
padding: 0.5em 1em;
71+
}
72+
73+
.sidebar {
74+
background-color: #333;
75+
border: 5px solid #000;
76+
padding: 0.5em 1em;
77+
color: #fff;
78+
}
79+
</style>
80+
<meta name="viewport" content="width=device-width, initial-scale=1">
81+
</head>
82+
83+
<body>
84+
<header>
85+
<div class="title">My Website</div>
86+
<nav>
87+
<ul>
88+
<li>
89+
<a href="">Link 1</a>
90+
</li>
91+
<li>
92+
<a href="">Link 2</a>
93+
</li>
94+
<li>
95+
<a href="">Link 3</a>
96+
</li>
97+
</ul>
98+
</nav>
99+
100+
</header>
101+
102+
<main>
103+
<article>
104+
<h1>This is the main heading</h1>
105+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
106+
107+
<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>
108+
109+
<ul class="cards">
110+
<li>
111+
<h2>Card One</h2>
112+
<div class="inner">
113+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.</p>
114+
</div>
115+
</li>
116+
<li>
117+
<h2>Card Two</h2>
118+
<div class="inner">
119+
<p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
120+
</div>
121+
</li>
122+
<li>
123+
<h2>Card Three</h2>
124+
<div class="inner">
125+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
126+
</div>
127+
</li>
128+
<li>
129+
<h2>Card Four</h2>
130+
<div class="inner">
131+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
132+
</div>
133+
</li>
134+
<li>
135+
<h2>Card Five</h2>
136+
<div class="inner">
137+
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
138+
</div>
139+
</li>
140+
141+
</ul>
142+
</article>
143+
<aside class="sidebar">
144+
<p>Have you discovered all of the other excellent content on this website?</p>
145+
146+
</aside>
147+
</main>
148+
149+
</body>
150+
151+
</html>

0 commit comments

Comments
 (0)