MIVA STUDY PACK — Web Developer / Digital Designer (English) Downloaded 2026-09-29. Free to pass on. Web Developer / Digital Designer — Lesson 1: How Websites Work 12 minutes read OBJECTIVE: By the end of this lesson you can explain the fundamental process of how a web browser requests and displays website content from a server. Every time you open your phone and type a website address, like a local news site or your favourite Jollof recipe blog, something amazing happens. In less than a blink, your phone connects to a distant computer. This computer, called a server, sends back special files. Your phone then takes these files and instantly builds the website you see on your screen. This whole process, from your phone asking for information to showing you the page, happens incredibly fast, even if the server is in another country. YOUR BROWSER AND THE SERVER: A QUICK CHAT Think of it like this: your web browser (that's the app you use to go online, like Chrome or Safari) is like you sending a message. When you type in 'facebook.com', your browser sends a request across the internet to Facebook's server. The server is a powerful computer, always on, storing all of Facebook's website files. It's like a shopkeeper with all their goods neatly arranged. When your browser requests something, the server quickly finds the right files and sends them back. - HTML (HyperText Markup Language): The Structure. This is the skeleton of the website. Imagine building a market stall. HTML creates the framework: the roof, the support beams, the counter. It defines where your pictures, text, and buttons go. Without HTML, there’s nothing for your browser to display. - CSS (Cascading Style Sheets): The Style. This is like painting your market stall, choosing the colours for the roof, deciding the type of wood for the counter, and adding decorations. CSS makes your website look good. It controls colours, fonts, spacing, and how everything is laid out on the page. - JavaScript: The Action. This is what makes your market stall interactive. It's like adding an automatic door that opens when customers approach, or a light switch that turns on a lamp. JavaScript allows things to move, change, or respond when you click on them. Think of the pop-up messages, image carousels, or forms you fill out online – that's JavaScript at work. [Why This Matters to You] As a web developer, your main job is to write these three languages. You will use them to build websites that look good and work well. In places like Accra, Lagos, and Lome, many small businesses – from tailors to food vendors – are looking for simple, affordable websites. They need a digital 'shop front' to show their products, list their services, or collect customer orders. Learning these skills means you can help these businesses grow, and you get paid for it! So, the next time you browse online, remember the journey. Your phone asks, a server responds, and three essential languages work together to build the page right before your eyes. Understanding this foundation is your first step towards building your own amazing websites. PRACTICE QUESTIONS 1. Which language is responsible for the STRUCTURE of a website? A) CSS B) JavaScript C) HTML D) Python Answer: C — You got it! HTML (HyperText Markup Language) creates the structure or 'skeleton' of a website. It defines all the elements like headings, paragraphs, images, and links. Think of it like the strong foundations and walls of a building. Without HTML, there's nothing to style or make interactive. CSS adds the look and feel, and JavaScript adds the interactive actions. 2. When you type a website address like 'mivaskills.com' into your browser, what sends back the files needed to display the website? A) Your mobile network provider B) A powerful computer called a server C) The web browser itself D) Other websites you've visited Answer: B — That's correct! The server is the powerful computer that stores all the website's files (HTML, CSS, JavaScript, images, etc.). When your browser requests a website, the server finds those files and sends them back to your browser, which then displays the page to you. ---------------------------------------- Web Developer / Digital Designer — Lesson 2: HTML Basics: Your First Steps to Building the Web 10 minutes read OBJECTIVE: By the end of this lesson you can use HTML tags to structure a basic web page, including headings, paragraphs, images, and links. Hello, future web developer! You're about to learn the foundation of every website you visit, from checking mobile money balances to browsing your favorite news sites. This foundation is called HTML, which stands for HyperText Markup Language. Think of HTML as the skeleton of a website. It gives the page its structure: where the headings are, where the paragraphs go, and where images and links live. TAGS: THE BUILDING BLOCKS OF HTML HTML uses special instructions called 'tags' to tell the web browser how to display content. Tags are enclosed in angle brackets, like these: < >. They're like little labels you put around your text to give it meaning. For example, if you want a big title for your page, you'd use a heading tag. If you want a regular paragraph of text, you'd use a paragraph tag. Most tags come in pairs: an opening tag and a closing tag. The closing tag always has a forward slash before the tag name. -

This is a big heading

: This creates a large, important heading, like the title of an article on a news site. -

This is a paragraph of text.

: This is for regular blocks of text, like a story in a blog post. - Accra market scene: This displays an image. The 'src' part tells the browser where to find the picture, like a photo of a busy market stall in Lagos. The 'alt' part describes the image for people who can't see it or if the picture doesn't load. - Contact us: This creates a clickable link. It’s how you go from one page to another, like clicking a button to send a message to a business or find their location. See how most of them have an opening tag (like

) and a closing tag (like

)? The content you want to structure goes in between. The tag is a bit different; it's a self-closing tag because it doesn't wrap around text but points to an image source instead. [Every HTML Page Has a Structure] Just like a house needs a foundation, walls, and a roof, every HTML page has a basic structure. It looks like this: Your Page TitleYour content goes here. The 'head' section holds information about the page that users usually don't see, like its title in the browser tab. The 'body' section is where all your visible content lives – the text, images, and links that visitors interact with. It's like the main part of your shop, where all the goods are displayed! You can start writing HTML right now! All you need is a simple text editor. This could be Notepad on a Windows computer, TextEdit on a Mac, or a free, powerful code editor like VS Code (which many professional developers use). Write your HTML code, then save the file with a '.html' extension (for example, 'myfirstpage.html'). Once saved, you can open that file in any web browser you use – Chrome, Firefox, or Safari – and see your creation come to life! No special internet connection needed to just view your local files, like running your generator at home to power your lights. PRACTICE QUESTIONS 1. What does the tag do in HTML? A) Displays an image B) Creates a clickable link to another page C) Creates a large heading D) Plays a video Answer: B — The tag (anchor) creates hyperlinks — the clickable text or images that take you to another page. The 'href' attribute tells the browser WHERE to go. Without links, websites are dead ends. With links, they become a connected experience, like following a path from one part of the market to another. 2. Which of these is the correct way to make a large heading in HTML? A) My Title B)

