Invatare Atomica · FINAL

Finalizare si prezentare

Progres lectie:
0%
🎯

Obiectivul lectiei

Ultimele retusuri, testarea finala si prezentarea proiectului tau! Ai ajuns la finalul modulului Extra Proiect Web!

Dupa aceasta lectie vei putea:

  • Sa aplici un checklist final complet de testare a site-ului
  • Sa efectuezi ultimele retusuri HTML/CSS inainte de prezentare
  • Sa structurezi o prezentare clara a proiectului tau web
  • Sa explici ce ai invatat si ce dificultati ai depasit
⚠️

Inainte de prezentare — verificare cu un adult

Daca site-ul tau este publicat pe internet (de ex. GitHub Pages), oricine il poate vedea. Cere unui parinte sau profesor sa verifice continutul inainte de prezentare, in special daca ai inclus informatii personale (nume complet, fotografie, scoala, oras). Este o regula de siguranta, nu o restrictie — si programatorii profesionisti cer recenzii inainte de a publica!

Incearca singur!

🎯 INCEARCA

Testare finala a site-ului tau!

Provocarea ta (15 minute) — parcurge fiecare pas:

Pas 1 — Deschide folderul proiectului pe calculator si verifica ca ai fisierele:

  • index.html (pagina principala)
  • despre.html, proiecte.html sau alte pagini create
  • css/style.css (fisierul de stilizare)
  • folderul imagini/ (daca ai imagini)

Pas 2 — Deschide index.html in browser (dublu-click pe fisier) si testeaza:

  • FIECARE link din meniu — merge la pagina corecta?
  • Toate imaginile — se incarca?
  • Textul — are greseli de scriere?

Pas 3 — Testare pe dimensiuni mici: In browser (Chrome/Firefox), apasa F12, apoi iconita de telefon (Toggle Device Toolbar) si verifica cum arata site-ul pe o rezolutie de 375px latime.

Pas 4 — Retusuri finale: Deschide fisierele HTML/CSS si corecteaza ce ai gasit in pasii 2-3.

Pas 5 — Cerere de recenzie: Daca site-ul e publicat online, roaga un parinte sau profesorul sa confirme ca continutul e OK inainte de prezentare.

Nota: Daca nu ai reusit publicarea GitHub Pages din lectia 5, pasii 1-4 se fac cu fisierele locale — este complet valid pentru prezentare!

💡 Cum testez pe telefon fara telefon? Click aici

In orice browser modern (Chrome, Firefox, Edge), apasa F12 pentru a deschide Developer Tools. Cauta iconita care arata ca un telefon si o tableta (Toggle Device Toolbar). Poti selecta dimensiuni prestabilite (iPhone SE, Galaxy S20 etc.) sau sa introduci manual latimea dorita.

Aceasta metoda este folosita de toti dezvoltatorii web profesionisti — nu ai nevoie de un dispozitiv fizic pentru a testa!

1

✅ Checklist final integrat

✅ Ce verifica un dezvoltator web inainte de lansare?

Inainte de prezentare, parcurge urmatoarea lista. Bifeaza fiecare punct:

  • ☐ Structura HTML — toate tag-urile sunt inchise corect?
  • ☐ Link-uri — fiecare link merge unde trebuie?
  • ☐ Imagini — toate se incarca, au atribut alt=?
  • ☐ CSS aplicat — stilurile arata corect in browser?
  • ☐ Responsive — site-ul arata OK la 375px latime (telefon)?
  • ☐ Ortografie — textul e verificat, fara greseli?
  • ☐ index.html exista — pagina principala se numeste exact index.html?
  • ☐ Siguranta continut — un adult a confirmat ca nu ai date personale sensibile?
De ce conteaza: Un site cu link-uri rupte sau imagini lipsa da impresia de proiect abandonat. Checklistul transforma munca ta intr-un produs finalizat.
2

🔧 Retusuri frecvente HTML/CSS

🔧 Problemele cele mai comune si cum le repari

Problema 1 — Link rupt: Apasa pe link, primesti eroare "File not found".
Cauza: Numele fisierului din href nu se potriveste exact cu fisierul de pe disc (majuscule, spatii, extensie lipsa).
Rezolvare: Compara href="Despre.html" cu numele real despre.html — litere mici, fara spatii.

Problema 2 — Imagine care nu se incarca:
Cauza: Calea din src e gresita sau fisierul nu e in folderul corect.
Rezolvare: Verifica ca imaginea e in folderul imagini/ si calea e src="imagini/poza.jpg".

