Build Your First Website as a Ugandan Beginner: Step-by-Step Guide

Good news: you need very little. Here is the complete list:

• A computer. Desktop or laptop, any operating system (Windows, Mac, or Linux). Even a machine with 2GB of RAM can handle basic web development. If you are using a secondhand laptop running Ubuntu, that works perfectly.
• A code editor. Download Visual Studio Code (VS Code). It is free, lightweight, and the most popular editor among professional developers. If your internet is limited, download the installer at a cyber cafe or from a friend's USB drive.
• A web browser. Chrome is recommended because its Developer Tools (press F12) are excellent for inspecting and debugging websites. Firefox works well too.
• Internet access. You need internet to download VS Code initially and to look up references. But once your tools are installed, you can write and preview HTML, CSS, and JavaScript completely offline. The website runs locally in your browser.

You do not need: a paid hosting plan, a domain name, a design tool, or any prior coding experience. You will get all of those things eventually, but none of them are required for your first website.

VS Code extensions to install (optional but helpful):

• Live Server: Automatically refreshes your browser when you save a file. Saves you from manually refreshing every time you make a change.
• Prettier: Automatically formats your code so it looks clean and consistent.
• HTML CSS Support: Provides autocomplete suggestions while you type HTML and CSS.

HTML (HyperText Markup Language) is the skeleton of every website. It defines what content appears on the page: headings, paragraphs, images, links, lists, and forms. HTML does not control how things look (that is CSS) or how things behave (that is JavaScript). It just defines what is there.

Create a new folder on your computer called my-first-website. Inside it, create a file called index.html. Open it in VS Code and type the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>My name is [Your Name] and I am learning to code in Kampala, Uganda.</p>
  <h2>About Me</h2>
  <p>I am building this website as my first coding project.</p>
  <h2>My Skills</h2>
  <ul>
    <li>HTML (learning now)</li>
    <li>CSS (learning next)</li>
    <li>JavaScript (learning soon)</li>
  </ul>
  <h2>Contact</h2>
  <p>Email me at: <a href="mailto:yourname@email.com">yourname@email.com</a></p>
</body>
</html>

Save the file and open it in your browser (right-click the file and select "Open with Chrome," or drag it into a browser window). You should see a plain, unstyled page with your content. It looks basic, and that is expected. HTML without CSS always looks like a plain document from the 1990s.

Key HTML concepts to understand:

• Tags come in pairs: <h1> opens, </h1> closes.
• <h1> through <h6> are headings (h1 is the largest).
• <p> is a paragraph. <ul> is an unordered list. <li> is a list item.
• <a href="..."> creates a link. The href attribute tells the browser where the link goes.
• The <head> section contains metadata (page title, character encoding). The <body> section contains visible content.

CSS (Cascading Style Sheets) controls how your HTML looks: colors, fonts, spacing, layout, and responsiveness (how the page adjusts to different screen sizes). Without CSS, every website would look like a plain text document.

Create a new file in your project folder called style.css. Link it to your HTML by adding this line inside the <head> section of your index.html:

<link rel="stylesheet" href="style.css">

Now add some styles to style.css:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  color: #333;
}

h1 {
  color: #153564;
  border-bottom: 3px solid #fc8436;
  padding-bottom: 10px;
}

h2 {
  color: #1e4a8a;
}

a {
  color: #fc8436;
}

ul {
  list-style-type: square;
}

Save both files and refresh your browser. Your page now has colors, better typography, and spacing. It looks like an actual website rather than a plain document.

Key CSS concepts:

