inflearn logo
知識共有
inflearn logo

ポートフォリオ サイトを作成して公開まで!: Web 開発入門活用編

HTML&CSS、JavaScript を学んだら、それらを利用して自分でポートフォリオ サイトを作成し、公開してみましょう。実際に使ってみると、私たちのスキルを向上させるのに大いに役立ちます。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
github-pages
github-pages
Portfolio
Portfolio
HTML/CSS
HTML/CSS
JavaScript
JavaScript
github-pages
github-pages
Portfolio
Portfolio

お知らせ

30 件

  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    「割引が終わったのを知らずに逃してしまいました…」「次の割引はいつですか?」

    前回のセールの際、このようなメールやコメントを本当にたくさんいただきました。ですので、今回は終了前にもう一度必ずお伝えしたいと思いました。

    Claude Code完全マスター30%割引が今夜終了します。前回タイミングを逃してしまった方、今回がそのチャンスです。

    なぜ今なのか

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    同じClaude Codeを使っても、ある人は行き詰まる場面で、ある人は滞りなく結果を出し続けます。その差は結局、正しく学んだかで決まります。

    この講義で扱う内容

    • Claude Codeのインストールから実務ワークフローまで一気に習得するカリキュラム

    • サブエージェントを並列に活用してタスクを同時に処理する方法

    • 反復作業を自動化するカスタムコマンド・フック構成

    • プロジェクトのコンテキストを正確に把握し、AIが空回りしないようにする設計

    核心は「AIに仕事をさせる方法」ではなく、AIと共に働く人の実力を引き上げることです。

    🎯 迷っているのであれば、今日が最後です

    リリース以来7,400人以上が受講しており、開発者だけでなくマーケター、企画者、研究員、データアナリスト、学生などの非開発者まで、本当に多様な方々が参加されています。評価は4.9です。

    実はこの講義をすべて受講してからかなり経ちますが、継続的にアップデートされているのでレビューを残します。

    実は私、この講義が一度受講すれば無制限にアップデートされるとは知らずに購入しました。他の講師の方々を見ると、アップデートしてくれない人も多いじゃないですか。でも、この講義は本当に無制限アップデートみたいです。ある日見てみると新しく追加されていて、また見てみるとさら実に追加されていて。なので、後でジムコーディングさんがまた講義をリリースしたら、また受講しようと思いました。もちろん無制限アップデートのためだけではなく、説明も分かりやすく上手ですし、インストールから深化まで、正直言って本当に説明がめちゃくちゃ上手いです。声からも気合が伝わってきて、私は良かったです(笑)。もちろん好みは分かれるでしょうが、眠くてだるいものよりは、このように際立って気合の入った声の方が、個人的にはオンライン講義では良いと思います。

    とにかくこの講義は、私としては非常に満足している講義です。割引の時に購入しましたが、定価で買っても惜しくない講義です。

    迷っている間に割引がまた終わってしまいます。前回逃して悔しい思いをされたその気持ち、今日は繰り返さないでほしいです。

    30%割引は今夜終了します。終わる前に始めましょう。

    👉割引が終わる前に今すぐ受講する

    ありがとうございます! 🙇‍♂

    0
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    最近、AIコーディングツールが毎週のように新しく登場していますね。Cursor、Copilot、Gemini、Claude Code、Codex… ツールを変えてみても、結果が大きく変わらないという方も多いです。

    今回、InflearnでAIチートキーウィークイベントが開催され、Claude Code完全マスター30%割引中です。ちょうど9日後の深夜に割引が終了するため、事前にお知らせいたします!

    この講義の核心

    • Claude Code公式ドキュメントに基づいた正確なスペック学習(ブログの切り貼ではない体系的な内容)

    • 実戦で検証された開発ワークフローを自身の業務に落とし込む方法 into your own work vào công việc của bản thân.

    • ボーナス:プロンプト / コンテキスト / ハーネス 3大エンジニアリング Pillars: Prompt / Context / Harness về Prompt / Context / Harness

    ツールの使い方はYouTubeで1時間もあれば覚えられます。しかし、断片的なチップスを集めるだけでは、結局限界が来ます。公式スペックと検証済みのワークフロー、この二つの軸こそが本当の"チートキー"です。インフランが今回のイベントを「AIチートキーウィーク」と呼ぶのは偶然ではありません。

    👉今すぐ割引価格で受講する

    🎯 受講前の方々へ

    今やAIコーディングツールを使うか使わないかではなく、いかにうまく活用するかが実力の差を生む時代です。

    発売後7,000人が共に受講しており、802件の受講レビューで評価4.9を維持しています。開発者だけでなく、マーケター、プランナー、研究員、データアナリストまで、多様な職種の方々が業務自動化を目的として受講されています。

    "価格のせいで受講するかどうか非常に悩みました。私はインフラ関連の職務を準備中の就活生なのですが、果たしてこの講義から得られるものが多いだろうかという悩みもありました。

    講義を受けた後は、以前作っていたサービスをリファクタリングしており、Claude CodeだけでなくCodexも併用しながら、講義で教わったワークフローを実際の作業に適用しています。そのおかげで、ツール自体の使い方よりも、作業フローをより効率的に改善する方向性について多くを学んでいます。"

    — インフラ職を準備中の就活生、星5つの受講レビュー

    今回のAIチートキーウィーク30%割引は、9日後の深夜に終了します。

    👉割引が終わる前に受講する

    ありがとうございます! 🙇‍♂

    1
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    "Claude Codeをインストールしようとしていますが、何度もエラーが出ます。"
    "ターミナルが初めてなので、黒い画面を見るだけで途方に暮れてしまいます。"
    "インストールはしましたが、これから何をすればいいのか分かりません。"

    講座をリリースしてから5ヶ月が過ぎ、最も多くいただいた質問がまさにインストールと初回使用に関する部分でした。そこで今回、Claude Code入門者のための全体的な流れを最新バージョンに基づいて新しく整理し、追加しました!

    今回の講義は、単にインストールコマンドを真似するだけの動画ではありません。ターミナルが初めての方でも、恐れることなくクロードコードをインストールし、最初のアプリを完成させる体験まで一度に得られるように構成しました。

    今回の講義で扱う内容

    • 決済方法の選択ガイド — プロプラン vs マックスプラン、どちらを選ぶべきか

    • ターミナル・CLIの概念 — GUIと比較して、初心者でも一度で理解できる解説

    • OS別ネイティブインストール — macOS / Windows(PowerShell) + Git Bashまで

    • インストールエラーの解決法 — 最もつまずきやすい環境変数の設定(Windows/Mac両対応)

    • VS Code連携 + モデル変更(Sonnet) — トークンを節約しながら快適に使う設定

    • 初の実習:今日の運勢ウェブ作成 — 探索 → 計画 → 実装、検証されたAI開発ワークフロー体験

    今回の講義の核心は、Claude Codeを初めて使う方も無理なく進めながら、最初のアプリが完成する瞬間までを体験することです!

    👉講義を見に行く

    😊 受講中の方へ

    今回の追加チャットは、既存の受講生の皆様が追加費用なしですぐに受講いただけます。インストールの段階でつまずいていた方、もう一度最初から整理したかった方のどちらにもお役に立てるはずです。

    そして講義がお役に立ちましたら、受講レビューの一言が本当に大きな励みになります。まだレビューを残されていない方は、短くても構いませんので残していただけると幸いです! 🙏

    👉受講レビューを書く

    🎯 まだ受講前の方へ

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    リリース5ヶ月で6,800人以上が受講しており、開発者だけでなくマーケター、企画者、研究員、データ分析家、学生などの非開発者まで、様々な方々が一緒にClaude Codeを学んでいます。

    こんにちは、私は開発者ではなくマーケターです。
    GPTばかり使っていて限界を感じ、クロードコードの講義を探すようになりました。最初は「これは開発者の領域ではないか」と迷いましたが、非開発者の基準でも本当にできるんだと初めて感じさせてくれた講義でした...

    👉 レビュー原文

    Claude Codeを公式ドキュメントに基づいて正しく学習し、検証済みのAI開発ワークフローに落とし込む方法まで、一度に手に入れてください。

    👉今すぐ特別割引価格で受講する

    ありがとうございます! 🙇‍♂

    0
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    • "Claude Codeのトークン費用がとても負担になります"

    • "トークン代がどこで漏れているのか分かりません"といった質問が本当にたくさん寄せられているからです。

    そこで今回、追加講義としてしっかりとまとめました!

    今回の講義は、単なるトークン節約のコツではありません。Anthropic公式マーケットプレイスの171個のプラグインの中から、トークン節約に直結する4つだけを厳選し、測定から自動遮断までを一度にまとめた実践ガイドです。

    今回の講義で扱う内容

    • トークンがどこで漏れているかを一画面で表示するsession-report活用法 — HTMLダッシュボードでプロジェクト別・プロンプト別のトークン使用量と、最もコストの高いプロンプトまで分析する方法

    • 毎リクエストに自動で付随するCLAUDE.mdをクリーンに維持する claude-md-management 2つのツール(revise + improver)で、毎ターンのトークン税を削減する方法 clean, which automatically attaches to every request

    • 文字ではなく意味でコードを検索するserena MCPトークン節約1位のツールに選んだ理由からuvパッケージマネージャーの依存関係のインストールまで

    • Claudeのミスを未然に防ぐhookify — 4つの中でこれだけが、単なるトークンの節約を超えてハーネスエンジニアリングの核心をサポートしてくれる公式ツール

    • Anthropic公式マーケットプレイスで1行のコマンドで4つをインストールし、有効化する全体のワークフロー

    今回の講義の核心は、Anthropicが直接キュレーションした公式ツールでトークンの節約を完結させ、最後の一つでハーネスエンジニアリングまで到達する実践ツールセットです!

    👉 講義を見に行く!

    😊受講中の方へ

    Claude Code完全マスターを受講中の方は、追加費用なしですぐに新しい講義を受講いただけます。既存カリキュラムのセクション30の最後に追加されていますので、ご確認ください!

    そして、もし講義が役に立ちましたら、受講レビューの一言が本当に大きな力になります。まだレビューを残されていない方は、短くても構いませんので残していただければ幸いです! 🙏

    👉 受講レビューを書く

    🎯 まだ受講前の方へ

    今やClaude Codeを使うかどうかではなく、いかにトークンを効率的に使うかが、コストと結果の差を生む時代です。

    リリース6ヶ月で6,600人以上が受講しており、開発者だけでなくマーケター、データ分析家、学生、非開発者まで、多様な方々が参加しています。

    最近の受講レビュー

    人生で最も意味のある講義です。IT講義の中でこれほど誠実で、リアルタイムでアップデートされる講義は初めて見ましたし、おそらく最後になるのではないかと思います。本当に最高の講義であり、すべての方におすすめしたいです。

    gymcoding.co/vipにて特別割引価格で受講いただけます。割引が終了する前にぜひご確認ください!

    👉 今すぐ特別割引価格で受講する (gymcoding.co/vip)

    ありがとうございます! 🙇‍♂

    0
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    最近インスタグラム、スレッズ、YouTubeコミュニティにカードニュースを投稿しているのですが、それを見て「これどうやって作っているんですか?」「カードニュース、本当に上手ですね」とコメントしてくださる方が本当にたくさんいらっしゃいました。

    そこで、いっそのこと動画でしっかりと準備しています!結論から申し上げますと、このカードニュースはすべてClaudeのコードで作っています。別途のデザインツールやAI画像生成器を使わず、Claudeのサブスクリプション一つあれば追加料金0円で可能です。

    今回の講義の核心は"任せきりにせず、自らコントロールする"こと。AIに任せて毎回異なる結果を受け取るのではなく、ルールでコントロールすることで、一貫した結果がシステム的に出力されるようにする方法です!

    明日(4月21日)に追加講義としてアップロードする予定です。 今回の講義を受講される方には、実際に私が使用しているカードニュースのHTMLソースカードニュース作成スキルまで併せて提供しますので、動画を見るだけで終わるのではなく、すぐにご自身のブランドのカードニュースに適用していただけます!

    👉ジムコーディングのInstagramでカードニュースの例を見る

    😊受講中の方へ

    Claude Code完全マスターを受講中の方は、追加費用なしですぐに新しい講義をご視聴いただけます。明日、既存のカリキュラムに続いて追加される予定ですので、ご確認ください。

    そして、もし講義がお役に立ちましたら、受講レビューの一言が本当に大きな力になります。まだレビューを残されていない場合は、短くても構いませんので残していただけると幸いです! 🙏

    👉受講レビューを書く

    🎯 まだ受講前の方へ

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    リリース以降4,700人以上が受講しており、開発者だけでなくマーケター、データアナリスト、学生、非開発者まで、多様な方々が参加しています。

    開発について全く知らない初心者です。最初は講義も見ず、何の情報もないままChatGPTで開発を始め、次にCursorに移行してClaudeモデルの良さを感じ、現在はClaudeで開発を始めようとしている状態です。
    偶然、知人を通じてジムコーディングさんの講義を知ったのですが、講義を聴いてみると「自分はこれまで本当に何の計画もなくやっていたんだな」という思いが込み上げてきました。今回の講義を完了すれば、より体系的で理解度の高い開発ができるようになる気がします。そして継続的な講義のアップデート!!!大きな助けになりそうです。ありがとうございます^^
    元リンク

    gymcoding.co/vipで特別割引価格で受講いただけます。割引が終了する前にぜひご確認ください!

    👉今すぐ特別割引価格で受講する (gymcoding.co/vip)

    ありがとうございます! 🙇‍♂

    0
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    同じAIモデルなのに、ある時はうまくいき、ある時は散々な結果になったという経験、皆さんも一度はあるはずです。プロンプトも同じように書いたのに、なぜこれほど結果が違うのか、モデルの問題なのか、それとも自分が何かを見落としているのかと思う瞬間ですよね。

    最近このような悩みをお持ちの方が多いようで、今回の追加講義でしっかりとまとめました!

    今回の講義は、単なるプロンプトのコツではありません。同じAIモデルであっても、AIが働ける環境をどのように設計するかによって結果が完全に変わるということを、最新の研究事例とともに体系的に解き明かします。

    今回の講義で扱う内容

    • ハーネスエンジニアリングとは正確には何であり、なぜ今注目されているのか

    • Anthropicの実際の実験事例 — 同じモデルで9ドルで失敗したアプリ vs 200ドルで完成したアプリ、その違いは何だったのか

    • AIエージェントがミスをする3つの原因(セッション間の記憶喪失、Context Anxiety、Self-Evaluation)

    • CLAUDE.md、Permissions、Hooks、MCP、Subagentまで — Claude Codeでハーネスを設計する6つの構成要素

    • モデルが進化した場合、ハーネスのルールをどのように再検討すべきか

    今回の講義の核心は、AIのせいにするのではなく、AIがうまく働ける環境を作ることです!

    👉講義を見に行く!

    😊受講中の方へ

    Claude Code完全マスターを受講中の方は、追加費用なしですぐに新しい講義をご覧いただけます。既存のカリキュラムの最後に追加されていますので、ご確認ください。

    そして、講義が役に立ちましたら、受講レビューの一言が本当に大きな力になります。まだレビューを残されていない場合は、短くても書いていただけると幸いです! 🙏

    👉受講レビューを書く

    🎯 まだ受講前の方へ

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    リリース以降5,500人以上が受講しており、開発者だけでなくマーケター、データアナリスト、学生、非開発者まで、さまざまな方々が参加しています。

    "開発について全くの初心者です。最初は講義も見ず、何の情報もないままChatGPTで開発を始め、次にCursorに移行してClaudeモデルの良さを感じ、現在はClaudeで開発を始めようとしている状態です。偶然、知人を通じてジムコーディングさんの講義を知ったのですが、受講してみると「自分はこれまで本当に無計画にやっていたんだな」と思いました。今回の講義を終えれば、より体系的で理解度の高い開発ができるようになる気がします。そして継続的な講義のアップデート!!!大きな助けになりそうです。ありがとうございます^^" — LExxxx様

    gymcoding.co/vip で特別割引価格にて受講いただけます。割引が終了する前にぜひご確認ください!

    👉今すぐ特別割引価格で受講する

    ありがとうございます!🙇‍♂

    2
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    ハーネスエンジニアリングについて多くの関心が寄せられていますが、これが正確には何なのか気になっている方が多いようです!

    今回、追加講義として企画しています。

    ハーネスエンジニアリングは新しい技術ではありません。皆さんがすでに使っているCLAUDE.md、Hooks、Permissionsなどを体系的に設計する方法です。

    核心は「モデルを変える前に環境を変えろ」です。同じClaudeであっても、環境設計によって結果が完全に変わります。

    近日、追加講義としてアップロードする予定です。

    😊 受講中の皆様へ

    追加講義は、既存の受講生の皆様に追加費用なしで提供されます。

    そして、講義が役に立ちましたら、受講レビューの一言が本当に大きな力になります。まだレビューを残されていない場合は、短くても書いていただけると幸いです! 🙏

    👉受講レビューを書く

    🎯 まだ受講前の方へ

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    発売4ヶ月で5,000人以上が受講しており、開発者だけでなくマーケター、データ分析家、学生、非開発者まで、多様な方々が共にしています。

    最近の受講レビュー

    Inflearnで数十個の講義を受講してきましたが、この講義は次元が違いました。 本当にすごいです!!
    Claude Code関連の講義をYouTubeやInflearnでいくつか受講しましたが、
    このように基礎から最新のアップデートまで漏れなく体系的に扱う講義は初めてでした。単なる機能紹介にとどまらず、なぜこのように使うのかまで指摘してくださるのが本当に印象的でした。Vibe Codingを全く知らない方から、すでに経験のある方まで、誰にとっても実質的な助けになると確信しています。
    ...
    この講義の一部を適用しただけなのに、開発のスピードと深みが完全に変わりました。単に速く書けるだけでなく、設計のレベル自体が上がった感じです。本当に翼を授かった気分でした。

    ...
    正直、他の方には教えたくないくらいですが、それでも積極的におすすめします。ジムコーディングさんの新しい講義が出たら、間違いなく購入すると思います。すでにNext.js、Reactの講義もすぐに購入しました。これからもこのような講義をたくさん作っていただければ幸いです!

    受講レビューの原文を見る

    そして今、5,000人突破記念の全講座25%割引を実施中です!今日の深夜まで適用される割引です。以前、割引を逃したとご連絡をくださった方が多かったので、今回必ずお知らせいたします。

    👉今すぐ割引価格で受講する

    ありがとうございます! 🙇‍♂

    1
  • gymcoding님의 프로필 이미지

    こんにちは、ジムコーディングです!

    プロジェクトが大きくなるにつれてCLAUDE.mdも一緒に肥大化し、Claudeが的外れなルールに従ってしまいます... モノレポでCLAUDE.md一つですべてを管理しようとするのは限界を感じます...

    最近このような悩みをお持ちの方が多いようで、今回の追加講義でしっかりとまとめました!

    今回の講義は、単にCLAUDE.mdを複数のファイルに分割するテクニックではありません。フォルダーごとにマニュアルを分けておくことで、Claudeが該当するフォルダーで作業する時だけ自動的に読み込むようにする、検証済みの戦略です。

    今回の講義で扱う内容

    • 下位CLAUDE.mdの核心原理 — 該当フォルダを作業する時だけ自動ロードされる構造

    • Umbraco CMSの実例 — CLAUDE.md 23個で大規模プロジェクトを管理する方法

    • Braintree/PayPalの実例 — 決済機能別CLAUDE.md26個の運用パターン

    • .claude/rules/ vs 下位のCLAUDE.md — いつ何を使うべきかの比較表

    • ファイルサイズガイドライン — CopilotKit(29K )の30行ルート CLAUDE.md 事例

    今回の講義の核心は、ルールを減らすことではなく、今作業しているフォルダのルールだけをClaudeに見せる方法です!

    👉講義を見に行く!

    😊受講中の皆様へ

    今回の追加講義は、受講生の皆様なら追加費用なしですぐにご受講いただけます!

    講義がお役に立ちましたら、受講レビューの一言が本当に大きな力になります。まだレビューを書いていない方は、短くても構いませんので残していただけると幸いです! 🙏

    👉受講レビューを書く

    🎯 まだ受講前の方へ

    今やAIコーディングツールを使うか使わないかではなく、いかに使いこなすかが実力の差を生む時代です。

    リリース4ヶ月で4,500人以上が受講しており、開発者だけでなくマーケター、データ分析家、学生、非開発者まで、多様な方々が参加しています。

    最近の受講レビュー

    ただただ最高です自分の知らない部分が本当に多いです。正直勉強することも多いですが、その分分かりやすく教えてくれて実用的です。マジでおすすめします

    現在、リリース4ヶ月で受講生4,000名突破を記念して、ジムコーディングの全講座25%割引を実施中です。知識共有者が設定できる最大割引率です。4/6(月)までの期間限定ですので、この機会をお見逃しなく!

    👉今すぐ割引価格で受講する


    ありがとうございます! 🙇‍♂~~!!

    0

¥11,162