En esta sección, configuraremos el entorno necesario para comenzar a trabajar en nuestro proyecto final: un sitio web responsivo. A lo largo de este módulo, utilizaremos herramientas y prácticas que hemos aprendido en los módulos anteriores. Vamos a asegurarnos de que todo esté listo para que podamos centrarnos en el diseño y la implementación del sitio web.

1. Configurar el entorno de desarrollo: Instalaremos y configuraremos las herramientas necesarias para el desarrollo del proyecto.
2. Estructurar el proyecto: Crearemos la estructura básica de carpetas y archivos.
3. Configurar el control de versiones: Usaremos Git para gestionar el código del proyecto.
4. Preparar el archivo HTML base: Crearemos un archivo HTML inicial que servirá como punto de partida.

Para este proyecto, necesitaremos las siguientes herramientas:

• Editor de Código: Recomendamos Visual Studio Code (VSCode) por su facilidad de uso y extensibilidad.
• Navegador Web: Cualquier navegador moderno (Chrome, Firefox, Edge, etc.).
• Git: Para el control de versiones.
• Node.js y npm: Para gestionar dependencias y herramientas de desarrollo.

Visual Studio Code (VSCode)

1. Descarga e instala VSCode desde aquí.
2. Una vez instalado, abre VSCode y familiarízate con su interfaz.

Git

1. Descarga e instala Git desde aquí.
2. Configura Git con tu nombre y correo electrónico:

   git config --global user.name "Tu Nombre"
   git config --global user.email "[email protected]"
   

Node.js y npm

1. Descarga e instala Node.js (incluye npm) desde aquí.
2. Verifica la instalación ejecutando los siguientes comandos en tu terminal:

   node -v
   npm -v
   

Vamos a crear una estructura básica para nuestro proyecto. Abre tu terminal y sigue estos pasos:

1. Crea una carpeta para tu proyecto:

   mkdir sitio-web-responsivo
   cd sitio-web-responsivo
   

2. Dentro de la carpeta del proyecto, crea las siguientes subcarpetas y archivos:

   mkdir css js images
   touch index.html css/styles.css js/scripts.js
   

La estructura de tu proyecto debería verse así:

1. Inicializa un repositorio Git en la carpeta del proyecto:

   git init
   

2. Crea un archivo .gitignore para excluir archivos y carpetas que no queremos rastrear con Git:

   touch .gitignore
   

3. Añade las siguientes líneas al archivo .gitignore:

   node_modules/
   .DS_Store
   

4. Realiza el primer commit:

   git add .
   git commit -m "Initial commit: Project setup"
   

Abre index.html en tu editor de código y añade la siguiente estructura básica:

• DOCTYPE: Define el tipo de documento como HTML5.
• html lang="es": Establece el idioma del documento como español.
• meta charset="UTF-8": Define la codificación de caracteres como UTF-8.
• meta name="viewport" content="width=device-width, initial-scale=1.0": Configura el viewport para que el sitio sea responsivo.
• title: Título del sitio web.
• link rel="stylesheet" href="css/styles.css": Enlaza el archivo CSS.
• header, main, footer: Estructura básica del contenido del sitio.
• script src="js/scripts.js": Enlaza el archivo JavaScript.

En esta sección, hemos configurado el entorno de desarrollo, estructurado nuestro proyecto, configurado el control de versiones con Git y preparado un archivo HTML base. Ahora estamos listos para comenzar a diseñar y estilizar nuestro sitio web responsivo en las siguientes secciones.

En la próxima sección, comenzaremos a crear el diseño del sitio web. ¡Vamos a ello!