Make a Meme Project Tutorial

Step-by-Step Instructions

  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 10. (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 13 and line 15.
    • The <h1>, <h2> and <h3> tags are used for headings
    • <h1> is generally bigger than <h2>, which is bigger than <h3>, etc.
    • 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. You need to go to the file calles style.css
    • Change the background color on line 4. It uses hex colors. Google that to learn more
    • Change the text color on line 21 for the top line line 30 , for the botom line.
    • Changing Fonts is a bit more difficult it is one line 14. If you want to do this ask for help
  4. Done!
    That's it! Now log in and hit "Publish" to share your work.