Intermediate Web Literacy I | CSS Fonts Extension Activity
Made by Mozilla, released under the CC-BY-SA license
35 minutes
Jump right into this Thimble project to improve the fonts on this remix-able movie poster while learning how to revise, code, compose, and design.
Web Literacy Skills
21st Century Skills
Learning Objectives
- Independently style text on a movie-poster webpage to match the mood of its picture.
Audience
- 13+
- Intermediate web users
Materials
- Internet-connected computers
- Markers
- Paper
-
1. Preparation
Learning Progression
In this lesson, your learners will:
- Use their prior knowledge of how to match webfonts to the feeling, mood, or tone of a webpage to independently remix a movie poster inside this Thimble project.
- Reflect on their learning.
You Should...
Do today's activity on your own to become familiar with how to find and use webfonts on a webpage.
- Follow this link to the Thimble project for this activity.
- Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
- Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
- 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.
Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.
-
2. Remix this Movie Poster
30 minutesInvite your learners to visit today's project on Thimble.
This is a movie poster with fonts that don't match up with the picture on the poster. The fonts feel old-fashioned, while the picture looks like something from science fiction.
Ask your learners to take what they learned about webfonts in the last activity to improve the poster and match its fonts to its picture. learners can follow the tutorial inside the project and ask you and one another for help.
With the last 5-10 minutes of the activity, ask learners to walk around the room and review each other's work and decisions about which fonts to use where on the poster.
-
3. Reflection and Assessment
5 minutesAfter 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.
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.
- What were you able to remember about using webfonts on your own? What did you need help with on this project?
- How did you decide which fonts to use on the poster?
- What seemed easiest about this project? What seemed most difficult?
- What did you like or what surprised you about your peers' fonts and posters?
- What kind of poster would you like to make on your own? How would you match the pictures and words?
If you or your learners are curious to learn more, check out this Introduction to CSS or this module on styling text from the Mozilla Developer Network Learning Area.
-
4. Optional: Badging
Jump right into this Thimble project to improve the fonts on this remixable movie poster while learning how to revise, code, compose, and design.
Steps to complete this task:
- Go to this Thimble project 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.
- Click on “Tutorial”.
- Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
- Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."
Evidence:
Share a link to your redesigned movie poster and/or take a screenshot of your creation!
If you successfully complete the above, you will practice the following skills:
- Communication
- Creativity
- Problem solving
The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.
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.
If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.