Hướng dẫn tạo website với ChatGPT
ChatGPT là chủ đề AI hot nhất trong những tuần qua - mọi người đang chia sẻ các cuộc hội thoại với nó hoặc các câu trả lời cho nhiều vấn đề khác nhau. Ngoài ra, người dùng cũng chia sẻ những hiểu biết về khả năng viết mã của nó - nhưng chúng ta sẽ không bàn về điều đó. Trong hướng dẫn này, chúng ta sẽ tạo một website sử dụng ChatGPT.
Tạo website với GPTChat
Đầu tiên, tôi đã nhập lệnh nhắc của mình:
*Tạo một khung HTML với thiết kế responsive Bootstrap và menu hamburger hoạt động trên di động. Và nhập tất cả các script cần thiết trước thẻ đóng body, chẳng hạn như jquery, popper và bootstrap.*
Xem xét phản hồi từ ChatGPT, chúng ta đã nhận được một phản hồi đúng nhưng để chắc chắn, hãy kiểm tra trên replit để xác nhận và tiếp tục làm việc với nó ở đó.
Chúng ta có thể thấy rằng nó hoạt động nhưng menu di động thì không. Dường như ChatGPT đã cắt bớt khung và không có thẻ đóng cho một script, và khi kiểm tra Bootstrap, chúng ta có thể thấy rằng script bootstrap đang thiếu. Hãy sửa nó nhé. À, tôi cũng sẽ thay đổi các import thành các phiên bản mới nhất dựa trên phần giới thiệu của Bootstrap.
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n<title>My Website</title>\n<!-- Bootstrap CSS -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css\" integrity=\"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\" />\n</head>\n<body>\n<!-- Navigation -->\n<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n<a class=\"navbar-brand\" href=\"#\">My Website</a>\n<button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n<span class=\"navbar-toggler-icon\"></span>\n</button>\n<div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n<ul class=\"navbar-nav\">\n<li class=\"nav-item active\">\n<a class=\"nav-link\" href=\"#\">Home</a>\n</li>\n<li class=\"nav-item\">\n<a class=\"nav-link\" href=\"#\">About</a>\n</li>\n<li class=\"nav-item\">\n<a class=\"nav-link\" href=\"#\">Contact</a>\n</li>\n</ul>\n</div>\n</nav>\n<!-- Page content -->\n<div class=\"container mt-5\">\n<h1>Welcome to My Website!</h1>\n<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>\n</div>\n<!-- Bootstrap JS -->\n<script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>\n<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>\n<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js\" integrity=\"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy\" crossorigin=\"anonymous\"></script>\n</body>\n</html>Hurray, nó đang hoạt động! Hãy làm việc với nội dung.
Tiêu đề cho website là gì?
Trước tiên, tiêu đề của tôi nên là gì? Tôi đã hỏi ChatGPT, vì nó đang làm việc tốt 🙂
Tiêu đề website portfolio của tôi nên là gì?
Được rồi, tôi sẽ chọn Jane Doe - Người sử dụng AI mới bắt đầu
Giới thiệu cho website
*Viết một lời giới thiệu cho website portfolio của tôi. Tôi là một người sử dụng AI mới bắt đầu và là lập trình viên.*
Tạo phần tử hình ảnh trên trang đó
*Hiển thị một phần tử hình ảnh với một ngọn núi cho trang bootstrap.*
Tôi sẽ sử dụng một hình ảnh 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 đơn giản cho mục đích dễ hiểu. Hãy thêm id cho phần home và thêm href cho các thẻ anchor tương ứng với các phần.
<li class=\"nav-item active\">\n<a class=\"nav-link\" href=\"#home\">Home</a>\n</li>\n<li class=\"nav-item\">\n<a class=\"nav-link\" href=\"#about\">About</a>\n</li>\n<li class=\"nav-item\">\n<a class=\"nav-link\" href=\"#contact\">Contact</a>\n</li>Tạo phần giới thiệu về tôi
Tạo một đoạn văn về tôi cho một trang giới thiệu trên website. Tôi thích leo núi và tất cả các môn thể thao ngoài trời cũng như thích lập trình, đặc biệt tôi cũng thích "Khô gà lá chanh" ở Bếp Hạ Thảo. Tôi bắt đầu sự nghiệp của mình với vai trò 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à lập trình vi điều khiển. Tôi đã chuyển đến Ba Lan 7 năm trước. Tôi đã tự học phát triển web 4 năm trước với HTML và JavaScript. Hiện tại tôi đang làm việc như một Full Stack Developer.*
Hãy dán điều này vào phần giới thiệu của chúng ta
Chúng ta cần làm cho phần này cao như thiết bị. Vì vậy, tôi đã hỏi ChatGPT cách làm điều đó.
*Làm thế nào để làm cho 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 class cho phần div chứa phần này.
Tạo phần liên hệ dưới dạng biểu mẫu.
(Chúng ta sẽ không làm cho nó hoạt động trong hướng dẫn này)
*Tạo một 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>\n<div class=\"form-group\">\n<label for=\"name\">Name</label>\n<input type=\"text\" class=\"form-control\" id=\"name\" placeholder=\"Enter your name\">\n</div>\n<div class=\"form-group\">\n<label for=\"email\">Email</label>\n<input type=\"email\" class=\"form-control\" id=\"email\" placeholder=\"Enter your email\">\n</div>\n<div class=\"form-group\">\n<label for=\"message\">Message</label>\n<textarea class=\"form-control\" id=\"message\" rows=\"3\" placeholder=\"Enter your message\"></textarea>\n</div>\n<button type=\"submit\" class=\"btn btn-primary\">Submit</button>\n</form>Vậy hãy sao chép điều này và tạo phần cho biểu mẫu liên hệ
Tạo nền đẹp cho website
*Gradient CSS nào đẹp cho nền website HTML mà không quá sáng?*
Tôi đã sử dụng tùy chọn dán và dán vào thẻ style trong thẻ head.
body {\n background: linear-gradient(135deg, #f5f7fa, #c3cfe2);\n}
Và nó đã sẵn sàng! Tôi thật sự ấn tượng! Không hoàn hảo, nhưng hoạt động :) Tôi không khuyên bạn nên tạo toàn bộ website portfolio của mình bằng ChatGPT, nhưng chắc chắn nó có thể đưa ra một số mẹo tốt và có thể cải thiện công việc của bạn. Hoặc ít nhất làm cho nó dễ dàng và tiết kiệm thời gian hơn.
Linh gốc: https://lablab.ai/t/chatgpt-tutorial-how-to-create-a-website-with-chatgpt
