Build Your First Website: A Step-by-Step Guide for Tanzanian Beginners

The setup is simpler than you think:

A computer. A laptop or desktop running Windows, Mac, or Linux. It does not need to be powerful. Any computer that can run a web browser can be used for web development.

A code editor. Download Visual Studio Code (VS Code) from code.visualstudio.com. It is free and is the most popular code editor in the world. Install it like any other application.

A web browser. Google Chrome is recommended because its developer tools are excellent. Firefox works equally well. You already have one of these installed.

That is it. No server, no hosting account, no payment, no registration. You will create files on your computer and open them in your browser. Everything happens locally until you decide to put your website on the internet (which is covered in our deployment guide).

If you do not have a computer: You can practice basic HTML and CSS on a smartphone using apps like Sololearn or Dcoder, but building real websites requires a keyboard and a proper code editor. A used laptop for TZS 300,000 to TZS 500,000 is sufficient. See our guide on best laptops for coding in Tanzania.

Open VS Code. Create a new file called index.html. Type the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mama Lishe Restaurant - Dar es Salaam</title>
</head>
<body>
  <h1>Mama Lishe Restaurant</h1>
  <p>The best ugali and samaki in Dar es Salaam.</p>

  <h2>Our Menu</h2>
  <ul>
    <li>Ugali na Samaki - TZS 5,000</li>
    <li>Pilau - TZS 4,000</li>
    <li>Wali na Maharage - TZS 3,000</li>
    <li>Chipsi Mayai - TZS 3,500</li>
  </ul>

  <h2>Visit Us</h2>
  <p>Kariakoo Market, Dar es Salaam</p>
  <p>Open Monday to Saturday, 11:00 AM to 9:00 PM</p>
</body>
</html>

Save the file. Open it in your browser (right-click the file, select "Open with Chrome" or drag it into your browser window).

You just built a website. It looks plain, but it is a real HTML document. Every professional website in the world started from this same foundation. The text you see in the browser comes from the HTML tags you wrote. <h1> is a heading. <p> is a paragraph. <ul> and <li> create a list.

HTML gives you structure. CSS gives you style. Add a <style> section inside the <head> of your HTML file:

<head>
  <title>Mama Lishe Restaurant - Dar es Salaam</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h1 {
      color: #2d5016;
      text-align: center;
    }
    h2 {
      color: #3a6b1e;
      border-bottom: 2px solid #3a6b1e;
      padding-bottom: 5px;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      padding: 10px;
      margin: 5px 0;
      background-color: white;
      border-radius: 5px;
    }
  </style>
</head>

Save and refresh your browser. The same content now looks significantly better. CSS properties like color, font-family, background-color, padding, and margin control how everything looks. Each property name is intuitive once you see it in action.

The key CSS concepts to understand: selectors (which elements to style), properties (what to change), and values (what to change it to). h1 { color: #2d5016; } means "make all h1 headings this shade of green."

Experiment. Change the colors. Add borders. Make the text bigger. Every change you make teaches you something, and you see the result immediately in the browser. This fast feedback loop is what makes web development accessible to beginners.

Most Tanzanians access the internet on their phones. Your website needs to work on small screens. Add this line inside the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This single line tells the browser to adapt the page width to the device screen. Combined with the CSS you already wrote (using max-width instead of a fixed width), your page now adjusts to phone screens automatically.

For more control, CSS media queries let you apply different styles at different screen sizes:

@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  h1 {
    font-size: 24px;
  }
}

This says: "When the screen is narrower than 600 pixels (a phone), reduce the padding and heading size." Open your browser developer tools (F12) and toggle the device toolbar to simulate different screen sizes and test your responsive design.

Responsive design is not optional in Tanzania. It is the first priority. Build for phones first, then ensure it also looks good on larger screens.

You have built your first website. Here is how to keep the momentum going:

Build 2 more HTML/CSS pages this week. Ideas: a personal profile page about yourself, a product listing page for a Tanzanian business, or a simple event page for a community event. Repetition with variation is how you internalize the concepts.

Learn JavaScript basics. JavaScript adds interactivity: buttons that respond to clicks, forms that validate input, dynamic content that changes without reloading the page. Our guide on learning JavaScript in Tanzania covers the full path.

Deploy your website. Put it on the internet so anyone can see it. Vercel and Netlify offer free hosting. Our guide on deploying your first app for free walks through the process step by step.

Learn Git and GitHub. Version control tracks changes to your code and is essential for professional development. Our Git and GitHub guide for Tanzanian beginners covers the basics.

If you want structured guidance for the entire path from here to becoming a full-stack developer, the Tech Foundations course (approximately TZS 60,000) provides the conceptual groundwork, and the Full-Stack Software and AI Engineering course (approximately TZS 2,400,000) covers the complete journey. Create a free account to explore.