Day 5: Images & Week 1 Mini-Project

Daily Objective

Embed images correctly with accessibility attributes and complete the Week 1 personal “About Me” mini-project.

1. Embedding Images: <img>

The <img> tag is a self-closing element requiring two essential attributes:

• src: Path to the image file (relative or absolute).
• alt: Descriptive alternative text read by screen readers and shown if the image fails to load.

<img
  src="images/profile.jpg"
  alt="Portrait photo of Jane Doe smiling in front of a laptop"
  width="300"
  height="300"
/>

Common Image Formats

• WebP: Modern format with excellent compression and quality (preferred for web).
• JPG/JPEG: Ideal for photographs with gradients and complex colors.
• PNG: Ideal for graphics with transparent backgrounds.
• SVG: Scalable vector format perfect for icons and logos.

---

Week 1 Mini-Project: Personal “About Me” Page

Project Requirements:

1. A valid HTML5 document structure with <head>, <meta>, and <title>.
2. An <h1> containing your name or title.
3. A profile picture or avatar using <img> with a descriptive alt attribute.
4. A short biographical paragraph using <p>, <strong>, and <em>.
5. An unordered list of your hobbies and interests.
6. An ordered list of your top 3 career goals for this year.
7. Hyperlinks to your GitHub profile and two favorite reference sites.