When done, submit here.

1


2


3


4


5


6


7


8


9


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;

24


25


26

Code

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

27

Video


28


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


47


When done, submit here.