Problema 3 — CSS nu se aplica:
Cauza: Tag-ul <link> din HTML nu gaseste fisierul CSS.
Rezolvare: Verifica href="css/style.css" — fisierul CSS trebuie sa fie in folderul css/ (creat in lectia 3), iar legatura din HTML sa foloseasca calea css/style.css.

Problema 4 — Site strans pe telefon:
Cauza: Lipseste meta viewport in head.
Rezolvare: Adauga <meta name="viewport" content="width=device-width, initial-scale=1.0"> in <head>.

3

🎤 Structura unei prezentari de proiect

🎤 Cele 4 parti ale unei prezentari reussite

Parte 1 — CE AM FACUT (30 secunde): Descrie site-ul in 1-2 propozitii. Exemplu: "Am creat un site personal cu 3 pagini: Acasa, Despre mine si Proiectele mele."

Parte 2 — CUM AM FACUT (1 minut): Mentioneaza tehnologiile. Exemplu: "Am folosit HTML pentru structura, CSS pentru design si am facut site-ul sa arate bine si pe telefon."

Parte 3 — CE A FOST GREU (30 secunde): Spune o dificultate reala si cum ai rezolvat-o. Exemplu: "Linkul catre pagina Despre nu mergea pentru ca am scris Despre.html cu D mare — l-am corectat in despre.html." Asta demonstreaza ca ai inteles codul, nu doar ca l-ai copiat.

Parte 4 — CE AM INVATAT (30 secunde): Un lucru concret. Exemplu: "Acum inteleg de ce HTML si CSS sunt fisiere separate — e mai usor sa schimbi designul fara sa atingi continutul."

Sfaturi de livrare: Vorbeste clar si rar. Priveste publicul, nu ecranul. E perfect normal sa nu stii tot — "nu am reusit X, dar am invatat de ce" este un raspuns onest si profesionist.
4

📄 Autoevaluare — ce stiu acum?

📄 Recapitularea modulului prin reflectie ghidata

Raspunde sincer la urmatoarele intrebari (in scris sau mental):

  1. Structura: Pot explica diferenta dintre HTML si CSS in 1 propozitie?
  2. Link-uri: Stiu sa creez un link catre o alta pagina din acelasi site?
  3. Responsive: Stiu ce face meta viewport si de ce e important?
  4. Publicare: Inteleg ce inseamna "hosting" si de ce avem nevoie de el?
  5. Proiect: Am un site cu cel putin 2 pagini conectate printr-un meniu?

Daca ai raspuns DA la 4 din 5: Felicitari — ai stapanit competentele de baza ale modulului!

Daca ai raspuns NU la 1-2: E normal. Noteaza subiectul si revino la lectia respectiva (1-5) pentru o recapitulare rapida.

Exercitii practice

Exercitiul 1 (Nivel minim) — Checklist de testare

Parcurge checklistul final de mai jos pentru site-ul tau si bifeaza fiecare punct. Daca un punct nu e indeplinit, repara-l inainte de a trece mai departe.

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Testeaza si pe mobil (real sau prin F12 / Toggle Device Toolbar in browser)
Vezi rezolvarea

Rezolvare model — parcurge checklistul din Atomul 1 punct cu punct si repara ce nu e bifat:

  1. Link-uri: apasa fiecare link din meniu (nav). Daca da eroare, compara href-ul cu numele real al fisierului — trebuie litere mici, fara spatii (ex: despre.html, nu Despre.html).
  2. Imagini: verifica fiecare <img> ca se incarca si are atributul alt="..." completat.
  3. Ortografie: reciteste tot textul de pe pagini si corecteaza greselile evidente.
  4. CSS aplicat: deschide fiecare pagina in browser si verifica vizual ca stilurile din css/style.css se vad (culori, fonturi).
  5. Adult a verificat: arata site-ul unui parinte/profesor inainte de prezentare.

Bonus: apasa F12, apoi Toggle Device Toolbar, si verifica ca site-ul arata bine la 375px latime.

Exercitiul 2 (Nivel standard) — Pregateste prezentarea

Scrie, in 3-5 propozitii, prezentarea proiectului tau web urmand structura din Atomul 3:

  1. CE AI FACUT — descrie site-ul in 1-2 propozitii (pagini, scop)
  2. CUM AI FACUT — tehnologiile folosite (HTML, CSS, responsive)
  3. CE A FOST GREU — o dificultate concreta si cum ai rezolvat-o
  4. CE AI INVATAT — un lucru specific pe care nu il stiai inainte

