Last updated:
You have tried the image example on Playcode123.com. Now turn it into a small plant card on your own computer. This practical guide focuses on the part that often goes wrong: getting the browser to find the right image and display it without stretching it.
What you will build
A page with one image, a caption, and a short description. You will practise arranging files, choosing alternative text, and checking the result in a narrow window. You do not need to install a library or upload anything to a server.
Prepare the two files
Create a folder called plant-card. Inside it, create an images folder. Save a PNG that you created or have permission to use as images/plant.png. Save the example below as index.html directly inside plant-card, not inside images.
For the sample dimensions, use a 640 × 400 image. You can draw a simple plant in an image editor and save it as PNG. If you use a different picture, change the width, height, caption, and alternative text to describe that picture. The example does not download an image for you.
Complete example to try locally
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A plant image card</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.6;margin:0;padding:24px;color:#172b3a;background:white}main{max-width:720px;margin:auto}a{color:#145da0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #145da0;outline-offset:3px}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}
figure{margin:0}img{display:block;max-width:100%;height:auto}figcaption{margin-top:12px}
</style>
</head>
<body>
<main>
<h1>My plant card</h1>
<figure>
<img src="images/plant.png" width="640" height="400"
alt="Two green leaves growing from a terracotta pot">
<figcaption>A small plant illustration for my practice page.</figcaption>
</figure>
<p>The image is stored in the images folder beside this HTML file.</p>
</main>
</body>
</html>Open the page and inspect the result
Double-click index.html. The picture should appear below the heading, with a caption underneath. Make the browser window narrower: the image should shrink while keeping its proportions. Refresh the tab after saving an edit.
The path images/plant.png starts at the folder containing this HTML page. It means: enter images, then find plant.png. If you move the HTML page into another folder, that same path may no longer point to the picture.
Make the image useful to readers
The alt text is a replacement for the image when it cannot be seen. Describe what matters in this particular card. Do not copy a filename such as plant-final-2.png into the description. For a purely decorative image, an empty alt="" can be appropriate; our plant card uses the picture as content.
The caption is visible to everyone and can explain why the picture is on the page. The numeric width and height describe its intrinsic dimensions. CSS limits the displayed width and uses automatic height to avoid distortion. PNG can preserve transparency, but it is not automatically the smallest format for every photograph.
When the picture does not appear
- Check whether your file is really plant.png, not plant.png.png or plant.jpg. Renaming a JPEG extension does not convert the image.
- Compare capitalization: Plant.png and plant.png can be different files on a web server.
- Check that images is next to index.html. Do not paste a Windows path such as C:\Pictures into the page.
- Open the image file directly. If it cannot be opened, replace the damaged file.
- When testing through a web server, inspect the browser Network panel for the failed image request and its requested path.
When the picture appears locally but disappears after upload, compare the uploaded folder structure with your local one. Upload the image folder as well as the HTML file.
Exercise: move the image
Rename the folder images to assets. Refresh the browser before changing the code and observe the missing picture. Then repair only the src value.
Solution: use src="assets/plant.png". The caption and alternative text do not need to change because the picture itself has not changed. Your test is complete when the same image reappears.
Extend the card
Add a second figure with a different picture and its own caption. Give both images accurate dimensions and descriptions. Avoid copying the first description unchanged: two working files can still create a confusing page if they are described incorrectly.
Continue your project
Paths, Folders & File Names is a useful next step. Return to the HTML examples on Playcode123.com whenever you want to review the basic syntax.
Further reference
Technical reference: MDN: the img element.