Lesson Plan

Back to School Postcare Tutorial

Remix an online postcard to share your feelings and predictions about the new school year.

Use it to teach/learn:

  • Editing HTML content
  • CSS colors
  • Creating an interactive element with JavaScript

In this activity, you'll remix an online postcard to share your feelings and predictions about the new school year.

A post-card is a small, paper note, just a bit bigger than a smartphone, that people used to send one another from camp or vacation. The front had a picture of wherever the sender went, and the back had a note written on it for the person who got the postcard.

Postcards were like Instagrams back when written letters were like emails.

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

1 Change the message on the front of the card

To change the message on the front of your postcard, you'll edit HTML, the language of the Web.

Go to line 245 . Change the text between the h1 tags to write your own welcome-back-to-school message. You might add your school name or change the whole getting to something else, like, 'What's good, Mountaintop Middle School?'

2 Change the image on the front of the card

To change the image on the front of your postcard, you'll search for a new picture online and then edit the CSS, or styling language, on your webpage.

Go to line 139. Find the web address, or URL, of the background-image in this part of the stylesheet, which lives inside the style tags. This is where the background image for the front of the card lives.

Next, open up a new tab in your browser. Go to https://search.creativecommons.org.

This page lets you use popular search engines to find pictures that have Creative Commons licenses. People give their pictures Creative Commons licenses so others can use them creatively so long as they follow simple rules, like giving the original owner of the picture credit.

Use this search page to find a picture of your school or a picture that represents how you feel about coming back to school. Click through the search thumbnail to find the picture. Right-click on the picture and choose 'copy image location' or 'copy image address.'

Paste that new location or address into the code of your postcard to replace the background image on the front of the card.

Finally, find the credits part of the body of your webpage, near the bottom of the code. Change the credits for any photos you replace in your remix.

3 Change the note on the back of the card.

To change the note on the back of your postcard, you'll edit HTML, the language of the Web.

Go to line 261. This is where the text of your note lives on the web page. Change 'Teacher' to your teacher's name and then change the items labeled with the li, or 'list-item,' tag so that your note shares 3 items about you.

Finally, change the last line to something like, 'From your student C.' Use your initial, or maybe your first name, but don't include your last name. Never give out too much information online.

4 Change the predictions

To change the predictions on your postcard, you'll edit JavaScript, a coding language that makes webpages interactive.

Go to line 54. Find the collection of words like 'Awesome.' This collection of words is called an 'array,' and each word in it is called a 'value.' This set of words, or values, gives our program some choices when it wants to know what to do with the variable called answers.

Variables are the building blocks of programs. The variable called answers uses the words in its array to help your program work.

Because the values of answers here are words that show up on your webpage, they are called 'strings' in coding languages.

At line 54, replace the words in the array with your own words. Pick words that show the way you feel about the new school year. As you add your words, be sure to keep all the punctuation the same. Don't lose any quotation marks, commas, or semicolons.

5 Mess around with the code

Congratulations on editing HTML, CSS, and JavaScript!

If you'd like to explore and remix more of the page, in the CSS part of the page, called the stylesheet, and change some values to see what happens to your page. Messing with things like color, font-size, or transform ought to cause big changes to your page. You can also change the fonts if you look for clues in the code on lines 24 and 77!

If you're interested, try to find the background-colors and font colors in the stylesheet and change them to match your school colors.

You can do this with the Thimble color picker. Click on the code or word that describes the color ie. #000000 and then click Control + E on Windows, or Command+E on a Mac. This will bring up the color picker. Play around with it until you find a color you like.

6 Share your postcard

When you're ready to share your postcard, click 'Publish' in Thimble and then fill out the information in the Publish box.

Once you've published your page, copy the URL and send it to your teacher or ask your teacher to write it down for you.

Share the URL with your family to start a conversation about what you're looking forward to this year at school and any worries you have about the year.

Great job, you finished the tutorial! You can make your own tutorials for others to follow by adding a tutorial.html page to any Thimble project.