Project 1: Profile Card

Relax. We'll talk through this in plain words — no textbook voice.

Project 1 — Profile Card. This project is great hands-on practice with HTML structure for beginners. It brings an image, heading, paragraph, and link/list together inside a single card.

Requirement: it needs a profile image, name, role, short bio, skills list, and contact link. Adding CSS will make the card look nicer, but this lesson focuses mainly on the HTML structure.

html

<article class="profile-card">
  <img src="profile.jpg" alt="Sai Tun smiling" width="160" height="160">
  <h2>Sai Tun</h2>
  <p>AI automation learner and web creator building useful digital tools.</p>
  <h3>Skills</h3>
  <ul>
    <li>HTML basics</li>
    <li>AI content workflow</li>
    <li>Web project planning</li>
  </ul>
  <a href="mailto:hello@example.com">Contact me</a>
</article>

You should see

You'll end up with a semantic HTML structure for a profile card.