To teach my students basic JavaScript, I use the Codecademy JavaScript modules, along with, you know, a curriculum.

The Codecademy module leads right into this lovely project:


See the Pen Technology (Random Colors) by S-K (@bsk) on CodePen.

Press RERUN a few times. What do you notice?

Here, I'm going to highlight a few uses of JavaScript.

Event Handlers

Event handlers are a piece of JavaScript code that run when something happens on the page, like a click:

See the Pen JavaScript Lightbulb by S-K (@bsk) on CodePen.

or the mouse hovering over something:


See the Pen Interactive Page (onmouseover) by S-K (@bsk) on CodePen.

Here, we use onmouseover to change the color of the navbar, and onclick to toggle the button.

  1. Thanks to Aankit Patel for creating this demo!

So, that's fun, but I want to focus on JavaScript functions. Why? Because they let you do awesome stuff like this →

Bootstrap has a whole bunch of JavaScript built it. With a little bit of work, you can make this:

This is how I displayed the code in the Typography lesson.

This is the collapse.js plugin. You can find it here.
This is the modal.js plugin. You can find it here.

If you are beyond the Bootstrap examples, this is a clock, built in JavaScript, where the color is set by the hex # of the time.

									//let's display the current time var d, h, m, s, color; function displayTime() { d = new Date(); //new data object h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); //add zero to the left of the numbers if they are single digits if
										(h <= 9) h = '0' + h; if (m <= 9) m = '0' + m; if (s <= 9) s = '0' + s; color = "#" + h + m + s; //set background color = color; //set time document.getElementById("hex").innerHTML
										= color; //retrigger the function every second setTimeout(displayTime, 1000); } //call the function displayTime();

See the Pen Color Clock by S-K (@bsk) on CodePen.

  1. Who doesn't love interactive footnotes?

  1. This is still a work in progress...

If you build it...

Today, I'd like you to try to build a functioning website, from scratch at This is harder than Wix, or Google Sites, but it's also real, and more authentically yours than those could possibly be.

Try to use our Principles of design

  1. Keep it simple
  2. Use meaningful symbolism
  3. Use 2-3 basic colors
  4. No lettering or seals
  5. Be distinctive, or be related

The marriage of good design and civic pride is something that we need in all places.

Roman Mars

This year, I decided to put my money where my mouth was, and write a webpage everyday. Some of them were (are) terrible. All of them are open-source, accessible at my Github account. I also got a lot better at writing code.

I got stuck, a lot.

I broke things, a lot.

I also learned to give a 💩.

Thanks for your time.