#html#css#web#proiect

Cum să creezi un site personal pentru elevi

Un ghid prietenos prin care îți construiești primul site personal cu HTML și CSS: structură, stil și o secțiune de proiecte. Cod complet, gata de copiat.

Echipa ByteSchool21 mai 2026 8 min

Un site personal e cartea ta de vizită online: aici pui cine ești, ce înveți și ce proiecte ai făcut. E și cel mai bun mod de a învăța HTML și CSS, pentru că vezi imediat rezultatul în browser. Hai să construim unul de la zero.

De ce HTML și CSS?

HTML dă structura paginii: titluri, paragrafe, liste, link-uri.
CSS dă aspectul: culori, fonturi, spațieri, aranjare.

Nu ai nevoie de niciun program special. Un editor de text (de exemplu VS Code) și un browser sunt suficiente. Creează un fișier numit index.html și deschide-l cu browserul.

Pasul 1: scheletul paginii

Orice pagină pornește de la aceeași structură.

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Maria Popescu</title>
</head>
<body>
  <h1>Salut, sunt Maria!</h1>
  <p>Elevă în clasa a X-a, pasionată de programare.</p>
</body>
</html>

<head> conține informații despre pagină (titlul din tab, codarea caracterelor), iar <body> conține tot ce se vede. lang="ro" și charset="UTF-8" asigură afișarea corectă a diacriticelor.

Pasul 2: secțiunile importante

Un site personal are de obicei trei zone: prezentare, proiecte și contact. Le marcăm cu <section>.

<section id="despre">
  <h2>Despre mine</h2>
  <p>Învăț Python și web. Îmi place să rezolv probleme.</p>
</section>

<section id="proiecte">
  <h2>Proiectele mele</h2>
  <ul>
    <li>Calculator de medii în Python</li>
    <li>Joc de ghicit numere</li>
  </ul>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Scrie-mi pe <a href="mailto:maria@exemplu.ro">email</a>.</p>
</section>

Atributul id ne ajută mai târziu să stilizăm sau să facem link-uri către o secțiune anume.

Pasul 3: adăugăm stil cu CSS

Punem stilul în <head>, între etichete <style>. Iată un design simplu și curat.

<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 700px;
    margin: 0 auto;
    padding: 24px;
    color: #1a1a1a;
    line-height: 1.6;
  }
  h1 {
    color: #2563eb;
  }
  section {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 24px;
  }
  a {
    color: #2563eb;
  }
</style>

Câteva idei cheie:

max-width + margin: 0 auto centrează conținutul și îl face lizibil pe ecrane mari.
line-height: 1.6 dă aer textului.
Culorile sunt scrise în cod hexazecimal (#2563eb e un albastru).

Pasul 4: un meniu de navigare

Ca să sari rapid între secțiuni, adaugă un meniu chiar sub <h1>.

<nav>
  <a href="#despre">Despre</a> |
  <a href="#proiecte">Proiecte</a> |
  <a href="#contact">Contact</a>
</nav>

Link-urile care încep cu # duc la secțiunea cu id-ul respectiv din aceeași pagină.

Pasul 5: o poză de profil și un buton

Un site prinde viață cu o imagine și un element pe care vrei să dai click. Imaginile se adaugă cu <img>, iar butoanele le putem stiliza frumos.

<img src="poza.jpg" alt="Poza mea" width="120">

<a href="cv.pdf" class="buton">Descarcă CV-ul</a>

<style>
  img {
    border-radius: 50%;  /* o face rotundă */
  }
  .buton {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
  }
  .buton:hover {
    background: #1d4ed8;
  }
</style>

Câteva idei noi aici: atributul alt descrie imaginea pentru cititoarele de ecran și pentru cazul în care poza nu se încarcă. border-radius: 50% transformă o imagine pătrată într-un cerc. Iar .buton:hover schimbă culoarea când treci cu mouse-ul peste buton — un mic detaliu care face site-ul să pară profesionist.

Cum faci site-ul să arate bine pe telefon

Majoritatea oamenilor îți vor deschide site-ul de pe telefon. Adaugă această linie în <head> ca pagina să se potrivească ecranelor mici:

<meta name="viewport" content="width=device-width, initial-scale=1">

Fără ea, telefonul ar afișa pagina micșorată, ca pe un desktop. Cu max-width pe body (pe care l-am pus deja) și cu această linie, site-ul tău arată bine pe orice ecran.

Sfat: păstrează totul într-un singur fișier la început. Când site-ul crește, mută CSS-ul într-un fișier separat style.css și leagă-l cu <link rel="stylesheet" href="style.css">.

Cum îl pui online gratuit

Serviciu	Bun pentru
GitHub Pages	site-uri statice, gratuit
Netlify	publicare cu drag and drop
Vercel	proiecte mai mari, ușor de folosit

Cel mai simplu: urci fișierele pe GitHub și activezi GitHub Pages — în câteva minute ai un link pe care îl poți trimite oricui.

Concluzie

Cu câteva etichete HTML și un strop de CSS ai deja un site personal real. De aici poți adăuga imagini, animații și pagini noi. Important e că ai pornit și vezi rezultatul cu ochii tăi.

La ByteSchool îți arătăm cum să duci astfel de proiecte mai departe, pas cu pas, alături de mentori care lucrează în Big Tech și care construiesc site-uri folosite zilnic de milioane de oameni.