🎯 පාඩමේ අරමුණු

මේ පාඩම ඉවර වෙද්දී ඔයාට:

HTML, CSS, JavaScript වල specific role තේරුම් ගන්න පුළුවන් වෙයි
Each technology එකට basic code snippets recognize කරන්න පුළුවන් වෙයි
Different tasks වලට use කරන technology එක කුමක්ද දැනගන්න පුළුවන් වෙයි
Websites create කරන්න ඒවා together work කරන විදිය බලන්න පුළුවන් වෙයි

📖 Web Trinity එක

ඔයා visit කරපු every website build කරලා තියෙන්නේ core technologies තුනක් together work කිරීමෙන්:

Formula එක

HTML + CSS + JavaScript = Earth එකේ Every Website එක

House එකක් build කරන එක ගැන හිතන්න:

Technology	Role	House Analogy
HTML	Structure & Content	Walls, floors, rooms, doors
CSS	Visual Style	Paint, furniture, decorations
JavaScript	Behavior & Interaction	Electricity, plumbing, smart home features

🦴 HTML: Skeleton එක

ඒක මොකක්ද:

HTML (HyperText Markup Language) webpage එකක structure සහ content define කරනවා.

Answer කරන්නේ: "මේ page එකේ WHAT තියෙනවද?" කියන question එකට.

HTML Contain කරන දේ:

Text (headings, paragraphs)
Images
Links
Buttons
Forms
Lists
Tables
Videos

HTML Look කරන්නේ මෙහෙම:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Site!</h1>
    <p>This is a paragraph of text.</p>
    <img src="photo.jpg" alt="A nice photo">
    <button>Click Me</button>
    <a href="https://google.com">Visit Google</a>
</body>
</html>

HTML Read කිරීම - Basics:

Code	Create කරන දේ
`<h1>...</h1>`	Big heading එකක් (h1 = most important)
`<p>...</p>`	Text paragraph එකක්
`<img src="...">`	Image එකක්
`<button>...</button>`	Clickable button එකක්
`<a href="...">...</a>`	Another page එකකට link එකක්
`<div>...</div>`	Container/section එකක්

Key Insight

HTML alone ගොඩක් plain look කරනවා — formatting නැති Word document එකක් වගේ. CSS එන්නේ එතනට.

🎨 CSS: Clothing එක

ඒක මොකක්ද:

CSS (Cascading Style Sheets) webpage එකක visual appearance control කරනවා.

Answer කරන්නේ: "මේ page එක look කරන්නේ HOW?" කියන question එකට.

CSS Control කරන දේ:

Colors (text, backgrounds, borders)
Sizes (width, height, font size)
Spacing (margins, padding)
Fonts (typeface, weight, style)
Layout (things positioned තියෙන තැන)
Animations සහ transitions
Responsive behavior (mobile vs desktop)

CSS Look කරන්නේ මෙහෙම:

CSS

/* Heading එක blue සහ big කරන්න */
h1 {
    color: blue;
    font-size: 48px;
    text-align: center;
}
 
/* Paragraph එක style කරන්න */
p {
    color: gray;
    font-size: 18px;
    line-height: 1.6;
}
 
