How long does it take to build your first website?

A basic HTML/CSS page can be built in 2 to 3 hours, even on your first day. Adding JavaScript interactivity takes another 2 to 3 hours. Getting it deployed online adds 30 minutes. The total time from zero to a live website is achievable in a single day of focused work.

Do I need to learn HTML and CSS before JavaScript?

Yes, for web development. HTML and CSS are the foundation that JavaScript builds on. JavaScript manipulates HTML elements and changes CSS styles. Without understanding HTML structure, JavaScript code will not make sense. Spend at least a few days on HTML and CSS basics before adding JavaScript.

Can I build a website on a phone in Uganda?

Technically yes, using apps like Spck Editor or Acode. But it is extremely frustrating compared to using a computer with a keyboard. For your first website, use a laptop or desktop computer. Even a secondhand machine running Linux is far more productive than trying to code on a phone.

Build Your First Website as a Ugandan Beginner (2026)

What You Need Before You Start

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.

Step 1: Build the Structure with HTML

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.

Step 2: Make It Look Good with CSS

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.

Step 3: Add Interactivity with JavaScript

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.

Step 4: Make It Your Own

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.

Step 5: Put Your Website Online (Free)

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)

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

Option 2: Netlify

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

Option 3: Vercel

Go to vercel.com and sign up with your GitHub account.
Import your GitHub repository.
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.

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