この記事のリード画像は、プロンプト「ウェブサイト」を介して HackerNoon の によって生成されました。 AI 画像ジェネレーター   はここ数週間で最もホットな トピックであり、誰もが ChatGPT との会話や多くの問題に関する回答を共有しています。また、人々はコードを書く能力についての洞察を共有しますが、私たちはそれについて話すつもりはありません。このチュートリアルでは、ChatGPT を使用して Web サイトを作成します。 ChatGPT AI また、ChatGPT やその他の画期的なテクノロジーに基づいたアプリを作成したい場合は、  への登録を検討してください。 AI ハッカソン だから…これ以上時間を無駄にせず、飛び込んでみましょう！  GPTChatでウェブサイトを作成する まず、プロンプトを挿入しました。  ブートストラップ レスポンシブ デザイン、レスポンシブ メニュー、モバイルでも動作するレスポンシブ ハンバーガー メニューを備えた HTML スケルトンを作成します。そして、jquery、popper、bootstrap など、body 終了タグの前に必要なすべてのスクリプトをインポートします。  ChatGPT から正しい応答が返されたように見えますが、念のため で確認し、そこで作業を続行しましょう。  replit 機能していることがわかりますが、モバイル メニューは機能していません。そして、ChatGPT がスケルトンを少し切り刻んだようで、1 つのスクリプトには終了タグがありません。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 がその役割を果たしてくれるので、私は ChatGPT に尋ねました 🙂   私のポートフォリオ Web サイトのタイトルは何にすべきですか? わかりました、Jane Doe と一緒に行きます - 初心者 AI ユーザー ウェブサイトの紹介   私のポートフォリオ Web サイトの紹介文を書きます。私は初心者の AI ユーザーであり、プログラマーです。 そのページに画像要素を作成します ブートストラップ ページの山のある画像要素を表示します。  lorempicsum の山の画像を使用します <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain"> わかりやすくするために、これは 1 ページになります。ホーム部分に 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>  aboutセクションの作成   ウェブサイト上の自己紹介ページ用に私についてのテキストを作成します。私はロック クライミングとすべてのアウトドア スポーツが好きで、プログラミングも好きです。私は自動車業界の品質エンジニアとしてキャリアをスタートしましたが、プログラミングには常に興味がありました。私は自動化とマイクロコントローラーのプログラミングから始めました。 7年前にポーランドに移住しました。私は 4 年前に HTML と JavaScript を使って独力で Web 開発を始めました。私は現在フルスタック開発者として働いています。 これをAboutセクションに貼り付けましょう このセクションをデバイスと同じ高さにする必要があります。そこで、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> これをコピーして、お問い合わせフォームのセクションを作成しましょう。そして最後に、Web サイトの素敵な背景を作成しましょう   。HTML Web サイトの背景に、明るすぎない素敵な CSS グラデーションは何ですか? 貼り付けオプションを使用して、head タグの style タグに貼り付けました。   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  OK、結果を見てください [こちら]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true そして準備は完了です！びっくりしました！完璧ではありませんが、機能しています:)  ChatGPT を使用してポートフォリオ Web サイト全体を作成することをお勧めするわけではありませんが、いくつかの良いヒントが得られ、作業を改善できることは確かです。少なくとも、より簡単に、より短い時間で作業できるようにします。  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 を使用して Web サイトを作成するとどうなりますか?

About Author

コメント

ラベル

この記事は

Related Stories

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps