Movie Poster Project Tutorial

Step-by-Step Instructions

1. Add your own actors.

   List your own actors under line 13 of index.html. Or just delete those lines of code if you want to remove them.

   Lists are an important part of many web pages. To create a bulleted list, use the <ul>tag. Then use the <li>tag for each item in the list.

2. Add your own reviews.

   Update the quotes under line 18 of index.html. The <blockquote> tag is used for quotes.

3. Add your own movie title.

   Try editing the movie title and subtitle in lines 41-42 of index.html.

   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.

4. Add your own image.

   Change the image on line 60 of index.html.

   There are several ways to add images to web pages. Here you'll use the "background image" property in CSS.

   How to get the address for your new image:

   • 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 60. (Careful! Don't lose the quotation marks.)

5. 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.
   • Change the text color in line 65.
   • Change the text shadow in line 77. Try adjusting the values and see what happens
   • Change the font on line 66. Try changing it from "Trebuchet MS" to "Georgia".

6. Congratulations!

   You made a movie poster using HTML and CSS! Log in and hit "Publish" to share your work.