¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Comienza en:

03D

13H

28M

02S

130

Crea la página web de tu Curriculum Vitae (CV) con Figma y CSS

13666Puntos

hace 2 meses

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Conoce la anatomía de un documento HTML, sus elementos y las propiedades de CSS. Maqueta las pantallas principales de tu página web con responsive design. ¡Conviertete en Frontend Developer con Platzi!

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez vamos a hacer el diseño con Figma y maquetación con CSS de nuestra página web con portafolio.

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

1

Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

Paso 0: planeación

Para este reto, te propongo que realices los siguientes 6 pasos:

  1. Crea tu Curriculum Vitae en Canva
  2. Define el contenido que quieres plasmar en tu página web
  3. Realiza el diseño de tu página web en baja fidelidad con Figma
  4. Realiza la maquetación básica de tu página web
  5. Embellece tu página web: agrega tu propio estilo y Curriculum Vitae
  6. ¡Compártenos tu resultado en los comentarios!

💡 Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: crea tu Curriculum Vitae en Canva

Para este paso, te recomiendo que revises la clase sobre Tips y herramientas para crear tu curriculum vitae del Curso para Conseguir Trabajo como Frontend Developer en donde hablamos sobre algunos tips y secciones más relevantes a tener en cuenta en el momento de crear nuestro curriculum vitae. Entre las secciones que mencionamos se encuentran:

  1. Nombre y rol.
  2. Datos de contacto: correo, página web, GitHub, LinkedIn, entre otros.
  3. Breve descripcion de ti mismo(a) (aunque puedes omitir esta información).
  4. Habilidades: lenguajes y/o tecnologías.
  5. Experiencia: cargo, nombre de la empresa, fecha de inicio y fin, descripción de tus responsabilidades y el impacto de ellas.
  6. Educación: universidad, cursos relevantes, entre otros.
  7. Referencias: personales y laborales (aunque puedes omitir esta información).

También puedes incluir algunos otros aspectos como premios que has recibido, charlas que has dado, información sobre alguna comunidad que hayas liderado, entre otras cosas.

Procura que tu curriculum vitae:

  1. No ocupe más de 2 páginas.
  2. Muestre la información de forma clara.
  3. Diga lo que haces en la cabecera para que sea rápido de entender a qué te dedicas. Con esto, el(la) reclutador(a) ya sabe inmediatamente tu cargo y descarta o sigue leyendo según lo que esté buscando la empresa.
  4. Sea consistente en márgenes, colores y tamaños de letra.
  5. Sea honesto y transparente con la información.

Teniendo en cuenta todo lo anterior, una de los mejores sitios para crear tu Curriculum Vitae es Canva.

Lo único que debes hacer es crear una cuenta y escribir en el buscador Hoja de vida.

2

Allí te aparecerán cientos de resultados. Puedes escoger el diseño que más te guste y utilizarlo o modificarlo según tus necesidades.

3

Aquí te comparto mi Curriculum Vitae que creé especialmente para este reto para que puedas tomarlo como base y realizar el tuyo.

4

Como puedes ver, usé Canva pero cree mi propia estructura de diseño para que me pudiera caber toda la información.

Paso 2: define el contenido que quieres plasmar en tu página web

En este paso, es importante que pensemos cuáles son las cosas/habilidades que queremos mostrar o compartir en nuestra página web y por las cuales queremos ser contratados(as).

Normalmente, una página web es el lugar en donde nosotros(as) como desarrolladores(as) mostramos las cosas que nos apasionan, que sabemos hacer o que quisieramos llegar a hacer.

Si por ejemplo quieres ser muy bueno(a) en animaciones con CSS, no es necesario que seas un(a) experto(a) para poder hacer animaciones en tu página web, puedes incluso usar este espacio para comenzar a experimentar y poner en práctica eso que te encanta.

También, es importante tener en cuenta que muchas oportunidades laborales se dan a partir de lo que compartes y de lo que muestras. Por eso, a la hora de definir el contenido y el diseño de tu página web, es indispensable que pienses también en plasmar las cosas en la que eres bueno(a) y por las cuáles te gustaría ser contratado(a). Para ello, puedes hacer tres cosas:

  1. Ser explícito(a) diciendo “Soy Frontend Developer apasionado por las buenas prácticas y las animaciones en la Web”.
  2. Ser implícito(a) y que sólo con ver las animaciones que hay en tu página ya se sepa que eres apasionado(a) por las animaciones.
  3. Ser explícito(a) e implícito(a) al mismo tiempo y destacar tus habilidades tanto a nivel escrito como a nivel visual.

