How to Make a Website: A Beginner’s Guide

To make a website, first decide what it needs to do, then choose a way to build it: use a hosted visual builder for a guided, low-maintenance start; WordPress.com for a hosted WordPress workflow; self-hosted WordPress or another content management system (CMS) when you want more control and can manage hosting and upkeep; or hand-code it to learn web development or meet custom requirements. No single route is right for everyone.

For a personal, portfolio, blog, or small-business site, start with a clear purpose and a few useful pages. Choose a domain, arrange hosting if your platform does not include it, add content and navigation, check how the site works on phones and with a keyboard, then publish and maintain it.

1. Decide what the website should do

Before picking a platform or template, write down who the site is for and the main thing you want visitors to do. That choice determines which pages, features, and content you need. WordPress.org’s official getting-started guide also recommends planning your pages, categories, and header before installation. See Get started with WordPress.

Personal site: introduce yourself, explain your interests, and provide a way to get in touch.
Portfolio: present selected work, your role in each project, and a contact or inquiry path.
Blog: organize articles into useful topics and make it easy to browse recent and older posts.
Small-business site: explain what you offer, who you serve, and how visitors can contact you, book, or buy.

Keep the first version focused. A one-sentence goal such as “Help prospective clients understand my design work and request a quote” is more useful than a vague goal like “make a professional website.”

2. Choose how to build it

Compare the options by setup effort, design and feature control, hosting responsibility, maintenance, portability, support, and recurring price. Provider comparisons are vendor-authored advice, not independent test results, so check the actual plan terms before choosing.

Route	Best fit	What to consider
Hosted visual or AI builder	You want a guided editor and a quick start with little or no code.	Hosting is generally bundled. Convenience may mean fewer choices or dependence on the platform; check export options, plan limits, and renewal pricing.
WordPress.com	You want to build and edit with WordPress in a hosted workflow.	It offers a guided path; available features and domain terms depend on the current plan. Its five-step website guide covers the homepage, pages, and menu.
Self-hosted WordPress or another CMS	You want more control over themes, extensions, and site setup.	You arrange hosting and take responsibility for updates, backups, security, and other maintenance, unless your host handles some of it.
Custom code	You want to learn the web fundamentals or need a custom feature.	You have the most technical work and responsibility for building, hosting, and maintaining the site.

If you are undecided, choose the simplest route that meets your current needs. You can begin with a small site and change platforms later, but moving a domain, content, or custom functionality may take work. For a code-first introduction, MDN’s Your first website tutorial covers planning, content, styling, interactivity, and publishing.

Sketch the main menu before choosing a theme. Most small sites can begin with:

Home: say what the site is about and guide visitors to the next useful action.
About: explain who you are, what the organization does, or why the work matters.
Contact: give visitors a working way to reach you, such as an email address or form.

Add other pages when they serve the goal: a portfolio, services, product catalog, booking page, blog, FAQ, or event calendar. Keep menu labels familiar and make important pages reachable without guesswork. On a blog, categories can help readers find related posts; avoid creating categories that have little or no content.

4. Choose a domain and hosting

A domain is the public address people type or follow to reach your website. Hosting stores and serves the site’s files. Hosted builders and WordPress.com generally bundle hosting into the platform; a self-hosted CMS needs a separate host.

Pick a domain name. Aim for something easy to say, spell, and remember. Check that you can use it consistently where that matters to your project.
Check the full price. Look at the renewal price, registration period, extension, and any fees. A low first-year promotion is not the same as the renewal cost.
Decide whether to start with a temporary address. Some platforms provide a subdomain so you can build before connecting a custom domain.
For a separate host, inspect what is included. Check backups, SSL, support, security measures, and software updates; do not assume these are included in every plan.

For cost context, Hostinger’s September 25, 2026 beginner guide estimates a basic builder or CMS site at $3–$30 per month, a custom freelancer or agency build at $2,000–$30,000 or more, and domain renewals at $10–$20 per year. These are Hostinger’s estimates, not a universal market survey. Actual costs depend on provider, location, plan term, domain extension, premium themes or plugins, and required features. Compare renewal prices and inclusions before purchasing.

5. Set up a theme or template

Choose a theme or template that fits the kind of content you need to publish, then replace the sample content. Do not spend the whole setup period browsing designs: a simple layout with clear headings and useful information is a sound starting point.

