Diseña tu portafolio con HTML, CSS y JavaScript

En el mundo digital actual, un portafolio en línea es una herramienta indispensable para aquellos que buscan destacar su trabajo y atraer nuevos clientes. Sin embargo, crear un portafolio desde cero puede ser abrumador y consumir mucho tiempo. Es por eso que muchos profesionales optan por utilizar templates de HTML y CSS para crear su portafolio de manera rápida y sencilla.

Aprenderás cómo funcionan juntos y cómo optimizarlos para mejorar el rendimiento de tu sitio web.

HTML es el lenguaje de marcado que se utiliza para crear la estructura y el contenido de una página web. CSS es el lenguaje de estilo que se utiliza para dar formato a una página web y hacer que se vea atractiva. JavaScript es un lenguaje de programación que se utiliza para que la página web sea interactiva y dinámica.

HTML significa HyperText Markup Language. Es un lenguaje de marcado para crear la estructura y el contenido de una página web. HTML utiliza etiquetas para establecer los elementos en una página web, como encabezados <header>, contenido principal <main>, párrafos <p>, enlaces <nav>, imágenes <img>, formularios <form>, etc.

Una etiqueta HTML comienza con un signo de menor que (<) y termina con un signo de mayor que (>). El contenido que se encuentra entre las etiquetas es el contenido de la página web. Es recomendable que cada página web contenga un título principal, donde su etiqueta es <h1>.

¿Cómo elegir el template de HTML CSS adecuado para tu portafolio?

La elección del template adecuado para tu portafolio es crucial para su éxito. Hay una gran variedad de templates disponibles en línea, y puede ser difícil saber cuál elegir. Aquí hay algunos factores que debes considerar al seleccionar un template:

• Diseño: debe reflejar tu marca personal y ser atractivo visualmente. Asegúrate de que el diseño sea coherente en todas las páginas del template.
  
• Funcionalidad: Debe ser fácil de usar y navegar para los visitantes de tu sitio web. Asegúrate de que sea responsive, es decir, que se adapte a diferentes tamaños de pantalla y que tenga un buen rendimiento.
  
• Personalización: Debe ser fácil de personalizar para reflejar tu marca personal y agregar tu contenido. Asegúrate de que el template tenga suficientes opciones de personalización para satisfacer tus necesidades.

Para crear este portafolio, el editor que utilizaremos es Visual Studio Code, el cual estará dividido en ocho secciones:

1) Encabezado: está compuesto por un logo, que es el nombre del protagonista del portafolio, y la etiqueta <nav> (son los diferentes enlaces que te dirigen hacia la sección que quieres visualizar).

2) Inicio: tiene una imagen, un título y el cargo (en este caso, de Erika). Además, están los íconos de las redes sociales que, a su vez, puedes sustituir el # por el enlace del perfil en Facebook para que cuando el usuario haga clic en ese ícono sea redirigido.

3) Sobre Mí: tiene un título <h2> y un párrafo <p> que podemos rellenar con solo escribir Lorem, el cual se agrega un texto de 3 líneas. Luego, se divide en dos columnas: la de la izquierda para Datos Personales y la de la derecha para Intereses, la cual estará acompañada de íconos.

4) Skills: tiene dos columnas, una para las habilidades técnicas y la otra para las profesionales con una barra que mide el progreso que, al refrescar la página, va desde el inicio hasta el porcentaje obtenido.

5) Curriculum: agregamos dos columnas: la de la izquierda para registrar los estudios y la de la derecha para la experiencia laboral. Aquí intervienen otras etiquetas para los textos <h3> y <h4>, que con CSS irán con otro tamaño y otro color que el resto.

6) Portafolio: se visualizan las imágenes de distintos proyectos que has elaborado como muestra de tu trabajo.

7) Contacto: contiene un formulario y una imagen del mapa con la dirección.

8) Footer: es el pie de la página. Allí incluimos un botón que te llevará al inicio de la página y también contendrá los iconos con los enlaces de cada sección.

Ahora que finalizamos la estructura en HTML seguimos con CSS, término que significa Cascading Style Sheets y que refiere a lenguaje de estilo utilizado para dar formato a una página web. CSS se utiliza para controlar la apariencia de los elementos HTML en una página web, incluyendo el color, la fuente, el tamaño y la disposición.

CSS utiliza selectores para apuntar a los elementos HTML que se desean formatear. Por ejemplo, el selector h1 se utiliza para apuntar a todos los encabezados de nivel 1 en una página web. Es recomendable agregar este selector en todo el proyecto que desarrolles, ya que es el título principal de la página web.

