Full Stack Development Course

Learn with us for free

Creating a live HTML, CSS and JS displayer

How does one one learn web development you may ask? Simple answer, by building projects. Even if you don't know anything in HTML, CSS and JS; follow along, I bet you you'll learn a lot today, and potentially build amazing websites.

Today, we are building a live html, css and javscript displayer, similar to CodePen.io but better. You may ask how? I don't know either, we'll find out something definitely. Get ready volks, as it is going to be a heck of a ride.

What is HTML?

First, HTML stands for HyperText Markup Language. Think of it as the skeleton of a website. It's what defines the structure and content of the page (text, images, buttons, etc.). It's written using special "tags," which are like instructions for the browser (the software you use to view websites).

HTML Marking Process with explanation

If you are not a complete newbie, you can skip this section directly to the next section. But if you have never placed hand on an HTML document, or even seen it, this is for you:

Now, we move to the body, the main part of your html, that the users will see.

Now, we can close the header tag using </header>

Now, we can close both the div tags using </div>

Now close .preview-pane using </div>

I had also added a footer in the final version, but, it is not required.

Now, we can close the body and html tags also.

Explained till now

Actual code:

I presume, for intermediates, who know these basic principles, they want the code directly and can learn from it only. 

<!DOCTYPE html>
             <html lang="en">
             <head>
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>Sleek HTML/CSS/JS Displayer</title>
                 <link rel="stylesheet" href="style.css">
                 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
             </head>
             <body>
                 <div class="app-container">
                   <header class="app-header">
                       <div class="logo">HTML, CSS and JS Editor</div>
                       <div class="controls">
                         <a href="/blog/" style="text-decoration: none; color: inherit; transition: opacity 0.3s; opacity: 0.8; padding-right: 20px;">Learn HTML, CSS and JS for free</a>
                         <button id="theme-toggle"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button>
                         <button id="full-screen-toggle"><i class="fas fa-expand"></i></button>
                       </div>
             
                   </header>
                     <div class="code-editor-container">
                         <div class="code-pane">
                           <div class="editor-header">
                               <span class="tab active" data-code="html">HTML</span>
                               <span class="tab" data-code="css">CSS</span>
                               <span class="tab" data-code="js">JS</span>
                           </div>
                             <div class="code-area">
                                <div class="line-numbers">1</div>
                                <textarea id="html-code" class="code-input active" placeholder="HTML Code"></textarea>
                                 <textarea id="css-code" class="code-input" placeholder="CSS Code"></textarea>
                                 <textarea id="js-code" class="code-input" placeholder="JavaScript Code"></textarea>
                             </div>
                         </div>
                         <div class="preview-pane">
                             <iframe id="preview"></iframe>
                         </div>
                     </div>
                     <footer>
                         <p>Made with ❤️ by Kavya Sahai</p>
                     </footer>
                 </div>
                 <script src="script.js"></script>
             </body>
             </html>

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls things like colors, fonts, spacing, and the overall visual appearance of your website. Think of it as the decorator of your house, that dictates how the walls look, where the furniture is placed, and generally it makes it beautiful.

Selectors

CSS uses selectors to target HTML elements you want to style. For example, body selects the entire body of your HTML document, and .app-header selects all elements with the class "app-header". We've discussed the classes in the past HTML section.

Properties & Values

After the selector, in the curly braces { }, you have properties and values. For example, color: #333; sets the text color to a dark grey.

Code Explanation

/* Reset & Base Styles */
             * {
                 margin: 0;
                 padding: 0;
                 box-sizing: border-box;
               }

This is like a "reset," to remove default spacing to ensure consistency.

  body {
                   font-family: 'Arial', sans-serif;
                   background-color: #f4f4f4;
                   color: #333;
                   transition: background-color 0.3s, color 0.3s; /*Theme Transition */
               }
             
  body.dark-theme {
                 background-color: #1a1a1a;
                 color: #fff;
               }

This styles the webpage for dark mode.

  .app-container {
                   display: flex;
                   flex-direction: column;
                   min-height: 100vh; /* Ensure full height */
                   overflow-x: hidden;
               }

This makes the app fill the full page.

/* Header Style */
               .app-header{
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   padding: 20px;
                   background-color: #f0f0f0;
                   border-bottom: 1px solid #ddd;
                   transition: background-color 0.3s;
               }
             
  .app-header.dark-theme{
                   background-color:#2a2a2a
               }

This sets a darker background for the header in dark mode.

  .logo {
                   font-size: 1.5em;
                   font-weight: bold;
                   text-decoration: none; /*Remove Link Decoration*/
                   color: #222; /* Text Colour */
                   transition: color 0.3s;
               }
               .app-header.dark-theme .logo {
                   color: #fff;
               }

The second part styles the logo's color for the dark mode header.

  .controls button{
                   background:none;
                   border:none;
                   cursor:pointer;
                   color: #555;
                   transition: color 0.3s;
               }
               .controls button:hover{
                   color: #222;
               }
               .app-header.dark-theme .controls button {
                   color: #fff;
               }
             
  /*Hide default sun icon and display default moon icon*/
               .controls button i.fa-sun {
                   display:none;
               }
               .app-header.dark-theme .controls button i.fa-moon{
                   display: none;
               }
               .app-header.dark-theme .controls button i.fa-sun {
                   display: inline-block;
               }

