Exercises: Selector & Box Model Practice

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

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson က အသစ်ဘာမှ မသင်ပါဘူး — Basic နဲ့ Intermediate chapter တွေမှာသင်ခဲ့တဲ့ selector, color, box model, flexbox knowledge တွေကို hands-on ပြန်သုံးကြည့်ဖို့ပါ။ Concept တစ်ခုချင်းကို သီးခြားစီ drill လုပ်မယ့်အစား, real card layout လေးတစ်ခုပေါ်မှာ ပေါင်းစပ်ပြီး apply လုပ်ကြည့်ရမှာဖြစ်လို့ “နားလည်တယ် ဆိုပေမယ့် ကိုယ်တိုင်ရေးလို့ရလား” ဆိုတာ စစ်ဆေးနိုင်ပါတယ်။ Task တစ်ခုစီက short ဖြစ်ပြီး, 5-10 minutes အတွင်း ပြီးအောင်လုပ်လို့ရပါတယ်။ Solution ကို ကြည့်မယ့်အစား, ကိုယ်တိုင် code editor ဖွင့်ပြီး စမ်းရေးကြည့်ဖို့ အားပေးပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1: box-sizing: border-box သုံးပြီး .card class အတွက် padding: 16px, border: 1px solid #ddd, width: 250px ပါတဲ့ box တစ်ခုဆောက်ပါ။ Task 2: အထက်က .card ထဲမှာ h3 title နဲ့ p description ကို type selector သုံးပြီး color နဲ့ font-size သတ်မှတ်ပါ။ Task 3: .card 3 ခုကို flex container ထဲထည့်ပြီး display: flex, gap: 16px, justify-content: center သုံးပြီး horizontal center layout လုပ်ပါ။ Task 4 (optional bonus): .card:hover မှာ box-shadow တစ်ခု ထည့်ပြီး hover effect လေးလုပ်ကြည့်ပါ။

box-sizing: border-box သုံးပြီး card layout ဆောက်ပါ
Selector အမျိုးမျိုးနဲ့ text style သတ်မှတ်ပါ
Flexbox သုံးပြီး card တွေကို horizontally center လုပ်ပါ

Code နမူနာ

css

/* Starter skeleton - fill in the blanks */
* {
  box-sizing: border-box;
}

.card {
  /* Task 1: width, padding, border ထည့်ပါ */
}

.card h3 {
  /* Task 2: title style */
}

.card p {
  /* Task 2: description style */
}

.card-list {
  /* Task 3: display, gap, justify-content ထည့်ပါ */
}

.card:hover {
  /* Task 4 (bonus): box-shadow */
}

/* HTML reference:
<div class="card-list">
  <div class="card"><h3>Title</h3><p>Description text</p></div>
  <div class="card"><h3>Title</h3><p>Description text</p></div>
  <div class="card"><h3>Title</h3><p>Description text</p></div>
</div>
*/

You should see

Card 3 ခု horizontally center ဖြစ်ပြီး padding/border/gap အားလုံး design အတိုင်း ကိုက်ညီစွာ ပြသမှာဖြစ်ပါတယ်။

၅ မိနစ် စမ်းကြည့်

Task 1-3 ကို 10 မိနစ်အတွင်း code editor မှာ ကိုယ်တိုင်ရေးပြီး browser မှာ result ကို run ကြည့်ပါ — hint မကြည့်ဘဲ ကြိုးစားကြည့်ပါ။

သတိလေးတစ်ချက်

Property တစ်ခုစီရဲ့ effect ကို DevTools Elements panel နဲ့ တိုက်ကြည့်ပြီး apply ဖြစ်မဖြစ် check လုပ်ပါ — code ရေးပြီးရင် browser မှာ အမြဲ visual confirm လုပ်ဖို့ အကျင့်ရအောင် လုပ်ပါ။