Build Your First Website as a Nigerian Beginner: A Hands-On Guide

By the end of this guide, you will have a working website. Not a theoretical understanding of websites. An actual page you can open in your browser and eventually put on the internet for anyone to see.

We are going to build a landing page for a fictional Lagos small business: "Iya Basira's Jollof House." It will have:

• A header with the business name and navigation
• A hero section with a headline and a call-to-action button
• A menu section showing dishes and prices in NGN
• A footer with contact information and location
• Responsive design that works on both phones and laptops

This is a real-world use case. Thousands of Nigerian small businesses need exactly this kind of page. Building it teaches you the same HTML, CSS, and JavaScript that developers at Nigerian tech companies use every day.

Step 1: Install VS Code

Go to code.visualstudio.com and download Visual Studio Code. It is free, works on Windows, Mac, and Linux, and is what the majority of Nigerian developers use. Install it like any other application.

Step 2: Create a project folder

Create a new folder on your computer called jollof-house. Open VS Code, click File > Open Folder, and select the folder you just created.

Step 3: Create your first file

In VS Code, create a new file called index.html. This is your webpage. The name index.html is a convention: browsers look for this file by default when loading a website.

That is the entire setup. No accounts to create, no software to buy, no dependencies to install. You are ready to write code.

HTML (HyperText Markup Language) defines the content and structure of your page. Think of it as the skeleton: it says what is on the page and in what order, but not how it looks.

Open index.html and type the following structure. Do not copy-paste. Type it yourself. The act of typing code builds muscle memory and forces your brain to process each line.

Start with the document structure: <!DOCTYPE html>, then an <html> tag wrapping a <head> (metadata, title) and a <body> (visible content). Inside the body, add a <header> with the business name in an <h1>, a <nav> with links, a <main> section with a hero headline and a menu list, and a <footer> with contact info.

For the menu, use a series of <div> elements, each containing an <h3> for the dish name, a <p> for the description, and a <span> for the price in NGN. Something like "Jollof Rice (Regular) ... NGN 1,500" and "Pepper Soup ... NGN 2,000."

Save the file, then open it in your browser (right-click the file, Open With, Chrome or Firefox). You will see plain, unstyled text. Ugly, but functional. Everything is in the right order. That is HTML doing its job.

Key HTML tags you just learned:

• <h1> to <h6>: Headings (h1 is the biggest, h6 the smallest)
• <p>: Paragraphs of text
• <a>: Links (the href attribute says where it goes)
• <div>: A generic container for grouping content
• <header>, <main>, <footer>: Semantic sections that describe the role of the content

CSS (Cascading Style Sheets) controls how your HTML looks. Colors, fonts, spacing, layout. Create a new file in the same folder called styles.css, and link it to your HTML by adding <link rel="stylesheet" href="styles.css"> inside the <head> tag.

Start with the basics. Set the body font to a clean sans-serif. Give the header a dark background (try #1a1a2e) with white text and some padding. Style the navigation links to display horizontally with a gap between them.

For the hero section, use a bold background color or an image, center the text, and make the headline large. Add a button with a green or orange background, rounded corners, and white text. Something that says "View Our Menu" or "Order Now."

For the menu items, use CSS Grid or Flexbox to lay them out in a neat grid. Give each item a white background, rounded corners, a subtle shadow, and padding. Display the price in a bold color (orange works well for Nigerian food businesses).

Key CSS concepts you just learned:

• Selectors: targeting HTML elements by tag name, class, or id
• Properties: color, background-color, padding, margin, font-size, border-radius
• Layout: Flexbox (for arranging items in a row or column) and Grid (for two-dimensional layouts)
• Responsive design: using @media queries to change layout based on screen size

Save and refresh your browser. The difference between the unstyled HTML and the CSS-styled version is dramatic. This is the moment most beginners realize that web development is something they can actually do.

JavaScript makes your page do things. Create a file called script.js and link it at the bottom of your HTML body with <script src="script.js"></script>.

Start with something simple: a mobile menu toggle. On phone screens, the navigation links should be hidden behind a hamburger icon. When the user taps the icon, the menu slides open. This is the most common JavaScript interaction on Nigerian websites, because most of your users are on phones.

Then add something functional: a simple order total calculator. When a user clicks "Add to Order" on a menu item, the item and its NGN price get added to a running total. Display the total at the bottom of the page. This teaches DOM manipulation (changing the page based on user actions), event listeners (reacting to clicks), and basic math operations.

What this teaches you:

• Selecting elements: document.querySelector() and document.getElementById()
• Event listeners: element.addEventListener('click', function)
• Changing content: element.textContent and element.innerHTML
• Variables and basic math: tracking the order total
• Conditional logic: showing/hiding the mobile menu

This is the same pattern behind every interactive website you use. When you add items to a cart on Jumia, JavaScript is updating the page. When you see a Paystack payment modal appear, JavaScript put it there. You are learning the same fundamentals.

Over 80% of internet users in Nigeria access the web on mobile phones. If your website does not work well on a phone, it does not work for Nigeria. This is not optional.

Add a viewport meta tag to your HTML head: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This tells the browser to use the device's actual width instead of pretending the page is a desktop site zoomed out.

Then use CSS media queries to adjust your layout for smaller screens. On phones, the menu grid should stack to a single column. The navigation should collapse to a hamburger menu. Font sizes should be readable without zooming. Buttons should be large enough to tap with a finger.

Test this in your browser by pressing F12 (or right-click, Inspect), then clicking the device toggle icon. This lets you simulate different phone screen sizes without needing a separate device.

Building mobile-first is a habit that Nigerian employers look for. If your portfolio projects only work on desktop, you are signaling that you do not understand the Nigerian user base.

A website on your laptop is practice. A website on the internet is a portfolio piece. Here is how to deploy for free:

Option 1: GitHub Pages (recommended for beginners)

1. Create a free GitHub account (github.com)
2. Create a new repository called jollof-house
3. Upload your files (index.html, styles.css, script.js)
4. Go to Settings > Pages, select "Deploy from a branch," choose "main," and save
5. Your site will be live at yourusername.github.io/jollof-house within minutes

Option 2: Vercel or Netlify

Both offer free hosting with custom domains. Connect your GitHub repository and they deploy automatically every time you push changes. Slightly more setup, but more professional for portfolio purposes.

Once deployed, share the link. Put it in your Twitter/X bio. Send it to friends. The simple act of deploying a live website puts you ahead of many people who only code in tutorial environments and never ship anything real.

For a deeper walkthrough on deployment options, see our deploy your first app for free from Nigeria guide.

You just built a website. That is real. But one website does not make you a developer. Here is how to keep going:

1. Build two more static sites this week. A personal portfolio page and a landing page for another type of Nigerian business (a barber shop, an event planning company, a tech meetup). Repetition builds fluency.
2. Learn JavaScript properly. The JavaScript you used here was basic. Our Learn JavaScript in Nigeria guide covers the full path from beginner to intermediate.
3. Start learning a framework. Once you are comfortable with HTML, CSS, and vanilla JavaScript (give it 4 to 6 weeks), React is the next step for Nigerian developers.

If you want structured guidance for the full journey from this point, create a free McTaba Academy account and explore the learning paths. Our Tech Foundations course (NGN 3,500 to 6,000; exchange rates fluctuate; check current price at checkout) builds the conceptual foundation that turns isolated tutorials into a connected understanding of how web development actually works.