Building Your First Website: A Weekend Project for Total Beginners

A laptop or desktop computer. Windows, Mac, or Linux. Any of them work.

A web browser. Chrome is ideal because its developer tools are the best. Firefox works too.

VS Code. Download it for free from code.visualstudio.com. Install it. This is where you will write your code.

That is it. No paid software, no special hardware, no sign-ups. You are ready.

Open VS Code. Create a new file. Save it as index.html on your desktop.

Type this:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, I built this.</h1>
  <p>This is my first website. I made it myself.</p>
</body>
</html>

Save the file. Find it on your desktop. Double-click it. Your browser opens and you see your heading and paragraph. You just built a web page.

Now add more content. A section about yourself. A list of things you are interested in. An image (save any image to the same folder and reference it with an <img> tag). Each time you save the file and refresh the browser, you see your changes. That instant feedback is what makes web development addictive.

Spend the morning adding content. Do not worry about making it look good yet. Focus on structure: headings (<h1> to <h6>), paragraphs (<p>), lists (<ul> and <li>), links (<a>), and images (<img>).

Your page has content but it looks like a document from 1995. Time to add style.

Create a new file in the same folder called style.css. In your HTML file, add this line inside the <head> section:

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

Now open style.css and start styling. Change the font. Set a background colour. Add padding around your content. Centre your text. Make your headings a different colour.

Start with these basics and experiment from there. Change a value, save, refresh. Change another value, save, refresh. CSS is visual. You see every change immediately. Play with it. Break things. Fix them. That is how you learn.

By Saturday evening, you should have a page with real content, readable fonts, decent colours, and some layout structure. It will not look like a professional website yet. That is fine. It is day one.

Pull out your phone. Open the same HTML file (or use Chrome's device toolbar by pressing F12 and clicking the phone icon). Your site probably looks terrible on a small screen. Text runs off the edge. Images are too wide.

Fix this by adding one line in your HTML <head>:

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

Then in your CSS, use percentage widths instead of fixed pixel widths. Set images to max-width: 100%. Use media queries to change font sizes or layout on small screens. This is responsive design, and it is essential in Kenya where most people browse on phones.

Add a contact section. A simple form with fields for name, email, and message. It will not actually send emails yet (that requires a backend or a service like Formspree), but the form is there and it looks professional.

Right now your website lives on your computer. Time to put it on the internet.

Option 1: GitHub Pages. Create a free GitHub account. Create a new repository. Upload your HTML and CSS files. Go to Settings, Pages, and select your branch. GitHub gives you a free URL. Your site is now live.

Option 2: Netlify. Create a free Netlify account. Drag and drop your project folder onto the Netlify dashboard. Done. You get a free URL with HTTPS.

Both options are free, require no credit card, and give you a real URL you can share with anyone. Send the link to a friend. Post it on Twitter. Show your parents. You built this. It is on the internet. Anyone with the link can see it.

This is your first published project. It is simple, and that is perfectly fine. Every developer's first website was simple. What matters is that it exists, it is live, and you built it yourself.

You have proved to yourself that you can build for the web. That is the most important outcome of this weekend. Not the website. The proof.

Next steps: learn more CSS (Flexbox and Grid for layout), start JavaScript (make your page interactive), and build a second project for someone else (a friend's small business, a church, a local shop). Each project teaches you more than the last.

If you want a structured path from here, McTaba's Tech Foundations course on McTaba Academy (KES 2,999) picks up exactly where this weekend project leaves off. Or start the 26-week marathon if you are ready for a full commitment to becoming a developer.

Whatever you choose, do not let this weekend be the last time you write code. Build something next weekend too. And the weekend after that. The compound effect of consistent practice is how beginners become professionals.