Building a Web App with AI

Why this matters

Once you can tell HTML from CSS from JavaScript, you can build a real web app, and you can let AI write most of the code while you stay in charge. Building a quiz app shows the whole loop: prompt, run, read, change, and improve.

The idea

A web app is a page that does something. A quiz app combines all three languages: HTML holds the question and answer buttons, CSS styles them, and JavaScript checks your answer and keeps the score.

Using AI as a coding assistant follows a clear cycle:

1. Prompt for what you want: "Create a simple multiple-choice quiz app. Provide separate HTML, CSS, and JavaScript."
2. Run the generated code and see the result.
3. Read and understand it: ask the AI "Explain this code" for parts you don't know.
4. Modify and iterate: change the question, add choices, show a score percentage, add more questions. Each follow-up prompt or hand edit refines the app.

Inside that code, common patterns appear: an array named something like choices holds the answer options, and an if…else decides whether your answer was right or wrong (and colours the result). Recognising which language owns each part (title and buttons in HTML, colours and fonts in CSS, checking and scoring in JavaScript) is the skill that lets you steer the AI.

Picture it

flowchart TD
  A[Prompt the AI for the app] --> B[Run the generated code]
  B --> C[Read it / ask AI to explain]
  C --> D{Happy with it?}
  D -- No --> E[Modify or re-prompt]
  E --> B
  D -- Yes --> F[Working quiz app]

Worked example

You prompt for a one-question quiz, run it, then send "Make it 3 questions" and run again. To add scoring you might ask for the percentage of correct answers. The JavaScript that grades a choice looks roughly like this (for reading only):

const choices = ["Cairo", "Giza", "Luxor"];
const correct = 0;
if (selected === correct) {
  result.textContent = "Correct!";
} else {
  result.textContent = "Try again";
}

The options live in an array, and the if…else decides the feedback. If you wanted to change the look of that feedback you'd edit CSS, not this logic. Knowing the boundary is what makes your edits land in the right file.

Your turn

Build a quiz app of your own with an AI assistant: start from one question, then iterate with more questions, more choices, randomised order, and a score percentage. After each change, ask the AI to explain anything new so you actually learn it. Then do the practice questions to decide which language is responsible for each part of the app.

Recap

• A web app like a quiz combines HTML (content), CSS (style), and JavaScript (logic).
• Build with AI by a cycle: prompt → run → understand → modify, and iterate.
• Inside, an array holds choices and if…else checks answers; know which language owns what.
• AI writes the code, but you must read, test, and verify it.