01Step 1: Plan before you code
Decide who the site is for, what pages it needs and what each page should make a visitor do. For most small sites, that is a homepage, an about page, a services or work page and a contact page. Sketch each on paper as boxes: headline here, photo there, button here. How to make a website wireframe shows how in more detail.
Write the actual words now, too. Designing around real text is far easier than squeezing text into a design later, and it exposes gaps in what you want to say.
02Step 2: Learn the three languages, in order
Mozilla's free Learn web development course is the standard place to start, and its first website guide walks through a complete small site.
| Language | Job | How much you need for a first site |
|---|---|---|
| HTML | Structure and content: headings, text, images, links | Essential: a few dozen elements |
| CSS | Looks: layout, colors, fonts, spacing, responsiveness | Essential: flexbox, grid, media queries |
| JavaScript | Behavior: menus, interactions, data | Optional for a simple site |
03Step 3: Build the pages
Work page by page, starting with the homepage, and check each in a browser as you go.
- 1Create the filesAn index.html for the homepage, one HTML file per page, and one styles.css.
- 2Write semantic HTMLUse header, nav, main, section and footer, and one h1 per page; it helps accessibility and search engines.
- 3Style mobile firstWrite styles for small screens, then add media queries for larger ones.
- 4Keep a design systemTwo fonts, a small palette and a spacing scale, defined once as CSS variables.
- 5Optimize imagesResize and compress before adding them; large images are the most common cause of slow pages.
04Step 4: Publish it
A site made of HTML, CSS and images is a static site, and static hosts publish it for free: push the files to GitHub and turn on GitHub Pages, or connect the repository to Netlify or Cloudflare Pages. Then buy a domain and point it at the host. How to host a website for free and how to deploy a website cover each step.
05Step 5: Make it findable and fast
Give every page a unique title and meta description, use descriptive headings, add alt text to images and submit the site to Google Search Console. Check speed with PageSpeed Insights; Google's Core Web Vitals ask for the main content to load within 2.5 seconds, per web.dev. How to make a website faster lists the usual fixes.
- Unique title and description on every page.
- One h1 per page and logical headings below it.
- Alt text describing every meaningful image.
- A sitemap submitted in Search Console.
06From scratch, a builder, or AI?
Building by hand is the best way to understand the web, and the slowest way to get a polished business site. Website builders and AI builders are much faster but give you less control or less understanding. Many people learn by hand, then use tools for client or business work. Should I build my own website or hire someone? helps you decide, and how to make a website with AI covers the fastest route.
What people who tried it say
Hacker News commenters asked how to build a simple site usually recommend starting with plain HTML and CSS on a free static host, and only adding a static site generator such as Eleventy, Astro or Hugo once you need templates or Markdown.
- Ask HN: What's the simplest static website generator?Hacker News
Many replies say a single index.html on a free static host is enough to start, with Eleventy, Zola or Astro recommended when you need shared layouts.
- Ask HN: Is WordPress the best way to create new websites for beginners?Hacker News
Commenters weigh WordPress's ecosystem against simpler static approaches and site builders for beginners.
Looking for more first-hand opinions? Search Reddit for “how to make a website from scratch”. We link the live threads rather than summarizing them, so you read them in full.
Our take
build one small site by hand, even if you never do it again. Knowing what HTML and CSS are doing makes you better at using every builder, AI tool and developer you will ever work with.
Where this falls short
This path covers static informational sites. Online stores, member areas and apps need servers, databases and security knowledge beyond this guide, or a platform that provides them.
If you want the result without the learning curve, Orlume designs and builds a site from a description, as real Next.js code you can download on paid plans and learn from.
Free to start · No card required · Live in one click
Sources
- 1.Learn web development · MDN Web Docs
- 2.Your first website · MDN Web Docs
- 3.Web Vitals · web.dev (Google)
Researched and written by the Orlume team · Updated October 2026
Still stuck?