Reading the Matrix (කෝඩ් කියවන කලාව)
ඊළඟ level එකට Welcome! Course 1 එකේදී ඔයා AI එක්ක create කරන්න ඉගෙන ගත්තා. දැන් AI create කරන දේවල් තේරුම් ගන්න time එක.
🎯 පාඩමේ Objectives
මේ lesson එක ඉවර වෙද්දී ඔයාට:
- Code එක deeply තේරුම් ගන්න ඕනේ ඇයිද කියලා වැටහෙයි
- Course 1 ඉඳන් Course 2 ට වෙන progression එක පේනවා
- මේ module එකෙන් හදාගන්න skills මොනවද කියලා දැනගන්නවා
- Code anatomy ඉගෙන ගන්න motivated වෙනවා
Perspective එක වෙනස් වෙන හැටි
Course 1: තේරුම් නොගෙන Creation
Course 1 එකේදී අපි AI එක්ක create කරන්න ඉගෙන ගත්තා:
- ඔයාට ඕනේ දේ describe කළා
- AI එක code එක generate කළා
- Result එක දැක්කා
- ඒක work කළා (mostly!)
මේක intentionally කළ දෙයක්. Syntax barrier එක remove කරලා ඉක්මනට creation experience එක දුන්නා.
ඒත් limitation එකක් තියෙනවා...
"Black Box" Problem එක
ඔයාට code එක තේරෙන්නේ නැති වුනාම වෙන්නේ මේකයි:
┌─────────────────────────────────────────────────────────────┐│ ││ ඔයාගේ Prompt → [ AI BLACK BOX ] → Working Code ││ ││ ඔයා ඇහුවේ මොකක්ද වෙන්නේ මොකක්ද Work වෙනවා පේනවා ││ කියලා දන්නවා කියලා පේන්නේ නෑ ඒත් ඇයිද දන්නේ නෑ ││ │└─────────────────────────────────────────────────────────────┘මේකෙන් එන Problems:
Course 2: තේරුම් අරගෙන Better වෙලා Create කරන එක
Goal එක
මෙතැනින්:
"කොහොම හරි work වෙනවානේ"
මෙතැනට transform වෙන්න:
"මේක work වෙන්නේ මේ නිසා..."
අපි Build කරන Skill එක
Code දකිනවා → Purpose එක තේරුම් ගන්නවා → Confidently Modify කරනවාමේකට කියන්නේ code literacy — English/Sinhala කියවනවා වගේ code එක කියවලා තේරුම් ගන්න ability එක.
Transformation එක
Analogy එක: Driving ඉගෙන ගන්නවා වගේ
Code Mastery එකේ Stages 4ක්
Stage 1: Passenger (Course 1 ට කලින්)
- ඔයා car වල යනවා, වෙන කෙනෙක් drive කරනවා
- Work වෙන විදිහ ගැන දන්නේ නෑ
Stage 2: Magic Driver (Course 1)
- යන්න ඕනේ තැන කියනවා
- Car එක තනියම යනවා (AI)
- ඒත් problems fix කරන්න බෑ
Stage 3: Understanding Driver (Course 2) ← ඔයා දැන් මෙතන!
- Engine එක work වෙන හැටි දන්නවා
- AI තාමත් help කරනවා, ඒත් manually drive කරන්නත් පුළුවන්
- Basic issues ඔයාම fix කරන්න පුළුවන්
Stage 4: Expert Driver (Course 3+)
- Complete understanding
- Cars හදන්න පුළුවන් (complex software)
මේ Module එකේදී ඉගෙන ගන්න දේවල්
1. HTML Anatomy
- Document structure එක
- Essential tags සහ ඒවායේ purposes
- Attributes work වෙන හැටි
2. CSS Anatomy
- Selector types
- Common properties
- Box Model එක
- Layout basics
3. JavaScript Anatomy
- Variables සහ data types
- Functions සහ conditionals
- DOM manipulation
- Event handling
4. DevTools Mastery
- ඕනෑම website එකක් inspect කරන්න
- Live editing
- Debugging basics
ඇයි දිගටම AI ම Use කරන්නේ නැත්තේ?
හොඳ question එකක්! Understanding matter වෙන්නේ ඇයිද:
Code Understanding එකේ Benefits
1. Better Prompts
❌ "Fix the thing that's broken"
✅ "onClick handler එකේ issue එකක් — count variable update වෙන්නේ නෑ, ඒක fix කරන්න"
2. Faster Debugging
- Understanding එක්ක: Seconds 30 (line එකක් change)
- AI එක්ක: Minutes 5 (explain, wait, verify, repeat)
3. Job Readiness Professional developers ලා write කරනවට වඩා code read කරනවා.
4. Independence AI එකට understand නොවුනොත් ඔයා stuck වෙන්නේ නෑ.
5. Confidence ඔයාගේ code එකේ වෙන්නේ මොකද කියලා දන්න එක empowering.
ඔයාගේ New Superpower එක
මේ module එක ඉවර වෙද්දී ඔයාට පුළුවන් වෙනවා:
✅ ඔයාට ලැබෙන Skills
0/5Formula එක:
AI ගේ Code Generation Power + ඔයාගේ Code Understanding = 10x Effectivenessමේ Module එකට Approach කරන හැටි
Success වෙන්න Tips
-
Actively Read කරන්න — නිකන් read කරන්න එපා — examples ඔයාම type කරන්න. Modify කරන්න, break කරන්න, fix කරන්න.
-
DevTools Use කරන්න — Daily use කරන websites inspect කරන්න. ඒවා build කරලා තියෙන හැටි බලන්න.
-
හැම දේම Memorize කරන්න එපා — Patterns understand කරන්න. Specifics always look up කරන්න පුළුවන්.
-
AI එක Connect කරගන්න — Understand නොවෙන code තිබුනොත් AI ගෙන් explain කරන්න කියලා අහන්න.
Lesson Summary
Journey එක:
- Course 1: Understanding නැතුව create කළා (proof of concept)
- Course 2: Better create කරන්න understand කරනවා (මේ module එක)
- Course 3: Full confidence එක්ක complex systems build කරනවා
Matter වෙන්නේ ඇයි:
Code understanding ඔයාව AI tools use කරන කෙනෙක් ඉඳන් effectively wield කරන කෙනෙක් බවට transform කරනවා.
ඔයාගේ Mindset එක:
"මට හැම දේම memorize කරන්න ඕනේ නෑ, ඒත් dangerous වෙන්න ඕනේ තරම් understand කරන්න ඕනේ."
Next Up
Lesson 2.2: HTML Deep Dive
හැම webpage එකකම skeleton එක dissect කරමු!