Invatare Atomica

Publicarea site-ului

Progres lectie:
0%
🎯

Obiectivul lectiei

Site-ul tau e gata! Afli ce inseamna hosting, cum pregatesti fisierele si urmezi pasii concreți pentru a-l publica online — prin Netlify Drop (fara cont) sau GitHub Pages (cu cont, varsta minima 13 ani).

Dupa aceasta lectie vei putea:

  • Sa explici ce inseamna "hosting"
  • Sa utilizezi 💡 sfaturi importante pentru pregatirea fisierelor
  • Sa aplici ✅ checklist inainte de publicare
  • Sa urmezi pasii concreți de publicare (Netlify Drop sau GitHub Pages)

Incearca singur!

🎯 INCEARCA

Exploreaza GitHub Pages!

Provocarea ta (10 minute):

1. Du-te la pages.github.com si citeste ce ofera GitHub Pages

2. Observa ca URL-ul unui site publicat arata asa: username.github.io

3. Discuta cu profesorul sau un parinte daca vrei sa creezi un cont

4. Alternativ: Netlify Drop (app.netlify.com/drop) permite publicare fara cont — simplu drag & drop!

⚠️ Important despre conturi online — citeste!

Inainte de a-ti crea un cont pe orice platforma:

  • GitHub impune varsta minima de 13 ani conform Termenilor de Utilizare
  • Daca ai sub 13 ani, ai nevoie de acordul unui parinte sau tutore
  • Intreaba intotdeauna un parinte sau profesorul inainte de a-ti crea un cont nou
  • Nu folosi parole simple si nu impartasi datele contului cu altii
💡 De ce GitHub Pages? Click aici

GitHub Pages este o platforma gratuita de hosting pentru site-uri statice. Ofera:

  • Gazduire GRATUITA pentru site-uri statice (HTML, CSS, imagini)
  • URL personalizat (username.github.io)
  • Folosita de milioane de developeri din toata lumea
  • Alternativa simpla: Netlify Drop — fara cont, doar tragi folderul!
1

Ce inseamna "hosting"?

Ce inseamna "hosting"?
Hosting (gazduire) inseamna sa pui fisierele site-ului pe un server conectat la internet, 24/7, astfel incat oricine sa poata accesa site-ul tau.
Analogie: Hosting = un apartament pentru site-ul tau pe internet
2

💡 Sfaturi importante

💡 Sfaturi importante
  • index.html OBLIGATORIU - Pagina principala trebuie sa se numeasca exact "index.html"
  • Litere mici - Foloseste doar litere mici in numele fisierelor
  • Fara spatii - Inlocuieste spatiile cu "-" (despre-mine.html)
  • Testeaza local inainte - Verifica ca totul functioneaza pe calculator
3

✅ Checklist inainte de publicare

✅ Checklist inainte de publicare
  • ☐ Toate link-urile functioneaza
  • ☐ Imaginile se incarca corect
  • ☐ Textul e verificat (fara greseli)
  • ☐ Site-ul arata bine pe mobil
  • ☐ index.html exista in folder
4

🚀 Cum publici efectiv — pasi concreți

🚀 Doua modalitati de publicare pas cu pas

Varianta A — Netlify Drop (recomandata, fara cont):

  1. Deschide app.netlify.com/drop in browser
  2. Trage folderul cu site-ul tau (cel care contine index.html) in zona indicata
  3. Asteapta cateva secunde — Netlify genereaza un URL public (ex: random-name.netlify.app)
  4. Trimite URL-ul profesorului!

Varianta B — GitHub Pages (cu cont, varsta minima 13 ani):

  1. Creeaza un cont pe github.com (cu acordul parintelui daca ai sub 18 ani)
  2. Apasa + New repository si numeste-l username.github.io (inlocuieste username cu numele tau de cont)
  3. In repository, apasa Add file > Upload files si incarca TOATE fisierele site-ului (index.html, style.css, imagini)
  4. Apasa Commit changes
  5. Mergi la Settings > Pages, selecteaza Branch: main si apasa Save
  6. Dupa 1-2 minute, site-ul tau este accesibil la https://username.github.io
Nota: Ambele variante sunt gratuite. Netlify Drop e mai rapid pentru incepatori; GitHub Pages e util daca vrei sa inveti si gestiunea fisierelor online pe viitor.

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect web: Publicarea site-ului

Creeaza o pagina web pentru Publicarea site-ului

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Adauga interactivitate JavaScript simpla

Exercitiul 2 (Nivel standard) - Publica site-ul tau online

Foloseste checklist-ul de dinainte de publicare, apoi urmeaza pasii pentru a pune site-ul online:

  1. Parcurge checklist-ul de publicare (din atom-3): bifeaza fiecare punct si noteaza daca ai corectat ceva.
  2. Publica site-ul folosind Netlify Drop (app.netlify.com/drop): trage folderul cu fisierele si noteaza URL-ul generat.
  3. Deschide URL-ul in browser si verifica: se incarca index.html? Functioneaza toate link-urile din meniu?

Raspunde numerotat: 1. (ce ai corectat) ... 2. (URL-ul site-ului) ... 3. (ce ai verificat) ...

Exercitiul 3 (Nivel performanta) - Analiza procesului de publicare

Cerinta: Explica in scris diferenta dintre a deschide un site pe calculatorul tau (local) si a-l publica pe internet (hosting), si descrie procesul parcurs.

Indicii:

  • Ce inseamna "hosting" si de ce e nevoie de el?
  • De ce nu e suficient sa trimiti fisierul .html altcuiva prin email?
  • Ce ai facut inainte de a incarca fisierele (checklist)? Ce ar fi putut merge prost?
  • Ce avantaj are GitHub Pages fata de Netlify Drop pentru proiecte pe termen lung?

Cuvinte cheie de folosit: hosting, server, URL, Netlify, GitHub Pages, fisiere, local vs online, deploy

Ce ai invatat astazi

  • Ai invatat ce inseamna "hosting" (gazduire web)
  • Acum stii 💡 sfaturile importante pentru pregatirea fisierelor
  • Ai aplicat ✅ checklist inainte de publicare
  • Ai invatat pasii concreți de publicare prin Netlify Drop si GitHub Pages

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →