Web application development relies heavily on writing source code that integrates user interface design and backend functionality to deliver seamless experiences. In Kenya's growing digital economy, software developers must efficiently create interactive interfaces and manage code versions to maintain quality and collaboration, especially in multi-developer environments. This chapter focuses on the tools and practices essential for developing user interfaces and controlling code versions, foundational skills for professional software developers working in diverse sectors such as banking, education, and public service.

2.1 Creation of user interface development tools

User interface (UI) development is a critical part of web application development, as it shapes how users interact with software. Kenyan software developers need to select appropriate front-end tools that align with project requirements, team skills, and scalability needs. Understanding the variety of UI development tools available empowers developers to build responsive, accessible, and visually appealing web applications that meet user expectations across devices.

2.1.1 Identification of front-end development tools

Front-end development tools encompass frameworks, libraries, code editors, and build tools that facilitate the creation of the user interface. These tools enable developers to streamline coding, enhance productivity, and ensure cross-browser compatibility. In Kenya's software development landscape, where projects range from simple websites for local businesses to complex portals for county governments, selecting the right front-end tools is essential.

The core of every web front end is made of three languages that the browser understands directly: HTML for structure, CSS for presentation and JavaScript for behaviour. Frameworks, editors and build tools are all layered on top of these three, so they are studied first.

2.1.1.1 Hypertext Markup Language

Hypertext Markup Language (HTML) is the standard language used to describe the structure and content of a web page. A browser reads an HTML file and turns it into headings, paragraphs, images, links, forms and tables on the screen. Example: a Kisumu hospital builds an appointment page in HTML so that patients see the hospital name, a short description of services and a booking form.

Every HTML5 document follows the same basic skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lakeview Hospital</title>
</head>
<body>
  <h1>Book an Appointment</h1>
  <p>Choose a department and a date.</p>
</body>
</html>

The parts of the skeleton each have a clear job:

• DOCTYPE declaration: Tells the browser that the page is written in HTML5 so that it does not fall back to old rendering modes.
• html element: The root of the page, holding everything else. The lang attribute states the language, which helps screen readers and search engines.
• head element: Holds information about the page that is not displayed in the main window, such as the title, character set, linked style sheets and scripts.
• meta viewport tag: Makes the page scale correctly on phones and tablets, which is the starting point of responsive design.
• body element: Holds all visible content such as text, images, forms and buttons.

HTML5 also provides semantic elements that describe the meaning of each part of a page. They improve accessibility and search engine ranking because software can tell what each block is for.

• header: Introductory content such as a logo and page title.
• nav: A block of navigation links, for example Home, Services and Contact.
• main: The central content that is unique to the page. There should be only one main element per page.
• section: A thematic group of related content, usually with its own heading, such as the "Departments" part of a hospital page.
• article: A self-contained piece of content that makes sense on its own, such as a news item or a notice.
• footer: Closing content such as contact details and copyright notes.

2.1.1.2 HTML Tags, elements and attributes

A tag is a keyword enclosed in angle brackets that tells the browser how to treat content. An element is the complete unit made of an opening tag, the content and a closing tag. An attribute is extra information placed inside the opening tag as a name and value pair. Example: a Naivasha flower farm uses an order form in which each input element carries attributes that say what type of data is expected.

<a href="catalogue.html" title="Flower catalogue">View catalogue</a>

In this example, a is the tag name, href and title are attributes, "View catalogue" is the content, and the whole line from the opening tag to the closing tag is the element.

Some elements have no content and no closing tag. These are called void elements, for example br, hr, img and input.

<img src="roses.jpg" alt="Red roses in a greenhouse" width="300">
<input type="number" name="stems" placeholder="Number of stems" required>

Commonly used tags include:

• Headings h1 to h6: Six levels of headings, with h1 being the most important. Use only one h1 per page.
• p: A paragraph of text.
• a: A hyperlink to another page or resource.
• img: Embeds an image in the page.
• ul, ol and li: Unordered (bulleted) lists, ordered (numbered) lists and their list items.
• table, tr, th and td: A table, its rows, header cells and data cells.
• form, input, select, textarea and button: Elements used to collect data from users.
• div and span: Generic containers used to group content for styling or scripting. A div is a block, a span is inline.

Commonly used attributes include:

