ChatGPT là chủ đề AI 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. 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, thì bạn nên cân nhắc việc đăng ký AI Hackathons của chúng tôi.
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 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 không chỉ kiểm tra lại phản hồi đó để chắc chắn và tiếp tục làm việc vớ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 https://getbootstrap.com/docs/4.1/getting-started/introduction/ chúng tôi có thể thấy bootstrap đó kịch bản bị thiếu. 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> <!-- Bootstrap CSS --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"/></head><body><!-- Navigation --><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">My Website</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link"href="#">Contact</a></li></ul></div></nav><!-- Page content --><divclass="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><!-- Bootstrap JS --><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/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
<imgsrc="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.
<liclass="nav-item active"><aclass="nav-link"href="#home">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#about">About</a></li><liclass="nav-item"><aclass="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><divclass="form-group"><labelfor="name">Name</label><inputtype="text"class="form-control"id="name"placeholder="Enter your name"></div><divclass="form-group"><labelfor="email">Email</label><inputtype="email"class="form-control"id="email"placeholder="Enter your email"></div><divclass="form-group"><labelfor="message">Message</label><textareaclass="form-control"id="message"rows="3"placeholder="Enter your message"></textarea></div><buttontype="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.
Ok, xem kết quả:
https://replit.com/@Flafi87/LegitimatePrevailingScript#index.html https://legitimateprevailingscript.flafi87.repl.cohttps://legitimateprevailingscript.flafi87.repl.co
Và nó đã sẵn sàng! Tôi ngạc nhiên! Không hoàn hảo, nhưng đang hoạt độ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.
Nguồn từ: https://medium.com/