Make a Meme Project Tutorial

Step-by-Step Instructions

Start by logging in to your Glitch account and going to https://glitch.com/~abstracted-sweater. Click on index.html on the left margin and click "Remix to edit" on the top right of the screen. This will create your own copy of the file in your glitch account.

1. Add your own image

   To do that, you'll use the <img> tag.
   • Find a new image on the web. You can search for free images here
   • Right-click or control-click on the image you want. Then select: "Copy image location" (Or "Copy image URL" or "Copy image address", depending on your web browser)
   • Paste your new image URL over top of the old one one on line 13. (Careful! Don't lose the quotation marks.)

   Not sure?

   There are a million meme examples on the web.

2. Change the text

   What do you want your meme to say? Update the top and bottom captions on line 20 and line 22.
   • The tag pairs<h1> </h1>, <h2> </h2>and <h3> </h3> tags are used for headings
   • <h1> is generally bigger than <h2>, which is bigger than <h3>, etc.
   • The first tag in the pair shows where the heading starts, the second where it ends
   • Make sure your new text is enclosed in the opening and closing heading tags

3. Change the style

   CSS is what gives web pages their style. If HTML provides the bones of a web page, CSS is like the skin.
   • Colours in CSS are usually represented by a hexadecimal code, starting with #.
   • You can find more colours and their codes on this site.
   • Change the background color on line 34.
   • Change the text color on line 53 or line 61.

4. Done!

   That's it! Now log in and hit "Publish" to share your work.