This hides the sun icon and shows the moon icon, initially. When in Dark Mode, it hides moon, and shows the sun.

  /* Code Editor Area */
               .code-editor-container {
                   display: flex;
                   flex: 1; /* Take remaining space */
                   height:calc(100vh - 130px); /* account for header and footer height */
                   margin: 20px;
                   border: 1px solid #ddd;
                   border-radius: 5px;
                   overflow: hidden; /* Avoid overflow */
               }

This creates a layout for code editor with some spacing around it.

  /* Editor Header*/
               .editor-header {
                   display: flex;
                   background-color: #f8f8f8;
                   border-bottom: 1px solid #ddd;
               }

This adds a thin bottom border and very light background color to the editor header.

  .editor-header .tab {
                   padding: 10px 15px;
                   cursor: pointer;
                   color: #555;
                   transition: background-color 0.3s, color 0.3s;
                   border-bottom: 2px solid transparent;
               }

This styles the editor tabs, which allow us to switch between HTML, CSS, and JS.

  .editor-header .tab:hover {
                  background-color:#eee;
               }

This gives the tab a light gray background when hovered on.

  .editor-header .tab.active {
                   background-color: #fff;
                   border-bottom: 2px solid #4a90e2; /* Highlight active tab */
                   color: #222;
                   font-weight: bold;
               }
               .editor-header .tab.active.dark-theme{
                   color:#fff;
                   background-color: #2a2a2a;
               }

This styles the currently active tab, with a background and a bottom border highlight. The second block of code is for dark mode.

  .code-pane, .preview-pane {
                   flex: 1;
                   padding: 10px;
                   box-sizing: border-box;
                   overflow: hidden; /* prevent code overflow */
               }

This sets up the basic shared styles for code pane and preview pane.

  .code-area {
                   display: flex;
                   height: 100%;
                   position: relative;
               }

This sets up the code area, to have a flexible height and to hold absolute positioned elements.

  .code-area .line-numbers {
                   width: 30px;
                   padding: 10px;
                   text-align: right;
                   border-right: 1px solid #ddd;
                   background-color: #f8f8f8;
                   color: #999;
                   white-space: pre-line;
                   line-height: 1.4;
                   overflow: hidden;
                   user-select: none;
                   transition:background-color 0.3s;
               }
               .code-area .line-numbers.dark-theme{
                   background-color: #2a2a2a;
                   border-right: 1px solid #4a4a4a;
                   color:#666;
               }

This styles the line numbers with background, border and text properties, and the second block of code is for dark mode.

  .code-input {
                   flex: 1;
                   font-family: monospace;
                   padding: 10px;
                   border: none;
                   outline: none;
                   resize: none; /*Remove Resize Handle*/
                   background-color: #fff;
                   line-height: 1.4;
                   height: 100%;
                   display:none; /* Hide Default*/
                   transition: background-color 0.3s;
               }
               .code-input.active {
                   display:block;
               }
               .code-input.dark-theme{
                   background-color:#2a2a2a;
                   color: #eee;
               }

This styles the text area for the code input and adds a dark mode theme to it.

  .preview-pane {
                   border-left: 1px solid #ddd;
                   display: flex;
                   align-items: center;
                   justify-content: center; /* Center iframe in container*/
                   background-color: #fff;
                   transition: border-left 0.3s, background-color 0.3s;
               }
               .preview-pane.dark-theme{
                   background-color: #1a1a1a;
                   border-left: 1px solid #3a3a3a;
               }

This styles the preview pane with a white background, left border and the dark mode styling.

  #preview {
                   width: 100%;
                   height: 100%;
                   border: none;
                   transition: opacity 0.3s; /* Smooth animation */
               }

This styles the iframe which holds the preview.

  /* Footer Styles */
               footer{
                   text-align: center;
                   padding: 10px;
                   border-top: 1px solid #ddd;
                   background-color: #f0f0f0;
                   transition: background-color 0.3s;
               }
               footer.dark-theme {
                   background-color:#2a2a2a;
                   border-top: 1px solid #3a3a3a;
               }

Styles for the footer at the bottom with a thin line and some padding.

  /* Full Screen Styles */
               .full-screen {
                   position: fixed;
                   top: 0;
                   left: 0;
                   width: 100%;
                   height: 100%;
                   background-color: #fff;
                   z-index: 1000; /* Ensure it overlays everything */
               }
               .full-screen .code-editor-container {
                 height:100%;
                 margin: 0;
                 border: none;
               }
               .full-screen .preview-pane {
                   border:none;
               }
               .full-screen .controls button i.fa-expand{
                 display: none;
               }
               .full-screen .controls button i.fa-compress{
                   display:inline-block;
               }

This is responsible for making the code editor to take full screen. It hides the expand icon and shows the compress icon.

  /*Hide default compress icon, show only on fullscreen*/
               .controls button i.fa-compress{
                   display: none;
               }

This hides the compress icon by default.

