f-r f-r.space your corner of the web Sign up

Lesson 4 of 5

Designing your first page

You know the tags, the rules, the events. Now what do you actually build? This lesson walks you through making a real homepage — the kind people show off, link to, and remember.

Pick one purpose

The best small websites do one thing well. Pick yours from this list (or invent your own):

  • A page about you — your interests, projects, what you're into.
  • A fan site for something you love — band, game, show, animal.
  • A photo gallery.
  • A blog with maybe 3 posts.
  • A linkspace — just a list of all your other accounts.
  • A digital diary, sketchpad, scratchpad.

Don't try to do all six. One purpose, one page, finished today > six half-built pages, abandoned by Tuesday.

Sketch it on paper first

Seriously. Take 60 seconds. What's at the top? What's in the middle? What's at the bottom? You don't need fidelity — just rectangles. This step saves you hours.

The shape most personal pages use:

+----------------------------------+
|         your name / logo         |   <- header
+----------------------------------+
|                                  |
|     a paragraph or two about     |
|     who you are / what this is   |   <- intro
|                                  |
+----------------------------------+
|  thing |  thing |  thing |  thing|   <- a row of cards / links
+----------------------------------+
|     contact / socials / footer   |
+----------------------------------+

The build

Here's a complete homepage. Copy it, then change everything to make it yours.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Daria's place</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Hi, I'm Daria.</h1>
    <p>I draw, I cook badly, I read too much.</p>
  </header>

  <main>
    <section class="cards">
      <a class="card" href="art.html">
        <h2>Art</h2>
        <p>Sketches and the occasional finished thing.</p>
      </a>
      <a class="card" href="reading.html">
        <h2>Reading log</h2>
        <p>Books I've read, with vibes-based ratings.</p>
      </a>
      <a class="card" href="cooking.html">
        <h2>Recipes (mine)</h2>
        <p>Edible most of the time. Occasionally great.</p>
      </a>
    </section>
  </main>

  <footer>
    <p>Made by hand ·
       <a href="https://friendrewind.com/profile.php?id=42">profile</a></p>
  </footer>
</body>
</html>

style.css

:root {
  --bg: #fbf7ee;
  --ink: #2a2421;
  --accent: #d65a31;
  --line: #e6dfd0;
}

* { box-sizing: border-box; }

body {
  font-family: Georgia, "Times New Roman", serif;
  max-width: 720px;
  margin: 8vh auto;
  padding: 0 24px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
}

header h1 {
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.2em;
}
header p { color: #6b6356; margin: 0 0 36px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border-color: var(--accent);
}
.card h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--accent); }
.card p  { margin: 0; color: #6b6356; font-size: 0.95rem; }

footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: #6b6356;
  font-size: 0.9rem;
}
footer a { color: var(--accent); }

Drop both files into your editor, hit preview, see a real page. Now — this is the important bit — replace every word, color, and link with your own.

Design ideas that punch above their weight

  • Pick one accent color and stick with it. Two colors feel intentional. Five feel like a clip art sale.
  • Use a serif font for body text. Most beginner sites use the same boring sans-serif. A serif (like Georgia, the example above, or Charter, Iowan, Lora) instantly looks more personal.
  • Negative space is free. Add padding. Increase line-height to 1.6 or 1.7. Things shouldn't touch each other.
  • One image at the top, big. A photo, a doodle, a logo you drew. Beats a wall of text.
  • Fewer links is better than more. 3-4 carefully chosen links to your other stuff > 30 random social icons.
Look at sites you like and view their source (Ctrl-U or Cmd-Option-U). The web is the only medium where every example is open-book. Study the ones that make you go "huh, nice." You'll see the same patterns over and over.

Try it

Make a one-page site about something you actually care about. Don't start with a topic you're "supposed" to put on a website. The web is full of homepages-about-being-a-developer. Make a homepage about your dog. Make one about a flavor of crisps that got discontinued. The internet needs more of those, fewer of the developer ones.

Where to next

You have a real page. Time to publish it — for real, with people who'll actually see it.