This was my fifth project and the most advanced tool I’ve built so far. After working on focused frontend tools like my password generator, pixel art editor, and portfolio site, I needed something more isolated — a custom environment dedicated purely to learning.
I built this editor from scratch to create a clean space outside my main workflow. It gives me a dedicated area to experiment with HTML, CSS, and JavaScript without interfering with my core projects. I believe having this tool will increase my ability to learn more deeply and intentionally.
- Multi-panel layout for HTML, CSS, and JavaScript input
- Terminal-inspired design using my personal color scheme (yellow on darkcyan)
- Live preview rendered in an iframe
- JavaScript
console.log()output displayed in a custom on-page console - Manual Run button and optional Auto-Run toggle
- Line numbers beside each input field
- Save and Load buttons (localStorage-based)
- Built using only HTML, CSS, and JavaScript — no frameworks
- HTML
- CSS
- JavaScript (Vanilla)
This tool is more than a simple sandbox — it's a personal learning lab. It separates my experiments from my day-to-day work and provides a simplified space where I can focus. Developing it gave me deeper insights into iframe behavior, DOM manipulation, and scripting structure.
Small details like auto-run toggles, line syncing, and redirecting console output helped me understand how browsers handle interactions and script injection in real time.
- Add support for code export/download
- Syntax highlighting (possibly with Prism.js or custom method)
- Handle
Tabkey input inside textareas - Add basic error logging to the preview console
- Include optional templates/snippets
- Improve mobile responsiveness and scaling
- Use Pixel Editor to create custom favicon and link to html
Try it on GitHub Pages:
https://sudo-j182.github.io/code-editor
A self-contained code editor built to support my own learning process. Styled like a retro terminal, it allows real-time editing, previewing, and logging of HTML, CSS, and JavaScript code. Built from the ground up with no libraries or dependencies.
This is where I experiment and test code outside of bigger projects — built for clarity, focus, and hands-on growth.
© 2025