Bismillâh — let's begin. Every page on the internet is built on top of something small: a single index.html file. Today we'll make one from scratch, and we'll teach it to do something real — a gently bouncing ball, driven by pure CSS. No installers, no editors, no npm, no Docker. Two things are enough: a text editor and a browser.

When we start learning anything, the first instruction is often the same. The opening verses of the Qur'an, revealed in the cave of Hirâ, begin with that same word: "Read" — and then, a few lines later, a promise — "He taught by the pen; taught man what he knew not" (Alaq 96:1, 4–5). Fitting, isn't it? The web started the same way: a text file, a mark on the page, a little knowledge passed forward.

1. Create a folder — every craft begins with order

On your desktop (or anywhere you like) create a new folder. Call it my-first-site. This folder is our workshop; whatever we place inside it is a small trust we've taken on. A website is born on a tidy bench, not a cluttered one.

2. Make an index.html file

Inside the folder, create a new file. The name, exactly:

index.html

Why index? Because it means "the start of a directory." When a browser opens a folder, it looks for index.html first — if it finds one, it serves it. This convention has been unchanged since the 1990s.

3. Write the HTML skeleton

Open the file in a plain text editor — Notepad on Windows, TextEdit (plain-text mode) on macOS, gedit or nano on Linux. Paste in this skeleton: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Bismillâh</h1>
  <p>He taught by the pen — taught man what he knew not.</p>
</body>
</html>

Each line earns its keep:

  • <!DOCTYPE html> — tells the browser "I'm modern HTML."
  • <html lang="en"> — the page is in English. Search engines and accessibility tools care about this.
  • <meta charset="utf-8"> — keeps accented letters and non-Latin scripts from breaking.
  • <meta viewport> — the page fits a phone screen properly.
  • <title> — the name in the browser tab.
  • <h1> — the primary heading. Use exactly one per page; it carries the call.
  • <p> — a paragraph.

Save the file.

4. Open it in your browser — first encounter

Double-click index.html. Your default browser opens and you see:

Bismillâh
He taught by the pen — taught man what he knew not.

Small, plain, but yours. This is the moment every programmer has once in their life — you made something from nothing, from a string of characters arranged on purpose. Look at the address bar: 

file:///C:/Users/you/Desktop/my-first-site/index.html

file:// matters: the browser is reading the page from your own disk, not from the internet. No server, no company, no middleman. The page is yours.

5. Add some CSS — let the page breathe

Inside the <head> tag, add this:

<style>
  body {
    font-family: system-ui, sans-serif;
    max-width: 640px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    line-height: 1.7;
    color: #2a1f12;
    background: linear-gradient(180deg, #fef6ea 0%, #fff 68%);
  }
  h1 { color: #5d00ff; }
</style>

Save, press F5 to refresh. Your page breathes now — centered, legible, calm.

The max-width: 640px line protects the reader's eye. Long lines tire; book designers have targeted about 65 characters per line for centuries. Old wisdom, returned through CSS.

6. Teach your page to move — the bouncing ball

The demo at the top of this post is built from these very tags, with a little more CSS — no JavaScript. A ball that drops with gravity-like easing, a shadow that grows and shrinks to match. Here's the meaningful part: 

@keyframes ball-fall {
  0% {
    transform: translateY(-180px);
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.67, 0.18); /* ease-in */
  }
  100% {
    transform: translateY(0) scaleY(0.92);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);    /* ease-out */
  }
}
.ball {
  animation: ball-fall 1.35s infinite alternate;
}

Two ideas, one tiny piece of code:

  • Different timing per segment. The ball accelerates on the way down (ease-in) and decelerates on the way up (ease-out). That's how gravity feels in real life. Two cubic-beziers — not magic, just math on a curve.
  • infinite alternate — the cheapest loop in CSS. The animation plays forward, then backward, then forward — forever, with no JavaScript. The alternate direction also uses the per-keyframe timing functions in reverse, which is why this specific arrangement produces the right physics.

Copy the full source from the demo (use the Copy button on the browser chrome). Paste it into your index.html, save, reload. Your ball bounces — on your disk, in your browser, with no server involved.

7. Share it — before even going online

Copy the file to a USB stick and hand it to a friend. They double-click, they see the same page. That is the lightest form of "distribution" there is.

Other ways:

  • GitHub Pages — free; push your index.html to a repo, the world can read it.
  • Netlify Drop — drag the folder into the browser, get a public URL back.
  • Webstree — sign in, upload the file, get a subdomain of your own.

Whichever you pick, the principle is the same: one index.html, one folder.

A quiet word on intent

What you publish is what you'll be known by. The internet doesn't forget — every word leaves a trace. Make it useful, make it true, make it worth the space it takes. Words are a trust we carry, and the careful writer remembers that. Begin with bismillâh if that fits your heart; begin with a clear intent regardless. Code that starts with a good intent rarely grows ugly.

Takeaways

  1. A webpage is not a special program — it's a text file.
  2. The browser reads that text and renders it as something visual.
  3. You don't need dependencies. React, Vue, Node, Docker — those are there to make complex jobs easier, later.
  4. The foundation hasn't changed since the first generation of the web: <html>, <head>, <body>.
  5. Two cubic-beziers and infinite alternate give you physics-feeling motion with zero JavaScript.

Next post: "Bring your page to life with JavaScript" — a tasbih counter in ten lines. Still zero dependencies.

Happy coding, and good intentions.