Gracias por comprobar este desafío de codificación de front-end.
Los desafíos de Frontend Mentor lo ayudan a mejorar sus habilidades de codificación mediante la construcción de proyectos realistas.
Para hacer este desafío, necesita un conocimiento básico de HTML, CSS y JavaScript.
El reto Su desafío es construir esta página de destino y hacer que se parezca lo más posible al diseño.
Este desafío se centra principalmente en HTML y CSS. Hay un poco de JS incluido para la palanca de navegación móvil. ¡Pero también puedes optar por hacer esto sin JS!
Puedes usar cualquier herramienta que te guste para ayudarte a completar el desafío. Entonces, si tienes algo que te gustaría practicar, no dudes en intentarlo.
Sus usuarios deberían poder:
Ver el diseño óptimo para el sitio según el tamaño de la pantalla de su dispositivo Ver estados de desplazamiento para todos los elementos interactivos en la página ¿Quieres apoyo en el desafío? Únase a nuestra comunidad de Slack y haga preguntas en el canal #help .
Donde encontrar todo Su tarea es construir el proyecto con los diseños dentro de la /designcarpeta. Encontrará una versión móvil y de escritorio del diseño.
Los diseños están en formato estático JPG. El uso de JPG significará que deberá utilizar su mejor criterio para estilos como font-size, paddingy margin.
Si desea que los archivos de diseño (proporcionamos versiones de Sketch y Figma) para inspeccionar el diseño con más detalle, puede suscribirse como miembro PRO .
Encontrará todos los activos necesarios en la carpeta de /images. Los activos ya están optimizados.
También hay un archivo de style-guide.md que contiene la información que necesitará, como la paleta de colores y las fuentes.
Construyendo tu proyecto No dude en utilizar cualquier flujo de trabajo con el que se sienta cómodo. A continuación se muestra un proceso sugerido, pero no cree que deba seguir estos pasos:
Inicialice su proyecto como un repositorio público en GitHub . La creación de 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, lea este recurso Try Git . 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 de su proyecto con la URL de su repositorio. Hay varias formas de hacerlo y a continuación ofrecemos algunas recomendaciones. Mire los diseños para comenzar a planificar cómo abordará el proyecto. Este paso es crucial para ayudarlo a pensar en el futuro para que las clases de CSS creen estilos reutilizables. Antes de agregar cualquier estilo, estructura tu contenido con HTML. Escribir su HTML primero puede ayudarlo a enfocar su atención en la creación de contenido bien estructurado. Escriba los estilos base para su proyecto, incluidos los estilos de contenido general, como font-familyy font-size. Comience a agregar estilos en la parte superior de la página y trabaje hacia abajo. Solo pase a la siguiente sección una vez que esté satisfecho 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 Vercel Netlify Puede alojar su sitio utilizando una de estas soluciones o cualquiera de nuestros otros proveedores de confianza. Lea más sobre nuestros hosts recomendados y de confianza .
Crea una personalizada README.md Recomendamos encarecidamente sobrescribir esto README.mdcon uno personalizado. Hemos proporcionado una plantilla dentro del README-template.mdarchivo en este código de inicio.
La plantilla proporciona una guía sobre qué agregar. Una costumbre README le 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 README-template.mdarchivo a README.md. Eso hará que se muestre como el archivo README de su repositorio.
Envío de su solución Envíe su solución en la plataforma para que la vea el resto de la comunidad. Siga nuestra "Guía completa para enviar soluciones" para obtener sugerencias sobre cómo hacer esto.
Recuerde, si está buscando comentarios sobre su solución, asegúrese de hacer preguntas cuando la envíe. Cuanto más específico y detallado sea con sus preguntas, mayor será la probabilidad de que obtenga comentarios valiosos de la comunidad.
Compartiendo tu solución Hay varios lugares en los que puede compartir su solución:
Comparta la página de su solución en el canal de # proyectos terminados de la comunidad de Slack . Tweet @frontendmentor y mención @frontendmentor , incluyendo el repositorio y la URL en vivo en el tweet. Nos encantaría echar un vistazo a lo que ha construido y ayudar a compartirlo. Comparta su solución en otros canales sociales como LinkedIn. Blog sobre su experiencia en la construcción de su proyecto. Escribir sobre su flujo de trabajo, opciones técnicas y hablar a través de su código es una forma brillante de reforzar lo que ha aprendido. Grandes plataformas para escribir son dev.to , Hashnode y CodeNewbie . Proporcionamos plantillas para ayudarlo a compartir su solución una vez que la haya enviado a la plataforma. Edítelos e incluya preguntas específicas cuando busque comentarios.
Cuanto más específico sea con sus preguntas, más probable será que otro miembro de la comunidad le dé su opinión.
¿Tiene comentarios para nosotros? ¡Nos encanta recibir comentarios! Siempre buscamos mejorar nuestros desafíos y nuestra plataforma. Entonces, si tiene algo que le gustaría mencionar, envíe un correo electrónico a hola [at] frontendmentor [dot] io.
Este desafío es completamente gratuito. Compártelo con cualquier persona que lo encuentre útil para practicar.
¡Diviértete construyendo! 🚀