🟦NIVEL 0

Zero Hero

N-ai construit niciodată un website. Perfect. Pornim de la zero absolut.

🎯 XP la finalizare: 120•🏅 Badge deblocat

 

 

🟦 Regulile arcade-ului

Înainte să atingi o tastatură, ai nevoie de trei convingeri care separă oamenii care construiesc de cei care doar privesc.

• Nu vei memora nimic. Vei căuta lucrurile. Google și ChatGPT sunt colegii tăi de programare.

• Întâi copiezi, apoi înțelegi, apoi inventezi. Orice profesionist a început prin a copia.

• Termini urât înainte să faci frumos. Un site urât dar gata bate de fiecare dată o idee perfectă.

 

Lecția 1 • Ce este, de fapt, un website?

Un website e doar un folder de fișiere pe care un browser le descarcă și le citește. Nu e nicio magie. Există exact trei tipuri de fișiere care contează pentru ce vom construi:

Tip de fișier	Ce face (pe înțelesul tuturor)
HTML (.html)	Scheletul. Spune: aici e un titlu, aici e un buton, aici e o imagine.
CSS (.css)	Pielea. Spune: fă titlul albastru, 40 de pixeli înălțime, centrat.
JavaScript (.js)	Mușchii. Spune: când cineva apasă butonul, deschide meniul.

 

Vestea bună: uneltele AI scriu acum toate trei pentru tine. Tu descrii ce vrei în cuvinte; unealta scrie fișierele. Rolul tău devine director creativ, nu dactilograf.

 

Lecția 2 • Ce face AI-ul pentru noi?

Sunt patru moduri în care AI-ul ajută un web designer modern. Le vei atinge pe toate patru în acest curs.

Rolul AI	Cum arată în practică
Generează cod	Scrii: 'fă-mi o landing page întunecată cu un buton hero care pulsează'. Lovable / v0 / Bolt / Cursor scriu codul.
Generează design	Scrii: 'schițează un portofoliu în 3 secțiuni'. Relume / Figma AI îl desenează.
Generează conținut	Scrii: 'scrie o pagină principală pentru o cafenea'. ChatGPT / Claude / Gemini o scriu.
Generează asset-uri	Scrii: 'o boabă de cafea 3D zburând pe fundal negru'. Spline / Runway / Midjourney o creează.

 

Nu concurezi cu AI-ul. Înveți să-l dirijezi. Câștigă persoana cu cel mai bun gust și cel mai clar prompt.

 

Lecția 3 • Ce este animația și de ce contează?

Animația e orice schimbare vizuală în timp. Un buton care crește când treci cu mouse-ul peste el. Un logo care plutește. Text care apare literă cu literă. Un obiect 3D care se rotește pe măsură ce dai scroll.

Animația contează pentru că îi spune vizitatorului: acest site e viu, modern și îngrijit. În 2026, un website static pare un televizor alb-negru. Oamenii tot îl observă, dar nu într-un mod bun.

 

Lecția 4 • Trusa ta de începător, creează aceste 10 conturi gratuite

Înainte de Nivel 1, ai nevoie de conturi. Alocă 20 de minute. Folosește același email peste tot. Salvează parolele într-un password manager (Bitwarden e gratuit).

Cont	De ce ai nevoie de el
1. Google (Gmail)	Totul se loghează cu Google. Fă-ți un email de brand dedicat, ex. modvia.numeletau@gmail.com.
2. ChatGPT (chatgpt.com)	Creierul tău de zi cu zi pentru scris + prompturi.
3. Claude (claude.ai)	Gândire mai lungă, mai inteligentă + ajutor la cod.
4. Google AI Studio	Acces gratuit la Gemini, excelent pentru vision + tier gratuit generos.
5. Figma (figma.com)	Unealtă de design. Locul unde planifici înainte să construiești.
6. Lovable (lovable.dev)	AI care construiește website-uri complete din prompturi.
7. v0 (v0.dev)	AI care construiește componente React din prompturi.
8. Framer (framer.com)	Builder de website-uri animate fără cod.
9. GitHub (github.com)	Locul unde stă codul tău. Chiar dacă nu scrii cod, îți va trebui pentru deploy.
10. Vercel (vercel.com)	Locul unde website-urile tale devin live. Gratuit pe veci pentru site-uri personale.

 

Nu plăti nimic încă. Tier-urile gratuite sunt suficiente ca să termini acest curs.

 

Lecția 5 • Vocabularul tău de începător (salvează asta la favorite)

Vei auzi aceste cuvinte constant. Învață-le o dată și restul cursului devine ușor.

Cuvânt	Înțeles simplu
Hero	Secțiunea mare de sus a unei pagini. Primul lucru pe care îl văd vizitatorii.
Section	Un bloc pe pagină. O pagină principală are de obicei 4–6.
Hover	Când mouse-ul e deasupra unui element (fără click).
Viewport	Partea vizibilă a ferestrei de browser.
Responsive	Arată bine pe telefon, tabletă și laptop.
Breakpoint	O dimensiune de ecran la care layout-ul se schimbă.
Component	O piesă reutilizabilă a unui site (buton, card, nav).
Deploy	Publici site-ul online ca să-l vadă lumea.
Domain	Adresa, modvia.com, numeletau.dev.
Hosting	Computerul pe care stă site-ul tău (Vercel, Netlify etc.).
Repo (repository)	Un folder de proiect urmărit de GitHub.
Commit	Un snapshot salvat al proiectului tău.
Prompt	Instrucțiunea pe care i-o dai unui AI.
Token	O bucată mică de text pe care o vede AI-ul. Prompturile lungi costă mai mulți tokeni.
Easing	'Senzația' unei mișcări, start lent, elastică, cu bounce.
Parallax	Fundalul se mișcă mai lent decât prim-planul, iluzie de profunzime.
Lottie / Rive	Formate de fișier pentru animații interactive.
3D model	Un fișier de obiect tridimensional (adesea .glb sau .gltf).
WebGL / Three.js	Tehnologia care randează 3D în interiorul unui browser.

 

Lecția 6 • Scrie primul tău prompt, formula în 5 linii

Un prompt slab îți dă un website slab. Un prompt puternic te duce 80% din drum. Folosește acest șablon de fiecare dată când vorbești cu o unealtă AI.

 

Asta e tot. Rol, Obiectiv, Stil, Secțiuni, Constrângeri. Ține minte aceste cinci cuvinte.

 

🎯 Pachetul de quest-uri Nivel 0

Termină aceste trei quest-uri în ordine înainte să treci la Nivel 1. Sunt mici intenționat, ideea e să apeși butonul de start al carierei tale.

 

 

 

 

---