Lesson Plan

Keep Calm Poster Thimble Tutorial

Teach or learn how to design a poster, edit HTML content and CSS styles.

Follow the steps in this tutorial to learn how to change the words, colors and images in the Keep Calm Thimble poster by editing HTML & CSS.

Remixable project and tutorial can be found here: https://mzl.la/keepcalmposter

English Language Arts
English Language Learning
Grades 7 - 12
All Notes
Teacher Notes
Student Notes

1 Change the words of the poster

Go to line 18 of index.html and change the text inside the h1 tag to something new. Switch to Preview mode to see your changes as you type.

Tip: The <br> tag represents a line break. Unlike most tags, <br> tags do not need a corresponding closing tag.

2 Change the background color

Use the file tree on the left side of the screen to open the style.css file.

Go to line 2 to change the background-color property. Replace darkred with a different color, like yellowgreen. Be sure not to have spaces between the words that describe your color.

Another option is to use a color picker. Click on the word yellowgreen (or whatever color you wrote) and then click Control + E on a Windows keyboard, or Command+E on a Mac. You should see a color picker. Play around with it until you find a color you like.

3 Change the Thimble Image

This project comes with two built-in image options — the crown and a thimble. You can see the thimble by clicking on thimble.svg in the file tree.

Open the index.html file.

On line 14 you can see the where the crown image is inserted.

Replace crown.svg with thimble.svg.

You can also add an image from your computer to your file tree and use it in your poster. Click the green + button at the top of the file tree and choose the "Upload" option. Drag a file from your desktop, find the file on your computer, or take a selfie using your computer's camera!

4 Change Fonts

Go to line 1 ofthe style.css file. You’ll see the properties defined for the body of the poster. Play around by editing some of the properties. For example, change the color property to green, or the text-align to right.

On line 16, you’ll see the properties defined for the h1 text in the poster. h1 means “header 1.” Play around by editing some of the properties. For example, increase the font-size to 70px, increase the letter-spacing to 4px, change the text-transform to lowercase, and the font-weight to bold.

5 Share Your Post

When you're ready to share your poster, click the Publish button in the top righthand corner. Give your project a description and then click the green Publish button. You'll see a URL for your project. Send the URL to your family and friends, or post it on Facebook or Twitter using the hashtag #teachtheweb.