todo app frontend mentor

Mentor frontend - aplicación TODO

¡Bienvenido!

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

Los desafíos de Mentor Frontend le permiten mejorar sus habilidades en un flujo de trabajo de la vida real.

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

El desafío

Su desafío es desarrollar esta aplicación TODO 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 la aplicación dependiendo del tamaño de la pantalla de su dispositivo
• Consulte los estados de Hover para todos los elementos interactivos en la página
• Agregue nuevos TODOS a la lista
• Mark Todos como completo
• Eliminar TODOS de la lista
• Filtrar por todos/activo/complete TODOS
• Borrar todas las TODOS completadas
• Alternar el modo de luz y oscuro
• Bonificación : arrastre y suelte para reordenar los elementos en la lista

¿Quieres un poco de apoyo en el desafío? Únase a nuestra comunidad Slack 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á un móvil y una versión de escritorio del diseño para trabajar.

Los diseños están en formato estático JPG. Esto significará que necesitará usar su mejor juicio para estilos como font-size , padding y margin . Esto debería ayudarlo a entrenar su ojo para percibir diferencias en los espacios y tamaños.

Si desea que los archivos de diseño (proporcionamos versiones de boceto y figma) para inspeccionar el diseño con más detalle que 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. Esto facilitará compartir su código con la comunidad si necesita ayuda. Si no está seguro de cómo hacer esto, lea este recurso de prueba de prueba.
2. Configure su repositorio para publicar su código en una URL. 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 maneras de hacer esto, pero recomendamos usar VERCEL. Tenemos más información sobre la implementación de su proyecto con Verccel 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 que podría crear para hacer 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 varias formas de alojar su proyecto de forma gratuita. Recomendamos usar Vercel, ya que es un servicio increíble y extremadamente simple de configurar. Si desea usar Vercel, aquí hay algunos pasos a seguir para comenzar:

1. Regístrese en Vercel y pase por el flujo de incorporación, asegurando que su cuenta de GitHub esté conectada utilizando su Vercel para la integración de GitHub.
2. Conecte su proyecto a VERCEL en la página "Importar proyecto", utilizando el botón "Desde Git Repository" y seleccionando el proyecto que desea implementar.
3. Una vez conectado, cada vez que se git push , Vercel creará una nueva implementación y la URL de implementación se mostrará en su tablero. También recibirá un correo electrónico para cada implementación con la URL.

Compartiendo tu solución

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

1. Envíelo en la plataforma para que otros usuarios vean su solución en el sitio. Aquí está nuestra "Guía completa para enviar soluciones" para ayudarlo a hacerlo.
2. Comparta su página de soluciones en el canal #terminado de los proyectos de la comunidad Slack.
3. Tweet @frontentmentor y mencione @Frontendmentor , 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.

Dar retroalimentación

Los comentarios siempre son bienvenidos, por lo que si tiene alguno para dar este desafío, por correo electrónico, envíe un correo electrónico hola [at] frontendmentor [dot] io.

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

¡Diviértete construyendo!

Patrocinadores de la comunidad

¡Un gran agradecimiento a nuestros patrocinadores de la comunidad!

• Zero to Mastery es un increíble recurso de aprendizaje para todo lo relacionado con el desarrollo web. Dirigido por Andrei Neagoie, los cursos son muy contenidos de alta calidad y cubren una amplia gama de habilidades en demanda.
• Diversify Tech es un recurso increíble para personas subrepresentadas en tecnología. El sitio presenta listados de trabajo para cualquier persona que busque nuevas oportunidades. ¡La sección de recursos también está llena de enlaces útiles para sumergirse!
• Triplebyte es una oferta realmente agradable si está buscando un nuevo papel. Es un servicio gratuito que le permite hacer una prueba confidencial. ¡Según sus resultados, las compañías lo presentarán por sus roles vacantes!