Images

1. Principle

The <img> tag embeds an image. It has two required attributes for any image you ship:

• src — the path to the image file (URL or local path).
• alt — a text description of what the image shows.

<img src="profile.jpg" alt="Photo of me hiking in the Blue Mountains">

Why alt is mandatory:

1. Screen readers read it aloud to blind users — without alt, the image is invisible to them.
2. Image failed to load — the alt text shows in its place.
3. Search engines use it to understand what the image is about.

For decorative images that add no information (a flourish, a divider line), use alt="" (empty). That tells screen readers "this image is decoration, skip it." Better than no alt at all.

You should also set width and height (in pixels) so the browser knows how much space to reserve before the image loads. Without them, the page shifts as images arrive — known as layout shift, terrible for UX.

2. Do (you try)

Find or create a profile picture. Any image will do; if you don't have one, grab a placeholder from picsum.photos (e.g. https://picsum.photos/200).

If using a local file:

1. Save the image into your my-portfolio folder. Name it profile.jpg (or .png).
2. Reference it with a relative path.

If using a URL: Reference it directly.

Add the image at the top of your About section:

<h2 id="about">About</h2>
<img
src="profile.jpg"
alt="Photo of Your Name, smiling, outdoors"
width="200"
height="200">
<p>
I am a developer learning by building. You can find me on
<a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">GitHub</a>.
</p>

Adjust width and height to your image's actual proportions (you can keep them small for now).

Save and refresh.

3. Verify (how you know)

Visual check: Your photo appears above the About paragraph.

Alt-text test: In Chrome DevTools, click the Network tab. Right-click → Block request URL on your image. Refresh the page. The image now fails to load, and you should see your alt text displayed in its place. Right-click → unblock when done.

Accessibility audit (bonus): Open DevTools → Lighthouse tab → check "Accessibility" → Analyze. You should score 100 for accessibility on alt-text checks. If not, the report will name the issue.

If your image doesn't appear:

• Local file: the path is wrong. The image file must live in the same folder as index.html (or in a subfolder, and the src adjusted: images/profile.jpg).
• URL: check the URL works by pasting it into a new browser tab.

4. Reference