Site Didactic
Unități de învățare
Lecție pentru Dezvoltatori Web — Instrumente de lucru Web Development Capitol: Tooling profesional

Trusa Dezvoltatorului Web: instrumente și tehnologii de la design la deploy

Un web developer (full-stack) are capacitatea de a proiecta și de a construi aplicații web și site-uri complete. El lucrează pe front-end, back-end, bază de date și debugging, asigurând funcționalitatea, securitatea, performanța și publicarea (deploy) produsului final.

Ghid complet, orientat pe lucru real: instrumente, tehnologii și flux profesional pentru construirea și publicarea unui site web modern, cu exemple concrete și recomandări de debugging. Lecția include o „trusă” clară de instalare și un mini-proiect integrat, astfel încât studentul să poată lucra independent de la idee la producție.

Public țintăStudenți Web Development
Rezultat așteptatFlux complet „design → deploy”
FocusInstrumente concrete + exemple + pași practici
Flux de lucru Basic Framework Library Backend Database Extra cPanel (detaliat) Debugging & testare Mini-proiect Checklist

1) Fluxul profesional de lucru: de la idee la publicare

În proiecte reale nu scrii cod „la întâmplare”. Urmezi un flux predictibil care reduce erorile și accelerează livrarea: analiză → design → implementare → testare → publicare → monitorizare.

Etapă Scop Instrumente tipice
Proiectare UI/UX Machetă, prototip, reguli vizuale Figma / Adobe XD, ghid de stil, biblioteci de componente
Machetare Layout responsive, componente Bootstrap / Tailwind, grilă, pattern-uri UI
Front-end Interacțiuni, UX, consum API VS Code, DevTools, JS/React/Vue, ESLint/Prettier
Back-end Logică, securitate, autentificare PHP (Laravel), Node (Express/Nest), Python (Django/FastAPI)
Database Date, relații, performanță MySQL/SQLite/MongoDB, DBeaver/Workbench/phpMyAdmin
Versionare Istoric, colaborare, review Git + GitHub (PR, Issues, Actions)
Deploy Publicare și mentenanță cPanel, domeniu, SSL, backup, loguri
Greșeală frecventă: să sari peste design și modelarea datelor. Rezultatul este refactorizare masivă și timp pierdut.

2) BASIC (din imagine): HTML, CSS, JavaScript

Fundamentele rămân obligatorii indiferent de framework. Un proiect bun începe cu HTML corect, CSS curat și JS disciplinat.

2.1 HTML — structură, semantică, accesibilitate
  • Semantica HTML5: header/nav/main/section/article/footer.
  • Formulare: label corect, tipuri input, validări, mesaje clare pentru utilizator.
  • SEO: un singur H1 relevant, meta description, headings logice.
  • Accesibilitate: alt pentru imagini, focus vizibil, aria doar unde e necesar.

Instrumente: VS Code (Emmet), Validator HTML (W3C), Lighthouse.

<main>
  <section>
    <h1>Titlu pagină</h1>
    <article>Conținut</article>
  </section>
</main>
2.2 CSS — layout modern și responsive
  • Flexbox pentru aliniere și componente; Grid pentru layout complex.
  • Responsive: media queries + unități relative (rem, %, vw).
  • Organizare: BEM sau CSS modular pe componente.

Instrumente: Chrome DevTools, Sass/SCSS, Autoprefixer/PostCSS.

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.grid{grid-template-columns:1fr;}}
2.3 JavaScript — interacțiuni, fetch, debugging
  • DOM + evenimente, async/await, fetch + JSON.
  • Validare în client pentru UX, dar validarea finală se face în server.
  • Debugging: Console, breakpoints, Network.

Instrumente: DevTools, ESLint, Prettier, npm.

async function send(data){
  const res = await fetch('/api/contact', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify(data)
  });
  return res.json();
}

3) FRAMEWORK (din imagine): Bootstrap, Angular, Vue.js

Framework-urile accelerează dezvoltarea, dar presupun disciplină: structură, componente, build și rutare.

  • Bootstrap — grilă responsive + componente UI. Ideal pentru site-uri clasice și admin UI rapid.
  • Angular — framework complet (enterprise). Tooling: Node.js, npm, Angular CLI, TypeScript.
  • Vue.js — productiv pentru SPA. Tooling: Vite, Vue Router, Pinia.
Recomandare: Pentru începători, Bootstrap este excelent la machetare; Angular/Vue vin după fundamente.

4) LIBRARY (din imagine): jQuery, React.js

  • jQuery — întâlnit în proiecte vechi și plugin-uri legacy; util la mentenanță.
  • React.js — UI modern componentizat. Tooling: Vite/Next.js, React Router, React Hook Form, Zod/Yup, Axios.

