'/%3e%3cuse%20xlink:href='%23b'%20fill='%23fff'/%3e%3cpath%20fill='%23000'%20d='m366.1%20186.5-.3-19.5c0-4.2-3.5-8-7.9-8h-43.1v251.7h-80.7l-10.9-1c-10.3-1.5-18.7-7.2-23.3-16.9l-39.1-81.5c-3.9-8.1-10.6-11.5-19.5-12l-26.2-.3v-46.9l39.7-.6c16.1-.2%2029.1-10.9%2033.8-26%204.1-14.2%204.2-28.7-.6-42.7-5.2-13.8-17.3-23.5-32.3-23.7l-40.6-.4v-46.8H159c9.8%200%2019.1%201.7%2028.4%204.2%2023.1%207.1%2041.3%2023.2%2050.2%2046%2016.5%2042.1%206.1%20100-39.1%20118.9%205.1%203.9%2010.1%208.1%2013%2014.1l27.9%2058.9c2.2%204.6%206.2%208.6%2011.4%208.8l12.1.5v-251h128.5c7.3%200%2013.3%203.7%2017.2%209.2%201.6%204.7%203.1%209.9%203.1%2014.9l.2%2050c-15.2.6-29.5.5-45.8.1'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Vídeo de la lección
Contenido de la lección
Bienvenido a la segunda parte de nuestro tutorial sobre cómo crear un impresionante link in bio que funcione como tu tarjeta digital de contacto. En esta parte, profundizaremos en el desarrollo detallado de la tarjeta utilizando HTML y CSS, y posteriormente, la desplegaremos en línea usando GitHub Pages.
💻 Contenido del video:
- Desarrollo con HTML y CSS
Personalización del diseño: Aprende a agregar imágenes, iconos y texto personalizado a tu tarjeta de presentación. Utilizaremos HTML para estructurar el contenido y CSS para estilizar y hacer que tu tarjeta sea visualmente atractiva. Efectos interactivos: Descubre cómo agregar efectos de transición y hover para hacer que tu tarjeta sea interactiva. Usaremos CSS para crear estos efectos y mejorar la experiencia del usuario. Optimización para dispositivos móviles: Asegúrate de que tu tarjeta se vea bien en todos los dispositivos. Aprenderás a hacer que tu diseño sea responsivo utilizando media queries en CSS.
- Despliegue en GitHub Pages
Configuración de GitHub Pages: Aprende a crear un repositorio en GitHub y configurar GitHub Pages para desplegar tu proyecto. Veremos paso a paso cómo inicializar un repositorio, agregar tus archivos HTML y CSS, y habilitar GitHub Pages. Subir el proyecto a GitHub: Entiende cómo usar Git para subir tu proyecto a un repositorio de GitHub. Verificar el despliegue: Una vez desplegado, verificaremos que todo funcione correctamente y esté accesible desde una URL pública.
Ejemplo práctico y recursos
Código completo: Accede al código completo del proyecto a través de los enlaces en la descripción del video. Recursos adicionales: Encontrarás enlaces a recursos adicionales, como tutoriales sobre Git y GitHub Pages, para profundizar en los conceptos.
👨🏻💻 ¿Por qué ver este video?
Aprende de expertos: Nuestros videos están creados por profesionales con experiencia en desarrollo web y diseño. Tutoriales prácticos: Cada paso está detallado para que puedas seguir fácilmente y aplicar los conocimientos en tus propios proyectos. Despliegue en línea: Aprende a desplegar tu proyecto en línea de manera gratuita utilizando GitHub Pages.
🔹 Timestamps
00:00 - Introducción
00:57 - 04. Desarrollo - Organización del proyecto
03:44 - 04. Desarrollo - Estructura (index.html)
08:11 - 04. Desarrollo - Apariencia (style.css)
15:42 - 05. Despliegue
17:24 - 05. Despliegue - Nuevo repositorio en GitHub
18:48 - 05. Despliegue - Configuración de GitHub Pages
20:00 - 05. Despliegue - Corrección de detalles
20:40 - Conclusión
🚀 Repositorio del proyecto en GitHub
Tarjeta digital