Course එකට ආපසු

Replit Alternative

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

Replit Alternative

Replit different approach එකක් offer කරනවා — AI assistance ලැබෙනකොටම actual code දකින්න පුළුවන්. මේ powerful alternative explore කරමු.

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

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

  • v0.dev ට compare කළොත් Replit offer කරන්නේ මොනවද තේරුම් ගන්න පුළුවන් වෙයි
  • Replit account setup කරන්න පුළුවන් වෙයි
  • AI assistance එක්ක first project create කරන්න පුළුවන් වෙයි
  • Replit vs v0.dev use කරන්න ඕන කවද්ද දැනගන්න පුළුවන් වෙයි

v0.dev vs Replit

v0.dev
Replit
AI complete UI generate කරනවා
Full coding environment + AI
Code default hidden
Code හැමඑකම දකින්න පුළුවන්
Understand නොකර create කරන්න
Create කරනකොට ඉගෙන ගන්න
Browser only
Browser + Mobile app
React/Next.js focused
Any language/framework
Instant UI results
More control, more learning

Each එකක් Choose කරන්නේ කවදද

Decision Guide

Replit choose කරන්න:

  • Code දකින්න, understand කරන්න ඕන වෙනකොට
  • Things work කරන විදිය ඉගෙන ගන්න ඕන වෙනකොට
  • Mobile app use කරන්න ඕන වෙනකොට
  • Different programming languages try කරන්න ඕන වෙනකොට

v0.dev choose කරන්න:

  • Fastest visual results ඕන වෙනකොට
  • Code බලන්න ඕන නැති වෙනකොට
  • Specifically React/Next.js components ඕන වෙනකොට
  • Syntax ඉගෙන නොගෙන create කරන්න ඕන වෙනකොට

Step 1: Replit ගන්න

✅ Replit Setup

0/4

Mobile Users

Replit එකට dedicated mobile app එකක් තියෙනවා! On the go coding වලට ඔයාගේ app store එකේ "Replit" search කරන්න.

Step 2: ඔයාගේ First Repl Create කරන්න

"Repl" එකක් Replit project එකක්. Create කරන්නේ මෙහෙම:

✅ Repl එකක් Create කරන්න

0/4

Step 3: Interface එක Understanding

Text

Key Areas:

  • Files panel — ඔයාගේ project files හැමඑකම බලන්න
  • Code editor — Code write කරලා edit කරන්න
  • Preview — ඔයාගේ webpage live බලන්න
  • AI Assistant — AI help ගන්න
  • Run button — ඔයාගේ code execute කරන්න

Step 4: Files Understanding

Every HTML/CSS/JS project එකට main files තුනක් තියෙනවා:

FilePurposeAnalogy
index.htmlStructureSkeleton/bones
style.cssAppearanceClothes/skin
script.jsBehaviorBrain/muscles

Trinity එක මතකද?

Module 3 එකෙන් Web Trinity එක action එකේ!

  • HTML = Structure
  • CSS = Style
  • JavaScript = Behavior

Step 5: Replit AI Use කරන්න

Replit එකේ built-in AI assistance තියෙනවා. Use කරන්නේ මෙහෙම:

Method 1: AI Chat

  • AI icon හෝ chat panel click කරන්න
  • ඕන දේ describe කරන්න
  • AI code suggest කරනවා හෝ changes කරනවා

Method 2: Inline AI

  • Editor එකේ type කරන්න start කරන්න
  • AI completions suggest කරනවා
  • Accept කරන්න Tab press කරන්න

Method 3: Select + Ask

  • Code select කරන්න
  • Right-click → "Ask AI"
  • Explanations හෝ modifications ගන්න

Practice: Welcome Page Create කරන්න

Replit AI use කරලා මොකක් හරි build කරමු:

Replit AI Prompt
Simple welcome page create කරන්න: - 'Welcome to My Site' large heading - මා ගැන short introduction එක්ක paragraph - 'Learn More' button එකක් - Everything page එකේ center කරන්න - Nice blue color scheme use කරන්න
ChatGPTClaude

✅ Welcome Page Exercise

0/6

Generated Code Read කරන්න

AI code generate කළාට පස්සේ, moment එකක් එක බලන්න:

index.html එකේ:

HTML
<h1>Welcome to My Site</h1>
<p>This is my introduction...</p>
<button>Learn More</button>

style.css එකේ:

CSS
body {
  text-align: center;
  background-color: #e3f2fd;
}
h1 {
  color: #1565c0;
}

Learning Advantage එක

v0.dev මෙන් නොව, Replit exactly මොන code එකක් ඔයාගේ design create කළාද පෙන්වනවා. Code read කරලා understand කරන්න gradually ඉගෙන ගන්නේ මෙහෙම!

ඔයාගේ Replit Project Share කරන්න

ඔයාගේ creation share කරන්න:

  1. Run click කරන්න (project run වෙනවද check කරන්න)
  2. Preview panel header බලන්න
  3. Expand/external link icon click කරන්න
  4. URL copy කරන්න (format: projectname.username.repl.co)

ඔයාගේ Live URL

ඔයාගේ Replit project එකට URL එකක් ලැබෙනවා:

https://my-first-page.yourname.repl.co

මේ link එක තියෙන ඕනෑම කෙනෙකුට ඔයාගේ creation බලන්න පුළුවන්!

Quick Comparison Summary

ඕන නම්...Use කරන්න...
Fastest visual UI creationv0.dev
Code එකෙන් see කරලා learn කරන්නReplit
Coding වලට mobile appReplit
React componentsv0.dev
Multiple language supportReplit
Pure no-code experiencev0.dev

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

ඉගෙන ගත්ත දේ:

  1. Replit code හැමඑකම show කරනවා (learning වලට great)
  2. Files තුනක් web project එකක් හදනවා: HTML, CSS, JS
  3. Replit AI ට ඔයාට code generate කරලා modify කරන්න පුළුවන්
  4. Speed එකට v0.dev choose කරන්න, learning වලට Replit

Both Valid

v0.dev සහ Replit අතරේ "wrong" choice එකක් නැහැ. Different purposes වලට different tools.

ඔයාගේ current goal එකට best work කරන එක use කරන්න!

📝 Quick Quiz

📝 Quiz

1/3

What does Replit show that v0.dev hides by default?

➡️ Next Lesson

දැන් tools දෙකම දන්නවා! Next lesson එකේ, AI prompts only use කරලා complete, shareable website එකක් build කරන්න everything together put කරනවා!