large_Banner y tarjeta de Proyecto Landing Personal_Mesa de trabajo 1.png

medium_Banner y tarjeta de Proyecto Landing Personal_Mesa de trabajo 1.png

small_Banner y tarjeta de Proyecto Landing Personal_Mesa de trabajo 1.png

thumbnail_Banner y tarjeta de Proyecto Landing Personal_Mesa de trabajo 1.png

Banner y tarjeta de Proyecto Landing Personal_Mesa de trabajo 1.png

Muchas redes sociales solo nos permiten compartir un enlace, pero rara vez solo tenemos una cosa que queremos compartir. Es por eso, que se crearon las landings personales que nos permiten compartir fácilmente varios enlaces a nuestro contenido de valor.

En este proyecto vas a crear tu propio landing, que tenga los enlaces a tus otras redes sociales o contenido que hayas creado. La página que crearás debe de verse bien en celular y en escritorio, manteniendo un diseño simple.

Este proyecto se puede hacer solo con HTML+CSS.

Los enlaces que presentamos en el diseño son ejemplos, haz este proyecto tuyo agregando tus propios colores y enlaces de interés.

**Para considerar este proyecto como finalizado, deberás completar las siguientes tareas:**

1. Tener una imagen de perfil.
2. Pequeña biografía (140 caracteres máx).
3. Mínimo 3 enlaces.
4. Agregar los meta tags relevantes: `title, description, keywords`
5. [Meta tags sociales](https://css-tricks.com/essential-meta-tags-social-media/)

### Publicar tu landing personal utilizando GitHub Pages

Puedes publicar esta página utilizando GitHub Pages. De esta manera la URL para compartir tu landing se vuelve `https://[github_username].github.io` 

Un Ejemplo: [https://johnnietirado.github.io](https://johnnietirado.github.io)

Si quieres aprender cómo hacer esto puedes encontrarlo en el curso **GRATUITO** de [Git y GitHub](https://codealo.thinkific.com/courses/empezando-git-y-github)

Me gustaría crear interfaces agradables para el cliente. Diseñar y desarrollar la experiencia del usuario para una página web. 

thumbnail_product-hunt.png

product-hunt.png

Frontend

Me apasiona entregar una experiencia grata al usuario

Utilizar fundamentos de HTML y CSS, para poder crear una página web que esté lista para ser compartida con el mundo usando GitHub Pages.

Utiliza el tag de `<img/>` para mostrar tu foto de perfil.

Como usuario quiero tener una foto de perfil.

Como usuario quiero tener una biografía corta de 140 caracteres máximo

Estos enlaces pueden ser a diversas cuentas sociales (facebook, instagram, twitter, github, etc) o a artículos interesantes que nos interesan.

Recuerda utilizar el tag `<a/>` para esto.

Como usuario quiero compartir al menos 3 enlaces sociales.

Para lograr que un motor de búsqueda como Google muestre correctamente nuestra información debemos de incluir cierto código dentro del `index.html`

- [ ]  Agregar `<title/>`
- [ ]  Agregar un `<meta/>` con `name` de `description` con una breve descripción de tu página.

Como usuario quiero tener todos los requisitos para que un motor de búsqueda pueda leer la información de mi página.

OG o Open Graph son `meta` tags que nos permiten mostrar información al compartir nuestro enlace.

Aprende más sobre estos [aquí](https://css-tricks.com/essential-meta-tags-social-media/)

- [ ]  Agrega un `meta` tag con propiedad de `og:title` y `content` del título de tu página.
- [ ]  Agrega un `meta` tag con propiedad de `og:description` y `content` de la descripción de tu página.
- [ ]  Agrega un `meta` tag con propiedad de `og:image` y `content` con la URL a una imagén 1200x1200.
- [ ]  Agrega un `meta` tag con propiedad de `og:url` y `content` de la URL pública de tu página.

Ejemplo

```jsx
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
```

Como usuario quiero tener los enlaces de Open Graph para compartir mi página.

He estudiado los fundamentos y tengo conocimientos en un lenguaje de programación, pero no he hecho un proyecto por mi cuenta.

Landing Personal

Preguntas de para la comunidad

Vista Previa

Compartir Solución

Feedback de la Comunidad

Mantente al día

Podcast

Instagram

Cursos Codealo

Youtube

Twitter

Discord