Merge branch 'master' of github.com:mdn/css-examples

chrisdavidmills · chrisdavidmills · commit 4180cc9eccea · 2020-08-20T11:53:04.000+01:00
diff --git a/learn/rwd/float-based-rwd.html b/learn/rwd/float-based-rwd.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>A simple float-based responsive design</title>
     <style>
       body {
diff --git a/learn/tasks/float/marking.md b/learn/tasks/float/marking.md
@@ -33,7 +33,7 @@ In task 2 we check that the student understands how to clear an element from a f
 
 ## Task 3
 
-In the final task the student is asked to use the most up to date method of clearing the box underneath the floated item. Therefore they should add `display: flow-root` to the class for `.box`. Other methods might be to use `overflow` or a clearfix hack, however the learning materials detail the `flow-root` method as the modern way to acheive this.
+In the final task the student is asked to use the most up to date method of clearing the box underneath the floated item. Therefore they should add `display: flow-root` to the class for `.box`. Other methods might be to use `overflow` or a clearfix hack, however the learning materials detail the `flow-root` method as the modern way to achieve this.
 
 ```
 .box {
diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md
@@ -29,6 +29,20 @@ I have used the shorthands below, however it would be correct for the student to
  grid-row: 2 / 4;
 }
 ```
+### Additional question
+
+This extra question requires a little bit of research. One way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial.
+```
+.item1 {
+ order: 1
+}
+```
+Another valid solution is to use `z-index`:
+```
+.item1 {
+ z-index: 1;
+}
+```
 
 ## Grid Layout Three
 
diff --git a/learn/tasks/position/marking.md b/learn/tasks/position/marking.md
@@ -1,6 +1,6 @@
 # Floats Marking Guide
 
-The aim of the tasks are to demonstrate an understanding of the properties covered in the [Float](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) lesson in Learn Web Development on MDN.
+The aim of the tasks are to demonstrate an understanding of the properties covered in the [Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) lesson in Learn Web Development on MDN.
 
 ## Task 1
 
@@ -20,7 +20,7 @@ This task covers understanding of `position: relative` and `position: absolute`
 
 A likely issue will be that the student adds `position: absolute` to the child but does not apply `position: relative` to the container. In that case the target will end up being positioned according to the viewport.
 
-For the extra task, the student needs to add a negative `z-index` to the target, for example `z-index:2`.
+For the extra task, the student needs to add a negative `z-index` to the target, for example `z-index: -2`.
 
 ## Task 2
 
@@ -30,4 +30,4 @@ In task 2 we check understanding of `position: fixed` with a slightly different
 .sidebar {
   position: fixed;
 }
-```
+```
