October 22, 2026

Module 8: Gemini for Coding and Data Tasks

Module Overview

Google Gemini can help developers, students, and beginners understand programming concepts, generate code, troubleshoot errors, analyze structured data, write tests, and document software projects.

In this module, you will learn how to use Gemini as a coding assistant and data-analysis partner. You will practice writing effective prompts, reviewing AI-generated code, identifying programming errors, exploring CSV files, and improving software quality.

Important: Gemini-generated code and analysis may contain mistakes. Always test code, validate calculations, and review outputs before using them in production.

Learning Objectives

By the end of this module, you will be able to:

• Generate HTML, CSS, and JavaScript code using Gemini.

• Create responsive web page layouts with structured prompts.

• Debug programming errors and understand their causes.

• Upload or provide CSV data when supported and request meaningful analysis.

• Explain unfamiliar code in simple language.

• Generate unit tests and basic software documentation.

• Review AI-generated code for security, correctness, accessibility, and maintainability.

Topic 29: How to Use Google Gemini for HTML, CSS and JavaScript Coding

1. Introduction

HTML, CSS, and JavaScript are fundamental technologies used to build interactive websites.

• HTML defines the structure and content of a web page.

• CSS controls its appearance, layout, spacing, colors, and responsiveness.

• JavaScript adds behavior and interactivity.

Google Gemini can assist with generating these technologies, explaining existing code, creating layouts, and suggesting improvements.

However, Gemini does not automatically guarantee that the code will work correctly in every browser or development environment. You should run and test the generated code.

2. How to Generate Code with Gemini

Step 1: Define your requirement

Before writing a prompt, decide what you want to build.

For example:

• A responsive landing page.

• A navigation bar.

• A contact form.

• A product card.

• A calculator.

• A portfolio website.

The more specific your requirement, the more useful Gemini's response is likely to be.

Step 2: Open Google Gemini

Open the Gemini website or application available to your account. Start a new conversation and describe your programming task.

Feature availability, model access, and supported integrations may vary by account, region, plan, and current product settings.

Step 3: Specify the technology

Clearly state whether you need HTML, CSS, JavaScript, or a combination.

For example, request:

• HTML for page structure.

• CSS for visual styling.

• JavaScript for form validation.

• Separate files for easier maintenance.

Step 4: Describe the expected output

Mention the page layout, colors, responsiveness, functionality, and code organization.

Instead of asking for a generic website, explain exactly what the website should contain.

Step 5: Run and test the code

Copy the generated code into the appropriate files in your development environment.

For a simple project, create:

• index.html

• style.css

• script.js

Open the HTML file in a browser and test the layout, buttons, forms, and responsive behavior.

3. Practical Example: Generate a Responsive Landing Page

Use this prompt in Gemini:

Prompt:

"Create a modern, responsive landing page for a fictional technology training institute using HTML, CSS, and vanilla JavaScript.

Requirements:

1. Create a navigation bar with Home, Courses, About, and Contact links.

2. Add a hero section with a strong headline, short description, and call-to-action button.

3. Include three course cards for Web Development, Python Programming, and Data Analytics.

4. Add a contact section with name, email, and message fields.

5. Use a professional color palette, clean typography, consistent spacing, and subtle hover effects.

6. Make the page responsive for mobile, tablet, and desktop screens.

7. Use semantic HTML and accessible form labels.

8. Keep HTML, CSS, and JavaScript in separate files.

9. Add basic client-side validation to the contact form.

10. Explain how to run the project locally.

Provide the complete code for all three files. Do not omit required sections or use unexplained placeholders."

What should you check?

After Gemini generates the code:

• Confirm that all three files are provided.

• Check that the CSS and JavaScript file paths are correct.

• Open the page in a browser.

• Resize the browser to test responsiveness.

• Submit the form with empty and valid fields.

• Inspect the browser console for errors.

Important: Client-side validation does not securely submit or store messages. A working contact form needs an appropriate backend or form service.

4. Generate HTML with Gemini

