En este ejercicio práctico vamos a conocer la estructura de un proyecto para frontend, lo que te va a servir para reconocer otro tipo de proyectos de código, sea cual sea el tipo o requerimiento que tenga tu trabajo. Este proyecto sirve para conocer cómo luce una estructura cualquiera. En este caso, veremos cómo un proyecto de desarrollo web para frontend está dividido en las herramientas que necesitas, el archivo HTML y la hoja de estilos en el archivo CSS, el archivo de JavaScript…
Estructura de un proyecto para frontend
Para empezar, debes tener claro que un programa puede estar establecido dentro de un repositorio dentro de una plataforma determinada para ello, como GitHub. Ahora, para utilizarla dentro de tu IDE de preferencia, solo tendrás que copiarlo o descargarlo y ¡ya está! Lo vas a abrir dentro de tu IDE; en este caso, en Visual Studio Code.
Una vez tengamos el repositorio del proyecto del ejercicio práctico en nuestro IDE, vas a ver algo como la siguiente columna, donde se listan todos los elementos, herramientas, archivos y notas, entre otros, para aprovechar el desarrollo. Aquí podremos empezar a ver y a clicar en cada uno de ellos.
Ya que nuestro proyecto tiene la intención de programar archivos de código de desarrollo web, necesitamos muchas dependencias. Por lo tanto, encontramos package.json, donde vamos a localizar todos los elementos o dependencias necesarias para el desarrollo de un proyecto. En este caso, por ejemplo, podemos visualizar dependencias como JSON server y servor.
De la mano del documento en el que encontramos todas las dependencias de JSON para el desarrollo web, en la estructura de proyecto vamos a tener acceso al archivo README.md. Aquí vamos a visualizar las instrucciones y los requerimientos para el desarrollo de un proyecto.
Después, vamos a encontrar los tres documentos que serán el centro del proyecto de este ejercicio práctico. Estos son: el archivo detail.html, el archivo index.html y, por último, el archivo index.js. Cada uno de estos almacena un elemento o característica esencial para el ejecución de un programa.
Como puedes ver a continuación, en esta interfaz gráfica de Visual Studio Code vamos a encontrar una lista de todas las tareas o trabajos que debemos realizar para terminar de desarrollar un proyecto. Esto es muy útil, por lo que te recomendamos descargarlo desde el marketplace de extensiones del IDE.
Ahora, profundizamos en los componentes de cada uno de estos archivos. Primero te mostramos el archivo de index.js, donde se listan todas las funciones y variables que participan en la parte dinámica y programable de un sitio o una aplicación web. Aquí vas a ver una porción de código realizado con JavaScript.
Por otro lado, al igual que la parte interactiva de un programa web tiene un archivo específico desarrollado en JavaScript, en nuestro programa de código también tenemos un archivo en el que listamos todos los detalles relacionados con la parte desarrollada con HTML. En este caso, el archivo detail.html almacena todas las partes específicas del contenido en HTML. A su vez, también debes tener un archivo de index.html, donde vas a encontrar el lenguaje de etiquetas en funcionamiento. Podrás vislumbrar las secciones de inicio, de body o cuerpo y del script en general.
Por último, hay otros elementos, como el README en PDF, notas que tiene el desarrollador sobre el proyecto o los procesos realizados en gitignore, entre otros, que son fundamentales para la estructura de un proyecto para frontend.
¿Qué sigue ahora?
Gracias a este ejercicio práctico has podido aprender cuál es la estructura de un proyecto para frontend, por lo que ya puedes aprovechar este conocimiento en cualquier proyecto en el que te embarques. Para avanzar aún más, es la hora de seguir estudiando y aprendiendo acerca del desarrollo web con nuestro Desarrollo Web Full Stack Bootcamp. Se trata de una formación de alta intensidad e íntegra en la que te formarás a nivel teórico y práctico con el acompañamiento de grandes profesionales en el sector IT, para convertirte en un experto en cuestión de meses. ¡Solicita información ya mismo y súmate pronto para impulsar tu futuro!
