Devino MembruProgramează o lecție
Înapoi la blog
#web#HTML#CSS#JavaScript

Dezvoltare Web (HTML, CSS, JS) pentru liceeni: cum să-ți faci primul site

Ce fac HTML, CSS și JavaScript, cum construiești pas cu pas primul tău site și cum îl publici gratuit pe internet cu GitHub Pages. Pe înțelesul tău.

Echipa ByteSchool 9 min

Ai intrat azi pe zeci de site-uri fără să te gândești cum sunt făcute. Vestea bună? Poți construi și tu unul chiar săptămâna asta, doar cu un browser și un editor de text. Hai să vedem cum funcționează web-ul și cum îți faci primul tău site, de la zero până online.

Cele trei limbaje ale web-ului

Orice pagină web stă pe trei piloni. Fiecare are un rol clar, iar împreună fac magia:

LimbajRolAnalogie
HTMLstructura și conținutulscheletul casei
CSSaspectul și stilulvopseaua și mobila
JavaScriptinteractivitateaelectricitatea și butoanele

Dacă ții minte un singur lucru, ține minte asta: HTML zice ce e pe pagină, CSS zice cum arată, JS zice ce se întâmplă când dai click.

HTML — scheletul paginii

HTML (HyperText Markup Language) e felul în care spui browserului ce conținut are pagina: titluri, paragrafe, imagini, butoane. Folosești etichete (tags) scrise între paranteze unghiulare.

Iată o pagină completă, minimală:

<!DOCTYPE html>
<html lang="ro">
  <head>
    <meta charset="UTF-8" />
    <title>Primul meu site</title>
  </head>
  <body>
    <h1>Salut, lume!</h1>
    <p>Acesta este primul meu site web.</p>
    <button id="butonul-meu">Apasă-mă</button>
  </body>
</html>

Ce se întâmplă aici:

  1. <!DOCTYPE html> îi spune browserului că folosim HTML modern.
  2. <head> ține informații despre pagină (titlul din tab, setul de caractere).
  3. <body> ține tot ce se vede pe ecran: titlul <h1>, paragraful <p> și un <button>.

Salvează asta într-un fișier numit index.html și deschide-l cu browserul. Felicitări — ai deja o pagină web!

CSS — îi dai stil

Pagina de mai sus arată cam tristă: text negru pe fundal alb. CSS (Cascading Style Sheets) schimbă asta. Cu CSS alegi culori, fonturi, spațieri și aranjezi elementele.

Adaugă în <head>, înainte de </head>, o legătură către un fișier de stil:

<link rel="stylesheet" href="style.css" />

Apoi creează style.css lângă index.html:

body {
  font-family: system-ui, sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  text-align: center;
  padding: 40px;
}

h1 {
  color: #38bdf8;
}

button {
  background-color: #38bdf8;
  color: #0f172a;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

Reîncarcă pagina. Acum ai fundal închis, un titlu albastru și un buton care arată ca un buton adevărat. Fiecare regulă CSS are forma selector { proprietate: valoare; } — alegi ce stilizezi și cum.

JavaScript — pagina prinde viață

Butonul nostru arată bine, dar nu face nimic când dai click. Aici intră JavaScript, singurul dintre cele trei care e un limbaj de programare adevărat: are variabile, decizii, bucle și poate reacționa la acțiunile tale.

Adaugă înainte de </body> o legătură către un fișier de script:

<script src="script.js"></script>

Apoi creează script.js:

const buton = document.getElementById("butonul-meu");
let apasari = 0;

buton.addEventListener("click", function () {
  apasari = apasari + 1;
  buton.textContent = "Ai apăsat de " + apasari + " ori";
});

Ce se întâmplă:

  1. document.getElementById(...) găsește butonul după id-ul lui.
  2. addEventListener("click", ...) zice "când se dă click, execută codul ăsta".
  3. La fiecare click creștem un contor și schimbăm textul butonului.

Trei fișiere mici și ai un site care arată bine și reacționează la tine. Asta e tot web-ul, la scară mică.

Pașii pentru primul tău site

Nu trebuie să le faci pe toate deodată. Mergi în ordine:

  • Creează un folder pentru proiect, de exemplu primul-site.
  • Scrie HTML-ul în index.html — structura și conținutul.
  • Adaugă CSS în style.css — culori și aranjament.
  • Adaugă JS în script.js — interacțiunea.
  • Testează des — deschide pagina în browser după fiecare schimbare ca să vezi efectul.

Cel mai bun mod de a învăța web nu e să citești, ci să strici. Schimbă o culoare, mută un buton, rupe ceva și repară. Fiecare greșeală te învață mai mult decât zece tutoriale citite pasiv.

Cum îți publici site-ul gratuit cu GitHub Pages

Un site pe calculatorul tău îl vezi doar tu. Ca să-l vadă prietenii, trebuie să-l pui online. Cel mai simplu mod gratuit e GitHub Pages.

  1. Fă-ți cont pe github.com — e gratuit.
  2. Creează un repository nou (un "depozit" pentru fișiere), de exemplu primul-site, și bifează Public.
  3. Încarcă fișierele index.html, style.css și script.js (poți trage fișierele direct în pagina repository-ului).
  4. Intră în Settings → Pages, la secțiunea Branch alege main și folderul / (root), apoi apasă Save.
  5. Așteaptă un minut și GitHub îți va da un link de forma:
https://numele-tau.github.io/primul-site/

Gata — site-ul tău e pe internet, accesibil oricui de oriunde. Îl poți trimite colegilor sau îl poți pune în CV.

Concluzie

Web-ul pare complicat din afară, dar la bază sunt doar trei limbaje care colaborează: HTML pune structura, CSS dă aspectul, iar JavaScript aduce interactivitatea. Cu un editor de text și un cont gratuit de GitHub poți avea primul tău site online azi.

La ByteSchool înveți dezvoltare web pas cu pas, de la prima etichetă HTML până la aplicații interactive adevărate, alături de mentori care construiesc produse reale în companii din tech. Începem de la zero și nu sărim peste fundamente — exact ca în ghidul de mai sus, doar că lângă cineva care îți răspunde la întrebări.