Movie Poster Project Tutorial

Step-by-Step Instructions

  1. Add your own actors.

    List your own 4 actors under line 13 of index.html.

    Recaping Lists: There are two types of lists in HTML — ordered and unordered. An ordered list uses numbers, letters, roman numbers, or other sets of text that have an order to them as bullet points. Unordered lists use symbols, images, and other non-text based items that don't usually have an order as bullet points.

    You use the <ol> tag for creating ordered lists and the <ul> tag for unordered lists. For every item in your list, you need to use the <li> tag to tell the browser that everything between the <li> and </li> tags represents one item in the list.
    For example, if you want an ordered list of names to show up like:
    1. Jane
    2. Abdul
    3. Brianna
    your code might look something like: <ol>
      <li>Jane</li>
      <li>Abdul</li>
      <li>Brianna</li>
    </ol>

    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 22 of index.html. The <blockquote> tag and its closing tag is used for quotes.
  3. Add your own movie title.
    Try editing the movie title and subtitle in lines 45-46 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 8 of index.html.

    There are several ways to add images to web pages. Here you'll use the <img> HTML tag. Remember to use the src HTML attribute to set the link for the image.

    Tip to find images: Go to https://www.pexels.com/ and search for an image you want to add to your website. Once you find your image, click on it. You will need the URL or address for the image and to get that, right-click on the expanded image and click on "Copy image location" (Or "Copy image URL" or "Copy image address", depending on your web browser). The link to your image is now copied and you can paste it anywhere you need it.

  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. Open the style.css file and change a few CSS rules there.
    • Change the text color on line 12.
    • Change the text shadow on line 33. Try adjusting the values and see what happens
    • Change the font on line 13. Try changing it from "Trebuchet MS" to "Georgia".
  6. Congratulations!
    You made a movie poster using HTML and CSS!