easybank landing page

Mentor frontend - Página de destino de EasyBank

¡Bienvenido!

Gracias por visitar este desafío de codificación frontal.

Los desafíos de Mentor Frontend lo ayudan a mejorar sus habilidades de codificación mediante la creación de proyectos realistas.

Para hacer este desafío, necesita una comprensión básica de HTML, CSS y JavaScript.

El desafío

Su desafío es desarrollar esta página de destino y hacer que se vea lo más cerca posible del diseño.

Puede usar cualquier herramienta que le guste para ayudarlo a completar el desafío. Entonces, si tienes algo que te gustaría practicar, siéntete libre de intentarlo.

Sus usuarios deberían poder:

• Ver el diseño óptimo para el sitio dependiendo del tamaño de la pantalla de su dispositivo
• Consulte los estados de Hover para todos los elementos interactivos en la página

¿Quieres un poco de apoyo en el desafío? Únase a nuestra comunidad y haga preguntas en el canal #Help .

Donde encontrar todo

Su tarea es desarrollar el proyecto a los diseños dentro de la carpeta /design . Encontrará tanto un móvil como una versión de escritorio del diseño.

Los diseños están en formato estático JPG. El uso de JPGS significará que necesitará usar su mejor juicio para estilos como font-size , padding y margin .

Si desea que los archivos de diseño (proporcionamos versiones de boceto y figma) para inspeccionar el diseño con más detalle, puede suscribirse como miembro profesional.

Encontrará todos los activos requeridos en la carpeta /images . Los activos ya están optimizados.

También hay un archivo style-guide.md que contiene la información que necesitará, como la paleta de colores y las fuentes.

Construyendo su proyecto

Siéntase libre de usar cualquier flujo de trabajo con el que se sienta cómodo. A continuación se muestra un proceso sugerido, pero no sienta que necesita seguir estos pasos:

1. Inicialice su proyecto como repositorio público en GitHub. Crear un repositorio hará que sea más fácil compartir su código con la comunidad si necesita ayuda. Si no está seguro de cómo hacer esto, tenga una lectura de este recurso de prueba Git.
2. Configure su repositorio para publicar su código en una dirección web. Esto también será útil si necesita ayuda durante un desafío, ya que puede compartir la URL para su proyecto con su URL de repositorio. Hay varias formas de hacer esto, y proporcionamos algunas recomendaciones a continuación.
3. Mire a través de los diseños para comenzar a planificar cómo abordará el proyecto. Este paso es crucial para ayudarlo a pensar con anticipación para las clases de CSS para crear estilos reutilizables.
4. Antes de agregar cualquier estilos, estructura tu contenido con HTML. Escribir su HTML primero puede ayudarlo a centrar su atención en crear contenido bien estructurado.
5. Escriba los estilos base para su proyecto, incluidos los estilos generales de contenido, como font-family y font-size .
6. Comience a agregar estilos a la parte superior de la página y trabaje. Solo pase a la siguiente sección una vez que esté contento de haber completado el área en la que está trabajando.

Implementar su proyecto

Como se mencionó anteriormente, hay muchas formas de alojar su proyecto de forma gratuita. Nuestros anfitriones recomendados son:

• Páginas de Github
• Velo
• Netlificar

Puede alojar su sitio utilizando una de estas soluciones o cualquiera de nuestros otros proveedores de confianza. Lea más sobre nuestros anfitriones recomendados y de confianza.

Crear un README.md personalizado

Recomendamos encarecidamente sobrescribir este README.md con uno personalizado. Hemos proporcionado una plantilla dentro del archivo README-template.md en este código de inicio.

La plantilla proporciona una guía sobre qué agregar. Un README personalizado lo ayudará a explicar su proyecto y reflexionar sobre sus aprendizajes. No dude en editar nuestra plantilla tanto como desee.

Una vez que haya agregado su información a la plantilla, elimine este archivo y cambie el nombre del archivo README-template.md a README.md . Eso hará que aparezca como el archivo ReadMe de su repositorio.

Enviar su solución

Envíe su solución en la plataforma para que el resto de la comunidad lo vea. Siga nuestra "Guía completa para enviar soluciones" para obtener consejos sobre cómo hacer esto.

Recuerde, si está buscando comentarios sobre su solución, asegúrese de hacer preguntas al enviarla. Cuanto más específico y detallado sea con sus preguntas, mayores serán las posibilidades de recibir comentarios valiosos de la comunidad.

Compartiendo tu solución

Hay varios lugares en los que puede compartir su solución:

1. Comparta su página de soluciones en el canal #terminado de los proyectos de la comunidad.
2. Tweet @frontentmentor y mencione @frontentmentor , incluidos el repositorio y las URL en vivo en el tweet. Nos encantaría echar un vistazo a lo que has construido y ayudar a compartirlo.
3. Comparta su solución en otros canales sociales como LinkedIn.
4. Blogue sobre su experiencia construyendo su proyecto. Escribir sobre su flujo de trabajo, opciones técnicas y hablar sobre su código es una forma brillante de reforzar lo que ha aprendido. Las excelentes plataformas para escribir son Dev.To, Hashnode y CodeNewbie.

Proporcionamos plantillas para ayudarlo a compartir su solución una vez que la haya enviado en la plataforma. Editarlos e incluya preguntas específicas cuando esté buscando comentarios.

Cuanto más específica sea con sus preguntas, más probable es que otro miembro de la comunidad le brinde comentarios.

¿Tienes comentarios para nosotros?

¡Nos encanta recibir comentarios! Siempre estamos buscando mejorar nuestros desafíos y nuestra plataforma. Entonces, si tiene algo que le gustaría mencionar, por favor envíe un correo electrónico hola [a] Frontendmentor [dot] io.

Este desafío es completamente gratuito. Compártelo con cualquiera que lo encuentre útil para la práctica.

¡Diviértete construyendo!