Keep Calm Poster Tutorial

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

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.

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.

   1. Open the index.html file.
   2. On line 14 you can see the where the crown image is inserted.
   3. Replace crown.svg with thimble.svg.

4. Share your poster

   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.

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.