Omet navegació

Inici

Pas a pas per publicar una pàgina web: guia pràctica per començar

Guia pràctica per començar


Aquest manual no és per experts.
És per tu, que vols aprendre a fer una pàgina web des de zero,
amb eines accessibles, passos clars i sense paraules complicades.

 Aquí no et direm només què cal fer,
sinó per què es fa i com ho pots adaptar al teu projecte.

 Perquè publicar una web no és només pujar fitxers:
és entendre, organitzar, provar i compartir.

"Aquest manual et guiarà pas a pas per publicar una pàgina web amb totes les bases cobertes: des del codi fins a l’accessibilitat i el desplegament."

INDEX

Mòdul 1: Els fonaments (Head i Meta)

Què és el <head>?
Meta tags imprescindibles
Com afegir favicons
Exemple de codi HTML bàsic
✅ Activitat: Completa la capçalera d’una pàgina (exercici amb caixa de text)

Mòdul 2: Disseny i estils (CSS)

Com connectar el CSS
Responsivitat amb media queries
Bones pràctiques de disseny
Accessibilitat visual (contrastos, fonts)
🖼️ Imatges + exemples abans/després

Mòdul 3: Navegació i usabilitat

Crear un menú accessible
Menú responsive (amb botó hamburguesa)
Enllaços interns i estats actius
🎯 Consell: "Sempre pensa en qui ho usarà"

Mòdul 4: Funcionalitats clau

Formulari de contacte (amb exemple de codi)
Botó “Anar a dalt”
Xarxes socials i compartir
🛠️ Exemple interactiu: arrossega els elements al lloc correcte

Mòdul 5: Proves i publicació

  • Comprovar en mòbil i ordinador
  • Eines de validació (W3C, PageSpeed)
  • Card validator
  • Desplegar amb Netlify / GitHub Pages
  • 🔐 HTTPS i seguretat bàsica

Mòdul 6: Després de publicar

Compartir a xarxes
Monitoratge amb Google Analytics
Actualitzar contingut
📝 Consell personal : "Jo sempre reviso el formulari cada setmana"


🎁 7. Annexos


📄 Checklist descarregable (PDF)
🔗 Enllaços útils (W3C, Google Fonts, Formspree, etc.)
💾 Exemple complet d’una pàgina senzilla (ZIP amb HTML + CSS + JS)


🧠 8. Autoavaluació


Qüestionari de 5 preguntes (tipus test)
Quin meta tag és essencial per al mòbil?
Espai per reflexionar: "Què has après? Què milloraries?"

Creat amb eXeLearning (Finestra nova)