forked from mozilla/curriculum-final
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsession06-css-decoration.html
executable file
·261 lines (193 loc) · 17.1 KB
/
session06-css-decoration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html>
<head>
<title>Intermediate Web Literacy I | CSS Decoration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="196x196" href="https://mozilla.github.io/curriculum-final/template-assets/images/favicon.png">
<link rel="stylesheet" href="https://mozilla.github.io/curriculum-final/template-assets/css/style.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://mozilla.github.io/curriculum-final/template-assets/js/template.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrapper" mode="overview">
<aside>
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Ubosoth_decoration.jpg/320px-Ubosoth_decoration.jpg">
<a class="attribution" href="https://commons.wikimedia.org/wiki/File:Ubosoth_decoration.jpg">By Michael Janich</a>
</div>
<ul class="agenda-navigation">
<li><a href="#overview">Overview</a></li>
<li><a href="#step-1">Preparation</a></li>
<li><a href="#step-2">Decorating Boxes IRL</a></li>
<li><a href="#step-3">Decorating with CSS</a></li>
<li><a href="#step-4">Reflection and Assessment</a></li>
<li><a href="#step-5"><strong>Optional:</strong> Badging</a></li>
</ul>
</aside>
<article class="main">
<h1 class="activity-title">Intermediate Web Literacy I | CSS Decoration</h1>
<section class="overview">
<p class="made-by">
Made by <a href="https://learning.mozilla.org">Mozilla</a>, released under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> license
</p>
<p class="time total-time">
60 minutes
</p>
<p class="summary">
You will apply text- and box-effect CSS styling techniques to inline and block elements on an HTML webpage while learning how to <strong>revise</strong>, <strong>code</strong>, <strong>compose</strong>, and <strong>design</strong>.
</p>
<p><em><a href="https://thimbleprojects.org/chadsansing/125881/intermediate-web-lit-one/session05-css-decoration.html#overview">Remix this lesson in Thimble!</a></em></p>
<h4>Web Literacy Skills</h4>
<ul class="skills-list">
<li>
<h5>Read</h5>
<a href="https://learning.mozilla.org/web-literacy/read/synthesize/">Synthesize</a>
<li>
<h5>Write</h5>
<a href="https://learning.mozilla.org/web-literacy/write/code/">Code</a>
<a href="https://learning.mozilla.org/web-literacy/write/compose/">Compose</a>
<a href="https://learning.mozilla.org/web-literacy/write/design/">Design</a>
</li>
</ul>
<h4>21st Century Skills</h4>
<div class="skills-list">
<a href="https://learning.mozilla.org/en-US/web-literacy/skills#communication">Communication</a>
<a href="https://learning.mozilla.org/en-US/web-literacy/skills#creativity">Creativity</a>
<a href="https://learning.mozilla.org/en-US/web-literacy/skills#problem-solving">Problem Solving</a>
</div>
<h4>Learning Objectives</h4>
<ul>
<li>Understand and be able to explain the connection between an HTML webpage and a CSS stylesheet.</li>
<li>Apply text- and box-effects to inline and block elements on a webpage using HTML and CSS.</li>
<li>Make design decisions to emphasize text and other features of a webpage using HTML and CSS.</li>
</ul>
<h4>Audience</h4>
<ul>
<li>13+</li>
<li>Intermediate web users</li>
</ul>
<h4>Materials</h4>
<ul>
<li>Internet-connected computers</li>
<li>Markers</li>
<li>Paper cut into 15.25 cm x 15.25 cm (or 6" x 6") squares</li>
<li>Pecils and pens</li>
<li><strong>Optional:</strong> decorating supplies such as googly eyes, sequins, or stickers</li>
</ul>
</section> <!-- End of Introduction -->
<ul class="agenda">
<!--Thimble project: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556-->
<!--Discourse: https://discourse.webmaker.org/t/testing-intermediate-web-lit-css-decoration/409-->
<!-- Copy and paste this <li> tag to add additional steps -->
<li>
<h1>1. Preparation</h1>
<h2>Learning Progression</h2>
<p>In this lesson, your learners will:</p>
<ol class="fancy">
<li>Fold and decorate their own paper boxes.</li>
<li>Use Cascading Stylsheets (CSS) to decorate a webpage in <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556/">this Thimble project</a> by remixing the color, positioning, and size of different elements on the page.</li>
<li>Reflect on their learning.</li>
</ol>
<hr>
<h2>
You Should...
</h2>
<p>Do <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556">the activity</a> on your own to become familiar with how to find and use webfonts on a webpage.</p>
<ol class="fancy">
<li>Follow <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556">this link</a> to the <a href="https://thimble.mozillaz.org">Thimble</a> project for this activity.</li>
<li>Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.</li>
<li>Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.</li>
<li>Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.</li>
</ol>
<p>You can learn more about styling boxes on webpages with CSS from <a href="https://developer.mozilla.org/en-US/Learn/CSS/Styling_boxes">this module</a> created by the <a href="https://developer.mozilla.org/en-US/Learn/">Mozilla Developer Network</a>.</p>
<p>Prepare 4-5 squares of 15.25 cm x 15.25 cm (or 6" x6") paper per learner.</p>
<p>Practice making paper boxes using instructions from sites like <a href="http://www.origami-instructions.com/origami-box.html">this one</a> or <a href="http://www.instructables.com/id/paper-box/?ALLSTEPS">this one</a> Make a few boxes for learners who might experience difficulty and/or frustration making their own.</p>
<p>Post the URL, or Web address, of <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556">today's project</a> somewhere highly visible in your room. You may want to post it as a shortened link using a service like <a href="http://bit.ly">bit.ly</a>.</p>
</li> <!-- end of step-->
<li>
<h1>2. Decorating Boxes IRL</h1>
<div class="time step-time">25 minutes</div>
<p>
Continue discussing CSS and styling with your learners. Explain that styling can make even the most static content - like text and still images - seem appealing and exciting through the use of design to mix colors, fonts, and other effects that draw the user into their webpages. Remind learners of all they've learned in this module about styling fonts and objects on a webpage and tell them that today's challenge is to make a box into something amazing that everyone wants to handle and open. Today is all about using CSS decoration techniques to attract users to a webpage.
</p>
<p>We're going to style boxes in real life (IRL) and then style a box holding a cat on the Internet.</p>
<p>Up first: boxes IRL. Tell learners that we;re goung to make and decorate paper boxes to warm up our design sensibilities and think about the ways CSS impacts the surface of a webpage.</p>
<ol class="fancy">
<li>Ask each learner to grab 4-5 squares of paper, or pass out the paper yourself.</li>
<li>Visit, project, and share a site like <a href="http://www.origami-instructions.com/origami-box.html">this one</a> or <a href="http://www.instructables.com/id/paper-box/?ALLSTEPS">this one</a> that shows learners how to fold their own paper boxes.</li>
<li>Invite learners to make their own paper boxes, but make sure they know it's okay to mess up and begin again - and it's okay to get help, as well. Be ready to help learners who struggle with this part of the activity and have some boxes pre-made for learners who want to skip to the decorating part of the activity.</li>
<li>Suggest that learners make two boxes that they can combine into one - a box for the bottom and another for the lid.
<li>After about 10-15 minutes, encourage learners to switch over to decorating their boxes however they think best. The big idea is to create a box other people will want to check out and open. learners can use markers, other coloring tools, and any non-invasive crafting supplies you have available in the room.</li>
<li>After another 10 minutes or so of decoration, call the group together, ask learners to line up their boxes on a table or shelf, and do a quick gallery walk of all the boxes. Remind learners to be gentle with their creations!</li>
</ol>
<p>As the gallery walk winds down, facilitate a brief conversation about the kinds of designs and common design features that seem most effective in grabbing learners' attention. After a few learners volunteer their answers, ask learners to go to their seats for <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556/">today's Thimble project</a>.</p>
</li> <!-- end of step-->
<li>
<h1>3. Decorating with CSS</h1>
<div class="time step-time">30 minutes</div>
<p>As learners take their seats, explain that today we're going to use several different styling elements on a webpage to give it a unique look and feel for the user. Plus, we'll be working with cats.</p>
<p>Today's project looks a little wacky. Encourage learners to make it even wackier or to try and "clean up" the design as they work. They can turn the page into whatever they want so long as they remember our goal: make the the best online cat box in the world. (Though you should feel free to customize this lesson and project for your audience, too.)</p>
<p>Share the link to <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556/">today's project</a> with learners. You might want to shorten this link ahead of time or else provide a link to it from a class webpage or shared document. Help learners who experience difficulty with processing or typing links get to the webpage and encourage classmates to help, as well.</p>
<p>Once learners all arrive at the project, invite them to click the green 'Remix' button. This will take learners into the Thimble code editor. They will be able to see the code of the webpage, as well as a preview of how it looks in a browser. learners can also switch between this 'Preview' pane (in the upper righthand part of the Thimble interface) and a 'Tutorial' pane that takes them through today's work in a step-by-step way.</p>
<p>Work through the tutorial on a projected computer. Invite learners to help one another, but also to work ahead if they feel ready to do so. Through the course of the tutorial, you'll ask learners to:</p>
<ol class="fancy">
<li>Choose a style a font on a webpage using multiple effects such as<code>color</code>, <code>text-decoratiobn</code> and <code>text-shadow</code> .</li>
<li>Use multiple <code>box-shadow</code> effects to customize their webpages.</li>
<li>Mess with the code to see what other styling decisions they can make - or break! - on the page.</li>
</ol>
</li> <!-- end of step-->
<li>
<h1>4. Reflection and Assessment</h1>
<div class="time step-time">5 minutes</div>
<p>After working through the tutorial, bring learners back together as a group and facilitate a brief, reflective conversation about today's work. Make a list of your own questions or ask questions like those suggested below.</p>
<p>If you have time, consider asking learners to write, type, or otherwise record their responses for self-assessment and teacher evaluation. Just be sure to match recording technologies to learners' needs so that whatever medium (or media) you chose for (or with) the group isn't a barrier to learners' expression.</p>
<ol class="fancy">
<li>How do you find the right balance between everything you can do with CSS and what you should do for a particular webpage?</li>
<li>How do you make your design decisions?</li>
<li>What do you think a designer's job is when it comes to styling a webpage?</li>
<li>How do you know when you have too much or too little going on - design- or style-wise - in a webpage?</li>
<li>How would you explain the difference between inline parts of a webpage, like links or text, and block elements, like paragraphs or images?</li>
<li>What seemed easiest about today's work? Most difficult? Why do you think so?</li>
</ol>
<hr/>
<p>
If you or your learners are curious to learn more, check out this <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> from the <a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a> <a href="https://developer.mozilla.org/en-US/Learn">Learning Area</a>. You can also check out <a href="https://developer.mozilla.org/en-US/Learn/CSS/Styling_boxes">this module on styling boxes with CSS</a>.
</p>
<div class="next-up">
Next activity<span class="arrow">→</span><a href="session07-webotron-and-the-scrambled-divs.html">Webotron and the Scrambled Divs</a>
</div>
</li> <!-- end of step-->
<li>
<h1>5. <strong>Optional:</strong> Badging
</h1>
<p>You will apply text- and box-effect CSS styling techniques to inline and block elements on an HTML webpage while learning how to <strong>revise</strong>, <strong>code</strong>, <strong>compose</strong>, and <strong>design</strong>.</p>
<p><strong>Steps to complete this task:</strong></p>
<ol class="fancy">
<li>Go to <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/21556/">this Thimble project</a> and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see web stickers we have created to get you started.</li>
<li>Click on “Tutorial”. </li>
<li>Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.</li>
<li>Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."</li>
</ol>
<p><strong>Evidence:</strong></p>
<p>Share a link to your remixed stylesheet and/or upload a screenshot of your creation!
</p>
<p><strong><a href="https://learning.mozilla.org/en-US/web-literacy/skills/">21st Century Skills:</a></strong></p>
<p>If you successfully complete the above, you will practice the following skills:</p>
<ul class="fancy">
<li>Communication</li>
<li>Creativity</li>
<li>Problem solving</li>
</ul>
<p>The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.</p>
<p>Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others. </p>
<p>If you are interested in applying for badges, visit the <a href="https://www.openbadgeacademy.com/mozillalearning">OBA</a> and/or reach out to <a href="mailto:matt.rogers@digitalme.co.uk"> Matt Rogers</a> or <a href="https://www.openbadgeacademy.com/requestdemo">DigitalMe</a> to schedule a demonstration.</p>
<div class="next-up">
Next activity<span class="arrow">→</span><a href="session07-webotron-and-the-scrambled-divs.html">Webotron and the Scrambled Divs</a>
</div>
</li>
</ul>
</article>
</div>
</body>
</html>