Invatare Atomica

Pagina principala

Progres lectie:
0%
🎯

Obiectivul lectiei

Cream index.html - prima pagina pe care o vad vizitatorii. Include Hero section si sectiunea "Despre mine".

Dupa aceasta lectie vei putea:

  • Sa explici ce este hero section
  • Sa utilizezi explicatia tag-urilor semantice
  • Sa aplici 💡 sfaturi pentru continut

Incearca singur!

🎯 INCEARCA

Creeaza structura de baza!

Provocarea ta (10 minute):

1. Creeaza un folder nou pe desktop numit "site-personal"

2. Deschide Notepad sau Visual Studio Code

3. Scrie structura HTML de baza (DOCTYPE, html, head, body)

4. Salveaza fisierul ca "index.html" in folderul creat

5. Deschide fisierul in browser (dublu-click)

💡 Nu-ti amintesti structura HTML? Click aici

Structura de baza:

<!-- Asa incepe orice pagina HTML --> <!DOCTYPE html> <html lang="ro"> <head> <title>Titlul paginii</title> </head> <body> Continutul aici... </body> </html>
1

Ce este Hero Section?

Ce este Hero Section?
Hero section este prima sectiune mare pe care o vede vizitatorul - un titlu de impact, o descriere scurta si poate un buton. E ca si coperta unei carti - trebuie sa atraga atentia!
De ce conteaza? Ai doar 3 secunde sa captezi atentia cuiva. Hero section-ul face prima impresie!
2

Explicatia tag-urilor semantice

Explicatia tag-urilor semantice

<header> - Antetul paginii (titlu, logo, meniu)

<main> - Continutul principal al paginii

<section> - O sectiune tematica

<footer> - Subsolul paginii (copyright, linkuri)

De ce le folosim? Ajuta browsere si motoarele de cautare (Google) sa inteleaga structura paginii tale!
3

💡 Sfaturi pentru continut

💡 Sfaturi pentru continut
  • Fii autentic - Scrie despre tine, nu copia
  • Tine-l scurt - Nimeni nu citeste texte lungi online
  • Foloseste paragrafe - Un bloc mare de text sperie cititorii
  • Evita informatii personale sensibile - Nu pune adresa sau numarul de telefon

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect web: Pagina principala

Creeaza o pagina web pentru Pagina principala

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Adauga interactivitate JavaScript simpla

Exercitiul 2 (Nivel standard) - Planificare site

Planifica un site pentru Pagina principala:

  1. Ce pagini va avea?
  2. Ce culori si fonturi alegi?
  3. Ce continut include fiecare pagina?

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

Exercitiul 3 (Nivel performanta) - Compunere

Cerinta: Descrie structura site-ului tau Pagina principala.

Indicii:

  • Mentioneaza paginile
  • Descrie navigarea
  • Explica alegerea design-ului

Cuvinte cheie de folosit: site, pagina, navigare, HTML, CSS, design

Ce ai invatat astazi

  • Ai invatat ce este hero section
  • Acum stii explicatia tag-urilor semantice
  • Ai descoperit 💡 sfaturi pentru continut

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →