Skip to main content

Practice 9

For this practice exercise, we are going to create a 3-page website!

note

You can see a completed example here:

  1. Copy the index.html and list.html files from practice 8 and place them in your "9" folder.

  2. Create a folder named "css". Copy the style.css file from practice 8 and place it within the practice 9 "css" folder.

  3. Create a third page file named intrapage.html that uses the same HTML/CSS layout as used in index.html and list.html.

    folders and files for practice exercise 9

  4. In intrapage.html, add a bunch of text with at least 3 headings with IDs.

    Lorem Ipsum or Bacon Ipsum is fine for the content.

    In intrapage.html, create at least 3 intra-page links at the top of your main content column that jumps the user down to sections within the page content.

    For example, this could be one of the links at the top of your content:

    <a href="#biscuits">Biscuits</a>

    And that would correspond to an element in the page with an ID named "biscuits":

    <h2 id="biscuits">Biscuits</h2>

    You can see a completed intrapage.html example here.

    caution

    IDs are case-sensitive. Consider using all lowercase for the IDs to avoid issues.

    Also note that IDs can't contain spaces.

  5. Create a navigation menu that provides links to all 3 pages of your website. Place the HTML code for the nav in the same location in all 3 pages.

    <nav class="primary-menu">
        <ul>
            <li><a href="index.html">Table</a></li>
            <li><a href="list.html">List</a></li>
            <li><a href="intrapage.html">Intra-page Links</a></li>
        </ul>
    </nav>

  6. Use CSS to make the menu horizontal.

    See the navigation menu example in lesson 9.

    Also see the practice 9 example.

  7. Embed a video in one or more pages of your website.

    One option is to embed the video using a service like YouTube.

    To get the HTML embed code on YouTube's website, click Share beneath the video. Then click Embed and copy the HTML code provided.

    Or you could embed a video using the HTML <video> element.

  8. Within the "css" folder, create a new file named print.css.

    Add CSS code in print.css following the print CSS guidelines outlined in the lesson.

    print css file for practice exercise 9

  9. In the head of all 3 pages, add a stylesheet link for your print CSS file.

    Also add media="screen" to your stylesheet link for style.css:

    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" media="print" href="css/print.css">

  10. Make sure each page passes HTML and CSS validation.

  11. Push your changes to your Github repository.

note

You can see a completed example here: