Building Your First Website

Your first website does not need to change the world. It needs to exist, to work and to teach you how the web fits together. A personal page, a portfolio, a society site or a small project can all be built in a weekend, and the experience of taking something from an idea to a live address is the best way to understand what the later, more complex tutorials are talking about. This guide walks you through planning, building and publishing a simple site, whether you use a builder or write the code yourself.

Tools and services change frequently. This guide describes concepts and avoids naming products or prices. Check current terms and documentation.

Start with a purpose and an audience

Before choosing tools, answer:

1. Why am I building this? To showcase work, share information, practice skills or promote an event?
2. Who is it for? Recruiters, classmates, customers, family?
3. What should visitors do? Contact you, view projects, sign up or learn something?
4. What content do I have? Text, images, projects, a resume?

A clear purpose keeps the site small and useful.

Builder or hand-coded?

Website builders

Builders offer templates and visual editing.

• Pros: quick, no code, hosting included, easy updates.
• Cons: less control, limits on free plans, possible lock-in, and a risk that you learn less about how the web works.

Hand-coding

You write HTML, CSS and perhaps JavaScript yourself.

• Pros: full control, deep learning, portability, a skill employers value.
• Cons: slower at first, more to learn, and you handle hosting and maintenance.

A middle path

Start with a builder for a quick result, then rebuild the same site by hand as a learning project. Or use hand-coding with simple tools for hosting static files.

If your aim is to learn web development, hand-code at least one site.

Plan the structure

Sketch pages on paper.

• Home: who you are or what the site offers, with links to key pages.
• About: a short introduction.
• Projects or content: the main material.
• Contact: a way to reach you, such as a professional email address.
• Optional: blog, resume, links.

Keep navigation simple. Aim for three to five pages. Write the content first, even as rough notes, so that the design fits the content, not the other way around.

A simple HTML and CSS example

Here is a minimal page. Save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maya Lopez | Biology Student</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Maya Lopez</h1>
    <p>Biology student interested in conservation data.</p>
    <nav>
      <a href="index.html">Home</a>
      <a href="projects.html">Projects</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h2>About me</h2>
    <p>I study biology and enjoy using data to understand local wildlife.</p>
  </main>
  <footer>
    <p>Contact: maya@example.com</p>
  </footer>
</body>
</html>

And a basic style.css file in the same folder.

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 1rem;
  max-width: 40rem;
  margin-inline: auto;
  color: #222;
  background: #fff;
}

nav a {
  margin-right: 1rem;
}

a {
  color: #0b57d0;
}

Open index.html in a browser to see it. Change the text, colors and spacing, and refresh. This is how most web developers learn: by changing things and observing results.

Use semantic structure

• Use headings in order: one main heading, then subheadings.
• Use lists for lists, paragraphs for paragraphs and buttons for actions.
• Use landmarks such as header, nav, main and footer.
• Write meaningful link text, not "click here."
• Add alt text to images that convey information.
• Label form fields.

Semantic markup helps accessibility, search engines and maintenance.

Make it responsive

Many visitors use phones.

• Include the viewport meta tag as in the example.
• Use flexible widths and relative units rather than fixed pixel widths for layouts.
• Let text wrap.
• Use images that scale.
• Test on different screen sizes using browser developer tools and real devices.
• Make buttons and links large enough to tap.
• Avoid horizontal scrolling.

Design basics

• Keep layouts simple, with plenty of whitespace.
• Use one or two fonts and a limited color palette.
• Ensure strong contrast between text and background.
• Use consistent spacing.
• Choose images carefully, compressing them to keep pages fast.
• Limit animation.

Accessibility

Build for everyone.

• Check color contrast.
• Ensure keyboard navigation works. Try using only the Tab and Enter keys.
• Provide text alternatives for images and captions for video.
• Use clear language.
• Do not rely on color alone to convey information.
• Respect user preferences such as reduced motion.
• Test with accessibility tools in browsers.

Accessibility is both a legal and a professional expectation in many places.

Domains and hosting

Hosting

A website needs a place on the internet where its files are stored and served.

• Builder hosting is included with the builder.
• Static site hosting is simple and often free for small sites. You upload HTML, CSS and images. Many services connect to repositories and publish automatically.
• Traditional web hosting gives more features for dynamic sites.
• University-provided space may be available. Check what happens when you leave.

Check free tier limits, terms, reliability and how to export your files.

Domain names

A domain is your address, like a name followed by an ending. A free address from your host works for practice. A custom domain looks professional for portfolios.

• Choose a simple, memorable name based on your name or project.
• Register it in your own name with your own account.
• Check renewal prices and set reminders.
• Consider privacy options for registration details.
• Secure the registrar account with a strong password and two-factor authentication. Our digital safety section explains how.
• Beware of scam renewal notices.

Email

A professional email address on your domain is optional. A plain address from a reliable provider is fine.

Publish

1. Test locally: check links, images, spelling and responsiveness.
2. Upload or deploy your files according to your host's instructions.
3. Visit the live address on a phone and a computer.
4. Test again: broken links, missing images and slow loading.
5. Ask a friend to try it and give feedback.
6. Share the link on your professional profile and resume.

Keep a backup of your files.

Search basics

• Give each page a clear title and description.
• Use headings and plain language.
• Make sure the site is accessible to search engines and has a sitemap if appropriate.
• Link between your own pages.
• Keep content original and useful.

Do not expect traffic quickly, especially for a personal site.

Privacy, legal and safety notes

• Limit personal information. Avoid publishing your home address, phone number or timetable. Use a contact form or email address instead. Spam harvesters scrape addresses, so consider using a contact form.
• Respect copyright. Use only images, fonts, music and code you have rights to, and credit sources.
• If you collect data through forms or analytics, tell visitors what you collect and why, and follow privacy laws. Avoid collecting more than you need.
• Check your university's rules about using its name or logo and about publishing coursework.
• Keep software updated if you use any frameworks or content management systems.
• Protect accounts for hosting and domain.
• Don't include secrets in your files.
• Be careful with third-party scripts, which can track visitors or introduce security risks.

Maintain it

• Review content each term.
• Fix broken links.
• Update projects and contact details.
• Check that your domain and hosting remain active.
• Keep a changelog of what you update.
• Archive old versions.

An out-of-date site can look careless.

Next steps

• Add a project page with screenshots and a short story.
• Learn JavaScript to add interactivity.
• Use version control for every change.
• Try a static site generator or a framework once you understand the basics.
• Collect analytics responsibly.
• Build a second site for a different purpose.

Common mistakes

• Trying to build too much at once.
• Ignoring mobile users.
• Poor contrast and tiny text.
• Using images you do not have rights to.
• Exposing personal information.
• Not backing up.
• Never launching because it is not perfect.

A quick checklist

• Do I have a clear purpose and a small plan?
• Is my HTML semantic and my layout responsive?
• Have I checked accessibility and contrast?
• Is it published, tested and backed up?
• Have I respected copyright and privacy?

Final thoughts

Your first website is a small project with a big payoff: you learn how the web works and you have something real to show. Keep it simple, build it well, test it on a phone and publish it. Respect rights and privacy, and improve it over time. Every later skill will make more sense once you have shipped this one.