¡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. 😉
Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:
Te recomendamos este post: ¿Qué incluye un CV de diseñador gráfico?
Para este reto, te propongo que realices los siguientes 6 pasos:
💡 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!
Lee también: cómo crear un portafolio profesional atractivo
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:
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:
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.
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.
Aquí te comparto mi Curriculum Vitae que creé especialmente para este reto para que puedas tomarlo como base y realizar el tuyo.
Como puedes ver, usé Canva pero cree mi propia estructura de diseño para que me pudiera caber toda la información.
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:
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:
Teniendo en cuenta estas secciones, puedes comenzar a ser más enfático(a) en cada una de ellas. Como por ejemplo:
La estructura base puede ser algo como:
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 🍕Aquí puedes escribir una frase o un párrafo. La estructura base puede ser algo como:
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.Aquí puedes escribir una lista de lenguajes, tecnologías y/o programas que manejas. La estructura base puede ser algo como:
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:
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:
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:
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:
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:
¡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.
Este es el resultado que queremos obtener:
Para ello comenzamos creando la estructura en HTML, así:
<nav><ul><li><ahref="#1">Home</a></li><li><ahref="#2">About</a></li><li><ahref="#3">Skills</a></li></ul></nav><divclass="main-content"><sectionid="1">This is the first section</section><sectionid="2">This is the second section</section><sectionid="3">This is the third section</section></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.
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:
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ó:
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:wght@300&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">Home</a></li><li><ahref="#2">About</a></li><li><ahref="#3">Skills</a></li><li><ahref="#4">CV</a></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, Designer</span><span>and pizza lover 🍕</span></p></section><sectionid="3"><p><span>I create amazing things with</span><span>HTML, CSS, JS & Figma.</span></p></section><sectionid="4"><ahref="#"download="pepita-cv">Download my CV</a></section></div>En la etiqueta <a> 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:wght@300&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:
¡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
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á 🥳
En el CV en vez de la palabra “Awards” dice otra cosa con un significado diferente.
Muy cierto.
Tan parecida a ‘Awkwards’ que sería una colección de momentos “embarazosos, vergonzosos, bochornosos” 😄
😮 gracias teff! actually estoy haciendo tu cursos de css grid jaja gracias por la info ❤️
La mejor profe!
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
Esta muy interesante, muchas gracias por compartir la info 👏👏👏
Que genial!!!
Gracias Teff por el animador e informativo post ❤❤❤❤❤❤❤❤😍👌🙌
Esta muy interesante, aunque no he trabajado con Figma, me gusta la aproximación que le das
Excelente profesora Estefany. Gracias por compartir
Gracias Teff, esto le va a poner poder a mi CV.
You rock!
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,
Genial! Voy a empezar con este reto y así lograr mi sueño ❤️
My favorite teacher.
I accept the challenge,
I will come back with the result.
¡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 😀.