5) BACKEND (din imagine): PHP, Python, Java, Node.js

Back-end-ul gestionează: autentificare, autorizare, validare, logică business, API, securitate, integrare DB, email, fișiere.

  • PHP — foarte răspândit pe hosting; Laravel aduce arhitectură modernă. Tooling: Composer, Artisan, loguri, teste.
  • Python — Django / FastAPI. Tooling: venv, pip.
  • Java — Spring Boot. Tooling: Maven/Gradle, JPA/Hibernate.
  • Node.js — Express/NestJS. Tooling: npm, PM2, Jest.
Regulă: orice input de la utilizator se validează în server (în plus față de validarea din UI).

6) DATABASE (din imagine): SQL, MySQL, SQLite, MongoDB

  • SQL — interogări (JOIN, indexuri) și raportare.
  • MySQL — standard pe hosting; excelent pentru aplicații web clasice.
  • SQLite — DB în fișier; bună pentru prototipare și proiecte mici.
  • MongoDB — NoSQL documente; bun pentru date flexibile și loguri.

Instrumente: DBeaver / MySQL Workbench, phpMyAdmin (cPanel), MongoDB Compass.

7) EXTRA (din imagine): Git, GitHub, cPanel, Adobe XD, Photoshop

  • Git — istoricul proiectului, ramuri, revenire la versiuni stabile.
  • GitHub — colaborare: Pull Requests, Issues, Actions.
  • Adobe XD — prototipare UI/UX și export assets (alternativ la Figma).
  • Photoshop — prelucrare imagini pentru web: redimensionare + optimizare (WebP/JPG/PNG).

8) cPanel (detaliat): administrare hosting

cPanel îți permite să publici și să administrezi site-ul: fișiere, DB, SSL, email, backup, loguri.

8.1 Module esențiale în cPanel
  • File Manager + FTP Accounts — upload, organizare, permisiuni.
  • Domains/Subdomains — domenii, subdomenii, document root.
  • MySQL Databases — creare DB + user + privilegii.
  • phpMyAdmin — import/export, verificare tabele.
  • SSL/TLS — activare HTTPS.
  • MultiPHP Manager — versiune PHP per domeniu.
  • Cron Jobs — task-uri programate.
  • Email Accounts — adrese, forwarders, filtre anti-spam.
  • Metrics/Logs — erori 500, resurse, loguri.
  • Backup — backup înainte de update.
8.2 Deploy în cPanel — 3 scenarii
  • Site static: încarci în public_html și verifici căile CSS/JS.
  • PHP clasic: configurezi DB și testezi formulare + error log.
  • Laravel: configurezi .env, permisiuni la storage/cache, document root către public/ (ideal).
Securitate: nu expune .env, folosește HTTPS și verifică permisiunile pentru directoarele de log/cache.

9) Debugging & testare

  • Front-end: DevTools (Console/Network/Performance), Lighthouse.
  • Back-end & API: Postman/Insomnia, loguri aplicație, error log (cPanel).
Metodă: Reproduci → verifici Network/Console → verifici loguri → izolezi cauza → fixezi → retestezi → commit.

10) Mini-proiect integrat (laborator)

Tema: Site „Noutăți” cu pagini publice + administrare conținut + deploy în cPanel.

  • Design: Figma/XD (Home, Listă, Detalii, Contact, Login admin)
  • Front-end: Bootstrap + JS (UI responsive, validări)
  • Back-end: Laravel (CRUD, upload, autentificare)
  • DB: MySQL (users, news, categories)
  • GitHub: repo + README + commit-uri clare
  • Deploy: cPanel (DB, SSL, configurare)
Livrabile: link site + link repo GitHub + pași de instalare/deploy în README.

11) Checklist (pregătire student)

Fișă rapidă (pentru memorare)

Recunoaște categoriile și rolul lor în proiect.

BasicHTML • CSS • JavaScript
FrameworkBootstrap • Angular • Vue
LibraryjQuery • React
BackendPHP • Python • Java • Node.js
DatabaseSQL • MySQL • SQLite • MongoDB
ExtraGit • GitHub • cPanel • XD • Photoshop
Principiu: Framework-urile accelerează munca, dar fundamentele decid calitatea.
Întrebări de autoevaluare
  1. Care este diferența dintre framework și library?
  2. De ce Git este obligatoriu chiar și în proiecte mici?
  3. Ce verifici prima dată la o eroare 500 în cPanel?
  4. Când alegi MySQL vs MongoDB?