Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/g4lvan/demo_page_colegio.github.io/llms.txt

Use this file to discover all available pages before exploring further.

Una de las ventajas de este proyecto es su simpleza de configuración: no requiere herramientas de build, ni gestor de paquetes, ni servidor local obligatorio. Basta con clonar el repositorio y abrir index.html en cualquier navegador moderno para ver el sitio funcionando de inmediato. Esto lo hace accesible tanto para colaboradores experimentados como para quienes recién se inician en el desarrollo web.

​
Prerrequisitos

Antes de comenzar, asegúrate de tener instalado lo siguiente en tu equipo:
  • Un navegador web moderno — Chrome, Firefox, Safari o Edge en su versión reciente.
  • Git — para clonar el repositorio desde GitHub. Puedes descargarlo en git-scm.com.
  • Un editor de código — se recomienda Visual Studio Code con la extensión Better Comments para visualizar correctamente el estándar de comentarios del proyecto.

​
Pasos

1

Clona el repositorio

Abre una terminal y ejecuta los siguientes comandos para obtener una copia local del proyecto:
git clone https://github.com/g4lvan/demo_page_colegio.github.io.git
cd demo_page_colegio.github.io
Esto descargará todos los archivos del proyecto en tu máquina y te posicionará dentro de la carpeta raíz.
2

Abre el sitio en el navegador

No es necesario ningún paso de compilación ni instalación de dependencias. El proyecto funciona directamente con archivos estáticos.Una vez dentro de la carpeta, verás la siguiente estructura de entrada:
demo_page_colegio.github.io/
├── index.html        ← Página principal (Inicio)
└── pages/
    ├── nosotros.html
    ├── noticias.html
    ├── recursos.html
    └── contacto.html
Tienes dos opciones para visualizarlo:
  • Doble clic en index.html — el navegador lo abrirá directamente con el protocolo file://.
  • VS Code + Live Server — instala la extensión Live Server, haz clic derecho sobre index.html y selecciona “Open with Live Server”. Esta opción recarga el navegador automáticamente al guardar cambios.
3

Explora las páginas

El sitio cuenta con cinco páginas accesibles desde la barra de navegación principal:
PáginaArchivo
Inicioindex.html
Nosotrospages/nosotros.html
Noticiaspages/noticias.html
Recursospages/recursos.html
Contactopages/contacto.html
Cada página tiene su propio archivo CSS en la carpeta css/ y comparte los estilos globales definidos en css/styles.css, donde encontrarás los tokens de diseño (colores, tipografía y espaciados) declarados en :root.
4

Configura tu editor (opcional)

El proyecto utiliza un estándar de comentarios con etiquetas especiales (*, ?, !, ') que indican distintos tipos de anotación en el código. Para visualizarlos con colores diferenciados en VS Code, instala la extensión Better Comments y agrega la siguiente configuración a tu archivo settings.json:
"better-comments.tags": [
  { "tag": "!",  "color": "#FF2D00", "strikethrough": false, "bold": false, "italic": false, "backgroundColor": "transparent" },
  { "tag": "?",  "color": "#3498DB", "strikethrough": false, "bold": false, "italic": false, "backgroundColor": "transparent" },
  { "tag": "//", "color": "#474747", "strikethrough": true,  "bold": false, "italic": false, "backgroundColor": "transparent" },
  { "tag": "'",  "color": "#FF8C00", "strikethrough": false, "bold": false, "italic": false, "backgroundColor": "transparent" },
  { "tag": "*",  "color": "#98C379", "strikethrough": false, "bold": false, "italic": false, "backgroundColor": "transparent" }
]
Con esto, los comentarios del proyecto se mostrarán con colores que facilitan la lectura y comprensión del código fuente.

​
Estructura de carpetas

demo_page_colegio.github.io/
├── index.html
├── pages/
│   ├── nosotros.html
│   ├── noticias.html
│   ├── recursos.html
│   └── contacto.html
├── css/
│   ├── styles.css
│   ├── nosotros.css
│   ├── noticias.css
│   ├── recursos.css
│   └── contacto.css
├── js/
│   └── script.js
├── assets/
│   ├── images/
│   ├── logos/
│   ├── video/
│   └── downloads/
└── docs/
    ├── COMMIT_STANDARD.md
    ├── COMMENTING_STANDARD.md
    └── structure.md

​
Próximos pasos

Una vez que tienes el proyecto corriendo en tu entorno local, puedes profundizar en cualquiera de estas áreas:

Estructura del Sitio

Conoce en detalle cómo está organizado cada archivo HTML, qué secciones componen cada página y cómo se relacionan entre sí.

Arquitectura CSS

Explora el sistema de tokens de diseño, la organización de los archivos CSS por página y el uso de Flexbox y Grid en el layout.

Guía de Commits

Aprende el estándar de commits del proyecto para mantener un historial de cambios claro, consistente y fácil de navegar.

Roadmap

Revisa el plan de versiones del proyecto: desde el MVP actual hasta las funcionalidades previstas en v1.0, v2.0 y v3.0.

Build docs developers (and LLMs) love

Get started for freeTalk to us