How I built a simple tool to code along Youtube tutorials

The Experiment: Combining Youtube tutorials with a simple code editor with real-time previews.

I’m the creative director at F.pro , a boutique UI & UX Design firm, helping B2B Startups craft user friendly products. Codecast, one of my personal sideprojects, badly needed a redesign. With a couple of thousand people using the simple code editor + online (mostly Youtube) tutorials, I decided to build a Youtube player inside the editor and redesign the entire product.

Here’s a visual overview of the process:

This was the ‘old’ Codecast Prototype

1. Redesigning the UI & UX

2. Redesigning the Brand

Check out the sideproject at: www.codecast.me

Or other projects at www.fairpixels.pro