/* Button එක nice look කරන්න */
button {
    background-color: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
 
/* Hover එකේදී button change කරන්න */
button:hover {
    background-color: #357ABD;
}

CSS Read කිරීම - Basics:

Property	Control කරන දේ
`color`	Text color
`background-color`	Background fill
`font-size`	Text කොපමණ big ද
`padding`	Element එක ඇතුලේ space
`margin`	Element එක පිටත space
`border`	Element එක වටේ border
`border-radius`	Rounded corners
`width` / `height`	Element එකේ size

Key Insight

CSS plain HTML beautiful designs වලට transform කරනවා. Same HTML different CSS එක්ක completely different look කරන්න පුළුවන්.

⚡ JavaScript: Brain එක

ඒක මොකක්ද:

JavaScript (JS) webpage එකකට behavior සහ interactivity add කරනවා.

Answer කරන්නේ: "මේ page එක DO කරන්නේ WHAT?" කියන question එකට.

JavaScript කරන දේ:

User actions වලට respond කරනවා (clicks, typing, scrolling)
Reload නොකර content update කරනවා
Form inputs validate කරනවා
Animations සහ effects create කරනවා
Servers වලින් data fetch කරනවා
Data locally store කරනවා
Media playback control කරනවා

JavaScript Look කරන්නේ මෙහෙම:

JavaScript

// Button click කරද්දී alert එකක් show කරන්න
const button = document.querySelector('button');
 
button.onclick = function() {
    alert('Hello! You clicked the button!');
};
 
// Click කරද්දී heading text change කරන්න
const heading = document.querySelector('h1');
 
heading.onclick = function() {
    heading.textContent = 'You clicked me!';
};
 
// Button clicks count කරන්න
let clickCount = 0;
 
button.onclick = function() {
    clickCount = clickCount + 1;
    button.textContent = 'Clicked ' + clickCount + ' times';
};

JavaScript Read කිරීම - Basics:

Code	කරන දේ
`const x = ...`	Change නොවන variable එකක් create කරනවා
`let x = ...`	Change වෙන්න පුළුවන් variable එකක් create කරනවා
`document.querySelector('...')`	Page එකේ element එකක් find කරනවා
`element.onclick = function() {...}`	Click කරද්දී code run කරනවා
`alert('...')`	Popup message එකක් show කරනවා
`console.log('...')`	Developer console එකට print කරනවා

Key Insight

JavaScript නැතුව, websites static documents විතරයි. JavaScript ඒවා interactive applications බවට කරනවා.

🔗 Together Work කරන විදිය

Text

┌─────────────────────────────────────────────────────────┐
│                     WEB PAGE                             │
├─────────────────────────────────────────────────────────┤
│                                                          │
│   HTML (Structure)                                       │
│   "මෙතන button එකක් තියෙනවා"                            │
│        │                                                 │
│        ▼                                                 │
│   CSS (Style)                                            │
│   "Button එක blue, rounded, centered"                   │
│        │                                                 │
│        ▼                                                 │
│   JavaScript (Behavior)                                  │
│   "Click කරද්දී button message එකක් show කරනවා"         │
│                                                          │
└─────────────────────────────────────────────────────────┘

🎮 Complete Example

HTML

<button id="myButton">Click Me</button>
<p id="message"></p>

🧠 Memory Aid එක

HTML  → WHAT is there     (structure/content)
CSS   → HOW it looks      (style/appearance)
JS    → WHAT it does      (behavior/interaction)

Quick Diagnostic:

මේක Broken නම්...	මේ Technology Check කරන්න
Content missing	HTML
Page ugly/plain	CSS
Buttons work කරන්නේ නැහැ	JavaScript
Layout wrong	CSS (හෝ HTML structure)
Form submit වෙන්නේ නැහැ	JavaScript
Images show වෙන්නේ නැහැ	HTML (src attribute)
Colors wrong	CSS

🎮 Interactive Exercise

Identify කරන්න primarily involved technology එක (HTML, CSS, or JS):

✅ Technology Identification

0/8

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

Web Trinity එක

Technology	Role	Analogy	Answer කරන Question
HTML	Structure	Skeleton/Frame	WHAT is there?
CSS	Style	Clothing/Decor	HOW does it look?
JavaScript	Behavior	Brain/Nervous System	WHAT does it do?

Vibe Coding වලට:

AI prompt කරනකොට, ඕන technologies specify කරන්න:

"Create an HTML structure for..." (content only)
"Add CSS to make it..." (styling only)
"Add JavaScript to..." (behavior only)
"Create a complete webpage with..." (all three)

📝 Mini Quiz

📝 ඔයාගේ Understanding Check කරන්න

1/3

Which technology defines WHAT is on a page?