Top 5 Educational Demos for Web Developers

Instead of telling everyone about my “Top 10 Favorite CodePen Demos” I’d like to take this time to admire interactive tools that provide great use in our daily work and education. Sure I’m dazzled by the shiny’s, but it’s time to talk about the tools that help us learn and aid in the betterment of authors on the Web.


Clippy by Bennett Feely

Clippy lets you see what types of polygon shapes occur when particular values are passed to the clip-path property in CSS. Super handy if you wanna grok what the hell happens when values are changed or desire a tool that can help build clip path shapes; Clippy has the power to do both.

Live Demo :


Box-Sizing by Caroline Artz

The name speaks for itself. What better tool could be out there than one that helps you understand this whole box model thing and why it really stinks to learn initially. A tool like this really helps with visual exploration, but be warned this isn’t only great for beginners; novices and experts can benefit too. The box model does kind of stink to wrap your head around at times.

Live Demo :

SVG Coordinate Systems

SVG Coordinate Systems by Sara Soueidan

Confused by the SVG viewBox attribute? No shit! So is every other Web developer on Earth. The good news is that you’re in luck because Sara made a wonderful interactive tool to help understand why viewBox works the way it does. This is also really handy if you’re dying to make responsive icons or infographics with SVG. See Sarah Drasner for questions and answers on that front.

Live Demo :


Colorable by Brent Jackson

Are you making terrible choices when it comes to readable text that incorporates decent contrast ratios meeting A11Y standards? Well, don’t worry if you have no clue what I just said because if you don’t quite grok the ratios used for color contrast let colorable demonstrate that. Experience bad contrast by adjusting colors into terrible conditions and visualize exactly how difficult reading situations can become when contrast isn’t given proper attention.

Live Demo :

Cubic Bézier

Cubic Bézier by Lea Verou

What can I say, everything that Lea Verou makes is terrible right? Of course not! I’m kidding. I love this tool not only because it’s highly interactive and amusing, but it also helped me a great deal when I was starting to become comfortable using cubic bézier eases. A real pleaser due to the visual nature of eases in general and really the only way to get a “feel” for how an ease “feels.”

Live Demo :


Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web.
  1. ❧ Patricia Ramos shouted:
    2016/08/03 • 8:45 am

    Thanks! Very useful for web developers. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: