Add an image in Phoenix Code Community

Name: Add an image in Phoenix Code Community using Highlight Mode
Uploaded: 2026-11-10T08:40:33.985Z
Duration: PT31.16S
Description: Replace the picture in the first-website practice project using free Community features. Use Highlight Mode to locate the image in HTML, select the whole img tag, replace its filename and alt description, and save.

31 seconds · On-screen instructions

This walkthrough uses the free Community features. It starts with photo.jpg already copied into the first-website project’s images folder.

Read the full tutorial and get the practice website

Read the video’s on-screen instructions

Community: choose Highlight Mode from the arrow beside the pen.
Click the hills in Live Preview. The editor finds the image tag.
In the editor, select the whole image tag before replacing it.
Paste the new tag. Use your picture filename and a short description.
Save with Ctrl+S (Windows/Linux) or Cmd+S (Mac). Your photo is in the page.