Course එකට ආපසු

Course 1 Refresher

20 මිනිත්තු📖Lecture

Course 1 Refresher (මතක් කරගමු)

Course 2 ට Welcome! Local Development පටන් ගන්න කලින්, Course 1 එකේ දේවල් ඔයාට හොඳට මතකද බලමු. මේකෙන් ඔයා ඉස්සරහට යන්න හොඳටම ලෑස්තියි කියලා ෂුවර් කරගන්න පුළුවන්.

Course 2 හැදිලා තියෙන්නේ Course 1 මත

Course 1 (පදනම)
Course 2 (භාවිතය)
Vibe coding මානසිකත්වය
තමන්ගේ මැෂින් එකේ පාවිච්චි කරනවා
Prompt engineering
Local AI Tools එක්ක කරනවා
Web දැනුම (HTML/CSS/JS)
Code ලියනවා සහ වෙනස් කරනවා
Cloud Sandboxes
තමන්ගේම Setup එකක් හදාගන්නවා

පොඩි ප්‍රශ්න ටිකක් (Quick Review Quiz)

උත්තර බලන්න කලින් තනියම හිතලා බලන්න!

ප්‍රශ්නය 1: Syntax vs. Logic

Syntax සහ Logic අතර වෙනස මොකක්ද?

ප්‍රශ්නය 2: The C.I.C. Framework

හොඳ Prompt එකක තියෙන කොටස් 3 මොනවද?

ප්‍රශ්නය 3: The Restaurant Analogy

අවන්හලේ උදාහරණයේ (Restaurant Analogy), "කුස්සිය" (Kitchen) කියන්නේ මොකටද?

ප්‍රශ්නය 4: The Web Trinity

HTML, CSS, සහ JavaScript වලින් කරන්නේ මොනවද?

මතක තියාගන්න ඕනේ මූලධර්ම (Core Principles)

Course 1 එකේ ඉගෙන ගත්ත මේ දේවල් දිගටම ඕනේ වෙනවා:

මූලධර්මය 1: ඔයා මැනේජර්, AI තමයි Intern

Manager/Intern Relationship

ඔයාගේ වැඩේ (Manager):

  • හදන්න ඕනේ මොකක්ද කියල තීරණය කරනවා
  • පැහැදිලිව විස්තර කරනවා
  • හදපු දේ බලනවා (Review)
  • වැරදි තියෙනවා නම් හදන්න කියනවා
  • අන්තිම තීරණය ගන්නවා

AI ගේ වැඩේ (Intern):

  • වේගයෙන් Code ලියනවා
  • තාක්ෂණික නීති (Syntax) දන්නවා
  • කියන දේ අකුරටම කරනවා
  • කවදාවත් මහන්සි වෙන්නේ නෑ
  • ඔයාගේ මඟ පෙන්වීම ඕනේ

මූලධර්මය 2: Logic > Syntax

ඔයාට මේවා කටපාඩම් කරන්න ඕනේ නෑ:

  • document.getElementById()
  • @media (max-width: 768px)
  • function handleClick() {}

ඔයාට මේවා හිතන්න පුළුවන් වෙන්න ඕනේ:

  • "පරිශීලකයා මේ බට්න් එක එබුවම, මැසේජ් එකක් පෙන්නන්න."
  • "පොඩි ස්ක්‍රීන් වලදී, මේ දේවල් එකකට යටින් එකක් පෙන්නන්න."
  • "මේ ඔක්කොම එකතු කරලා මුළු ගාන හදන්න."

Key Insight

AI ඔයාගේ තර්කනය (Logic) අරගෙන කෝඩ් (Syntax) බවට හරවනවා.

මූලධර්මය 3: Iteration Is Key

Text
පළමු Prompt එක ≠ අවසාන ප්‍රතිඵලය
 
පළමු Prompt → බලනවා (Review) → අඩුපාඩු හදනවා → ආයේ බලනවා → ආයේ හදනවා → හරි!

