Module 09 lesson 04

Work With Images, Links, and Navigation

What You Will Learn

By the end, learners can explain work with images, links, and navigation, ask Codex for focused help, review the result, and decide the next safe step.

Why It Matters

Work With Images, Links, and Navigation matters because Codex is strongest when you can describe the desired outcome, the current project context, the constraints, and the evidence that proves the work is done. Beginners do not need to memorize every command. They need enough literacy to steer the agent, spot risky changes, and ask for a safer next step.

Plain-English Explanation

Think of this lesson as one practical layer in the Codex shipping loop: understand the work, define a small change, let Codex inspect before editing, review the diff, test the result, and only then decide whether to publish or continue. If a feature is plan-dependent, rolling out, or different across the app, CLI, IDE extension, and cloud/web task surfaces, say so in the prompt and ask Codex to verify the current surface before assuming it can act.

Work With Images, Links, and Navigation belongs to the larger codex for editing existing websites workflow. Treat it as a practical decision point: what should Codex inspect, what should it avoid, what evidence proves success, and what human review is required before shipping?

Practical example: if your goal is "Work With Images, Links, and Navigation", ask Codex to return a short map of the relevant files, a one-step beginner exercise, and a review checklist before making changes.

Step-by-Step Tutorial

1. Open a draft, staging page, copied snippet, or local HTML file.
2. Ask Codex to identify the parent wrapper class, existing theme constraints, and links that must stay valid.
3. Define the visible outcome for desktop and mobile.
4. Ask for scoped HTML/CSS/JS under a single parent class.
5. Check headings, buttons, contrast, keyboard behavior, and mobile layout.
6. Verify there are no empty links and no duplicate schema.
7. Write owner-friendly paste, preview, and rollback instructions.

Copy/Paste Codex Prompt

You are helping me learn Work With Images, Links, and Navigation. First explain the concept in plain English. Then inspect only the relevant files or context I provide. Propose a small safe exercise, wait for my approval before editing, and finish with a summary of what changed, how to test it, and what I should review. Do not touch production, do not commit secrets, and do not make unrelated changes.

Bad Prompt vs Better Prompt vs Expert Prompt

Bad prompt:

Fix this.

Better prompt:

Help me with Work With Images, Links, and Navigation. Explain what you need to inspect first, then propose a small plan before editing.

Expert prompt:

I want to complete Work With Images, Links, and Navigation inside this project. Goal: produce a safe, reviewable result for a beginner. Context: I will provide the relevant file, URL, error, or workflow. Constraints: do not edit unrelated files, do not expose secrets, do not deploy, and ask before destructive commands. Done when: you explain the change, list tests to run, identify risks, and give me a rollback note.

Hands-On Exercise

Ask Codex to create or improve a single WordPress Custom HTML section with scoped CSS, then ask for a mobile QA checklist before publishing.

Expected Result

You should have a WordPress-safe page section or tool that can be pasted into a draft and tested without affecting the rest of the site.

Troubleshooting

• If styles leak into the theme, ask Codex to scope every selector under the parent class.
• If buttons wrap badly on mobile, ask for stable dimensions and responsive layout rules.
• If WordPress strips JavaScript, ask for a no-JS fallback or a plugin-safe publishing option.
• If schema exists already, remove custom JSON-LD and rely on the SEO plugin unless verified otherwise.

Common Mistakes

• Adding broad CSS selectors like `h2`, `.button`, or `section` outside the parent wrapper.
• Publishing links before destination pages exist.
• Adding BreadcrumbList schema when Yoast already outputs breadcrumbs.
• Testing only on desktop.

Safety Checklist

• Use a draft or staging page first.
• Scope all CSS under the course or tool wrapper.
• Do not add fake, empty, or placeholder links.
• Avoid custom schema unless the SEO plugin output is verified.
• Keep a copy of the previous HTML before replacing a live block.

Quiz / Checkpoint

Question: What is the safest next step before asking Codex to edit code for work with images, links, and navigation?

Answer: Give Codex the relevant context, ask it to inspect first, request a short plan, and define how the result will be reviewed and tested.

Navigation

Previous lesson: Inspect CSS Before Adding CSS

Next lesson: Mobile-First Website Edits

Return to course hub: codex-course-hub.html