Bismillâh, kardeşim. Ready to build something real? Every page on the internet, including the one you're reading now, is built on top of something beautifully small: a single index.html file. Today we'll make one from scratch, together. And we'll teach it something worth teaching: a ball that falls with real weight, squashes when it meets the ground, and rises back up. All with pure CSS, no dependencies.

Two things are enough: a text editor and a browser. Nothing to install, no npm, no Docker. Plain tools that have been quietly powering the web since before most of us were born.

When we start learning anything, the first instruction is often the same word. In the cave of Hirâ, over fourteen hundred years ago, the very first revelation to the Messenger (peace be upon him) began with that word, İqra, "Read." A few lines later comes 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. There is a kind of barakah in code written with that spirit: small, honest, useful. İnşallah yours will be the same.

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 is a small emanet, a 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. Alhamdulillah. 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 the reader; book designers have targeted about 65 characters per line for centuries. Old wisdom, returned through CSS.

6. Teach your page to move, a ball with real weight

The demo at the top of this post is built from the very tags you just wrote, with a little more CSS, no JavaScript at all. A ball that drops with gravity-like easing, squashes when it hits the ground, and stretches back up as it leaves. This is the oldest trick in animation, Walt Disney's animators called it squash and stretch. Six keyframes, the right timing, and suddenly CSS has weight.

Here is the heart of it:

.ball {
  /* Keep the bottom glued to the ground during the squash.
     Without this, the ball "sinks" when it compresses. */
  transform-origin: 50% 100%;
  animation: ball-bounce 1.5s infinite;
}

@keyframes ball-bounce {
  0%   { transform: translateY(-170px) scale(1,    1);    /* apex, round  */
         animation-timing-function: cubic-bezier(0.55, 0.05, 0.85, 0); }   /* ease-in  */
  42%  { transform: translateY(-22px)  scale(0.93, 1.10); /* falling, stretched */ }
  52%  { transform: translateY(0)      scale(1.32, 0.58); /* IMPACT, wide & flat */ }
  56%  { transform: translateY(-10px)  scale(0.88, 1.16); /* recoil, tall & thin */ }
  100% { transform: translateY(-170px) scale(1,    1);    /* back at apex */ }
}

Three ideas to carry:

  • Different easing per segment. The ball accelerates on the way down (ease-in) and decelerates on the way up (ease-out). Gravity in real life works the same, and now your CSS does too.
  • Squash and stretch. The ball changes shape at the moment of impact (1.32 wide, 0.58 tall) and for four short frames after (0.88 wide, 1.16 tall). Your eye reads that as weight.
  • transform-origin: 50% 100% keeps the bottom of the ball on the ground while it squashes. Without it, the ball would seem to sink into the floor, a tiny detail, a huge difference.

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. Alhamdulillah. Now try editing: change the ball's colour, slow the animation down, make it bigger. CSS rewards curiosity.

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 an emanet, and the careful writer remembers that. Begin with bismillâh if that fits your heart; begin with a clear niyyah regardless. Code that starts with a good intent rarely grows ugly, true whether you're building one index.html or a whole platform.

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. Squash and stretch + per-segment easing + transform-origin: 50% 100%, three ideas that turn plain CSS into weight.

Next post: "Bring your page to life with JavaScript", a daily-cups habit tracker in ten lines, opening with bismillâh and closing with alhamdulillah. Still zero dependencies.

Happy coding, my friend. May your pages be honest, your words true, and your work benefit someone you'll never meet. Masallah for the craftsman, alhamdulillah for the craft.