Make Your First Website for Free

Ten minutes of planning saves an hour of fiddling. Answer three questions on paper:

A first site can be a single page. A website is really just a folder of files. Here's what yours will look like:

Keep file names simple: lowercase, no spaces. Use about-me.html, not About Me.html. Web addresses are picky about spaces and capital letters.

HTML marks up your content so the browser knows what's a heading, a paragraph, a link or an image. Every page starts with the same skeleton:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maria Lopez · Garden Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Maria Lopez</h1>
    <p>Garden design in Austin, Texas</p>
  </header>
  <main>
    <section>
      <h2>What I do</h2>
      <p>Native, low-water gardens that look good all year.</p>
      <img src="photo.jpg" alt="A front yard planted with native grasses">
    </section>
  </main>
  <footer>
    <a href="mailto:maria@example.com">Email me</a>
  </footer>
</body>
</html>

• <head> holds information about the page: its title on the browser tab, and the link to your stylesheet.
• The viewport line makes the page fit phone screens. Always include it.
• <header>, <main>, <section> and <footer> group your content into meaningful parts. Screen readers and search engines use them.
• alt describes an image for people who can't see it.

New to tags? Our HTML in 10 minutes lesson covers them one by one.

CSS decides colors, fonts, spacing and layout. Each rule picks some elements with a selector, then sets properties:

body {                       /* selector: which elements */
  font-family: system-ui, sans-serif;  /* property: value; */
  max-width: 40rem;            /* keep lines easy to read */
  margin: 0 auto;              /* center the page */
  padding: 1rem;
  line-height: 1.6;
  color: #222;
}
h1 { color: #2f6b3a; }
img { max-width: 100%; border-radius: 8px; }  /* never wider than the screen */
a { color: #2f6b3a; }

• Selectors: a tag name like h1, a class like .card (matches class="card"), or an id like #contact.
• Colors: names (teal) or hex codes (#2f6b3a). Make sure text contrasts strongly with its background.
• Spacing: padding is space inside a box; margin is space outside it.

Phones first. Many of your visitors will be on phones. max-width: 100% on images and the viewport line from lesson 2 go a long way. For bigger changes on wide screens, use a media query: @media (min-width: 700px) { … }.

Pick a starter, then change the words, colors and sections. The preview updates as you type. When you like it, download the two files; they're ready to publish in lesson 5.

GitHub Pages hosts simple websites made of HTML, CSS and images for free, on an address like yourname.github.io. You don't need to install anything; it all works in the browser.

1. Create a free account at github.com. Your username becomes part of your web address, so choose carefully.
2. Click + (top right) › New repository. Name it exactly yourusername.github.io, all lowercase. Leave it Public (the free plan needs this for Pages). Click Create repository.
3. On the new repository page, choose Add file › Upload files (or the “uploading an existing file” link). Drag in index.html, style.css and any images, then click Commit changes.
4. Go to the repository's Settings › Pages. Under Build and deployment, set Source to Deploy from a branch, pick the main branch and the / (root) folder, and click Save.
5. Wait a few minutes (up to 10), then refresh the Pages settings and click Visit site. You're live at https://yourusername.github.io.

To change your site later, open a file on GitHub, click the pencil icon to edit, and commit. Or upload a new version with the same name.

Everything you publish is public. Don't put your home address, phone number or anything private on the page unless you're happy for the whole internet to see it. GitHub Pages also isn't allowed for online stores or for collecting passwords or credit card numbers.

Other free options: Netlify and Cloudflare Pages also host static sites free, and both let you drag and drop a folder or connect a GitHub repository. The HTML and CSS you wrote work on any of them.

A domain like marialopezgardens.com looks more professional than marialopez.github.io. Domains aren't free: you rent them by the year from a registrar (a company that sells domains). Your hosting on GitHub Pages stays free.

1. Buy the domain from any registrar. Check the renewal price, not just the first-year deal.
2. Tell GitHub: in your repository, go to Settings › Pages › Custom domain, type your domain and click Save. GitHub recommends verifying your domain in your account settings first, which stops anyone else claiming it.
3. Point the domain at GitHub in your registrar's DNS settings (DNS is the internet's phone book):

4. Wait. DNS changes can take up to 24 hours to spread around the internet.
5. Turn on HTTPS: back in Settings › Pages, tick Enforce HTTPS so visitors get the padlock. It can take a while to become available after the domain starts working.

Avoid wildcard records like *.yourdomain.com. GitHub warns they make it easier for someone to take over your domain.