La imagen principal de este artículo fue generada por  de HackerNoon a través del mensaje "sitio web" AI Image Generator    es el tema   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 código, pero no vamos a hablar de eso. En este tutorial, crearemos un sitio web usando ChatGPT. ChatGPT de IA  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, solo verifiquemos la   para estar seguros y continuar trabajando allí.  repetición  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   podemos ver que bootstrap falta el guión. https://getbootstrap.com/docs/4.1/getting-started/introduction/  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.   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Website</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> </head> <body>  <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>  <div class="container mt-5"> <h1>Welcome to My Website!</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. </p> </div>  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>  ¡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  Introducció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   <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain">  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.   <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>  Haciendo 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.   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.   <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <div class="form-group"> <label for="message">Message</label> <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>  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 sea demasiado brillante?  Usé la opción de pegar y pegué la etiqueta de estilo en la etiqueta principal.   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  Vale, mira los resultados  [AQUÍ]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true  ¡Y está listo! ¡Estoy asombrado! No es perfecto, pero funciona :)  No estamos sugiriendo crear todo el sitio web de su 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   . Y si quiere darle un giro a sus habilidades de IA, únase a nuestros   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. página de tutoriales de IA generativa Hackathons de IA  La imagen principal de este artículo fue generada por AI Image Generator de HackerNoon a través del mensaje "sitio web"

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interested be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Build with AI!

Win $$$ on AI Hackathon 

Hire Me

Este audio es producido en el idioma original de la historia!

¿Qué sucede cuando usas ChatGPT para crear un sitio web?

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps