Core
Interaction

HTML, CSS and jQuery in-class exercises

Wednesday, 4/19 – Lab

Results

Group 1

Group 2

Instructions

  1. Download the starter kit.
  2. In groups of two, complete the following tasks. Complete any remaining tasks as homework, due next week, 4/25.*
  3. Try to complete each task using as short and simple code as possible. Try to replicate the look of the CSS and HTML exactly, including color, font size, etc.
  4. Each task should reflect how the reference image looks at both the mobile and desktop breakpoints. The reference images are a 1:1 scale when viewed at 100% width. All JavaScript events should be handled using jQuery.
  5. Copy the starter kit files for each task, so that each task has it’s own separate HTML, CSS and JavaScript.

* Please don’t upload the exercises to GitHub until we meet in class next week.

1. Inline Block and Feather

2. Quotes in Cards

Make sure to adjust the type sizes, margins and padding at the mobile breakpoint.

3. Flexible Checkerboard

4. Contain Yourself

5. Text Toggler

Use jQuery to bind a click event to the “Toggle the text” button that shows and hides the paragraph of text each time the button is clicked.

The text is smaller at the mobile breakpoint.

6. Go Fly

Using this image, create an interaction where when you click the seagull it moves it’s position to 50% of the screen.

At the mobile breakpoint this may look like the seagull is closer to the right edge, which is OK.

7. Random Boxes

Create an interaction so that when you click the “Select a random box” button, one of the outlined boxes is randomly chosen and becomes filled in.

All of the boxes should start out not filled in.

8. Extra Credit

Create a long page by setting the height of the HTML tag to a large value, so that you have room to scroll down. When you scroll down the page, make the background color get darker as you scroll down the page, and lighter as you scroll up.

Try to achieve as much of this as possible…