Let’s add one image to your page and do it properly.

Create an images folder inside my-page. Put one image there. It can show a project, a drawing, your workspace, or a place you like.

Give the file a short lowercase name, such as weather-app.webp.

Add it inside main:

<figure>
  <img
    src="images/weather-app.webp"
    width="1200"
    height="800"
    alt="Weather dashboard showing the forecast for Copenhagen"
  >
  <figcaption>My first weather dashboard.</figcaption>
</figure>

Replace the filename, dimensions, alternative text, and caption with details from your image.

The src path is relative to index.html. The browser enters the images folder and finds the file there.

Check the alternative text

Hide or temporarily rename the image file. Reload the page.

Can the alternative text stand in for the missing image? It should communicate what matters in this context.

Restore the filename when you are done.

If the image is only decoration, use alt="". A project image normally carries information, so it needs useful text.

Check the dimensions

Find the image’s real pixel width and height. Put those values in the HTML.

The browser can now reserve the correct shape before the file downloads. This prevents the content below it from jumping.

Done when

The image loads from your local folder, keeps its proportions, has an accurate caption, and still makes sense when it cannot be seen.