ChatGPT es el tema de IA más candente de las últimas semanas: todos comparten sus conversaciones con él o responden sobre muchos problemas. También las personas comparten sus ideas sobre su capacidad para escribir un código, pero no vamos a hablar de eso. En este tutorial crearemos un sitio web usando ChatGPT. Y si desea crear una aplicación basada en ChatGPT y otras tecnologías innovadoras, debería considerar inscribirse en nuestros Hackatones de IA. Así que… ¡no pierdas más tiempo y lánzate!
Hacer un sitio web con GPTChat
Primero, inserté mi aviso:
Cree un esqueleto html con diseño receptivo de arranque y menú receptivo y menú de hamburguesa receptivo que también funciona en dispositivos móviles. E importe todos los scripts necesarios antes de la etiqueta del cuerpo de cierre, como jquery, popper y bootstrap.
Parece que recibimos una respuesta correcta de ChatGPT, pero para estar seguros, no solo verifiquemos la repetición para estar seguros y sigamos trabajando allí.
También te puede interesar
Tutorial de GPT-3: Programador de viajes
Podemos ver que está funcionando pero el menú móvil no. Y parece que ChatGPT cortó un poco el esqueleto y no tenemos una etiqueta de cierre para un script y si estamos revisando https://getbootstrap.com/docs/4.1/getting-started/introduction/ podemos ver que bootstrap falta el guión. Así que vamos a arreglarlo. Ah, y también cambiaré las importaciones a las más recientes en función de la introducción de arranque.
¡Hurra, está funcionando! Trabajemos en el contenido. Me gustaría tener un sitio de cartera.
¿Cuál debería ser el título?
En primer lugar, ¿cuál debería ser el título? Le pregunté a ChatGPT, ya que está haciendo el trabajo 🙂
¿Cuál debería ser el título del sitio web de mi cartera?
Ok, iré con Jane Doe – Usuario principiante de IA
También te puede interesar
Tutorial de OpenAI Whisper: Actualización de nuestra API de Whisper con GPT-3Introducción para el sitio web
Escribir una introducción para el sitio web de mi cartera. Soy un usuario principiante de IA y programador.
Crear un elemento de imagen en esa página
Muéstrame un elemento de imagen con una montaña para la página de arranque.
Usaré una imagen de montaña de lorempicsum
Esta será una sola página en aras de la simplicidad. Agreguemos id para la parte de inicio y agreguemos href a las etiquetas de anclaje correspondientes a las secciones.
También te puede interesar
Tutorial de cómo usar GPT-3: Cree su propia aplicación GPT-3 Powered usando streamlitHaciendo la sección acerca de
Cree un texto sobre mí para una página acerca de en un sitio web. Me gusta la escalada en roca y todos los deportes al aire libre y me gusta programar. Comencé mi carrera como ingeniero de calidad en la industria automotriz, pero siempre tuve curiosidad por la programación. Empecé con la automatización y la programación de microcontroladores. Me mudé a Polonia hace 7 años. Comencé el desarrollo web por mi cuenta hace 4 años con HTML y JavaScript. Ahora estoy trabajando como desarrollador Full Stack.
Peguemos esto en nuestra sección acerca de
Necesitamos hacer esta sección tan alta como el dispositivo. Por lo tanto, le pedí a ChatGPT que me mostrara la forma correcta de hacerlo.
¿Cómo hacer que un elemento sea tan alto como el dispositivo en bootstrap?
Seguiré las instrucciones y pegaré el estilo en la etiqueta Head y agregaré la clase al elemento div que contiene la sección.
También te puede interesar
Tutorial de cómo usar GPT-3: Cree su propia aplicación GPT-3 Powered usando NextJS y Replit en 20 minutos
Creación de la sección de contacto a modo de formulario. (No haremos que esto funcione en este tutorial)
Cree un formulario de contacto con Bootstrap con los siguientes campos de entrada. Nombre, correo electrónico, mensaje.
Así que copiemos esto y creemos la sección para el formulario de contacto. Y finalmente, creemos un buen fondo para el sitio web.
¿Qué es un buen degradado css para un fondo de sitio web html que no es demasiado brillante?
Usé la opción de pegar y pegué la etiqueta de estilo en la etiqueta principal.
Bien, mira los resultados:
https://replit.com/@Flafi87/LegitimatePrevailingScript#index.html https://legitimateprevailingscript.flafi87.repl.co
¡Y está listo! ¡Estoy asombrado! No es perfecto, pero funciona 🙂 No estoy sugiriendo que cree todo su sitio web de cartera con ChatGPT, pero seguro que puede darle algunos buenos consejos y puede mejorar su trabajo. O al menos que sea más fácil y que consuma menos tiempo.
Si desea obtener más información sobre herramientas basadas en IA, visite nuestra página de tutoriales de IA generativa. Y si quiere darle un giro a sus habilidades de IA, únase a nuestros Hackathons de IA y cree en 3 o 7 días un modelo de trabajo de una aplicación que puede ser el comienzo de su puesta en marcha.
