Scribd
Upload
0 views

group assignment for level

The document is a tutorial on creating a live HTML, CSS, and JavaScript displayer, similar to CodePen.io, aimed at beginners in web development. It explains the basic structure of an HTML document, including the head and body sections, and provides detailed descriptions of various HTML elements and their purposes. The tutorial emphasizes hands-on learning through project building, encouraging users to follow along and create their own web applications.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

group assignment for level

The document is a tutorial on creating a live HTML, CSS, and JavaScript displayer, similar to CodePen.io, aimed at beginners in web development. It explains the basic structure of an HTML document, including the head and body sections, and provides detailed descriptions of various HTML elements and their purposes. The tutorial emphasizes hands-on learning through project building, encouraging users to follow along and create their own web applications.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

DEV Community

Create account

46

Cover image for Creating a live HTML, CSS and JS displayer


Kavya Sahai
Kavya Sahai
Posted on Jan 16 • Originally published at web-dev-free.netlify.app

18

3
Creating a live HTML, CSS and JS displayer
#
webdev
#
javascript
#
tutorial
#
beginners
Full Stack Development Course (5 Part Series)
1
Something Big Coming Soon
2
How does the internet work? Part 1
3
How does the Internet Work? Part 2
4
HTTP/2 Protocol
5
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:

<!DOCTYPE html> 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.
<html lang="en"> 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).
<head> 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.
<meta charset="UTF-8">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.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 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.
<title>Sleek HTML/CSS/JS Displayer</title> This is what appears in the browser tab or window title bar.
It's like adding a nameplate in front of your house.
<link rel="stylesheet" href="style.css"> 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.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../all.min.css"> 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.
</head> This closes the head tag.
Now, we move to the body, the main part of your html, that the users will see.

<body> 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.
<div class="app-container">
<div> 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.
<header class="app-header"> is where the header content goes (title, logo, buttons, etc.). This is like the
front door and entryway of your house.
<div class="logo">HTML, CSS and JS Editor</div> This is another div container, but this one contains the
name of the editor.
<div class="controls"> ... </div> This div contains elements that control the app, including a link and a
couple of buttons.
<a href="/blog/" style="...; transition: opacity 0.3s; ...">Learn HTML, CSS and JS for free</a>
<a> 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
<button id="theme-toggle"><i class="fas fa-moon"></i><i class="fas fa-sun"></i></button> 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. <i> tags contain icons from the font awesome library. It renders the moon icon, used to
indicate Dark Mode.
<button id="full-screen-toggle"><i class="fas fa-expand"></i></button> Another button with an icon
inside it, that is used to toggle fullscreen.
Now, we can close the header tag using </header>

<div class="code-editor-container"> ... </div> 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 <div
class="code-pane"> ... </div> This contains the "code" part of the application.
<div class="editor-header"> ... </div> This holds the elements on top of the code area (HTML, CSS, JS)
<span class="tab active" data-code="html">HTML</span> <span> 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.
<span class="tab" data-code="css">CSS</span> and <span class="tab" data-code="js">JS</span> These
are span tags for the CSS and Javascript tabs.
<div class="code-area"> ... </div> This div container holds the area for the different editors.
<div class="line-numbers">1</div> This div contains the line numbers. In this case only the "1" is there.
<textarea id="html-code" class="code-input active" placeholder="HTML Code"></textarea>
<textarea> 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 the textarea.
placeholder="HTML Code" adds a message that is displayed in the textarea until the user types in it.
<textarea id="css-code" class="code-input" placeholder="CSS Code"></textarea> and <textarea id="js-
code" class="code-input" placeholder="JavaScript Code"></textarea> These are similar to the HTML
textarea, but used for CSS and JavaScript code respectively.
Now, we can close both the div tags using </div>

<div class="preview-pane"> ... </div> This is where the website preview will be.
<iframe id="preview"></iframe> is used to embed another webpage (in this case, the code written in the
textareas) into the current page.
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


HTML uses tags (e.g., <div>, <p>, <button>) to structure content, and their roles.
The <head> section contains metadata (information about the page).
The <body> section contains the visible content.
External CSS files (linked with <link>) handle the visual appearance.
External JavaScript files (linked with <script>) handle interactivity.

You might also like