Crear una página web no tiene reglas. Tú eres quién decide qué aspectos mostrar y cómo. La ventaja aquí es que ya tenemos nuestro Curriculum Vitae del cual podemos extraer información mucho más fácil para anexarla en nuestra página web.

La diferencia entre tu Curriculum Vitae y tu página web es que en tu curriculum eres más formal y más detallado(a) con la información, mientras que en tu página web eres más informal y puedes destacar muchas habilidades a nivel visual.

Para este reto te propongo las siguientes secciones para tu página web:

  1. Inicio: donde se mostrará tu nombre y cargo (desarrollador(a), diseñador(a), etc).
  2. Sobre mí: donde contarás un poco sobre lo que haces, el lugar en donde vives, algunas curiosidades, entre otras cosas.
  3. Habilidades: donde enseñarás los lenguajes y/o tecnologías que manejas.
  4. Proyectos personales: donde compartirás lo que haces en tus ratos libres para practicar.
  5. Experiencia: donde mostrarás algunas empresas en las que has trabajado.
  6. Contacto: donde podrán contactarte a través de redes sociales o email.

Teniendo en cuenta estas secciones, puedes comenzar a ser más enfático(a) en cada una de ellas. Como por ejemplo:

Inicio:

La estructura base puede ser algo como:

  • Nombre: Pepita Pérez.
  • Cargo: desarrolladora Frontend y diseñadora.

Adicionalmente, puedes agregarle un tono más amigable y único como:

  • ¡Hola! Soy Pepita Pérez. Desarrolladora Frontend y diseñadora 😊
  • ¡Hola, soy Pepita Pérez! Desarrolladora, diseñadora y amante de la pizza 🍕

O si la quieres hacer en inglés:

  • Hi there 👋🏼 I'm Pepita Pérez. UI/UX Designer + Developer 👩🏻‍💻
  • Hi, I'm Pepita Pérez. Developer, Designer and pizza lover 🍕

Sobre mí:

Aquí puedes escribir una frase o un párrafo. La estructura base puede ser algo como:

  • Lo que haces: Desarrollo Frontend y diseño UI/UX.
  • Lugar en donde vives: Ciudad de México.
  • Tus pasiones: Buenas prácticas y animaciones con CSS.

A esta estructura puedes darle un poco más de forma, así:

  • Soy Desarrolladora Frontend de la Ciudad de México, apasionada por las buenas prácticas y las animaciones con CSS. También me encanta el diseño web enfocadao en productos accesibles y centrados en el usuario.

O si la quieres hacerlo en inglés:

  • I'm a creative Front-end Developer based in Ciudad de México. I'm passionate about good practices, CSS animations and UI/UX design.

Habilidades:

Aquí puedes escribir una lista de lenguajes, tecnologías y/o programas que manejas. La estructura base puede ser algo como:

  • HTML5
  • PUG
  • CSS3
  • SASS
  • JavaScript
  • React
  • Git y GitHub
  • Figma

Proyectos personales:

Aquí puedes escribir una lista de tus proyectos personales incluyendo el nombre, la descripción, los lenguajes que utilizaste, un link del repo y/o deploy, una imagen del preview del proyecto, entre otras cosas. La estructura base puede ser algo como:

Experiencia:

A la hora de escribir tu experiencia laboral, es importante que menciones el cargo que tienes o tuviste, el nombre de la empresa, la fecha de ingreso y egreso, y tus responsabilidades y el impacto que estas tuvieron. La estructura base puede ser algo como:

  • Empresa: ABCDEFU
  • Cargo: Junior Frontend Developer
  • Fecha de ingreso: 20 junio 2021
  • Fecha de egreso: actualmente (si aún trabajas allí)
  • Responsabilidades e impacto: Mejoré en un 40% el proceso para descargar documentos desde la plataforma usando X.

Tu experiencia laboral la puedes incluir en tu página web de forma básica y anexar los puntos más relevantes en tu Curriculum Vitae. Teniendo en cuenta esto, puedes colocar en tu página web algo más resumido como:

  • Título: Junior Frontend Developer, ABCDEFU
  • Subtítulo: 20 jun 2021 - actualmente
  • Descripción: Desarrollo en la centralización de documentos, procesos ágiles y seguros.

Contacto:

Aquí puedes incluir tus redes sociales, tu curriculum vitae y alguna sección para que puedan enviarte un email. La estructura base puede ser algo como:

  • GitHub
  • Codepen
  • Medium
  • Behance
  • Twitter
  • LinkedIn
  • Botón para descargar tu CV
  • Botón para poderte enviar un email

Paso 3: realiza el diseño de tu página web en baja fidelidad con Figma