My Title

C)

My Title

D) My Title Answer: C — The

tag is used for the most important heading on a page. The 'h' stands for heading, and '1' means it's the top level, like the main sign for a shop. Other heading tags go down to

for smaller headings. ---------------------------------------- Web Developer / Digital Designer — Lesson 3: CSS Basics — Making Pages Look Good 10 minutes read OBJECTIVE: By the end of this lesson you can apply CSS properties to change the visual appearance of HTML elements, including colours, fonts, and layout. Imagine you have built a simple wooden stall in the market. It's functional, it does its job, but it looks… plain. This is like your basic HTML structure. It holds all your information, but it doesn't look very exciting. Now, imagine painting that stall with bright colours, adding a nice sign, maybe even a pattern. This is what CSS does for your website. CSS stands for Cascading Style Sheets. It's the language that controls how your HTML looks. It lets you change colours, choose different fonts, adjust spacing, add background images, and arrange everything neatly on the page. Without CSS, every website would look like plain text on a white background – very boring! HOW CSS WORKS: THE THREE-PART RULE Every time you want to style something with CSS, you write a rule. This rule has three main parts: - Selector: This tells CSS *which* HTML element you want to style. Do you want to change all the paragraphs? Just a specific heading? The selector points to it. - Property: This tells CSS *what* you want to change about that element. Do you want to change its colour? Its size? Its alignment? - Value: This tells CSS the *new setting* for that property. If you chose 'colour' as the property, the value might be 'blue'. If you chose 'size', the value might be '16 pixels'. Here's an example: `p { color: blue; font-size: 16px; }` This rule selects all paragraph elements (`p`). It sets their text colour (`color`) to blue and their text size (`font-size`) to 16 pixels. Just like deciding the paint colour and brush size for your market stall sign. [Arranging Your Elements: Layout] One thing many beginners find tricky is arranging elements side by side. By default, HTML elements often stack on top of each other, like boxes piled up in a storeroom. To make them sit next to each other, like goods displayed on a market table, you need layout tools. The two main ones are Flexbox and Grid. Flexbox is great for arranging items in a single row or column. Grid is for more complex arrangements, like a full page with many sections. For a simple business website, Flexbox is usually enough to get things looking good. Your first practice task as a web developer could be to build a simple restaurant page. Think of your favourite local spot in Accra or Lagos. You'd want a logo at the top, a list of menu items in the middle, and contact details (like phone number and address) at the bottom. Once you can make that look good and well-arranged using CSS, you're on your way to building real websites for paying clients! PRACTICE QUESTIONS 1. What does the CSS property 'color' control? A) The width of an element B) The text color C) The background color D) The font size Answer: B — In CSS, the 'color' property is used specifically to set the colour of the text within an element. If you want to change the background behind the text, you would use the 'background-color' property. It's a common initial confusion, like knowing the difference between the paint colour for a sign's letters and the paint colour for the sign board itself! 2. Which CSS layout tool is best suited for arranging items in a single row or column, like a row of menu items or a stack of social media icons? A) Grid B) Float C) Flexbox D) Position Answer: C — Flexbox is designed specifically for arranging items in one dimension — either a row or a column. It's perfect for laying out navigation links, card groups, or other components where you need strong control over alignment and spacing along a single axis. Grid is more for two-dimensional layouts, and Float and Position are older or more specific techniques. ---------------------------------------- Web Developer / Digital Designer — Lesson 4: JavaScript Basics — Adding Interactivity 12 minutes read OBJECTIVE: By the end of this lesson you can describe how JavaScript adds interactivity to web pages and identify common use cases for dynamic content. Imagine a website that just sits there, like a poster. You can look at it, but you can't really do anything with it. That's a website built only with HTML and CSS. HTML gives it structure, like the walls and roof of a market stall. CSS gives it style, like the paint and decorations. But what makes the market stall come alive? What makes it possible for a vendor to open a drawer, offer you a sample, or change a price based on your choices? That's where JavaScript comes in. MAKING WEBSITES DO THINGS JavaScript is the engine that makes websites *do* things. It adds interactivity. Think about your daily experiences with apps and websites: - When you click a button on a mobile money app and a form opens to send money – that's JavaScript. - When you start typing a name into a search bar, and suggestions for 'Aisha' or 'Kwame' pop up automatically – that's JavaScript. - When an image on an online shop changes to show a different view of a product when you move your mouse over it – that's JavaScript. - When a loading spinner appears while your payment processes, then disappears when it's done – that's JavaScript. It's the 'behavior layer' on top of HTML's structure and CSS's styling. Without it, the internet would be a very quiet, static place. With JavaScript, web pages become dynamic and responsive tools that can interact with users. CORE CONCEPTS: VARIABLES, FUNCTIONS, AND EVENT LISTENERS To start making websites interactive, there are three core concepts you need to grasp. Think of them as essential tools in your web developer toolkit: - Variables: Think of a variable like a small storage box with a label. You can put a value inside (like 'Kofi', '25', or 'true'), give it a name (like `customerName`, `age`, `isLoggedIn`), and then use that value later. For example: `let customerName = 'Kofi';` stores the word 'Kofi'. You can change what's in the box anytime. It's like saving a friend's new phone number in your contacts – the name stays the same, but the number can be updated. Functions: A function is like a recipe or a set of instructions that performs a specific task. You write the instructions once, give the recipe a name, and then you can 'cook' it (run it) whenever you need to, without writing all the steps again. For example: `function greetUser(name) { return 'Hello ' + name; }` is a recipe to greet someone. You can then call `greetUser('Aisha')` to get 'Hello Aisha' or `greetUser('Chike')` to get 'Hello Chike'. It's a reusable block of code. - Event Listeners: This is where the magic of interaction truly happens. An event listener is code that patiently waits for the user to do something – like a security guard watching the main door. When the 'event' happens (someone clicks a button, types into a text box, or scrolls down the page), the listener 'hears' it and then triggers a specific piece of code to run. For example: `button.addEventListener('click', function() { alert('You clicked me!'); });` means, 'Hey button, when you get a click, show a pop-up message!' Without event listeners, your website is deaf to user actions. [Start Building Now!] The best way to learn JavaScript is by doing. Don't just read about it. Free resources like freeCodeCamp.org and The Odin Project (theodinproject.com) offer complete, interactive lessons and projects. They work great even on a Tecno Spark or other mobile devices, so you can practice anywhere! Start small: build a button that changes text color, a form that says 'Good morning, [name]!', or a simple calculator. Each small project is a huge step forward in your learning. PRACTICE QUESTIONS 1. What does an event listener do in JavaScript? A) Stores a value for later use B) Waits for a user action (like a click) and then runs code in response C) Changes the color of the webpage background D) Sends an email to the website owner Answer: B — An event listener is like a night security guard — it watches and waits. When the specified event happens (a click, a key press, a page scroll), the listener triggers the code attached to it. Without event listeners, web pages would be static posters. With them, pages become interactive tools that respond to the user's actions in real time. 2. Which of these is the best description of a 'variable' in JavaScript? A) A list of steps for the computer to follow to perform a task B) A temporary storage place for information that can be named and used later C) A command that immediately changes the page's styling D) A way to send data directly to a server in Lagos Answer: B — A variable is like a labelled container or a storage box. You can put different types of values (like numbers, text, or true/false) into it, give it a name, and then refer to that name whenever you need to use the stored value later in your code. This makes your code flexible and dynamic. ---------------------------------------- Web Developer / Digital Designer — Lesson 5: Building Your First Real Website 12 minutes read OBJECTIVE: By the end of this lesson you can build a functional single-page website for a local business using learned HTML and CSS skills. You've learned HTML and CSS basics. That's a great start! Now, let's use those skills to build something real. We're going to create a simple, but powerful, website for a local business. Think about that provision store down your street in Accra, or the tailor's shop in Lagos, or the restaurant in Lome. They need to be online too! THE ANATOMY OF A SIMPLE BUSINESS WEBSITE Most small businesses don't need a complex website with many pages. What they really need is one clear, well-designed page. This single page acts like a digital flyer or a shop front on the internet. It answers key questions for potential customers: What do you offer? Where are you located? How can I contact you? - Header: This is at the top. It holds the business name and, if they have one, their logo. Like the sign above a shop door. - Hero Section: This is the first thing people see. It has a welcoming message and a great photo of the shop or its products. Imagine a beautiful picture of their pastries, or the owner smiling. - Services Section: What does the business do? List their key services or products clearly. Are they selling fabric? Repairing phones? Cooking delicious jollof rice? - Contact Section: How do customers reach them? Include a phone number, email, and their physical address. Maybe even a small map. - Footer: At the very bottom. This often includes copyright information and perhaps quick links. Each of these sections will be built using a `
` element in HTML. We will give each `
` a unique `id` (like `id="header"` or `id="contact"`). This helps us style each section separately using CSS. You can make the header blue, the services section light grey, and so on. [Keep it Simple, Make it Sellable] Your goal is to deliver a functional, appealing website quickly. Focus on clarity and a 'call-to-action' – that means a button like 'Call Now' or 'Visit Us'. You can use free templates from sites like HTML5 UP or Colorlib. They provide a great starting point. Your job is to customize it: change the colours to match the business's brand, add their specific text, and insert their actual photos. In one weekend, you can turn a template into a sellable product. Imagine showing a shop owner a draft website with their business name, a photo of their produce, and their number right there. They will be impressed! This is how you start building your portfolio and earning money with your new skills. This first real website project will show you what it takes to go from code to a happy client. PRACTICE QUESTIONS 1. How many pages does a typical small business website actually need? A) At least 10 pages B) One well-designed page is often enough C) 50+ pages for SEO D) It depends on the number of employees Answer: B — Most small businesses — like a roadside mechanic, a salon, or a tailor — only need one page. This single page should clearly state what they do, where they are, and how to contact them. It's like a digital business card, but much more powerful. Simplicity is key for getting them online quickly and effectively. 2. Which HTML element is primarily used to create distinct sections (like a header, hero, or contact area) within a website, and often gets an 'id' for styling? A)

B) C)

D) Answer: C — The `
` element is a block-level container commonly used to group and structure content into logical sections on a web page. Giving it an `id` (e.g., `
`) allows you to target and style that specific section using CSS, making it look exactly how you want. ---------------------------------------- Web Developer / Digital Designer — Lesson 6: WordPress for Client Websites 12 minutes read OBJECTIVE: By the end of this lesson you can identify the advantages of using WordPress for client websites and explain its content management capabilities. Imagine you're helping a small business in Makola Market, Accra, or Computer Village, Lagos, get online. They sell beautiful fabrics or repair phones. They need a website, but they also need to update their prices or show new arrivals often. That's where WordPress comes in. It's a powerful tool that helps you build great websites, and it lets your clients manage their own content easily. WordPress powers about 40% of all websites globally. Think of it like a popular mobile phone operating system – many people use it, so it's well-supported and has lots of features. For clients who want to update their own content, WordPress is the practical choice. It lets them take control without needing to learn complex coding. BUILDING A WORDPRESS SITE: THE STEPS - First, you install WordPress on a hosting provider. These are companies like Bluehost or Hostinger. They're like renting a space on the internet for your website. Good news – both Bluehost and Hostinger accept Nigerian and Ghanaian customers, making it easy to pay for their services. - Next, you choose a 'theme'. A theme is like the design template for the website. There are many free options, like Astra or GeneratePress, that look professional and are easy to customize. - Finally, you customize it. This means adding your client's logo, their specific brand colors, and all their unique content – their business story, pictures of their products, and contact information. You make it truly theirs. The best part? Once the site is built, your client gets a special login. From there, they can easily add new blog posts about their business, update product prices, or change photos of their latest stock. They can do all this without calling you every time for a small change. It’s as simple as typing a message in WhatsApp and clicking 'post'. [Make Money with WordPress] This self-service ability makes your service even more valuable to clients. You can charge 1,000-3,000 GHS for the initial website build. Then, for ongoing support and hosting, you can charge 100-300 GHS per month. Imagine you have five clients paying monthly maintenance. That's 500-1,500 GHS in passive income every month! This money comes in while you focus on building new websites for other clients, growing your business even further. WordPress is not just for big companies. It's perfect for the small bakery in Lomé, the mechanic shop in Accra, or the seamstress in Lagos who wants to show her designs. You are empowering these businesses to connect with more customers, just like mobile money helps them handle payments easily. Learning WordPress is a skill that opens many doors for you and for the businesses you help. PRACTICE QUESTIONS 1. Why is WordPress a good choice for small business clients? A) It is the cheapest option B) Clients can update their own content without needing to code C) It requires no internet to use D) It only works on Apple devices Answer: B — Clients love being able to update their own prices, photos, and announcements without paying you every time. WordPress gives them a dashboard where they can type and publish, much like sending a WhatsApp message. You build it once, they maintain their content, and you can charge for hosting and technical support monthly, creating a win-win situation. 2. Which of these is NOT a typical step when setting up a new WordPress website for a client? A) Installing WordPress on a hosting provider B) Choosing a professional theme C) Building a custom mobile app for the client D) Customizing the site with the client's logo and content Answer: C — While some clients might eventually want a mobile app, building a custom mobile app is a separate and much more complex service than setting up a standard WordPress website. The typical steps involve hosting, theme selection, and content customization. ---------------------------------------- Web Developer / Digital Designer — Lesson 7: Using Canva for Graphic Design 10 minutes read OBJECTIVE: By the end of this lesson you can use Canva to create simple, professional-looking graphic designs for social media or marketing materials. As a web developer, you might think graphic design is not for you. But many small businesses need more than just a website. They need attractive images for social media, flyers for their shop, or a simple logo. This is where Canva comes in. It's a free online tool that helps you create professional-looking designs without needing special design skills. WHAT IS CANVA AND WHY IS IT USEFUL? Imagine a local market stall owner in Accra or Lagos. They sell beautiful fabrics but might not have a big budget for a graphic designer. They need a flyer to announce a new arrival or an Instagram post to show off their latest designs. Canva (canva.com) is perfect for them, and for you. It lets you create these things quickly and easily. Canva uses templates. Think of a template as a pre-made design layout. You choose one you like, then you change the text, colours, and images to fit your client's needs. It's like filling in the blanks. Once you're happy, you can download the image and give it to your client. It’s that simple. You don't need to learn complicated software like Photoshop. - Facebook/Instagram post designs: Help a client promote their business online. You can charge 50-200 GHS per set of designs. - Flyers for events and promotions: Create eye-catching handouts for a shop sale or a church event. Price this at 100-300 GHS. - Business logos: Design a simple, memorable logo for a new venture. This could be 200-500 GHS. - WhatsApp Business catalog images: Make product photos look professional for a client's WhatsApp store. Charge 50-150 GHS per product image. - Business cards: Help a client leave a lasting impression with a well-designed card. [Bundle Your Services!] Offer a package deal that combines your web design skills with Canva-made graphics. For example, 'Website + 10 social media posts for 2,000 GHS.' This makes your offer much more attractive to small businesses. It shows you can meet all their digital needs, not just their website. Learning Canva gives you an extra skill. It means you can offer more services to your clients. This makes you more valuable. You can help businesses across West Africa, from the small restaurant in Lomé to the craft seller in Lagos, to look professional online and offline. It's a secret weapon for any web developer serving small businesses. PRACTICE QUESTIONS 1. What can you create with Canva for local businesses? A) Only logos B) Flyers, social media posts, logos, business cards, and more C) Only websites D) Only videos Answer: B — Canva is like a digital printing shop for many things. You can create flyers, logos, Instagram posts, business cards, WhatsApp status images, and more. You start with templates and customize them quickly. You don't need to be an artist; the templates are professionally designed. You just swap the text and colors to match your client's brand. 2. Why is Canva especially useful for web developers working with small businesses? A) It helps web developers learn coding faster. B) It allows web developers to offer more design services without needing advanced graphic design skills. C) It replaces the need for a website for small businesses. D) It is only useful for creating videos, not static images. Answer: B — Canva is a powerful tool for web developers because it expands the range of services you can offer. Many small businesses need basic graphic design alongside a website, but can't afford a separate designer. With Canva, you can easily create social media posts, flyers, and logos, making you a more comprehensive solution for your clients. This means more income opportunities for you and better service for them. ---------------------------------------- Web Developer / Digital Designer — Lesson 8: Finding Your First Web Design Clients 10 minutes read OBJECTIVE: By the end of this lesson you can identify potential local businesses as first web design clients and explain how to approach them. You've learned the basics of web design. Now, how do you find people who will pay you for your new skill? Getting your first few clients can feel like a big challenge. But it's also where you start building your future. Think of it like a new stall in the market. You need to show your best wares to get people to stop and buy. We'll show you how to do just that. LOOK AROUND YOU: LOCAL BUSINESSES Start by looking in your own town. Walk around your neighbourhood in Accra, Lagos, or Lomé. What businesses do you see? Maybe a restaurant, a hair salon, a pharmacy, or a small shop selling phone accessories. Many of these businesses don't have a website. Or, if they do, it might be old and not look very good on a mobile phone. - Restaurants and 'chop bars' needing a menu online. - Fashion boutiques or tailors wanting to showcase designs. - Pharmacies for listing services and contact information. - Churches or community groups to share event schedules. - Event planners to display past work and packages. - Mobile money agents who want to look more professional online. You can also look online. Browse Instagram or Facebook for local businesses. See who has a strong social media presence but no proper website. These are your potential clients. They already understand the value of being online. [Your First Three Clients Are Special] Your first three clients are key. Don't worry too much about making a lot of money from them. Your main goals are to build a portfolio of work and get good referrals. Think of it as investing in your future business. Once you have a few happy clients, others will follow. When you find a business, approach them with a clear, direct offer. For example, you might say: 'Hello! I saw your amazing restaurant on Instagram. I can build you a professional website with your full menu, photos of your delicious dishes, and clear contact information. This will help more people find you online. I can do this for 1,500 GHS.' This is concrete. They know what they get and how much it costs. But don't just talk about it. Show them! Create a simple demo or mock-up of what their website could look like. You can do this on your phone or laptop. Imagine a market trader showing a customer a sample of fabric. It helps the customer see the quality. When they see a sample of their own business on a well-designed website, it's very powerful. After your first three projects are done, take screenshots. Use these to build your own online portfolio. Showcase them on your own website and social media. This is how every successful freelancer, from Accra to Lagos to Lomé, has built their client base: one happy customer at a time. It’s hard work, but it pays off. PRACTICE QUESTIONS 1. What is the best strategy for finding your first web design clients? A) Run expensive Facebook ads B) Approach local businesses directly with a demo and a concrete offer C) Wait for clients to find you on Google D) Print brochures and distribute on the street Answer: B — A direct approach works best because the business owner can immediately see the value. Showing a demo on your phone is like a market trader showing samples of fabric — the customer can touch and feel the quality. Pair the demo with a clear price and what they will get. Many small business owners have thought about getting a website but didn't know whom to trust. Be the person who shows up with a solution. 2. Why should you charge less for your first few web design clients? A) To make sure you don't earn too much money too quickly. B) Your main goals are to build a portfolio and get referrals, not maximum profit. C) Because your skills are not very good yet, so you don't deserve more. D) It helps to scare away potential clients who aren't serious. Answer: B — For your first few clients, your priority is not making the highest profit. Instead, you're building a collection of your work (a portfolio) and getting good word-of-mouth recommendations (referrals). These will help you attract more and higher-paying clients in the future. ---------------------------------------- Web Developer / Digital Designer — Lesson 9: Pricing Your Web Design Services and Avoiding Scams 8 minutes read SETTING FAIR PRICES FOR WEB WORK When you start learning web development, figuring out how much to charge for a website can feel confusing. If you charge too high, local small businesses might say no. If you charge too low, you might work for weeks and end up stressed and underpaid. In West Africa, beginner web designers usually charge per project rather than per hour. A simple one-page website for a local shop might range from 25,000 to 50,000 Naira in Nigeria, 300 to 600 Cedis in Ghana, or 25,000 to 50,000 CFA in Togo. As you gain experience and build larger sites with payment gateways or custom features, your prices can double or triple. STRUCTURE YOUR PAYMENTS WITH DEPOSITS Never start working on a web project without an upfront deposit. The safest standard in the web industry is the 50/50 rule: - 50% deposit before you write any code or buy hosting. - 50% final balance after the client approves the site, but BEFORE you hand over main admin passwords or push the site live on their domain. Asking for a deposit proves that the client is serious. It also covers your initial costs, such as buying test hosting or mobile data while building. [Protect Your Work Before Payment] Never transfer domain ownership or hand over full WordPress admin logins before the final payment is settled via mobile money or bank transfer. Keep the website on your own staging link or demo server until you receive the full balance. HANDLING SCOPE CREEP Scope creep happens when a client agrees to a basic website, but slowly keeps adding extra demands. For example, they might ask for a basic 3-page site, but later ask for an online store, a forum, and 50 product uploads without offering extra money. To prevent this, write down exactly what is included before taking the deposit. List the number of pages, the features, and how many rounds of design changes you offer. If the client asks for extra features later, smile and say: 'I can definitely add that! That feature costs an additional 15,000 Naira (or 150 Cedis / 15,000 CFA). Should I add it to the final invoice?' SPOTTING COMMON CLIENT SCAMS New web developers are often targeted by online scammers. Here are common red flags to watch for: - Fake Bank Receipts: The client sends a screenshot of a transfer notification, but no money enters your bank account or mobile wallet. Always verify payment inside your bank app first. - Overpayment Scam: A client 'accidentally' sends too much money and asks you to send the extra cash back immediately. The original deposit is usually fake or from a stolen card. - The Promise of Future Equity: 'I cannot pay you now, but build this site for free and I will give you 20% of my future business profit.' Always insist on paid work or a clear written agreement. - Vague International Clients: Strangers contacting you on WhatsApp from unknown foreign numbers offering huge sums for basic sites without giving business details. [Try this today] Draft a simple one-page project proposal template on your phone or computer. Include: Project Scope (number of pages), Timeline (completion date), Total Price, and Payment Terms (50% upfront, 50% before launch). PRACTICE QUESTIONS 1. What is the standard payment rule for beginner web design projects? A) 100% payment after one year of site operation B) 50% deposit before starting, 50% balance before final site handover C) 0% upfront, full payment only if the client makes sales D) 100% cash upfront before discussing the project scope Answer: B — The 50/50 rule protects both you and the client. It ensures you have funding to start work while keeping final control until full payment is received. 2. What should you do if a client asks for extra pages that were not in your original agreement? A) Build the extra pages for free so the client remains happy B) Refuse to talk to the client ever again C) Politely explain the additional cost and add it to the final invoice D) Delete the whole website and start over Answer: C — Politely explaining the additional cost protects your time while keeping the relationship professional. This prevents uncompensated scope creep. ---------------------------------------- Web Developer / Digital Designer — Lesson 10: Building a Web Portfolio with Zero Paid Experience 8 minutes read WHY YOUR PORTFOLIO MATTERS MORE THAN CERTIFICATES When a small business owner in Accra, Lagos, or Lomé wants a website, they rarely ask for a university degree. They want to see real examples of websites you have built. A portfolio is your collection of sample work that proves your web development skills. You do not need paid clients to build a strong portfolio. In fact, every professional web developer starts by building practice websites. THREE SAMPLE PROJECTS EVERY BEGINNER CAN BUILD To show potential clients that you know how to build modern websites, create these three sample projects for your portfolio: - A Local Business Site: Pick a real business in your neighborhood (like a bakery, pharmacy, or hair salon) that does not have a website. Build a clean 3-page site for them as practice. - An Event Landing Page: Create a single-page website for a wedding, local tech conference, or music festival. Include a registration form, event schedule, and contact details. - Your Personal Portfolio Website: Build a page that introduces yourself, lists your coding skills (HTML, CSS, JavaScript, WordPress), and displays links to your sample projects. FREE PLACES TO HOST YOUR PORTFOLIO You do not need to spend money on paid web hosting just to showcase your work. You can host your HTML, CSS, and JavaScript projects for free using these tools: - GitHub Pages: Free hosting directly from your code repository. Great for showing clean code to tech employers. - Netlify or Vercel: Free hosting platforms that drag-and-drop your project folders and turn them into live websites within seconds. - WordPress.com Free Tier: Useful for demonstrating basic layout skills on WordPress without buying a custom domain. HOW TO PRESENT EACH PORTFOLIO PROJECT When displaying a project on your portfolio page or sending links over WhatsApp, always include three things: - A live working link where people can view and click through the site on their phones or laptops. - A short paragraph explaining the goal (e.g., 'A responsive 3-page website built for a local pharmacy to display business hours and product lists.'). - A list of technologies used (e.g., HTML5, CSS Grid, JavaScript, Flexbox). [Try this today] Take a paper flyer from a local business near you. Convert the information on that flyer into a clean, mobile-friendly single-page HTML website draft on your phone or laptop. PRACTICE QUESTIONS 1. Why is a web design portfolio necessary for finding clients? A) It is legally required by government authorities B) It proves your practical skills by showing actual working website examples C) It automatically deposits money into your bank account D) It replaces the need to communicate with clients Answer: B — Clients want proof that you can deliver quality work. A portfolio shows live, working examples of what you can build for them. 2. Which tool allows you to host static HTML/CSS web projects for free? A) Netlify or GitHub Pages B) WhatsApp Status C) Microsoft Word D) Canva Mobile App Answer: A — Netlify and GitHub Pages provide free, reliable live web hosting for frontend projects built with HTML, CSS, and JavaScript. ---------------------------------------- Web Developer / Digital Designer — Lesson 11: Web Ethics: Client Security, Domains, and Copyright 7 minutes read ETHICS BUILDS YOUR REPUTATION As a web developer, clients will give you access to sensitive business assets. They trust you with their brand identity, payment accounts, customer emails, and domain names. Maintaining high ethical standards is the fastest way to build long-term trust and get organic referrals. DOMAIN NAMES AND HOSTING OWNERSHIP One of the biggest complaints business owners have is web developers holding their domains hostage. A domain name (like www.mybusiness.com) is the legal digital property of the client. Always register domain names using the client's official email address and personal details. If you buy the domain on their behalf using your account, transfer ownership to them once the project is fully paid. Holding a client's website or domain hostage when there is no agreement dispute is unethical and damages your professional reputation. IMAGES, FONTS, AND COPYRIGHT LAW You cannot simply search Google Images, download photos, and upload them onto a commercial client website. Most online images belong to photographers and companies who can take legal action or demand expensive licensing fees. Instead, use these safe options: - Free stock photo platforms: Unsplash, Pexels, and Pixabay offer thousands of free, high-quality photos cleared for commercial use. - Client-provided media: Ask the client to take photos of their store, products, or team using a phone camera. - Google Fonts: Use free, open-source typography from fonts.google.com. [The Danger of Nulled Themes and Plugins] Never download pirated or 'nulled' premium WordPress themes and plugins from illegal file-sharing websites. These files almost always contain hidden malicious code (malware) that compromises your client's website, steals customer data, or redirects visitors to illegal sites. CLIENT DATA AND PASSWORD SAFETY When managing passwords for hosting accounts, database files, or site admin dashboards: - Never store client passwords in clear text messages or unencrypted notes apps. - Use strong, randomly generated passwords containing numbers, letters, and symbols. - Encourage clients to use dedicated password managers like Bitwarden or 1Password to share credentials securely. PRACTICE QUESTIONS 1. Why should a website domain name always be registered under the client's name? A) Because domain names are legally free for developers B) To ensure the client legally owns their business brand and digital property C) Because web developers are not allowed to use internet browsers D) To prevent the website from showing on mobile phones Answer: B — The domain name represents the client's official digital identity. Registering it in their name ensures they maintain legal ownership of their business brand. 2. What is the major risk of using 'nulled' (pirated) WordPress plugins? A) They make the site load too fast B) They contain hidden malware that can ruin site security and compromise data C) They automatically pay extra money to hosting companies D) They turn all text into a different language Answer: B — Nulled plugins are modified by hackers to inject backdoor scripts and malware into websites, posing serious security hazards for your clients. ---------------------------------------- Web Developer / Digital Designer — Lesson 12: Client Communication and Managing Web Projects 8 minutes read CLEAR COMMUNICATION KEEPS PROJECTS MOVING Many web developers fail not because of poor coding, but because of poor communication. Business owners are often non-technical. They do not care about code syntax; they care about clear deadlines, simple explanations, and reliable results. Learning how to manage client expectations, organize content, and communicate clearly will set you apart from competitors. USING WHATSAPP BUSINESS PROFESSIONALLY In West Africa, WhatsApp is the primary business tool. Using WhatsApp Business (instead of a personal account) makes your web service look professional immediately: - Set up a Business Profile: Include your professional photo or logo, business hours, location, and web portfolio link. - Create Quick Replies: Save automated text templates for common client questions like pricing packages, accepted payment methods, and required materials. - Build a Service Catalog: List your website packages (e.g., 'Basic 1-Page Site', 'Standard Business Site', 'E-commerce Store') directly on your WhatsApp profile. THE 5-STEP WEB PROJECT PROCESS To avoid confusion, follow this structured process for every website build: - 1. Discovery & Agreement: Discuss requirements, sign a simple agreement, and collect the 50% deposit. - 2. Content Collection: Get logos, text, business photos, and contact info from the client before starting the design. - 3. First Draft (Staging): Build the website on your draft server link and send it for review. - 4. Client Revisions: Allow up to 2 structured rounds of edits based on client feedback. - 5. Final Payment & Launch: Receive the remaining 50% balance, then connect the website to the official domain and hand over control. SETTING BOUNDARIES FOR CLIENT REVISIONS Without clear limits, clients may send endless daily text messages asking for tiny design changes. State clearly in your agreement: 'This package includes 2 rounds of design revisions. Any extra changes after sign-off will be billed at an additional rate.' This keeps the project moving forward on schedule while keeping both you and the client focused. [Try this today] Download WhatsApp Business and draft 2 quick replies: one listing what you need from a client to start a website (logo, text, pictures) and one explaining your 50/50 payment structure. PRACTICE QUESTIONS 1. Why is collecting all client text and photos BEFORE building the site important? A) It prevents delays caused by waiting for missing materials while building B) It allows you to sell their photos to other companies C) It reduces your mobile data costs by half D) It is required by domain registration companies Answer: A — Waiting for text content and images midway through a project is the single biggest cause of project delays. Collecting content first speeds up development. 2. How many rounds of design revisions should typically be included in a standard web project package? A) Unlimited revisions forever B) Zero revisions allowed C) 1 to 2 structured rounds of revisions D) 50 revisions per week Answer: C — Limiting revisions to 1 or 2 rounds keeps the project moving, sets clear boundaries, and prevents endless uncompensated rework. ---------------------------------------- Web Developer / Digital Designer — Lesson 13: Build Your Professional Profile 10 min read OBJECTIVE: Set up a simple, honest professional presence online so employers and customers can find and trust you. Before someone hires you or buys from you, they often look you up. A professional profile is simply a clean, honest page that answers three questions: who are you, what can you do, and how can someone reach you? You do not need to be famous or have a computer. A phone and one good photo are enough to start. START WITH WHAT IS FREE - WhatsApp Business — free app. Add your trade, working hours, location and a short catalogue of your work or services. Many customers in West Africa will find you here first. - Google Business Profile — free. If you have a shop, workshop or stall, this puts you on Google Maps so people nearby can find you. - LinkedIn (free Basic account) — useful if you want office, NGO or company work. Add a clear photo, your trade or skill, and two or three lines about what you have done. - Local job and trade groups — Facebook and WhatsApp groups for your town or trade are where many real opportunities are shared first. You do not need all four on day one. Pick the one where your customers or employers actually are. A tailor or caterer may get more from WhatsApp Business and local groups; an IT support learner may need LinkedIn first. Add the others over time. WHAT MAKES A PROFILE TRUSTWORTHY - A real photo of you — face visible, plain background, neat clothing. No sunglasses, no filters. - Your real name, written the same way everywhere. - One honest sentence about what you do: 'I install and repair solar home systems in Hohoe.' - Proof: photos of finished work, a certificate, or a short quote from a happy customer. - A phone number or WhatsApp link that actually works. [Protect yourself] Never pay anyone who promises to 'verify' your profile or guarantee you a job for a fee. Real platforms like LinkedIn, WhatsApp Business and Google Business Profile are free to set up. Anyone asking for money to list you is likely a scammer. [Try this today] Write your one honest sentence — who you are and what you do — and save it in your notes. You will reuse it in every profile, CV and introduction from now on. PRACTICE QUESTIONS 1. Which of these is free to set up and puts your workshop on Google Maps? A) A paid business directory B) Google Business Profile C) A printed flyer D) A website you pay a developer for Answer: B — Google Business Profile is free and places your business on Google Maps and Search, so people nearby can find you. You only need a phone and your business details. 2. What is the most important quality of a professional profile photo? A) It was taken by a professional photographer B) It uses an attractive filter C) Your face is clearly visible and you look neat D) It shows you with expensive items Answer: C — Employers and customers want to see a real, trustworthy person. A clear, neat photo with a plain background builds more trust than any filter or expensive backdrop. ---------------------------------------- Web Developer / Digital Designer — Lesson 14: Write Your Goals and Plan for Obstacles 10 min read OBJECTIVE: Turn a wish into a written goal, review it weekly, and use if-then plans to handle the obstacles that usually stop you. A goal that stays in your head is a wish. A goal written down, with a date and a next step, is a plan. Research on how people actually change their behaviour keeps finding the same thing: people who write their goals down, check them regularly, and decide in advance what to do when things go wrong are far more likely to finish what they start. WRITE IT DOWN, THE PRACTICAL WAY - One goal at a time. 'Finish the solar course by 30 November' beats five vague wishes. - Make it checkable. You should be able to say 'done' or 'not done' — not 'I tried my best'. - Give it a date. A goal without a date quietly becomes 'someday'. - Write the very next small step. Not 'get a job' but 'message two hardware shops on Saturday morning'. - Keep it where you will see it — a notebook, a note on your phone, or paper on the wall. THE WEEKLY REVIEW — 15 MINUTES THAT CHANGE EVERYTHING Pick one fixed moment each week — Sunday evening works well for many people. Ask yourself three questions: What did I finish this week? What got in my way? What is my next step for the coming week? Write the answers down. This small habit catches problems while they are still small, and it reminds you that you are moving, even when progress feels slow. IF-THEN PLANS: DECIDE BEFORE THE OBSTACLE ARRIVES Most plans fail at the same predictable moments: the data bundle runs out, a friend invites you out on study night, rain cancels the job you planned. An if-then plan is a decision you make now, so a hard moment does not require willpower later. The format is simple: 'IF [obstacle happens], THEN I will [specific action].' - IF my data finishes, THEN I will study from my downloaded offline lessons instead. - IF it rains on the day I planned to visit shops, THEN I will call them instead and visit the next day. - IF I feel too tired to study at night, THEN I will do just 10 minutes — starting is the hard part. - IF a customer delays payment, THEN I will send one polite reminder after three days, not argue. [A note on visualisation] Imagining your goal can help — but picture the steps, not just the reward. Instead of only dreaming about the certificate on your wall, picture yourself opening the lesson, answering the quiz, and messaging the customer. Picturing the process prepares you; picturing only the prize can actually relax you into doing nothing. [Try this today] Write one goal with a date, then write two if-then plans for the obstacles most likely to stop you. Keep them somewhere you will see this week. PRACTICE QUESTIONS 1. What makes a goal 'checkable'? A) It is written in English B) You can clearly say whether it is done or not done C) Other people approve of it D) It is ambitious enough to impress people Answer: B — A checkable goal has a clear finish line: 'finish 8 lessons by Friday' can be marked done or not done. 'Do my best' cannot — and vague goals are easy to quietly abandon. 2. Your study night arrives and your data bundle has run out. What does a good if-then plan do? A) It forces you to buy more data immediately B) It tells you to skip studying until next week C) It gives you a decision you made in advance, like switching to your downloaded offline lessons D) It punishes you for not planning better Answer: C — An if-then plan removes the need for willpower in the moment: you decided earlier that IF data runs out, THEN you study offline. The decision is already made, so you just follow it. ---------------------------------------- Web Developer / Digital Designer — Lesson 15: Introduce Yourself in 30 Seconds 8 min read OBJECTIVE: Prepare and practise a short, confident self-introduction you can use with employers, customers and new contacts. Many capable people miss opportunities because they freeze when someone asks 'So, what do you do?' A self-introduction is a short, prepared answer — about 30 seconds — that you have practised until it feels natural. It is not showing off. It is simply making it easy for people to understand how you can help them. THE THREE-PART SCRIPT - Who you are: your name and your trade or skill. 'My name is Amina. I am a trained pharmacy assistant.' - What you can do: one or two concrete things, with proof if you have it. 'I have completed training in dispensing support and stock management, and I helped in a busy pharmacy for three months.' - What you are looking for: say it clearly. 'I am looking for a position in a pharmacy or clinic in this area.' or 'I take catering orders for events of up to 100 people.' Put together, it sounds like this: 'Good morning, my name is Kofi. I am a solar technician — I have finished certified training in home solar installation, and I have already installed systems for three families in this town. I am looking for more customers, and I also do repairs and maintenance. Here is my number.' Thirty seconds, and the listener knows exactly what you offer. MAKE IT YOURS - Adjust the ending for the listener: a customer hears what you sell; an employer hears what job you want; a contact hears how they can help you. - Practise out loud, not in your head — say it to a friend, a mirror, or your phone's voice recorder, five times. - Keep it honest. A small true claim beats a big exaggerated one that falls apart at the first question. - End with a way to reach you: your number, your WhatsApp, or where your shop is. [For shy learners] Feeling nervous is normal and does not mean you are bad at this. Preparation is the cure: a practised script means you never have to invent sentences while nervous. Start by using it in low-pressure moments — with a neighbour, then a shopkeeper — before the big interview or the important customer. [Try this today] Write your three-part introduction in your notes, then say it out loud three times. Use it once this week with a real person. PRACTICE QUESTIONS 1. What are the three parts of a good 30-second introduction? A) Your family background, your education, your hobbies B) Who you are, what you can do, what you are looking for C) Your salary expectation, your location, your age D) Your problems, your needs, your complaints Answer: B — The script answers the three questions every listener has: who is this person, what can they do for me, and what do they want? Keep it short, honest and practised. 2. What is the best way to prepare your introduction? A) Memorise a long speech about your whole life B) Wait for inspiration in the moment C) Practise a short script out loud several times before you need it D) Copy someone else's introduction word for word Answer: C — Saying it out loud — to a friend, mirror or voice recorder — is what makes it feel natural under pressure. A short, honest, practised script beats both improvisation and a long memorised speech. ---------------------------------------- Get the full app: https://miva-skillsnav.lovable.app