Update step 3

raspberrypilearning · Feb 28, 2025 · 3936c89 · 3936c89
1 parent ab2ddae
commit 3936c89
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 43 deletions.
diff --git a/en/code/magazine-starter/style.css b/en/code/magazine-starter/style.css
@@ -9,4 +9,21 @@ body {
     padding: 15px;
     background: linear-gradient(to bottom right, red, white);
     font-family: Verdana;
+}
+
+.column1 {
+    width: 48%;
+}
+
+.column2 {
+    width: 48%;
+}
+
+img {
+    max-width: 100%;
+}
+
+.photo {
+    box-shadow: 4px 4px 4px gray;
+    transform: rotate(10deg);
 }
diff --git a/en/meta.yml b/en/meta.yml
@@ -19,7 +19,7 @@ last_tested: 2017-01-01
 steps:
 - title: What you will make
 - title: Heading and Background
-- title: Creating Columns
+- title: Columns
   completion:
   - engaged
 - title: Style magazine items

diff --git a/en/step_2.md b/en/step_2.md
@@ -34,7 +34,7 @@ In the sidebar, open the `style.css` file. Change the style of the heading. Here
 
 --- code ---
 ---
-language: html
+language: css
 filename: style.css
 line_numbers: true
 line_number_start: 1
@@ -56,11 +56,11 @@ Look at the CSS style for `body`. Change the colours of the background and the f
 
 --- code ---
 ---
-language: html
+language: css
 filename: style.css
 line_numbers: true
 line_number_start: 8
-line_highlights: 11-12
+line_highlights: 10-11
 ---
 body {
   background: linear-gradient(to bottom right, red, white);

diff --git a/en/step_3.md b/en/step_3.md
@@ -1,45 +1,124 @@
-## Creating Columns
+## Columns
 
-Websites often use multiple columns. Let's create a two column layout for your magazine.
+Websites often use multiple columns. Create a two column layout for your magazine.
 
-+ First create two column `div`s.
+--- task ---
 
-	Add the highlighted HTML to `index.html`:
+Select the `index.html` file and add code to create two columns 
 
-	![screenshot](images/magazine-columns.png)
-
-+ Now style the column divs so that one floats to the left and the other floats to the right.
-
-	![screenshot](images/magazine-columns-style.png)
-
-	Each column is less than 50% so there's room for padding.
-
-	You'll need to add something to a column to see the effect.
-
-+ Let's add a kitten picture to the top of column 2.
-
-	![screenshot](images/magazine-kitten.png)
-
-	Notice that the kitten image is positioned about half-way across the page, in the second column.
-
-	It's a bit big though!
-
-+ Let's use `max-width: ` to make images fit within their container.
-
-	Add the following style to `style.css`.
-
-	![screenshot](images/magazine-img-width.png)
-
-	This will apply to all images you use in your magazine, not just the kitten.
-
-+ Now add a class `photo` to the image so that you can style it:
-
-	![screenshot](images/magazine-photo.png)
-
-+ And style the image to add a shadow and a twist to make the photo pop out of the page:
-
-	![screenshot](images/magazine-photo-style.png)
-
-	Make some changes until you like the result.
+--- code ---
+---
+language: html
+filename: index.html
+line_numbers: true
+line_number_start: 7
+line_highlights: 9-14
+---
+<body>
+<h1>My magazine</h1>
+<div class="column1">
+Column 1
+</div>
+<div class="column2">
+Column 2
+</div>
+</body>
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Switch back to `style.css` and find the styles for `column1` and `column2`.
+
+--- /task ---
+
+--- task ---
+
+Add a `float` property to each column style so that one floats to the left and the other floats to the right.
+
+--- code ---
+---
+language: css
+filename: style.css
+line_numbers: true
+line_number_start: 14
+line_highlights: 16, 21
+---
+.column1 {
+    width: 48%;
+	float: left;
+}
+
+.column2 {
+    width: 48%;
+	float: right;
+}
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Replace the `Column 2` text with a kitten picture.
+
+--- code ---
+---
+language: html
+filename: index.html
+line_numbers: true
+line_number_start: 12
+line_highlights: 13
+---
+<div class="column2">
+	<img src="kitten.jpg">
+</div>
+</body>
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Add a class `photo` to the image so that you can style it:
+
+--- code ---
+---
+language: html
+filename: index.html
+line_numbers: true
+line_number_start: 12
+line_highlights: 13
+---
+<div class="column2">
+	<img src="kitten.jpg" class="photo">
+</div>
+</body>
+
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Switch to `style.css` and experiment with changing the numbers to alter the size of the shadow and the angle of the image.
+
+--- code ---
+---
+language: css
+filename: style.css
+line_numbers: true
+line_number_start: 26
+line_highlights: 27-28
+---
+.photo {
+    box-shadow: 4px 4px 4px gray;
+    transform: rotate(10deg);
+}
+--- /code ---
 
+--- /task ---