teaching machines

CS 318: Lab 18 – Tabbed Viewing

April 9, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Last time we started implementing dropdown menus. We decided to continue that effort today, though I do want to add one extra and related exercised: a tabbed viewer.

Here’s your TODO list:

See you next time!



First, we finish up our lab 17 exercise on switching between small and large displays of our nav links.

Second, create a lab18 directory. Add a partners.html and include your first names and last initials. In this exercise, we’ll tackle the task of presenting content in tabs.


Create a second page named tabs.html and an accompanying stylesheet named tabs.css. Your goal is to create a page that allows the viewer to switch between views within a single web page. Something like this:

I suggest tackling this exercise in this order:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab17 and https://USERNAME.github.io/cs318/lab18 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.