Key Concepts

And now for the final boss, the JS💀

What is JavaScript?

JavaScript is a programming language that adds interactivity to websites. It allows you to make your webpage dynamic, such as responding to user actions, updating content without reloading the page, and more. In the analogy of house, Javascript is the electrical wiring that controls the lights, the doors, and other interactive elements.

Code Explanation

1. Selecting Elements

const htmlCode = document.getElementById('html-code');
             const cssCode = document.getElementById('css-code');
             const jsCode = document.getElementById('js-code');
             const preview = document.getElementById('preview');
             const codePanes = document.querySelectorAll('.code-input');
             const tabBtns = document.querySelectorAll('.tab');
             const lineNumbers = document.querySelector('.line-numbers');
             const themeToggle = document.getElementById('theme-toggle');
             const appContainer = document.querySelector('.app-container');
             const body = document.querySelector('body');
             const fullScreenToggle = document.getElementById('full-screen-toggle');
             const container = document.querySelector('.app-container');

These lines are selecting various HTML elements from your page using their IDs or classes, so we can later work with them using JavaScript. For instance, it selects all the text boxes for HTML, CSS and JS using respective id, and saves it to a variable named htmlCode, cssCode, jsCode.

2. Setting up a Full Screen toggle

let isFullScreen = false;

This declares a new variable isFullScreen which checks if the editor is in full screen.

3. updatePreview Function

const updatePreview = () => {
                 const html = htmlCode.value;
                 const css = `<style>${cssCode.value}</style>`;
                 const js = `<script>${jsCode.value}</script>`;
                 const combined = `<!DOCTYPE html><html><head>${css}</head><body>${html}${js}</body></html>`;
             
                 preview.srcdoc = combined;
             };

This function takes the code in the editor and shows the result in the preview. It essentially creates the user interface.

4. Debouncing Function

const debounce = (func, delay) => {
                 let timeout;
                 return (...args) => {
                     clearTimeout(timeout);
                     timeout = setTimeout(() => {
                         func.apply(this, args);
                     }, delay);
                 };
             };

This debounce function prevents the preview from updating too frequently, making it more efficient. It's like waiting a few seconds before answering the phone, to ensure you get all the message. This is really useful when you type and the code rerenders for each keystroke.

5. Applying Debounce

const debouncedUpdate = debounce(updatePreview, 200);

This creates a new function called debouncedUpdate by using the previously defined debounce function, which makes updatePreview update at most once every 200 milliseconds.

6. updateLineNumbers Function

const updateLineNumbers = () => {
                 let lines = htmlCode.value.split('\n').length;
                 lineNumbers.innerText = Array.from({length:lines}, (_,i)=> i+1).join("\n");
             }

This function updates the line numbers in the code editor. It's like adding a counter on the side of your house.

7. Event Listeners

codePanes.forEach(codePane => {
               codePane.addEventListener('input', () => {
                 updateLineNumbers();
                 debouncedUpdate();
             });
             });

This sets up the editor to dynamically update whenever text input is detected. It's like the house reacting to your touch.

tabBtns.forEach(tab => {
                 tab.addEventListener('click', function(){
                 const codeType = this.getAttribute('data-code');
                     tabBtns.forEach(btn => btn.classList.remove('active'));
                     this.classList.add('active');
                     codePanes.forEach(pane => {
                       pane.classList.remove('active');
                       if (pane.id === `${codeType}-code`){
                           pane.classList.add('active');
                       }
                     });
                     updateLineNumbers();
                 });
             });

This sets up the tabs to change the code view and update line numbers, when clicked. It's like changing the channel of TV.

themeToggle.addEventListener('click', function() {
                 body.classList.toggle('dark-theme');
                 appContainer.classList.toggle('dark-theme');
                 document.querySelectorAll('.code-input').forEach(el => el.classList.toggle('dark-theme'));
                 document.querySelector('.code-area .line-numbers').classList.toggle('dark-theme');
                 document.querySelectorAll('.editor-header .tab.active').forEach(el => el.classList.toggle('dark-theme'));
                 document.querySelector('.preview-pane').classList.toggle('dark-theme')
                 document.querySelector('footer').classList.toggle('dark-theme');
                 document.querySelector('.app-header').classList.toggle('dark-theme');
             })

This makes the theme toggle button work and change the styles of elements. This adds a functionality to the house.

fullScreenToggle.addEventListener('click', function(){
                 isFullScreen = !isFullScreen;
                 if(isFullScreen){
                   container.classList.add('full-screen');
                 } else {
                   container.classList.remove('full-screen');
                 }
                 fullScreenToggle.innerHTML = isFullScreen ? '<i class="fas fa-compress"></i>' : '<i class="fas fa-expand"></i>';
             })

This makes the fullscreen button to work, and toggles the full screen view.

8. Initial setup and first update

updateLineNumbers();
             updatePreview();

These lines call the updateLineNumbers() and updatePreview() functions immediately when the page loads, which sets up the line numbers and renders the initial page.

Key Concepts

For, the final, want to see how our code editor looks? It looks pretty clean. Want to see it yourself? Why not? Modern HTML, CSS and JS Editor