Learning HTML - Prerequisite Skills & Environment Setup

#Introduction

Welcome to the Learning HTML series! This series will take you through mastering HTML — the standard markup language for building web pages — from the most basic document structure to production-ready markup for modern designs. There are 23 episodes in total, organized into four phases: basics and document structure, semantics and accessibility, dynamic content and integration with CSS and JavaScript, and best practices, optimization, and responsive web.

But before writing your first HTML tag, there are a few basic skills and software you must have. Why do these prerequisites matter? Because HTML is the foundation of every web page. If the document structure is wrong, the CSS and JavaScript you write in the following episodes will be wrong too.

This Episode 0 is your roadmap: we'll make sure you have the basic skills, set up your text editor and browser, create your first project, and verify that the page actually renders through a local server. Once this episode is done, the rest of the series can be followed comfortably.

#Basic Skills You Must Master

#Understanding Web Documents

The web works on a client-server model. Your browser is the client that sends a request over the HTTP protocol, and the server responds with an HTML document. That document is what gets displayed as the page. Understand the simple flow below:

• The browser sends a request to a URL.
• The server responds with an HTML file.
• The browser reads the markup, builds the internal structure, then renders the content.

The flow above is the foundation you'll keep using. You don't need to master network details — just understand that every web page starts from a single HTML document.

#The Habit of Reading and Writing Markup

The most important skill is not memorizing tags, but building the habit of reading code and writing consistently. Whenever you open any page, get used to right-clicking and choosing View Source to see the original markup. Observe how tags are written, how attributes are used, and how indentation is formed.

Consistent indentation and lowercase tag names will make your code easy to read. These small habits pay off in episode 19 when we cover clean, maintainable HTML.

#Software You Need to Prepare

#Text Editor

You need a text editor. The main recommendation is Visual Studio Code because it's free, lightweight, and has a great ecosystem of extensions for frontend work. Alternatives: Neovim, Sublime Text, or any editor you're comfortable with.

For VS Code, install these two extensions: Prettier for consistently formatted code, and Live Server for preview with automatic reload. Both will save you a lot of time throughout this series.

#Browser and DevTools

The browser is the HTML runtime. Use the latest versions of Google Chrome, Firefox, or Microsoft Edge. All modern browsers come with DevTools, which becomes your laboratory: inspect elements, see the document structure in the Elements panel, and check network responses in the Network panel.

Open DevTools by pressing F12 or Ctrl+Shift+I. The habit of exploring through DevTools will be used in nearly every episode of this series.

#Local Server

A local server matters because many features and conventions only work over the HTTP protocol, not with files opened directly from disk. Python provides a built-in static server:

python3 -m http.server 8080

The command python3 -m http.server 8080 serves every file in the folder where you run it at http://localhost:8080. If Python isn't installed, an alternative is Node.js with npx serve ..

#Setting Up Your First Project

#Folder Structure

Create a project folder with a clean structure from the start:

mkdir belajar-html
cd belajar-html
touch index.html
mkdir css js

With this structure, stylesheets live in the css subfolder and scripts live in the js subfolder. Consistent folder structure will make things easier for you as the project grows in the later episodes.

#A Minimal HTML Document

Now fill index.html with a minimal, valid document:

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini paragraf pertama saya.</p>
  </body>
</html>

This is the structure that will be expanded in episode 2. We'll break down every part of it — from <!DOCTYPE html> to the body element — one by one.

#Verifying the Environment

#Opening the Page in the Browser

With the server running, open http://localhost:8080 in your browser. You should see the title Halo Dunia and one paragraph. Verify it from the terminal as well:

curl -s http://localhost:8080/index.html

If the server is active, this command returns the contents of index.html. The command curl -s http://localhost:8080/index.html shows that the document is reachable over HTTP — confirmation that your environment is correct.

#Readiness Checklist

Before moving on to episode 1, make sure everything is in place:

• Text editor installed with the Live Server and Prettier extensions.
• A modern browser installed and DevTools can be opened.
• The static server is running and the page renders at localhost:8080.
• The minimal HTML document is saved as index.html.
• The css and js folders are created for the upcoming projects.

If anything is missing, stop here and complete it. A solid foundation will make the next 22 episodes feel much lighter.

#Closing

Key takeaways:

• HTML is the foundation of web pages: the browser requests a document over HTTP, then renders its markup.
• The habit of reading code and consistent indentation matters more than memorizing tags.
• Use a text editor with Live Server for a fast workflow.
• Run a local server with python3 -m http.server 8080 so pages are accessed over HTTP.
• Verify your first page with the browser and the curl command.

In the next episode, episode 1, we'll cover understanding HTML and its role in the web — the definition and brief history of HTML, its position in the CSS and JavaScript stack, and how the browser processes markup into a page. Make sure your environment is ready, because the Learning HTML journey is just beginning!