Get HTML, CSS, and JS into a discrete package quickly – use CodePen. I love it and I can’t say enough about it. As a concept it’s genius, and I do a lot of my prototyping on it.
I recently worked on the site for Archway at UGA and they needed some custom interactive visuals for their site. Taking their designs directly, I was able to quickly whip up the necessary HTML and CSS to make this really cool progress tracker for projects, complete with milestones; if you hover over a point on the graph, it will relate an action item used to mark progress in the project. The black rectangle is there for demonstrative purposes; it marks the outer bounds of the figure.
The designs the client handed to us had only accounted for a horizontal bar, but when things got down to mobile they were cluttered. I decided a rotation was necessary, which is no problem to a CSS pro!
CodePen isn’t just for the pros though, it’s fantastic for folks learning how to develop for the first time on the web. I teach regularly, and part of that teaching includes letting my students pick their assignents. One of my favorite assignments to date is the Thanos Text assignment my student Hank thought up. He wanted to take any given sentence and eliminate half the characters at random, and to be able to repeat the process on the same sentence and get different results each time. I love this assignment so much I forked the solution.
CodePen allows you to fork projects, cloning them into your projects and letting you alter them for your own purposes. It isn’t just for small-scale applications either; you can pull in frameworks like React, Twig, and more to design for specific stacks. Here’s a bit of work I ended up including on a Shopify site for a client. You can click a day and a description row will line up underneath it.
CodePen is my favorite way to start making any custom visual elements, it requires no tooling time and you can export your work immediately. Try it out yourself! Accounts are free.
Aaron McCoy 