Gracias por comprobar este desafío de codificación de front-end.
Frontend Mentor Los desafíos le ayudan a mejorar sus habilidades de codificación mediante la creación de proyectos realistas.
Para hacer este desafío, necesita un conocimiento básico de HTML y CSS.
Su desafío es construir este componente de tarjeta de resumen de pedidos y lograr que se parezca lo más posible al diseño.
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 estados de desplazamiento para elementos interactivos
¿Quieres apoyo en el desafío? Join our Slack community and ask questions in the #help channel.
Su tarea es construir el proyecto con los diseños dentro de la carpeta / design. Encontrará una versión del diseño tanto para dispositivos móviles como para computadoras de escritorio.
Los diseños están en formato estático JPG. El uso de archivos JPG significará que deberá utilizar su mejor criterio para estilos como tamaño de fuente, relleno y margen.
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] (https://www.frontendmentor.io/pro).
Encontrará todos los recursos necesarios en la carpeta / images. Los activos ya están optimizados.
También hay un archivo style-guide.md que contiene la información necesaria, como la paleta de colores y las fuentes.
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] (https://github.com/). 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] (https://try.github.io/).
- 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.
- Revise 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, estructure su 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-familyyfont-size. - Comience a agregar estilos en la parte superior de la página y continúe hacia abajo. Solo pase a la siguiente sección una vez que esté satisfecho de haber completado el área en la que está trabajando.
Como se mencionó anteriormente, hay muchas formas de alojar su proyecto de forma gratuita. Nuestros anfitriones recomendados son:
- [Páginas de GitHub] (https://pages.github.com/)
- [Vercel] (https://vercel.com/)
- [Netlify] (https://www.netlify.com/)
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 confiables] (https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe).
Recomendamos encarecidamente sobrescribir este README.md con uno personalizado. Hemos proporcionado una plantilla dentro del archivo [README-template.md] (./ README-template.md) en este código de inicio.
La plantilla proporciona una guía sobre qué agregar. Un "README" personalizado 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 archivo README-template.md a README.md. Eso hará que se muestre como el archivo README de su repositorio.
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"] (https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) para obtener consejos sobre cómo hacer esta.
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.
Hay varios lugares en los que puede compartir su solución:
- Comparta la página de su solución en el canal ** # proyectos terminados ** de la [comunidad de Slack] (https://www.frontendmentor.io/slack).
- Envíe un tweet a [@frontendmentor] (https://twitter.com/frontendmentor) y mencione ** @ frontendmentor **, incluidos el repositorio y las URL activas 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 sobre su código es una forma brillante de reforzar lo que ha aprendido. Grandes plataformas para escribir son [dev.to] (https://dev.to/), [Hashnode] (https://hashnode.com/) y [CodeNewbie] (https://community.codenewbie.org /).
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.
¡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! ** 🚀