diurivjWorkshopsTalksBlog

Crea tu Portafolio con HTML y CSS

04 June, 2020

El mundo tal y como lo conocemos hoy sería inimaginable sin Internet, y en realidad, una página web no es más que una colección de diferentes páginas HTML. Únete a nosotros y aprende a crear tu currículum con HTML, a diseñarlo con CSS y a lanzarlo con GitHub. Además, ¡aprenderás a hacer que tu currículum sea responsive para cualquier dispositivo móvil!

Presentación

Siéntete libre de revisar esta presentación como referencia.

CodeSandbox - Starter Code

Abre este CodeSandbox y empieza a programar. Automáticamente creara un fork (así es, un duplicado) para poder trabajar sin problemas.

¿Qué vamos a crear?

Vamos a crear la siguiente página web de un portafolio digital:

Resultado final

Puedes ver el resultado final esperado aquí, y aquí puedes ver el código.


Imagenes Avatar

Esta es la imagen avatar que usaremos en nuestro portafolio.

Copia este url y reemplazalo en el atributo src de la etiqueta img.

https://i.imgur.com/X7nm0R5.png

Este es un avatar alternativo que tal vez quieras usar.

Copia este url y reemplazalo en el atributo src de la etiqueta img.

https://i.imgur.com/T4EpAg6.png



Ejemplos de imágenes para el proyecto


Esta es una de las imágenes que usaremos para el proyecto.

Copia este url y reemplazalo en el atributo src de la etiqueta img.

https://i.imgur.com/4Qz4mxJ.png

Esta es otra de las imágenes que usaremos para el proyecto.

Copia este url y reemplazalo en el atributo src de la etiqueta img.

https://i.imgur.com/t0oWKrW.png



Texto Lorem Ipsum

Copia el texto que esta debajo y colocalo entre las etiquetas <p> </p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Hendrerit dolor magna eget est lorem ipsum. In aliquam sem fringilla ut morbi tincidunt augue interdum velit.
Tempus quam pellentesque nec nam aliquam sem et tortor. Diam vulputate ut pharetra sit amet aliquam id. Sed blandit
libero volutpat sed. Purus viverra accumsan in nisl nisi scelerisque. Posuere morbi leo urna molestie at elementum.
Laoreet id donec ultrices tincidunt arcu non sodales neque. Quis auctor elit sed vulputate mi. Et ultrices neque ornare
aenean euismod elementum nisi quis.



Colores

Usaremos la siguiente paleta de colores para darle estilos a nuestra página.

cornflowerblue
deepskyblue
aliceblue
gray
white



Imagen de fondo y color - body

Para agregar estilos adicionales al body y la pagina entera usaremos estilos generados automáticamente del sitio heropatterns.com.


Copia y pega las reglas de CSS que están debajo en el archivo style.css, dentro del selector body { }:

background-color: #ecf0f4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d1dbe3' fill-opacity='0.4'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

Víncula tu Resume/CV

Usa el siguiente link para acceder a una pagina con un resumen generado en formato .pdf.

Link:

https://app.box.com/s/esb7tleia8vml0njf53mdzeo7og0v0f5

Ejemplo:

<a href="https://app.box.com/s/esb7tleia8vml0njf53mdzeo7og0v0f5" target="_blank">
  <button class="btn">Ver mi CV</button>
</a>

Deployment (Publicación del sitio web)(GitHub)

  1. En la esquina superior derecha en la página de Code Sandbox, haz click en Sign in.

  2. Una ventana emergente aparecerá. Da click en Sing in with Github.

  3. Una nueva venta emergente aparecerá. Da click en Create an account.
  4. Escoge un nombre de usuario único, ingresa tu correo y password.

  5. Click en verificar y ajusta tu imagen de perfil para continuar.
  6. Finalmente da click en el boton que dice Create account.

Verificar correo

  1. Github te enviara un correo para verificar tu cuenta creada. Este correo tiene un boton que dice Verify. Da click y continua.
  2. Despues de haber verificado tu cuenta, puedes regresar a nuestro proyecto en Code Sandbox y da click en Sign in (esuina superior derecha).

  3. Aparecera una ventana emergente diciendo Authorize codesandbox.

    Da Click en el boton Authorize codesandbox.

  4. Como el repo es una copia del codigo del webinar, primero tiene que forkear el repo (boton en la esquina superior derecha) y crea tu propia copia.

  5. Despues de hacer esto, en la parte izquierda de la pantalla da click en el icono de Github, aqui si es necesario vuelve a iniciar sesion, o, da click en Export to GitHub, define un nombre (sin espacios, por ejemplo my-resume) para el repositorio y da click en Create Repository.

  6. Una vez que el repositorio se creo, abre tu cuenta de GitHub visitando www.github.com.

Deploy con GitHub y GitHub Pages

  1. Una vez en GitHub, abre la lista de tus repositorios, dando click en el menu de la esquina superior derecha.

  2. Selecciona el repositorio creado previamente que contiene nuestro proyecto de Code Sandbox.

  3. Esto abrira la pagina de nuestro repositorio. Esta sera la pagina que publicaremos en los servidores de GitHub. A continuacion crearemos un sitio web usando GitHub Pages y asi hacer nuesto contenido disponible online para el publico (deployed) para que cualquiera pueda verlo.
  4. Da Click en la pestaña de Settings.

  5. Una vez en la pagina de Settings, desliza abajo hasta encontrar GitHub Pages (1).
  6. Da Click en el menu desplegable debajo de la linea Sources (2).
  7. Establece el source a master, dando click en master branch (3).
  8. Esto empujara nuestra pagina a los servidores de GitHub y publicara nuestra pagina con nuestro portafolio. Nos dara un link para que podamos visitar nuestra pagina ya publicada (4).

Creditos