本文的主图由 HackerNoon 的 通过提示“网站”生成 AI Image Generator 是过去几周最热门的 话题——每个人都与它分享他们的对话或对许多问题的回答。人们也分享了他们对其编写代码能力的见解——但我们不打算谈论它。在本教程中，我们将使用 ChatGPT 创建一个网站。 ChatGPT AI 如果您想基于 ChatGPT 和其他突破性技术创建应用程序，您应该考虑参加我们的 。 AI 黑客马拉松 所以……不要再浪费时间了！ 使用 GPTChat 制作网站 首先，我插入了提示：  使用引导响应式设计和响应式菜单以及响应式汉堡包菜单创建一个 html 框架，该菜单也适用于移动设备。并在结束 body 标记之前导入所有必要的脚本，例如 jquery、popper 和 bootstrap。 看起来我们从 ChatGPT 得到了正确的响应，但为了确保让我们在 中检查它以确保并继续在那里工作。  replit 我们可以看到它正在工作，但移动菜单没有。似乎 ChatGPT 稍微切碎了骨架，我们没有一个脚本的结束标记，如果我们正在检查 我们可以看到引导程序缺少脚本。 https://getbootstrap.com/docs/4.1/getting-started/introduction/ 所以让我们修复它。哦，我也会根据引导程序介绍将导入更改为最新的。   <!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> 欢呼，它的工作！让我们处理内容。我想要一个投资组合网站。 标题应该是什么？ 首先，标题应该是什么？我问了 ChatGPT，因为它正在做这项工作🙂   我的投资组合网站标题应该是什么？ 好的，我会和 Jane Doe 一起去 - 初学者 AI 用户 网站介绍   为我的投资组合网站写一篇介绍。我是初学者 AI 用户和程序员。 在该页面上创建图像元素 给我一个带有山的图像元素作为引导页面。 我将使用来自lorempicsum的山图像 <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain"> 为了简单起见，这将是一个页面。让我们为主页部分添加 id，并为与部分对应的锚标记添加 href。   <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> 制作关于部分   为网站上的关于页面创建关于我的文本。我喜欢攀岩和所有户外运动，我喜欢编程。我的职业生涯始于汽车行业的质量工程师，但我一直对编程充满好奇。我从自动化和微控制器编程开始。我 7 年前移居波兰。 4 年前，我开始自己使用 HTML 和 JavaScript 进行 Web 开发。我现在是一名全栈开发人员。 让我们将其粘贴到我们的关于部分 我们需要使这部分与设备一样高。因此，我请 ChatGPT 告诉我正确的方法。   如何在引导程序中使一个元素与设备一样高？ 我将按照说明将样式粘贴到 Head 标记中，并将类添加到包含该部分的 div 元素。  将联系人部分创建为表单。 （我们不会在本教程中使用它）   使用 Bootstrap 创建一个包含以下输入字段的联系表单。姓名、电子邮件、消息。   <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> 所以让我们复制它并为联系表单创建部分 最后，让我们为网站创建一些漂亮的背景   对于不太亮的 html 网站背景，什么是漂亮的 css 渐变？ 我使用了 paster 选项并粘贴在 head 标签中的样式标签中。   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); } 好的，查看结果 [HERE]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true 它已经准备好了！我很惊讶！不完美，但工作:) 我们不建议使用 ChatGPT 创建您的整个投资组合网站，但可以肯定的是它可以提供一些好的提示并可以改进您的工作。或者至少让它更容易、更省时。 如果您想了解更多基于 AI 的工具，请访问我们的 。如果您想提高您的 AI 技能，请加入我们的 马拉松，并在 3 或 7 天内创建一个应用程序的工作模型，这可以作为您创业的开始！ 生成式 AI 教程页面 AI 黑客 本文的主图由 HackerNoon 的 AI Image Generator 通过提示“网站”生成

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

該音頻是用故事的原始語言製作的！

使用 ChatGPT 创建网站时会发生什么？

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

Claude Sonnet 3.5 系统提示泄漏：法医分析

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

Claude Sonnet 3.5 系统提示泄漏：法医分析

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps