I’ve signed up for Codecademy and Harvard’s CS50—two online courses in computer programming. Last night as the Christmas Eve moonlight dimmed outside my bedroom window, I basked myself in the computer monitor’s comforting glow. I know how to code—poorly.  To fight Jack Frost’s biting chill, I’ll take a warm cup of Java(script). It’s time to understand the languages of the future no matter how much I detested math and problem-solving classes in high school.

Hop on my sleigh to the (binary) North Pole¹. T’is the season of new years resolutions, so let’s make sure we work out our brains as much as we work off our Christmas ham hangovers.

¹Watch the first lecture of CS50 to understand this geekish joke.

Below you may find the HTML code used to make the holiday card pictured on this post. As I described in my post “Website Development: HTML & CSS,” HTML controls the structure and content of what you find on the web. So, the code below provides the raw data (think: images, text, background color) for the holiday card.

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Sacramento' rel='stylesheet' type='text/css'>
<div id="card_wrapper">
</div>
<div id="object_holly">
<img src="/img/card_assets/objects/holly.png">
</div>
<h1 id="main_heading">Happy Holidays</h1>
<div id="main_message">
<p>Kevin</p>
</div>

Below you will find the CSS code used to make the holiday card pictured on this post. As I described in my post “Website Development: HTML & CSS,” CSS controls the style of what you find on the web. So, the code below provides the “look and feel” elements (think: font, object placement & position) of the holiday card.

body {
	background: #222;
}

#card_wrapper {
	width: 700px;
	height: 500px;
	position: relative;
	margin: 20px auto; /* auto will horizontally center div#card_wrapper*/

	background-image: url(/img/card_assets/backgrounds/4.png);
}
#object_holly {
	position: absolute;
	top: 44px; 
	left: 100px; 
}
#main_heading {
	position: absolute;
	top: 280px;
	left: 15%;
	color: white;
	font-family: 'Josefin Sans', sans-serif;
}

#main_message {
	position: absolute;
	top: 350px;
	left: 68%;
	text-align: center;
	color: DarkRed;
	font-family: 'Sacramento', cursive;
	font-size: 300%;
	-webkit-transform: rotate(-11deg);
}