Skip to main content

Practice 8

For this practice exercise, we are going to create a little 2-page website :)

note

You can see a completed example here:

  1. In your "8" folder, create an index.html file with the HTML for a layout. And create a style.css file with the CSS for a responsive layout.

    Feel free to reuse HTML and CSS code from a previous exercise.

  2. Create a table of data within the main element of index.html.

    Use at least 3 columns and 5 rows.

    Provide some type of data. It could by anything that would make sense in a table—even something that you make up.

  3. Use the caption, th, thead, tfoot, and tbody elements.

  4. Use at least one colspan or rowspan.

  5. In the tfoot, provide a source for your data. It doesn't have to be real. You could just make up something.

  6. Style your table in some way with CSS. For example, you could give table rows background-colors.

  7. Create a second HTML file named list.html with the same layout as used for index.html. This will be the second page of our little website.

    You could simply copy the HTML code from index.html, paste the code into list.html, and remove the table from the main element.

    At this point, you should have 2 HTML files and 1 CSS file.

  8. In the main element of list.html, create a list of at least 10 list items. This could be a <ul> or <ol>.

  9. Use list-style or list-style-type or list-style-image or background-image in your CSS file to change the bullets for these list items.

  10. Nest a <ul> or <ol> element within one of your <li> elements.

  11. Use a descendant selector in the CSS to style the nested list items differently. Just an example:

    .felafels ul li {
        color: #FFBDC0;
        font-weight: bold;
    }

    Or without a class added to the ul element:

    main ul ul li {
        color: #FFBDC0;
        font-weight: bold;
    }

  12. Add the following HTML code somewhere within the body of both index.html and list.html:

    <nav>
        <ul>
            <li><a href="index.html">Table</a></li>
            <li><a href="list.html">List</a></li>
        </ul>
    </nav>

  13. Test the links and make sure they work, allowing you to navigate back and forth between the 2 pages of your website.

  14. Make sure both pages pass HTML and CSS validation.

  15. Push your changes to your Github repository.

note

You can see a completed example here: