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: First we start with this declaration, this is like saying, "Hey browser, this is an HTML5 document!" It tells the browser what kind of document to expect so it can render it correctly. This is the main container for everything on the page. It's like the foundation of the house. lang="en" tells the browser that the language of the content is English(United States). This part of the code contains information about the webpage, not what you see on the page itself. It's like the blueprints' notes and specifications. Mostly, web devs (Abbr.: Web Developers) add it for SEO purposes, and it is generally advised to add one. This line specifies what character set the page uses. UTF-8 is a standard one that allows the page to display most characters and symbols correctly. It's like ensuring the letters and numbers in your blueprints can be understood by everyone. This is important for websites to work well on different devices (phones, tablets, computers). It tells the browser how to scale and fit the page to the screen. Sleek HTML/CSS/JS Displayer This is what appears in the browser tab or window title bar. It's like adding a nameplate in front of your house. This line is saying "Hey! Go find a file called style.css and use it to make the page look pretty." style.css is a separate file that contains CSS (Cascading Style Sheets), which is responsible for the visual appearance of the page (colors, fonts, spacing, layout). It's like painting the walls and furnishing the house. For those, experienced web devs, who are seeing this, this seems out of a VSC boiler plate, because it is. For new developers, in VSC, one can use ! to generate a boilerplate fast. One can also set custom boiler plates, I do that a lot. This line also links to a CSS file, but this one is hosted on a website (cdnjs.cloudflare.com). It contains definitions for icons used in the page, from a library called Font Awesome. It's like getting a pre-built PC. This closes the head tag. Now, we move to the body, the main part of your html, that the users will see. This is where the content of your webpage goes—what users see in the browser window. It's like the rooms of the house, which the guests see. is a generic container that groups other elements. It's like dividing your house into sections. class="app-container" is a label for this container so you can style it with CSS or work with it using JavaScript. is where the header content goes (title, logo, buttons, etc.). This is like the front door and entryway of your house. HTML, CSS and JS Editor This is another div container, but this one contains the name of the editor. ... This div contains elements that control the app, including a link and a couple of buttons. Learn HTML, CSS and JS for free is an anchor tag that creates a link. When clicked, it takes you to the address written in href (in this case to /blog/). style is an attribute that lets you apply custom styles, instead of always changing the html code. The other styles specified here affect how the link looks and how it changes when it's hovered over. It will be discussed later, in CSS section :D This creates a button. id="theme-toggle" is a unique identifier for this button so you can style it with CSS or work with it using JavaScript. tags contain icons from the font awesome library. It renders the moon icon, used to indicate Dark Mode. Another button with an icon inside it, that is used to toggle fullscreen. Now, we can close the header tag using ... This div container holds the parts that make up the code editor. Now, within the .code-editor-container (Abbr.: div with class = code-editor-container) we can add ... This contains the "code" part of the application. ... This holds the elements on top of the code area (HTML, CSS, JS) HTML is a simple container for text. class="tab active" gives it styling and indicates this tab is active. data-code="html" is data ass
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:
-
First we start with this declaration, this is like saying, "Hey browser, this is an HTML5 document!" It tells the browser what kind of document to expect so it can render it correctly.
-
This is the main container for everything on the page. It's like the foundation of the house.
lang="en"
tells the browser that the language of the content is English(United States). -
This part of the code contains information about the webpage, not what you see on the page itself. It's like the blueprints' notes and specifications. Mostly, web devs (Abbr.: Web Developers) add it for SEO purposes, and it is generally advised to add one.
-
This line specifies what character set the page uses. UTF-8 is a standard one that allows the page to display most characters and symbols correctly. It's like ensuring the letters and numbers in your blueprints can be understood by everyone.
-
This is important for websites to work well on different devices (phones, tablets, computers). It tells the browser how to scale and fit the page to the screen.
-
This is what appears in the browser tab or window title bar. It's like adding a nameplate in front of your house.Sleek HTML/CSS/JS Displayer -
This line is saying "Hey! Go find a file called style.css and use it to make the page look pretty." style.css is a separate file that contains CSS (Cascading Style Sheets), which is responsible for the visual appearance of the page (colors, fonts, spacing, layout). It's like painting the walls and furnishing the house. For those, experienced web devs, who are seeing this, this seems out of a VSC boiler plate, because it is. For new developers, in VSC, one can use
!
to generate a boilerplate fast. One can also set custom boiler plates, I do that a lot. -
This line also links to a CSS file, but this one is hosted on a website (cdnjs.cloudflare.com). It contains definitions for icons used in the page, from a library called Font Awesome. It's like getting a pre-built PC.
-
This closes the head tag.
Now, we move to the body, the main part of your html, that the users will see.
-
This is where the content of your webpage goes—what users see in the browser window. It's like the rooms of the house, which the guests see.
-
-
is a generic container that groups other elements. It's like dividing your house into sections.
class="app-container"
is a label for this container so you can style it with CSS or work with it using JavaScript.
is where the header content goes (title, logo, buttons, etc.). This is like the front door and entryway of your house.
This is anotherHTML, CSS and JS Editordiv
container, but this one contains the name of the editor.
This div contains elements that control the app, including a link and a couple of buttons....Learn HTML, CSS and JS for free
-
is an anchor tag that creates a link. When clicked, it takes you to the address written in href (in this case to /blog/).
-
style
is an attribute that lets you apply custom styles, instead of always changing the html code. - The other styles specified here affect how the link looks and how it changes when it's hovered over. It will be discussed later, in CSS section :D
This creates a button.
id="theme-toggle"
is a unique identifier for this button so you can style it with CSS or work with it using JavaScript.tags contain icons from the font awesome library. It renders the moon icon, used to indicate Dark Mode.
Another button with an icon inside it, that is used to toggle fullscreen.
Now, we can close the header tag using
-
This...div
container holds the parts that make up the code editor. - Now, within the
.code-editor-container
(Abbr.: div with class = code-editor-container) we can add
This contains the "code" part of the application.... -
This holds the elements on top of the code area (HTML, CSS, JS)... -
HTML
is a simple container for text.
class="tab active"
gives it styling and indicates this tab is active.data-code="html"
is data associated with the element. -
CSS
andJS
These are span tags for the CSS and Javascript tabs. -
This...div
container holds the area for the different editors. -
This div contains the line numbers. In this case only the "1" is there.1 -
-
is a multiline text input box where users can write code.
-
id="html-code"
is an identifier to work with it using JavaScript or style it with CSS. -
class="code-input active"
allows you to style thetextarea
. -
placeholder="HTML Code"
adds a message that is displayed in thetextarea
until the user types in it.
-
-
and
These are similar to the HTML
textarea
, but used for CSS and JavaScript code respectively.
Now, we can close both the div tags using
-
This is where the website preview will be.... -
is used to embed another webpage (in this case, the code written in the textareas) into the current page.
Now close .preview-pane using
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
- HTML uses tags (e.g., ,
,
) to structure content, and their roles.
- The
section contains metadata (information about the page).
- The
section contains the visible content.
- External CSS files (linked with
) handle the visual appearance.
- External JavaScript files (linked with
) handle interactivity.
Actual code:
I presume, for intermediates, who know these basic principles, they want the code directly and can learn from it only.
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0">
Sleek HTML/CSS/JS Displayer rel="stylesheet" href="style.css"> 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" /> class="app-container">class="app-header"> class="logo">HTML, CSS and JS Editorclass="code-editor-container">Made with ❤️ by Kavya Sahaiclass="code-pane">class="editor-header"> class="tab active" data-code="html">HTML class="tab" data-code="css">CSS class="tab" data-code="js">JSclass="code-area">class="line-numbers">1class="preview-pane">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 a universal selector, which applies to all the elements on your page. -
margin: 0;
: Sets the outer space around elements to zero, meaning no space is provided to the element. -
padding: 0;
: Sets the inner space (between an element's border and its content) to zero. -
box-sizing: border-box;
makes the size of the box to account for border and padding
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 */ }
-
font-family: 'Arial', sans-serif;
: Sets the default font to Arial, or any generic sans-serif font if Arial is not available. -
background-color: #f4f4f4;
: Sets a very light gray background. -
color: #333;
: Sets the default text color to dark gray. -
transition: background-color 0.3s, color 0.3s;
: creates smooth transitions of 0.3 seconds, when the color/background color changes.
body.dark-theme { background-color: #1a1a1a; color: #fff; }
-
body.dark-theme
: This selects thebody
element, when the class.dark-theme
is added. -
background-color: #1a1a1a;
: sets a dark background. -
color:#fff;
: sets a white text.
This styles the webpage for dark mode.
.app-container { display: flex; flex-direction: column; min-height: 100vh; /* Ensure full height */ overflow-x: hidden; }
-
display: flex;
: Turns the container into a flexbox, which allows you to control the layout of its children. -
flex-direction: column;
: Arranges the content inside theapp-container
in a vertical column. -
min-height: 100vh;
: Sets the minimum height of the container to the entire viewport height. -
overflow-x:hidden;
: hides the elements that overflow horizontally.
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; }
-
justify-content: space-between;
: Pushes the elements within the header (logo and controls) to the opposite ends, spreading them out. -
align-items: center;
: Vertically aligns the elements in the center of the header. -
padding: 20px;
: adds 20px inner spacing to the element. -
border-bottom: 1px solid #ddd;
: Adds a 1px thin gray border at the bottom. -
transition: background-color 0.3s;
: adds a smooth background color change effect for 0.3 seconds
.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; }
-
font-size: 1.5em;
: Em Units makes the text's size 1.5 times the parent text size. -
font-weight: bold;
: Makes the text bold. -
text-decoration: none;
: Removes the default underline from links. -
color: #222;
: sets the text color to a dark color.
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; }
-
background: none;
: Makes the button's background transparent. -
border: none;
: Removes the default border around the button. -
cursor: pointer
: changes cursor to pointer when hovered on the button. -
color: #555;
: Sets an initial text color for the buttons. -
transition: color 0.3s;
: makes a smooth color change of the text on hover. -
color: #222;
when the button is hovered, change color to another dark tone. - The last part defines the text color for dark mode buttons.
/*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; }
-
display:none;
: makes the element hidden. -
display:inline-block;
: makes the element visible.
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 */ }
-
flex: 1;
makes the element grow, and occupy remaining space. -
height:calc(100vh - 130px);
Sets the height of the element to 100% of the screen height minus 130 pixels. -
border-radius: 5px;
: Gives the container rounded corners. -
overflow: hidden;
: prevents elements from overflowing on the container.
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; }
-
white-space: pre-line;
: Makes line numbers to break correctly -
user-select: none;
: Makes the line numbers non-selectable
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; }
-
font-family: monospace;
: Sets the code font to a monospaced font, where all letters occupy same space. -
outline: none;
: Removes the default outline that appears when an element is focused. -
resize: none;
: removes the resize handler. -
display: none;
: Hide the element by default. -
display:block;
: show the element, when the class active is added.
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.-
transition: opacity 0.3s;
: Smoothly transitions the opacity
/* 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; }
-
position: fixed;
: makes an element stick to a position in viewport and not move with the scroll. -
z-index:1000;
makes the element to go above other elements, and appear on top.
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
- Flexbox: A powerful layout tool to arrange elements in a container.
- Transitions: Used to create smooth animations when properties change.
- Dark Mode: Styles for when the page is in dark mode (darker backgrounds, lighter text, etc.).
- Specific Selectors
.class
selects all elements with the class specified.
And now for the final boss, the JS
- The
-