Course එකට ආපසු

ඔයාගේ First Local File

20 මිනිත්තු🏋️Activity

Your First Local File (ඔයාගේ පලවෙනි Local ෆයිල් එක)

දැන් tools ටික ready නිසා, local development loop එක experience කරමු!

Local Development වැඩ කරන විදිහ

Text
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  1. ෆෝල්ඩරයක් හදලා VS Code එකෙන් ඕපන් කරනවා                 │
│                     ↓                                       │
│  2. කෝඩ් එක ලියනවා / වෙනස් කරනවා                            │
│                     ↓                                       │
│  3. සේව් කරනවා (Ctrl/Cmd + S)                               │
│                     ↓                                       │
│  4. Live Server එකෙන් ඉබේම බ්‍රව්සර් එක Refresh වෙනවා       │
│                     ↓                                       │
│  5. වෙනස්කම් එවලෙම බලාගන්නවා!                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Cloud එකට වඩා වෙනස

Upload කරන්න ඕනේ නෑ, ඉන්ටර්නෙට් ඕනේ නෑ, refresh කර කර ඉන්න ඕනේ නෑ — ක්ෂණිකයි!

පියවර 1: Project Folder එක හදමු

Windows
# Windows වල:
1. File Explorer (My Computer) එකට යන්න
2. Documents (හෝ Desktop) එකට යන්න
3. හිස් තැනක Right-click → New → Folder
4. නම දාන්න: vibe-coding-course

පියවර 2: VS Code එකෙන් Folder එක Open කරමු

ක්‍රමය 1: VS Code එක ඇතුලෙන්

  1. VS Code open කරන්න
  2. File → Open Folder යන්න
  3. ඔයා හදපු vibe-coding-course folder එක තෝරන්න
  4. Select Folder ඔබන්න

ක්‍රමය 2: Right-click කරලා (Windows)

  1. Folder එක ළඟට යන්න
  2. Folder එක උඩ Right-click කරන්න
  3. "Open with Code" තෝරන්න

ක්‍රමය 3: Drag and Drop

  1. VS Code open කරන්න
  2. Folder එක ඇදලා VS Code එක උඩට දාන්න

මෙහෙම පෙනුනොත් හරි:

VS Code වල වම් පැත්තේ Explorer එකේ ඔයාගේ folder නම (VIBE-CODING-COURSE) පේන්න ඕනේ.

පියවර 3: index.html හදමු

File එක හදන විදිහ:

  1. වම් පැත්තේ තියෙන ඔයාගේ folder නම උඩට mouse එක ගෙනියන්න
  2. එතන එන New File icon එක (📄) ඔබන්න
  3. නම ගහන්න: index.html
  4. Enter කරන්න

දැන් හිස් file එකක් open වෙයි.

පියවර 4: Code එක ලියමු

මේ code ටික ඔයාගේ index.html එකට type කරන්න (copy කරන්නේ නැතුව type කළොත් හොඳයි):

HTML
<!DOCTYPE html>
<html>
<head>
    <title>My First Local Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #4A90D9;
        }
        p {
            color: #666;
            line-height: 1.6;
        }
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>🎉 Hello from my computer!</h1>
    <p>This page is running locally, not in the cloud.</p>
    <p>If you can see this, your development environment is working perfectly!</p>
    
    <div class="success">
        ✅ VS Code is working<br>
        ✅ HTML files are saving<br>
        ✅ Live Server is running
    </div>
    
    <p><small>My first local development page - [ඔයාගේ නම], [දිනය]</small></p>
</body>
</html>

පොඩි වෙනසක් කරමු:

  • [ඔයාගේ නම] තියෙන තැනට ඔයාගේ නම දාන්න
  • [දිනය] තියෙන තැනට අද දිනය දාන්න

පියවර 5: Save කරමු

Ctrl + S (Windows) හෝ Cmd + S (Mac) ඔබන්න.

Save වුනාම:

  • උඩින් තිබුණු සුදු පාට dot එක නැති වෙලා යනවා
  • දැන් මේ file එක ඔයාගේ hard disk එකේ save වෙලා තියෙන්නේ

