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)

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. ...

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

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

🎉 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