Es hora de personalizarlo para reflejar tu marca personal. Aquí hay algunos aspectos que debes considerar:

• Colores: Elige una paleta de colores no mayor de 3 colores que refleje tu marca personal y úsala consistentemente en todo el template. Esto evitará que el usuario pierda interés.
• Tipografía: Elige una fuente que sea legible y que refleje la personalidad de tu marca.
• Imágenes: Agrega imágenes que reflejan tu trabajo y sean visualmente atractivas.
• Contenido: Personaliza el contenido del template para que se ajuste a tus necesidades y refleje tus habilidades y logros.

Para ello creamos un archivo estilo.css, donde se pueden utilizar diferentes propiedades CSS para dar formato a los elementos como color, tamaño, fuente y margen.

Utilizamos un punto para llamar las clases definidas en el lenguaje HTML seguido por el nombre, y llaves abiertas y cerradas {}. En su interior, escribimos el siguiente código para darle estilo a la sección de Encabezado e Inicio:

• Background: color de fondo.
• Position: fixed. Para que se mantenga fijo mientras el usuario se desliza a lo largo de la página web.
• Width: tomará el 100% del ancho de la página, esto varía de acuerdo al tamaño de la pantalla del dispositivo (escritorio, tablet o celular) que se use.
• Top: margen superior.
• Left: margen izquierdo.
• Z-index: ordena los elementos para que se superpongan entre sí.
• Max-width: es el ancho máximo.
• Margin: centra de forma horizontal y vertical esta sección.
• Display flex: ocupa todo el ancho de la página web.
• Justify-content: space-between: distribuye el espacio entre los ítems flex.
• Align-items: center: alinea los ítems al centro.
• Padding: se atribuye al área del relleno alrededor del contenido.
  

• Px: es la medida que usa CSS que equivale a (1px = 1/96vo de 1 pulgada).

• Hover: es una pseudoclase que, cuando el usuario se desplaza sobre ella, con el mouse cambia la apariencia del encabezado, donde las letras del enlace CURRICULUM están en blanco y luego de este evento pasan a ser verdes turquesa.

JavaScript y su importancia en el desarrollo web

JavaScript es un lenguaje de programación utilizado para agregar interactividad y dinamismo a una página web. Se utiliza para crear funciones, manipular elementos HTML y responder a eventos del usuario.

JavaScript se aplica para crear efectos visuales en una página web, como animaciones y desplazamientos, así como para validar formularios y crear interacciones con el usuario, como menús desplegables y botones de cambio de imagen.

Cómo HTML, CSS y JavaScript trabajan juntos

HTML, CSS y JavaScript trabajan juntos para crear una página web interactiva y atractiva. HTML se utiliza para crear la estructura y el contenido de la página web, CSS se utiliza para dar formato a la página web y JavaScript se utiliza para agregar dinamismo.

Por ejemplo, se puede utilizar HTML para crear una página web con encabezados, párrafos e imágenes; CSS para dar formato a la página web con colores, fuentes y diseños; y JavaScript para agregar interactividad con efectos como desplazamientos, animaciones y menús desplegables.

Consejos para optimizar HTML, CSS y JavaScript para un mejor rendimiento del sitio web

Para mejorar el rendimiento de tu sitio web, es importante optimizar HTML, CSS y JavaScript. Algunos consejos para optimizarlos incluyen:

• Minimizar el tamaño de los archivos CSS y JavaScript para reducir el tiempo de carga de la página web.
• Utilizar una herramienta de compresión de archivos para comprimir los archivos CSS y JavaScript.
• Utilizar técnicas de caché para almacenar en caché los archivos CSS y JavaScript en el navegador del usuario para una carga más rápida en visitas posteriores.
• Utilizar una herramienta de análisis de rendimiento para identificar cuellos de botella en la carga de la página web y optimizarlos.

Errores comunes que debes evitar al usar HTML, CSS y JavaScript

• No utilizar etiquetas HTML semánticas para la estructura de la página web.
• No utilizar selectores CSS eficientes para dar formato a la página web.
• No utilizar técnicas de optimización de JavaScript, como la agrupación y la minificación.

HTML, CSS y JavaScript son los lenguajes de programación más utilizados en la creación de sitios web. Juntos, trabajan para crear una experiencia de usuario atractiva e interactiva. Al optimizar HTML, CSS y JavaScript, puedes mejorar el rendimiento de tu sitio web y brindar una mejor experiencia de usuario a tus visitantes.

Al seguir los consejos en esta guía, podrás crear un portafolio que refleje tu marca personal y que sea visualmente atractivo. ¡Buena suerte en la creación de tu portafolio!