Pagina de Programación

Lección 22. Estructura profesional de un proyecto HTML.

Cuando nuestro proyecto crece, es muy importante mantener unaestructura organizada. Esto facilita el mantenimiento, la lectura del código, la colaboración y evita problemas al cargar estilos, imágenes y scripts.

Los proyectos profesionales suelen organizarse en varias carpetas principales, cada una con una función clara.

Por lo generar, los proyectos se organizar similar a la siguiente manera:

/project
  /css
    styles.css
    reset.css
  /js
    app.js
    navbar.js
  /img
    logo.png
    banner.jpg
  /assets
    fonts/
    icons/
  index.html

Donde:

/css -> Guarda todos tus estilos. Allí podemos tener styles.css, un reset, variables, etc.
/js -> Contiene tus funciones y scripts de interacción. Podemos dividir archivos por módulos.
/img -> Todas las imágenes (logos, íconos, banners, assets).
/assets -> Recursos adicionales como fuentes, SVGs o archivos descargables.
index.html -> El archivo principal del proyecto y punto de entrada del usuario.

Nota: Mantener los archivos dentro de las carpetas correctas permite que tu sitio sea más escalable y que otros desarrolladores puedan entenderlo sin dificultad.

Enlazando CSS y JS._

Para usar archivos externos, debemos enlazar correctamente estos archivos dentro del <head> y antes del cierre del </body>.

<!--Enlazar un archivo .css-->
<link rel="stylesheet" href="css/styles.css">

<!--Enlazar un archivo .js-->
<script src="js/app.js"></script>

Nota: El CSS se carga en el <head> para aplicar los estilos desde el inicio. El JavaScript se recomienda colocarlo al final del <body> para mejorar el rendimiento.

Buenas prácticas._

Algunas buenas practicas para mejorar nuestro proyecto:

Nombrar archivos en inglés.
Usar nombres descriptivos: navbar.js, form.css.
Mantener ordenada la carpeta img.
Dividir el CSS por módulos en proyectos grandes.
Evitar archivos sueltos fuera de carpetas.

Con esta estructura trabajamos de forma mucho más profesional, evitando confusiones y preparando tu proyecto para crecer sin caos.

⬅ Anterior Menú