Building a Django Landing Page

In the previous lesson, you learned how to use Codex to set up a Django project and create a dice-rolling API endpoint. Now, let’s build on that foundation by adding a user-friendly landing page to your Django app. In this lesson, you will use Codex to create a new view, set up routing for the home page, build a minimal interactive template, and enhance the user experience with modern UI features. By the end, you’ll have a polished landing page that lets users roll dice and see results instantly.

Let’s start by adding a new view for the landing page and routing the home page (/) to it. This is a common pattern in Django: you create a view function, then map a URL to it.

First, you can ask Codex to create a new view in your dice app. Here’s a prompt you might use:

Create an index view in dice/views.py that renders the template "dice/index.html".

This prompt tells Codex exactly what you want: a view named index that renders a template called dice/index.html. Codex will generate the function and import the necessary modules.

Next, you need to route the home page to this view. You can instruct Codex with a prompt like:

In dice/urls.py, add a route for the home page: path('', index, name='index'). Keep the existing roll/ route.

This tells Codex to add a new URL pattern for the root path (''), pointing to the index view. It also reminds Codex not to remove your existing /roll/ API route.

By breaking your instructions into clear, single-purpose prompts, you help Codex generate accurate and maintainable code.

Now that you have a view and route, let’s create the HTML template for your landing page. The goal is to let users pick how many dice to roll and how many sides each die has, then see the results.

Start with a prompt like this:

Create the template dice/templates/dice/index.html with:
- two inputs implemented as range sliders:
  - count: input type="range" min="1" max="10" value="3" with a live badge showing the number
  - sides: input type="range" min="2" max="20" value="6" with a live badge
- quick-select buttons ("chips") for counts [1,2,3,5,10] and sides [4,6,8,10,12,20]
- a submit button that triggers fetch('/roll/?count=...&sides=...')
- loading state (disable button + 'Rolling…' text)
- an inline error div and a results div with aria-live="polite"

Let’s break down what this prompt does:

• It specifies the file path and the main elements you want in the template.
• It describes the form controls: two range sliders for count and sides, each with a live-updating badge.
• It asks for quick-select “chips” for common values, making it easy for users to pick popular options.
• It requests a submit button that uses JavaScript’s fetch to call your /roll/ API and display the results.
• It includes a loading state, an error area, and a results area with aria-live for accessibility.

By being specific about the UI elements and their behaviors, you help Codex generate a template that is both functional and user-friendly.

Once you have the basic template, you can use Codex to further enhance the user experience. Here are some focused prompts and explanations for each improvement:

1. Live-updating value badges for sliders

You want the number next to each slider to update as the user moves it. You can prompt Codex like this:

Add JavaScript to update the count and sides badges live as the sliders move.

This tells Codex to add event listeners to the sliders and update the badge text in real time.

2. Quick-select “chips” for common values

To make it easy for users to pick common dice counts or sides, you can use chips. Here’s a prompt:

Add click handlers to the count and sides chips so that clicking a chip sets the corresponding slider and badge.

This ensures that when a user clicks a chip, the slider and badge update to match.

3. Loading state and inline error display

To give feedback while the dice are rolling and to handle errors, you can use:

When the user clicks Roll, disable the button and show 'Rolling…' until the fetch completes. If there is an error, show it in the error area.

This prompt helps Codex add logic to disable the button during the fetch, show a loading message, and display errors if something goes wrong.

4. Accessibility with aria-live

To make sure screen readers announce the results, you can say:

Set aria-live="polite" on the results area so updates are announced to screen readers.

This small addition makes your app more accessible to all users.

By giving Codex clear, focused prompts for each enhancement, you can build a modern, interactive, and accessible landing page step by step.

In this lesson, you learned how to use Codex to add a landing page to your Django app, route the home page, build a minimal interactive template, and enhance the user experience with live badges, quick-select chips, loading states, error handling, and accessibility features. These skills will help you create user-friendly web apps quickly and efficiently.

In the next lesson, you'll extend your API to support dice notation (like 2d6+3) and add input validation with proper error handling.