🏆 PROIECT FINAL
💻

Portofoliu Personal

Creeaza-ti propriul site de prezentare folosind tot ce ai invatat despre HTML si CSS!

🎯 Obiective de indeplinit

🛠 Pasi pentru realizare

1
Creeaza structura de baza
Scheletul HTML al paginii
portofoliu.html - Structura initiala
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portofoliul lui [Numele Tau]</title> <style> /* CSS-ul tau va fi aici */ </style> </head> <body> <!-- Continutul tau va fi aici --> </body> </html>
2
Adauga continutul HTML
Sectiunile principale ale portofoliului
Continutul din <body>
<body> <!-- Header cu numele tau --> <header> <h1>Maria Popescu</h1> <p>Eleva in clasa a 7-a | Pasionata de tehnologie</p> </header> <!-- Sectiunea Despre Mine --> <section> <h2>Despre Mine</h2> <img src="poza-mea.jpg" alt="Poza mea" width="150"> <p>Buna! Ma numesc Maria si sunt pasionata de informatica si programare. Imi place sa creez lucruri noi si sa invat tehnologii.</p> </section> <!-- Sectiunea Hobby-uri --> <section> <h2>Hobby-urile mele</h2> <ul> <li>Programare</li> <li>Citit carti</li> <li>Jocuri video</li> <li>Desen digital</li> </ul> </section> <!-- Sectiunea Contact --> <section> <h2>Contact</h2> <p>Ma poti contacta la: <a href="mailto:maria@email.com">maria@email.com</a></p> <p>Site-uri favorite:</p> <ul> <li><a href="https://scratch.mit.edu" target="_blank">Scratch</a></li> <li><a href="https://code.org" target="_blank">Code.org</a></li> </ul> </section> <!-- Footer --> <footer> <p>&copy; 2026 Maria Popescu - Proiect scoala</p> </footer> </body>
3
Stilizeaza cu CSS
Fa pagina sa arate profesional
CSS in <style>
body { font-family: Arial, sans-serif; background-color: #0a0a12; color: #f1f5f9; margin: 0; padding: 20px; } header { text-align: center; padding: 40px; background-color: #1a1a2e; border-radius: 15px; margin-bottom: 20px; } h1 { color: #8b5cf6; font-size: 2.5em; margin-bottom: 10px; } h2 { color: #06b6d4; border-bottom: 2px solid #8b5cf6; padding-bottom: 10px; } section { background-color: #12121f; padding: 25px; border-radius: 15px; margin-bottom: 20px; } img { border-radius: 50%; border: 3px solid #8b5cf6; } a { color: #8b5cf6; text-decoration: none; } a:hover { color: #06b6d4; text-decoration: underline; } footer { text-align: center; padding: 20px; color: #64748b; }
4
Previzualizare rezultat
Asa ar trebui sa arate portofoliul tau
portofoliu.html

Maria Popescu

Eleva in clasa a 7-a | Pasionata de tehnologie

Despre Mine

👤

Buna! Ma numesc Maria si sunt pasionata de informatica si programare.

Hobby-urile mele

  • Programare
  • Citit carti
  • Jocuri video
© 2026 Maria Popescu

💡 Sfaturi pentru un portofoliu reusit

🎨
Alege culori armonioase
Foloseste 2-3 culori principale care se potrivesc. Site-uri precum ColorHunt.co te pot ajuta.
📷
Foloseste imagini de calitate
O imagine clara si relevanta face diferenta. Poti folosi avatare sau emoji-uri daca nu ai poza.
📝
Scrie text personal
Fii autentic! Scrie despre ce iti place cu adevarat si ce te face special.
🛠
Testeaza des
Dupa fiecare modificare, salveaza si reincarca pagina in browser pentru a vedea rezultatul.

📋 Criterii de evaluare

Criteriu Punctaj
Structura HTML corecta (doctype, html, head, body) 15 p
Titluri si paragrafe (h1, h2, p) 15 p
Lista cu hobby-uri (ul/ol, li) 15 p
Imagine cu alt text (img, src, alt) 15 p
Linkuri functionale (a href) 15 p
Stilizare CSS (culori, fonturi, spatiere) 15 p
Creativitate si aspect general 10 p
TOTAL 100 p

BONUS Provocari suplimentare (+20 XP fiecare)

📦 Cum predai proiectul?
  1. Creeaza un folder cu numele tau (ex: Popescu_Maria_Portofoliu)
  2. Pune in folder fisierul HTML si toate imaginile folosite
  3. Fa un ZIP cu folderul
  4. Incarca pe platforma clasei sau trimite pe email profesorului
🏆

Felicitari!

Ai finalizat Modulul 4: Web - HTML/CSS Bazic!
Acum ai propriul tau site de prezentare!

+100 XP

Ai invatat: HTML, Tag-uri, Atribute, Liste, Linkuri, Imagini, CSS, Stilizare

← Inapoi la modul