Use consistent navigation and a clear page hierarchy.
Replace all placeholder text, links, and images before launch.
Use images you created, licensed, or otherwise have permission to publish.
Give each page one clear purpose and a useful title.
Keep important actions visible without crowding every section with buttons.

WordPress.com’s website setup guide walks through choosing a design, building the homepage with blocks, adding pages, and setting up the menu. For self-hosted WordPress, use the official WordPress setup documentation to plan and install the software.

6. Write and add the content

Write for the visitor’s question, not for the template’s placeholder copy. A homepage should quickly explain what the site offers, who it is for, and what to do next. An About page should provide relevant context. A Contact page should make the next step obvious.

Draft the essential text in plain language before arranging the final layout.
Use descriptive headings to break up long pages.
Use specific link text so visitors can tell where a link goes.
Add images that support the information. Write meaningful alternative text for informative images; use empty alternative text for purely decorative images when your platform allows it.
Review spelling, dates, prices, contact details, and any claims before publishing.

If you are hand-coding, a web page is commonly structured with HTML, styled with CSS, and made interactive with JavaScript. Here is a complete single-file starter page. Save it as index.html and open it in a browser. Replace the example identity and contact address before publishing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A small portfolio introducing Jordan Lee and selected projects.">
  <title>Jordan Lee — Designer</title>
  <style>
    :root { color-scheme: light; font-family: system-ui, sans-serif; }
    body { margin: 0; color: #17202a; background: #f7f8fa; line-height: 1.6; }
    header, main, footer { width: min(52rem, calc(100% - 2rem)); margin-inline: auto; }
    header { padding-block: 1.5rem; }
    nav ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }
    a { color: #0757a6; }
    main { padding-block: 2rem; }
    section { margin-block: 2.5rem; }
    .intro { padding: 2rem; background: white; border-radius: 1rem; }
    footer { padding-block: 2rem; }
    :focus-visible { outline: 3px solid #db7b00; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <a href="#main">Skip to content</a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="main">
    <section class="intro" aria-labelledby="intro-title">
      <h1 id="intro-title">Design that makes complex ideas easier to use</h1>
      <p>I’m Jordan Lee, a designer working with small teams on clear digital experiences.</p>
      <p><a href="#work">See selected work</a></p>
    </section>
    <section id="about">
      <h2>About</h2>
      <p>Add a short introduction, relevant experience, and the kind of work you want to do.</p>
    </section>
    <section id="work">
      <h2>Selected work</h2>
      <article>
        <h3>Project name</h3>
        <p>Describe the problem, your contribution, and the result in a few clear sentences.</p>
      </article>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <p>For project inquiries, email <a href="mailto:hello@example.com">hello@example.com</a>.</p>
    </section>
  </main>
  <footer><p>© 2026 Jordan Lee</p></footer>
</body>
</html>

This file is a learning example, not a complete production platform. A contact link opens the visitor’s email application; it does not process a form. To collect form submissions, use a form service or build and secure a server-side handler. A static file also does not automatically provide a CMS, analytics, backups, or deployment.

7. Make the site usable and accessible

Accessibility is part of making the site work for people with different abilities and access methods. It benefits people using keyboards, assistive technology, small screens, or limited bandwidth too. The W3C WAI introduction to web accessibility explains the principles and why evaluation should happen throughout development. A template or automated checker alone cannot establish that a site is accessible.

Check that links, menus, buttons, and forms can be used with a keyboard.
Use headings in a sensible order and label form fields clearly.
Provide useful alternative text for meaningful images.
Make text readable, links distinguishable, and controls easy to identify.
Check that pages reflow and remain usable at phone-sized widths.
Test forms and other important interactions, including their error and confirmation messages.

8. Check the site before publishing

Preview the actual pages at the address visitors will use. A screenshot can help you spot layout problems across pages or viewport sizes, but an image cannot tell you whether a keyboard can reach a control, a form submits, or a page is accessible. Test those interactions directly too.

Open every main page and follow each important link.
Check the layout at phone and desktop widths; inspect long pages and pages with images or forms.
Submit forms using valid and invalid input and confirm the response is understandable.
Use the keyboard to move through navigation and interactive controls.
Check for missing images, placeholder copy, broken links, spelling errors, and incorrect contact details.
Ask someone unfamiliar with the site to find the main information or complete its main task.

Or skip the browser setup

Use ScreenshotNeo to request a site screenshot directly. The API documentation describes the request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and billing status.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

9. Publish, discover, and maintain the site

When the pages and main interactions are ready, publish through your platform or deploy your code to a host. Then open the public address in a fresh browser session and check the live version. Confirm that the domain resolves, the site uses HTTPS where provided, the main pages load, and the navigation and contact path still work.

For search discoverability, write clear page titles and useful content that helps visitors understand each page. Google’s SEO Starter Guide explains how to help search systems understand pages; following guidance does not guarantee indexing or rankings.

Maintenance is part of owning a site. Keep content current, renew the domain and hosting, install CMS and extension updates, and know how backups work. For self-hosted sites, review account access and security settings as well. Record renewal dates and recurring charges so a promotional first term does not catch you by surprise.

Common problems and fixes

Problem	Likely cause	What to do
The site address does not open	The domain is not connected, DNS changes are still propagating, or the address was entered incorrectly.	Check the domain spelling and platform connection instructions. Allow time for DNS changes and verify the domain status with the registrar or host.
The site looks different on a phone	The theme or custom layout does not adapt well to narrow screens, or an element is too wide.	Preview at phone widths, shorten oversized content, and adjust the theme or CSS. Check horizontal scrolling and small controls.
Images are missing	The file path is wrong, the upload did not finish, or the platform cannot access the referenced file.	Confirm the asset exists, correct the file path or upload, and open the image URL directly if appropriate.
A contact form does not send	The form has no configured submission service, email delivery is misconfigured, or required fields fail validation.	Check the form provider’s setup and delivery settings. Submit a test and inspect its confirmation or error state. A mail link is not a form handler.
Visitors cannot find a page	The page is not linked in the menu or its label is unclear.	Add it to the right navigation location and use a short, descriptive label.
Changes do not appear	The edit was not published, the wrong page or environment was changed, or a cached copy is being shown.	Confirm the page is published, verify the live address, and refresh or clear the relevant cache.
The site is unexpectedly expensive	A promotion ended, a domain renewed, or paid features and add-ons are billed separately.	Review invoices, renewal prices, and plan inclusions before the next billing period. Remove add-ons the site does not need.

Cost, performance, and reliability

Cost: Include the domain, hosting or platform subscription, and any paid theme, plugin, email, booking, commerce, or other service the site depends on. A free or low-cost start may have limits; check the renewal price and what you would need to pay to keep the required features.

Performance: Keep the first version focused. Large images and unnecessary scripts can make pages slower to load, especially on phones or slower connections. Use appropriately sized images, avoid adding features without a purpose, and check representative pages on mobile as well as desktop.

Reliability: Know who handles backups, updates, and security. Hosted platforms manage much of the infrastructure, while a self-hosted CMS gives you more direct responsibility unless your host provides managed services. Check that you can recover important content and that domain and hosting renewals will not lapse.

Frequently asked questions

Can I make a website without coding?

Yes. A hosted visual builder or WordPress.com lets you create pages using an editor rather than writing the site’s code. Choose based on the features, plan terms, and maintenance arrangement you need.

How many pages should a beginner website have?

There is no required page count. Start with the pages needed to explain the site and help visitors take its main action; Home, About, and Contact are a common foundation.

Do I need a custom domain before I start?

No. Some platforms provide a temporary address that you can use while building. A custom domain gives the site its own public address, and its registration and renewal terms depend on the provider and extension.

Is WordPress free?

The WordPress software can be used without a software license fee, but a self-hosted site still has hosting and domain costs. Hosted WordPress plans bundle services differently, so check the current plan and feature terms.

Will publishing the site make it appear in search results?

Publishing makes the site available at its address, but it does not guarantee that a search engine will index it or show it for a particular search. Clear, useful pages and the official Google guidance are a reasonable starting point.

Launch checklist

The site has a clear purpose and a working path for its main visitor action.
Core pages are complete, linked, and free of placeholder content.
The domain, hosting, and renewal costs are understood.
Navigation, images, forms, and important links have been checked.
The layout works at phone and desktop widths, and keyboard access has been reviewed.
Backups, updates, security, and content maintenance have an owner.

Start with the smallest site that serves its purpose. Add pages and features when they solve a real visitor need, and keep the domain, content, and maintenance plan up to date.