Tarjeta digital o Link in bio desde cero - Creación de una tarjeta digital de contacto con HTML y CSS

Este repositorio contiene el código fuente del proyecto mostrado en el video tutorial de YouTube sobre cómo realizar una tarjeta digital o link in bio desde cero utilizando HTML y CSS .

📝 Descripción del tutorial

En el video, te guiaré a través de los primeros pasos en la creación de un proyecto web:

1. Briefing del proyecto web: Cómo estructurar las ideas y objetivos del proyecto.
2. Planificación : Organizamos el proyecto para realizar el diseño y desarrollo de nuestra tarjeta digital.
3. Diseño o prototipado : Realizamos el diseño de un mockup a partir de diversos materiales de inspiración.
4. Desarrollo: Creación de la estructura básica: Uso de HTML y CSS para construir el esqueleto del sitio.
5. Subida del proyecto a GitHub: Primeros pasos para hacer visible tu trabajo en un repositorio.
6. Despliegue en GitHub Pages : Configuramos GitHub Pages para hacer accesible y navegable nuestra tarjeta digital a todo el mundo.

📌 Contenido del video

• Briefing: Cómo planificar los objetivos y estructura de un sitio web.
• Sketch : Diseñamos un mockup realista.
• HTML y CSS: Creación de la estructura y apariencia de nuestra tarjeta digital.
• GitHub: Subida y gestión del proyecto en un repositorio.

🕒 Timestamps

PARTE 1: Crea un impresionante Link in Bio o tarjeta digital: Parte 1 | Diseño UX/UI

00:00 - Introducción

00:40 - Presentación del proyecto

01:27 - 01. Briefing

02:28 - 02. Planificación

03:54 - ¿Cómo inspirarme?

08:03 - 03. Diseño

13:38 - Conclusión primera parte

PARTE 2: Crea un impresionante Link in Bio o tarjeta digital: Parte 2 | Desarrollo en HTML & CSS y despliegue en GitHub Pages

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

🚀 Próximos pasos

En la segunda parte del tutorial, completaremos el proyecto y te mostraré cómo publicarlo en un servidor utilizando FTP.

• Fecha de lanzamiento de la segunda parte: ¡Disponible el viernes!

📂 Repositorio

Este es el repositorio del código del proyecto:

• Repositorio de GitHub

🎥 Video del tutorial

Puedes ver los videos completos en YouTube

• Parte 1: https://youtu.be/4dN8bm2LAUw?si=o6pa0ppdUPtqOa4L
• Parte 2: https://www.youtube.com/watch?v=7FHASafgowQ&t=7s

🛠 Tecnologías utilizadas

• HTML
• CSS
• Sketch
• Git

🔔 Suscríbete para más contenido

No olvides suscribirte al canal y activar la campanita para recibir notificaciones de la segunda parte del tutorial y más contenido sobre desarrollo web.