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

Before writing a single line of code, set up your workspace. This takes about 15 minutes.

1. A text editor: VS Code

Download Visual Studio Code from code.visualstudio.com. It is free, runs on Windows, Mac, and Linux, and is the editor used by the majority of professional developers worldwide. It highlights your HTML and CSS with colors (syntax highlighting), catches common mistakes, and has built-in tools that make your life easier.

2. A browser: Chrome or Firefox

You already have one. Chrome and Firefox both have built-in developer tools that let you inspect your page, see what is going wrong, and test changes in real time. Right-click any webpage and select "Inspect" to see how it was built.

3. A folder on your computer

Create a folder called "my-first-website" on your desktop or in your documents. Every file for this project will live here.

That is it. No paid software. No hosting plan. No domain name. Those come later if you want them. For now, you have everything you need to build a website that runs on your own computer.

HTML (HyperText Markup Language) is the language that describes the structure of a webpage. Every website you have ever visited is built on HTML. It is not a programming language. It is a markup language that tells the browser what content to display and how to organize it.

Open VS Code, create a new file called index.html in your project folder, 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>Kigali Coffee House</title>
</head>
<body>
  <header>
    <h1>Kigali Coffee House</h1>
    <p>Fresh Rwandan coffee, brewed daily in Kacyiru.</p>
  </header>

  <main>
    <section>
      <h2>Our Menu</h2>
      <ul>
        <li>Espresso - RWF 1,500</li>
        <li>Cappuccino - RWF 2,500</li>
        <li>Rwandan Pour-Over - RWF 2,000</li>
        <li>Iced Coffee - RWF 2,000</li>
      </ul>
    </section>

    <section>
      <h2>Visit Us</h2>
      <p>KG 11 Ave, Kacyiru, Kigali</p>
      <p>Open Monday to Saturday, 7:00 AM to 6:00 PM</p>
      <p>Call us: +250 788 000 000</p>
    </section>
  </main>

  <footer>
    <p>2026 Kigali Coffee House. All rights reserved.</p>
  </footer>
</body>
</html>

Save the file and open it in your browser (double-click the file, or in Chrome go to File > Open File). You should see your coffee shop page. It will look plain, with default fonts and no colors. That is normal. HTML only provides structure. CSS provides the style.

What each part does:

• <!DOCTYPE html> tells the browser this is an HTML5 document.
• <head> contains metadata (page title, character encoding, viewport settings). The user does not see this directly.
• <body> contains everything visible on the page.
• <header>, <main>, <footer> are semantic tags that organize the page into logical sections.
• <h1>, <h2> are headings. <p> is a paragraph. <ul> and <li> are lists.

Create a new file called styles.css in the same folder. Then add this line inside the <head> section of your HTML file, just before the closing </head> tag:

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

Now open styles.css and add:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

header {
  background-color: #2d1810;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

section {
  margin-bottom: 32px;
}

h2 {
  color: #2d1810;
  margin-bottom: 12px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

footer {
  background-color: #f5f5f5;
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 0.875rem;
}

Save both files and refresh your browser. The page should now have a dark brown header, clean typography, and a structured layout. It is not going to win design awards, but it looks like a real website. You built that.

Key CSS concepts you just used:

• Selectors (body, header, h2, li) target HTML elements.
• Properties (color, padding, font-size) define what changes.
• Values (#2d1810, 20px, center) define the specific change.
• The box model (margin, padding, border) controls spacing around elements.
• max-width and margin: 0 auto centers content and prevents it from stretching too wide on large screens.

The <meta name="viewport"> tag you added in the HTML head is already doing some of the work. It tells mobile browsers to render the page at the device's actual width instead of pretending the screen is 980 pixels wide.

But mobile-first means more than just a viewport tag. In Rwanda, where the majority of web users are on smartphones, your site needs to look good on a 360-pixel-wide screen first, and only add complexity for larger screens.

Your current CSS already works well on mobile because we used relative units and max-width instead of fixed widths. To add specific adjustments for larger screens, add a media query at the bottom of your CSS file:

@media (min-width: 768px) {
  header h1 {
    font-size: 3rem;
  }

  main {
    max-width: 800px;
    padding: 40px 20px;
  }

  li {
    padding: 14px 0;
  }
}

This says: "For screens 768 pixels wide or larger (tablets and desktops), increase the heading size, widen the content area, and add a bit more padding." On phones, the original smaller values apply.

Test this by resizing your browser window. You can also use Chrome DevTools: press F12, click the device icon (looks like a phone and tablet), and select different device sizes to preview.

Why this matters for your career: When a Rwandan employer or client reviews your portfolio, the first thing many of them will do is open it on their phone. If your pages do not work on mobile, you have told them that you do not understand the market. Mobile-first is not a nice-to-have in Rwanda. It is a requirement.

You have a working website. Now make it yours. The best way to learn HTML and CSS is to change things and see what happens. Here are challenges to try:

Beginner challenges:

• Change the color scheme. Replace the brown (#2d1810) with colors that match a business you know.
• Add a "Pay with MoMo" section with a phone number and instructions.
• Add an image. Download a free photo from Unsplash, put it in your project folder, and use <img src="photo.jpg" alt="Description">.
• Add a navigation bar with links to each section using anchor tags (<a href="#menu">Menu</a>).

Intermediate challenges:

• Add a contact form with name, phone number, and message fields using <form>, <input>, and <textarea>.
• Create a gallery section with images displayed in a grid using CSS Grid or Flexbox.
• Add hover effects to the menu items (change background color when the user hovers over a list item).
• Build a second page (about.html) and link the two pages together.

Every professional web developer started exactly here: building simple HTML and CSS pages, breaking things, fixing them, and gradually building intuition for how the pieces work together. Do not rush to JavaScript or React. Spend time here until you feel comfortable creating page layouts from scratch.

A website on your laptop is invisible to the world. Let us fix that.

Option 1: GitHub Pages (free)

1. Create a free GitHub account if you do not have one.
2. Create a new repository named "kigali-coffee-house" (or whatever you want).
3. Upload your HTML and CSS files to the repository.
4. Go to Settings > Pages > Source > Deploy from a branch > select "main" > Save.
5. After a minute, your site will be live at yourusername.github.io/kigali-coffee-house.

Option 2: Vercel (free)

1. Create a free account at vercel.com.
2. Connect your GitHub repository.
3. Vercel detects it is a static site and deploys automatically.
4. Your site gets a free URL like kigali-coffee-house.vercel.app.

Either option takes under 10 minutes and costs nothing. For a more detailed walkthrough of deployment options, see our guide on deploying your first app for free from Rwanda.

What to learn next:

• JavaScript to make your pages interactive (buttons that work, forms that validate, data that changes). See our 90-day JavaScript plan.
• CSS frameworks like Tailwind CSS to build layouts faster.
• Git and GitHub to track your changes and collaborate with others. See our Git and GitHub guide.

If you want structured instruction that covers HTML, CSS, and the foundations of thinking like a developer, McTaba's Tech Foundations course (KES 2,999, approximately RWF 30,000) covers these fundamentals and more. But the free path works too. You just built a website. That is the hardest step done.