පියවර 6: Live Server එකෙන් බලමු

Open කරන විදිහ:

  1. Code එකේ ඕනම තැනක Right-click කරන්න
  2. "Open with Live Server" තෝරන්න

මොකද වෙන්නේ:

  1. ඔයාගේ browser එක open වෙනවා
  2. http://127.0.0.1:5500/index.html තැන ඔයාගේ page එක පෙනෙයි
  3. ඔයා ලියපු දේවල් ලස්සනට පෙනෙයි!

මේ numbers වලින් කියන්නේ මොකක්ද?

Text
http://127.0.0.1:5500/index.html
│    │           │    │
│    │           │    └── ඔයාගේ file එක
│    │           └── Port number (Live Server දුවන තැන)
│    └── 127.0.0.1 කියන්නේ "මේ computer එක" (localhost)
└── Protocol

දැන් ඔයාගේ machine එක පොඩි server එකක් වෙලා!

පියවර 7: Live Reload Magic එක

බලන්න මේකේ තියෙන ලේසිය!

මේක කරලා බලන්න:

  1. Browser එකයි VS Code එකයි දෙකම පේන්න තියාගන්න (පැත්තෙන් පැත්තට)
  2. VS Code එකට ගිහින් <h1> එක වෙනස් කරන්න:
HTML
<h1>🎉 This updates automatically!</h1>
  1. Save කරන්න (Ctrl/Cmd + S)
  2. Browser එක දිහා බලන්න — ඔයා save කරන පමන්ට එතන මාරු වෙනවා!

Live Reload

Refresh button එක ඔබ ඔබ ඉන්න ඕනේ නෑ. මේකට තමයි Live Reload කියන්නේ.

Development Loop

මෙතන ඉඳන් අපි දිගටම වැඩ කරන්නේ මෙහෙමයි:

Text
කෝඩ් ලියනවා → සේව් කරනවා → වෙනස්කම් බලනවා → ආයේ ලියනවා...

මේක මාර වේගවත්. වැඩ්ඩො වැඩ කරන්නෙත් මෙහෙමයි.

File Structure

දැන් ඔයාගේ project එක මෙහෙමයි:

Text
vibe-coding-course/
└── index.html        ← ඔයාගේ පලවෙනි file එක!

පස්සේ කාලෙක අපි මේ වගේ ලොකු ඒවා හදනවා:

Text
vibe-coding-course/
├── index.html        ← ප්‍රධාන පිටුව
├── about.html        ← තව පිටුවක්
├── css/
│   └── style.css     ← Styles
├── js/
│   └── script.js     ← JavaScript
└── images/
    ├── logo.png
    └── hero.jpg

පොඩි අත්හදා බැලීම් (Experiments)

ඉස්සරහට යන්න කලින් මේවා කරලා බලන්න:

Live Server එක නවත්තන්න

වැඩේ ඉවර නම්:

  1. VS Code එකේ පහලම තියෙන නිල් පාට bar එක බලන්න
  2. "Port: 5500" කියන එක උඩ click කරන්න
  3. එතකොට server එක නවතිනවා

නැත්නම් නිකන්ම VS Code එක close කරන්න.

Cloud vs Local Comparison

Cloud (Course 1)
Local (Course 2)
Browser → Cloud → Result
Machine → Instant Result
Files on their servers
Files on YOUR machine
Their URL
YOUR local server (for now)

Activity Checklist

✅ First Local File Complete

0/8

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

ඔයා කරපු දේවල්:

  • ✅ Project folder එකක් හැදුවා
  • ✅ ඒක VS Code එකෙන් open කළා
  • ✅ පලවෙනි HTML file එක හැදුවා
  • ✅ Live Server දාලා ඒක බැලුවා
  • ✅ Save කරනකොටම වෙනස් වෙන හැටි (Live Reload) දැක්කා

සුබ පැතුම්!

ඔයා දැන් නිල වශයෙන් Local Developer කෙනෙක්!

ඊළඟ පාඩම

මොනවා හරි අවුල් ගියාද? ප්‍රශ්න විසඳගන්න හැටි troubleshooting guide එකෙන් බලමු.