Antes de comenzar, quiero compartirte 30 páginas web de desarrolladores que te servirán de inspiración para comenzar a crear tu página web.

En este reto, haremos inicialmente una página web sencilla donde se destaquen las secciones que creamos en el paso anterior.

Para comenzar a crear un diseño con Figma, debemos:

  1. Tener una cuenta
  2. Darle click al botón que dice “New design file”.
5
  1. Dar click al ícono que parece una regillita en el navbar para tener un nuevo lienzo en donde diseñar.
6
  1. Dar click en el tipo de dispositivo que sale a mano derecha para el cuál queremos realizar el diseño.
7
  1. Dar click al ícono del cuadradito en el navbar para comenzar a crear diferentes elementos dentro de nuestro lienzo.
8
  1. Arrastrar con el mouse para obtener la figura deseada. También, puedes dar click encima del lienzo y se te creará un cuadrado pequeño al cuál le puedes cambiar el tamaño con las opciones que encuentras a mano derecha.
9
  1. Dar click al ícono de la T en el navbar para añadir texto y dar click en donde quieras que se ubique este texto. También, puedes cambiar el tamaño del texto con las opciones que encuentras a mano derecha.
10

¡Y listo! con estos 7 pasos puedes crear un diseño en baja fidelidad en Figma para tener al menos una idea de lo que queremos hacer en el código.

Aquí te comparto mi diseño con el resultado final.

Paso 4: realiza la maquetación básica de tu página web

Este es el resultado que queremos obtener:

11

Para ello comenzamos creando la estructura en HTML, así:

<nav><ul><li><ahref="#1">Homea>li><li><ahref="#2">Abouta>li><li><ahref="#3">Skillsa>li>ul>nav><divclass="main-content"><sectionid="1">This is the first sectionsection><sectionid="2">This is the second sectionsection><sectionid="3">This is the third sectionsection>div>

Ahora, comenzamos con los estilos básicos para el navbar, así:

body {
  margin: 0;
  overflow-y: hidden;
}

nav {
  background: pink;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

navul {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  list-style-type: none;
}

navula {
  text-decoration: none;
}

Y luego, con los estilos para las secciones, así:

.main-content {
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: calc(100vh - 60px);
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 60px);
}

section:nth-child(2n) {
  background: lightcyan;
}

section:nth-child(2n + 1) {
  background: lightyellow;
}

Aquí te comparto mi codepen con el resultado.

Paso 5: embellece tu página web: agrega tu propio estilo y Curriculum Vitae

En este paso puedes ser completamente libre de añadir los estilos que más te gusten en tu página web. Aquí es donde puedes poner en práctica tus habilidades y ser lo(a) más creativo posible para destacar lo que te gusta hacer con un estilo propio.

Puedes utilizar:

  • Formas o grids asimétricas.
  • Imágenes.
  • Animaciones con Scroll.
  • Animaciones con CSS.
  • Figuras en 3D.
  • Lazy Loading.
  • Parallax.
  • Tendencias de diseño como Glasmorphism y Neomorphism.
  • Entre otras.

Aquí te comparto este video de YouTube sobre Top 10 Website Designs| Website Design Inspiration para que te inspires y puedas crear el mejor diseño para tu página web.

En mi caso, estuve viendo algunas imágenes en Freepik para buscar algo de inspiración y me encontré con este diseño que me encantó:

12

La idea que me dio esta imagen fue crear varias capas movedizas y que al darle click al navbar, el texto que dice “World Oceans Day” vaya cambiando por la información de las diferentes secciones de la página web.

Para ello, lo primero que hice fue buscar en Coolors una paleta de colores con varios tonos de azules como esta y añadí únicamente dos colores como variables en mi código de CSS, así:

:root {
  --dark-blue: #03045E;
  --light-blue: #CAF0F8;
}

Luego, escogí una de mis letras favoritas en Google Fonts y la añadí también a mi código CSS, así:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

Reusé un poco en HTML que tenía anteriormente pero le añadí las imágenes correspondientes a cada capa y la información de cada sección, así:

<nav><ul><li><ahref="#1">Homea>li><li><ahref="#2">Abouta>li><li><ahref="#3">Skillsa>li><li><ahref="#4">CVa>li>ul>nav><divclass="main-content"><imgsrc="https://i.ibb.co/cktbQpy/Layer1.png"alt="layer 1"><imgsrc="https://i.ibb.co/wYsBnYB/Layer2.png"alt="layer 2"><imgsrc="https://i.ibb.co/q17YqGh/Layer3.png"alt="layer 3"><imgsrc="https://i.ibb.co/MMZ9S9x/Layer4.png"alt="layer 4"><sectionid="1"><p>Hi there 👋🏼 I'm Pepita Pérez.p>section><sectionid="2"><p><span>I'm Developer, Designerspan><span>and pizza lover 🍕span>p>section><sectionid="3"><p><span>I create amazing things withspan><span>HTML, CSS, JS & Figma.span>p>section><sectionid="4"><ahref="#"download="pepita-cv">Download my CVa>section>div>

