Skip to content
LearnWithZavi

Your first project ยท Lesson 2

Ask Codex to Explain the Project Before Editing

Learn what the starter files do, inspect existing instructions and turn an unfamiliar folder into a small, reviewable plan.

Ask for a map you can check

An assistant's first explanation should point to things that actually exist. Ask Codex to identify the files responsible for the visible page, its appearance and its behaviour. Open those files or ask for the relevant lines when a claim is unclear.

Our starter has no application framework or package installation step. That makes it easier to connect a visible change to a particular file. Larger projects may need a setup command, database or external account; do not carry those assumptions into this exercise.

FilePlain-English purpose
index.htmlThe page's words, links and structure.
styles.cssColours, spacing, size and other visual rules.
script.jsWhat happens when the more-details button is pressed.
SOURCE.mdThe fictional workshop facts and requested final wording.
README.mdHow to open the page, the intentional bug and the manual checks.
AGENTS.mdWorking instructions for Codex in this practice project.

HTML, CSS and JavaScript are different jobs, even when one tool edits all three. You can ask for an explanation in terms of the page you see rather than memorising syntax.

Ask for a project map
Explain this starter project without changing files.
For each file, say what it controls and one thing I could check in the browser.
Identify the current headline, the session-details link and the more-details button.
Summarise the instructions that apply to this folder. Identify any setup step you actually found; do not invent one.

Look at the starting page

Open index.html in your browser. You can also ask Codex to serve only the practice folder on a local address bound to your computer. The page uses local files and needs no dependency download. Ask which address or file it opened and confirm that it is this project.

You should see the headline Workshop, a See session details link, the fictional date and a Show more details button. The link moves to the session section. The button opens an extra panel; the starter cannot close it again. That issue is deliberately described in the README.

Record this baseline before changing anything. If your result differs, investigate which copy of the project is open. Browser caching or an old local server can otherwise make you review the wrong version.

Turn the request into a small plan

For the first change, you will update the headline and introduction to the wording in SOURCE.md. A suitable plan names the exact text, changes only the relevant content and checks that the existing link and button are still present. It does not need a new framework, a registration system or a redesign.

Sample plan: inspect SOURCE.md and index.html; replace the headline and introductory sentence; reopen the page and compare those two strings; report the changed file and any checks not run. This is a teaching example, not a transcript of a guaranteed model response.

The official projects guidance explains how chats and project context relate. For this exercise, keep the page work in one focused project chat. Start a fresh chat for a separate outcome and give it the relevant files and current state rather than assuming it knows every earlier discussion.

Checkpoint

Open the unchanged page, identify the three files controlling its content, appearance and behaviour, and record the intentional button issue.

๐Ÿ“ Quiz

1 of 3

Swipe right if this answers the question correctly, left if it does not.

Which starter file controls what happens when the button is clicked?

โ€œSOURCE.mdโ€

Is this the right answer?

Found this useful? Pass it on.