FrontEndBasics

Front End Basics - HTML, JavaScript CSS & Bootstrap Project

Descripción del Proyecto

Este proyecto es una página web para un negocio ficticio llamado "My Business Webpage", desarrollado en grupo. La estructura incluye varias secciones:

• Header: Contiene el nombre del negocio y una barra de navegación.
• Quiénes Somos: Una sección que describe la empresa.
• Servicios: Detalle de los servicios que ofrece la empresa.
• Portafolio: Muestra imágenes de animales generadas desde una API, implementando lazy loading para mejorar la carga de contenido.
• Ubicación: Información de contacto y ubicación de la empresa.
• Correo Electrónico: Un formulario para que los usuarios puedan contactarnos vía email.

Tecnologías Utilizadas

• HTML5: Para estructurar el contenido de la página.
• CSS3: Para estilizar y darle diseño a la página.
• Bootstrap 5: Para facilitar la creación de un diseño responsivo y mejorar la experiencia del usuario en diferentes dispositivos.
• Font Awesome: Para incluir iconos en la sección de servicios.
• JavaScript: Para añadir interactividad y mejorar la funcionalidad de la página.

Aprendizajes

Durante el desarrollo de este proyecto, hemos aprendido y aplicado varios conceptos clave del desarrollo Front End:

• Estructura HTML: Cómo organizar y estructurar una página web utilizando etiquetas semánticas de HTML.
• CSS y Diseño: Aplicar estilos avanzados con CSS, incluyendo el uso de flexbox y grid para el diseño responsivo.
• Bootstrap: Integrar Bootstrap para agilizar el desarrollo y garantizar una buena responsividad en dispositivos móviles y de escritorio.
• Media Queries: Utilizar media queries para adaptar el diseño a diferentes tamaños de pantalla.
• Interactividad con CSS: Añadir efectos y transiciones para mejorar la experiencia del usuario.

Proceso de Diseño

Para el diseño de este proyecto, utilizamos Figma como parte de nuestra práctica en las clases de UI/UX. Esto nos permitió aplicar los conocimientos adquiridos en diseño y crear una experiencia visual atractiva.

Estructura del Proyecto

El proyecto está organizado en los siguientes archivos:

• index.html: Contiene la estructura HTML de la página.
• styles/: Carpeta que contiene los estilos CSS personalizados:
  • light.css: Estilos para el modo claro.
  • dark.css: Estilos para el modo oscuro.
• scripts/: Carpeta que incluye los archivos de código JavaScript.
• img/: Carpeta que contiene las imágenes utilizadas en la página.