Browser එක ඔබේ යාළුවා

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

📖 Browser එක Actually මොකක්ද?

Web browser එකක් software application එකක්:

1. Servers වලින් web pages Request කරනවා
2. HTML, CSS, JavaScript files Receive කරනවා
3. ඔයා දකින visual page එකට ඒවා Render කරනවා
4. Interactivity සඳහා JavaScript Execute කරනවා
5. Everything screen එකේ Display කරනවා

Common Browsers:

🔄 Browser ගේ Job: Step by Step

URL එකක් type කරලා Enter press කරනකොට:

Step 1: DNS Lookup

Browser ask කරනවා: "google.com ගේ IP address මොකක්ද?"

(Contact list එකක phone number එකක් search කරනවා වගේ)

Step 2: Connection

Browser ඒ IP address එකට connect වෙලා කියනවා: "Hello server, /search එකේ page එක send කරන්න"

Step 3: Download

Server files send කරනවා:

• index.html (structure)
• styles.css (appearance)
• script.js (behavior)
• Images, fonts, other assets

Step 4: Parse

Browser HTML read කරලා elements "tree" එකක් build කරනවා:

html
├── head
│   └── title
└── body
    ├── header
    ├── main
    └── footer

Step 5: Apply Styles

Browser CSS read කරලා each element එකට styles apply කරනවා.

Step 6: Execute JavaScript

Browser JavaScript code run කරනවා, එයට:

• Interactivity add කරන්න
• Page modify කරන්න
• More data fetch කරන්න පුළුවන්

Step 7: Render

Browser everything screen එකට paint කරනවා.

Step 8: Wait for Interaction

Browser ඔයා click, scroll, type කරනකම් wait කරනවා.

🌐 Universal Languages

Remarkable දෙයක් මෙන්න:

ඒක නිසා same website work කරනවා:

• Windows එකේ Chrome
• iPhone එකේ Safari
• Linux එකේ Firefox
• Mac එකේ Edge

Web Standards:

W3C (World Wide Web Consortium) වගේ organizations මේ standards define කරනවා, browsers හැමඑකම ඒවා same ආකාරයට implement කරන්න.

ඒක නිසා web එකේ "write once, works everywhere" possible.

📱 Responsive Design: One Site, All Screens

Same website work කරන්න ඕන:

• Large desktop monitors (1920px wide)
• Laptops (1366px wide)
• Tablets (768px wide)
• Phones (375px wide)

Responsive Design Work කරන විදිය:

CSS Media Queries screen size එක මත different styles apply කරන්න let කරනවා:

/* Default styles (mobile-first) */
.menu {
    display: block;
}
 
/* Tablets සහ ඉහළට styles */
@media (min-width: 768px) {
    .menu {
        display: flex;
    }
}
 
/* Desktops සඳහා styles */
@media (min-width: 1024px) {
    .menu {
        justify-content: space-between;
    }
}

Responsively Change වෙන දේ:

• Layout: Mobile එකේ stacked, desktop එකේ side-by-side
• Font sizes: Mobile එකේ smaller
• Navigation: Hamburger menu vs. full menu
• Image sizes: Screen එකට optimized
• Spacing: Small screens වල tighter

🔧 Tool එකක් විදියට Browser

Modern browsers powerful built-in tools include කරනවා:

Developer Tools (DevTools)

Every browser එකේ DevTools තියෙනවා (usually F12 හෝ right-click → Inspect).

කරන්න පුළුවන් දේ:

• Any website එකේ HTML structure බලන්න
• Any element එකට apply වෙන CSS බලන්න
• Network requests (API calls) watch කරන්න
• JavaScript errors බලන්න
• Responsive designs test කරන්න
• Performance measure කරන්න

🎮 Browser Capabilities

Modern browsers pages display කරනවට වඩා ගොඩක් කරන්න පුළුවන්:

🤔 Common Browser Misconceptions

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

Browser ගේ Role:

1. Request → Servers වලින් files fetch කරනවා
2. Parse → HTML structure තේරුම් ගන්නවා
3. Style → CSS appearance apply කරනවා
4. Execute → JavaScript code run කරනවා
5. Render → Screen එකට display කරනවා
6. Interact → User actions වලට respond කරනවා

Key Takeaways:

• Browsers හැමඑකම HTML, CSS, JavaScript speak කරනවා
• Responsive design sites all screen sizes වලට work කරනවා
• Browsers powerful tools, just viewers නෙමෙයි
• Developer Tools (DevTools) any website inspect කරන්න let කරනවා

📝 Mini Quiz