Find your way around

The local homepage looks like the published site. Which file controls its heading? Let's find it and change the text before asking an agent to edit the project.

Keep the development server from the previous lesson running. In a second terminal, check that we're opening the folder containing the website:

cd ~/projects/small-hours-studio
pwd
ls

Use your own folder name if it differs. We should see package.json and the application's folders.

Outcome

Find the files behind the homepage and change its main heading in the local browser.

Hands-on exercise 2.4

Open the project in an editor

A code editor lets us navigate the project and change its text files. We'll use Visual Studio Code. Install the version for your operating system.

On macOS, open VS Code and choose File → Open Folder. Select the small-hours-studio folder inside projects in your home folder. When VS Code asks whether you trust this folder, confirm that it's the project you created.

On Windows, install VS Code on Windows and add Microsoft's WSL extension. Return to the Ubuntu terminal, move into the website folder, and run code .. The dot means the current folder. VS Code should indicate a WSL connection in its window; this keeps the editor attached to the same Linux files and tools as the terminal. Follow the VS Code WSL setup if the connection doesn't open.

The Explorer sidebar should contain package.json. If it shows several unrelated projects instead, reopen the website folder itself. Keeping the editor focused on this folder will also make the agent's changes easier to inspect later.

Follow the homepage

Expand app and open page.tsx. Some generated projects put it under src/app; both arrangements are supported. Use whichever exists in your project throughout the course.

Next.js associates files in app with website addresses. The top-level page.tsx provides the homepage at /. Its filename has a job, so keep that name while editing its contents.

The .tsx extension means the file contains TypeScript and JSX. JSX describes page elements using tags such as <h1>. TypeScript adds checks that help catch mistakes before publishing. We can edit the words inside a heading without understanding every line around it.

In the reference app, the heading appears in app/page.tsx:

<h1 id="hero-title">Make time<br />to make<br /><em>something.</em></h1>

The <br /> tags create line breaks. <em> gives the final word emphasis. Those tags are part of the design; our first edit will preserve them.

Use the editor's search across files to find your current heading if it isn't in page.tsx. On macOS, use Cmd+Shift+F; on Windows, Ctrl+Shift+F. A generated page may import the heading from a component. Follow that result and note the actual file path.

Read the surrounding structure

Open each of these files or its equivalent. We only need to identify its role:

A component is a reusable piece of the interface. The homepage uses the workshop card component once for each workshop. Updating that component can therefore affect several cards.

Plain .ts files contain TypeScript without JSX. .json stores structured data, while .css describes presentation. Visitors can access files in public through the website. None of these folders is a place to store a private API key.

Save a short file map in your course notes: the homepage, shared layout, workshop data, and card component. Use the actual paths you found. Later examples use the reference paths in the table; this note tells you where the equivalent edit belongs in your project.

Change the heading

Replace “Make time” with “Make something” and change the rest so the reference heading reads “Make something with your own hands.” Keep its existing tags and attributes. Save the file with Cmd+S or Ctrl+S.

For a different generated heading, make the equivalent wording change in the file you found. Leave the workshop information and navigation alone. We want the browser to show exactly which edit we made.

Try It

Return to the local URL printed by the development server. It should update after the file is saved. Read the full heading and check the layout at a narrow browser width. If a word wraps awkwardly, inspect the line breaks before changing unrelated styles.

Open the production URL in a separate tab. It should still have the previous heading. Editing a local file doesn't update the deployed site; we'll publish the change in the next lesson.

The heading doesn't change

Check the address bar for the local URL. Then check that the file is saved and the server is still running. Search for the old text across the project; we may have edited a component that the homepage doesn't use.

The browser displays a syntax error

Look at the file and line named in the error. A missing closing tag or quote can prevent the page from rendering. Use the editor's Undo once to inspect the last change, then reapply the text edit without removing surrounding tags. Keep the terminal visible for the next result.

Commit

Leave this edit uncommitted for the next lesson. In the second terminal, run git status and confirm it names the heading file we changed. Record that path; we'll use it when reviewing and staging the edit.

Done-When

• The editor is open to the website folder.
• We can locate the homepage and explain where the shared layout lives.
• The saved heading appears locally at desktop and phone widths.
• The production heading is unchanged, and Git identifies our edited file.

Solution

The reference app's heading in app/page.tsx becomes:

<h1 id="hero-title">Make something<br />with your<br /><em>own hands.</em></h1>

The surrounding page stays intact. Save the file, check the local page, and keep this single-file change ready for review.