Web application source code writing is a foundational skill for software developers engaged in creating interactive, dynamic websites and applications that serve Kenya’s growing digital economy. This chapter addresses critical tools and practices that enable efficient, maintainable, and collaborative web application development. Developers in Nairobi’s tech hubs or software teams at county government offices rely heavily on modern front-end tools and robust version control systems to deliver responsive and scalable web solutions. Understanding these technologies and processes is essential for producing high-quality code that meets user expectations and integrates smoothly into broader software ecosystems.
2.1 Creation of user interface development tools
Developing a web application's user interface (UI) involves using specialized tools that enable designers and developers to build visually appealing and user-friendly front ends. In Kenya, where digital services are rapidly expanding across sectors such as banking, education, and health, the choice of front-end development tools significantly impacts project timelines and user engagement. This section explores the identification and use of these tools, focusing on those most relevant to software developers working on web applications.
2.1.1 Identification of front-End development tools
Front-end development tools encompass a range of software applications and frameworks that facilitate the creation, testing, and optimization of the user interface of web applications. These tools help developers write clean, maintainable code and implement designs that respond well on various devices used across Kenya, from smartphones in rural areas to desktops in urban offices.
Popular Front-End Frameworks and Libraries
- React.js: A JavaScript library maintained by Facebook, widely adopted for building reusable UI components. It supports efficient rendering and state management, making it useful for dynamic web applications such as online banking portals at Equity Bank.
- Angular: A comprehensive framework maintained by Google that provides a full suite for building complex single-page applications (SPAs). County government offices use Angular to develop dashboards that consolidate citizen service information.
- Vue.js: Known for its gentle learning curve and flexibility, Vue is increasingly popular among Kenyan startups for rapid prototyping and building performant interfaces.
- Bootstrap: A CSS framework that offers pre-designed UI components and responsive grid systems, helping developers create mobile-friendly websites quickly, used by many retail businesses to enhance their online presence.
- Tailwind CSS: A utility-first CSS framework that allows developers to design custom UI components with minimal CSS, favored for its efficiency in styling without leaving HTML.
Development Environment Tools
- Visual Studio Code: A lightweight but powerful source-code editor with support for debugging, Git control, and extensions tailored for front-end development.
- Chrome DevTools: An in-browser toolset for inspecting HTML, CSS, and JavaScript, essential for real-time UI debugging during development and testing.
- Figma and Adobe XD: While primarily design tools, they integrate with front-end workflows by enabling developers to inspect designs and export assets, bridging the gap between UI designers and developers.
Task Runners and Module Bundlers
- Webpack: A module bundler that compiles JavaScript modules and assets, optimizing code delivery for faster load times, critical for users accessing web apps with limited bandwidth in Kenya.
- Gulp: A streaming build system automating repetitive tasks such as minification and compilation, improving development efficiency.
- NPM Scripts: Leveraging Node Package Manager to run scripts for building, testing, and deploying front-end code.
Version Control Integration
Modern front-end tools integrate tightly with version control systems, enabling seamless collaboration among developers working on UI code. Visual Studio Code, for example, includes Git integration, allowing developers at institutions like Kenya Revenue Authority (KRA) to manage code changes effectively.
2.1.1.3 JavaScript basics
2.1.1.3.3 JavaScript Frameworks overview e.g JQuery syntax and events
Practice Questions
- Explain five front-end development tools commonly used in web application development and describe their primary uses. (10 marks)
- Discuss how task runners and module bundlers improve the front-end development process, citing examples relevant to Kenyan software projects. (10 marks)
- Identify and describe three development environment tools that assist in writing and debugging front-end code. (6 marks)
The rest of this chapter
🔒Create a free account to open more of this chapter.
Free: practical guides, quick cards, workplace scenarios and more.
Create a free account 🔒2.2 Performing Version control
Version control is an essential practice in software development that manages changes to source code over time. For Kenyan software developers working on web applications, version control systems enable collaboration, track history, and reduce conflicts when m…
🔒2.3 Functionality and interactivity development
Functionality and interactivity are the core pillars of any web application, shaping how users engage with the system and achieve their goals. In the Kenyan software development industry, delivering responsive and user-friendly web applications is critical for…
🔒2.4 Responsive design implementation Methodology
Responsive design is essential for creating web applications that provide seamless user experiences across a wide range of devices and screen sizes, a necessity in Kenya where users access applications from desktops, tablets, and predominantly mobile phones. I…
🔒2.5 Front-end Development
In the Kenyan software development industry, front-end development plays a crucial role in delivering user-friendly web applications that meet the expectations of diverse users across sectors such as banking, education, and government services. Front-end devel…
🔒2.6 Application Programming Interfaces (API)
Application Programming Interfaces (APIs) are essential tools in modern web application development, enabling different software systems to communicate and share data efficiently. In Kenya's growing digital economy, APIs facilitate integration between local fi…
🔒2.7 Server-side coding tools
Server-side coding tools enable developers to create dynamic web applications that process data, manage databases, and handle business logic on the server before sending content to the client. In Kenya’s software development landscape, mastering server-side te…
🔒2.8 Back-end Development
Back-end development forms the backbone of web applications by managing server-side logic, database interactions, and application functionality beyond the user interface. In Kenya's growing tech industry, software developers working in banks, government agenci…
🔒2.9 Back-end Database Implementation
Databases are critical for storing, retrieving, and managing data in web applications. Kenyan developers must design and implement databases that meet performance, security, and scalability demands of various sectors, from healthcare record systems to retail i…
🔒2.10 Back-end API creation
In modern web application development, the back-end API (Application Programming Interface) serves as the critical bridge between the client-side interface and the server-side data or logic. In Kenya’s fast-growing software industry, companies building e-comme…
🔒2.11 Workplace safety and health practices
Software development environments in Kenya, including offices and data centers, require adherence to workplace safety and health practices to protect employees from physical and ergonomic hazards. Although the risks may differ from industrial settings, imprope…
🔒2.12 E-waste storage and disposal
In Kenya's growing software development sector, managing electronic waste (e-waste) generated by obsolete or malfunctioning hardware is critical for sustainable operations. Software firms and IT departments in banks, universities, and county government offices…
🔒2.13 E-waste management
Effective e-waste management is essential for sustainable software development practices in Kenya. It involves coordinated activities to minimize e-waste generation, promote reuse and recycling, and ensure safe handling throughout the equipment lifecycle. Prop…
Chapter Summary
This chapter explored the essential tools and techniques required to write web application source code, beginning with the creation of user interfaces using front-end development tools such as HTML, CSS in various forms, and JavaScript frameworks including jQuery. It emphasized the importance of version control for managing changes during development. The chapter then discussed how to enhance functionality and interactivity within web applications, followed by methodologies for implementing responsive design to accommodate different screen resolutions. Front-end development was covered in detail, revisiting HTML, CSS, and JavaScript basics alongside frameworks. The integration and testing of Application Programming Interfaces (APIs) were explained to enable communication between software components. On the server side, PHP coding basics and back-end frameworks were introduced to build the application logic, while back-end database implementation focused on creating, connecting, and manipulating databases through web interfaces. The process of back-end API creation was also examined. Finally, the chapter addressed workplace safety and health practices related to web development environments, referencing applicable OSHA regulations, and concluded with proper e-waste storage, disposal, and management strategies.
Self-Assessment
🔒 PDFDownload this self-assessment, with answers
A. Written Assessment
- What is the primary role of HTML in web application development? (2 marks)
- Differentiate between inline CSS and external CSS with examples. (4 marks)
🔒20 more in this section.
Chapter Examination Questions
🔒 PDFDownload these examination questions, with worked answers
SECTION A (40 Marks) - Answer ALL Questions
- Explain the role of Hypertext Markup Language (HTML) in front-end web development and illustrate its use in creating a basic form for a Kenyan e-commerce website. (4 marks)
- Differentiate between inline CSS and external CSS, highlighting advantages of using external CSS in maintaining a large web application such as one used by a Kenyan bank. (4 marks)
🔒18 more in this section.
Chapter Practical Activities
Practical 1: Develop a Basic HTML Web Page Structure
Software Development · Level 6
Web Application Development
PRACTICAL ASSESSMENT
TIME: 4 HOURS
⬇ PDFCandidate Instructions (Candidate Tool)
Type: Individual
INSTRUCTIONS TO CANDIDATE:
1. You are required to perform the following task:
i. Create a single HTML file named index.html containing a basic web page structure with a header, a navigation bar, a main content area with a welcome message, and a footer, all properly structured using semantic HTML5 tags.
2. You have been provided with the following resources for the practical task:
| Tools & Equipment | Materials |
|---|
| Computer with a web browser and text editor | |
| Internet access for referencing HTML documentation | |
⬇ PDFResources Required (Cutting List)
| S/N | Item | Quantity |
|---|
| 1 | Computer with a web browser and text editor | 1 Pc per Candidate |
| 2 | Internet access for referencing HTML documentation | 1 Pc per Candidate |
⬇ PDFAssessor Guide
| Items to be Evaluated | Marks Available | Marks Obtained | Comments |
|---|
| TASK 1: Create HTML File Structure |
Created project folder and named the HTML file index.html
(Award 1 mark) | 1 | | |
Included the DOCTYPE declaration and html root element
(Award 1 mark) | 1 | | |
Added head section with a title element
(Award 1 mark) | 1 | | |
Created a header element with a page heading
(Award 2 marks) | 2 | | |
Created a nav element with at least three navigation links
(Award 2 marks) | 2 | | |
Created a main element with a welcome message paragraph
(Award 2 marks) | 2 | | |
Created a footer element with copyright information
(Award 1 mark) | 1 | | |
| Sub-Total | 10 | | |
| PRODUCT CHECKLIST |
HTML file renders in browser without errors and shows header, nav, main, and footer sections clearly
(Award 4 marks) | 4 | | |
Semantic HTML5 tags correctly used according to the task instruction
(Award 3 marks) | 3 | | |
Navigation links are functional placeholders with href attributes
(Award 3 marks) | 3 | | |
| Sub-Total | 10 | | |
| GRAND TOTAL | 20 | | |
ASSESSMENT OUTCOME: ☐ Competent ☐ Not Yet Competent (competent if at least 50%)
Practical 2: Style a web page using inline and external CSS methods
Software Development · Level 6
Web Application Development
PRACTICAL ASSESSMENT
TIME: 4 HOURS
⬇ PDFCandidate Instructions (Candidate Tool)
Type: Individual
INSTRUCTIONS TO CANDIDATE:
1. You are required to perform the following task:
i. Create a styled web page applying inline CSS and external CSS stylesheet to an HTML file 1024px wide and 768px high as per the provided specifications.
2. You have been provided with the following resources for the practical task:
| Tools & Equipment | Materials |
|---|
| Computer with a modern web browser and text editor | External CSS stylesheet file |
| Sample HTML file for styling |
⬇ PDFResources Required (Cutting List)
| S/N | Item | Quantity |
|---|
| 1 | Computer with a modern web browser and text editor | 1 Pc per Candidate |
| 2 | External CSS stylesheet file | 1 Pc per Candidate |
| 3 | Sample HTML file for styling | 1 Pc per Candidate |
⬇ PDFAssessor Guide
| Items to be Evaluated | Marks Available | Marks Obtained | Comments |
|---|
| TASK 1: Setup project and apply inline CSS |
Created a project folder for the web page files
(Award 1 mark) | 1 | | |
Opened the sample HTML file in a text editor
(Award 1 mark) | 1 | | |
Applied inline CSS styles to at least three HTML elements (e.g., color, font-size, background-color)
(Award 1 mark for each correctly styled element x 3 = 3 Marks) | 3 | | |
| Sub-Total | 5 | | |
| TASK 2: Create and link external CSS stylesheet |
Created an external CSS file named styles.css inside the project folder
(Award 1 mark) | 1 | | |
Wrote CSS rules in styles.css to style the body element with a background color and font family
(Award 1 mark for background color, 1 mark for font family) | 2 | | |
Styled at least two other elements (e.g., headings, paragraphs) using external CSS
(Award 1 mark each for two correctly styled elements) | 2 | | |
Properly linked the external stylesheet to the HTML file using the <link> tag in the <head> section
(Award 2 marks) | 2 | | |
| Sub-Total | 7 | | |
| TASK 3: Verify styles and finalize the web page |
Opened the styled web page in a web browser to verify inline and external CSS styles are applied correctly
(Award 2 marks) | 2 | | |
Saved all files correctly in the project folder
(Award 1 mark) | 1 | | |
| Sub-Total | 3 | | |
| PRODUCT CHECKLIST |
Web page width is approximately 1024px and height approximately 768px as displayed in the browser
(Award 2 marks) | 2 | | |
Inline CSS styles correctly applied to at least three elements
(Award 1 mark for each correctly styled inline element x 3 = 3 Marks) | 3 | | |
External CSS stylesheet linked and styles applied to body and at least two other elements
(Award 1 mark for linking, 1 mark for body styles, 1 mark for other elements) | 3 | | |
Background color and font family applied correctly via external CSS
(Award 2 marks) | 2 | | |
| Sub-Total | 10 | | |
| GRAND TOTAL | 25 | | |
ASSESSMENT OUTCOME: ☐ Competent ☐ Not Yet Competent (competent if at least 50%)
🔒Develop a JavaScript Interactive Web Page FeaturePractical 3
🔒Develop Interactive Web Page Elements Using jQuery Event HandlingPractical 4
🔒Create a Responsive Web Page Layout 1200mm x 800mm Equivalent ScreenPractical 5
🔒Dynamic DOM Manipulation using JavaScriptPractical 6
🔒Integrate and test external REST API in a web applicationPractical 7
🔒Perform version control operations on web application source codePractical 8
🔒Develop a PHP Server-Side Script for User Login ValidationPractical 9
🔒Develop a RESTful API backend using Node.js and Express frameworkPractical 10
🔒Create and connect a MySQL database for a web application backendPractical 11
🔒Develop a web-based CRUD interface for managing student recordsPractical 12
🔒Develop RESTful API endpoints for a web applicationPractical 13
🔒Develop a Responsive Web User Interface Using Front-End ToolsPractical 14
🔒Implement workplace safety and e-waste management in a web development environmentPractical 15
