Flexbox en CSS y HTML: Configuración del proyecto inicial

En este tutorial aprenderás a preparar tu proyecto para trabajar con CSS Flexbox. Es importante tener una base sólida antes de adentrarte en las técnicas de diseño de Flexbox. Utilizaremos Visual Studio Code para el desarrollo, pero también puedes elegir un simple editor de texto y un navegador. En los siguientes pasos, crearemos un proyecto sencillo que te ayudará a comprender y aplicar Flexbox.

Principales Conclusiones

• Usar un servidor de desarrollo facilita trabajar en tus proyectos.
• Puedes trabajar sin frameworks para aprender los fundamentos de JavaScript y CSS.
• El archivo Index-HTML es el punto central de tu proyecto desde donde trabajarás.

Guía paso a paso

Primero, abre una terminal en Visual Studio Code o en otro programa de tu elección. Asegúrate de tener instalado Node.js antes de continuar. Es crucial para ejecutar los comandos de NPM.

Ahora puedes usar el paquete NPM para la estructuración del proyecto. Ingresa el comando npx create-v en la terminal para iniciar el proceso de creación de tu proyecto. Se te pedirá que descargues el paquete. Confirma esto.

Luego, ingresa el nombre para tu proyecto. Te recomiendo llamarlo simplemente "flexbox", ya que eso es precisamente de lo que se trata el tema. Después de ingresar el nombre, se te preguntará por un Framework de interfaz de usuario. En este caso, elige "Vanilla JavaScript", ya que no estaremos utilizando ningún framework especial.

En el siguiente paso, se te preguntará si deseas usar TypeScript. Aquí también es recomendable elegir "no" para mantener las cosas simples y centrarte en las tecnologías principales.

Ahora casi has terminado. Solo necesitas cambiar al directorio de tu nuevo proyecto. Hazlo con el comando cd flexbox. Esto te llevará a la carpeta que acabas de crear.

Luego, ejecuta el comando npm install en la terminal. Esto instalará todos los paquetes necesarios para tu proyecto.

Una vez completado, inicia el servidor de desarrollo local con npm run dev. Esto abrirá tu proyecto y lo pondrá a disposición en un servidor local.

Ahora puedes echar un vistazo al archivo Index-HTML generado, que se encuentra en el directorio de tu proyecto. Este archivo es la parte más importante de tu proyecto, donde crearás todo tu contenido y estructuras.

Lo siguiente que haremos es eliminar el script estándar generado para el proyecto. No necesitamos utilizar el script main.js desde el principio, así que simplemente elimínalo. Además, puedes quitar la hoja de estilos style.css, ya que inicialmente queremos manejar todo en el Index-HTML.

En el Index-HTML construiremos la estructura de contenedores con Flexbox. Necesitamos un contenedor principal que a su vez contendrá varios contenedores secundarios. Esta es una estructura básica que necesitamos para Flexbox.

Para ver tus cambios en el navegador, abre Chrome y ve a http://localhost:3000. Cuando inicies el servidor de desarrollo, se te mostrará la URL a través de la cual puedes acceder a tu archivo Index-HTML.

Te recomiendo utilizar la tecla Ctrl (o Command en Mac) al abrir enlaces en el navegador para abrirlos directamente en el navegador predeterminado. De esta manera, puedes ver tus cambios fácilmente.

Una vez que la página esté abierta, por ejemplo, puedes cambiar el título en el Index-HTML de "Weed App" a "Flexbox" y guardar los cambios. La actualización en vivo mostrará tus cambios inmediatamente en el navegador.

Puedes agregar más texto a la página, por ejemplo, "Curso de Flexbox", y ver cómo se actualiza dinámicamente el texto sin necesidad de recargar manualmente la página. Esta vista previa en tiempo real facilita enormemente el trabajo.

Los ejemplos de Flexbox se trabajarán en la siguiente etapa en el archivo Index-HTML. Aquí es donde diseñaremos el diseño con CSS y crearemos los contenedores Flexbox. Estad atentos a los próximos videos en los que profundizaremos en las técnicas de Flexbox.

Resumen

En este tutorial has aprendido cómo configurar un proyecto simple para trabajar con CSS Flexbox. Has identificado los fundamentos de la estructura del proyecto, preparado el archivo Index-HTML y utilizado el servidor de desarrollo local. Estos son los primeros pasos en tu camino para dominar Flexbox.