My First HTML and CSS Page: From a Blank Screen to a Living Page

From Tukuk-OS Wiki, the free knowledge base.

Building a first web page with no template: understanding document structure, colour choices, and the disbelief when the browser displays your work.

I still remember the moment my browser displayed a page I had written myself for the first time. No page builder, no template, no drag-and-drop builder — just one file called index.html that I had typed patiently for two hours. When I pressed F5 and saw my heading and paragraphs appear, the feeling beat the joy of any video game.

HTML: Skeleton, Not Decoration

My first lesson was understanding that HTML is structure. Every element is a box: <h1> for the main heading, <p> for a paragraph, <a> for a link, <img> for an image. I learned that tags open and close, and my most common mistake was forgetting to close one tag until the whole page fell apart.

I also learned the meaning of labels. <div> is just an empty container, while <section>, <article> and <nav> give the document meaning. At first I considered this pedantic decoration; then I understood that search engines like Tukuk-OS itself read this structure to understand what a page is about.

CSS: Where Life Comes in Colour

If HTML is the bones, CSS is the skin and clothing. My first line of CSS was body { background-color: #f0f0f0; } and changing the background colour felt like painting a house for the first time. I then learned about margin (space outside) and padding (space inside), the two concepts that took me longest to distinguish.

The secret that helped me: I drew boxes on paper. Every element has three layers — content, padding, border, margin — and when I saw it as a postcard, the "box model" stopped being confusing.

My First Design Mistakes

My first page was full of bright colours, fonts of every size, and animations I found in tutorials. It was ugly. I later learned three rules that saved my design: limit yourself to two or three colours, use a consistent heading size scale, and give space generously. Whitespace is not wasted space — it is the space that lets the eye rest.

I also learned the basics of responsiveness: the viewport meta tag and media queries. When I opened my page on a phone and it did not jitter all over the screen, I realised that good design starts with respecting different screens.

Tools I Used (All Free)

At first I wrote HTML in Notepad, and that was actually not bad training — it forced me to memorise the basic structure until it became automatic. When my files grew I switched to an open source code editor that gave me line numbers and syntax highlighting. The difference was sudden: errors that had been hidden in the middle of a file now jumped to the eye.

I also installed the developer tools that come built into every modern browser. The "Elements" tab lets me see the actual boxes my CSS generates, including the padding and margin that do not show. I spent hours just changing values live and watching how the page responded — a free practice session that needed no file saving.

The biggest discovery was that almost everything I needed was already free and installed. I bought no software during the entire first year. The only real investment was time — and that is something no amount of money can buy.

Layout: Where Design Is Really Decided

After months of changing colours and fonts I noticed my pages still did not look "clean" even though every element was beautiful on its own. The problem was layout — how elements group together and how space is shared between them.

I learned three layout concepts that solved almost all my problems. First, a single grid: one centred container with a sensible maximum width, so text never becomes too long to read. Second, vertical rhythm: consistent spacing between sections so the eye has stable expectations. Third, priority: one main element (usually the heading) must attract first attention, and everything else recedes.

When I fixed those three things on my first page it instantly changed from "a group of elements" to "a designed page". That lesson holds to this day — Tukuk-OS's layout is still built on a single grid, consistent vertical rhythm, and one accent colour that draws first attention.

From a Dead Page to a Live Server

After several static pages I wanted to see my files served to other devices. I installed Node.js, wrote ten lines of web server, and served that public folder. When my younger sibling opened that address on their phone and saw my page, the concept of "a website" stopped being abstract. It was a file actually being sent across a network.

Lessons I Still Use in Tukuk-OS

Tukuk-OS's design today still carries the DNA of my first page: one accent colour, consistent typography, generous padding, and a layout that works on phones. New templates I write always start with pure HTML and CSS before any JavaScript, because I believe if something does not work without JS it is not good enough yet.

See also

• From a Broken Laptop to My First Try: Where It All Began
• Learning Ubuntu From Scratch: The Terminal That Scared Me
• My First JavaScript: When the Page Started Talking Back