Project 1: Profile Card

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

Project 1 — Profile Card။ ဒီ project က beginner အတွက် HTML structure ကိုလက်တွေ့လေ့ကျင့်ဖို့ကောင်းပါတယ်။ Image, heading, paragraph, link/list တွေကို card တစ်ခုထဲစုဆောင်းထားပါတယ်။

Requirement: profile image, name, role, short bio, skills list, contact link ပါရမယ်။ CSS ထည့်ရင် card design လှလာမယ်၊ ဒါပေမယ့် ဒီ lesson မှာ 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

Profile card အတွက် semantic HTML structure တစ်ခုရပါမယ်။