social media dashboard with theme switcher

Frontend Mentor - Dashboard de redes sociales con conmutador de temas

¡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 comprensión básica de HTML, CSS y un poquito de JavaScript.

El desafío

Su desafío es desarrollar este tablero de redes sociales 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
• Termine el tema de color a su preferencia

¿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 el archivo de boceto para inspeccionar el diseño con más detalle, está disponible para comprar en la página de desafío en la plataforma.

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 formas de hacer esto, pero recomendamos usar ZEIT ahora. Tenemos más información sobre cómo implementar su proyecto con Zeit 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 Zeit ahora, ya que es un servicio increíble y extremadamente simple de configurar. Si desea usar ZEIT, aquí hay algunos pasos a seguir para comenzar:

1. Regístrese en ZEIT ahora y pase por el flujo de incorporación, asegurando que su cuenta de GitHub esté conectada utilizando su ZEIT ahora para la integración de GitHub.
2. Conecte su proyecto a ZEIT ahora desde la página "Crear un nuevo proyecto", utilizando el botón "Nuevo proyecto desde GitHub" y seleccionando el proyecto que desea implementar.
3. Una vez conectado, cada vez que git push , Zeit ahora creará una nueva implementación y la URL de implementación se mostrará en su tablero Zeit. 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. Otros usuarios podrán darle comentarios, lo que podría ayudar a mejorar su código para el próximo proyecto.
2. Comparta su repositorio y URL en vivo en el canal #terminados 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!