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

Jan 15, 2025 - 22:24
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.

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 and JS These are span tags for the CSS and Javascript tabs.
  • ...
    This div container holds the area for the different editors.
  • 1
    This div contains the line numbers. In this case only the "1" is there.
    • 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