Raspunde numerotat: 1. ... 2. ... 3. ... 4. ...

Vezi rezolvarea

Rezolvare model, respectand structura din Atomul 3 (4 parti, cate 30 sec - 1 min fiecare):

  1. CE AM FACUT: Am creat un site personal cu 3 pagini: Acasa, Despre mine si Proiectele mele.
  2. CUM AM FACUT: Am folosit HTML pentru structura, CSS extern (css/style.css) pentru design si am adaugat meta viewport ca site-ul sa arate bine si pe telefon.
  3. CE A FOST GREU: Linkul catre pagina Despre nu mergea pentru ca scrisesem href="Despre.html" cu D mare — l-am corectat in despre.html, la fel ca numele real al fisierului.
  4. CE AM INVATAT: Am inteles de ce HTML si CSS sunt fisiere separate — pot schimba designul din style.css fara sa ating continutul din paginile HTML.

Elevul isi scrie propriile raspunsuri concrete, numerotate 1-4, ca in acest model.

Exercitiul 3 (Nivel performanta) — Reflectie tehnica extinsa

Cerinta: Scrie o descriere tehnica a proiectului tau care sa includa:

Puncte obligatorii:

  • Structura de fisiere si foldere a proiectului (ce fisiere ai creat si de ce)
  • Cel putin un exemplu de cod HTML si unul de CSS pe care esti mandru ca le-ai scris
  • Ce ai face diferit daca ai reface proiectul de la zero (imbunatatire sau optimizare)
  • O caracteristica pe care nu ai reusit sa o implementezi si de ce

Cuvinte cheie de folosit: HTML, CSS, selector, proprietate, tag, link, responsive, hosting

Vezi rezolvarea

Nivel performanta — nu iti dau textul gata, doar structura pe care sa o completezi cu proiectul TAU real:

  1. Structura de fisiere: descrie folderul tau, dupa modelul din lectia 3: fisierele HTML (index.html, despre.html...) in radacina, CSS in css/style.css, imaginile in images/. Explica de ce le-ai impartit asa (separare continut/design/resurse).
  2. Cate un exemplu de cod: alege un fragment HTML real din pagina ta (ex: un <section> sau meniul <nav>) si o regula CSS reala din style.css (selector, proprietate, valoare) de care esti multumit — copiaza-le exact cum le-ai scris.
  3. Ce ai face diferit: gandeste-te la o problema pe care ai avut-o (link rupt, culoare care nu se aplica, imagine care nu se incarca — vezi Atomul 2) si ce ai optimiza data viitoare.
  4. Ce n-ai reusit: fii sincer despre o functie care ti-a scapat si spune de ce (ex: JavaScript-ul e mentionat doar ca bonus optional in lectii, nu a fost predat pas cu pas — e normal sa nu-l stapanesti).

Criterii de evaluare: foloseste TOATE cuvintele cheie cerute, cere exemple de cod reale (nu inventate) si o reflectie sincera, nu doar laude.

Ce ai invatat in aceasta lectie

  • Ai aplicat un checklist final integrat de testare a site-ului
  • Ai identificat si reparat problemele frecvente HTML/CSS
  • Stii sa structurezi o prezentare de proiect in 4 parti
  • Ai efectuat o autoevaluare a competentelor acumulate in modul

Vrei mai mult?

Provocare: Cere unei alte persoane (parinte, coleg, prieten) sa parcurga checklistul final pe site-ul tau, ca un "tester extern", fara sa-i spui ce ai facut. Noteaza in scris cel putin un lucru pe care el sau ea l-a observat si tu nu (un link, o greseala de scriere, o imagine care nu se vede bine pe telefonul lui).

De ce? De ce e mai convingator, la prezentare, sa spui "am scris Despre.html cu D mare si linkul nu mergea, apoi am corectat" decat sa ascunzi ca ai avut vreo problema?

In lumea reala: La interviurile de angajare pentru programatori, o intrebare foarte des pusa este "Povesteste-mi despre un bug pe care l-ai rezolvat". Cei care recunosc greseala si explica solutia sunt vazuti ca mai de incredere decat cei care pretind ca n-au gresit niciodata.

🎉 Felicitari! Ai finalizat modulul Extra Proiect Web!

Ai parcurs toate cele 6 lectii si ai creat un site web complet cu HTML si CSS. Acesta este un proiect real — pastreaza-l si arata-l cu mandrie!

← Inapoi la modulul complet