En la etiqueta con atributo download sólo debes colocar el archivo PDF de tu CV.

Y los estilos me quedaron de la siguiente forma:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');

:root {
  --dark-blue: #03045E;
  --light-blue: #CAF0F8;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

nav {
  color: var(--dark-blue);
  background: var(--light-blue);
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 6;
  position: fixed;
  width: 100%;
}

navul {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  list-style-type: none;
}

navula {
  color: var(--dark-blue);
  text-decoration: none;
}

navula:visited {
  color: var(--dark-blue);
}

navula:hover {
  font-weight: bold;
}

.main-content {
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: calc(100vh - 60px);
}

section {
  background: var(--dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh + 60px);
  color: var(--light-blue);
  position: relative;
  overflow: hidden;
}

sectionp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

sectiona {
  color: white;
  z-index: 6;
}

divimg {
  position: absolute;
  left: 0;
  top: 60px;
  width: 100vw;
  height: calc(100vh - 60px);
  transform: scale(1);
}

divimg:nth-child(1) {
  animation: layer1 3s linear infinite;
  z-index: 2;
}

divimg:nth-child(2) {
  animation: layer2 2s linear infinite;
  z-index: 3;
}

divimg:nth-child(3) {
  animation: layer1 3s linear infinite;
  z-index: 4;
}

divimg:nth-child(4) {
  animation: layer2 3s linear infinite;
  z-index: 5;
}

@keyframes layer1 {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes layer2 {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

Con lo anterior, el resultado es el siguiente:

1

Paso 6: ¡compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de tu página web con Curriculum Vitae. 😄

Aquí te comparto:

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.

#NuncaParesDeAprender

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Conoce la anatomía de un documento HTML, sus elementos y las propiedades de CSS. Maqueta las pantallas principales de tu página web con responsive design. ¡Conviertete en Frontend Developer con Platzi!
Estefany
Estefany
teffcode

13666Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
24307Puntos

Woo, se ve que le pusiste mucho cariño a este reto, me apunto. Avanzaré un curso por semana y poner en práctica lo aprendido. En unas semanas compartiré mi proyecto finalizado por acá 🥳

2
8427Puntos

En el CV en vez de la palabra “Awards” dice otra cosa con un significado diferente.

2
2 meses

Muy cierto.
Tan parecida a ‘Awkwards’ que sería una colección de momentos “embarazosos, vergonzosos, bochornosos” 😄

2
5251Puntos

😮 gracias teff! actually estoy haciendo tu cursos de css grid jaja gracias por la info ❤️

1
3599Puntos

Gracias, esta GENIAL!!!, me voy anotar a hacer el curso de Figma!!! pero si me dan una mano con mi suscripción y ambos nos extendemos un mes mas mediante mi enlace, https://platzi.com/r/Francoamicone
se los voy agradecer!!

No paremos de aprender!!
Gracias
Franco

1
220719Puntos

Excelente profesora Estefany. Gracias por compartir

1
39087Puntos

Que genial!!!

1

Gracias Teff por el animador e informativo post ❤❤❤❤❤❤❤❤😍👌🙌

1

Esta muy interesante, aunque no he trabajado con Figma, me gusta la aproximación que le das

1
8529Puntos

Gracias Teff, esto le va a poner poder a mi CV.

You rock!

1
4785Puntos

Excelente aporte Profe , es un buen reto motivador a seguir aprendiendo para alcanzar los sueños, espero poder terminar los cursos y empezar a ponerlos en práctica,

1
15420Puntos

Lo primero es darte las gracias por tan excelente informacion y la manera en como lo organizaste.
Lo segundo es que si existe alguna forma de guardar los posts que me gustan dentro de platzi, gracias

1
578Puntos

Esta muy interesante, muchas gracias por compartir la info 👏👏👏

1
3896Puntos

Genial! Voy a empezar con este reto y así lograr mi sueño ❤️

1
6716Puntos

My favorite teacher.
I accept the challenge,
I will come back with the result.

1
11760Puntos

¡Muchas gracias Estefany!
Esta semana termino los 4 últimos cursos de la parte básica de la escuela de Desarrollo Web, justo todos los impartes tú 💚.
Guardo el post para empezar julio con este reto 😀.