Primul tău site, de la mesaj la link

Ce vei face: vei construi cu Claude site-ul unei cafenele, de la un dosar gol până la un link pe care îl deschizi pe telefon și îl trimiți unui prieten. Tu nu scrii cod: tu răspunzi la întrebări, alegi și verifici. Timp: 30–45 de minute. Ai nevoie de: Claude Code instalat și conectat la contul tău (modulul 00), cu abonamentul Claude Pro. Pe parcurs îți mai faci un cont gratuit pe Vercel, serviciul care ține site-ul pe internet.

Cafeneaua poate fi inventată sau una reală din orașul tău. Dacă e reală, folosește doar informații pe care le vede oricine: numele, adresa, programul.

Pașii

1. Fă un dosar gol și pornește Claude în el. Deschide terminalul (Mac: Cmd+Space, scrii „Terminal”; Windows: „PowerShell”). Scrie, pe rând, apăsând Enter după fiecare:

   mkdir cafenea
   cd cafenea
   claude
   

   mkdir face un dosar nou, cd intră în el, iar claude pornește Claude Code acolo. Ce ar trebui să vezi: ecranul de bun venit al lui Claude Code și locul unde scrii.

2. Lasă-l să te întrebe înainte să înceapă. E trucul din modulul 01: în loc să ghicească, Claude află de la tine ce-i trebuie. Trimite (semnul > arată unde scrii; nu-l copia):

   > Vreau să construiesc site-ul de o singură pagină al unei cafenele.
     Înainte să începi, pune-mi întrebările de care ai nevoie, câte una pe rând.
     Nu scrie niciun fișier până nu-ți spun „începe”.
   

   Ce ar trebui să vezi: Claude te întreabă, de exemplu, cum se numește cafeneaua, unde e, ce program are, ce e în meniu și cum o contactează clienții. Răspunde scurt, cu ce știi. Unde nu știi, scrie „alege tu”.

3. Spune-i să construiască. Când a terminat de întrebat, scrie:

   > Începe. Un singur fișier, index.html, cu tot stilul în el, fără biblioteci și fără poze.
     Trebuie să arate bine mai ales pe telefon. Butonul de rezervare deschide WhatsApp,
     iar numărul de telefon se poate apăsa ca să suni.
   

   Ce ar trebui să vezi: Claude îți arată fișierul pe care vrea să-l creeze și îți cere voie. Aprobi. La final, în dosarul cafenea apare fișierul index.html.

4. Deschide site-ul pe calculator.

   > Deschide-mi index.html în browser.
   

   Ce ar trebui să vezi: Claude cere voie să ruleze o comandă (de exemplu open pe Mac sau start pe Windows), apoi site-ul se deschide în browser. Fă fereastra browserului îngustă, cât un telefon, și uită-te cum se așază.

5. Corectează ce nu-ți place. Uită-te ca un client al cafenelei și cere una sau două schimbări, pe rând. De exemplu:

   > Titlul e prea mic pe telefon. Și pune programul imediat sub titlu, nu la final.
   

   După fiecare schimbare, reîncarcă pagina în browser (F5, sau Cmd+R pe Mac). Ce ar trebui să vezi: Claude modifică doar ce i-ai cerut și îți cere voie înainte.

6. Pune-l pe Claude să verifice înainte să publici.

   > Verifică singur site-ul înainte să-l publicăm: linkul de WhatsApp și cel de telefon
     au formatul corect? Se citește bine pe un ecran de telefon? Lipsește ceva ce ar
     căuta un client? Spune-mi ce ai găsit, apoi repară.
   

   Ce ar trebui să vezi: o listă scurtă cu ce a verificat și ce a reparat. Dacă spune că totul e în regulă, întreabă-l „cum ai verificat?”. Așa afli dacă s-a uitat cu adevărat.

7. Verifică dacă ai Node.js. Vercel se publică dintr-un mic program care are nevoie de Node.js. Scrie-i lui Claude:

   > Am Node.js instalat? Verifică cu node -v.
   

   Ce ar trebui să vezi: un număr de versiune, de exemplu v22.11.0. Dacă Claude spune că nu-l ai: intră pe nodejs.org, descarcă varianta LTS și instalează-o cu opțiunile implicite. Apoi închide terminalul, deschide-l din nou și scrie cd cafenea, apoi claude --continue. Așa reiei exact conversația de unde ai rămas.

8. Fă-ți cont pe Vercel și conectează-te, într-o fereastră separată. Lasă fereastra cu Claude deschisă. Deschide încă un terminal și scrie:

   npx vercel login
   

   Dacă te întreabă Ok to proceed? (y), apasă y și Enter. Se descarcă programul Vercel. Ce ar trebui să vezi: un rând care începe cu Visit, cu un link și un cod. Browserul se deschide singur, iar dacă nu, deschide tu linkul. Acolo îți faci cont gratuit (cel mai simplu, cu Google sau GitHub) și confirmi. Verifică în browser că e același cod ca în terminal. La final, terminalul scrie Congratulations!: ești conectat. Fereastra asta o poți închide.

9. Publică site-ul. Întoarce-te la Claude și scrie:

   > Publică site-ul pe Vercel, în producție, cu comanda npx --yes vercel deploy --prod --yes.
     Apoi spune-mi linkul public și verifică cu curl că se deschide fără nicio logare.
   

   Ce ar trebui să vezi: Claude cere voie să ruleze comanda. Aprobi. După cam un minut, în rezultat apare rândul Aliased, cu un link care se termină în .vercel.app. Acela e linkul public, iar Claude îți confirmă că pagina răspunde.

10. Deschide-l pe telefon. Scrie linkul în browserul telefonului sau trimite-l pe WhatsApp unui prieten. Apasă butonul de rezervare și numărul de telefon. Ce ar trebui să vezi: site-ul tău, pe internet, la fel ca pe calculator. Butonul deschide WhatsApp, iar numărul deschide apelul.

Gata, dacă

• În dosarul cafenea e un fișier index.html pe care l-a scris Claude, nu tu
• Ai cerut cel puțin o corectură și Claude a schimbat doar ce ai cerut
• Site-ul se deschide pe telefon, de la un link .vercel.app, fără să ceară logare
• Butonul de WhatsApp și numărul de telefon funcționează când le apeși

Dacă te blochezi

• Claude a început să scrie fișierul înainte să termine de întrebat. Apasă Esc ca să-l oprești și scrie-i: „Stai. Mai întâi întrebările, câte una pe rând.”
• În PowerShell apare „running scripts is disabled on this system”. Windows blochează scurtătura npx. Scrie npx.cmd vercel login în loc de npx vercel login.
• „node” sau „npx” nu e găsit, deși ai instalat Node.js. Terminalul pornit înainte de instalare nu știe încă de el. Închide toate ferestrele de terminal și deschide una nouă.
• Linkul îți cere să te loghezi la Vercel. Ai deschis linkul lung, cel care conține un șir de litere și cifre. Linkul public e cel de lângă Aliased. Dacă nu-l găsești, întreabă-l pe Claude: „Care e linkul public de producție, cel de lângă Aliased?”
• Claude spune că nu ești conectat la Vercel. Pasul 8 nu s-a terminat. Fă-l din nou, în fereastra separată, apoi cere-i lui Claude să publice iar.
• Vrei să schimbi ceva după ce l-ai publicat. Cere schimbarea, apoi „publică din nou, la fel”. Linkul rămâne același.

Bine de știut: planul gratuit Vercel e pentru proiecte personale, ca acesta. Un site făcut pentru un client care te plătește e altceva. Unde îl ții și cât costă afli în modulul 12, „Primul client”.