HTML is used to define the structure of a web page.

You can ask Gemini to create:

• Headers and navigation menus.

• Tables and lists.

• Forms and input fields.

• Product or service cards.

• Semantic page sections.

• Accessible content structures.

Example prompt:

"Create a semantic HTML5 structure for a student registration page. Include a page heading, a form with full name, email, course selection, and a submit button. Use appropriate labels, input types, and required attributes. Do not include CSS or JavaScript. Explain the purpose of each major HTML element."

Review the output to ensure the form labels, input types, and semantic elements are appropriate.

5. Generate CSS with Gemini

CSS controls how the page looks and adapts to different screen sizes.

You can ask Gemini to help with:

• Flexbox and CSS Grid layouts.

• Responsive navigation.

• Cards and buttons.

• Spacing and typography.

• Media queries.

• Hover and focus states.

Example prompt:

"Write responsive CSS for a three-column course card layout using CSS Grid. Use a maximum content width, consistent gaps, subtle borders, rounded corners, and a restrained blue-and-white color palette. On tablets, show two columns; on mobile screens, show one column. Include visible keyboard-focus styles and explain the media queries."

Test the layout at multiple viewport widths. Do not assume that a design is responsive simply because Gemini included a media query.

6. Generate JavaScript with Gemini

JavaScript adds interactive behavior to a website.

Common examples include:

• Form validation.

• Dropdown menus.

• Search and filtering.

• Calculators.

• Tabs and accordions.

• Updating page content dynamically.

Example prompt:

"Write vanilla JavaScript that validates a registration form containing name, email, and course fields. Prevent submission when required fields are empty or the email format is invalid. Display clear error messages near the relevant fields. Keep the code separate from HTML, avoid external libraries, and explain how to connect the script to the page."

Test valid and invalid inputs. Also consider keyboard accessibility, error-message clarity, and whether the form actually connects to a server.

7. Improve Code with Follow-Up Prompts

You do not have to accept the first response Gemini generates.

Use follow-up prompts such as:

• "Explain this code section by section."

• "Improve the mobile layout without changing the existing content."

• "Find duplicated CSS rules and suggest a cleaner structure."

• "Add accessible focus states to all interactive elements."

• "Identify potential errors before rewriting the code."

• "Show the exact changes and explain why they are needed."

Request targeted changes rather than asking Gemini to rewrite the entire project unnecessarily.

8. Best Practices

• Describe requirements and constraints clearly.

• Request complete files when you need a runnable project.

• Keep secrets, passwords, and API keys out of prompts and source code.

• Prefer established libraries only when they are genuinely needed.

• Test generated code before publishing it.

• Review third-party dependencies and licensing.

• Never assume that AI-generated code is secure merely because it runs.

Practical Exercise

Ask Gemini to create a responsive personal portfolio page with:

1. A navigation bar.

2. An introduction section.

3. Three project cards.

4. A skills section.

5. A contact form.

6. Responsive styling.

7. Basic JavaScript validation.

Run the project locally and record any errors or improvements you discover.

Topic 30: How to Debug Code and Understand Programming Errors with Gemini AI

1. What Is Debugging?

Debugging is the process of identifying, understanding, and correcting problems in software.

Programming errors may result from:

• Incorrect syntax.

• Undefined variables.

• Missing dependencies.

• Incorrect file paths.

• Invalid input.

• Unexpected data types.

• Logic errors.

• Browser or environment differences.

Gemini can help explain error messages, suggest likely causes, and propose fixes. Its suggestions should be verified against the actual code and runtime behavior.

2. Common Types of Programming Errors

Syntax errors

These occur when code violates the rules of a programming language.

Example:

