Loading repository data…
Loading repository data…
YoniiDev / repository
Este repositorio contiene el proyecto realizado durante el curso de Desarrollo Web en CoderHouse. Se trata de un sitio web estático de tipo e-commerce, construido desde cero utilizando HTML, CSS, Bootstrap y SASS.
ZeroLag es un sitio web estático de tipo e-commerce, creado durante el curso de Desarrollo Web en CoderHouse. Este sitio simula una tienda de productos y servicios tecnológicos. Fue elaborado desde cero utilizando tecnologías como HTML, CSS y Bootstrap.
Catálogo de productos: Los usuarios pueden visualizar un catálogo de productos disponibles para la venta, con detalles y precios.
Navegación entre páginas: El sitio web cuenta con cinco páginas diferentes: Inicio, Nosotros, Productos, Servicios, Contacto y Experiencia. Los usuarios pueden acceder fácilmente a cada una de estas páginas desde el menú de navegación ubicado en el encabezado.
Redes Sociales: Incluye enlaces que simulan redirigir a los usuarios a las redes sociales de la tienda.
Carrusel: Presenta un carrusel dinámico que destaca las mejores ofertas de la tienda.
Etiquetas Semánticas: Se han utilizado etiquetas semánticas en la estructura del sitio web para mejorar la accesibilidad y el posicionamiento en los motores de búsqueda.
Estilos anidados: Se ha utilizado SASS (Syntactically Awesome Stylesheets), un preprocesador de CSS, para organizar y anidar los estilos de manera jerárquica (padre-hijo), lo que genera un CSS más limpio y organizado.
Animación y transición: Al posicionar el ratón sobre una tarjeta de producto, esta se agrandará ligeramente en comparación con las demás, simulando un acercamiento a la pantalla.
Imagenes dimensionadas: Cada imagen está dimensionada según el tamaño requerido en la página, lo que ayuda a la optimización del sitio web y al posicionamiento en los motores de búsqueda.
Etiquetas Meta: Se han utilizado las etiquetas meta description y meta keyword en cada una de las páginas del sitio web para mejorar el posicionamiento en los motores de búsqueda.
Formulario de Contacto: Se elaboró la estructura de un formulario de contacto utilizando HTML y CSS.
Responsive: El sitio web ZeroLag es totalmente responsivo hasta un ancho mínimo de 320px, pudiéndose visualizar en varios tamaños de pantalla: celular, tablet o desktop.
Antes de instalar y ejecutar el proyecto ZeroLag, asegúrate de tener lo siguiente:
Sigue estos pasos para instalar y ejecutar el proyecto ZeroLag en tu máquina local:
Definir directorio
Se recomienda tener definido el directorio donde se clonará el proyecto y abrir el Visual Studio Code haciendo referencia a la ruta de esa carpeta.
Clonar el repositorio
Una vez definido el directorio donde se clonará el proyecto, en la terminal de Visual Studio Code, ejecuta el siguiente comando para clonar el repositorio a tu máquina local:
```sh
git clone https://github.com/YoniiDev/ZeroLag.git
Si estás utilizando un entorno de desarrollo con soporte para Live Server, puedes clonar el proyecto en ese entorno para una mejor experiencia de desarrollo.
Navegar al directorio del proyecto
Cambia el directorio actual a la carpeta del proyecto clonado, para eso copie el siguiente código:
cd ZeroLag
Abrir el proyecto
Ahora puedes abrir el archivo index.html en tu navegador web favorito para ver el sitio web.
En el Visual Studio Code, instala la extensión Live Server. Una vez finalizada la instalación de la extensión, haz clic derecho en el archivo index.html y selecciona "Open with Live Server".
Instalar dependencias (opcional)
Si deseas modificar y desarrollar el proyecto utilizando SASS y otras herramientas, asegúrate de tener Node.js y npm instalados, luego ejecuta el siguiente comando para instalar las dependencias:
```sh
npm install
Después de instalar las dependencias, puedes ejecutar el preprocesador SASS para compilar los estilos:
```sh
npm run watch-css
Esto compilará los archivos SASS a CSS y aplicará los cambios en tiempo real. Cabe destacar que solo se deben modificar los estilos en los archivos con la extensión .scss y no modificar, por ningún motivo, el archivo estilos.css.
Personalizar el proyecto
Ahora puedes realizar modificaciones en el proyecto según tus necesidades. Todos los archivos HTML, CSS, y SASS están organizados en sus respectivos directorios.
¡Listo! Ahora deberías tener el proyecto ZeroLag instalado y listo para usar en tu máquina local. Si tienes algún problema durante el proceso de instalación, no dudes en revisar la documentación oficial de las herramientas mencionadas.
Una vez que hayas instalado el proyecto ZeroLag siguiendo las instrucciones de la sección anterior, puedes utilizar el sitio web e-commerce de la siguiente manera:
Abrir el sitio web
Inicia el servidor de desarrollo Live Server en Visual Studio Code y el sitio web se abrirá automáticamente en tu navegador predeterminado. La siguiente imagen muestra cómo iniciar la extensión Live Server desde la barra de estado de Visual Studio Code.