Lesson 2: Build an HTML interface for your application

Time: 60 minutes

Last lesson, you used Flask to send JSON data from Python to your browser. Today, you will create a web page for your generator using HTML.

HTML describes the structure and content of a page: headings, paragraphs, links, inputs, and buttons.

By the end of this lesson, you should be able to:

• Restart your Flask application using its virtual environment.

• Create an HTML page and view it through Flask.

• Use HTML elements and attributes correctly.

• Build a simple interface for your generator.

• Explain the difference between displaying an interface and making it perform an action.

1. Restart your application — 10 minutes

Open your existing my_first_web_app folder in VS Code.

You should still have app.py and your .venv folder. Use the environment you created last lesson. You do not need to create it again or reinstall Flask.

Open Terminal → New Terminal.

On macOS, activate your environment:

source .venv/bin/activate

On Windows, open a Command Prompt terminal and enter:

.venv\Scripts\activate.bat

Start Flask:

python -m flask --app app run --debug

Visit:

http://127.0.0.1:5000/api/generate

Check that your generator still returns a result.

If you used port 5001 last lesson, use the same startup command and browser addresses with 5001 instead of 5000.

Checkpoint: Show your partner a result from your generator. Identify the Python function that produced it.

2. Create your first HTML page — 15 minutes

Inside my_first_web_app, create a folder named static. It must sit alongside app.py, outside .venv.

Inside static, create a file named index.html.

Flask automatically serves files from its static folder at addresses beginning with /static/. You do not need to add a Python route for this page.

Enter the following code in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Generator</title>
</head>
<body>
    <h1>My Generator</h1>

    <p>Welcome! This application generates random fantasy items.</p>

    <h2>Example results</h2>

    <ul>
        <li>Ancient Sword</li>
        <li>Rusty Shield</li>
        <li>Glowing Staff</li>
    </ul>

    <p>
        <a href="/api/generate">Open the generator data</a>
    </p>
</body>
</html>

Save the file. In your browser, visit:

http://127.0.0.1:5000/static/index.html

Use this address rather than double-clicking the HTML file. This ensures you are viewing the page through Flask.

You should see a heading, a paragraph, a list, and a link.

Click Open the generator data. You should reach your existing JSON response. Use the browser’s Back button to return to your page.

Checkpoint: You can open your HTML page and follow its link to your Python generator.

3. Read and personalise your HTML — 10 minutes

Most HTML elements have an opening tag, some content, and a closing tag:

<p>This is a paragraph.</p>

The closing tag contains a forward slash: </p>.

Elements can contain other elements. For example, each <li> list item sits inside the <ul> list.

An attribute adds information to an opening tag. In this example, href specifies the link’s destination:

<a href="/api/generate">Open the generator data</a>

Make these changes:

1. Change the browser tab title to match your generator’s theme.

2. Change the main heading to your application’s name.

3. Rewrite the introduction to explain what your generator produces.

4. Replace the three example results with examples matching your theme.

5. Add a fourth example using another <li> element.

Save your file and refresh the browser.

The examples in your HTML are manually written text. They will stay the same when you refresh, even though the Python generator can produce different results.

Checkpoint: Explain the difference between <title> and <h1>. Point to an opening tag, a closing tag, and an attribute.

4. Add controls and a result area — 15 minutes

You will now add a text input, a button, and a place to display a future result.

In index.html, find:

<h2>Example results</h2>

Insert the following code immediately before it, inside the <body>:

<h2>Create an item</h2>

<p>
    <label for="creator-name">Your first name:</label>
    <input type="text" id="creator-name" name="creator_name">
</p>

<button type="button" id="generate-button">Generate an item</button>

<h2>Your result</h2>

<p id="result">Your generated item will appear here.</p>

Save and refresh.

You should now see a labelled text box, a button, and a result area.

Test the interface:

1. Click the label Your first name. The text box should receive focus.

2. Type your first name.

3. Press Tab to move to the button.

4. Click the button.

The button does not generate anything yet. We have created the control, but have not added the JavaScript that will request data from Flask and update the result paragraph. Typing your name does not send it to Python yet, either.

Your existing link works because its href already tells the browser where to navigate.

Personalise the controls:

• Change Create an item to match your theme.

• Change the button text to describe its intended action, such as Generate a planet.

• Change the result placeholder to match your theme.

• Keep the IDs unchanged so we can use them next lesson.

Checkpoint: Explain why the link opens your generator data but the button does not yet display a result.

5. Test your page and complete the exit ticket — 10 minutes

Exchange places with a partner. Ask them to test your page.

Correct any problems, then save your files.

Create lesson2_notes.txt in your project folder. Answer these questions in your own words:

1. Describe the purpose of HTML in your application.

2. Identify the attribute that sets a link’s destination.

3. Explain why changing the example list in HTML does not change the results produced by Python.

4. Explain why your button does not yet generate a result.

5. Predict what would happen if you changed the link’s href to /banana.

Test your final prediction, then restore the correct link.

Before finishing, show your teacher:

• Your personalised HTML page.

• Your labelled input, button, and result area.

• Your working link to the generator.

• Your completed exit ticket.

If something goes wrong

Finished early?

Add a section called How to use this application.

Use an ordered list to display numbered instructions:

<h2>How to use this application</h2>

<ol>
    <li>Open the generator data using the link.</li>
    <li>Refresh that page to request another result.</li>
    <li>Use the Back button to return to this interface.</li>
</ol>

Then add a sentence explaining who might enjoy using your generator and why.

Next lesson: You will use JavaScript to connect your button to Flask and display a generated result directly on your HTML page.