HTML Canlı Kod Önizle Yazmak İstiyorum Nereden Başlayacağımı bilmiyorum

Merhaba. Bir canlı kod önizleme yazmak istiyorum fakat nereden ne şekilde başlayacağımı bilmiyorum kafamda deli sorular var derler ya şuan aynen o durumdayım. PHP, JS, HTML bilgim var ama ne yapacağım nasıl yapacağım onu bilmiyorum nereden başlamam gerek kod yazılan kısmı çekip önizle butona basınca önizle kısmında gözükmesini mi sağlamam gerek vesaire vesaire. Yardımcı olur musunuz ne yapmam gerekir ?

Kod bilgin olduğuna emin misin?

Her programın bir algoritması vardır ve programlamayı öğrenmeden önce algoritma (plan) oluşturmayı öğrenmek gerekir. Onu öğrenmedikten sonra ne kadar biliyorum derseniz diyin. Sadece kendinizi kandırmış olursunuz.

Basit olarak şöyle bir tablo yapısı düşünün,
id, css, javascript, html, header, footer

Kullanıcı ilgili kolonları doldurup önizle butonuna bastığında bunları db ye kaydedeceksiniz ve önizleme sayfanızda ilgili alanları değiştririp (basit text replace işlemi) iframe içinde kullanıcıya göstereceksiniz.

<html>
     {HEADER}
<head>
     {JAVASCRIPT}
     {CSS}
</head>
<body>
     {HTML}
</body>
     {FOOTER}
</html>

https://enlight.nyc/projects/code-editor/
Demo: https://tryenlight.github.io/demo/co...ect/index.html

@Onur89TR; algoritma kısmında belirli bir şeyler yazıyorum fakat iş uygulamaya gelince sıkıntı oluyor. Bir çok şey çıkıyor ortaya oradan oraya atlayayım şunu halledeyim derken her şey karışıp gidiyor. İşin içine bir çok şey giriyor. Örneğin sadece kod editörü olarak değil mesela ben bazen örnek kod paylaşıp o kodunda hem yazılıp hem çalıştırılmasını istiyorum. İşte o durumdayım onu nasıl yapacağımı düşünüyorum. Örneğin bu kısımda ki gibi :https://www.w3schools.com/html/tryit...yhtml_headings

@Frans; hocam o kısımda tamamımda fakat yukarda bahsettiğim linkte ki kısmı nasıl yapacağımı bilmiyorum aslında.

@Daryl_Dixon; hocam sizede teşekkür ederim.