Do I really need just one weekend?

For a simple personal website, yes. It will not win design awards, but it will be a real, published website. If you spend Saturday and Sunday focused, 4 to 6 hours each day, you will have something live by Sunday evening.

Can I do this on a phone instead of a laptop?

Technically yes, using apps like Dcoder or browser-based editors like CodePen. But it is much harder and slower. A laptop with a proper text editor and browser is the right tool for web development. If you do not have one yet, save up for a second-hand one before starting seriously.

Is the website I build this weekend good enough for a portfolio?

It is a start. Your first project is rarely your best, but it proves you can build and ship. As you learn more, you will rebuild it better. Many professional developers keep their first website as a reminder of how far they have come.

Build Your First Website This Weekend | Beginner Guide

Before You Start: What You Need

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.

Saturday Morning: Your First HTML Page

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>).

Saturday Afternoon: Making It Look Good With CSS

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.

Sunday Morning: Mobile and Contact

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.

Sunday Afternoon: Publishing It to the World

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.

What Comes Next

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.

Building Your First Website: A Weekend Project for Total Beginners