හොඳ ප්‍රතිඵලයක් ගන්න 3-5 පාරක්වත් මේක කරන්න වෙනවා (Iterations). ඒක සාමාන්‍ය දෙයක්, වැරද්දක් නෙවෙයි.

මූලධර්මය 4: වෙබ් ත්‍රිත්වය එකට වැඩ කරනවා

Text
HTML (ව්‍යුහය)
     ↓
CSS (විලාසිතාව) ← HTML වලට ලස්සන දානවා
     ↓
JavaScript (හැසිරීම) ← HTML වලට පණ දෙනවා

මේවා වෙන වෙනම ෆයිල් වුනාට, ඔක්කොම එකතු වෙලා තනි සිස්ටම් එකක් විදිහට වැඩ කරනවා.

ඔයා ගැනම බලන්න (Self-Assessment)

✅ Course 1 දැනුම පරීක්ෂාව

0/8

Course 2 වලදී වෙනස් වෙන්නේ මොනවද?

මූලධර්ම එකමයි, මෙවලම් අලුත්

වෙනස් නොවෙන දේවල්
වෙනස් වෙන දේවල්
ඔයා කියනවා, AI ලියනවා
Tools තියෙන්නේ ඔයාගේ කම්පියුටර් එකේ
C.I.C. Prompts තාම වැඩ
Editor එක ඇතුලෙම AI ඉන්නවා
Iteration අනිවාර්යයි
මැෂින් එකේ නිසා වැඩේ මාර වේගවත්
HTML/CSS/JS ව්‍යුහය
ඔයාට කෙලින්ම ෆයිල් පේනවා/වෙනස් කරන්න පුළුවන්

අලුතෙන් ඉගෙන ගන්න දේවල්:

  • වෘත්තීය Code Editor එකක් (VS Code)
  • ෆයිල් තමන්ගේ මැෂින් එකේ හදාගන්න හැටි
  • කෝඩ් පරිස්සම් කරන හැටි (Git/Version Control)
  • තමන්ගේ මැෂින් එකේ සර්වර් දුවන හැටි
  • කෝඩ් එක කෙලින්ම වෙනස් කරන හැටි

ඔයාගේ ජයග්‍රහණය

ඔයා දැනටමත් කරපු දේවල් මතක තියාගන්න

  • ✅ AI එක්ක එකතු වෙලා වෙබ් අඩවියක් හැදුවා
  • ✅ ඒක ලෝකෙටම බලන්න පුළුවන් විදිහට දැම්මා (Share කළා)
  • ✅ ඒක තව තව දියුණු කළා (Iterate)
  • ✅ වෙබ් එකේ මූලික දේවල් තේරුම් ගත්තා

ඔයා බිංදුවෙන් පටන් ගන්නේ නෑ. ඔයා ඊළඟ ලෙවල් එකට (Level Up) යන්නේ.

පාඩමේ සාරාංශය

Course 1 ප්‍රධාන කරුණු:

  1. Vibe Coding: ඕනේ දේ කියන්න, AI කෝඩ් ලියයි
  2. C.I.C. Framework: Context (පසුබිම), Instruction (උපදෙස්), Constraint (සීමා)
  3. Web Trinity: HTML, CSS, JS
  4. Iteration: පලවෙනි උත්තරේ කියන්නේ ආරම්භය විතරයි

දිගටම තියෙන නීති:

  • ඔයා මැනේජර්, AI ඉන්ටර්න්
  • Logic (තර්කනය) තමයි Syntax (නීති) වලට වඩා වැදගත්
  • හැමතිස්සෙම බලන්න (Review), වැරදි හදන්න (Refine)

Knowledge Check

📝 Quiz

1/4

Syntax සහ Logic අතර වෙනස මොකක්ද?

ඊළඟ පාඩම

ඇයි අපි ක්ලවුඩ් එකෙන් අයින් වෙලා තමන්ගේ මැෂින් එකේ වැඩ කරන්න පටන් ගන්නේ කියලා බලමු!