• href: The destination address of a link.
• src: The file location of an image, script or media element.
• alt: Text that describes an image for users who cannot see it. It is essential for accessibility.
• id: A unique identifier for one element on the page. CSS and JavaScript use it to find that element.
• class: A label shared by many elements so that they can be styled or selected together.
• type, name, value and placeholder: Attributes that define the behaviour and data of form inputs.
• required: Stops a form from being submitted until the field is filled.

Elements can be nested inside one another, but they must be closed in the reverse order in which they were opened. For example, <p><strong>Sale</strong></p> is correct and <p><strong>Sale</p></strong> is not.

2.1.1.3 Cascading Style Sheets

Cascading Style Sheets (CSS) is the language that controls how HTML elements look: colours, fonts, spacing, layout and responsiveness. Separating presentation from structure means one change in a style rule can update the look of an entire website. Example: a Mombasa hotel changes its brand colour once in CSS and every page of its booking website updates at the same time.

A CSS rule has a selector, which says which elements to style, and a declaration block with one or more property and value pairs:

h1 {
  color: #0b5394;
  font-size: 28px;
  text-align: center;
}

The word cascading describes how the browser decides between conflicting rules. When several rules target the same element, the browser considers the importance of the rule (a declaration marked !important beats a normal one), how specific the selector is, and the order in which the rules appear. When importance is equal, a more specific selector wins over a less specific one, and when specificity is also equal the later rule wins. Styles written in an element's style attribute (inline CSS) rank above rules in style sheets of normal importance.

Common selector types are:

• Element selector: Targets every element of a tag name, for example p.
• Class selector: Targets elements with a class attribute, written with a dot, for example .room-card.
• ID selector: Targets the single element with that id, written with a hash, for example #main-menu.
• Group selector: Applies one rule to several selectors separated by commas, for example h1, h2, h3.
• Descendant selector: Targets elements inside another element, for example nav a.
• Pseudo-class selector: Targets an element in a particular state, for example a:hover for a link under the mouse pointer.

Every element is treated by CSS as a rectangular box made of content, padding, border and margin. Padding is the space between content and border, and margin is the space outside the border. Understanding the box model is the basis of controlling layout.

CSS can be applied to a page in three ways: embedded, inline and external. Each is covered in the next three sections.

2.1.1.4 Embedded CSS

Embedded CSS, also called internal CSS, is written inside a style element placed in the head of one HTML document. The rules apply only to that page. Example: a SACCO publishes a single-page notice about its annual general meeting and embeds a few rules in the page so that the notice is one self-contained file.

