Quick ‘n’ Dirty Mockups


Every developer strives to write and deploy code as quickly and efficiently as possible. Most of us have workflows that we have developed over years of building shipping code. We tweak little things, memorize keyboard shortcuts, and make Sublime snippets that fill a blank document with everything needed to get a Bootstrap page built in the least amount of keystrokes possible. Unfortunately, my high school didn’t allow students to download program and there was no way I was going to work Notepad.

I set to work making myself a barebones CodePen clone. The school district blocked sites with a heavy hand and I didn’t have access to creature comforts I was afforded at home. LiveHTML allowed me to quickly mock up HTML, CSS, and JavaScript and see a live preview of my code.

I added the ability to include Bootstrap to rapidly build out grid systems and see the results instantly.

This meant even without access to Bootply, CodePen, or JSFiddle, I was able to stay busy, even during English class trips to the library for “research.”