K.Z. Kaeding kzkaed

## html
<html>
  <head> </head>
  <body> </body>
</html>

## head
<html>
  <head>
   <link rel="stylesheet" href="workshop.css" type="text/css">
   <script src="workshop.js" type="text/javascript" async></script>
  </head>
  <body> </body>
</html>

## body
<html>
  <head> </head>
  <body>
    <div></div>
    <p></p>
    <h1></h1>
    <ul>
      <li></li>
    </ul>
    <a></a>

## console
var variable = 'hello';
console.log(variable);

This is viewable in the console. (CTRL click, inspect)

## variable-javascript
var name = 'kristin';
var number = 2;
var words = ['run' ,'ball' , 'cat'];

## document-js
function hideShape(number) {
  document.getElementById('shape' + number).style.visibility = 'hidden';
}

function showShape(number) {
  document.getElementById('shape' + number).style.visibility = 'visible';
}

function hideElement(elementName, id) {
  document.getElementById(elementName + id).style.visibility = 'hidden';

## function
function add (x , y) {
  return x + y;
}

function buildSentence (adjective, noun, verb, adverb) {
  return 'The' + adjective + noun + verb + adverb;
}

function madlib (adjective, noun, verb, adverb) {
  var sentence = buildSentence(adjective, noun, verb, adverb);

## tags
tag
element
attribute

<html>
<head>
<body>
<div>
<p>
<a>

## css-topics
background
color
padding
margin

font-family
font-style
font-weight

border

## javascript-topics
variable
function
referencing the DOM
   document.getElementById
   document.getElementsByClassName
     .style.visibility
     .innerHTML
logic
  if/else
  for
	<html>
	<head>
	<link rel="stylesheet" href="workshop.css" type="text/css">
	<script src="workshop.js" type="text/javascript" async></script>
	</head>
	<body> </body>
	</html>
	<html>
	<head> </head>
	<body>
	<div></div>
	<p></p>
	<h1></h1>
	<ul>
	<li></li>
	</ul>
	<a></a>
	var variable = 'hello';
	console.log(variable);

	This is viewable in the console. (CTRL click, inspect)
	var name = 'kristin';
	var number = 2;
	var words = ['run' ,'ball' , 'cat'];
	function hideShape(number) {
	document.getElementById('shape' + number).style.visibility = 'hidden';
	}

	function showShape(number) {
	document.getElementById('shape' + number).style.visibility = 'visible';
	}

	function hideElement(elementName, id) {
	document.getElementById(elementName + id).style.visibility = 'hidden';
	function add (x , y) {
	return x + y;
	}

	function buildSentence (adjective, noun, verb, adverb) {
	return 'The' + adjective + noun + verb + adverb;
	}

	function madlib (adjective, noun, verb, adverb) {
	var sentence = buildSentence(adjective, noun, verb, adverb);
	background
	color
	padding
	margin

	font-family
	font-style
	font-weight

	border
	variable
	function
	referencing the DOM
	document.getElementById
	document.getElementsByClassName
	.style.visibility
	.innerHTML
	logic
	if/else
	for