<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SE8: Web Design</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="/css/style.css">
<link rel="icon"
type="image/png"
href="images/bsk.jpeg">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Fauna+One|Oleo+Script|Fugaz+One|Monda|Unica+One|Alegreya:400italic,400|Abril+Fatface|Vollkorn' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Astronomer" -->
<link href='https://fonts.googleapis.com/css?family=Megrim|Roboto+Slab:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The River" -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800|Gentium+Basic:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Crow and the Pitcher" -->
<link href='https://fonts.googleapis.com/css?family=Questrial|Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Fox and the Grapes" -->
<link href='https://fonts.googleapis.com/css?family=Ovo|Muli:300,400' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Moon and Her Mother: Anon03" -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Vast+Shadow|Oswald:300|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Prophet" -->
<link href='https://fonts.googleapis.com/css?family=Neuton:300' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The wolves, the sheep, and the ram" -->
<link href='https://fonts.googleapis.com/css?family=Quattrocento|Fanwood+Text' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Boy Bathing" -->
<link href='https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:700' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Serpent and The Eagle " -->
<link href='https://fonts.googleapis.com/css?family=Vollkorn:700italic,700|Exo:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Fir-Tree" -->
<link href='https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded|Slabo+13px|Ultra' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The fox and the lion" -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Lora:400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Horse and the Groom" -->
<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Owl and the Birds" -->
<link href='https://fonts.googleapis.com/css?family=Domine' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "The Crow and The Raven" -->
<link href='https://fonts.googleapis.com/css?family=Nixie+One|Libre+Baskerville' rel='stylesheet' type='text/css'>
<!-- Google web fonts for "Jupiter And The Tortoise" -->
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<!-- Typography Project stylesheet -->
<link href="css/google-type.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Web Design</h1></div>
<div class="col-md-6">
<h2>Lessons & Links</h2>
<a href="SE8_WebDesignDiagnostic/index.html"><mark>Web Design Diagnostic</mark></a>
<hr>
<div class="lesson"><a href="typography/index.html">Typography</a></div>
<div class="lesson"><a href="readability-typography/">Readability & Typography Demo</a></div>
<div class="lessons"><a href="bubbleletters/index.html">JavaScript Animation</a></div><!-- <p>A fun little project that I got from Codecademy, with the addition of random colors using <code>Math.floor(Math.random()*255)</code></p> -->
<!-- <div class="lesson"><a href="pairprogramming.html">Pair Programming</a></div> -->
<!-- <div class="lesson"><a href="september-15/index.html">Elements of Design</a></div> -->
<div class="lesson"><a href="grootevent/index.html">Event Handlers</a></div>
<div class="lesson"><a href="lightbulb/index.html">Lightbulb</a></div>
<div class="lesson"><a href="groot/index.html">Groot</a></div>
<div class="lesson"><a href="onmouseover/index.html">onMouseOver Event</a></div>
<div class="lesson"><a href="color-clock/index.html">What #color is it?</a></div>
<div class="lesson"><a href="jquery/index.html">jQuery Demo</a></div>
<div class="lesson"><a href="jquerytodo/index.html">jQuery To Do List</a></div>
<div class="lesson"><a href="FinalProject/index.html">Final Project checklist</a></div><!-- <p>These three are examples of the one-off websites that I make in lieu of slides.</p> -->
<div class="lesson"><a href="/JavaScriptReview.html">JavaScript Review Sheet</a></div>
<!-- <div class="lesson"><a href="/portfolioupdates/index.html">Portfolio Updates</a></div> -->
</div>
<div class="col-md-6">
<h2>Resources</h2>
<div class="caption">
<p>Free tools and reference materials for designing and building webpages.</p></div>
<dl class="dl">
<dt><a href="https://atom.io">Atom</a></dt>
<dd>Free cross-platform text editor.</dd>
<dt><a href="http://codepen.io">Codepen</a></dt>
<dd>Web-based IDE</dd>
<dt><a href="http://giphy.com">Giphy</a></dt>
<dd>The best source of gifs</dd>
<dt><a href="https://color.adobe.com/create/color-wheel/">Adobe Color Wheel</a></dt>
<dd>Excellent resource for working with hex colors</dd>
<dt><a href="http://teamcolors.arc90.com/">Sports Team Hex Colors</a></dt>
<dd>Always popular with students</dd>
<dt><a href="http://femmebot.github.io/google-type/">Google Font Pairings</a></dt>
<dd>Excellent resource for web typography.</dd>
Lessons