A now page is a small personal page that answers one question: what are you doing these days? Plenty of writers and developers keep one as a public snapshot — what they are learning, building, reading. It is the ideal first project for three reasons. The content is real and already in your head, so you are not staring at lorem ipsum. The page is small enough to finish in an evening. And you will want to update it next month, which means you will come back to the code — and coming back is where the learning actually happens.
You need two tools: the browser you already have and a text editor. VS Code is free and is what most developers use, though plain Notepad would technically do. No installs beyond that, no framework, no terminal. Create a folder called now-page and put two empty files in it: index.html and styles.css. That folder is the entire project.
We will work in the order browsers do: structure first, styling second. This is not just tidiness. Most beginner CSS pain traces back to styling a page whose structure was never thought through — you end up fighting your own markup.
HTML stands for HyperText Markup Language, which is a grand name for a simple idea: you wrap pieces of content in labels so the browser knows what each piece is. The labels are called elements, and most of them come in pairs — an opening tag, the content, a closing tag.
<p>This sentence lives inside a paragraph element.</p>A full page is elements nested inside other elements, plus a little ceremony at the top. Open index.html and type this in. Type it rather than pasting — your fingers learn syntax faster than your eyes do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jana Novak — Now</title>
</head>
<body>
<h1>What I am doing now</h1>
<p>Learning HTML, one element at a time.</p>
</body>
</html>Each line earns its place. The doctype tells the browser to use modern rendering rules instead of a compatibility mode from twenty years ago. The lang attribute lets screen readers pick the right pronunciation. Everything inside head is information about the page — the browser tab title, the character encoding — while everything inside body is the page. Save the file, double-click it, and a browser opens your first web page.
warning
The viewport meta tag is the line beginners delete first, because removing it changes nothing on a laptop. Then the page opens on a phone and everything is shrunk to a thumbnail: without that line, mobile browsers assume the page was designed for desktop and zoom way out. Keep it in every page you ever write.
Now the real structure. You could build the whole page out of div elements — a div is a generic box with no meaning — and it would look identical in the browser. Resist that. HTML has elements that say what a thing is: header for the page's introduction, main for the primary content, section for each distinct topic, footer for the closing notes, ul and li for lists, a for links.
The meaning is not decoration. Semantic elements pay you back in concrete ways:
- Screen readers let users jump straight between landmarks like header, main and footer — a page made only of divs is a wall they have to walk through line by line
- The browser does free work for you: links are keyboard-focusable, lists are announced with their item count, buttons respond to Enter and Space — none of which a styled div gives you
- Search engines and future-you both read the structure; main and section say at a glance what a soup of divs never will
Headings have their own rule: one h1 per page — the page's title — then h2 for sections, h3 inside those if needed. Pick heading levels by hierarchy, never by how big the text looks. Size is CSS's job, and you will set it yourself in a few minutes.
Here is the full structure of the now page. Read it top to bottom and notice that it already makes sense, before a single line of CSS exists:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jana Novak — Now</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<h1>Jana Novak</h1>
<p class="tagline">What I am doing now — June 2026</p>
</header>
<main>
<section class="card">
<h2>Learning</h2>
<p>HTML and CSS, about an hour a day. This page is the proof.</p>
</section>
<section class="card">
<h2>Building</h2>
<ul>
<li>This now page — my first hand-written web page</li>
<li>A reading-list page for the books on my desk</li>
</ul>
</section>
<section class="card">
<h2>Elsewhere</h2>
<ul class="links">
<li><a href="https://github.com/jananovak">GitHub</a></li>
<li><a href="mailto:jana@example.com">Email</a></li>
</ul>
</section>
</main>
<footer class="site-footer">
<p>Updated by hand in a text editor. Last change: June 2026.</p>
</footer>
</body>
</html>Two details to notice. The link element in the head connects our second file — the browser fetches styles.css and applies it to this page. And several elements carry a class attribute. Classes do nothing on their own; they are hooks, names we are about to aim CSS at.
CSS — Cascading Style Sheets — controls how the structure looks: colours, spacing, fonts, layout. A stylesheet is a list of rules, and every rule has the same shape: a selector that says which elements you mean, then declarations between braces that say what should change.
h1 {
font-size: 2.25rem;
color: #1a1a2e;
}
.tagline {
color: #5a5a6e;
}The first selector targets every h1 by its tag name. The second targets anything carrying the class tagline — the dot prefix means class. You can also select by id with a hash, but classes are the everyday tool because they are reusable: ten elements can share one class, and one element can carry several.
There are three places CSS can live: inline on an element through a style attribute, inside a style tag in the head, or in a separate file linked from the head. Always choose the separate file. Inline styles look convenient and become a trap — the same colour gets repeated fifteen times, there is no single place to restyle the site, and inline declarations are the hardest kind to override later. A class is written once, used everywhere, and changed in one place. That is the entire argument, and it is enough.
Every element on a page — every paragraph, link, image — is a rectangular box, and CSS describes that box in four layers. Content is the text or image itself. Padding is space between the content and the edge of the box. The border is the edge. Margin is space the box demands from its neighbours, outside the border. Once you see pages as nested boxes, the spacing questions that confuse beginners — why is there a gap here, why does this not line up — collapse into a single question: which layer of which box am I looking at?
.card {
padding: 1.5rem; /* space inside the border */
border: 1px solid #e2e4e9; /* the edge itself */
margin-bottom: 1rem; /* space outside, pushing neighbours away */
border-radius: 12px;
background-color: #ffffff;
}One historical trap is worth disarming right away. By default, width in CSS means the width of the content only — padding and border get added on top, so a 300-pixel-wide box with padding is not actually 300 pixels wide. Nobody thinks that way, which is why nearly every stylesheet on the modern web starts by switching every element to the sane model:
* {
box-sizing: border-box;
}tip
Right-click any element on any website and choose Inspect. The coloured diagram in the corner of the browser's DevTools is the box model of that exact element — content, padding, border, margin, with live numbers. Ten minutes of poking at real sites teaches the box model better than any diagram in a tutorial, including this one.
Now the full stylesheet. The block at the top, :root, defines custom properties — variables you name yourself, prefixed with two dashes and read back with var(). Define the colours once there, and changing the whole palette later becomes a five-line edit instead of a find-and-replace across the file.
:root {
--color-text: #1a1a2e;
--color-muted: #5a5a6e;
--color-bg: #f6f7f9;
--color-surface: #ffffff;
--color-border: #e2e4e9;
}
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
max-width: 42rem;
padding: 2rem 1.25rem;
font-family: system-ui, sans-serif;
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-bg);
}
.site-header {
padding: 2rem 0;
}
h1 {
margin: 0;
font-size: 2.25rem;
}
.tagline {
margin: 0.25rem 0 0;
color: var(--color-muted);
}
.card {
padding: 1.5rem;
margin-bottom: 1rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
}
.card h2 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.links {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer {
padding: 2rem 0;
color: var(--color-muted);
font-size: 0.9rem;
}The font choice deserves a word. system-ui means: use whatever this operating system uses for its own interface — San Francisco on a Mac, Segoe UI on Windows. The page downloads nothing, renders instantly, and looks native everywhere. Custom fonts are a fine thing to learn later; they are also the single easiest way to make a page slower, so the default position is not needing one.
The only layout tool here is flexbox, and only where the page genuinely needs elements side by side: the list of links. display: flex turns a container's children into a row, and gap sets the space between them, no margin tricks required. Everything else is normal document flow — boxes stacking top to bottom — which is exactly what flow is good at. You will meet grid and the rest of flexbox when you build something that needs columns. This page does not, and pretending otherwise is how tutorials get bloated.
One quiet trick in the body rule: max-width caps the line length so text stays readable on wide screens, and margin: 0 auto splits the leftover space evenly left and right, centring the column. That pair of lines is the skeleton of almost every blog and documentation site you have ever read.
warning
If you ever find yourself writing longer and longer selectors — or reaching for !important — to force a style to win, stop. You are fighting specificity, and the fix is almost never a stronger selector. Add a class to the element you actually mean and style that. Flat, class-based CSS stays predictable; selector arms races do not.
Save both files and open index.html in your browser — double-click it, or drag it onto an open browser window. That is the entire development cycle at this stage: edit, save, refresh. No build step, no tooling. When the page renders, you have done the thing most people only read about: written a real web page by hand.
Before moving on, change something and watch the page respond. Good first experiments:
- Swap the palette by editing only the custom properties in :root — the whole page recolours from five lines
- Add a fourth section, give it the card class, and watch it inherit the styling for free
- Add a photo with an img tag, and write alt text that actually describes what is in it
The address bar will show a path starting with file:// — this page exists only on your machine. The next step is the satisfying one: putting it on the real internet with a free host, so it has a URL you can send to someone. The deployment guide on this site walks through exactly that, and this little page is the perfect first thing to deploy. A finished, shipped page you update every month will teach you more than the next three tutorials combined — which is the whole bet this journal makes.