Hola a todos,

Desarrollé el sitio web de mi cartera desde cero utilizando el tutorial w3school bootstrap 4 y ChatGPT. En este artículo, explicaré cómo construir uno propio en pasos simples.

Puede hacer clic para ver el sitio web de mi cartera.

Antes de saltar a la codificación y ChatGPT, investigué un poco sobre lo que contienen los sitios web de cartera de otros gerentes de productos y cómo colocan los elementos de la interfaz de usuario en sus sitios. Luego finalicé qué secciones debería poner y cuáles son sus nombres.

Dibujo a mano una maqueta. Contiene secciones: barra de navegación, encabezado, pie de página, sobre mí con información social, resumen, servicios, carrera, estudios de productos, herramientas y un botón fijo de contacto.

Acerca de mi fondo

Soy una persona de producto con 6 años de experiencia.

Cuando era una chica gótica de 17 años, intenté escribir mi perfil de vampirefreaks desde cero con solo HTML. La razón es que quería agregar algo de autenticidad a mi perfil. Desde entonces, no me comprometí a codificar nada excepto mi tarea en la universidad, que generalmente estaba escrita en Matlab o Arduino.

Me gusta aprender y probar cosas nuevas. Anteriormente usé Elementor para construir algunos sitios web. Pero esta vez, decidí darme a mí mismo y a Chat GPT para demostrar que cualquiera puede desarrollar un sitio web de cartera simple.

Primer paso: seleccionar un lenguaje de programación para jugar

Experimenté cómo los bots de Google tratan los sitios web que no responden cuando dirigía un producto orientado al cliente (socios de soluciones). Soy consciente de que Google no lo clasificará lo suficientemente alto ni indexará sus páginas si no responde a dispositivos móviles. Por eso elijo Bootstrap 4 para mi producto. El sistema de cuadrícula de Bootstrap es fácil de entender y utilicé las plantillas básicas de bootstrap 4 de w3schools para lograrlo. Enlace

Segundo paso: reunir imágenes y decidir la paleta de colores

Para decidir la paleta de colores, elijo una imagen que me gusta. Lo subí a Adobe Color Finder y extraje los códigos HEX de la imagen.

Cómo extraer colores de una imagen

Traté de ser leal a la regla %60,%30,%10 al determinar los colores de los elementos. El %60 del diseño es blanco, el %30 es morado y el %10 es verde.

Estos 3 colores combinan bien entre sí y tienen un significado especial para las mujeres. Internacionalmente el morado simboliza a la mujer. Además, la combinación de morado, verde y blanco es un símbolo de la igualdad de la mujer. Lea mi viaje mientras me convertía en una mujer en tecnología en este enlace.

Cómo encontrar imágenes libres de regalías

Usé pixabay para descargar imágenes libres de regalías. Hay miles de imágenes, fotos, vectores, gifs y videos en esa plataforma. Incluso puedes encontrar archivos SVG gratuitos en él.

Cómo liberar imágenes de host

Para poner una imagen en su sitio, necesita alojamiento. Usé free.image.com para alojar imágenes.

Aquí viene ChatGPT

Tercer Paso: Escribir HTML y CSS

Como mencioné, tengo un poco de conocimiento de HTML pero no de CSS. Solía ​​escribir códigos de estilo dentro de HTML. Y no hice nada sofisticado con CSS antes.

Usé las plantillas bootstrap 4 de w3school para escribir el esqueleto de mi sitio web.

Primero comencé a escribir códigos de estilo en la parte superior de la sección de encabezado HTML, pero se arruinó muy rápido. Así que quería hacer las cosas en orden. Le pregunté a ChatGPT cómo conectar un archivo CSS a un archivo HTML.

barra de navegación

Quería que mi barra de navegación fuera pegajosa mientras se desplazaba hacia abajo y permitir la navegación dentro de las secciones cuando el usuario hace clic en los elementos de la barra de navegación. Quiero cambiar sus colores también.

ACERCA DE MÍ

Quiero que se muestre "acerca de mí" en la imagen para dispositivos móviles, no debajo. Así que le pregunté a ChatGPT cómo hacerlo. Usé una imagen descargada de pixabay.

Quiero usar íconos que dirijan a mis cuentas de LinkedIn, medium y GitHub. Le pregunté a ChatGPT cómo hacerlo y cómo conectar la fuente impresionante al código HTML.

SERVICIOS

Quería mostrar texto al pasar el mouse sobre una imagen.

Quería un tamaño de fuente receptivo. Quiero que los textos se vuelvan más pequeños cuando se reduce el ancho del dispositivo.

Cómo obtener tamaños de fuente receptivos

Quería tener etiquetas <h> con diferentes estilos.

PRODUCTO Y ESTUDIOS

Quería mostrar todos los detalles de mi trabajo; descripción del producto, características y logros. Ayuda a las personas a comprender qué tipo de productos lideraste antes. Y dirigí muchos productos y parecía largo. Decidí ir con una función de colapso en Bootstrap 4 con una baraja de cartas.

Bootstrap 4 Baraja de cartas

Función de colapso de Bootstrap 4

HERRAMIENTAS Y HABILIDADES

Elijo un carrusel para mostrar qué herramientas puedo usar. Quiero mostrar varias imágenes a la vez y quiero que se fije la altura del carrusel.

Cómo tener un carrusel que muestre múltiples imágenes

Quería tener un botón de contacto fijo que permitiera a los usuarios enviarme un correo electrónico.

Quiero que los estilos de los botones sean diferentes entre sí...

PENSAMIENTOS FINALES

Encontré ChatGPT útil para desarrollar sitios web incluso si no sabes codificar. Si domina la literatura técnica, obtendrá respuestas exactas en el primer intento. Si no lo hace, debe explicarlo en detalle.

ChatGPT explica las respuestas y te guía para personalizarlas. No puede usarlo tal como está, pero aún así ChatGPT es realmente útil.

Puedes aprender a codificar con ChatGPT. Yo creo que aprender a programar no es algo que se pueda aprender gastando miles de dólares y yendo al curso, sino que es algo que se puede aprender haciendo proyectos.

Que tengas un buen día y ❤ ChatGPT