初心者歓迎 最新ChatGPTを活用して Javascript+HTML / CSS のコードを自動生成 高品質WEBページ開発講座
初心者歓迎 最新ChatGPTを活用して Javascript+HTML / CSS のコードを自動生成 高品質WEBページ開発講座
通常価格
¥14,600
通常価格
セール価格
¥14,600
講座の内容
- セクション1 ChatGPTを知ろう
- こんなことが出来るように 3:20
- ChatGPTを使えるようにする(1) 5:16
- ChatGPTを使えるようにする(2) 7:06
- VS Codeのインストール 5:55
- 学習の進め方 4:42
- セクション2 header部分の作成
- ページの大まかな要素を配置したコードをChatGPTに書いてもらう 9:02
- header要素の背景と文字列のコードを配置しプレビューする 7:14
- プレビューで不具合のあったコードを修正する 6:25
- メニューボタンのコードをsvgで書くようChatGPTに指示する 7:02
- メニュー画面のデザイン 7:40
- メニューボタンの大きさや位置を調整する 5:48
- メニューボタンの重なり順をコードで修正 7:05
- ボタンの開閉をJavascriptで実装する 8:09
- 文字が浮かび上がるJavascript 5:30
- Coffee Break (1) 5:23
- Coffee Break(2) 6:37
- セクション3 要素の位置指定
- positionを使った要素の配置 5:58
- positionプロパティを使って要素を配置するコードをChatGPTに書かせます 7:10
- ChatGPTの書いたコードをプレビュー 5:56
- reset.cssを読み込む 7:32
- Javascriptでトンボに動きをつける 8:00
- タイトル文字の動きを制御するJvascriptのコードを編集 6:23
- トンボの動きを制御するJvascriptのコードを編集 10:45
- 残りの要素をレイアウトする 8:34
- 細部の調整 9:24
- セクション４ ギャラリー部分の制作
- ギャラリー要素のコードを書く 5:49
- レイアウトのコードをプレビューしながら修正 7:57
- 擬似要素で画像に枠線を描く 5:39
- Javascriptで動きをつけて完成 4:50
- セクション5 Content03の制作 00
- レイアウトの検討とindex.htmlのコーディング 10:05
- CSSのコード（写真部分） 8:32
- 記事部分の制作 borderを使って下線をつける 4:47
- nav項目の修正 マウスオンで背景色を変える 0:21
- Googleフォントの使用（１） 6:07
- Googleフォントの使用（２） 9:09
- ChatGPTでコードを検証する 5:31
ChatGPTでWEBサイトはノーコードで完成、
このコースは、ChatGPTを使ってWEBサイト、ページを開発するための具体的で効果的な方法を解説したコースです。
このコースを終了すると、ChatGPTを使って、WEBページの制作に必要なhtml/CSSのコードを生成し、静的なページのデザインを行い、さらにJavascriptのコードを書いてもらってページに効果的な動きを加えることができるようになります。
学習のための時間は４時間と非常に短く、学んですぐに実務に応用することができます。
このコースは、ChatGPTを使ってWEBサイト、ページを開発するための具体的で効果的な方法を解説したコースです。
このコースを終了すると、ChatGPTを使って、WEBページの制作に必要なhtml/CSSのコードを生成し、静的なページのデザインを行い、さらにJavascriptのコードを書いてもらってページに効果的な動きを加えることができるようになります。
学習のための時間は４時間と非常に短く、学んですぐに実務に応用することができます。
こんな方にオススメ
- ChatGPTをWEBサイト開発にフル活用したいと考えている方
- 最新のCSSを使ってWEBページを作りたいと考えている方
- デザイン性の良く、UI/UXに優れたサイトをChatGPTで開発したい方
- 現在のWEBサイト開発業務をChatGPTで時短、効率化したいと思っている方
- WEBページに動きをつけるためJavascriptを実装したいが方法が分からない方
習得できるスキル
- 無料ChatGPT-5にJavascript、html/CSSの最適なコードを書かせるプロンプトを書けるようになります。
- 無駄な誤解を生まず、一発で最適なコードをChatGPTに提案してもらえるようになります。
- ChatGPTが書いたコードを細かく調整して、最適のレイアウトや動きを実現するCSSやJavascriptを学習できます。
- WEBページ作成でvwやvh、%、remなどの新しい単位を効果的に使えるようになります。
- WEBページ作成でpositionプロパティを使って、ページ内のどこにでも自由に要素を配置し、効果的にレイアウトする技術が学べます。
講座内容
このコースは、ChatGPTを使ってWEBサイト、ページを開発するための具体的で効果的な方法を解説したコースです。
このコースを終了すると、ChatGPTを使って、WEBページの制作に必要なhtml/CSSのコードを生成し、静的なページのデザインを行い、さらにJavascriptのコードを書いてもらってページに効果的な動きを加えることができるようになります。
学習のための時間は４時間と非常に短く、学んですぐに実務に応用することができます。
講座提供者
村守 康
大手半導体メーカー販促部門で勤務後、WEBサイトの開発を行うデザイン会社を設立。現在は現場での指導とともに社員の技術教育を多く行っています。
Photoshop、Illustratorなどデザイン系のアプリケーションと、HTML、CSS、Javascript、Python/Djangoなどフロントエンドからサーバーサイドまで、フルスタックのプログラミングを解説しています。
これまでにUdemyほかでコースを公開、Udemyでは80,000人を超える受講生の学びをサポートしています。
受講要件
- 特に必要な設備や環境はありません。開発はMacで行なっていますが、Windowsでも同じ画面で違和感はありません。
- 初心者でも取り組めますが、WEBページ制作の基本的な知識やスキルがあれば学習はより楽に効果的になります。