• Selectors (like body, h1, a) target HTML elements to style.
• Properties (like color, font-family, margin) define what aspect of the element changes.
• Values (like #153564, 20px, Arial) define the specific change.
• margin is space outside an element. padding is space inside an element.

Making it responsive: Add this to your CSS to ensure the page looks decent on phone screens (important in Uganda where most web browsing happens on mobile):

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

This media query says: "When the screen is narrower than 600 pixels, reduce the padding and heading size." Test it by resizing your browser window.

JavaScript makes your website interactive. It responds to user actions (clicks, typing, scrolling), updates content without reloading the page, and handles logic (calculations, form validation, data processing).

Create a file called script.js in your project folder. Link it to your HTML by adding this line just before the closing </body> tag:

<script src="script.js"></script>

First, add a section to your HTML for a simple interactive feature. Add this before the closing </body> tag, above the script tag:

<h2>UGX Currency Converter</h2>
<p>Enter amount in UGX:</p>
<input type="number" id="ugxAmount" placeholder="e.g. 500000">
<button id="convertBtn">Convert to USD</button>
<p id="result"></p>

Now add this to your script.js:

const button = document.getElementById('convertBtn');
const input = document.getElementById('ugxAmount');
const result = document.getElementById('result');

button.addEventListener('click', function() {
  const ugx = Number(input.value);
  if (ugx <= 0 || isNaN(ugx)) {
    result.textContent = 'Please enter a valid amount in UGX.';
    return;
  }
  const rate = 3750; // approximate UGX to USD rate
  const usd = (ugx / rate).toFixed(2);
  result.textContent = 'UGX ' + ugx.toLocaleString() + ' is approximately $' + usd + ' USD';
});

Save and refresh. Type a number into the input, click the button, and see the conversion appear. You just made your website interactive.

What just happened:

• document.getElementById finds an HTML element by its ID.
• addEventListener tells the browser to run a function when the button is clicked.
• The function reads the input value, does math, and puts the result into the paragraph element.

This is the core pattern of JavaScript on the web: find elements, listen for events, update the page. Everything else you learn in JavaScript web development is a variation of this pattern.

Now that you have the three building blocks working, customize your website into something you are proud of. Here are some ideas relevant to Uganda:

Personal portfolio page: Replace the placeholder content with your actual information. Add sections for your education, projects, and contact details. This becomes the foundation of your developer portfolio. See our portfolio guide for what Ugandan employers want to see.

Local business landing page: Build a landing page for a real or fictional Kampala business. Include a hero section, services list, contact information, a map embed, and a working contact form. This is a project you can later offer as a freelance service to actual businesses.

School information page: Build a page for a school (real or fictional) that shows admission information, fee structure in UGX, term dates, and a simple calculator that computes total fees based on the number of terms selected.

Features to add as you learn more:

• A dark mode toggle (JavaScript changes CSS classes on the body element).
• A mobile navigation menu that opens and closes on tap.
• A photo gallery with images from Kampala.
• A form that validates input before submission (check that email addresses are formatted correctly, that required fields are filled in).
• Multiple pages linked together (create about.html, contact.html, and link them from your navigation).

Each feature you add teaches a new concept. The dark mode toggle teaches you about CSS classes and JavaScript DOM manipulation. The navigation menu teaches you about responsive design. The form validation teaches you about conditionals and user input handling.

A website on your laptop is a good start. A website that anyone in the world can visit is a hundred times more impressive. Fortunately, deploying a simple HTML/CSS/JavaScript website is free.

Option 1: GitHub Pages (recommended for beginners)

1. Create a free GitHub account if you do not have one. See our Git and GitHub guide for setup help.
2. Create a new repository named my-first-website.
3. Upload your project files (index.html, style.css, script.js).
4. Go to Settings, then Pages, then select your main branch as the source.
5. Your website is now live at yourusername.github.io/my-first-website.

Option 2: Netlify

1. Go to netlify.com and create a free account.
2. Drag and drop your project folder onto the Netlify dashboard.
3. Your site is live immediately with a random netlify.app URL.

Option 3: Vercel

1. Go to vercel.com and sign up with your GitHub account.
2. Import your GitHub repository.
3. Vercel deploys it automatically. Any changes you push to GitHub update the live site.

All three options are free for personal projects. You get a URL you can share with anyone. Put it on your CV, share it on LinkedIn, and send it to potential employers or clients. "Here is a website I built" is the most convincing proof that you can code.

For a deeper look at deployment options and what to do when your projects become more complex, read our deployment guide for Ugandan developers.

If you want structured guidance for the next stage of your learning journey, create a free McTaba Academy account. The Tech Foundations course (approximately UGX 85,000) provides the conceptual foundation that makes everything you learn afterward click into place faster.