Gracias por visitar este desafío de codificación frontal.
Frontend Mentor cLos desafíos 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 y CSS. **
Su desafío es desarrollar esta tarjeta de vista previa del blog 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:
- Consulte los estados de Hover y Focus para todos los elementos interactivos en la página
¿Quieres un poco de apoyo en el desafío? Join our community y hacer preguntas en el canal **#ayuda **.
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 JPG 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 bocetos y figma) para inspeccionar el diseño con más detalle, puede subscribe as a PRO member.
Todos los activos requeridos para este proyecto están en la carpeta /Assets.Las imágenes ya están exportadas para el tamaño de pantalla correcto y optimizadas.
También incluimos archivos de fuentes variables y estáticos para las fuentes requeridas para este proyecto.Puede elegir vincular a Google Fonts o usar los archivos de fuentes locales para alojar las fuentes usted mismo.Tenga en cuenta que hemos eliminado los archivos de fuentes estáticos para los pesos de fuentes que no son necesarios para este proyecto.
También hay una style-guide.md Archivo que contiene la información que necesitará, como la paleta de colores y las fuentes.
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:
- 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, have a read-through of this Try Git resource.
- 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.
- 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.
- 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.
- Escriba los estilos base para su proyecto, incluidos los estilos generales de contenido, como
font-familyyfont-size. - Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
Como se mencionó anteriormente, hay muchas formas de alojar su proyecto de forma gratuita.Nuestros anfitriones de recomendación son:
Puede alojar su sitio utilizando una de estas soluciones o cualquiera de nuestros otros proveedores de confianza. Read more about our recommended and trusted hosts.
Recomendamos encarecidamente sobrescribir este Readme.md con uno personalizado.Hemos proporcionado una plantilla dentro delREADME-template.md Archivo 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.
Envíe su solución en la plataforma para que el resto de la comunidad lo vea.Seguir nuestro"Complete guide to submitting solutions" Para 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.
Hay varios lugares en los que puede compartir su solución:
- Comparta su página de soluciones en el canal **#terminados ** canal de nuestra [comunidad] (https://www.frontentmentor.io/community).
- Tweet @frontendmentor 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.
- Comparta su solución en otros canales sociales como LinkedIn.
- Blog 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 sondev.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.
¡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[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! ** 🚀