Hình ảnh chính cho bài viết này được tạo bởi  của HackerNoon thông qua dấu nhắc "trang web" Trình tạo hình ảnh AI    là chủ đề   nóng nhất trong những tuần qua - mọi người chia sẻ cuộc trò chuyện của họ với nó hoặc câu trả lời về nhiều vấn đề. Mọi người cũng chia sẻ những hiểu biết của họ về khả năng viết mã của nó - nhưng chúng tôi sẽ không nói về nó. Trong hướng dẫn này, chúng tôi sẽ tạo một trang web bằng ChatGPT. ChatGPT AI  Và nếu bạn muốn tạo một ứng dụng dựa trên ChatGPT và các công nghệ đột phá khác, bạn nên cân nhắc đăng ký   của chúng tôi. AI Hackathons  Vì vậy… đừng lãng phí thêm thời gian và hãy tham gia!  Tạo một trang web với GPTChat  Đầu tiên, tôi chèn lời nhắc của mình:    Tạo bộ khung html với thiết kế đáp ứng bootstrap và menu đáp ứng cũng như menu bánh hamburger đáp ứng cũng hoạt động trên thiết bị di động. Và nhập tất cả các tập lệnh cần thiết trước thẻ đóng body, chẳng hạn như jquery, popper và bootstrap.  Có vẻ như chúng tôi đã nhận được phản hồi chính xác từ ChatGPT nhưng để chắc chắn, chúng ta hãy kiểm tra lại   đó để chắc chắn và tiếp tục làm việc với phản hồi đó.  phản hồi  Chúng ta có thể thấy rằng nó đang hoạt động nhưng menu di động thì không. Và có vẻ như ChatGPT đã cắt nhỏ khung xương một chút và chúng tôi không có thẻ đóng cho một tập lệnh và nếu chúng tôi đang kiểm tra   chúng tôi có thể thấy bootstrap đó kịch bản bị thiếu. https://getbootstrap.com/docs/4.1/getting-started/introduction/  Vì vậy, chúng ta hãy sửa chữa nó. Ồ, và tôi cũng sẽ thay đổi bản nhập thành bản mới nhất dựa trên phần giới thiệu bootstrap.   <!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>  Hoan hô, nó đang hoạt động! Hãy làm việc trên nội dung. Tôi muốn có một trang web danh mục đầu tư.  Tiêu đề nên là gì?  Trước hết, tiêu đề nên là gì? Tôi đã hỏi ChatGPT, vì nó đang thực hiện công việc 🙂    Tiêu đề trang web danh mục đầu tư của tôi nên là gì?  Ok tôi sẽ đi với Jane Doe - Người dùng AI mới bắt đầu  Giới thiệu cho trang web     Viết phần giới thiệu cho trang web danh mục đầu tư của tôi. Tôi là người dùng AI mới bắt đầu và là một lập trình viên.  Tạo một yếu tố hình ảnh trên trang đó   Cho tôi xem phần tử hình ảnh có ngọn núi cho trang bootstrap.  Tôi sẽ sử dụng một hình ảnh ngọn núi từ lorempicsum   <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain">  Đây sẽ là một trang duy nhất vì mục đích đơn giản. Hãy thêm id cho phần nhà và thêm href vào các thẻ neo tương ứng với các phần.   <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>  Làm phần giới thiệu     Tạo một văn bản về tôi cho một trang giới thiệu trên một trang web. Tôi thích leo núi và tất cả các môn thể thao ngoài trời và tôi thích lập trình. Tôi bắt đầu sự nghiệp của mình với tư cách là một kỹ sư Chất lượng trong ngành ô tô nhưng tôi luôn tò mò về lập trình. Tôi bắt đầu với lập trình tự động hóa và vi điều khiển. Tôi chuyển đến Ba Lan 7 năm trước. Tôi bắt đầu tự phát triển web cách đây 4 năm với HTML và JavaScript. Tôi hiện đang làm việc với tư cách là Nhà phát triển Full Stack.  Hãy dán cái này vào phần giới thiệu của chúng tôi   Chúng ta cần làm cho phần này cao bằng thiết bị. Vì vậy, tôi đã yêu cầu ChatGPT chỉ cho tôi cách thực hiện chính xác.    Làm cách nào để tạo một phần tử cao như thiết bị trong bootstrap?  Tôi sẽ làm theo hướng dẫn và dán kiểu vào thẻ Head và thêm lớp vào phần tử div chứa phần đó.   Tạo phần liên hệ dưới dạng biểu mẫu. (Chúng tôi sẽ không làm cho nó hoạt động trong hướng dẫn này)     Tạo biểu mẫu liên hệ với Bootstrap với các trường nhập sau. Tên, email, tin nhắn.   <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>  Vì vậy, hãy sao chép phần này và tạo phần cho biểu mẫu Liên hệ Và cuối cùng, hãy tạo một số nền đẹp cho trang web    Độ dốc css đẹp cho nền trang web html không quá sáng là gì?  Tôi đã sử dụng tùy chọn paster và dán vào thẻ kiểu trong thẻ đầu.   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  Ok, xem kết quả  [TẠI ĐÂY]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true  Và nó đã sẵn sàng! Tôi ngạc nhiên! Không hoàn hảo, nhưng làm việc :)  Chúng tôi không đề xuất tạo toàn bộ trang web danh mục đầu tư của bạn bằng ChatGPT, nhưng chắc chắn rằng nó có thể đưa ra một số mẹo hay và có thể cải thiện công việc của bạn. Hoặc ít nhất là làm cho nó dễ dàng hơn và tốn ít thời gian hơn.  Nếu bạn muốn tìm hiểu thêm về các công cụ dựa trên AI, hãy truy cập   của chúng tôi. Và nếu bạn muốn cải thiện các kỹ năng AI của mình, hãy tham gia   của chúng tôi và tạo ra một mô hình ứng dụng hoạt động trong thời gian 3 hoặc 7 ngày, đây có thể là bước khởi đầu cho quá trình khởi nghiệp của bạn! trang hướng dẫn tổng quát về AI Hackathons AI  Hình ảnh chính cho bài viết này được tạo bởi Trình tạo hình ảnh AI của HackerNoon thông qua dấu nhắc "trang 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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Điều gì xảy ra khi bạn sử dụng ChatGPT để tạo trang web?

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

581 Stories To Learn About Non Fiction

240 Stories To Learn About Astounding Stories

72 Stories To Learn About Adam Smith

309 Stories To Learn About Smart Contracts

581 Stories To Learn About Non Fiction

240 Stories To Learn About Astounding Stories

72 Stories To Learn About Adam Smith

309 Stories To Learn About Smart Contracts

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps