When done, submit here.

1

2

3

Student examples

4

Student examples

5

6

7

8

9

Video

Links

10

11

12

13

14

Video

15

16

17

18

19

20

Code

p {
    font-variant: small-caps;
}

21

Code

.project p {
    font-variant: small-caps;
}

22

Code

#project1 {
    font-variant: small-caps;
}

23

Code

margin-left: 1px;
background-color: #ab1234;
padding: 1px;
width: 1px;

Links

24

25

26

Code

.project {
    margin-left: 20px;
    background-color: #deebf7;
    padding: 20px;
    width: 525px;
}

27

Video

28

Links

29

30

Code

...
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/introHCI.css" rel="stylesheet">
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (blelow), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
...

31

Video

Code

...
<a href="project.html" class="thumbnail">
    <img src="..." alt="..." class="img">
    <p>...</p>
</a>
...

32

Video

Code

<body>
    <div class="container">
        ...

33

34

Code

<div class="jumbotron">
    <h1>Michael Bernstein</h1>
    <p>human-computer interaction &middot; social computing &middot; crowdsourcing</p>
</div>

35

Video

Code

...

	<script src="https://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/introHCI.js"></script>
</body>
</html>

36

37

38

Video

39

40

Code

$("a.thumbnail").click(projectClick);

41

Code

function projectClick(e) {

    // prevent the page from reloading
     
    e.preventDefault();
    // In an event handler, $(this) refers to
     
    // the object that triggered the event
     
    $(this).css("background-color", "#7fff00");
}

42

Video

43

44

45

46

Submit your work

47

When done, submit here.