Intermediate Web Literacy I | CSS Fonts
Made by Mozilla, released under the CC-BY-SA license
60 minutes
You will use webfonts to create moods and tones on web pages while learning how to revise, search, code, compose, design, and remix.
Web Literacy Skills
21st Century Skills
Learning Objectives
- Understand and be able to explain the connection between an HTML webpage and a CSS stylesheet.
- Search online for webfonts that match the mood, purpose, tone, and voice of a webpage.
- Use HTML and CSS to include webfonts in a webpage.
- Choose fonts that match the mood, purpose, tone, and voice of a webpage.
Audience
- 13+
- Intermediate web users
Materials
- Internet-connected computers
- Markers
- Paper
-
1. Preparation
Learning Progression
In this lesson, your learners will:
- Brainstorm a list of adjectives.
- Each draw a word in such a way that the word looks like what it describes.
- Learn the definition of "webfonts" and how to bring them into a webpage through Cascading Stylesheets (CSS) to create a specific feeling, mood, or tone.
- Browse a collection of webfonts.
- Remix this Thimble project to change the webfonts to reflect the connections they see between the fonts and the feelings on the page.
- 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. Making a Word Wall
25 minutesWorking with a learner-generated list of adjectives, create a word wall of descriptive words written in ways that match their meanings.
- Start a brief, 2-3 minute brainstorming session and ask learners to come up with as many different adjectives as possible. Record their answers on a chalkboard, whiteboard, large Post-It, or shared document on a projected computer.
- Explain that next each learner will pick a word and then use markers and paper to write it in a way that helps show its meaning. For example, in the West, a learner might write the word, 'happy,' in a loose, cheery script and bright color.
- Pick an equitable way to go around the room and let each learner pick a word to illustrate.
- Give learners 10 minutes to write and otherwise illustrate their words.
- Ask learners to take another 2-3 minutes to tack or tape their words up on a shared space in the classroom.
- Invite learners to take a 3-5 minute gallery walk around the shared space and to look at how their peers showed words' meanings through the way they wrote the words.
- Facilitate a brief, 5 minute discussion about what learners notice in their word wall. Which styling and design decisions seem especially successful or right-on to learners? What kinds of words were easy or difficult to write in an expressive way? Why?
-
3. Using Webfonts in Web Projects
30 minutesAfter the word wall conversation, ask learners to take their seats at computers.
Explain that next we're going to learn how to bring new fonts hosted on the Web into our own webpages and projects.
Share the link to today's project 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.
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.
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:
- Learn how HTML webpages and CSS stylesheets work together to call external webfonts into learners' projects from 3rd party websites.
- Search for webfonts that match different feelings listed in today's activity.
- Replace the original webfonts in today's activity with webfonts learners pick themselves to express the feelings listed in the project.
- Mess with the code to discover new ways to style fonts on a webpage in an independent and playful way.
-
4. 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.
- How does font choice connect to design? To put it another way, What kinds of decisions do we have to make about which fonts we use in a web project?
- Would you give an example of when you might use one kind of font instead of another?
- What kind of font would you use if you wanted to share information in a neutral way, like an informational website?
- What seemed easiest or most difficult about today's activity? Why?
- What else do you wonder about webfonts after completing today's activity?
- How do you imagine people create and share fonts?
- Where else in your every day life do you notice fonts in action?
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.
-
5. Optional: Badging
You will use webfonts to create moods and tones on web pages while learning how to revise, search, code, compose, design, and remix.
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 remixed Webfonts webpage and/or upload 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.