48 lines
2.9 KiB
Markdown
48 lines
2.9 KiB
Markdown
![]() |
---
|
||
|
id: bd7158d8c242eddfaeb5bd13
|
||
|
title: Construye una página portafolio personal
|
||
|
challengeType: 3
|
||
|
forumTopicId: 301143
|
||
|
dashedName: build-a-personal-portfolio-webpage
|
||
|
---
|
||
|
|
||
|
# --description--
|
||
|
|
||
|
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||
|
|
||
|
Completa las siguientes [historias de usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) y consigue aprobar todas las pruebas. Dale tu propio estilo personal.
|
||
|
|
||
|
Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda usar CSS puro porque eso es lo que las lecciones han cubierto hasta ahora y debes practicar un poco con él. Puedes usar Bootstrap o SASS si lo deseas. Tecnologías adicionales (por ejemplo, jQuery, React, Angular o Vue) no se recomiendan para este proyecto, y usarlas es bajo tu propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes stacks de tecnologías como React. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el stack de tecnología sugerido para este proyecto. ¡Feliz día programando!
|
||
|
|
||
|
**Historia de Usuario #1:** Mi portafolio debería tener una sección de bienvenida con un id establecido como `welcome-section`.
|
||
|
|
||
|
**Historia de Usuario #2:** La sección de bienvenida debería tener un elemento `h1` que contenga texto.
|
||
|
|
||
|
**Historia de Usuario #3:** Mi portafolio debería tener una sección de proyectos con un id establecido como `projects`.
|
||
|
|
||
|
**Historia de Usuario #4:** La sección de proyectos debería contener al menos un elemento con una clase de `project-tile` para abarcar un proyecto.
|
||
|
|
||
|
**Historia de Usuario #5:** La sección de proyectos debe contener al menos un enlace a un proyecto.
|
||
|
|
||
|
**Historia de Usuario #6:** Mi portafolio debería tener una barra de navegación con un id establecido como `navbar`.
|
||
|
|
||
|
**Historia de Usuario #7:** La barra de navegación debe contener al menos un enlace en el que puedo hacer clic para navegar a diferentes secciones de la página.
|
||
|
|
||
|
**Historia de Usuario #8:** Mi portafolio debería tener un enlace con un id establecido como `profile-link`, el cual abre mi perfil de GitHub o FCC en una nueva pestaña.
|
||
|
|
||
|
**Historia de Usuario #9:** Mi portafolio debería tener al menos una consulta de medios (media query).
|
||
|
|
||
|
**Historia de Usuario #10:** La altura de la sección de bienvenida debe ser igual a la altura del viewport.
|
||
|
|
||
|
**Historia de Usuario #11:** La barra de navegación debe estar siempre en la parte superior del viewport.
|
||
|
|
||
|
Puedes construir tu proyecto haciendo un fork de [este CodePen](https://codepen.io/freeCodeCamp/pen/MJjpwO). O puedes utilizar este enlace CDN para ejecutar los tests en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
|
||
|
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.
|
||
|
|
||
|
# --solutions--
|
||
|
|
||
|
```html
|
||
|
// solution required
|
||
|
```
|