← Inapoi la Ghid
Pasul 7 din 7 · Referinta

Invata Mai Departe

Ai construit un site real cu AI. Acum hai sa intelegem ce ai facut de fapt — si unde poti merge mai departe daca vrei.

7.1 Deschide capota: ce ai construit de fapt?

Site-ul tau e facut din trei "ingrediente". Le-ai folosit deja — acum hai sa le dam nume:

Structura
HTML
Defineste CE apare pe pagina: titluri, texte, imagini, link-uri
Design
CSS
Defineste CUM arata: culori, fonturi, spatiere, layout
Interactivitate
JavaScript
Defineste CE FACE: animatii, butoane, logica

Site-ul tau foloseste HTML + CSS. JavaScript e optional si mai avansat — nu ai nevoie de el deocamdata.

Ca sa intelegi mai usor, gandeste-te asa:

Trei analogii pentru HTML, CSS si JavaScript
SITE WEB = HTML (structura) + CSS (design) + JS (interactivitate) = Oase + Piele/Haine + Muschii = Caramizi + Vopsea/Mobila + Instalatii electrice = Cuvinte + Stil vizual + Actiuni

Stiai? Absolut TOATE site-urile din lume folosesc HTML, CSS si JavaScript. De la Google la Instagram la site-ul scolii tale. E acelasi fundament pe care l-ai folosit si tu.

7.2 HTML in 5 minute

HTML inseamna "HyperText Markup Language". Suna complicat, dar e doar un sistem de etichete (tags) care spun browserului ce sa afiseze:

Cele mai comune tag-uri HTML
<h1>Titlu mare</h1> <p>Un paragraf de text.</p> <img src="poza.jpg" alt="descriere"> <a href="https://link.com">Click aici</a> <!-- Asta e un comentariu - browserul il ignora -->

Cam asta e tot, in esenta:

Fiecare tag se deschide (<tag>) si se inchide (</tag>). Ca niste paranteze. Atat.

Exercitiu rapid: Deschide fisierul index.html al site-ului tau in Notepad++. Cauta tag-urile de mai sus. Le vei recunoaste imediat. Acum stii ce face fiecare!

7.3 CSS in 5 minute

CSS inseamna "Cascading Style Sheets". E limbajul care face lucrurile frumoase. Logica e simpla: selectezi un element, ii dai proprietati.

Cum functioneaza CSS
/* Selectezi elementul, ii dai proprietati */ h1 { color: blue; /* culoarea textului */ font-size: 2rem; /* marimea */ text-align: center; /* alinierea */ } body { background: #0a0a12; /* culoarea de fundal */ font-family: 'Inter'; /* fontul */ }

Asta e esenta CSS-ului: culori, marimi, pozitionare. Tot ce vezi ca "arata bine" pe un site e CSS.

Exercitiu rapid: In fisierul tau index.html, cauta cuvantul "color" sau "background". Schimba o valoare (ex: schimba o culoare), salveaza, si da refresh. Ai modificat CSS-ul!

7.4 Resurse gratuite recomandate

In Romana

Exercitii practice de programare, inclusiv HTML. Probabil il stii deja de la ora de informatica.
Gratuit Romana
Referinta rapida cu exemple pe care le poti testa live in browser. Are si sectiuni in romana.
Gratuit Partial Romana

In Engleza (cu subtitrari)

Cel mai mare curs gratuit de web development din lume. Primesti si certificat la final. Incepe cu "Responsive Web Design".
Gratuit + Certificat Engleza
Documentatia oficiala de la Mozilla (cei care fac Firefox). E ca un dictionar complet al web-ului.
Gratuit Engleza

Video

Maestrul CSS-ului. Explica totul vizual si clar. Activeaza subtitrari auto-traduse daca nu intelegi engleza bine.
Gratuit Video
Explicatii rapide "in 100 de secunde" pentru orice tehnologie. Perfect ca sa intelegi concepte noi rapid.
Gratuit Video

Practica

Experimentezi cod HTML/CSS/JS direct in browser. Nu trebuie sa salvezi fisiere, nu trebuie sa instalezi nimic.
Gratuit Engleza
Proiecte reale de recreat, cu design-ul deja facut. Tu scrii codul. Foarte bun pentru practica.
Gratuit (partial) Engleza

Instrumente AI pentru web development

Editor de cod cu AI integrat. Scrii ce vrei in limba romana, AI-ul scrie codul. Urmatorul nivel dupa ce ai construit cu ChatGPT.
Gratuit (limitat)
Descrii o componenta web si AI-ul o genereaza vizual. Perfect pentru a invata cum arata codul profesional.
Gratuit (limitat)
Genereaza site-uri complete din descriere text. Similar cu ce ai facut tu, dar cu o interfata dedicata.
Gratuit (limitat)

7.5 Ce urmeaza?

Ai parcurs un drum mai mare decat crezi. Iata cum arata progresul in web development:

Ai facut un site cu AI
Esti AICI. Ai un site live pe internet. Bravo!
Inveti sa modifici codul manual
Schimbi culori, texte, marimi direct in HTML/CSS
Inveti CSS pentru design personalizat
Creezi layout-uri, animatii, design responsive de la zero
Inveti JavaScript pentru interactivitate
Butoane care fac ceva, formulare inteligente, efecte dinamice
Inveti un framework (React, Vue)
Construiesti aplicatii complexe, nu doar pagini statice
Construiesti aplicatii web complete
Cont de utilizator, baza de date, plati online — orice

Important: Pasul 1 e cel mai greu si l-ai facut deja. Ai un site live pe internet. Restul vine natural, cand ai nevoie. Nu trebuie sa inveti totul acum — fiecare pas vine la timpul lui.

7.6 Un ultim sfat

Nu trebuie sa stii totul ca sa faci lucruri valoroase.

Lumea s-a schimbat. AI-ul e un instrument — la fel ca un calculator, o imprimanta, sau un telefon. Nu e "trisa" sa il folosesti. E inteligenta.

Cei care invata sa foloseasca AI-ul eficient au un avantaj imens. Nu pentru ca AI-ul face totul — ci pentru ca ei stiu ce sa ceara si cum sa verifice rezultatul.

Tu ai facut deja primul pas. Ai transformat o idee intr-un site real, publicat pe internet, pe care il poate accesa oricine din lume. Asta nu e putin lucru.

Felicitari! Ai terminat ghidul complet.

Ai construit un site web profesional pentru afacerea familiei tale. Ai folosit AI ca un profesionist, ai publicat online, si ai un link pe care il poti arata oricui. Asta e viitorul — si tu esti deja in el.

☑ Checkpoint final

Inteleg ce sunt HTML, CSS si JavaScript
Am explorat cel putin o resursa din lista
Am incercat sa modific ceva manual in codul site-ului
Stiu ca pot cere AI-ului orice imbunatatire, oricand