console.log("Hello World"

The closing parenthesis is missing.

Reference errors

These occur when code refers to a variable or identifier that cannot be resolved.

console.log(userName);

If userName has not been declared in the relevant scope, JavaScript may throw a ReferenceError.

Type errors

These occur when an operation is performed on an incompatible value.

const result = undefined.toString();

This attempts to call a method on undefined and produces a TypeError.

Logic errors

Logic errors occur when code executes but produces an incorrect result.

function calculateTotal(price, quantity) {
  return price - quantity;
}

If the intention is to calculate a purchase total, multiplication is likely required instead.

3. How to Debug Code with Gemini

Step 1: Reproduce the problem

Run the code and identify the exact behavior or error.

Do not rely only on a vague description such as "my code is not working."

Step 2: Collect relevant evidence

Provide Gemini with:

• The smallest relevant code sample.

• The complete error message.

• The expected behavior.

• The actual behavior.

• The language and runtime or framework.

• The steps needed to reproduce the issue.

Remove passwords, tokens, private customer data, and other sensitive information before sharing code or logs.

Step 3: Ask for diagnosis before a rewrite

Request a likely root cause, supporting evidence, and a minimal fix.

Step 4: Apply the suggested fix

Change the code and rerun the same test that originally failed.

Step 5: Check for side effects

A fix may solve one error while introducing another. Run relevant regression tests and review related functionality.

4. Practical Debugging Example

Suppose you have this JavaScript code:

function calculateTotal(price, quantity) {
  return price + quantity;
}

console.log(calculateTotal(100, 3));

The output is 103, but you expected 300.

Use this prompt:

Prompt:

"Debug the following JavaScript function.

Expected behavior: Calculate the total cost by multiplying the unit price by the quantity.

Actual behavior: The function returns 103 when the inputs are 100 and 3.

Code:

function calculateTotal(price, quantity) {
  return price + quantity;
}

console.log(calculateTotal(100, 3));

Explain the root cause, provide the smallest correct fix, show the expected output, and give two test cases that verify the behavior. Do not rewrite unrelated code."

Corrected code

function calculateTotal(price, quantity) {
  return price * quantity;
}

console.log(calculateTotal(100, 3)); // 300

The problem is a logic error: the original function added the two inputs instead of multiplying them.

5. Use Gemini to Understand Error Messages

A useful debugging prompt is:

"Explain this error message in beginner-friendly language. Identify what the message confirms and what remains uncertain. List the most likely causes, show how to investigate each cause, and recommend the smallest safe fix. Do not assume that a suggested cause is confirmed without evidence."

This encourages evidence-based troubleshooting instead of blindly accepting a guessed solution.

6. Debugging a Missing HTML Element

Consider this JavaScript:

const button = document.querySelector("#submitButton");

button.addEventListener("click", function () {
  console.log("Form submitted");
});

If no element with the ID submitButton exists when the script runs, button may be null, causing an error when addEventListener is called.

Ask Gemini:

"Explain why this JavaScript code may throw an error. Identify the assumptions about the HTML and script-loading order. Show how to verify the element exists and provide two appropriate fixes."

Possible solutions include correcting the HTML ID, loading the script after the relevant element, or using an appropriate DOM-ready strategy.

7. Ask Gemini to Review a Fix

After applying a suggested change, use this prompt:

"Review the proposed fix against the original requirement. Identify edge cases that could still fail, explain whether the fix changes existing behavior, and provide a compact set of tests. Distinguish confirmed problems from possible risks."

8. Debugging Best Practices

• Reproduce the problem before changing code.

• Preserve the full error message and relevant stack trace.

• Share a minimal, reproducible example.

• Change one logical thing at a time.

• Verify fixes with tests.

• Avoid pasting confidential information into AI tools.

• Use version control so you can inspect or reverse changes.

• Never run unfamiliar commands or generated scripts without understanding their effects.

Practical Exercise

Create a JavaScript function that calculates the average of three numbers. Deliberately introduce a bug, such as dividing the sum by two instead of three.

Ask Gemini to:

1. Identify the logic error.

2. Explain the expected result.

3. Correct the function.

4. Provide three test cases.

5. Explain how the tests demonstrate that the fix works.

Topic 31: How to Analyze CSV Files and Explore Data with Gemini

1. What Is a CSV File?

CSV stands for Comma-Separated Values. It is a common text-based format for storing tabular data.

For example:

Product,Category,Sales
Laptop,Electronics,75000
Mouse,Accessories,1500
Keyboard,Accessories,3000
Monitor,Electronics,18000

Each row represents a record, while each column represents a field.

CSV files are commonly used for:

• Sales reports.

• Student records.

• Inventory lists.

• Survey results.

• Marketing reports.

• Financial exports.

• Website analytics.

A CSV file may contain missing values, duplicate records, inconsistent formats, or incorrect entries. These issues should be checked before drawing conclusions.

2. How to Work with CSV Data in Gemini

Step 1: Prepare the dataset

Use a small, representative dataset for practice. Check the column names and make sure the data contains no unnecessary sensitive information.

Step 2: Provide the data

Depending on the capabilities available to your account, you may be able to upload a CSV file or paste a sample directly into the conversation.

If uploading is unavailable, paste a small sample and explain the structure of the full dataset. Do not assume Gemini can access a file stored on your computer unless you have actually supplied it.

Step 3: Explain the goal

Tell Gemini what you want to learn from the data.

Examples:

• Calculate total sales.

• Compare product categories.

• Identify missing values.

• Find duplicate rows.

• Summarize monthly performance.

• Identify unusual values for further investigation.

Step 4: Request a structured analysis

Ask Gemini to explain its calculations, list assumptions, and distinguish observed facts from interpretations.

Step 5: Verify the results

Recalculate important figures using a spreadsheet, database, or suitable data-analysis tool. Confirm that the correct columns and units were used.

3. Practical Example: Analyze Sales Data

Use this sample:

Product,Category,Sales
Laptop,Electronics,75000
Mouse,Accessories,1500
Keyboard,Accessories,3000
Monitor,Electronics,18000

Prompt:

"Analyze the CSV data provided above.

Tasks:

1. Calculate total sales.

2. Calculate sales totals by category.

3. Rank products by sales from highest to lowest.

4. Identify the highest-selling and lowest-selling products by sales value.

5. Check for missing values, duplicate rows, and invalid sales values in the supplied data.

6. Present the numerical results in a clear table.

7. Explain the calculations and state any assumptions.

8. Do not invent additional records or claim that the sample represents a larger dataset."

Expected results

Total sales:

75,000 + 1,500 + 3,000 + 18,000 = 97,500

Product ranking by sales value:

These results describe only the four records shown in the sample.

4. Ask Gemini to Clean Data

Data cleaning helps identify inconsistencies that could distort analysis.

Possible issues include:

• Missing values.

• Duplicate records.

• Inconsistent capitalization.

• Extra spaces.

• Incorrect date formats.

• Negative values where they are not permitted.

• Numeric values stored as text.

Example prompt:

"Review the supplied CSV data for data-quality problems. Identify missing fields, duplicate rows, inconsistent category labels, malformed dates, and suspicious numeric values. Report the affected rows and explain why each item needs review. Do not silently change the original data. If you suggest cleaned values, present them separately and preserve the original records."

This is safer than asking an AI system to automatically overwrite the dataset without showing what changed.

5. Explore Trends and Patterns

Gemini can help you formulate questions about a dataset and explain possible patterns.

For example:

• Which month had the highest sales?

• Which product category contributes the largest share of revenue?

• Are there repeated changes in sales over time?

• Which records deserve further investigation?

Use this prompt:

"Explore the supplied sales data for meaningful patterns. Summarize the main observations, identify the exact columns and records supporting each observation, and explain limitations. Do not claim that a pattern proves causation. If the dataset lacks dates or relevant comparison variables, state what cannot be concluded."

Important: A pattern in historical data does not necessarily explain why an event occurred or predict future performance reliably.

6. Generate Charts and Reports

If your available Gemini workflow supports creating charts or working with files, ask for a suitable visualization. Otherwise, request a chart specification or code that you can run in a spreadsheet or programming environment.

Useful visualizations include:

• Bar charts for comparing categories.

• Line charts for values over time.

• Pie charts for a small number of meaningful proportions.

• Histograms for examining distributions.

• Scatter plots for exploring relationships between numeric variables.

Example prompt:

"Recommend the most appropriate chart for comparing sales by product category. Explain why it fits the data, identify the fields required, and provide the chart title and axis labels. Do not fabricate values that are absent from the dataset."

7. Limitations and Data Privacy

• Gemini may miscalculate totals or misunderstand columns.

• Large datasets may exceed the limits of the available workflow.

• A small sample cannot support conclusions about an unseen full dataset.

• Correlation does not establish causation.

• Sensitive customer, employee, financial, or student information should be minimized or anonymized before sharing.

• Validate important calculations independently.

Practical Exercise

Create a CSV file containing at least ten fictional sales records with product names, categories, dates, and sales values.

Ask Gemini to:

1. Calculate total sales.

2. Group sales by category.

3. Rank the products.

4. Identify data-quality issues.

5. Suggest two charts.

6. Write a short executive summary.

Verify at least three numerical results independently.

Topic 32: How to Use Gemini to Explain Code, Write Tests and Document Software

1. Why Code Explanation Matters

Understanding code is essential when learning a programming language, maintaining an existing application, or reviewing code written by someone else.

Gemini can help explain:

• Variables and data types.

• Functions and parameters.

• Conditional statements.

• Loops and collections.

• Classes and objects.

• Algorithms and data structures.

• Dependencies and program flow.

It can also help create test cases and documentation, but generated explanations, tests, and documents must be checked against the actual software.

2. Explain Existing Code Step by Step

Consider the following function:

function calculateDiscount(price, discountPercent) {
  const discount = price * discountPercent / 100;
  return price - discount;
}

console.log(calculateDiscount(1000, 10));

Use this prompt:

"Explain the supplied JavaScript code to a beginner. Describe the purpose of the function, explain each parameter and variable, walk through the calculation using the provided input, show the output, and identify any assumptions about valid inputs. Do not change the code unless you identify a specific issue."

The function calculates a discount of 100 from a price of 1,000 and returns 900.

The example assumes that the price and discount percentage are valid numeric values. A production implementation may need input validation and rules for permitted discount ranges.

3. Request a Line-by-Line Explanation

For unfamiliar code, use a structured prompt:

"Explain this code in the following order:

1. What problem does the code solve?

2. What inputs does it receive?

3. What happens during execution?

4. What does each important statement do?

5. What output should it produce?

6. What edge cases could cause problems?

7. How could the code be improved without changing its intended behavior?

Use beginner-friendly language and include a small example."

For large projects, provide a relevant function or file at a time. Ask Gemini to distinguish what can be inferred from the supplied code from what would require examining other files.

4. What Is Software Testing?

Software testing checks whether a program behaves as intended.

Common testing categories include:

• Unit testing: Tests a small function or component in isolation.

• Integration testing: Checks whether multiple components work together.

• End-to-end testing: Tests a complete user workflow.

• Regression testing: Checks whether existing functionality still works after changes.

Gemini can suggest test cases and generate test code for common testing frameworks. The generated tests still need to be executed in the actual project environment.

5. Generate Unit Tests with Gemini

Using the discount function above, try this prompt:

"Write unit tests for the JavaScript function calculateDiscount(price, discountPercent) using Node.js's built-in test runner and strict assertions.

Cover these cases:

1. A normal price with a 10% discount.

2. A zero discount.

3. A zero price.

4. A 100% discount.

5. Invalid inputs, if the function's intended contract defines how they should be handled.

First state the assumptions about valid inputs. Do not assume the function rejects invalid values unless the implementation does so. If you recommend input validation, show the required implementation change separately from the tests."

This prompt encourages Gemini to consider both normal and boundary conditions instead of generating only one happy-path test.

Example test for a normal case

const test = require("node:test");
const assert = require("node:assert/strict");

function calculateDiscount(price, discountPercent) {
  const discount = price * discountPercent / 100;
  return price - discount;
}

test("applies a 10 percent discount", () => {
  assert.equal(calculateDiscount(1000, 10), 900);
});

Save the file as discount.test.cjs and run it using a compatible Node.js installation:

node --test discount.test.cjs

The test verifies that the function returns 900 for a price of 1,000 with a 10% discount.

The test alone does not prove that the function handles every invalid input or edge case correctly.

6. Ask Gemini to Improve Test Coverage

Test coverage is a measure of how much code is exercised by tests. High coverage does not automatically mean the tests are effective.

Use this prompt:

"Review the supplied function and its current tests. Identify untested branches, boundary conditions, likely failure cases, and assumptions that need to be documented. Suggest additional tests and explain what each test is intended to verify. Do not claim that coverage is complete without evidence from an actual coverage report."

This can help you build a more systematic testing strategy.

7. Generate README Documentation

A README file helps developers and users understand a project.

It commonly contains:

• Project name and purpose.

• Features.

• Prerequisites.

• Installation instructions.

• Configuration steps.

• Usage examples.

• Testing instructions.

• Known limitations.

• License information, when applicable.

Example prompt:

"Create a README.md file for a JavaScript discount calculator project. Include the project overview, features, prerequisites, installation or setup instructions, usage example, testing command, and known limitations. Use only details supported by the supplied source code and project information. Mark any missing information as a placeholder instead of inventing package names, dependencies, URLs, or license details."

8. Generate Function Documentation

Gemini can help write documentation comments for functions and APIs.

Example prompt:

"Write a concise JSDoc comment for the supplied JavaScript function. Document its purpose, parameters, return value, assumptions, and any exceptions that are actually thrown. Do not claim that validation or error handling exists unless it is implemented in the code."

For example, a simple documented function might look like this:

/**
 * Calculates the final price after applying a percentage discount.
 *
 * @param {number} price - Original price.
 * @param {number} discountPercent - Discount percentage.
 * @returns {number} Price after the discount.
 */
function calculateDiscount(price, discountPercent) {
  const discount = price * discountPercent / 100;
  return price - discount;
}

The documentation should be updated if the implementation or its input requirements change.

9. Review Code for Maintainability and Security

Ask Gemini to review code using this prompt:

"Review the supplied code for readability, duplication, maintainability, error handling, accessibility where relevant, and potential security concerns. Prioritize findings by severity and explain the evidence for each finding. Suggest minimal changes and preserve the existing behavior unless a change is necessary. Do not claim that the code is secure merely because no obvious problem is found."

AI review can help identify issues, but it is not a substitute for security testing, code review, dependency scanning, or a proper development workflow.

Practical Exercise

Create a small JavaScript calculator with functions for addition, subtraction, multiplication, and division.

Use Gemini to:

1. Explain each function.

2. Identify possible division-by-zero behavior.

3. Generate unit tests.

4. Suggest boundary cases.

5. Create a README file.

6. Review the code for maintainability and potential risks.

Run all tests locally and correct any inaccurate documentation.

Module 8: Revision and Key Takeaways

In this module, you learned four practical ways to use Google Gemini for programming and data tasks.

Topic 29 — Coding: Generate and improve HTML, CSS, and JavaScript using clear requirements, then run the code in a real environment.

Topic 30 — Debugging: Provide reproducible examples and exact error messages, investigate the likely root cause, and verify the fix with tests.

Topic 31 — Data analysis: Explore CSV datasets, summarize values, identify data-quality issues, and validate important calculations.

Topic 32 — Testing and documentation: Explain unfamiliar code, create unit tests, draft project documentation, and review maintainability.

Module 8 Best Practices

• Treat Gemini as an assistant, not an infallible source of code.

• Describe the expected behavior before requesting a solution.

• Share only the code and data necessary for the task.

• Verify code by running it in the intended environment.

• Validate data calculations independently.

• Test normal cases, boundary conditions, and invalid inputs.

• Keep documentation consistent with the actual implementation.

• Review security and privacy before using generated code in production.

Module 8 Assessment

Choose the best answer for each question.

1. What is HTML primarily used for?

A. Defining the structure of a web page
B. Managing database backups
C. Encrypting every network connection
D. Replacing JavaScript in all applications

2. What should you provide when asking Gemini to debug an error?

A. Only the statement "It does not work"
B. Relevant code, the exact error, expected behavior, and actual behavior
C. Your passwords and access tokens
D. An unrelated code sample

3. What does CSV stand for?

A. Code System Validation
B. Computer Style Variables
C. Comma-Separated Values
D. Central Software Version

4. Why should important calculations generated by Gemini be verified?

A. AI-generated calculations are always correct
B. Verification is unnecessary for small datasets
C. Gemini may misinterpret data or produce incorrect calculations
D. CSV files cannot contain numeric values

5. What is the primary purpose of a unit test?

A. To test a small unit of code in isolation
B. To design a website's color palette
C. To replace all project documentation
D. To automatically guarantee application security

6. What is a logic error?

A. An error that always prevents a program from starting
B. A mistake in program logic that can produce an incorrect result
C. A missing image file in every case
D. A CSS property that is always invalid

7. What is the best way to use Gemini-generated code?

A. Publish it immediately without reviewing it
B. Assume that it is secure if it runs
C. Test it, review it, and verify that it meets the requirements
D. Remove all error handling

8. What does regression testing help verify?

A. Whether existing functionality still works after changes
B. Whether a logo has the correct color
C. Whether every user has the same password
D. Whether documentation can be deleted

Answer Key

1. A — Defining the structure of a web page.

2. B — Relevant code, exact error, expected behavior, and actual behavior.

3. C — Comma-Separated Values.

4. C — AI can misinterpret data or produce incorrect calculations.

5. A — Testing a small unit of code in isolation.

6. B — Incorrect logic can produce an incorrect result even when code executes.

7. C — Test, review, and verify the generated code.

8. A — Regression testing checks whether existing behavior remains correct after changes.

Final Practical Project: Build and Test a Mini Web Application

Project Brief

Create a responsive Student Marks Calculator using HTML, CSS, and JavaScript. Use Gemini to assist with development, debugging, testing, and documentation.

Requirements

1. Create a clean, responsive interface.

2. Provide input fields for a student's name and marks in three subjects.

3. Calculate the total marks and average.

4. Display a result only when the inputs are valid.

5. Show clear validation messages.

6. Separate HTML, CSS, and JavaScript into individual files.

7. Test normal inputs, boundary values, and invalid inputs.

8. Write a README explaining how to run the project.

9. Review the code for accessibility and maintainability.

Suggested Development Workflow

Step 1: Ask Gemini to propose the file structure and clarify the calculation requirements.

Step 2: Generate the HTML structure.

Step 3: Generate responsive CSS.

Step 4: Generate JavaScript validation and calculation logic.

Step 5: Run the project locally and identify errors.

Step 6: Ask Gemini to explain and help fix each reproducible error.

Step 7: Generate and execute unit tests for the calculation logic.

Step 8: Request a README and review it against the final code.

Step 9: Complete a final manual test of the interface.

Completion Checklist

• The page renders correctly.

• Valid marks produce the expected total and average.

• Empty or invalid inputs are handled clearly.

• Values outside the permitted range are rejected.

• The layout works on mobile and desktop screens.

• The JavaScript tests pass.

• The README contains accurate instructions.

• No secrets or unnecessary personal information are included.

Conclusion

Google Gemini can support the software development workflow from initial code generation to debugging, data exploration, testing, and documentation. The most effective approach is to give it precise requirements, request evidence-based explanations, and verify every important result.

By completing this module, you have developed a practical workflow for using AI-assisted programming while maintaining control over code quality, correctness, privacy, and reliability.