teaching machines

CS 318: Lab 20 – Animations

Dear students, Today we explore transitions to add a little life to our webpages using CSS transitions. As an example, we’ll create a list whose items pop out when hovered. We start with a list: <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> Let’s add some background color to each item: li { background-color: blue; color: white; […]

CS 318: Lab 19 – Forms

Dear students, Thus far we have focused on one half of the communication process: the “speaking” of our ideas to our sites’ visitors. Generally this is not enough. We would like to hear back from our visitors. We want them to join a mailing list, make an order, contribute an idea, vote, and who knows […]

CS 318: Lab 18 – Tabbed Viewing

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: Breathe easy! See you next time! Sincerely, Lab First, we finish up our lab 17 exercise on switching between small and […]

CS 318: Lab 17 – Hamburger Menus

Dear students, Today’s lab is designed around something I saw in a lot of your mockups: dropdown navigation menus. There aren’t a lot of new ideas here, but application of old ones. So, I won’t talk much. However, in this lab we start to incorporate a few of the pseudoclass selectors that you met in […]

CS 318: Lab 16 – Tables

Dear students, Today we explore the HTML table element. At its core, a table is just a grid of rows and columns. It supports headers, borders, and cells that extend across multiple columns and multiple rows. Before div and CSS positioning came along, tables were the primary vehicle for structuring a page. It was awful. […]

CS 318: WordPress for the Rest of Semester

Your task for April and May is to extend the style of your blog with some CSS and write six posts about topics of your choosing. By the end of the semester you should have a total of 15 posts. The posts don’t need to be long. Feel free to share poetry, a photo diary, […]

CS 318: Project Prototype – due April 23

Your next milestone in the project is to create a digital prototype for your site. You will present this prototype to randomly assigned classmates for an initial evaluation. Task 1: Create a Prototype Create a first draft of your site in a folder named prototype1 in your GitHub project. Name this directory exactly; no spaces, […]

CS 318: Lab 15 – Midterm

Dear students, Today we have a midterm. I’m cheering for you. Here’s your TODO list for next time: Complete CSS Diner, a game for learning a whole new set of CSS selectors that we will use throughout the second half of the semester. Read chapter 9 in your book. On a quarter sheet, share 2-3 […]

CS 318: Lab 14 – Viewport Parallax

Dear students, Let’s shake things up a bit today. When game developers get together to build a game in a very short amount of time, they call that a game jam. We will have a web jam. I want to devote all of today’s lab time to that, so I won’t be doing any talking. […]

CS 318: Lab 13 – Responsive Design

Dear students, Today we begin our investigation into responsive design, the central mechanic of which is selectively applying styles based on the viewing context. You have one style for large desktop displays, another for tablets, another for phones, and so on. In general, we might do the following on smaller screens: Remove images or present […]

1 2 3 7