<head>
  <title>AGM Notice</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
    h1 { color: #1b5e20; }
    .notice { border: 1px solid #1b5e20; padding: 12px; }
  </style>
</head>
<body>
  <h1>Annual General Meeting</h1>
  <p class="notice">All members are invited to attend.</p>
</body>

The first three points below are situations where embedded CSS suits, and the last two are its limits:

• Strength, single-page use: It works well for one-page documents, email templates and quick prototypes because no extra file is needed.
• Strength, page-specific styling: It lets one page have rules that differ from the rest of the site.
• Strength, no extra file request: The browser does not need to download a separate style sheet for that page.
• Limit, duplication across pages: If the same rules are pasted into ten pages, each must be edited separately when the design changes.
• Limit, larger HTML files: The style rules increase the size of every page and are not cached by the browser separately from the HTML.

2.1.1.5 Inline CSS

Inline CSS is written directly in the style attribute of an individual HTML element. It affects only that element and has higher priority than rules in embedded or external style sheets (unless one of those rules is marked !important). Example: a county revenue office wants one warning message on its payments page to appear in red without changing any other text.

<p style="color: red; font-weight: bold;">Payments close at 4:00 pm today.</p>

Points to remember about inline CSS:

• Highest priority: Because it is attached to the element, it overrides conflicting normal rules from embedded and external CSS.
• One element only: It cannot be reused, so styling twenty paragraphs needs twenty repeated style attributes.
• Useful for quick tests: Developers use it to try a change in the browser before moving the rule to a proper style sheet.
• Dynamic values: JavaScript often sets inline styles when a value is calculated at run time, such as the width of a progress bar.
• Hard to maintain: Mixing presentation into the HTML defeats the purpose of CSS and makes pages harder to read and update.
• Pseudo-classes and media queries not possible: Inline styles cannot express states such as :hover or conditions such as screen width, which must be placed in a style sheet.

2.1.1.6 External

External CSS is kept in a separate file with the extension .css and is linked to each HTML page using a link element in the head. It is the preferred method for real projects because one file controls the look of the whole website. Example: a technical training institute with fifty pages links all of them to one style.css so that a change of logo colour is made in one place.

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

The advantages of external CSS are consistency, easier maintenance, smaller HTML files and browser caching, which speeds up later page loads, an important point where mobile data is costly.

Steps to create and link an external style sheet:

1. Create a project folder: Make a folder for the website with a sub-folder named css so that files are organised.
2. Create the CSS file: In the css folder, create a plain text file named style.css. Do not include any HTML tags in it.
3. Write the rules: Add selectors and declarations, for example body { margin: 0; font-family: Arial, sans-serif; }.
4. Link the file in the head: In each HTML page, add <link rel="stylesheet" href="css/style.css">. The href must match the file's path relative to the page.
5. Reuse the file on other pages: Add the same link element to every page that should share the design.
6. Save and test in the browser: Refresh the page and check that the styles appear. If they do not, open the browser developer tools to check for a wrong file path.
7. Update centrally: When the design changes, edit only style.css and every linked page changes.

2.1.1.7 JavaScript basics

JavaScript is the programming language of the web. It runs in the browser and makes pages interactive by responding to clicks, checking form entries and changing content without reloading the page. Example: a Nakuru pharmacy's website uses JavaScript to show a greeting that depends on the time of day.

JavaScript can be added to a page in two ways: inside a script element, or in an external file linked with the src attribute. External files are preferred for the same reasons as for CSS.

<script src="js/app.js" defer></script>

let hour = new Date().getHours();
let greeting;
if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}
console.log(greeting + ", welcome to our pharmacy.");

The basic building blocks of the language are:

• Variables: Named containers for data. Use let for values that change and const for values that must not be reassigned. The older var is best avoided.
• Functions: Reusable blocks of code that can take inputs and return a result, for example function add(a, b) { return a + b; }.
• Conditionals: if, else if, else and switch statements that choose which code to run depending on a condition.
• Loops: for, while and for...of repeat code, for example to display every item in a list.
• Comments: Notes that the browser ignores, written as // single line or /* multiple lines */.
• Console output: console.log() prints values in the browser console, which developers use for testing and debugging.

JavaScript is case sensitive, so total and Total are two different names. Statements normally end with a semicolon.

2.1.1.8 Data types operation

Every value in JavaScript has a data type that decides what can be done with it. JavaScript is dynamically typed, which means a variable can hold different types at different times. Example: a hardware shop's online quotation page stores the item name as a string, the quantity as a number and whether the item is in stock as a boolean.

Primitive data types are:

• String: Text in quotes, for example "Cement".
• Number: Integers and decimals, for example 50 or 2500.75.
• Boolean: Either true or false, used in decisions.
• Undefined: The value of a variable that has been declared but not given a value.
• Null: An intentional empty value. Note the known quirk that typeof null returns "object", even though null is a primitive.
• BigInt: A type for integers too large for the Number type, written with an n at the end, for example 9007199254740993n.
• Symbol: A type for unique identifiers, mainly used by libraries to create property names that cannot clash.

Non-primitive types include objects, arrays (ordered lists such as ["tiles", "paint"]) and functions. The typeof operator shows the type of a value, for example typeof 25 gives "number".

Operations are carried out with operators:

• Arithmetic operators: +, -, *, /, % (remainder) and ** (power).
• Assignment operators: =, +=, -= and so on, for example total += 100 adds 100 to total.
• Comparison operators: >, <, >=, <=, == and ===. Strict equality === compares both value and type, so 5 === "5" is false while 5 == "5" is true. Use === to avoid surprises.
• Logical operators: && (and), || (or) and ! (not) combine conditions.
• String concatenation: The + operator joins strings, and template literals using backticks insert values, for example `Total: Ksh ${total}`.

Adding a number to a string produces a string: "5" + 3 gives "53". Functions such as Number(), parseInt(), parseFloat() and String() convert between types deliberately. Input read from a form field is always a string, so it must be converted before calculation.

Example calculation: VAT at 16% on 5 bags of cement at Ksh 800 each.

Formula: VAT = price × quantity × 0.16
Substitution: VAT = 800 × 5 × 0.16
Working: 800 × 5 = 4,000; 4,000 × 0.16 = 640
Result: VAT = Ksh 640

const price = 800;
const quantity = 5;
const vat = price * quantity * 0.16;
console.log(`VAT: Ksh ${vat}`);   // VAT: Ksh 640

2.1.1.9 Document Object Model (DOM)

The Document Object Model (DOM) is a representation of an HTML page as a tree of objects that JavaScript can read and change. The browser builds this tree when it loads the page, with the document object at the top, then the html element, then head and body, and so on down to each text node. Example: an Eldoret dairy cooperative's page uses the DOM to add each new milk delivery to a table without reloading.

Each tag becomes an element node, each piece of text becomes a text node and each attribute becomes an attribute node. Changing the tree changes what the user sees immediately.

Selecting elements:

• getElementById("id"): Returns the one element with that id.
• querySelector("selector"): Returns the first element that matches any CSS selector, such as ".notice" or "#total".
• querySelectorAll("selector"): Returns all matching elements.
• getElementsByClassName and getElementsByTagName: Older methods that return collections of elements.

Changing elements:

• textContent: Reads or sets the plain text of an element.
• innerHTML: Reads or sets the HTML inside an element. Never insert untrusted user input with it because that can allow script injection.
• style: Changes inline CSS, for example element.style.color = "green".
• classList: Adds, removes or toggles CSS classes, for example element.classList.add("active").
• setAttribute: Changes attributes such as src or href.
• createElement, appendChild and remove: Create new elements, insert them into the page and delete them.

Responding to events uses addEventListener:

const button = document.querySelector("#add");
const list = document.querySelector("#deliveries");

button.addEventListener("click", function () {
  const item = document.createElement("li");
  item.textContent = "Delivery recorded: 120 litres";
  list.appendChild(item);
});

Scripts that use the DOM must run after the page elements exist. Placing the script at the end of the body, or using the defer attribute, makes sure the elements are available.

2.1.1.10 JavaScript Frameworks overview e.g JQuery syntax and events

JavaScript libraries and frameworks provide ready-made code so that developers do not have to write everything from scratch. They shorten development time, reduce errors and give teams a shared structure. Example: a courier company's tracking page uses jQuery to show and hide parcel details when a customer clicks a row, with only a few lines of code.

Popular frameworks and libraries

• React.js: A JavaScript library, originally developed at Facebook, for building reusable UI components. Its virtual DOM helps optimise rendering performance, which suits dynamic web applications such as online banking portals.
• Angular: A comprehensive framework maintained by Google that offers two-way data binding and dependency injection, suited to large applications such as government management systems.
• Vue.js: A progressive framework that is lightweight and easy to learn, often chosen for small and medium projects such as interactive dashboards for retail businesses.
• Svelte: A compiler that converts components into small, efficient JavaScript, which suits pages that must load quickly on slow connections.
• jQuery: A small, long-established library that simplifies selecting elements, handling events, changing content, animating and sending requests. It is strictly a library rather than a full framework, and is still found in many existing websites.

jQuery syntax

jQuery is added to a page by linking its script file before your own script. The file can be loaded from a content delivery network (CDN) or downloaded and stored in the project:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/app.js"></script>

Its basic syntax is:

$(selector).action();

The dollar sign $ calls jQuery, the selector uses the same notation as CSS to find elements, and the action is a method applied to those elements. To make sure the page is ready before the code runs, the code is wrapped in a ready function:

$(document).ready(function () {
  $("#details").hide();
  $("p.note").css("color", "blue");
});

Frequently used jQuery methods:

• hide(), show() and toggle(): Control visibility of elements.
• text() and html(): Read or set the text or HTML of elements.
• val(): Reads or sets the value of a form field.
• addClass(), removeClass() and toggleClass(): Change the CSS classes of elements.
• css(): Reads or sets style properties.
• fadeIn(), fadeOut() and slideToggle(): Simple animation effects.

Methods can be chained, for example $("#box").addClass("open").fadeIn();.

jQuery events

An event is something that happens on the page, such as a click or a key press. jQuery attaches a function, called an event handler, to run when the event occurs:

$(document).ready(function () {
  $(".parcel-row").click(function () {
    $(this).next(".parcel-details").slideToggle();
  });

  $("#search").on("keyup", function () {
    console.log($(this).val());
  });
});

In the handler, $(this) refers to the element that triggered the event. Common events include:

• click and dblclick: A single or double click on an element.
• mouseenter and mouseleave: The pointer moves onto or off an element.
• keydown and keyup: A key is pressed or released, often used in live search boxes.
• submit: A form is submitted, where a handler can validate entries first.
• change: The value of a field such as a select list has changed.
• focus and blur: A field gains or loses focus.

The on() method is the general way to attach one or more events, and off() removes them. Modern frameworks such as React, Angular and Vue handle events in their own ways, but the idea of a handler responding to an event is the same.

2.1.1.11 Code editors and integrated development environments (IDEs)

A code editor is a program for writing source code with features such as syntax colouring and auto-completion. An IDE adds integrated debugging, project management and testing. The right choice depends on the size of the project, the budget and the computer's capacity. Example: the IT officer of a Kericho tea estate with an older office computer chooses a very light editor for editing the estate's notice-board pages, while a software firm building a large portal chooses a full-featured IDE.

2.1.1.12 Build and automation tools

Build and automation tools prepare front-end code for production by combining, compressing and transforming files. They reduce page size and loading time, which matters for users on slow or costly mobile data. Example: a Thika school builds a student portal with many JavaScript files and images, and uses Vite to bundle and minify them so that the portal loads faster on learners' phones.

2.1.1.13 Other components of front-end development tools

Beyond editors and bundlers, front-end projects rely on supporting tools that keep code consistent, maintainable and tested. Each solves a problem that appears as a project and its team grow. Example: the web team of a bank uses Sass and Jest so that its internet banking pages stay easy to update and reliable after every change.

• Component libraries: Collections of reusable UI elements such as buttons, menus and dialogue boxes. They keep the look and behaviour of an application consistent and save design time.
• State management tools: Libraries like Redux or Vuex that keep the data shared by many parts of an application in one place. This makes changes to that data predictable and easier to debug.
• CSS preprocessors: Tools like Sass or Less that extend CSS with variables, nesting and functions. The code is compiled to ordinary CSS, which makes large style sheets easier to maintain.
• Browser developer tools: Built-in features in browsers such as Chrome DevTools for inspecting the DOM, editing CSS live, reading console messages and analysing performance.
• Testing utilities: Frameworks such as Jest or Mocha for unit and integration testing of front-end code. Automated tests show quickly when a change has broken existing behaviour.

2.1.1.14 CSS frameworks

A CSS framework is a ready-made set of style rules and layout tools that saves developers from writing every rule themselves. Most include a responsive grid and styled components such as buttons, forms and navigation bars. Example: a Nairobi construction contractor with a small web team uses a CSS framework to build a project showcase site that works on phones and desktops in a few days.

• Bootstrap: A widely used framework with a responsive grid system and pre-designed components such as navigation bars, cards and modals. Pages are styled mostly by adding its class names to HTML elements.
• Tailwind CSS: A utility-first framework that provides small single-purpose classes, for example for margin, colour and font size, which are combined directly in the HTML. It gives freedom of design without writing much custom CSS.
• Bulma: A framework built on the flexbox layout model that is written in CSS only, with no JavaScript. It offers a clean set of components and a simple column system.
• Foundation: A framework with a flexible grid and responsive tools, aimed at building sites that adapt to different screen sizes. It is often used where more customisation of the layout is needed.
• Materialize CSS: A framework based on Google's Material Design ideas, with cards, buttons and form styles that follow its visual language. It suits projects that want a Material look quickly.

Chapter Summary

This chapter explored the essential tools and techniques for writing web application source code, beginning with the creation of user interfaces using front-end development tools such as HTML, CSS in its various forms, the Document Object Model, and JavaScript frameworks like jQuery. It highlighted the importance of version control in managing changes to source code efficiently. The development of functionality and interactivity was examined alongside the methodology for implementing responsive design, emphasizing the adaptation to different screen resolutions. The chapter then delved deeper into front-end development, reviewing the basics of HTML, CSS, and JavaScript, including frameworks that enhance coding efficiency. Application Programming Interfaces were introduced with a focus on integration and testing to ensure seamless communication between software components. Server-side coding tools, particularly PHP, were covered as part of back-end development, which also included an overview of back-end frameworks. The implementation of back-end databases was discussed through steps for creation, connection, and manipulation via web interfaces, followed by insights into creating back-end APIs. Finally, the chapter addressed workplace safety and health practices relevant to web development environments, emphasizing compliance with OSHA regulations, and concluded with proper e-waste storage, disposal, and management practices to promote environmental responsibility.